/* ==========================================================================
   Ecwid store: merken-/categorieënbalk duidelijker maken

   HTML-structuur (Ecwid "CategoriesV2" widget):
   .horizontal-menu-container.horizontal-desktop
     nav.horizontal-menu
       ul.horizontal-menu-parent
         li.horizontal-menu-item.horizontal-menu-item--levelTop  <- hoofdcategorie
           a > span + svg.horizontal-arrow-bottom (indien submenu)
           ul.horizontal-menu-subParent                          <- subcategorie
             li.horizontal-menu-item.horizontal-menu-item--levelChild
   ========================================================================== */

.horizontal-menu-container.horizontal-desktop,
.horizontal-menu-container.horizontal-mobile {
	--ec-color-background: #333333;
	--ec-color-background-raw: 0 0% 20%;
	--ec-color-text: #ffffff;
	--ec-color-link: #ffffff;
	--ec-color-link-hover: #d9c9a0;
	--ec-color-link-active: #d9c9a0;
	--ec-color-border: #4a4a4a;
	--ec-color-back: #454545;

	background-color: var(--ec-color-background) !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
}

/* Zorg dat de nav/ul zelf geen eigen (lichte) achtergrond of rand meer tonen */
.horizontal-menu-container.horizontal-desktop nav,
.horizontal-menu-container.horizontal-desktop ul,
.horizontal-menu-container.horizontal-mobile nav,
.horizontal-menu-container.horizontal-mobile ul {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Tekst van de hoofdcategorie (NIET de submenu-items, vandaar --levelTop) */
.horizontal-menu-container.horizontal-desktop .horizontal-menu-item--levelTop > a,
.horizontal-menu-container.horizontal-mobile .horizontal-menu-item--levelTop > a {
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
}

/* Dropdown-pijltje in dezelfde kleur als de tekst */
.horizontal-menu-container.horizontal-desktop .horizontal-menu-item--levelTop > a svg,
.horizontal-menu-container.horizontal-mobile .horizontal-menu-item--levelTop > a svg {
	fill: #ffffff !important;
}

/* Hover-accent op een hoofcategorie */
.horizontal-menu-container .horizontal-menu-item--levelTop:hover > a,
.horizontal-menu-container .horizontal-menu-item--levelTop.horizontal-menu-item--hover > a {
	color: #d9c9a0 !important;
}

/* Submenu (subcategorieën): donkere achtergrond passend bij de balk, lichte tekst */
.horizontal-menu-container.horizontal-desktop .horizontal-menu-subParent,
.horizontal-menu-container.horizontal-mobile .horizontal-menu-subParent {
	background-color: #333333 !important;
	border: none !important;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

.horizontal-menu-container.horizontal-desktop .horizontal-menu-subParent .horizontal-menu-item > a,
.horizontal-menu-container.horizontal-mobile .horizontal-menu-subParent .horizontal-menu-item > a {
	color: #f0ece4 !important;
}

.horizontal-menu-container.horizontal-desktop .horizontal-menu-subParent .horizontal-menu-item > a:hover,
.horizontal-menu-container.horizontal-mobile .horizontal-menu-subParent .horizontal-menu-item > a:hover {
	background-color: #454545 !important;
	color: #d9c9a0 !important;
}