/* =========================================================
   BrainySaurus – USER.CSS (CLEAN + LOCKED – PASTE READY)
   Joomla 5.4 | Cassiopeia | Firefox 115 ESR safe
   ========================================================= */

/* =========================================================
   GLOBAL – STOP LEFT/RIGHT JUMP BETWEEN SHORT AND LONG PAGES
   ========================================================= */

html{
  overflow-y:auto !important;
  scrollbar-gutter:stable both-edges !important;
}

/* =========================================================
   BRAND BASE (safe global)
   ========================================================= */
:root{
  --bs-brand-navy:#23335B;
  --bs-bg:#F5F7FC;
  --bs-text:#111827;

  --pill-h:44px;
  --pill-r:12px;
  --pill-pad:18px;
  --pill-b:2px;

  --banner-max:1200px;
  --paid-max:1200px;
}

body{
  background:var(--bs-bg);
  color:var(--bs-text);
}

/* =========================================================
   BRAINYKAARTE – SCALABLE BUTTON ABSORPTION (LOCKED)
   Works for Gr4 K1–K4 (Itemid 191–194)
   ========================================================= */
body:is(.itemid-191,.itemid-192,.itemid-193,.itemid-194) .brainykaarte-item{
  display:inline-block;
  width:48%;
  margin:6px 1%;
}
body:is(.itemid-191,.itemid-192,.itemid-193,.itemid-194) .brainykaarte-item a{
  display:block;
  width:100%;
  text-align:center;
  text-decoration:none;
}

/* =========================================================
   HEADER / BANNER / NAV (CONSOLIDATED LOCKED)
   ========================================================= */

/* =========================================================
   HEADER SHELL (GLOBAL)
   ========================================================= */
header.header.container-header{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

header.header.container-header.full-width{
  overflow:visible !important;
  height:auto !important;
}

header.header.container-header.full-width > .grid-child{
  min-width:0 !important;
  overflow:visible !important;
}

/* =========================================================
   SITE LOGO (GLOBAL DEFAULT)
   Paid header overrides this below
   ========================================================= */
header.header.container-header .navbar-brand{
  margin:0 !important;
  padding:10px 0 !important;
}

header.header.container-header .navbar-brand img.logo,
header.header.container-header .navbar-brand img.logo.d-inline-block,
header.header.container-header .navbar-brand img{
  display:block !important;
  height:125px !important;
  width:auto !important;
  max-height:none !important;
  max-width:none !important;
  transform:translateY(-6px) !important;
  transform-origin:left center !important;
}

/* =========================================================
   NAV LAYOUT (GLOBAL BASE)
   ========================================================= */
header.header.container-header .grid-child.container-nav{
  min-width:0 !important;
  overflow:visible !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:12px !important;

  background:transparent !important;
  box-shadow:none !important;
}

header.header.container-header .grid-child.container-nav > ul.mod-menu{
  flex:1 1 auto !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:12px !important;

  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

header.header.container-header .container-nav > ul.mod-menu{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  width:auto !important;
}

header.header.container-header .container-nav ul.mod-menu > li{
  margin:0 !important;
  padding:0 !important;
}

header.header.container-header .container-nav > #mod-custom204{
  flex:0 0 auto !important;
  margin:0 0 0 auto !important;
  display:flex !important;
  align-items:center !important;
}

/* =========================================================
   MENU PILL BASELINE
   ========================================================= */
header.header.container-header .container-nav ul.mod-menu > li > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:var(--pill-h) !important;
  padding:0 var(--pill-pad) !important;
  margin:0 !important;

  border-radius:var(--pill-r) !important;
  font-weight:800 !important;
  font-size:0.95rem !important;
  line-height:1 !important;

  color:#fff !important;
  text-decoration:none !important;
  white-space:nowrap !important;

  background:rgba(255,255,255,0.14) !important;
  border:var(--pill-b) solid rgba(255,255,255,0.28) !important;
}

header.header.container-header .container-nav ul.mod-menu > li > a:hover,
header.header.container-header .container-nav ul.mod-menu > li > a:focus{
  filter:brightness(1.08) !important;
}

/* =========================================================
   MAIN MENU COLOURS
   ========================================================= */
header.header.container-header .container-nav ul.mod-menu > li.item-101 > a{ background:#1E63FF !important; } /* Voorblad */
header.header.container-header .container-nav ul.mod-menu > li.item-119 > a{ background:#00A8C6 !important; } /* Teken Aan */
header.header.container-header .container-nav ul.mod-menu > li.item-189 > a{ background:#F43F5E !important; } /* Teken Uit */
header.header.container-header .container-nav ul.mod-menu > li.item-209 > a{ background:#2F7A54 !important; } /* Leerwerk */
header.header.container-header .container-nav ul.mod-menu > li.item-210 > a{ background:#64748B !important; } /* Pryslys */
header.header.container-header .container-nav ul.mod-menu > li.item-249 > a{
  background:#F59E0B !important; /* Voorbeelde */
  color:#fff !important;
}

/* =========================================================
   BESTEL NOU (MODULE)
   ========================================================= */
header.header.container-header .container-nav #mod-custom204{
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  margin:0 0 0 auto !important;
}

header.header.container-header .container-nav #mod-custom204 p{
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
}

header.header.container-header .container-nav #mod-custom204 .brainy-product-link{
  height:var(--pill-h) !important;
  padding:0 20px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  line-height:1 !important;
  border-radius:var(--pill-r) !important;

  background:#fbf1dc !important;
  border:var(--pill-b) solid #f59e0b !important;
  color:#451a03 !important;

  text-decoration:none !important;
  font-weight:900 !important;

  box-shadow:0 6px 12px rgba(0,0,0,.12) !important;
}

/* =========================================================
   BESTELVORM / BESTEL NOU IF MENU LINK
   ========================================================= */
header.header.container-header .container-nav ul.mod-menu > li > a[href*="bestelvorm-2026"],
header.header.container-header .container-nav ul.mod-menu > li > a[href*="/bestelvorm-2026"],
header.header.container-header .container-nav ul.mod-menu > li > a[href*="bestel-nou"],
header.header.container-header .container-nav ul.mod-menu > li > a[href*="/bestel-nou/"]{
  background:#fbf1dc !important;
  border:var(--pill-b) solid #f59e0b !important;
  color:#451a03 !important;
  font-weight:900 !important;
  box-shadow:0 6px 12px rgba(0,0,0,.12) !important;
}

header.header.container-header .container-nav ul.mod-menu > li > a[href*="bestelvorm-2026"]:hover,
header.header.container-header .container-nav ul.mod-menu > li > a[href*="/bestelvorm-2026"]:hover,
header.header.container-header .container-nav ul.mod-menu > li > a[href*="bestel-nou"]:hover,
header.header.container-header .container-nav ul.mod-menu > li > a[href*="/bestel-nou/"]:hover{
  filter:brightness(1.05) !important;
  transform:translateY(-1px) !important;
}

/* =========================================================
   MENU VISIBILITY (LOCKED)
   ========================================================= */

/* Dashboard: hide Leerwerk */
body.itemid-188 header.header.container-header .container-nav ul.mod-menu > li.item-209{
  display:none !important;
}

/* Voorblad: hide Voorblad */
body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li.item-101{
  display:none !important;
}

/* Login page: hide Teken Aan */
body.itemid-119 .mod-menu li.item-119,
body.itemid-119 .mod-menu a.nav-auth{
  display:none !important;
}

/* Paid pages: hide Teken Aan */
body.tpl-paid .mod-menu li.item-119,
body.tpl-paid .mod-menu a.nav-auth{
  display:none !important;
}

/* Paid pages: hide Pryse */
body.tpl-paid header.header.container-header .container-nav ul.mod-menu > li.item-210{
  display:none !important;
}

/* =========================================================
   PUBLIC PAGES – BANNER + HEADER
   ========================================================= */
body:not(.tpl-paid){
  background:#DCE9E1 !important;
}

body:not(.tpl-paid) .site-grid,
body:not(.tpl-paid) .site,
body:not(.tpl-paid) main{
  background:transparent !important;
}

body:not(.tpl-paid) header.header.container-header{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  min-height:unset !important;
}

body:not(.tpl-paid) header.header.container-header.full-width{
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:visible !important;
  height:auto !important;
}

body:not(.tpl-paid) header.header.container-header .navbar-brand{
  display:none !important;
}

body:not(.tpl-paid) #mod-custom196 p{
  margin:0 !important;
  padding:0 !important;
}

body:not(.tpl-paid) header.header.container-header .container-topbar{
  margin:0 !important;
  padding:6px 0 0 !important;
  display:flex !important;
  justify-content:center !important;
}

body:not(.tpl-paid) header.header.container-header .container-topbar #mod-custom196{
  display:block !important;
  width:100% !important;
  max-width:var(--banner-max) !important;
  padding-left:clamp(14px, 2vw, 24px) !important;
  padding-right:clamp(14px, 2vw, 24px) !important;
  box-sizing:border-box !important;
}

body:not(.tpl-paid) header.header.container-header .container-topbar #mod-custom196 img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 !important;
  border-radius:18px !important;
  box-shadow:0 12px 26px rgba(0,0,0,0.22) !important;
}

body:not(.tpl-paid) header.header.container-header .grid-child.container-nav{
  max-width:var(--banner-max) !important;
  margin:-12px auto 0 !important;
  padding:0 clamp(14px, 2vw, 24px) 6px !important;
  box-sizing:border-box !important;

  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:12px !important;

  background:transparent !important;
  box-shadow:none !important;
}

body:not(.tpl-paid) header.header.container-header .grid-child.container-nav > ul.mod-menu{
  flex:1 1 auto !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  margin-right:auto !important;
}

body:not(.tpl-paid) header.header.container-header .grid-child.container-nav > #mod-custom204{
  flex:0 0 auto !important;
  margin:0 0 0 auto !important;
}

body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li.item-249{ order:1 !important; }
body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li.item-210{ order:2 !important; }
body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li.item-119{ order:3 !important; }
body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li.item-209{ order:1 !important; }
body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li.item-189{ order:3 !important; }

/* =========================================================
   PAID HEADER – SINGLE SOURCE OF TRUTH
   ========================================================= */
body.tpl-paid{
  background:#F3F7FF !important;
}

body.tpl-paid .site-grid,
body.tpl-paid .site,
body.tpl-paid main,
body.tpl-paid .grid-child.container-component,
body.tpl-paid .com-content-article,
body.tpl-paid .com-content-article__body,
body.tpl-paid .item-page{
  background:transparent !important;
}

body.tpl-paid header.header.container-header,
body.tpl-paid header.header.container-header.full-width{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding-top:8px !important;
  padding-bottom:0 !important;
  overflow:visible !important;
}

/* outer paid logo row */
body.tpl-paid header.header.container-header > .grid-child:not(.container-nav){
  max-width:var(--banner-max) !important;
  margin:0 auto 8px !important;
  padding:0 clamp(14px, 2vw, 24px) !important;
  box-sizing:border-box !important;
}

/* visible logo panel */
body.tpl-paid header.header.container-header > .grid-child:not(.container-nav) .navbar-brand{
  width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:14px 18px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:0 !important;

  background:rgba(250,248,244,0.92) !important;
  border-radius:22px !important;
  box-shadow:0 8px 18px rgba(0,0,0,0.08) !important;
}

/* center inner anchor */
body.tpl-paid header.header.container-header > .grid-child:not(.container-nav) .navbar-brand .brand-logo{
  width:100% !important;
  max-width:var(--banner-max) !important;
  display:block !important;
  line-height:0 !important;
}

/* paid header image */
body.tpl-paid header.header.container-header > .grid-child:not(.container-nav) .navbar-brand img.logo,
body.tpl-paid header.header.container-header > .grid-child:not(.container-nav) .navbar-brand img.logo.d-inline-block,
body.tpl-paid header.header.container-header > .grid-child:not(.container-nav) .navbar-brand img{
  display:block !important;
  margin:0 auto !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  max-width:100% !important;
  transform:none !important;
}

/* paid menu row */
body.tpl-paid header.header.container-header .grid-child.container-nav{
  max-width:var(--banner-max) !important;
  margin:0 auto !important;
  padding:0 clamp(14px, 2vw, 24px) 4px !important;
  box-sizing:border-box !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:12px !important;

  background:transparent !important;
  box-shadow:none !important;
}

body.tpl-paid header.header.container-header .grid-child.container-nav > ul.mod-menu{
  order:1 !important;
  flex:1 1 auto !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:12px !important;

  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin-right:auto !important;
}

body.tpl-paid header.header.container-header .grid-child.container-nav > #mod-custom204{
  order:2 !important;
  flex:0 0 auto !important;
  margin:0 0 0 auto !important;
  display:flex !important;
  align-items:center !important;
}

body.tpl-paid .grid-child.container-component{
  width:100% !important;
  max-width:var(--paid-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(14px, 2vw, 24px) !important;
  padding-right:clamp(14px, 2vw, 24px) !important;
  box-sizing:border-box !important;
}

body.tpl-paid .mod-breadcrumbs.breadcrumb{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */
@media (max-width:820px){
  body:not(.tpl-paid) header.header.container-header .grid-child.container-nav,
  body.tpl-paid header.header.container-header .grid-child.container-nav{
    gap:10px !important;
  }

  body:not(.tpl-paid) header.header.container-header .grid-child.container-nav > ul.mod-menu,
  body.tpl-paid header.header.container-header .grid-child.container-nav > ul.mod-menu{
    flex-wrap:wrap !important;
    gap:10px !important;
    row-gap:10px !important;
    column-gap:10px !important;
  }

  header.header.container-header .container-nav ul.mod-menu > li > a,
  header.header.container-header .container-nav #mod-custom204 .brainy-product-link{
    padding:0 14px !important;
    font-size:0.9rem !important;
  }
}

@media (max-width:640px){
  body:not(.tpl-paid) header.header.container-header .grid-child.container-nav,
  body.tpl-paid header.header.container-header .grid-child.container-nav{
    flex-wrap:wrap !important;
    justify-content:center !important;
  }

  body:not(.tpl-paid) header.header.container-header .grid-child.container-nav > ul.mod-menu,
  body.tpl-paid header.header.container-header .grid-child.container-nav > ul.mod-menu{
    flex:1 1 100% !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    margin-right:0 !important;
  }

  body:not(.tpl-paid) header.header.container-header .grid-child.container-nav > #mod-custom204,
  body.tpl-paid header.header.container-header .grid-child.container-nav > #mod-custom204{
    margin-left:0 !important;
    justify-content:center !important;
  }

  header.header.container-header .container-nav ul.mod-menu > li > a,
  header.header.container-header .container-nav #mod-custom204 .brainy-product-link{
    padding:0 12px !important;
    font-size:0.88rem !important;
  }
}

/* =========================================================
   DASHBOARD: GRADE BUTTON GRID (Itemid 188) (LOCKED)
   ========================================================= */
body.itemid-188 .grid-child.container-component{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}

body.itemid-188 .grid-child.container-component > nav,
body.itemid-188 .grid-child.container-component > #system-message-container,
body.itemid-188 .grid-child.container-component > main{
  grid-column:1 / -1 !important;
}

body.itemid-188 .grid-child.container-component .brainy-grade-tile{
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:center !important;
}

body.itemid-188 .grid-child.container-component .brainy-grade-tile.card .card-body{
  padding:0 !important;
}

body.itemid-188 .grid-child.container-component .brainy-grade-tile p{
  margin:0 !important;
}

body.itemid-188 .brainy-grade-link{
  display:inline-block !important;
  width:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  text-decoration:none !important;
}

body.itemid-188 .brainy-grade-link img{
  width:200px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
  transition:transform .18s ease, filter .18s ease !important;
}

body.itemid-188 .brainy-grade-link:hover img,
body.itemid-188 .brainy-grade-link:focus img{
  transform:translateY(-4px) scale(1.03) !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18)) !important;
}

@media (max-width:900px){
  body.itemid-188 .grid-child.container-component{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width:520px){
  body.itemid-188 .grid-child.container-component{ grid-template-columns:1fr !important; }
  body.itemid-188 .brainy-grade-link img{ width:150px !important; }
}

/* =========================================================
   BACK BUTTON STRUCTURE (LOCKED)
   ========================================================= */
body.tpl-paid .grid-child.container-component > .main-top.card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 0 14px 0 !important;
  width:100% !important;
}
body.tpl-paid .grid-child.container-component > .main-top.card > .card-body{ padding:0 !important; }
body.tpl-paid .grid-child.container-component > .main-top.card .mod-custom{ margin:0 !important; }

.brainy-back-link a,
.brainy-back-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  padding:10px 16px !important;
  border-radius:12px !important;

  font-size:0.95rem !important;
  text-decoration:none !important;

  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
.brainy-back-link a:hover,
.brainy-back-btn:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.03) !important;
}

body.tpl-paid .grid-child.container-component > .main-top.card .brainy-back-link{ margin:0 !important; }

/* Terug na Kwartale (BLUE) */
#mod-custom213 .brainy-back-link a,
#mod-custom345 .brainy-back-link a,
#mod-custom670 .brainy-back-link a,
#mod-custom881 .brainy-back-link a,
#mod-custom900 .brainy-back-link a,
#mod-custom902 .brainy-back-link a,
#mod-custom904 .brainy-back-link a{
  font-weight:800 !important;
  background:#eef2ff !important;
  border:2px solid #2563eb !important;
  color:#1e3a8a !important;
  box-shadow:0 6px 14px rgba(37,99,235,.18) !important;
}
#mod-custom213 .brainy-back-link a:hover,
#mod-custom345 .brainy-back-link a:hover,
#mod-custom670 .brainy-back-link a:hover,
#mod-custom881 .brainy-back-link a:hover,
#mod-custom900 .brainy-back-link a:hover,
#mod-custom902 .brainy-back-link a:hover,
#mod-custom904 .brainy-back-link a:hover{
  box-shadow:0 10px 18px rgba(37,99,235,.25) !important;
}

/* Terug na Graadkeuse (PURPLE) */
#mod-custom487 .brainy-back-link a,
#mod-custom487 .brainy-back-btn{
  font-weight:800 !important;
  background:#f4eaff !important;
  border:2px solid #9b59b6 !important;
  color:#4a1f66 !important;
  box-shadow:0 6px 14px rgba(155,89,182,.18) !important;
}
#mod-custom487 .brainy-back-link a:hover,
#mod-custom487 .brainy-back-btn:hover{
  box-shadow:0 10px 18px rgba(155,89,182,.28) !important;
}

/* Terug na Produkte (PINK) */
#mod-custom344 p,
#mod-custom346 p,
#mod-custom671 p,
#mod-custom882 p,
#mod-custom901 p,
#mod-custom903 p,
#mod-custom905 p{ margin:0 !important; }

#mod-custom344 .brainy-back-btn.back-produkte,
#mod-custom346 .brainy-back-btn.back-produkte,
#mod-custom671 .brainy-back-btn.back-produkte,
#mod-custom882 .brainy-back-btn.back-produkte,
#mod-custom901 .brainy-back-btn.back-produkte,
#mod-custom903 .brainy-back-btn.back-produkte,
#mod-custom905 .brainy-back-btn.back-produkte{
  padding:10px 16px !important;
  border-radius:12px !important;

  font-weight:900 !important;
  font-size:0.95rem !important;
  text-decoration:none !important;

  background:#fff1f2 !important;
  border:2px solid #e11d48 !important;
  color:#9f1239 !important;

  box-shadow:0 6px 14px rgba(225,29,72,.18) !important;
}
#mod-custom344 .brainy-back-btn.back-produkte:hover,
#mod-custom346 .brainy-back-btn.back-produkte:hover,
#mod-custom671 .brainy-back-btn.back-produkte:hover,
#mod-custom882 .brainy-back-btn.back-produkte:hover,
#mod-custom901 .brainy-back-btn.back-produkte:hover,
#mod-custom903 .brainy-back-btn.back-produkte:hover,
#mod-custom905 .brainy-back-btn.back-produkte:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 18px rgba(225,29,72,.25) !important;
  filter:brightness(1.03) !important;
}

/* =========================================================
   KIES JOU KWARTAAL – TILE GRID (FLOATING BADGES)
   ========================================================= */
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:22px !important;
  align-items:start !important;
}

body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component > nav,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component > #system-message-container,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component > main,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component > .main-top{
  grid-column:1 / -1 !important;
}

body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component > .main-bottom.card{
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component > .main-bottom.card > .card-body{
  padding:0 !important;
}

body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-tile,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-tile.q1,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-tile.q2,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-tile.q3,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-tile.q4{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:0 !important;
  margin:10px 0 !important;
  min-height:0 !important;
  width:auto !important;
  max-width:none !important;
  text-align:center !important;
}

body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-link{
  display:inline-block !important;
  width:auto !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:0 !important;
  margin:0 !important;
  text-decoration:none !important;
}

body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-link img{
  width:200px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
  transition:transform .18s ease, filter .18s ease !important;
}

body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-link:hover img,
body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-link:focus img{
  transform:translateY(-4px) scale(1.03) !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18)) !important;
}

@media (max-width:768px){
  body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .grid-child.container-component{
    grid-template-columns:1fr !important;
  }
  body.tpl-paid:not(.itemid-188):not(.brainy-kwartaal) .brainy-quarter-link img{
    width:150px !important;
  }
}

/* =========================================================
   KWARTAAL PRODUCT CARDS (LOCKED / CLEAN)
   ========================================================= */
body.brainy-kwartaal .com-content-article__body{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(280px, 1fr)) !important;
  gap:24px !important;
  align-items:start !important;
}
body.brainy-kwartaal .com-content-article__body > p:first-child{
  grid-column:1 / -1 !important;
  margin:0 0 6px 0 !important;
}
@media (max-width:768px){
  body.brainy-kwartaal .com-content-article__body{ grid-template-columns:1fr !important; }
}

.brainy-product-card{
  border-radius:16px !important;
  padding:14px 16px 16px !important;
  border:2px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.08) !important;
  margin:0 !important;
  min-height:0 !important;
}

.brainy-product-card .brainy-card-title,
.brainy-product-card .brainy-product-title{
  margin:0 0 12px !important;
  padding:0 !important;
  text-align:center !important;
  font-weight:800 !important;
  font-size:1.15rem !important;
  line-height:1.2 !important;
  color:#23335B !important;
}

.brainy-product-card .brainy-card-buttons,
.brainy-product-card .brainy-product-buttons{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
}
.brainy-product-card .brainy-card-buttons + .brainy-card-buttons{ display:none !important; }

.brainy-product-card .brainy-inner-btn,
.brainy-product-card .brainy-product-button{
  display:block !important;
  text-align:center !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  font-weight:700 !important;
  font-size:0.95rem !important;
  text-decoration:none !important;

  background:#ffffff !important;
  border:2px solid rgba(0,0,0,.12) !important;
  color:#0f172a !important;

  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease,
             background-color .12s ease, color .12s ease, border-color .12s ease !important;
}

.brainy-product-card .brainy-inner-btn:hover,
.brainy-product-card .brainy-product-button:hover{
  transform:translateY(-1px) !important;
  filter:brightness(0.98) !important;
}

/* Colour variants */
.brainy-product-card.p-animasies{ background:#fef2f2 !important; border-color:#dc2626 !important; }
.brainy-product-card.p-animasies .brainy-inner-btn,
.brainy-product-card.p-animasies .brainy-product-button{ border-color:#dc2626 !important; }
.brainy-product-card.p-animasies .brainy-inner-btn:hover,
.brainy-product-card.p-animasies .brainy-product-button:hover{ background:#dc2626 !important; color:#fff !important; }

.brainy-product-card.p-brainykaarte{ background:#eff6ff !important; border-color:#2563eb !important; }
.brainy-product-card.p-brainykaarte .brainy-inner-btn,
.brainy-product-card.p-brainykaarte .brainy-product-button{ border-color:#2563eb !important; }
.brainy-product-card.p-brainykaarte .brainy-inner-btn:hover,
.brainy-product-card.p-brainykaarte .brainy-product-button:hover{ background:#2563eb !important; color:#fff !important; }

.brainy-product-card.p-quizzes{ background:#fff7ed !important; border-color:#f59e0b !important; }
.brainy-product-card.p-quizzes .brainy-inner-btn,
.brainy-product-card.p-quizzes .brainy-product-button{ border-color:#f59e0b !important; }
.brainy-product-card.p-quizzes .brainy-inner-btn:hover,
.brainy-product-card.p-quizzes .brainy-product-button:hover{ background:#f59e0b !important; color:#451a03 !important; }

.brainy-product-card.p-wiskunde{ background:#faf5ff !important; border-color:#9333ea !important; }
.brainy-product-card.p-wiskunde .brainy-inner-btn,
.brainy-product-card.p-wiskunde .brainy-product-button{ border-color:#9333ea !important; }
.brainy-product-card.p-wiskunde .brainy-inner-btn:hover,
.brainy-product-card.p-wiskunde .brainy-product-button:hover{ background:#9333ea !important; color:#fff !important; }

.brainy-product-card.p-wiskunde .brainy-card-buttons,
.brainy-product-card.p-wiskunde .brainy-product-buttons{
  grid-template-columns:1fr !important;
  justify-items:center !important;
}
.brainy-product-card.p-wiskunde .brainy-inner-btn,
.brainy-product-card.p-wiskunde .brainy-product-button{
  width:min(260px, 100%) !important;
}

/* Animasies landing block inside kwartaal grid */
body.brainy-kwartaal .com-content-article__body > .brainy-anim-landing{
  grid-column:1 / -1 !important;
  justify-self:center !important;
  width:100% !important;
}

/* =========================================================
   ANIMASIES LANDING ARTICLES (LOCKED – CANONICAL)
   ========================================================= */
.brainy-anim-landing{
  max-width:980px;
  margin:0 auto;
}

.brainy-anim-landing .brainy-anim-units{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:16px !important;
  margin-top:22px !important;
}

.brainy-anim-landing .brainy-anim-unit{
  text-align:center;
  min-height:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:18px;
  padding:16px;
  text-decoration:none;

  border-width:4px !important;
  border-style:solid !important;

  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 0 0 2px rgba(0,0,0,.10) inset,
    0 0 18px rgba(35,51,91,.18) !important;

  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  flex:0 1 260px !important;
  max-width:280px !important;
}

.brainy-anim-landing .brainy-anim-unit:nth-child(1){
  border-color:rgba(242, 170, 0, .95) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 0 0 2px rgba(242,170,0,.18) inset,
    0 0 18px rgba(242,170,0,.28) !important;
}
.brainy-anim-landing .brainy-anim-unit:nth-child(2){
  border-color:rgba(0, 120, 255, .95) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 0 0 2px rgba(0,120,255,.18) inset,
    0 0 18px rgba(0,120,255,.28) !important;
}
.brainy-anim-landing .brainy-anim-unit:nth-child(3){
  border-color:rgba(190, 90, 255, .95) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 0 0 2px rgba(190,90,255,.18) inset,
    0 0 18px rgba(190,90,255,.28) !important;
}
.brainy-anim-landing .brainy-anim-unit:nth-child(4){
  border-color:rgba(0, 200, 170, .95) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 0 0 2px rgba(0,200,170,.18) inset,
    0 0 18px rgba(0,200,170,.28) !important;
}
.brainy-anim-landing .brainy-anim-unit:nth-child(5){
  border-color:rgba(255, 80, 140, .95) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 0 0 2px rgba(255,80,140,.18) inset,
    0 0 18px rgba(255,80,140,.28) !important;
}
.brainy-anim-landing .brainy-anim-unit:nth-child(6){
  border-color:rgba(120, 120, 255, .95) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 0 0 2px rgba(120,120,255,.18) inset,
    0 0 18px rgba(120,120,255,.28) !important;
}

.brainy-anim-landing .brainy-anim-unit:hover{
  transform:translateY(-2px) !important;
  filter:saturate(1.06);
}

@media (max-width:900px){
  .brainy-anim-landing .brainy-anim-unit{ flex:0 1 320px !important; max-width:360px !important; }
}
@media (max-width:560px){
  .brainy-anim-landing .brainy-anim-unit{ flex:1 1 100% !important; max-width:520px !important; }
}

.brainy-anim-unit-name{
  display:block;
  font-weight:900;
  color:#23335B;
  margin-bottom:6px;
}
.brainy-anim-unit-desc{
  display:block;
  color:#23335B;
  opacity:.9;
  line-height:1.25;
}

/* =========================================================
   ANIMASIES – TEXTBOOK COVER + HEADER
   ========================================================= */
.brainy-anim-textbook-cover{
  max-width:160px;
  width:100%;
  height:auto;
  display:block;
  margin:0;
  border-radius:8px;

  border:3px solid rgba(220, 38, 38, .95) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.14),
    0 0 0 2px rgba(220,38,38,.22) inset,
    0 0 22px rgba(220,38,38,.40) !important;
}

.brainy-anim-header{
  display:grid;
  grid-template-columns:auto minmax(0,520px);
  column-gap:24px;
  row-gap:6px;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0 auto 16px;
  transform:translateX(-22px);
}

.brainy-anim-header .brainy-anim-textbook-cover{ grid-row:1 / span 10; }

.brainy-anim-header > :not(img){
  grid-column:2;
  justify-self:center;
  max-width:520px;
}

.brainy-anim-subtitle{
  margin:0 0 6px;
  font-weight:900;
  color:#23335B;
  font-size:1.25rem;
}
.brainy-anim-kicker{
  font-weight:900;
  letter-spacing:.4px;
  color:#23335B;
  opacity:.9;
  font-size:.95rem;
  margin:0 0 6px;
}
.brainy-anim-title{
  margin:0 0 6px;
  font-weight:900;
  color:#23335B;
  font-size:1.1rem;
}
.brainy-anim-note{
  margin:0;
  color:#23335B;
  opacity:.85;
}

@media (max-width:640px){
  .brainy-anim-header{
    grid-template-columns:1fr;
    transform:none;
    text-align:center;
  }
  .brainy-anim-textbook-cover{ margin:0 auto 14px; }
  .brainy-anim-header > :not(img){
    grid-column:auto;
    max-width:100%;
  }
}


/* =========================================================
   GRADE PAGES HEADING BOOST
   ========================================================= */
body.tpl-paid.view-article .com-content-article__body > p:first-child {
  font-size:1.8rem;
  font-weight:700;
  color:#23335B;
  margin-bottom:20px;
  letter-spacing:0.5px;
}

.brainy-badge{
  max-width:150px;
  height:auto;
  margin-bottom:12px;
}

/* =========================================================
   VOORBLAD (Itemid 101) – NEW LANDING PAGE BASE
   ========================================================= */
html,
body.itemid-101{
  background:#E3F2E8 !important;
}

body.itemid-101{
  position:relative;
}

body.itemid-101::before{
  content:none !important;
}

body.itemid-101 .site-grid,
body.itemid-101 header.header.container-header{
  position:relative;
  z-index:1;
}

body.itemid-101 header.header.container-header{
  background:transparent !important;
}

body.itemid-101 header.header.container-header.full-width{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
body.itemid-101 .site-grid{
  padding-top:0 !important;
}
body.itemid-101 main{
  margin-top:0 !important;
  padding-top:0 !important;
}

body.itemid-101 .grid-child.container-component{
  width:100% !important;
  max-width:var(--banner-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(14px, 2vw, 24px) !important;
  padding-right:clamp(14px, 2vw, 24px) !important;
  box-sizing:border-box !important;
}

body.itemid-101 header.header.container-header .grid-child.container-nav .mod-custom p{
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
}

body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li > a,
body.itemid-101 header.header.container-header .container-nav #mod-custom204 .brainy-product-link,
body.itemid-101 header.header.container-header .container-nav #mod-custom727 .brainy-product-link{
  height:var(--pill-h) !important;
  border-radius:var(--pill-r) !important;
  border-width:var(--pill-b) !important;
  box-shadow:0 6px 12px rgba(0,0,0,.12) !important;
}

body.itemid-101 .p-my-leerwerk .brainy-product-link{
  height:var(--pill-h) !important;
  padding:0 20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#2F7A54 !important;
  color:#fff !important;
  font-weight:900 !important;
  border-radius:var(--pill-r) !important;
  border:var(--pill-b) solid rgba(255,255,255,0.28) !important;
  box-shadow:0 6px 12px rgba(0,0,0,.12) !important;
  text-decoration:none !important;
}
body.itemid-101 .p-my-leerwerk .brainy-product-link:hover{
  filter:brightness(1.05) !important;
  transform:translateY(-1px) !important;
}

body.itemid-101 .main-bottom.card{
  margin-top:0 !important;
}

/* =========================================================
   NEW LANDING PAGE – ARTICLE-DRIVEN HOME (Itemid 101)
   ========================================================= */
body.itemid-101 .com-content-article,
body.itemid-101 .com-content-article__body,
body.itemid-101 .item-page{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}

body.itemid-101 .voorblad-wrap{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

body.itemid-101 .vb-section{
  display:block !important;
  padding:22px 0 !important;
  margin:0 !important;
}

body.itemid-101 .vb-container{
  max-width:1100px;
  margin:0 auto;
  padding:28px 32px;
  border-radius:22px;
  box-sizing:border-box;
}

body.itemid-101 .vb-section:nth-of-type(odd) .vb-container{
  background:#FFF8F5;
}
body.itemid-101 .vb-section:nth-of-type(even) .vb-container{
  background:#FFE7DE;
}

body.itemid-101 .vb-section h1,
body.itemid-101 .vb-section h2,
body.itemid-101 .vb-section p,
body.itemid-101 .vb-section li,
body.itemid-101 .vb-section div,
body.itemid-101 .vb-section a{
  color:#23335B !important;
}

body.itemid-101 .vb-section h1{
  margin:0 0 16px !important;
  font-size:clamp(2rem, 4vw, 3.4rem) !important;
  line-height:1.05 !important;
  font-weight:900 !important;
}

body.itemid-101 .vb-section h2{
  margin:0 0 18px !important;
  font-size:clamp(1.4rem, 2.2vw, 2.2rem) !important;
  line-height:1.15 !important;
  font-weight:900 !important;
}

body.itemid-101 .vb-section p{
  margin:0 0 16px !important;
  font-size:1.05rem !important;
  line-height:1.6 !important;
}

body.itemid-101 .vb-section a{
  text-decoration:none !important;
}

/* Hero */
body.itemid-101 #vb-hero{
  padding-top:32px;
  padding-bottom:26px;
}

body.itemid-101 .vb-hero-inner{
  display:grid;
  grid-template-columns:1.05fr 0.95fr !important;
  gap:34px;
  align-items:center;
}

body.itemid-101 .vb-hero-text{
  max-width:620px !important;
}

body.itemid-101 .vb-hero-text p{
  margin:0 0 14px !important;
}

body.itemid-101 .vb-hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-top:14px;
}

body.itemid-101 .vb-hero-visual{
  height:auto;
  border-radius:20px;
  overflow:hidden;
  background:none;
  box-shadow:0 16px 30px rgba(0,0,0,0.10);
}

body.itemid-101 .vb-hero-visual img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Hero buttons */
body.itemid-101 .vb-hero-actions .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 6px 12px rgba(0,0,0,.12) !important;
  border:2px solid transparent !important;
}

body.itemid-101 .vb-hero-actions .btn.btn-secondary{
  background:#FDBA74 !important;
  color:#7C2D12 !important;
  border-color:#F59E0B !important;
}

body.itemid-101 .vb-hero-actions .btn.btn-dark{
  background:#64748B !important;
  color:#fff !important;
  border-color:#64748B !important;
}

body.itemid-101 .vb-hero-actions .btn.btn-warning{
  background:#fbf1dc !important;
  color:#451a03 !important;
  border-color:#f59e0b !important;
}

body.itemid-101 .vb-hero-actions .btn.btn-info{
  background:#00A8C6 !important;
  color:#fff !important;
  border-color:#00A8C6 !important;
}

@media (max-width:980px){
  body.itemid-101 .vb-hero-inner{
    grid-template-columns:1fr !important;
    gap:24px;
  }

  body.itemid-101 .vb-hero-visual{
    height:auto;
  }
}

@media (max-width:560px){
  body.itemid-101 #vb-hero{
    padding-top:20px;
    padding-bottom:20px;
  }

  body.itemid-101 .vb-hero-inner{
    gap:18px;
  }

  body.itemid-101 .vb-hero-text p{
    margin:0 0 12px !important;
  }

  body.itemid-101 .vb-hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px !important;
    margin-top:12px;
  }

  body.itemid-101 .vb-hero-actions .btn{
    width:100%;
    min-height:48px !important;
  }

  body.itemid-101 .vb-hero-visual{
    height:auto;
    border-radius:18px;
    box-shadow:0 12px 24px rgba(0,0,0,.09);
  }
}

/* Why Brainy */
body.itemid-101 #vb-why .vb-container{
  background:#F2E4DF !important;
}

body.itemid-101 #vb-why h2{
  margin:0 0 10px !important;
  text-align:left !important;
}

body.itemid-101 .vb-why-subline{
  margin:0 0 18px !important;
  font-size:1.05rem !important;
  line-height:1.45 !important;
  font-weight:700 !important;
  text-align:left !important;
  color:#42526e !important;
}

body.itemid-101 .vb-why-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}

body.itemid-101 .vb-why-item{
  background:#fff !important;
  border:2px solid rgba(35,51,91,.08) !important;
  border-radius:18px !important;
  padding:16px 18px !important;
  box-shadow:0 8px 16px rgba(0,0,0,.05) !important;
  text-align:left !important;
  min-height:0 !important;
}

body.itemid-101 .vb-why-item h3{
  margin:0 0 8px !important;
  font-size:1.14rem !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  text-align:left !important;
  color:#23335B !important;
}

body.itemid-101 .vb-why-item p{
  margin:0 !important;
  font-size:0.98rem !important;
  line-height:1.5 !important;
  font-weight:600 !important;
  text-align:left !important;
  color:#42526e !important;
}

/* subtle card personality */
body.itemid-101 .vb-why-item:nth-child(1){ background:#FFFDF8 !important; }
body.itemid-101 .vb-why-item:nth-child(2){ background:#F9FCFF !important; }
body.itemid-101 .vb-why-item:nth-child(3){ background:#FFF9FB !important; }
body.itemid-101 .vb-why-item:nth-child(4){ background:#FAFFF8 !important; }

@media (max-width:768px){
  body.itemid-101 .vb-why-grid{
    grid-template-columns:1fr;
  }

  body.itemid-101 .vb-why-item{
    padding:16px 16px !important;
  }

  body.itemid-101 .vb-why-subline{
    margin:0 0 16px !important;
  }
}

/* Product badges */
body.itemid-101 .vb-products-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}

body.itemid-101 .vb-product-badge{
  display:block;
  width:140px;
  transition:transform .2s ease;
}

body.itemid-101 .vb-product-badge img{
  width:100%;
  height:auto;
  display:block;
}

body.itemid-101 .vb-product-badge:hover{
  transform:translateY(-5px) scale(1.05);
}

body.itemid-101 .vb-coming-title{
  margin-top:20px;
  margin-bottom:10px;
  text-align:center;
  opacity:0.7;
}

body.itemid-101 .vb-product-badge.coming{
  opacity:0.5;
  filter:grayscale(100%);
}

/* Steps */
body.itemid-101 .vb-steps-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

body.itemid-101 .vb-step{
  background:#fff !important;
  border:2px solid rgba(35,51,91,.08) !important;
  border-radius:16px !important;
  padding:20px 16px !important;
  font-weight:800 !important;
  text-align:center !important;
  box-shadow:0 8px 16px rgba(0,0,0,.06) !important;
}

/* CTA section center */
body.itemid-101 #vb-cta .vb-container,
body.itemid-101 #vb-trust .vb-container{
  text-align:center;
}

@media (max-width:768px){
  body.itemid-101 .vb-why-grid,
  body.itemid-101 .vb-steps-grid{
    grid-template-columns:1fr;
  }

  body.itemid-101 .vb-container{
    padding:22px 18px;
  }
}

/* =========================================================
   VOORBEELDE GRID (LOCKED)
   ========================================================= */
.brainy-voorbeelde-wrap{
  max-width:1200px;
  margin:0 auto;
}

.brainy-voorbeelde-products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:16px;
  margin-bottom:40px;
}

@media (max-width:991px){
  .brainy-voorbeelde-products{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px){
  .brainy-voorbeelde-products{
    grid-template-columns:1fr;
  }
}

.brainy-voorbeelde-products .brainy-product-card{
  height:100%;
  text-align:center;
  padding:14px 14px 12px;
  border:2px solid transparent !important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}

.brainy-voorbeelde-products .brainy-product-badge{
  text-align:center;
  margin-bottom:6px;
}

.brainy-voorbeelde-products .brainy-product-badge img{
  max-width:130px;
  width:100%;
  height:auto;
  display:inline-block;
}

.brainy-voorbeelde-products .brainy-product-card p{
  text-align:left;
  margin:0 0 8px;
  font-size:0.95rem;
  line-height:1.45;
  flex-grow:1;
}

.brainy-voorbeelde-products .brainy-product-card p:last-child{
  text-align:center;
  margin-top:10px;
  margin-bottom:0;
  flex-grow:0;
}

.brainy-voorbeelde-products .brainy-product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* Product button colours */
.brainy-voorbeelde-products .p-animasies .btn{
  background:#1f78d1 !important;
  border-color:#1f78d1 !important;
  color:#fff !important;
}

.brainy-voorbeelde-products .p-brainykaarte .btn{
  background:#2ca52c !important;
  border-color:#2ca52c !important;
  color:#fff !important;
}

.brainy-voorbeelde-products .p-quizzes .btn{
  background:#ef6c00 !important;
  border-color:#ef6c00 !important;
  color:#fff !important;
}

.brainy-voorbeelde-products .p-opsommings .btn{
  background:#8e24aa !important;
  border-color:#8e24aa !important;
  color:#fff !important;
}

.brainy-voorbeelde-products .p-vraestelle .btn{
  background:#d89b00 !important;
  border-color:#d89b00 !important;
  color:#fff !important;
}

.brainy-voorbeelde-products .p-wiskunde .btn{
  background:#d93636 !important;
  border-color:#d93636 !important;
  color:#fff !important;
}

.brainy-voorbeelde-products .brainy-product-card .btn:hover,
.brainy-voorbeelde-products .brainy-product-card .btn:focus{
  filter:brightness(0.95);
}

/* Card colours */
.brainy-voorbeelde-products .p-animasies{
  background:#f4ecec;
  border-color:#ff3b30 !important;
}

.brainy-voorbeelde-products .p-brainykaarte{
  background:#eaf1fb;
  border-color:#2f6bff !important;
}

.brainy-voorbeelde-products .p-quizzes{
  background:#f5efe5;
  border-color:#f39c12 !important;
}

.brainy-voorbeelde-products .p-opsommings{
  background:#f2edf8;
  border-color:#a63de0 !important;
}

.brainy-voorbeelde-products .p-vraestelle{
  background:#f6eee8;
  border-color:#8b5e4a !important;
}

.brainy-voorbeelde-products .p-wiskunde{
  background:#f8ecf4;
  border-color:#e91e63 !important;
}

/* Wiskunde coming soon */
.brainy-voorbeelde-products .is-coming-soon .btn-disabled{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  cursor:default;
  text-decoration:none;
  opacity:1;
}

.brainy-voorbeelde-products .brainy-coming-stamp{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) rotate(-24deg);
  display:flex;
  align-items:center;
  justify-content:center;
  width:150%;
  padding:14px 0;
  background:rgba(217, 54, 54, 0.94);
  color:#fff;
  font-size:20px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.8px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  z-index:3;
  pointer-events:none;
  text-align:center;
}

.brainy-voorbeelde-products .is-coming-soon .brainy-product-badge,
.brainy-voorbeelde-products .is-coming-soon p{
  position:relative;
  z-index:1;
}

/* =========================================================
   VOORBEELDE PRODUCT PAGES – CONTENT CARD (LOCKED)
   ========================================================= */
.brainy-product-page{
  max-width:780px;
  margin:25px auto;
  padding:20px 18px 16px;
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 8px 25px rgba(0,0,0,0.06);
  text-align:center;
}

.brainy-product-page > img{
  width:150px;
  height:auto;
  margin-bottom:6px;
}

.brainy-product-page p{
  margin:4px 0;
  line-height:1.35;
}

.brainy-product-grades{
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.brainy-product-grades a{
  display:inline-block;
  text-decoration:none;
}

.brainy-product-grades img{
  width:125px;
  height:auto;
  margin-bottom:0;
  border-radius:10px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.brainy-product-grades a:hover img{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.bp-card{
  background:#f8fafc;
  padding:10px 12px;
  border-radius:10px;
  margin:6px 0;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
  font-size:14.5px;
  line-height:1.35;
}

.bp-intro{
  background:#fde8e8;
  border:1px solid #f5c2c2;
}

.bp-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px;
  margin-top:6px;
}

.bp-card-grid .bp-card:nth-child(1){
  background:#eef4ff;
}
.bp-card-grid .bp-card:nth-child(2){
  background:#eafaf1;
}
.bp-card-grid .bp-card:nth-child(3){
  background:#fff4e6;
}

.bp-subjects{
  background:#f4f0ff;
}

/* =========================================================
   CLEANUP: REMOVE STRAY PARAGRAPH SPACING INSIDE CUSTOM MODULES
   ========================================================= */
.mod-custom p,
.moduletable p{
  margin:0 !important;
}
/* =========================================================
   PUBLIC HEADER – FORCE BESTEL NOU TO FAR RIGHT
   ========================================================= */
body:not(.tpl-paid) header.header.container-header .grid-child.container-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

body:not(.tpl-paid) header.header.container-header .grid-child.container-nav > ul.mod-menu{
  flex:1 1 auto !important;
  justify-content:flex-start !important;
  margin-right:auto !important;
}

body:not(.tpl-paid) header.header.container-header .grid-child.container-nav > #mod-custom204{
  order:99 !important;
  flex:0 0 auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
  align-self:center !important;
}

/* =========================================================
   GLOBAL JOOMLA FOOTER BAR REMOVAL
   Removes Cassiopeia default footer strip on ALL pages
   ========================================================= */
footer.container-footer,
footer.container-footer.footer,
footer.container-footer.footer.full-width{
  background:transparent !important;
  background-color:transparent !important;
  padding:0 !important;
  margin-top:0 !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Footer inner area */
footer.container-footer .grid-child{
  max-width:1200px !important;
  margin:0 auto !important;
  padding:14px 20px 22px !important;
  text-align:center !important;
  display:flex !important;
  justify-content:center !important;
}

/* Module wrapper inside footer */
footer.container-footer .moduletable,
footer.container-footer .module,
footer.container-footer .mod-custom{
  width:100% !important;
  text-align:center !important;
  display:flex !important;
  justify-content:center !important;
}

/* =========================================================
   CUSTOM FOOTER CONTENT
   ========================================================= */
.footer-contact{
  display:inline-block !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  text-align:center !important;
  color:#10264d !important;
  font-size:1rem !important;
  line-height:1.6 !important;
  font-weight:600 !important;
}

.footer-contact p{
  margin:0 !important;
  text-align:center !important;
}

.footer-contact strong{
  color:#10264d !important;
  font-weight:800 !important;
}

.footer-contact,
.footer-contact p,
.footer-contact strong,
.footer-contact span{
  color:#10264d !important;
}

.footer-contact a{
  display:inline-block !important;
  margin:0 10px !important;
  text-decoration:none !important;
  font-weight:700 !important;
}

.footer-contact a[href*="wa.me"]{
  color:#169c4a !important;
}

.footer-contact a[href^="mailto:"]{
  color:#0f5fb8 !important;
}

/* Facebook link */
.footer-contact a[href*="facebook.com"]{
  color:#1877f2 !important;
}

.footer-contact a[href*="facebook.com"],
.footer-contact a[href*="facebook.com"]:visited,
.footer-contact a[href*="facebook.com"]:hover,
.footer-contact a[href*="facebook.com"]:focus,
.footer-contact a[href*="facebook.com"]:active{
  color:#1877f2 !important;
  text-decoration:underline !important;
  opacity:1 !important;
}

.footer-contact .footer-copy{
  margin-top:8px !important;
  font-size:0.9rem !important;
  color:#4b5c77 !important;
  text-align:center !important;
  font-weight:600 !important;
}

.footer-contact br{
  display:none !important;
}

/* WhatsApp icon */
.footer-contact .wa-icon{
  display:inline-block;
  width:18px;
  height:18px;
  background:url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/whatsapp.svg") no-repeat center;
  background-size:contain;
  vertical-align:-3px;
  margin-right:6px;
  filter:invert(46%) sepia(78%) saturate(485%) hue-rotate(96deg) brightness(92%) contrast(88%);
}

/* Mobile footer tidy */
@media (max-width:640px){
  footer.container-footer .grid-child{
    padding:12px 14px 20px !important;
  }

  .footer-contact{
    font-size:0.96rem !important;
    line-height:1.55 !important;
  }

  .footer-contact a{
    display:block !important;
    margin:6px 0 !important;
  }

  .footer-contact .footer-copy{
    margin-top:10px !important;
    font-size:0.86rem !important;
    line-height:1.45 !important;
  }
}

/* =========================================================
   JOOMLA PUBLIC FOOTER – LEGAL LINKS
   Keep red on hover, no faded/lighter colour
   ========================================================= */

.footer-contact .footer-legal a,
.footer-contact .footer-legal a:link,
.footer-contact .footer-legal a:visited {
  color: #c43b32 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.footer-contact .footer-legal a:hover,
.footer-contact .footer-legal a:focus,
.footer-contact .footer-legal a:active {
  color: #c43b32 !important;
  text-decoration: underline !important;
  opacity: 1 !important;
}


/* =========================================================
   GRAAD PAGE – CENTER BADGES ONLY (ITEMID 273)
   ========================================================= */

body.itemid-273 .brainy-grade-grid.bestel-grade-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  text-align:center;
}

body.itemid-273 .brainy-grade-grid.bestel-grade-grid a{
  display:inline-block;
}

body.itemid-273 .com-content-article__body > p:first-of-type{
  text-align:center;
  font-size:22px;
  font-weight:600;
  margin-bottom:20px;
}

/* =========================================================
   BRAINY – SHARED TOP SYSTEM (FINAL LOCKED)
   Kwartaal hubs:
   274 / 276 / 278 / 277

   Product pages:
   275 / 279 / 280 / 281
   282 / 283 / 284 / 285
   286 / 287 / 288 / 289
   290 / 291 / 292 / 293
   ========================================================= */

/* =========================================================
   REMOVE HEADER GAP
   ========================================================= */

body.itemid-274 .header.container-header,
body.itemid-275 .header.container-header,
body.itemid-276 .header.container-header,
body.itemid-277 .header.container-header,
body.itemid-278 .header.container-header,
body.itemid-279 .header.container-header,
body.itemid-280 .header.container-header,
body.itemid-281 .header.container-header,
body.itemid-282 .header.container-header,
body.itemid-283 .header.container-header,
body.itemid-284 .header.container-header,
body.itemid-285 .header.container-header,
body.itemid-286 .header.container-header,
body.itemid-287 .header.container-header,
body.itemid-288 .header.container-header,
body.itemid-289 .header.container-header,
body.itemid-290 .header.container-header,
body.itemid-291 .header.container-header,
body.itemid-292 .header.container-header,
body.itemid-293 .header.container-header{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

body.itemid-274 .site-grid,
body.itemid-275 .site-grid,
body.itemid-276 .site-grid,
body.itemid-277 .site-grid,
body.itemid-278 .site-grid,
body.itemid-279 .site-grid,
body.itemid-280 .site-grid,
body.itemid-281 .site-grid,
body.itemid-282 .site-grid,
body.itemid-283 .site-grid,
body.itemid-284 .site-grid,
body.itemid-285 .site-grid,
body.itemid-286 .site-grid,
body.itemid-287 .site-grid,
body.itemid-288 .site-grid,
body.itemid-289 .site-grid,
body.itemid-290 .site-grid,
body.itemid-291 .site-grid,
body.itemid-292 .site-grid,
body.itemid-293 .site-grid{
  row-gap:0 !important;
  gap:0 !important;
}

body.itemid-274 .grid-child.container-component,
body.itemid-274 main,
body.itemid-274 .com-content-article.item-page,
body.itemid-274 .com-content-article__body,
body.itemid-275 .grid-child.container-component,
body.itemid-275 main,
body.itemid-275 .com-content-article.item-page,
body.itemid-275 .com-content-article__body,
body.itemid-276 .grid-child.container-component,
body.itemid-276 main,
body.itemid-276 .com-content-article.item-page,
body.itemid-276 .com-content-article__body,
body.itemid-277 .grid-child.container-component,
body.itemid-277 main,
body.itemid-277 .com-content-article.item-page,
body.itemid-277 .com-content-article__body,
body.itemid-278 .grid-child.container-component,
body.itemid-278 main,
body.itemid-278 .com-content-article.item-page,
body.itemid-278 .com-content-article__body,
body.itemid-279 .grid-child.container-component,
body.itemid-279 main,
body.itemid-279 .com-content-article.item-page,
body.itemid-279 .com-content-article__body,
body.itemid-280 .grid-child.container-component,
body.itemid-280 main,
body.itemid-280 .com-content-article.item-page,
body.itemid-280 .com-content-article__body,
body.itemid-281 .grid-child.container-component,
body.itemid-281 main,
body.itemid-281 .com-content-article.item-page,
body.itemid-281 .com-content-article__body,
body.itemid-282 .grid-child.container-component,
body.itemid-282 main,
body.itemid-282 .com-content-article.item-page,
body.itemid-282 .com-content-article__body,
body.itemid-283 .grid-child.container-component,
body.itemid-283 main,
body.itemid-283 .com-content-article.item-page,
body.itemid-283 .com-content-article__body,
body.itemid-284 .grid-child.container-component,
body.itemid-284 main,
body.itemid-284 .com-content-article.item-page,
body.itemid-284 .com-content-article__body,
body.itemid-285 .grid-child.container-component,
body.itemid-285 main,
body.itemid-285 .com-content-article.item-page,
body.itemid-285 .com-content-article__body,
body.itemid-286 .grid-child.container-component,
body.itemid-286 main,
body.itemid-286 .com-content-article.item-page,
body.itemid-286 .com-content-article__body,
body.itemid-287 .grid-child.container-component,
body.itemid-287 main,
body.itemid-287 .com-content-article.item-page,
body.itemid-287 .com-content-article__body,
body.itemid-288 .grid-child.container-component,
body.itemid-288 main,
body.itemid-288 .com-content-article.item-page,
body.itemid-288 .com-content-article__body,
body.itemid-289 .grid-child.container-component,
body.itemid-289 main,
body.itemid-289 .com-content-article.item-page,
body.itemid-289 .com-content-article__body,
body.itemid-290 .grid-child.container-component,
body.itemid-290 main,
body.itemid-290 .com-content-article.item-page,
body.itemid-290 .com-content-article__body,
body.itemid-291 .grid-child.container-component,
body.itemid-291 main,
body.itemid-291 .com-content-article.item-page,
body.itemid-291 .com-content-article__body,
body.itemid-292 .grid-child.container-component,
body.itemid-292 main,
body.itemid-292 .com-content-article.item-page,
body.itemid-292 .com-content-article__body,
body.itemid-293 .grid-child.container-component,
body.itemid-293 main,
body.itemid-293 .com-content-article.item-page,
body.itemid-293 .com-content-article__body{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* =========================================================
   TOP SECTION – SAME FOR ALL PAGES
   ========================================================= */

body.itemid-274 .brainy-page-top,
body.itemid-275 .brainy-page-top,
body.itemid-276 .brainy-page-top,
body.itemid-277 .brainy-page-top,
body.itemid-278 .brainy-page-top,
body.itemid-279 .brainy-page-top,
body.itemid-280 .brainy-page-top,
body.itemid-281 .brainy-page-top,
body.itemid-282 .brainy-page-top,
body.itemid-283 .brainy-page-top,
body.itemid-284 .brainy-page-top,
body.itemid-285 .brainy-page-top,
body.itemid-286 .brainy-page-top,
body.itemid-287 .brainy-page-top,
body.itemid-288 .brainy-page-top,
body.itemid-289 .brainy-page-top,
body.itemid-290 .brainy-page-top,
body.itemid-291 .brainy-page-top,
body.itemid-292 .brainy-page-top,
body.itemid-293 .brainy-page-top{
  width:100%;
  margin:0 0 8px 0 !important;
  padding:0 !important;
}

/* back link */
body.itemid-274 .brainy-top-back,
body.itemid-275 .brainy-top-back,
body.itemid-276 .brainy-top-back,
body.itemid-277 .brainy-top-back,
body.itemid-278 .brainy-top-back,
body.itemid-279 .brainy-top-back,
body.itemid-280 .brainy-top-back,
body.itemid-281 .brainy-top-back,
body.itemid-282 .brainy-top-back,
body.itemid-283 .brainy-top-back,
body.itemid-284 .brainy-top-back,
body.itemid-285 .brainy-top-back,
body.itemid-286 .brainy-top-back,
body.itemid-287 .brainy-top-back,
body.itemid-288 .brainy-top-back,
body.itemid-289 .brainy-top-back,
body.itemid-290 .brainy-top-back,
body.itemid-291 .brainy-top-back,
body.itemid-292 .brainy-top-back,
body.itemid-293 .brainy-top-back{
  text-align:left;
  margin:0 0 2px 0 !important;
  padding:0 !important;
  line-height:1 !important;
}

/* badge row */
body.itemid-274 .brainy-top-badges,
body.itemid-275 .brainy-top-badges,
body.itemid-276 .brainy-top-badges,
body.itemid-277 .brainy-top-badges,
body.itemid-278 .brainy-top-badges,
body.itemid-279 .brainy-top-badges,
body.itemid-280 .brainy-top-badges,
body.itemid-281 .brainy-top-badges,
body.itemid-282 .brainy-top-badges,
body.itemid-283 .brainy-top-badges,
body.itemid-284 .brainy-top-badges,
body.itemid-285 .brainy-top-badges,
body.itemid-286 .brainy-top-badges,
body.itemid-287 .brainy-top-badges,
body.itemid-288 .brainy-top-badges,
body.itemid-289 .brainy-top-badges,
body.itemid-290 .brainy-top-badges,
body.itemid-291 .brainy-top-badges,
body.itemid-292 .brainy-top-badges,
body.itemid-293 .brainy-top-badges{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:20px !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  line-height:0 !important;
  min-height:105px;
}

body.itemid-274 .brainy-top-badges img,
body.itemid-275 .brainy-top-badges img,
body.itemid-276 .brainy-top-badges img,
body.itemid-277 .brainy-top-badges img,
body.itemid-278 .brainy-top-badges img,
body.itemid-279 .brainy-top-badges img,
body.itemid-280 .brainy-top-badges img,
body.itemid-281 .brainy-top-badges img,
body.itemid-282 .brainy-top-badges img,
body.itemid-283 .brainy-top-badges img,
body.itemid-284 .brainy-top-badges img,
body.itemid-285 .brainy-top-badges img,
body.itemid-286 .brainy-top-badges img,
body.itemid-287 .brainy-top-badges img,
body.itemid-288 .brainy-top-badges img,
body.itemid-289 .brainy-top-badges img,
body.itemid-290 .brainy-top-badges img,
body.itemid-291 .brainy-top-badges img,
body.itemid-292 .brainy-top-badges img,
body.itemid-293 .brainy-top-badges img{
  display:block !important;
  height:auto !important;
  margin:0 !important;
}

/* fixed badge sizes */
body.itemid-274 .brainy-badge-grade,
body.itemid-275 .brainy-badge-grade,
body.itemid-276 .brainy-badge-grade,
body.itemid-277 .brainy-badge-grade,
body.itemid-278 .brainy-badge-grade,
body.itemid-279 .brainy-badge-grade,
body.itemid-280 .brainy-badge-grade,
body.itemid-281 .brainy-badge-grade,
body.itemid-282 .brainy-badge-grade,
body.itemid-283 .brainy-badge-grade,
body.itemid-284 .brainy-badge-grade,
body.itemid-285 .brainy-badge-grade,
body.itemid-286 .brainy-badge-grade,
body.itemid-287 .brainy-badge-grade,
body.itemid-288 .brainy-badge-grade,
body.itemid-289 .brainy-badge-grade,
body.itemid-290 .brainy-badge-grade,
body.itemid-291 .brainy-badge-grade,
body.itemid-292 .brainy-badge-grade,
body.itemid-293 .brainy-badge-grade{
  width:105px !important;
}

body.itemid-275 .brainy-badge-kwartaal,
body.itemid-279 .brainy-badge-kwartaal,
body.itemid-280 .brainy-badge-kwartaal,
body.itemid-281 .brainy-badge-kwartaal,
body.itemid-282 .brainy-badge-kwartaal,
body.itemid-283 .brainy-badge-kwartaal,
body.itemid-284 .brainy-badge-kwartaal,
body.itemid-285 .brainy-badge-kwartaal,
body.itemid-286 .brainy-badge-kwartaal,
body.itemid-287 .brainy-badge-kwartaal,
body.itemid-288 .brainy-badge-kwartaal,
body.itemid-289 .brainy-badge-kwartaal,
body.itemid-290 .brainy-badge-kwartaal,
body.itemid-291 .brainy-badge-kwartaal,
body.itemid-292 .brainy-badge-kwartaal,
body.itemid-293 .brainy-badge-kwartaal{
  width:82px !important;
}

/* headings */
body.itemid-274 .brainy-page-title,
body.itemid-275 .brainy-page-title,
body.itemid-276 .brainy-page-title,
body.itemid-277 .brainy-page-title,
body.itemid-278 .brainy-page-title,
body.itemid-279 .brainy-page-title,
body.itemid-280 .brainy-page-title,
body.itemid-281 .brainy-page-title,
body.itemid-282 .brainy-page-title,
body.itemid-283 .brainy-page-title,
body.itemid-284 .brainy-page-title,
body.itemid-285 .brainy-page-title,
body.itemid-286 .brainy-page-title,
body.itemid-287 .brainy-page-title,
body.itemid-288 .brainy-page-title,
body.itemid-289 .brainy-page-title,
body.itemid-290 .brainy-page-title,
body.itemid-291 .brainy-page-title,
body.itemid-292 .brainy-page-title,
body.itemid-293 .brainy-page-title{
  text-align:center;
  font-size:22px;
  font-weight:700;
  margin:0 0 8px 0 !important;
  color:#23335B;
}

/* =========================================================
   KWARTAAL HUB PAGES
   ========================================================= */

body.itemid-274 .com-content-article__body,
body.itemid-276 .com-content-article__body,
body.itemid-277 .com-content-article__body,
body.itemid-278 .com-content-article__body{
  max-width:1100px;
  margin:0 auto;
}

body.itemid-274 .brainy-grade-grid.bestel-grade-grid,
body.itemid-276 .brainy-grade-grid.bestel-grade-grid,
body.itemid-277 .brainy-grade-grid.bestel-grade-grid,
body.itemid-278 .brainy-grade-grid.bestel-grade-grid{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:20px !important;
  flex-wrap:wrap !important;
}

body.itemid-274 .brainy-grade-grid.bestel-grade-grid a,
body.itemid-276 .brainy-grade-grid.bestel-grade-grid a,
body.itemid-277 .brainy-grade-grid.bestel-grade-grid a,
body.itemid-278 .brainy-grade-grid.bestel-grade-grid a{
  display:inline-block !important;
}

/* =========================================================
   PRODUCT PAGES
   ========================================================= */

body.itemid-275 .com-content-article__body,
body.itemid-279 .com-content-article__body,
body.itemid-280 .com-content-article__body,
body.itemid-281 .com-content-article__body,
body.itemid-282 .com-content-article__body,
body.itemid-283 .com-content-article__body,
body.itemid-284 .com-content-article__body,
body.itemid-285 .com-content-article__body,
body.itemid-286 .com-content-article__body,
body.itemid-287 .com-content-article__body,
body.itemid-288 .com-content-article__body,
body.itemid-289 .com-content-article__body,
body.itemid-290 .com-content-article__body,
body.itemid-291 .com-content-article__body,
body.itemid-292 .com-content-article__body,
body.itemid-293 .com-content-article__body{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  max-width:1100px;
  margin:0 auto;
  align-items:start;
}

/* top spans full width */
body.itemid-275 .brainy-page-top,
body.itemid-279 .brainy-page-top,
body.itemid-280 .brainy-page-top,
body.itemid-281 .brainy-page-top,
body.itemid-282 .brainy-page-top,
body.itemid-283 .brainy-page-top,
body.itemid-284 .brainy-page-top,
body.itemid-285 .brainy-page-top,
body.itemid-286 .brainy-page-top,
body.itemid-287 .brainy-page-top,
body.itemid-288 .brainy-page-top,
body.itemid-289 .brainy-page-top,
body.itemid-290 .brainy-page-top,
body.itemid-291 .brainy-page-top,
body.itemid-292 .brainy-page-top,
body.itemid-293 .brainy-page-top{
  grid-column:1 / -1;
}

/* product title */
body.itemid-275 .brainy-kies-produk,
body.itemid-279 .brainy-kies-produk,
body.itemid-280 .brainy-kies-produk,
body.itemid-281 .brainy-kies-produk,
body.itemid-282 .brainy-kies-produk,
body.itemid-283 .brainy-kies-produk,
body.itemid-284 .brainy-kies-produk,
body.itemid-285 .brainy-kies-produk,
body.itemid-286 .brainy-kies-produk,
body.itemid-287 .brainy-kies-produk,
body.itemid-288 .brainy-kies-produk,
body.itemid-289 .brainy-kies-produk,
body.itemid-290 .brainy-kies-produk,
body.itemid-291 .brainy-kies-produk,
body.itemid-292 .brainy-kies-produk,
body.itemid-293 .brainy-kies-produk{
  text-align:center;
}

/* cards */
body.itemid-275 .brainy-product-card,
body.itemid-279 .brainy-product-card,
body.itemid-280 .brainy-product-card,
body.itemid-281 .brainy-product-card,
body.itemid-282 .brainy-product-card,
body.itemid-283 .brainy-product-card,
body.itemid-284 .brainy-product-card,
body.itemid-285 .brainy-product-card,
body.itemid-286 .brainy-product-card,
body.itemid-287 .brainy-product-card,
body.itemid-288 .brainy-product-card,
body.itemid-289 .brainy-product-card,
body.itemid-290 .brainy-product-card,
body.itemid-291 .brainy-product-card,
body.itemid-292 .brainy-product-card,
body.itemid-293 .brainy-product-card{
  padding:14px 10px 16px !important;
  min-height:220px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* product badge + label */
body.itemid-275 .brainy-card-title,
body.itemid-279 .brainy-card-title,
body.itemid-280 .brainy-card-title,
body.itemid-281 .brainy-card-title,
body.itemid-282 .brainy-card-title,
body.itemid-283 .brainy-card-title,
body.itemid-284 .brainy-card-title,
body.itemid-285 .brainy-card-title,
body.itemid-286 .brainy-card-title,
body.itemid-287 .brainy-card-title,
body.itemid-288 .brainy-card-title,
body.itemid-289 .brainy-card-title,
body.itemid-290 .brainy-card-title,
body.itemid-291 .brainy-card-title,
body.itemid-292 .brainy-card-title,
body.itemid-293 .brainy-card-title{
  width:100%;
  text-align:center;
}

body.itemid-275 .brainy-card-title img,
body.itemid-279 .brainy-card-title img,
body.itemid-280 .brainy-card-title img,
body.itemid-281 .brainy-card-title img,
body.itemid-282 .brainy-card-title img,
body.itemid-283 .brainy-card-title img,
body.itemid-284 .brainy-card-title img,
body.itemid-285 .brainy-card-title img,
body.itemid-286 .brainy-card-title img,
body.itemid-287 .brainy-card-title img,
body.itemid-288 .brainy-card-title img,
body.itemid-289 .brainy-card-title img,
body.itemid-290 .brainy-card-title img,
body.itemid-291 .brainy-card-title img,
body.itemid-292 .brainy-card-title img,
body.itemid-293 .brainy-card-title img{
  max-width:118px !important;
  height:auto;
  display:block;
  margin:0 auto 2px !important;
}

body.itemid-275 .brainy-product-label,
body.itemid-279 .brainy-product-label,
body.itemid-280 .brainy-product-label,
body.itemid-281 .brainy-product-label,
body.itemid-282 .brainy-product-label,
body.itemid-283 .brainy-product-label,
body.itemid-284 .brainy-product-label,
body.itemid-285 .brainy-product-label,
body.itemid-286 .brainy-product-label,
body.itemid-287 .brainy-product-label,
body.itemid-288 .brainy-product-label,
body.itemid-289 .brainy-product-label,
body.itemid-290 .brainy-product-label,
body.itemid-291 .brainy-product-label,
body.itemid-292 .brainy-product-label,
body.itemid-293 .brainy-product-label{
  display:block;
  margin-top:0 !important;
  font-weight:800;
  color:#23335B;
  line-height:1.05;
}

/* subject rows */
body.itemid-275 .brainy-card-buttons,
body.itemid-279 .brainy-card-buttons,
body.itemid-280 .brainy-card-buttons,
body.itemid-281 .brainy-card-buttons,
body.itemid-282 .brainy-card-buttons,
body.itemid-283 .brainy-card-buttons,
body.itemid-284 .brainy-card-buttons,
body.itemid-285 .brainy-card-buttons,
body.itemid-286 .brainy-card-buttons,
body.itemid-287 .brainy-card-buttons,
body.itemid-288 .brainy-card-buttons,
body.itemid-289 .brainy-card-buttons,
body.itemid-290 .brainy-card-buttons,
body.itemid-291 .brainy-card-buttons,
body.itemid-292 .brainy-card-buttons,
body.itemid-293 .brainy-card-buttons{
  width:100%;
  margin-top:6px;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start;
}

body.itemid-275 .brainy-subject-row,
body.itemid-279 .brainy-subject-row,
body.itemid-280 .brainy-subject-row,
body.itemid-281 .brainy-subject-row,
body.itemid-282 .brainy-subject-row,
body.itemid-283 .brainy-subject-row,
body.itemid-284 .brainy-subject-row,
body.itemid-285 .brainy-subject-row,
body.itemid-286 .brainy-subject-row,
body.itemid-287 .brainy-subject-row,
body.itemid-288 .brainy-subject-row,
body.itemid-289 .brainy-subject-row,
body.itemid-290 .brainy-subject-row,
body.itemid-291 .brainy-subject-row,
body.itemid-292 .brainy-subject-row,
body.itemid-293 .brainy-subject-row{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

body.itemid-275 .brainy-subject-grid,
body.itemid-279 .brainy-subject-grid,
body.itemid-280 .brainy-subject-grid,
body.itemid-281 .brainy-subject-grid,
body.itemid-282 .brainy-subject-grid,
body.itemid-283 .brainy-subject-grid,
body.itemid-284 .brainy-subject-grid,
body.itemid-285 .brainy-subject-grid,
body.itemid-286 .brainy-subject-grid,
body.itemid-287 .brainy-subject-grid,
body.itemid-288 .brainy-subject-grid,
body.itemid-289 .brainy-subject-grid,
body.itemid-290 .brainy-subject-grid,
body.itemid-291 .brainy-subject-grid,
body.itemid-292 .brainy-subject-grid,
body.itemid-293 .brainy-subject-grid{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:8px !important;
  width:auto !important;
  max-width:none !important;
  margin:0 auto;
  flex-wrap:nowrap;
}

body.itemid-275 .brainy-subject-grid.cols-1,
body.itemid-279 .brainy-subject-grid.cols-1,
body.itemid-280 .brainy-subject-grid.cols-1,
body.itemid-281 .brainy-subject-grid.cols-1,
body.itemid-282 .brainy-subject-grid.cols-1,
body.itemid-283 .brainy-subject-grid.cols-1,
body.itemid-284 .brainy-subject-grid.cols-1,
body.itemid-285 .brainy-subject-grid.cols-1,
body.itemid-286 .brainy-subject-grid.cols-1,
body.itemid-287 .brainy-subject-grid.cols-1,
body.itemid-288 .brainy-subject-grid.cols-1,
body.itemid-289 .brainy-subject-grid.cols-1,
body.itemid-290 .brainy-subject-grid.cols-1,
body.itemid-291 .brainy-subject-grid.cols-1,
body.itemid-292 .brainy-subject-grid.cols-1,
body.itemid-293 .brainy-subject-grid.cols-1{
  display:inline-flex !important;
  justify-content:center !important;
}

body.itemid-275 .brainy-subject-tile,
body.itemid-279 .brainy-subject-tile,
body.itemid-280 .brainy-subject-tile,
body.itemid-281 .brainy-subject-tile,
body.itemid-282 .brainy-subject-tile,
body.itemid-283 .brainy-subject-tile,
body.itemid-284 .brainy-subject-tile,
body.itemid-285 .brainy-subject-tile,
body.itemid-286 .brainy-subject-tile,
body.itemid-287 .brainy-subject-tile,
body.itemid-288 .brainy-subject-tile,
body.itemid-289 .brainy-subject-tile,
body.itemid-290 .brainy-subject-tile,
body.itemid-291 .brainy-subject-tile,
body.itemid-292 .brainy-subject-tile,
body.itemid-293 .brainy-subject-tile{
  width:105px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  text-decoration:none;
  color:#23335B;
  font-weight:700;
  line-height:1.15;
  flex:none !important;
}

body.itemid-275 .brainy-subject-tile img,
body.itemid-279 .brainy-subject-tile img,
body.itemid-280 .brainy-subject-tile img,
body.itemid-281 .brainy-subject-tile img,
body.itemid-282 .brainy-subject-tile img,
body.itemid-283 .brainy-subject-tile img,
body.itemid-284 .brainy-subject-tile img,
body.itemid-285 .brainy-subject-tile img,
body.itemid-286 .brainy-subject-tile img,
body.itemid-287 .brainy-subject-tile img,
body.itemid-288 .brainy-subject-tile img,
body.itemid-289 .brainy-subject-tile img,
body.itemid-290 .brainy-subject-tile img,
body.itemid-291 .brainy-subject-tile img,
body.itemid-292 .brainy-subject-tile img,
body.itemid-293 .brainy-subject-tile img{
  width:105px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto 6px !important;
}

body.itemid-275 .brainy-subject-tile span,
body.itemid-279 .brainy-subject-tile span,
body.itemid-280 .brainy-subject-tile span,
body.itemid-281 .brainy-subject-tile span,
body.itemid-282 .brainy-subject-tile span,
body.itemid-283 .brainy-subject-tile span,
body.itemid-284 .brainy-subject-tile span,
body.itemid-285 .brainy-subject-tile span,
body.itemid-286 .brainy-subject-tile span,
body.itemid-287 .brainy-subject-tile span,
body.itemid-288 .brainy-subject-tile span,
body.itemid-289 .brainy-subject-tile span,
body.itemid-290 .brainy-subject-tile span,
body.itemid-291 .brainy-subject-tile span,
body.itemid-292 .brainy-subject-tile span,
body.itemid-293 .brainy-subject-tile span{
  display:block;
}

/* binnekort badge */
body.itemid-275 .brainy-subject-tile.no-link,
body.itemid-279 .brainy-subject-tile.no-link,
body.itemid-280 .brainy-subject-tile.no-link,
body.itemid-281 .brainy-subject-tile.no-link,
body.itemid-282 .brainy-subject-tile.no-link,
body.itemid-283 .brainy-subject-tile.no-link,
body.itemid-284 .brainy-subject-tile.no-link,
body.itemid-285 .brainy-subject-tile.no-link,
body.itemid-286 .brainy-subject-tile.no-link,
body.itemid-287 .brainy-subject-tile.no-link,
body.itemid-288 .brainy-subject-tile.no-link,
body.itemid-289 .brainy-subject-tile.no-link,
body.itemid-290 .brainy-subject-tile.no-link,
body.itemid-291 .brainy-subject-tile.no-link,
body.itemid-292 .brainy-subject-tile.no-link,
body.itemid-293 .brainy-subject-tile.no-link{
  cursor:default;
  white-space:nowrap;
  width:auto !important;
}

body.itemid-275 .brainy-subject-tile.no-link span,
body.itemid-279 .brainy-subject-tile.no-link span,
body.itemid-280 .brainy-subject-tile.no-link span,
body.itemid-281 .brainy-subject-tile.no-link span,
body.itemid-282 .brainy-subject-tile.no-link span,
body.itemid-283 .brainy-subject-tile.no-link span,
body.itemid-284 .brainy-subject-tile.no-link span,
body.itemid-285 .brainy-subject-tile.no-link span,
body.itemid-286 .brainy-subject-tile.no-link span,
body.itemid-287 .brainy-subject-tile.no-link span,
body.itemid-288 .brainy-subject-tile.no-link span,
body.itemid-289 .brainy-subject-tile.no-link span,
body.itemid-290 .brainy-subject-tile.no-link span,
body.itemid-291 .brainy-subject-tile.no-link span,
body.itemid-292 .brainy-subject-tile.no-link span,
body.itemid-293 .brainy-subject-tile.no-link span{
  display:inline !important;
}

/* wiskunde */
body.itemid-275 .p-wiskunde .brainy-card-buttons,
body.itemid-279 .p-wiskunde .brainy-card-buttons,
body.itemid-280 .p-wiskunde .brainy-card-buttons,
body.itemid-281 .p-wiskunde .brainy-card-buttons,
body.itemid-282 .p-wiskunde .brainy-card-buttons,
body.itemid-283 .p-wiskunde .brainy-card-buttons,
body.itemid-284 .p-wiskunde .brainy-card-buttons,
body.itemid-285 .p-wiskunde .brainy-card-buttons,
body.itemid-286 .p-wiskunde .brainy-card-buttons,
body.itemid-287 .p-wiskunde .brainy-card-buttons,
body.itemid-288 .p-wiskunde .brainy-card-buttons,
body.itemid-289 .p-wiskunde .brainy-card-buttons,
body.itemid-290 .p-wiskunde .brainy-card-buttons,
body.itemid-291 .p-wiskunde .brainy-card-buttons,
body.itemid-292 .p-wiskunde .brainy-card-buttons,
body.itemid-293 .p-wiskunde .brainy-card-buttons{
  margin-top:auto;
  min-height:85px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px){
  body.itemid-275 .com-content-article__body,
  body.itemid-279 .com-content-article__body,
  body.itemid-280 .com-content-article__body,
  body.itemid-281 .com-content-article__body,
  body.itemid-282 .com-content-article__body,
  body.itemid-283 .com-content-article__body,
  body.itemid-284 .com-content-article__body,
  body.itemid-285 .com-content-article__body,
  body.itemid-286 .com-content-article__body,
  body.itemid-287 .com-content-article__body,
  body.itemid-288 .com-content-article__body,
  body.itemid-289 .com-content-article__body,
  body.itemid-290 .com-content-article__body,
  body.itemid-291 .com-content-article__body,
  body.itemid-292 .com-content-article__body,
  body.itemid-293 .com-content-article__body{
    grid-template-columns:1fr;
  }

  body.itemid-274 .brainy-top-badges,
  body.itemid-275 .brainy-top-badges,
  body.itemid-276 .brainy-top-badges,
  body.itemid-277 .brainy-top-badges,
  body.itemid-278 .brainy-top-badges,
  body.itemid-279 .brainy-top-badges,
  body.itemid-280 .brainy-top-badges,
  body.itemid-281 .brainy-top-badges,
  body.itemid-282 .brainy-top-badges,
  body.itemid-283 .brainy-top-badges,
  body.itemid-284 .brainy-top-badges,
  body.itemid-285 .brainy-top-badges,
  body.itemid-286 .brainy-top-badges,
  body.itemid-287 .brainy-top-badges,
  body.itemid-288 .brainy-top-badges,
  body.itemid-289 .brainy-top-badges,
  body.itemid-290 .brainy-top-badges,
  body.itemid-291 .brainy-top-badges,
  body.itemid-292 .brainy-top-badges,
  body.itemid-293 .brainy-top-badges{
    justify-content:center !important;
  }

  body.itemid-275 .brainy-subject-grid,
  body.itemid-279 .brainy-subject-grid,
  body.itemid-280 .brainy-subject-grid,
  body.itemid-281 .brainy-subject-grid,
  body.itemid-282 .brainy-subject-grid,
  body.itemid-283 .brainy-subject-grid,
  body.itemid-284 .brainy-subject-grid,
  body.itemid-285 .brainy-subject-grid,
  body.itemid-286 .brainy-subject-grid,
  body.itemid-287 .brainy-subject-grid,
  body.itemid-288 .brainy-subject-grid,
  body.itemid-289 .brainy-subject-grid,
  body.itemid-290 .brainy-subject-grid,
  body.itemid-291 .brainy-subject-grid,
  body.itemid-292 .brainy-subject-grid,
  body.itemid-293 .brainy-subject-grid{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px !important;
  }

  body.itemid-275 .brainy-subject-tile,
  body.itemid-279 .brainy-subject-tile,
  body.itemid-280 .brainy-subject-tile,
  body.itemid-281 .brainy-subject-tile,
  body.itemid-282 .brainy-subject-tile,
  body.itemid-283 .brainy-subject-tile,
  body.itemid-284 .brainy-subject-tile,
  body.itemid-285 .brainy-subject-tile,
  body.itemid-286 .brainy-subject-tile,
  body.itemid-287 .brainy-subject-tile,
  body.itemid-288 .brainy-subject-tile,
  body.itemid-289 .brainy-subject-tile,
  body.itemid-290 .brainy-subject-tile,
  body.itemid-291 .brainy-subject-tile,
  body.itemid-292 .brainy-subject-tile,
  body.itemid-293 .brainy-subject-tile{
    width:88px !important;
  }

  body.itemid-275 .brainy-subject-tile img,
  body.itemid-279 .brainy-subject-tile img,
  body.itemid-280 .brainy-subject-tile img,
  body.itemid-281 .brainy-subject-tile img,
  body.itemid-282 .brainy-subject-tile img,
  body.itemid-283 .brainy-subject-tile img,
  body.itemid-284 .brainy-subject-tile img,
  body.itemid-285 .brainy-subject-tile img,
  body.itemid-286 .brainy-subject-tile img,
  body.itemid-287 .brainy-subject-tile img,
  body.itemid-288 .brainy-subject-tile img,
  body.itemid-289 .brainy-subject-tile img,
  body.itemid-290 .brainy-subject-tile img,
  body.itemid-291 .brainy-subject-tile img,
  body.itemid-292 .brainy-subject-tile img,
  body.itemid-293 .brainy-subject-tile img{
    width:88px !important;
  }

  body.itemid-275 .brainy-subject-tile.no-link,
  body.itemid-279 .brainy-subject-tile.no-link,
  body.itemid-280 .brainy-subject-tile.no-link,
  body.itemid-281 .brainy-subject-tile.no-link,
  body.itemid-282 .brainy-subject-tile.no-link,
  body.itemid-283 .brainy-subject-tile.no-link,
  body.itemid-284 .brainy-subject-tile.no-link,
  body.itemid-285 .brainy-subject-tile.no-link,
  body.itemid-286 .brainy-subject-tile.no-link,
  body.itemid-287 .brainy-subject-tile.no-link,
  body.itemid-288 .brainy-subject-tile.no-link,
  body.itemid-289 .brainy-subject-tile.no-link,
  body.itemid-290 .brainy-subject-tile.no-link,
  body.itemid-291 .brainy-subject-tile.no-link,
  body.itemid-292 .brainy-subject-tile.no-link,
  body.itemid-293 .brainy-subject-tile.no-link{
    width:auto !important;
  }
}


/* ===== PRODUCT CARDS (LOCKED STYLE) ===== */

.vb-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  justify-items: center;
}

/* Card container */
.vb-product-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 16px 12px 18px;
  border-radius: 18px;
  background: #ffffff;
  transition: all 0.25s ease;
  max-width: 200px;
  width: 100%;
}

/* Image */
.vb-product-badge img {
  width: 100%;
  max-width: 170px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

/* Label */
.vb-product-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-top: 6px;
  letter-spacing: 0.2px;
}

/* Hover effect (subtle, clean) */
.vb-product-badge:hover {
  transform: translateY(-4px);
}

/* Optional: slightly stronger hover on image */
.vb-product-badge:hover img {
  transform: scale(1.03);
  transition: transform 0.25s ease;
}

/* Coming soon section stays softer */
.vb-products-grid.vb-coming .vb-product-badge {
  opacity: 0.85;
}

/* =========================================================
   PRICING PAGE (ITEMID 210) — FINAL LOCKED
   Width matched to header/banner
   ========================================================= */

body.itemid-210 .bs-price-page{
  max-width:var(--banner-max);
  margin:0 auto;
  padding:14px 14px 28px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#1f2937;
}

body.itemid-210 .bs-title{
  text-align:center;
  font-weight:900;
  letter-spacing:.2px;
  font-size:clamp(34px,4.2vw,54px);
  line-height:1.03;
  margin:8px 0 10px;
  color:#374151;
}

body.itemid-210 .bs-notes{
  list-style:none;
  padding:0;
  margin:0 auto 16px;
  max-width:820px;
  text-align:center;
  color:#6b7280;
  font-weight:700;
}
body.itemid-210 .bs-notes li{margin:5px 0}
body.itemid-210 .bs-notes li::before{content:"• "}

/* more space above and below product section titles */
body.itemid-210 .bs-section{
  text-align:center;
  margin:48px 0 36px;
  font-weight:900;
  letter-spacing:.7px;
  color:#4b5563;
  font-size:clamp(22px,2.2vw,34px);
}

/* ===== GRID ===== */
body.itemid-210 .bs-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  background:transparent;
  border:none;
  padding:0;
  overflow:visible;
  align-items:stretch;
}

/* ===== CARD ===== */
body.itemid-210 .bs-card{
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
}

body.itemid-210 .bs-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  box-shadow:0 10px 22px rgba(17,24,39,.08);
  z-index:0;
}
body.itemid-210 .bs-card > *{
  position:relative;
  z-index:1;
}

/* ===== COLOURED TOPS: EXACT SAME HEIGHT ===== */
body.itemid-210 .bs-head{
  position:relative;
  text-align:center;
  color:#fff;
  height:280px;
  padding:78px 16px 18px;
  border-radius:16px 16px 0 0;
  overflow:visible;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* ===== BADGES ===== */
body.itemid-210 .bs-badge{
  position:absolute;
  left:50%;
  top:-34px;
  transform:translateX(-50%);
  width:96px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}
body.itemid-210 .bs-badge::before{
  content:none !important;
}
body.itemid-210 .bs-badge img{
  display:block;
  width:96px;
  max-width:96px;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* ===== TEXT ===== */
body.itemid-210 .bs-name{
  font-weight:900;
  font-size:30px;
  line-height:1.04;
  margin:0 0 8px;
}

body.itemid-210 .bs-price-primary{
  font-weight:950;
  font-size:44px;
  line-height:1;
  margin:0;
}
body.itemid-210 .bs-price-primary small{
  display:block;
  font-size:11px;
  letter-spacing:1px;
  font-weight:900;
  opacity:.95;
  margin-top:8px;
  text-transform:uppercase;
}

body.itemid-210 .bs-benefit{
  margin-top:10px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.45px;
  line-height:1.45;
  opacity:.98;
  text-transform:uppercase;
}

body.itemid-210 .bs-vakke{
  margin-top:8px;
}
body.itemid-210 .bs-vakke-label{
  font-weight:950;
  font-size:.98em;
  display:inline-block;
  margin-bottom:3px;
}
body.itemid-210 .bs-vakke-items{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
body.itemid-210 .bs-vak{
  white-space:nowrap;
  font-size:.92rem;
}
body.itemid-210 .bs-vak::before{
  content:"• ";
  opacity:.9;
}
body.itemid-210 .bs-vak:first-child::before{
  content:"";
}

/* ===== LOWER WHITE AREA: WHOLE CARD EQUAL HEIGHT ===== */
body.itemid-210 .bs-list{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid rgba(0,0,0,.10);
  border-radius:0 0 16px 16px;
  overflow:hidden;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
body.itemid-210 .bs-list li{
  padding:12px 12px;
  font-weight:750;
  color:#6b7280;
  border-top:1px solid rgba(0,0,0,.07);
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.35;
  flex:0 0 auto;
}
body.itemid-210 .bs-list li:nth-child(even){
  background:#f3f4f6;
}
body.itemid-210 .bs-icon{
  width:18px;
  text-align:center;
  font-weight:950;
  flex:0 0 18px;
  margin-top:1px;
}

/* ===== CARD COLOURS ===== */
body.itemid-210 .t-anim .bs-head{background:#118a83;}
body.itemid-210 .t-anim .bs-icon{color:#118a83;}

body.itemid-210 .t-bk .bs-head{background:#f59e0b;}
body.itemid-210 .t-bk .bs-icon{color:#f59e0b;}

body.itemid-210 .t-quiz .bs-head{background:#2563eb;}
body.itemid-210 .t-quiz .bs-icon{color:#2563eb;}

body.itemid-210 .t-wisk .bs-head{background:#9333ea;}
body.itemid-210 .t-wisk .bs-icon{color:#9333ea;}

body.itemid-210 .t-anim{
  box-shadow:inset 0 0 0 2px rgba(46,255,233,.45), 0 0 14px rgba(17,138,131,.20);
}
body.itemid-210 .t-bk{
  box-shadow:inset 0 0 0 2px rgba(255,214,120,.45), 0 0 14px rgba(245,158,11,.16);
}
body.itemid-210 .t-quiz{
  box-shadow:inset 0 0 0 2px rgba(120,170,255,.40), 0 0 14px rgba(37,99,235,.18);
}
body.itemid-210 .t-wisk{
  box-shadow:inset 0 0 0 2px rgba(211,174,255,.42), 0 0 14px rgba(147,51,234,.18);
}

/* ===== CTA ===== */
body.itemid-210 .bs-cta{
  max-width:1040px;
  margin:18px auto 24px;
  padding:16px 14px;
  text-align:center;
  border-radius:18px;
  border:2px solid rgba(255,255,255,.55);
  position:relative;
  overflow:hidden;
  box-shadow:
    0 12px 28px rgba(17,24,39,.18),
    0 0 0 3px rgba(255,255,255,.18),
    0 0 22px rgba(255,255,255,.10);
}
body.itemid-210 .bs-cta::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-40%;
  width:60%;
  height:160%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.18),
    rgba(255,255,255,0)
  );
  transform:rotate(18deg);
  pointer-events:none;
  opacity:.55;
}
body.itemid-210 .bs-cta-mid{
  background:linear-gradient(90deg,
    rgba(17,138,131,.96),
    rgba(37,99,235,.94),
    rgba(245,158,11,.92)
  );
  box-shadow:
    0 12px 28px rgba(17,24,39,.18),
    0 0 0 3px rgba(17,138,131,.18),
    0 0 22px rgba(37,99,235,.16);
}
body.itemid-210 .bs-cta-bottom{
  margin:20px auto 0;
  background:linear-gradient(90deg,
    rgba(230,0,104,.92),
    rgba(75,85,99,.92),
    rgba(22,163,74,.92)
  );
  box-shadow:
    0 12px 28px rgba(17,24,39,.18),
    0 0 0 3px rgba(230,0,104,.16),
    0 0 22px rgba(22,163,74,.14);
}
body.itemid-210 .bs-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:16px;
  font-weight:950;
  letter-spacing:.3px;
  text-decoration:none;
  color:#111827;
  background:#ffffff;
  border:2px solid rgba(255,255,255,.90);
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    0 0 0 3px rgba(255,255,255,.22);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  position:relative;
  z-index:1;
}
body.itemid-210 .bs-cta-btn::before{
  content:"\f07a";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:16px;
  line-height:1;
  opacity:.95;
}
body.itemid-210 .bs-cta-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.20),
    0 0 0 3px rgba(255,255,255,.26);
  opacity:.98;
}
body.itemid-210 .bs-cta-sub{
  margin-top:10px;
  color:rgba(255,255,255,.92);
  font-weight:900;
  font-size:14px;
  line-height:1.45;
  position:relative;
  z-index:1;
}

/* ===== TERMS ===== */
body.itemid-210 .bs-terms{
  margin-top:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:14px 14px 10px;
}
body.itemid-210 .bs-terms h3{
  margin:0 0 8px;
  font-weight:950;
  color:#374151;
  font-size:18px;
}
body.itemid-210 .bs-terms ul{
  margin:0;
  padding-left:18px;
  color:#6b7280;
  font-weight:700;
}
body.itemid-210 .bs-terms li{margin:6px 0}
body.itemid-210 .bs-hl{
  color:#f97316;
  font-weight:950;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1180px){
  body.itemid-210 .bs-cards{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:980px){
  body.itemid-210 .bs-name{font-size:30px;}
  body.itemid-210 .bs-price-primary{font-size:42px;}
  body.itemid-210 .bs-head{
    height:265px;
    padding:74px 14px 16px;
  }
}

@media (max-width:640px){
  body.itemid-210 .bs-cards{
    grid-template-columns:1fr;
  }
  body.itemid-210 .bs-head{
    height:245px;
    padding:70px 14px 16px;
  }
  body.itemid-210 .bs-badge{
    top:-28px;
    width:86px;
  }
  body.itemid-210 .bs-badge img{
    width:86px;
    max-width:86px;
  }
  body.itemid-210 .bs-vakke-items{
    flex-direction:column;
    gap:2px;
    align-items:center;
  }
  body.itemid-210 .bs-vak::before{
    content:"";
  }
  body.itemid-210 .bs-cta{
    padding:14px 12px;
    border-radius:16px;
  }
  body.itemid-210 .bs-cta-btn{
    width:100%;
    max-width:420px;
  }
  body.itemid-210 .bs-cta-sub{
    font-size:13px;
  }
}

/* =========================================================
   PRICING TABLES (ITEMID 210)
   Add below current pricing block
   ========================================================= */

body.itemid-210 .bs-price-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:10px;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 16px rgba(17,24,39,.08);
}

body.itemid-210 .bs-price-table thead th{
  background:#23335B;
  color:#fff;
  font-weight:900;
  font-size:14px;
  text-align:left;
  padding:12px 14px;
  border-right:1px solid rgba(255,255,255,.12);
}

body.itemid-210 .bs-price-table thead th:last-child{
  border-right:0;
}

body.itemid-210 .bs-price-table tbody td{
  padding:12px 14px;
  font-weight:700;
  color:#4b5563;
  border-top:1px solid rgba(0,0,0,.08);
  vertical-align:top;
}

body.itemid-210 .bs-price-table tbody tr:nth-child(even) td{
  background:#f8fafc;
}

body.itemid-210 .bs-price-table tbody td:last-child{
  font-weight:900;
  color:#f97316;
  white-space:nowrap;
}

body.itemid-210 .bs-terms:has(.bs-price-table){
  padding:14px;
}

@media (max-width:760px){
  body.itemid-210 .bs-price-table thead{
    display:none;
  }

  body.itemid-210 .bs-price-table,
  body.itemid-210 .bs-price-table tbody,
  body.itemid-210 .bs-price-table tr,
  body.itemid-210 .bs-price-table td{
    display:block;
    width:100%;
  }

  body.itemid-210 .bs-price-table tr{
    margin-bottom:12px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 4px 10px rgba(17,24,39,.06);
  }

  body.itemid-210 .bs-price-table td{
    border-top:1px solid rgba(0,0,0,.06);
    padding:10px 12px;
  }

  body.itemid-210 .bs-price-table td:first-child{
    border-top:0;
  }
}

/* =========================================================
   BRAINYX BRIDGE - VOORBLAD
   FINAL LOCKED BLOCK
   ========================================================= */

body.itemid-101 .vb-brainyx {
  background: transparent;
  padding: 0;
}

body.itemid-101 .vb-section.vb-brainyx .vb-container{
  background:#d6d1e6 !important;
  border:1px solid #7fc242;
  border-radius:24px;
  padding:28px 42px;
}

body.itemid-101 .vb-brainyx .vb-brainyx-inner {
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
  gap:38px;
}

body.itemid-101 .vb-brainyx .vb-brainyx-logo {
  display:flex;
  align-items:center;
  justify-content:center;
}

body.itemid-101 .vb-brainyx .vb-brainyx-logo img {
  display:block;
  width:100%;
  max-width:375px;
  height:auto;
}

body.itemid-101 .vb-brainyx .vb-brainyx-content {
  text-align:left;
  max-width:660px;
}

body.itemid-101 .vb-brainyx .vb-brainyx-content h3 {
  margin:0 0 12px;
  max-width:640px;
  font-size:clamp(1.3rem, 1.9vw, 1.82rem);
  line-height:1.12;
  color:#243a73;
}

body.itemid-101 .vb-brainyx .vb-brainyx-content p {
  margin:0;
  max-width:580px;
  font-size:1.08rem;
  line-height:1.6;
  color:#243a73;
}

body.itemid-101 .vb-brainyx .vb-brainyx-cta {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:18px;
}

body.itemid-101 .vb-brainyx .vb-brainyx-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:280px;
  min-height:58px;
  padding:14px 26px;
  border:2px solid #7a4bb3;
  border-radius:12px;
  font-size:1.38rem;
  font-weight:900;
  text-decoration:none;
  color:#ffffff !important;
  background:#6f42c1;
  box-shadow:none;
  text-align:center;
}

body.itemid-101 .vb-brainyx .vb-brainyx-btn:hover,
body.itemid-101 .vb-brainyx .vb-brainyx-btn:focus {
  color:#ffffff !important;
  background:#5d36a6;
  text-decoration:none;
}

body.itemid-101 .vb-brainyx .vb-brainyx-tagline {
  width:100%;
  margin-top:6px;
  font-size:0.88rem;
  line-height:1.25;
  font-weight:700;
  text-align:center;
  color:#7a4bb3;
}

/* Tablet */
@media (max-width: 991.98px) {
  body.itemid-101 .vb-section.vb-brainyx .vb-container{
    padding:24px 28px;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-inner {
    grid-template-columns:1fr;
    gap:20px;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-logo {
    justify-content:flex-start;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-logo img {
    max-width:310px;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-content,
  body.itemid-101 .vb-brainyx .vb-brainyx-content h3,
  body.itemid-101 .vb-brainyx .vb-brainyx-content p {
    max-width:100%;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  body.itemid-101 .vb-section.vb-brainyx .vb-container{
    padding:20px 18px;
    border-radius:20px;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-logo img {
    max-width:250px;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-content h3 {
    font-size:1.28rem;
    line-height:1.14;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-content p {
    font-size:0.98rem;
    line-height:1.5;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-btn {
    min-width:240px;
    min-height:54px;
    font-size:1.22rem;
  }
}

/* =========================================================
   BRAINYX MOBILE POLISH (VOORBLAD)
   ========================================================= */

@media (max-width: 767.98px) {
  body.itemid-101 .vb-section.vb-brainyx{
    padding:18px 0 10px !important;
  }

  body.itemid-101 .vb-section.vb-brainyx .vb-container{
    padding:18px 16px 16px !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-inner{
    gap:14px !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-logo{
    justify-content:center !important;
    margin-bottom:2px;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-logo img{
    max-width:220px !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-content{
    text-align:left !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-content h3{
    margin:0 0 10px !important;
    font-size:1.18rem !important;
    line-height:1.16 !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-content p{
    font-size:0.96rem !important;
    line-height:1.5 !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-cta{
    margin-top:14px !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-btn{
    min-width:220px !important;
    min-height:50px !important;
    font-size:1.08rem !important;
    padding:12px 20px !important;
  }

  body.itemid-101 .vb-brainyx .vb-brainyx-tagline{
    margin-top:5px !important;
    font-size:0.82rem !important;
  }
}

/* =========================================================
   VOORBLAD HEADER POLISH (Itemid 101)
   Small-screen calm-down pass
   ========================================================= */

body.itemid-101 header.header.container-header .container-topbar{
  padding:6px 0 2px !important;
}

body.itemid-101 header.header.container-header .grid-child.container-nav{
  margin:-8px auto 0 !important;
  padding:0 clamp(14px, 2vw, 24px) 4px !important;
}

@media (max-width:820px){
  body.itemid-101 header.header.container-header .grid-child.container-nav{
    gap:10px !important;
    justify-content:center !important;
  }

  body.itemid-101 header.header.container-header .grid-child.container-nav > ul.mod-menu{
    justify-content:center !important;
    margin-right:0 !important;
  }

  body.itemid-101 header.header.container-header .grid-child.container-nav > #mod-custom204{
    margin-left:0 !important;
  }
}

@media (max-width:640px){
  body.itemid-101 header.header.container-header .container-topbar{
    padding:4px 0 0 !important;
  }

  body.itemid-101 header.header.container-header .grid-child.container-nav{
    margin:-4px auto 0 !important;
    padding:0 14px 2px !important;
    gap:8px !important;
  }

  body.itemid-101 header.header.container-header .grid-child.container-nav > ul.mod-menu{
    flex:1 1 100% !important;
    justify-content:center !important;
    gap:8px !important;
    row-gap:8px !important;
    column-gap:8px !important;
    margin-right:0 !important;
  }

  body.itemid-101 header.header.container-header .grid-child.container-nav > #mod-custom204{
    flex:1 1 100% !important;
    justify-content:center !important;
    margin:0 !important;
  }

  body.itemid-101 header.header.container-header .container-nav ul.mod-menu > li > a,
  body.itemid-101 header.header.container-header .container-nav #mod-custom204 .brainy-product-link{
    min-width:120px !important;
    padding:0 14px !important;
  }
}

/* Voorblad product labels + coming soon states */
#vb-products .vb-product-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#vb-products .vb-product-label small {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: #5d6985;
}

#vb-products .vb-product-badge-disabled {
  position: relative;
  pointer-events: none;
  cursor: default;
}

#vb-products .vb-product-soon {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #d93636;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.vb-brainyx .vb-brainyx-btn-disabled {
  display: inline-block;
  background: #d93636;
  border-color: #d93636;
  color: #fff;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* =========================================================
   ACCOUNT FLOW PAGES – FINAL SHARED BLOCK
   Covers:
   - Teken Aan (itemid-119)
   - Skep rekening (itemid-294)
   - Registrasie voltooi (itemid-294 + layout-complete)
   - Wagwoord vergeet? (itemid-295)
   ========================================================= */

body.itemid-119,
body.itemid-294,
body.itemid-295{
  background:#DCE9E1 !important;
}

body.itemid-119 .site-grid,
body.itemid-294 .site-grid,
body.itemid-295 .site-grid{
  width:100% !important;
}

body.itemid-119 .grid-child.container-component,
body.itemid-294 .grid-child.container-component,
body.itemid-295 .grid-child.container-component{
  width:100% !important;
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:16px !important;
  padding-right:16px !important;
  box-sizing:border-box !important;
}

body.itemid-119 main,
body.itemid-294 main,
body.itemid-295 main{
  margin-top:0 !important;
}

/* =========================================================
   CLEAN HEADER
   ========================================================= */
body.itemid-119 header.header.container-header,
body.itemid-294 header.header.container-header,
body.itemid-295 header.header.container-header{
  position:relative !important;
  padding-top:6px !important;
}

body.itemid-119 header.header.container-header .navbar-brand,
body.itemid-294 header.header.container-header .navbar-brand,
body.itemid-295 header.header.container-header .navbar-brand{
  display:none !important;
}

/* HARD HIDE real topbar */
body.itemid-119 header.header.container-header > .container-topbar,
body.itemid-119 header.header.container-header .container-topbar,
body.itemid-119 .container-topbar,
body.itemid-119 #mod-custom196,
body.itemid-294 header.header.container-header > .container-topbar,
body.itemid-294 header.header.container-header .container-topbar,
body.itemid-295 header.header.container-header > .container-topbar,
body.itemid-295 header.header.container-header .container-topbar,
body.itemid-295 .container-topbar,
body.itemid-295 #mod-custom196{
  display:none !important;
}

/* Same injected banner on all account pages */
body.itemid-119 header.header.container-header::before,
body.itemid-294 header.header.container-header::before,
body.itemid-295 header.header.container-header::before{
  content:"";
  display:block;
  width:100%;
  max-width:980px;
  height:300px;
  margin:0 auto 12px !important;
  background:url("/images/website/header.png") center center / contain no-repeat;
}

/* =========================================================
   NAV CLEANUP
   ========================================================= */

/* LOGIN + REGISTRATION COMPLETE: keep only Voorblad */
body.itemid-119 header.header.container-header .grid-child.container-nav,
body.itemid-119 .container-nav,
body.itemid-294.layout-complete header.header.container-header .grid-child.container-nav,
body.itemid-294.layout-complete .container-nav{
  width:100% !important;
  max-width:980px !important;
  margin:0 auto 8px !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
  background:transparent !important;
  box-shadow:none !important;
  justify-content:flex-start !important;
}

body.itemid-119 .container-nav .mod-menu,
body.itemid-294.layout-complete .container-nav .mod-menu{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
  width:100% !important;
}

body.itemid-119 .container-nav .mod-menu > li,
body.itemid-294.layout-complete .container-nav .mod-menu > li{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

body.itemid-119 .container-nav .mod-menu > li.item-101,
body.itemid-294.layout-complete .container-nav .mod-menu > li.item-101{
  display:block !important;
}

body.itemid-119 .container-nav .mod-menu > li.item-101 > a,
body.itemid-294.layout-complete .container-nav .mod-menu > li.item-101 > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  background:#2E6CF6 !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
  box-shadow:0 6px 14px rgba(46,108,246,.22) !important;
}

/* Registration form + reset form: no menu row */
body.itemid-294:not(.layout-complete) .container-nav,
body.itemid-295 .container-nav{
  display:none !important;
}

/* =========================================================
   SHARED CARD
   ========================================================= */
body.itemid-119 .com-users-login.login,
body.itemid-294 .com-users-registration.registration,
body.itemid-294.layout-complete #system-message-container,
body.itemid-295 .com-users-reset.reset{
  max-width:980px !important;
  margin:8px auto 18px !important;
  padding:22px 28px !important;
  background:linear-gradient(180deg, #EEF8FF 0%, #E6F2FF 100%) !important;
  border:2px solid rgba(80,120,170,.16) !important;
  border-radius:24px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
}

body.itemid-294.layout-complete #system-message-container{
  margin-top:8px !important;
  margin-bottom:18px !important;
}

body.itemid-294.layout-complete main{
  display:none !important;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
body.itemid-119 .page-header h1,
body.itemid-294 .com-users-registration legend,
body.itemid-295 .com-users-reset legend{
  margin:0 0 8px !important;
  padding:0 !important;
  font-size:1.95rem !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  color:#23335B !important;
}

body.itemid-119 .page-header{
  margin:0 0 12px !important;
}

body.itemid-294 .com-users-registration legend,
body.itemid-295 .com-users-reset legend{
  display:block !important;
  width:100% !important;
}

body.itemid-294 .field-spacer{
  order:0 !important;
  margin:0 0 10px !important;
}

body.itemid-294 .field-spacer .control-label{
  float:none !important;
  width:100% !important;
}

body.itemid-294 .field-spacer .controls{
  display:none !important;
}

body.itemid-294 .field-spacer .spacer{
  display:block !important;
}

body.itemid-294 .field-spacer .text{
  display:block !important;
  font-size:0.94rem !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#42526e !important;
}

body.itemid-294 .com-users-registration fieldset + fieldset > legend{
  display:none !important;
}

/* =========================================================
   FORM LAYOUT
   ========================================================= */
body.itemid-119 .com-users-login__form,
body.itemid-294 .com-users-registration__form,
body.itemid-295 .com-users-reset__form{
  margin:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

body.itemid-294 .com-users-registration fieldset,
body.itemid-295 .com-users-reset fieldset{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

body.itemid-119 .control-group,
body.itemid-294 .control-group,
body.itemid-295 .control-group{
  margin:0 0 10px !important;
}

body.itemid-119 .control-label,
body.itemid-119 .controls,
body.itemid-294 .control-label,
body.itemid-294 .controls,
body.itemid-295 .control-label,
body.itemid-295 .controls{
  float:none !important;
  width:100% !important;
  margin:0 !important;
}

body.itemid-119 .control-label,
body.itemid-294 .control-label,
body.itemid-295 .control-label{
  margin-bottom:4px !important;
}

body.itemid-119 .control-label label,
body.itemid-294 .control-label label,
body.itemid-295 .control-label label{
  display:block !important;
  margin:0 !important;
  font-size:1rem !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  color:#23335B !important;
}

body.itemid-119 .control-label .star,
body.itemid-294 .control-label .star,
body.itemid-295 .control-label .star{
  color:#d93636 !important;
  font-weight:900 !important;
}

/* Registration order */
body.itemid-294 .com-users-registration fieldset:first-of-type > .control-group:nth-of-type(2){ order:1 !important; }
body.itemid-294 .com-users-registration fieldset:first-of-type > .control-group:nth-of-type(3){ order:2 !important; }
body.itemid-294 .com-users-registration fieldset:first-of-type > .control-group:nth-of-type(6){ order:3 !important; }
body.itemid-294 .com-users-registration fieldset:first-of-type > .control-group:nth-of-type(4){ order:4 !important; }
body.itemid-294 .com-users-registration fieldset:first-of-type > .control-group:nth-of-type(5){ order:5 !important; }
body.itemid-294 .com-users-registration fieldset:nth-of-type(2) > .control-group:nth-of-type(1){ order:6 !important; }
body.itemid-294 .com-users-registration fieldset:nth-of-type(2) > .control-group:nth-of-type(2){ order:7 !important; }

/* Helper text */
body.itemid-294 #jform_username-lbl::after{
  content:"Gebruik asseblief dieselfde e-posadres wat tydens u bestelling gebruik is. \A Die e-posadres sal ook u gebruikersnaam wees.";
  display:block;
  margin-top:3px;
  font-size:0.88rem;
  line-height:1.28;
  font-weight:600;
  color:#5d6985;
  white-space:pre-line;
}

body.itemid-294 #jform_email1-lbl::after{
  content:"Bevestig asseblief u e-posadres.";
  display:block;
  margin-top:3px;
  font-size:0.88rem;
  line-height:1.28;
  font-weight:600;
  color:#5d6985;
}

body.itemid-294 #jform\\[password1\\]-rules,
body.itemid-294 .small.text-muted{
  margin:0 0 3px !important;
  font-size:0.82rem !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  color:#5d6985 !important;
}

/* Inputs */
body.itemid-119 .form-control,
body.itemid-119 input[type="text"],
body.itemid-119 input[type="password"],
body.itemid-294 .form-control,
body.itemid-294 input[type="text"],
body.itemid-294 input[type="email"],
body.itemid-294 input[type="password"],
body.itemid-295 .form-control,
body.itemid-295 input[type="email"],
body.itemid-295 input[type="text"]{
  width:100% !important;
  min-height:46px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  border:2px solid #C9D8EA !important;
  background:#ffffff !important;
  color:#23335B !important;
  box-shadow:none !important;
  font-size:0.98rem !important;
}

body.itemid-119 .form-control:focus,
body.itemid-119 input[type="text"]:focus,
body.itemid-119 input[type="password"]:focus,
body.itemid-294 .form-control:focus,
body.itemid-294 input[type="text"]:focus,
body.itemid-294 input[type="email"]:focus,
body.itemid-294 input[type="password"]:focus,
body.itemid-295 .form-control:focus,
body.itemid-295 input[type="email"]:focus,
body.itemid-295 input[type="text"]:focus{
  border-color:#00A8C6 !important;
  box-shadow:0 0 0 4px rgba(0,168,198,.12) !important;
  outline:none !important;
}

/* Password eye */
body.itemid-119 .password-group,
body.itemid-119 .input-group,
body.itemid-294 .password-group,
body.itemid-294 .input-group{
  width:100% !important;
}

body.itemid-119 .input-group,
body.itemid-294 .input-group{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
}

body.itemid-119 .input-group > .form-control,
body.itemid-294 .input-group > .form-control{
  flex:1 1 auto !important;
  min-width:0 !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

body.itemid-119 .input-password-toggle,
body.itemid-294 .input-password-toggle{
  width:46px !important;
  min-width:46px !important;
  padding:0 !important;
  border:2px solid #C9D8EA !important;
  border-left:0 !important;
  border-top-right-radius:14px !important;
  border-bottom-right-radius:14px !important;
  background:#ffffff !important;
  color:#42526e !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

body.itemid-119 .input-password-toggle:hover,
body.itemid-119 .input-password-toggle:focus,
body.itemid-294 .input-password-toggle:hover,
body.itemid-294 .input-password-toggle:focus{
  background:#f7fafc !important;
  color:#23335B !important;
}

/* Validation */
body.itemid-119 .form-control-feedback,
body.itemid-119 .invalid-feedback,
body.itemid-119 .control-group .help-inline,
body.itemid-119 .control-group .help-block,
body.itemid-294 .form-control-feedback,
body.itemid-294 .invalid-feedback,
body.itemid-294 .control-group .help-inline,
body.itemid-294 .control-group .help-block,
body.itemid-295 .form-control-feedback,
body.itemid-295 .invalid-feedback,
body.itemid-295 .control-group .help-inline,
body.itemid-295 .control-group .help-block{
  display:inline !important;
  margin:0 0 0 6px !important;
  padding:0 !important;
  font-size:0.84rem !important;
  line-height:1.15 !important;
  font-weight:400 !important;
  color:#d93636 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

body.itemid-119 .control-label,
body.itemid-294 .control-label,
body.itemid-295 .control-label{
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
  gap:0 !important;
}

/* =========================================================
   LOGIN PAGE ONLY
   ========================================================= */
body.itemid-119 .com-users-login__remember + .com-users-login__submit{
  display:none !important;
}

body.itemid-119 .plg_system_webauthn_login_button{
  display:none !important;
}

body.itemid-119 .com-users-login__remember{
  margin:2px 0 10px !important;
}

body.itemid-119 .com-users-login__remember .form-check-label{
  color:#23335B !important;
  font-weight:600 !important;
}

body.itemid-119 .com-users-login__remember + .com-users-login__submit + .com-users-login__submit .btn.btn-primary{
  font-size:0 !important;
}

body.itemid-119 .com-users-login__remember + .com-users-login__submit + .com-users-login__submit .btn.btn-primary::after{
  content:"Teken aan";
  font-size:0.98rem;
  font-weight:900;
  line-height:1;
}

body.itemid-119 .com-users-login__remind,
body.itemid-119 .com-users-login__register{
  display:none !important;
}

body.itemid-119 .com-users-login__options{
  margin-top:14px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  border:2px solid rgba(80,120,170,.12) !important;
}

body.itemid-119 .com-users-login__options .list-group-item{
  background:rgba(255,255,255,.74) !important;
  color:#23335B !important;
  font-weight:600 !important;
  border-color:rgba(80,120,170,.12) !important;
}

body.itemid-119 .com-users-login__options .list-group-item:hover,
body.itemid-119 .com-users-login__options .list-group-item:focus{
  background:#ffffff !important;
  color:#1b2746 !important;
}

/* =========================================================
   RESET PAGE ONLY (itemid-295 + confirm)
   ========================================================= */

/* Main reset + confirm cards */
body.itemid-295 .com-users-reset.reset,
body.itemid-295 .com-users-reset-confirm.reset-confirm{
  max-width:980px !important;
  margin:8px auto 18px !important;
  padding:22px 28px !important;
  background:linear-gradient(180deg, #EEF8FF 0%, #E6F2FF 100%) !important;
  border:2px solid rgba(80,120,170,.16) !important;
  border-radius:24px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
}

/* Intro text / legend */
body.itemid-295 .com-users-reset legend,
body.itemid-295 .com-users-reset-confirm legend{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 16px !important;
  padding:0 !important;
  font-size:1rem !important;
  line-height:1.55 !important;
  font-weight:700 !important;
  color:#23335B !important;
}

/* Form shell */
body.itemid-295 .com-users-reset__form,
body.itemid-295 .com-users-reset-confirm__form,
body.itemid-295 form.form-validate{
  margin:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

body.itemid-295 .com-users-reset fieldset,
body.itemid-295 .com-users-reset-confirm fieldset{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Spacing */
body.itemid-295 .control-group{
  margin:0 0 12px !important;
}

body.itemid-295 .control-label,
body.itemid-295 .controls{
  float:none !important;
  width:100% !important;
  margin:0 !important;
}

body.itemid-295 .control-label{
  margin-bottom:4px !important;
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
}

body.itemid-295 .control-label label{
  display:block !important;
  margin:0 !important;
  font-size:1rem !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  color:#23335B !important;
}

body.itemid-295 .control-label .star{
  color:#d93636 !important;
  font-weight:900 !important;
}

/* Inputs */
body.itemid-295 .form-control,
body.itemid-295 input[type="email"],
body.itemid-295 input[type="text"]{
  width:100% !important;
  min-height:46px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  border:2px solid #C9D8EA !important;
  background:#ffffff !important;
  color:#23335B !important;
  box-shadow:none !important;
  font-size:0.98rem !important;
}

body.itemid-295 .form-control:focus,
body.itemid-295 input[type="email"]:focus,
body.itemid-295 input[type="text"]:focus{
  border-color:#00A8C6 !important;
  box-shadow:0 0 0 4px rgba(0,168,198,.12) !important;
  outline:none !important;
}

/* Submit row */
body.itemid-295 .com-users-reset__submit,
body.itemid-295 .com-users-reset-confirm__submit{
  margin-top:10px !important;
}

body.itemid-295 .com-users-reset__submit .controls,
body.itemid-295 .com-users-reset-confirm__submit .controls{
  display:flex !important;
  justify-content:flex-start !important;
}

/* Buttons */
body.itemid-295 .btn.btn-primary,
body.itemid-295 .btn.validate,
body.itemid-295 button[type="submit"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:13px !important;
  border:2px solid #1E3A8A !important;
  background:#23335B !important;
  color:#fff !important;
  font-size:0.98rem !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 8px 16px rgba(35,51,91,.16) !important;
}

body.itemid-295 .btn.btn-primary:hover,
body.itemid-295 .btn.btn-primary:focus,
body.itemid-295 .btn.validate:hover,
body.itemid-295 .btn.validate:focus,
body.itemid-295 button[type="submit"]:hover,
body.itemid-295 button[type="submit"]:focus{
  background:#1b2746 !important;
  border-color:#1b2746 !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

/* Mobile */
@media (max-width:640px){
  body.itemid-295 .com-users-reset.reset,
  body.itemid-295 .com-users-reset-confirm.reset-confirm{
    padding:14px !important;
    border-radius:18px !important;
  }

  body.itemid-295 .com-users-reset legend,
  body.itemid-295 .com-users-reset-confirm legend{
    font-size:0.95rem !important;
    line-height:1.45 !important;
  }

  body.itemid-295 .btn.btn-primary,
  body.itemid-295 .btn.validate,
  body.itemid-295 button[type="submit"]{
    width:100% !important;
  }
}

/* =========================================================
   BUTTONS
   ========================================================= */
body.itemid-119 .btn.btn-primary,
body.itemid-294 .com-users-registration__register.btn,
body.itemid-294 .btn.validate,
body.itemid-295 .btn.btn-primary,
body.itemid-295 .btn.validate{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:13px !important;
  border:2px solid #1E3A8A !important;
  background:#23335B !important;
  color:#fff !important;
  font-size:0.98rem !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 8px 16px rgba(35,51,91,.16) !important;
}

body.itemid-119 .btn.btn-primary:hover,
body.itemid-119 .btn.btn-primary:focus,
body.itemid-294 .com-users-registration__register.btn:hover,
body.itemid-294 .com-users-registration__register.btn:focus,
body.itemid-294 .btn.validate:hover,
body.itemid-294 .btn.validate:focus,
body.itemid-295 .btn.btn-primary:hover,
body.itemid-295 .btn.btn-primary:focus,
body.itemid-295 .btn.validate:hover,
body.itemid-295 .btn.validate:focus{
  background:#1b2746 !important;
  border-color:#1b2746 !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

/* Complete page */
body.itemid-294.layout-complete #system-message-container joomla-alert,
body.itemid-294.layout-complete #system-message-container .alert{
  margin:0 !important;
  border-radius:16px !important;
  border:2px solid rgba(55,130,190,.18) !important;
  background:transparent !important;
  box-shadow:none !important;
}

body.itemid-294.layout-complete #system-message-container .alert-wrapper,
body.itemid-294.layout-complete #system-message-container .alert-message{
  background:transparent !important;
  color:#23335B !important;
  font-size:1rem !important;
  line-height:1.55 !important;
  font-weight:600 !important;
}

body.itemid-294.layout-complete #system-message-container .alert-heading,
body.itemid-294.layout-complete #system-message-container .alert-link{
  color:#23335B !important;
}

/* Footer */
body.itemid-119 .container-footer,
body.itemid-294 .container-footer,
body.itemid-295 .container-footer{
  margin-top:14px !important;
}

body.itemid-119 .container-footer .grid-child,
body.itemid-294 .container-footer .grid-child,
body.itemid-295 .container-footer .grid-child{
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Mobile */
@media (max-width:640px){
  body.itemid-119 .grid-child.container-component,
  body.itemid-294 .grid-child.container-component,
  body.itemid-295 .grid-child.container-component{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  body.itemid-119 .container-nav{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  body.itemid-119 header.header.container-header::before,
  body.itemid-294 header.header.container-header::before,
  body.itemid-295 header.header.container-header::before{
    height:132px !important;
    margin:0 auto 8px !important;
  }

  body.itemid-119 .com-users-login.login,
  body.itemid-294 .com-users-registration.registration,
  body.itemid-294.layout-complete #system-message-container,
  body.itemid-295 .com-users-reset.reset{
    padding:14px !important;
    border-radius:18px !important;
  }

  body.itemid-119 .page-header h1,
  body.itemid-294 .com-users-registration legend,
  body.itemid-295 .com-users-reset legend{
    font-size:1.5rem !important;
  }

  body.itemid-119 .btn.btn-primary,
  body.itemid-294 .com-users-registration__register.btn,
  body.itemid-294 .btn.validate,
  body.itemid-295 .btn.btn-primary,
  body.itemid-295 .btn.validate{
    width:100% !important;
  }
}

/* =========================================================
   REGISTRATION COMPLETE ACTIONS (ITEMID 294)
   ========================================================= */
body.itemid-294.layout-complete .brainy-registration-complete-actions{
  max-width:980px !important;
  margin:12px auto 0 !important;
}

body.itemid-294.layout-complete .brainy-registration-complete-card{
  padding:18px 20px !important;
  background:rgba(255,255,255,.78) !important;
  border:2px solid rgba(80,120,170,.14) !important;
  border-radius:18px !important;
  box-shadow:none !important;
  text-align:center !important;
}

body.itemid-294.layout-complete .brainy-registration-complete-text{
  margin:0 0 8px !important;
  font-size:1rem !important;
  line-height:1.5 !important;
  font-weight:700 !important;
  color:#23335B !important;
}

body.itemid-294.layout-complete .brainy-registration-complete-text:last-of-type{
  margin-bottom:14px !important;
}

body.itemid-294.layout-complete .brainy-registration-complete-btnwrap{
  margin:0 !important;
}

body.itemid-294.layout-complete .brainy-registration-complete-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:13px !important;
  border:2px solid #1E3A8A !important;
  background:#23335B !important;
  color:#fff !important;
  font-size:0.98rem !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 8px 16px rgba(35,51,91,.16) !important;
}

body.itemid-294.layout-complete .brainy-registration-complete-btn:hover,
body.itemid-294.layout-complete .brainy-registration-complete-btn:focus{
  background:#1b2746 !important;
  border-color:#1b2746 !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

@media (max-width:640px){
  body.itemid-294.layout-complete .brainy-registration-complete-card{
    padding:14px !important;
    border-radius:16px !important;
  }

  body.itemid-294.layout-complete .brainy-registration-complete-btn{
    width:100% !important;
  }
}

/* =========================================================
   RESET COMPLETE PAGE ONLY
   /wagwoord-vergeet?layout=complete
   ========================================================= */

body.itemid-295.layout-complete .com-users-reset-complete.reset-complete{
  max-width:980px !important;
  margin:8px auto 18px !important;
  padding:22px 28px !important;
  background:linear-gradient(180deg, #EEF8FF 0%, #E6F2FF 100%) !important;
  border:2px solid rgba(80,120,170,.16) !important;
  border-radius:24px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
}

body.itemid-295.layout-complete .com-users-reset-complete__form,
body.itemid-295.layout-complete form.form-validate{
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

body.itemid-295.layout-complete fieldset{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

body.itemid-295.layout-complete legend{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 16px !important;
  padding:0 !important;
  font-size:1rem !important;
  line-height:1.55 !important;
  font-weight:700 !important;
  color:#23335B !important;
}

body.itemid-295.layout-complete .control-group{
  margin:0 0 12px !important;
}

body.itemid-295.layout-complete .control-label,
body.itemid-295.layout-complete .controls{
  float:none !important;
  width:100% !important;
  margin:0 !important;
}

body.itemid-295.layout-complete .control-label{
  margin-bottom:4px !important;
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
}

body.itemid-295.layout-complete .control-label label{
  display:block !important;
  margin:0 !important;
  font-size:1rem !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  color:#23335B !important;
}

body.itemid-295.layout-complete .control-label .star{
  color:#d93636 !important;
  font-weight:900 !important;
}

body.itemid-295.layout-complete #jform\\[password1\\]-rules,
body.itemid-295.layout-complete .small.text-muted{
  margin:0 0 3px !important;
  font-size:0.82rem !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  color:#5d6985 !important;
}

body.itemid-295.layout-complete .password-group,
body.itemid-295.layout-complete .input-group{
  width:100% !important;
}

body.itemid-295.layout-complete .form-control,
body.itemid-295.layout-complete input[type="password"]{
  width:100% !important;
  min-height:46px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  border:2px solid #C9D8EA !important;
  background:#ffffff !important;
  color:#23335B !important;
  box-shadow:none !important;
  font-size:0.98rem !important;
}

body.itemid-295.layout-complete .form-control:focus,
body.itemid-295.layout-complete input[type="password"]:focus{
  border-color:#00A8C6 !important;
  box-shadow:0 0 0 4px rgba(0,168,198,.12) !important;
  outline:none !important;
}

body.itemid-295.layout-complete .input-password-toggle,
body.itemid-295.layout-complete .btn.btn-secondary{
  min-width:46px !important;
  min-height:46px !important;
  border:2px solid #C9D8EA !important;
  border-left:0 !important;
  border-radius:0 14px 14px 0 !important;
  background:#fff !important;
  color:#5d6985 !important;
  box-shadow:none !important;
}

body.itemid-295.layout-complete .btn.btn-primary,
body.itemid-295.layout-complete .btn.validate,
body.itemid-295.layout-complete button[type="submit"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:13px !important;
  border:2px solid #1E3A8A !important;
  background:#23335B !important;
  color:#fff !important;
  font-size:0.98rem !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 8px 16px rgba(35,51,91,.16) !important;
}

body.itemid-295.layout-complete .btn.btn-primary:hover,
body.itemid-295.layout-complete .btn.btn-primary:focus,
body.itemid-295.layout-complete .btn.validate:hover,
body.itemid-295.layout-complete .btn.validate:focus,
body.itemid-295.layout-complete button[type="submit"]:hover,
body.itemid-295.layout-complete button[type="submit"]:focus{
  background:#1b2746 !important;
  border-color:#1b2746 !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

@media (max-width:640px){
  body.itemid-295.layout-complete .com-users-reset-complete.reset-complete{
    padding:14px !important;
    border-radius:18px !important;
  }

  body.itemid-295.layout-complete legend{
    font-size:0.95rem !important;
    line-height:1.45 !important;
  }

  body.itemid-295.layout-complete .btn.btn-primary,
  body.itemid-295.layout-complete .btn.validate,
  body.itemid-295.layout-complete button[type="submit"]{
    width:100% !important;
  }
}

/* =========================================================
   LEGAL PAGES – SOFT RED CONTENT CARD
   Itemids: 296, 297, 298
   ========================================================= */

body.itemid-296 .com-content-article__body,
body.itemid-297 .com-content-article__body,
body.itemid-298 .com-content-article__body {
  max-width: 1180px;
  margin: 28px auto 0;
  padding: 34px 36px 38px;
  background: #f2e8e5;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(34, 58, 116, 0.08);
  box-sizing: border-box;
}

body.itemid-296 .container-component,
body.itemid-297 .container-component,
body.itemid-298 .container-component {
  padding-left: 20px;
  padding-right: 20px;
}

body.itemid-296 .com-content-article__body h1,
body.itemid-297 .com-content-article__body h1,
body.itemid-298 .com-content-article__body h1,
body.itemid-296 .com-content-article__body h2,
body.itemid-297 .com-content-article__body h2,
body.itemid-298 .com-content-article__body h2,
body.itemid-296 .com-content-article__body h3,
body.itemid-297 .com-content-article__body h3,
body.itemid-298 .com-content-article__body h3 {
  color: #223a74;
}

body.itemid-296 .com-content-article__body p,
body.itemid-297 .com-content-article__body p,
body.itemid-298 .com-content-article__body p,
body.itemid-296 .com-content-article__body li,
body.itemid-297 .com-content-article__body li,
body.itemid-298 .com-content-article__body li {
  color: #31445c;
}

@media (max-width: 768px) {
  body.itemid-296 .container-component,
  body.itemid-297 .container-component,
  body.itemid-298 .container-component {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.itemid-296 .com-content-article__body,
  body.itemid-297 .com-content-article__body,
  body.itemid-298 .com-content-article__body {
    margin-top: 20px;
    padding: 22px 18px 24px;
    border-radius: 20px;
  }
}


/* =========================
   Kontak en Ondersteuning
   ========================= */

.support-article {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
  color: #243746;
}

.support-article h1,
.support-article h2,
.support-article h3 {
  margin: 0 0 0.8rem;
  line-height: 1.2;
  font-weight: 800;
}

.support-article h1 {
  font-size: clamp(2rem, 3vw, 3rem);
  color: #0f6a8b;
}

.support-article h3 {
  font-size: 1.35rem;
  color: #0f6a8b;
}

.support-article p,
.support-article li {
  font-size: 1.05rem;
  line-height: 1.7;
}

.support-article p {
  margin: 0 0 1rem;
}

.support-article ul {
  margin: 0;
  padding-left: 1.3rem;
}

.support-article li {
  margin-bottom: 0.55rem;
}

/* Hero */
.support-hero {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1.2fr);
  gap: 1.8rem;
  align-items: center;
  margin-bottom: 1.6rem;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(135deg, #eefaf4 0%, #f7fcff 55%, #fff9e8 100%);
  border: 3px solid #9dddc6;
  border-radius: 28px;
  box-shadow: 0 10px 26px rgba(44, 96, 126, 0.10);
}

.support-illustration {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.support-illustration img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

.support-text {
  min-width: 0;
}

.support-text p:last-child {
  margin-bottom: 0;
}

/* Rows */
.support-row {
  margin-bottom: 1.4rem;
}

.support-row-half {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

/* Cards */
.support-section {
  background: #ffffff;
  border: 2px solid #d9edf4;
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(44, 96, 126, 0.08);
}

.support-card {
  padding: 1.15rem 1.3rem;
}

.support-card-help {
  border-color: #ffd67e;
}

.support-card-contact {
  border-color: #cfe3ff;
}

.support-card-admin {
  border-color: #ffd0da;
}

.support-card-tech {
  border-color: #eed28d;
}

.support-card-facebook {
  border-color: #d7e6ff;
}

.support-card-response {
  border-color: #d9cffc;
}

.support-section-inner {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
}

.support-visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.support-visual img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
}

.support-copy {
  min-width: 0;
}

.support-copy p:last-child,
.support-copy ul:last-child {
  margin-bottom: 0;
}

/* Links */
.support-article a {
  color: #0f6a8b;
  font-weight: 700;
  text-decoration: none;
}

.support-article a:hover,
.support-article a:focus {
  text-decoration: underline;
}

.support-fb-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #1877f2;
  color: #fff !important;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(24, 119, 242, 0.22);
}

.support-fb-link:hover,
.support-fb-link:focus {
  background: #0f63d1;
  color: #fff !important;
}

/* Closing message */
.support-close {
  margin: 0;
  padding: 1.2rem 1.3rem;
  text-align: center;
  font-size: 1.08rem;
  font-weight: 700;
  color: #0f6a8b;
  background: linear-gradient(135deg, #fff6cf 0%, #eef9f2 100%);
  border: 2px solid #ffd46f;
  border-radius: 22px;
  box-shadow: 0 6px 16px rgba(44, 96, 126, 0.08);
}

/* Responsive */
@media (max-width: 980px) {
  .support-hero {
    grid-template-columns: 1fr;
  }

  .support-row-half {
    grid-template-columns: 1fr;
  }

  .support-section-inner {
    grid-template-columns: 1fr;
  }

  .support-illustration,
  .support-visual {
    justify-content: center;
  }

  .support-illustration img {
    max-width: 280px;
  }

  .support-visual img {
    max-width: 150px;
  }
}

@media (max-width: 640px) {
  .support-article {
    padding: 1rem 0.7rem 2rem;
  }

  .support-hero {
    padding: 1.1rem;
    gap: 1rem;
    border-radius: 22px;
  }

  .support-card,
  .support-close {
    border-radius: 18px;
  }

  .support-card {
    padding: 1rem;
  }

  .support-article h1 {
    font-size: 1.9rem;
  }

  .support-article h3 {
    font-size: 1.2rem;
  }

  .support-article p,
  .support-article li {
    font-size: 1rem;
  }

  .support-illustration img {
    max-width: 240px;
  }

  .support-visual img {
    max-width: 140px;
  }

  .support-fb-link {
    width: 100%;
    text-align: center;
  }
}

/* =========================
   Kontak Ons menu button
   ========================= */

/* Style the Kontak Ons button in the top public menu */
.header .container-nav .mod-menu.mod-list.nav > li.item-207 > a {
  display: inline-block !important;
  padding: 0.72rem 1.15rem !important;
  background: #8edccf !important;
  color: #0f6a8b !important;
  border: 2px solid #62c7b6 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(44, 96, 126, 0.10) !important;
}

/* Hover / focus */
.header .container-nav .mod-menu.mod-list.nav > li.item-207 > a:hover,
.header .container-nav .mod-menu.mod-list.nav > li.item-207 > a:focus {
  background: #79d2c4 !important;
  color: #0f6a8b !important;
  border-color: #4fb8a5 !important;
  text-decoration: none !important;
}

/* Hide only on the Kontak Ons page itself */
body.itemid-207 .header .container-nav .mod-menu.mod-list.nav > li.item-207 {
  display: none !important;
}