/* ==========================================================================
   AllesVoorDieren.nl - uitklapmenu onder "Dieren"
   Hoort bij avd-menu.js. Wordt op de hele site ingeladen, want de kopbalk
   staat op elke pagina.
   De menustructuur is niet aangepast: de diersoorten, de groepen en de
   categorieen komen uit het WordPress-menu. Alleen de opmaak is nieuw.
   De ruime "!important" is nodig omdat de mega-menu-plugin zijn eigen maten
   hard oplegt.
   ========================================================================== */

body .col-full-nav .shoptimizer-primary-navigation{position:relative}

body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width{
  /* het menu-item vult de hele hoogte van de balk, zodat er geen dode ruimte
     zit tussen "Dieren" en het paneel eronder */
  position:relative !important;
  align-self:stretch !important;
  display:flex !important;
  align-items:center !important;
}

body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu{
  display:block !important;
  position:absolute !important;
  top:100% !important;
  left:-15px !important;
  right:auto !important;
  transform:none !important;
  width:1140px !important;
  max-width:calc(100vw - 60px) !important;
  min-height:344px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #dde5e8 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
  background:linear-gradient(to right,#eaf3f6 0,#eaf3f6 206px,#fff 206px) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .12s ease !important;
  z-index:60 !important;
}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width:hover > ul.sub-menu,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width:focus-within > ul.sub-menu,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width.avd-open > ul.sub-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li{
  width:206px !important;
  min-width:0 !important;
  flex:none !important;
  position:static !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:first-child{padding-top:12px !important}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:10px 16px !important;
  color:#126985 !important;
  font-size:14.5px !important;
  font-weight:700 !important;
  text-decoration:none !important;
  border:0 !important;
  background:transparent !important;
}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:hover > a,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:focus-within > a{background:#fff !important}

body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li > ul.sub-menu{
  position:absolute !important;
  left:206px !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(0,1fr) !important;
  gap:22px !important;
  align-content:start !important;
  padding:20px 24px 22px !important;
  margin:0 !important;
  width:auto !important;
  max-width:none !important;
  min-height:0 !important;
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow-y:auto !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:none !important;
  transition:none !important;
}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu:not(:hover):not(:focus-within) > li:first-child > ul.sub-menu,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:hover > ul.sub-menu,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:focus-within > ul.sub-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width li.menu-item-depth-2{width:auto !important;background:none !important;border:0 !important;position:static !important;padding:0 !important;margin:0 !important}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width li.menu-item-depth-2 > a{
  display:block !important;
  padding:0 0 5px !important;
  margin:0 0 8px !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#5b6b73 !important;
  border-bottom:1px solid #eef2f4 !important;
  border-radius:0 !important;
  text-decoration:none !important;
  background:none !important;
}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width li.menu-item-depth-2 > ul.sub-menu{
  display:block !important;
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  width:auto !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
  left:auto !important;
  top:auto !important;
}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width li.menu-item-depth-3{width:auto !important;background:none !important;border:0 !important;padding:0 !important;margin:0 !important}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width li.menu-item-depth-3 > a{
  display:block !important;
  padding:3px 0 !important;
  color:#22333b !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  text-decoration:none !important;
  border:0 !important;
  background:none !important;
}
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width li.menu-item-depth-3 > a:hover,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width li.menu-item-depth-3 > a:focus-visible{color:#126985 !important;text-decoration:underline !important}

body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width ul.sub-menu .caret,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width ul.sub-menu .submenu-parent-icon{display:none !important}

body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width a:focus-visible{outline:3px solid #126985;outline-offset:-3px}

@media (max-width:1279px){
  body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu{width:calc(100vw - 60px) !important}
}




/* Zodra avd-menu.js draait bepaalt de klasse .avd-open of het paneel open staat.
   Dat geeft een korte vertraging bij openen en sluiten, zodat het paneel niet
   dichtvalt als je net naast de rand komt. Draait het script niet, dan blijft
   openen op :hover gewoon werken. */
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width:hover > ul.sub-menu{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width.avd-open > ul.sub-menu,
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width:focus-within > ul.sub-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* Zodra het script draait bepaalt .avd-actief welke diersoort rechts wordt
   getoond, met een korte bevestigingsvertraging. Zonder die vertraging wisselt
   de inhoud al terwijl je er schuin overheen beweegt. */
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu:not(:hover):not(:focus-within) > li:first-child > ul.sub-menu,
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:hover > ul.sub-menu,
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:focus-within > ul.sub-menu{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li.avd-actief > ul.sub-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:hover > a{background:#fff !important}
body.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li.avd-actief > a{
  background:#fff !important;
  box-shadow:inset 3px 0 0 #126985;
}


/* ==========================================================================
   CORRECTIE 3 augustus 2026 - verbergen met display, niet met visibility

   Een dichtgeklapt paneel stond op visibility:hidden en pointer-events:none,
   maar de regels dieper in het menu zetten visibility en pointer-events weer
   aan. Een verborgen tak bleef daardoor de muis vangen: het menu klapte
   vanzelf open zodra je onder de kopbalk bewoog, en de inhoud sprong heen en
   weer omdat je onzichtbare kolommen van andere diersoorten aanraakte.
   display:none haalt de tak volledig uit de pagina - dat kan een regel
   eronder niet terugdraaien.

   De drievoudige .avd-menu-js is er om deze regels zwaarder te laten wegen
   dan de terugvalregels op :hover die erboven staan.
   ========================================================================== */
@keyframes avdMenuIn{from{opacity:0}to{opacity:1}}

/* --- het paneel zelf --- */
/* dicht */
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu{display:none !important}
/* zonder script: openen op hover */
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width:hover > ul.sub-menu{display:block !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
/* met script: hover alleen is niet genoeg, .avd-open bepaalt het */
body.avd-menu-js.avd-menu-js.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width:hover > ul.sub-menu{display:none !important}
body.avd-menu-js.avd-menu-js.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width.avd-open > ul.sub-menu{display:block !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;animation:avdMenuIn .13s ease-out}

/* --- de kolommen per diersoort --- */
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li > ul.sub-menu{display:none !important}
/* zonder script: eerste diersoort als niets wordt aangewezen, anders de hover */
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu:not(:hover) > li:first-child > ul.sub-menu,
body .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li:hover > ul.sub-menu{display:grid !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
/* met script: alleen .avd-actief telt, met de bevestigingsvertraging uit avd-menu.js */
body.avd-menu-js.avd-menu-js.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li > ul.sub-menu{display:none !important}
body.avd-menu-js.avd-menu-js.avd-menu-js .col-full-nav .shoptimizer-primary-navigation .main-navigation li.menu-item-depth-0.full-width > ul.sub-menu > li.avd-actief > ul.sub-menu{display:grid !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important}


/* ==========================================================================
   De mobiele kopbalk van de TapTap-plugin uitzetten (AVD 82)
   --------------------------------------------------------------------------
   De plugin legde op mobiel een eigen donkere balk over onze kopbalk heen,
   met een eigen MENU-knop, een tweede sitetitel over het logo en een eigen
   zoekknop. Tegelijk verborg hij de MENU-knop van het thema, waardoor het
   eigen menupaneel niet meer te openen was. Op de afreken- en bedankpagina
   stond de plugin al uit; deze regels doen dat overal.
   ========================================================================== */

body > .taptap-header,
body > .taptap-header-bg-image,
body > .taptap-menu-button-wrapper,
body > .taptap-search-button-wrapper,
body > .taptap-search-wrapper,
body > .taptap-search-background,
body > .taptap-search-overlay,
body > .taptap-logo-wrapper,
body > .taptap-background-video,
body > .taptap-background-color,
body > .taptap-background-overlay,
body > .taptap-main-wrapper{
  display:none !important;
}

/* De MENU-knop van het thema weer terug. Het thema toont hem zelf tot en met
   768px; daarboven hoort hij verborgen te blijven. */
@media (max-width:768px){
  .site-header .menu-toggle{ display:block !important; }
}