/*
 Theme Name:     Gofourward Thema
 Theme URI:      https://www.gofourward.nl
 Description:    Custom thema voor klanten
 Author:         Gofourward
 Author URI:     https://www.gofourward.nl
 Template:       Divi
 Version:        0.1.2
*/
 
 
/* Theme customization starts here
------------------------------------------------------- */
/* ====== 4-col product slider (WooCommerce) ====== */
.custom-products-slider-4 {
  position: relative;
}

/* Viewport om de UL heen */
.custom-products-slider-4 .cps4-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Track = de bestaande UL.products */
.custom-products-slider-4 .cps4-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transform: translateX(0); /* JS zet hierop de animatie */
}

/* Items: precies 4 zichtbaar */
.custom-products-slider-4 .cps4-track > li.product {
  flex: 0 0 25%;
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
	.custom-products-slider-4 .cps4-track > li.product {
	  flex: 0 0 100%;
	}
	
	.et_pb_row_0.et_pb_row:has(.page-title) {
		padding-top: 400px !important;
		padding-bottom: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		
		overflow: visible;
		border-radius: 15px 15px 0 0;
		position: relative;
	}
	
	.et_pb_column:has(.page-title) {
		background: #2a3d33;
		margin-bottom: 0 !important;
		padding: 20px;
		
		border-radius:  0 0 15px 15px;
		position: absolute;
	}
		
}


/* Optioneel: ruimte tussen items (pas aan naar wens) */
/* .custom-products-slider-4 .cps4-track { gap: 16px; } */

/* Navigatieknoppen */
.custom-products-slider-4 .cps4-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}

.custom-products-slider-4 .cps4-nav:hover { opacity: 0.85; }
.custom-products-slider-4 .cps4-prev { left: 8px; }
.custom-products-slider-4 .cps4-next { right: 8px; }

.custom-products-slider-4 .cps4-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Knoppen-icoontjes (pijltjes) */
.custom-products-slider-4 .cps4-nav svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Zorg dat Woo kolom-klassen geen layout breken */
.custom-products-slider-4 .woocommerce.columns-4,
.custom-products-slider-4 .products.columns-4 {
  margin: 0;
  padding: 0;
}

.custom-products-slider-4 ul.products li, .custom-products-slider-4 ul.products li {
	margin-right: 0 !important;
	padding-right: 2% !important;
}