/*
Theme Name: De Fytsdokter
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl
Description: Thema voor de Fytsdokter
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Specific CSS */
ul li.menu-item-button.bg-secondary a {
  color: white!important;
}
#hero .image-slider figure {
 	scale: 1; 
  	max-height: 557px!important;
}
.logo-and-navigation-holder {
 	display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
  	margin-right: 30px!important;
}

.nav-holder.nav-holder-primary-2 {
  margin-left: 48px;
}
.asl_w_container .asl_w .probox {
    min-width: auto;
    width: 100%;
}
.shortcode-holder {
    flex: 0 0 auto;
    margin: 0 auto; 
    flex-grow: 1;
}
.nav-holder.nav-holder-primary-1 {
    flex: 1;
    justify-content: flex-end;
}
#ajaxsearchlite1 .probox, div.asl_w .probox {
 border-radius: 0px!important; 
}
.asl_w_container .asl_w .probox .promagnifier {
 background-color: transparent!important; 
}
.asl_w_container .asl_w .probox .promagnifier svg path {
  fill: black!important;
}
#primary-menu-ul {
 margin-right: 10px;
}
.image-slider {
     display: flex;
    align-items: center; 
}
.image-slider figure{
  scale: 0.8;
}
section.page-header {
	padding: 50px;
}
.nav-holder-primary-1 li.menu-item-type-custom a {
    padding: 0px 5px!important;
}
.under-menu .main-nav-menu li a {
  padding: 3px 30px!important;
  font-weight: 300!important;
}
footer img {
  width: auto;
}
.intro-padding .card{
  padding: 50px;
}
.intro-bg .card{
  background-image: url(img/bg-intro.jpg);
  background-size: cover;
}
.card .product-excerpt {
     overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
  font-size: 13px;
}
.direct-to .direct-to-buttons .btn {
    width: fit-content!important;
    font-weight: 300;
    font-size: 14px;
}
.price small {
 font-size: 50%;
  font-weight: 400;
}
.socket * {
 font-size: 12px; 
}

.main-nav-menu .menu-item-has-button a {
  padding: unset;
}

.menu-item-button {
  line-height: normal;
}

.menu-topbar-menu-container ul li {
  margin: 0 20px;
}

.display-as-card .row {
  padding: 72px 43px;
  border: 1px solid var(--darkgray);
  border-radius: 10px;
  background: var(--white);
}
.display-as-card-single .row {
  padding: 43px 43px;
  border: 1px solid var(--darkgray);
  border-radius: 10px;
  background: var(--white);
}


.display-as-card .image-outer.full-width-and-hight-to-right {
  margin-top: -72px;
  margin-bottom: -72px;
  margin-left: -58px;
  width: calc(100% + 116px);
}

.bg-half-top-primary {
  position: relative;
}

.bg-half-top-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--primary);
  opacity: .1;
}

.button, .btn {
  line-height: normal;
}

.icons-list li .icon {
  width: 20px;
  font-size: 20px;
}

.icons-list li:not(:last-child) {
  margin-bottom: 4px;
}

.openinghours .single-day .day-time {
  margin-left: auto;
}

.card-product {
	position: relative; 
}

.card-product .quantity-holder {
	display: none; 
}

.card-product .product-on-sale {
  	position: absolute;
  	top: 29px;
  	left: 0;
  	background: var(--black);
  	color: var(--black-content);
    font-size: 13px;
    font-weight: 300;
}

.card-product .woocommerce-loop-product__title {
  font-size: 16px;
  line-height: auto;
}

.card-product .product-excerpt {
  margin-top: 8px;
  font-size: 14px;
  line-height: 24px;
  font-style: italic;
}

.product-pricing .price {
  font-weight: 300 !important;
}
section.lef-section.full-background-overlay .background-image-wrapper img {
    opacity: .6;
}
#hero .tns-outer .tns-controls.center {
    width: calc(100% + 120px);
    left: -60px;
}
@media only screen and (max-width: 768px) {
  .menu-item-button {
    padding: 10px; 
  }
  .navigation .logo {
    height: 40px!important; 
  }
  .mobile-menu-toggle-position {
    padding-left: 0px!important;
  }
  button.sub-menu-toggle::after {
   color: black!important; 
  }
  .featured-taxonomy .card {
    display: flex!important;
  	align-items: center;
    padding-left: 20px;
  }
  .card-taxonomy-term .image-outer {
   	width: 50px; 
  }
  .featured-taxonomy .card .child-terms {
    display: none;
  }
  .card-taxonomy-term.card .content-outer {
    flex: 1;
  }
}

.card .image-outer .image-holder {
  background: #ffffff!important; /* of gebruik gewoon 'white' */
}
.geen-padding {
  padding: 0; /* Standaard: mobiel geen padding */
}

@media (min-width: 768px) {
  .geen-padding {
    padding: 20px; /* Desktop: 20px padding */
  }
}

@media only screen and (max-width: 991px) {
    .direct-to .direct-to-buttons .direct-to-buttons-item {
        width: calc(50% - var(--btn-margin-outer) * 2)!important;
  	}
    .direct-to-buttons .btn {
        padding: 5px;
    }
    body .card-product {
		flex-direction: row;
    }
    .card-product .image-outer {
        width: 40%;
      	display: flex;
    	align-items: center;
    }
  	.card-product .content-outer {
        width: 60%;
    }
    .card-product {
      flex-direction: row;
      flex-wrap: wrap;
  	}
  	body .card-product .loop-item-actions-wrapper {
    	display: none;  
  	}
    .cards-same-height .card {
        height: calc(100% - 5px) !important;
        margin: 0px 0;
    }
    .card-product .image-outer .image-holder img {
    	position: relative;
  	}
  	.card-product .image-outer .image-holder {
    	padding-bottom: 0;  
  	}
}

.images-side-by-side {
  display: flex;
  flex-wrap: wrap; /* wrap zorgt dat het ook op kleinere schermen werkt */
  justify-content: center;
  gap: 10px;
}

.images-side-by-side .wp-block-image {
  width: 48%!important; /* ongeveer 2 naast elkaar met wat marge */
}
@media (max-width: 992px) {
  #mobile-overflow-scroll .row {
   		flex-wrap: nowrap;
        overflow-x: scroll;
        margin-right: calc(-100vw / 2 + 100% / 2);
        justify-content: start; 
  }
  #mobile-overflow-scroll .row figure {
   width: 50vw; 
  }
}