.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; background: none; border: none; padding-left: 10px; padding-right: 0px; width: auto; }
.menu-toggle:hover { color: var(--accent); }

.main-nav > ul { display: flex; gap: 1rem; } /* Gap verkleind, padding op links gezet */
.main-nav li { position: relative; }

/* De Hoofdlinks */
.main-nav > ul > li > a {
    font-weight: 600; 
    font-size: 0.9rem; 
    text-transform: uppercase; 
    color: var(--text-main);
    display: flex; align-items: center; gap: 0.3rem;
    padding: 1rem 0.8rem; /* Grotere klikbare zone */
    position: relative;
    transition: color 0.2s, background-color 0.2s;
    border-bottom: 3px solid transparent; /* Voorbereiding active state */
}

/* HOVER STATE: Lichtgrijze achtergrond */
.main-nav > ul > li:hover > a,       /* Muis is over item OF dropdown */
.main-nav > ul > li:focus-within > a /* Voor toetsenbord gebruikers */
{
    color: var(--accent);
    background-color: var(--accent-grey);    
	z-index: 101;
	text-decoration: none;
}

/* ACTIVE STATE: Duidelijke blauwe lijn onderaan */
.main-nav > ul > li > a.current-page {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Nav Dropdown */
.nav-dropdown {
    position: absolute; top: 100%; left: 0;
    background: var(--bg-light); min-width: 220px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border: 1px solid var(--border); border-radius: 0 0 8px 8px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all 0.2s ease; z-index: 100; padding: 0.5rem 0;
}
.nav-dropdown li { padding: 0; }
.nav-dropdown a { display: block; padding: 0.8rem 1.5rem; text-transform: none; font-weight: 400; font-size: 0.95rem; }
.nav-dropdown a:hover { background: var(--bg-light); color: var(--accent); text-decoration: underline; }

.submenu-trigger {
	display: flex;
	align-items: center;
	gap: 5px;
}

@media (min-width: 901px) {
    .has-submenu:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    .has-submenu > a::after { content: '▾'; font-size: 0.8em; }
}




.sidemenu a {
	padding: 0.4rem;
	display: block;
	color: var(--accent);
	position: relative;
}

.sidemenu a:hover {
	background-color: var(--accent-grey);
	text-decoration: none;
}

.sidemenu ul ul a {
	padding-left: 1.5rem;
}

.sidemenu a.active {
	color: var(--accent-gold);
	background-color: var(--accent);
}

/* Container voor de paginatie */
.pagination {
  display: flex;
  justify-content: center; /* Zet de paginatie in het midden */
  list-style-type: none;
  padding: 0;
  margin: 40px 0;
  gap: 8px; /* Ruimte tussen de knoppen */
}

.productfiltercontainer {
	padding: 1rem;
}

.productfilters {
	display: grid;
    /* auto-fit past automatisch het aantal kolommen aan op basis van de containerbreedte */
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 20px;
}




/* De standaard knoppen */
.page-link {
  display: block;
  padding: 0px 15px;
  color: var(--text-main);
  background-color: #fff;
  border: 2px solid var(--accent-grey);
  border-radius: 6px; /* Moderne, licht afgeronde hoekjes */
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  line-height: 48px;
  height: 50px;
}

/* Hover effect: wat gebeurt er als je er met de muis overheen gaat? */
.page-link:hover {
  color: var(--accent);
  background-color: var(--accent-grey);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  text-decoration: none;
}

/* De actieve pagina (waar de gebruiker nu is) */
.page-item.active .page-link {
  background-color: var(--accent-gold); /* Een mooie, opvallende kleur (bijv. de kleur van je webshop) */
  color: var(--accent);
 
  cursor: default; /* Laat zien dat je hier niet op kunt klikken */
}

/* De standaard styling voor de lijst-items */
.page-item.disabled .page-link {
    color: #a0a0a0;           /* Lichtgrijze tekst */
    pointer-events: none;      /* Zorgt dat de link letterlijk niet klikbaar is */
    background-color: transparent; /* Iets donkerdere achtergrond dan normaal */
    border-color: var(--accent-grey);     /* Zachtere randen */
    cursor: not-allowed;       /* Toont een 'verboden' cirkel op desktop */
}

/* Zorg dat de hover-effecten niet werken bij disabled */
.page-item.disabled .page-link {
	pointer-events: none;
}

.mobile-page-selection {
	display: none;
}


/*
.catmenu li::after { content: '/'; margin-left: 0.5rem; opacity: 0.5; }
.catmenu li:last-child::after { content: ''; }
.catmenu a:hover { color: var(--accent); text-decoration: underline; }
.catmenu .active { font-weight: 600; color: var(--text-main); }
*/

.catmenu { font-size: 0.85rem; color: var(--text-muted); }

.catmenu > ul { display: flex; gap: 0.5rem; }
.catmenu li { position: relative; }
/* De Hoofdlinks */
.catmenu > ul > li > a {
    font-weight: 600; 
    font-size: 0.9rem; 
   
   
    display: flex; align-items: center; gap: 0.3rem;
    padding: 1rem 0.8rem; /* Grotere klikbare zone */
    position: relative;
    transition: color 0.2s, background-color 0.2s;
    border-bottom: 3px solid transparent; /* Voorbereiding active state */
}

/* HOVER STATE: Lichtgrijze achtergrond */
.catmenu > ul > li:hover > a,       /* Muis is over item OF dropdown */
.catmenu > ul > li:focus-within > a /* Voor toetsenbord gebruikers */
{
	z-index: 101;
	text-decoration: underline;
	
}

/* Nav Dropdown */
.catmenu-dropdown {
    position: absolute; top: 70%; left: 0;
    background: var(--bg-light); min-width: 480px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border: 1px solid var(--border); border-radius: 0 0 8px 8px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all 0.2s ease; z-index: 100; padding: 0.5rem 0;
}
.catmenu-dropdown li { padding: 0; }
.catmenu-dropdown a { display: block; padding: 0.2rem 1.5rem; text-transform: none; font-weight: 400; font-size: 0.95rem; }
.catmenu-dropdown a:hover { background: var(--bg-light); color: var(--accent); text-decoration: underline; }

.catmenu-trigger {
	display: flex;
	align-items: center;
	gap: 5px;
}

@media (min-width: 901px) {
    .has-submenu:hover .catmenu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    .has-submenu > a::after { content: '▾'; font-size: 0.8em; }
}


@media (max-width: 900px) {
  .d-none-mobile {
    display: none;
  }
  .mobile-page-selection {
	display: block;
}
  
  .pagination {
    width: 100%;
    justify-content: space-between; /* Zet Vorige links en Volgende rechts */
  }

  .page-link {
    flex-grow: 1; /* Maakt de knoppen lekker breed en makkelijk klikbaar */
    text-align: center;
    /*padding: 15px; /* Extra ruimte voor duimen */
  }
}


/* Container om de navigatie wat ademruimte te geven */
.category-pills-wrapper {
    margin: 20px 0 30px 0;
    width: 100%;
}

/* De lijst zelf: Flexbox & Horizontaal scrollbaar op mobiel */
.category-pills {
    display: flex;
    gap: 12px; /* Ruimte tussen de pills */
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Cruciaal voor mobiel: laat het horizontaal scrollen (swipen) */
    overflow-x: auto;
    /* Soepel scrollen op iOS */
    -webkit-overflow-scrolling: touch; 
    
    /* Verberg de scrollbalk in Firefox */
    scrollbar-width: none; 
    /* Verberg de scrollbalk in IE/Edge */
    -ms-overflow-style: none; 
}

/* Verberg de scrollbalk in Chrome/Safari/Edge */
.category-pills::-webkit-scrollbar {
    display: none; 
}

/* De styling van de individuele Pill */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background-color: #fff;
    color: var(--accent); 
    border-radius: 9999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: sans-serif;
    white-space: nowrap;
    transition: all 0.2s ease;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* Hover effect voor muisgebruikers */
.pill:hover {
    background-color: var(--accent-gold);
	text-decoration: none;
}

/* De actieve status (als de gebruiker al op deze categorie is) */
.pill.active {
    background-color: #111827; /* Zwart (of jouw merkkleur) */
    color: #ffffff;
}

/* Styling voor de productaantallen */
.pill .count {
    margin-left: 6px;
    font-size: 13px;
    color: #6b7280; /* Iets lichtere grijstint voor het getal */
}

/* Zorg dat het getal in een actieve pill ook goed leesbaar blijft */
.pill.active .count {
    color: #d1d5db; /* Lichtgrijs in plaats van donkergrijs op zwarte achtergrond */
}

@media (min-width: 768px) {
    .category-pills {
        flex-wrap: wrap; /* Laat knoppen netjes naar de volgende regel vallen */
        overflow-x: visible; /* Zet het zijwaarts scrollen uit */
    }
}