.tab-menu {
  display: flex;
  list-style: none;
  margin: 20;
  padding: 0;
  border-bottom: 1px solid #ccc;
}

.tab-menu li {
  margin-bottom: 5px;
  margin-left: 0;
}

@media (max-width: 768px) {
	.tab-menu button {
  	background-color: white !important;
  	color: black !important;
  	z-index: 3;
	padding: 5px 10px !important;
	width: 100% !important;
	}
	.tab-menu {
	display: grid;
        grid-template-columns: repeat(4, 0fr) !important;
        gap: 0px;
        padding: 0px;
        border: none;
        margin-bottom: 0px;
    	}

	}
}

.tab-menu button {
  padding: 15px 30px;
  border: none !important;
  border-bottom: none;
  background-color: white;
  cursor: pointer;
  font-size: 26px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  margin-right: 4px;
  position: relative;
  top: 0;
  z-index: 1;
  transition: all 0.1s ease-in-out;
    /*color: #666;*/
}

.tab-menu button.active {
  background-color: #94c41c;
  color: white ;
  /*font-weight: bold;*/
  z-index: 3; 
  border-color: black;
  /*top: 2px; /* schuift actieve tab 2px naar beneden zodat hij over het contentvlak valt */
}

.tab-menu button:hover {
  color: white; /* gewenste tekstkleur bij hover */
  background-color: #94c41c !important;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 0px solid #fff;
  background-image: linear-gradient(white, #efefef);
  border-top: none;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 100px;
  position: relative;
  top: -2px; /* schuift het contentvlak iets omhoog voor overlap */
  z-index: 3;
}

.tab-content.active {
  display: block;
margin-top: -10px;
}

.tab-menu li.active button {
  background-color: #94c41c !important;
  color: white !important;
}

.tab-menu button:focus {
  outline: none;
  box-shadow: none;
}

/* Actieve knop: groen */
.tab-menu button.active {
  background-color: #94c41c !important;
  color: white !important;
  z-index: 3;
}

/* Alle andere knoppen: altijd wit (ook bij klik/hover/focus) */
.tab-menu button:not(.active):hover,
.tab-menu button:not(.active):focus,
.tab-menu button:not(.active):active {
  background-color: #f5f5f5 !important;
  color: #444 !important;
  outline: none;
  box-shadow: none;
}

  .product-tabs .tab-menu li {
    margin: 10;
  }

  .product-tabs .tab-menu button {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 18px;
    text-align: center;
    background-color: white;
    color: black;
    border: 1px solid #d8d8d8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
  }

  .product-tabs .tab-menu button.active {
    background-color: #94c41c !important;
    color: white !important;
    border-color: #94c41c;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .product-tabs .tab-menu button:hover:not(.active) {
    background-color: #f5f5f5 !important;
  }
}