/*
Theme Name:   Vishandel de Vakman 2025
Description:  Vishandel de Vakman 2025 Theme
Author:       Chris Tol
Author URL:   https://www.sedero.nl
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URL:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  vishandeldevakman
*/

/* exo-2-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/Exo2/exo-2-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* exo-2-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/Exo2/exo-2-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* exo-2-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/Exo2/exo-2-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* exo-2-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/Exo2/exo-2-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* exo-2-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/Exo2/exo-2-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/robotoCondensed/roboto-condensed-v27-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/robotoCondensed/roboto-condensed-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/robotoCondensed/roboto-condensed-v27-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/robotoCondensed/roboto-condensed-v27-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root{
	--color-primary: #ee7214;
	--color-white: #ffffff;
	--color-dark: #282828;
	--color-black: #202020;
	--color-grey-light: #bebebe;
}

body{
	font-family: "Roboto Condensed";
	font-weight: 400;
}

h1, .entry-content h1,
h2, .entry-content h2,
h3, .entry-content h3{
	font-family: 'Exo 2';
	line-height: 1.2;
}

h2, .entry-content h2{
	font-size: 2.7333333333333rem;
}

.wp-block-table td, .wp-block-table th{
	padding: 0.1em;
}

.color-primary{
	color: var(--color-primary);
}

.color-white{
	color: var(--color-white);
}

.slick-track{
	display: flex;
	-webkit-display: flex;
	justify-content: stretch;
}

/* the slides */
.slick-slide {
    margin: 0 10px;
    align-self: stretch;
    height: auto;
}

.slick-slide > div{
	height: 100%;
}

/* the parent */
.slick-list {
    margin: 0 -10px;
}

.semi-bold{
	font-weight: 600;
}
  
.bold{
	font-weight: 700;
}

.extra-bold{
	font-weight: 800;
}

.arrow-right{
	position: relative;
}

.arrow-right::after{
	content: "\f061";
	font: var(--fa-font-solid);
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);	
}

.home #content{
	background-color: var(--color-dark);
}

@media screen and ( max-width: 767px )
{
	.site-branding{
		max-width: 160px !important;
		width: 160px !important;
	}
}

@media screen and ( min-width: 921px )
{
	.site-branding{
		top: -78px;
		position: absolute;
	}
}

@media screen and ( min-width: 1400px )
{
	.site-branding{
		top: -50px;
	}
}

.top-header-bar-wrap{
	background-color: var(--color-white);
}

.top-header-bar-wrap .ast-container{
	display: flex;
	-webkit-display: flex;
	justify-content: flex-end;
	padding: 10px 0 0 !important;
}

.top-header-bar-wrap .ast-container .top-menu-links {
	margin-right: 10px;
}

.top-header-bar-wrap .ast-container .top-menu-links a{
	background-color: var(--color-primary);
	color: var(--color-white);
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 44px;
	font-size: 20px;
	display: inline-block;
	margin-left: 5px;
	cursor: pointer;
}

.top-header-bar-wrap .ast-container .cart-total{
	background-color: var(--color-primary);
	color: var(--color-white);
	text-align: center;
	display: flex;
	-webkit-display: flex;
	align-content: center;
	align-items: center;
	width: 80px;
	justify-content: center;
}

.top-header-bar-wrap .ast-container .cart-total a{
	color: var(--color-white);
}

.top-header-bar-wrap .ast-container .cart-total a::before{
	content: "\f291";
	font: var(--fa-font-solid);
	display: block;
	font-size: 16px;
	line-height: 1;
	margin-right: 5px;
}

@media screen and ( min-width: 768px ), print{
	
	.top-header-bar-wrap .ast-container .cart-total{
		width: 60px;
		height: 60px;
		line-height: 60px;
		display: block;
	}
	
	.top-header-bar-wrap .ast-container .cart-total a::before{
		margin-top: 10px;
		margin-bottom: -14px;
		margin-right: 0;
	}
	
}


.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item{
	line-height: 40px;
}

.woocommerce-js div.product form.cart .variations th{
	color: var(--color-white);
}

.main-header-menu > .menu-item > .menu-link{
	font-family: 'Exo 2';
	text-transform: uppercase;
	font-weight: 500;
}

.header-main-layout-2 .main-header-bar-navigation{
	text-align: right;
}

.home h1{
	text-transform: uppercase;
}

.columns-main-intro{
	color: var(--color-white);
	padding: 0 4.5%;
}


.slider-heading{
	font-size: 2vw !important;
}

div#n2-ss-2 .nextend-bullet-bar .n2-bullet{
	background: var(--color-white);
}

div#n2-ss-2 .nextend-bullet-bar .n2-bullet.n2-active{
	background: var(--color-primary);
}

.container-our-webshop{
	padding: 0 4.5%;
	padding-bottom: 600px !important;
	max-width: 91%;
	margin: 0px auto;
}

@media screen and ( min-width: 768px )
{
	
	.slider-heading{
		font-size: 1vw !important;
	}
	
	.container-our-webshop{
		padding-bottom: 450px !important;
	}
	
	.container-our-webshop h2{
		text-align: right
	}
}

@media screen and ( min-width: 768px ) and ( max-width: 1400px )
{
	.columns-main-intro{
		padding-bottom: 100px;
	}
}

@media screen and ( min-width: 1024px )
{
	.container-our-webshop{
		padding-bottom: 550px !important;
	}
	
}

@media screen and ( min-width: 1400px )
{
	.home .n2-section-smartslider{
		margin-top: -90px !important;;
	}
	
	.slider-heading{
		font-size: 0.8vw !important;
	}
}


@media screen and ( min-width: 1600px )
{
	.container-our-webshop{
		padding-bottom: 550px !important;
	}
}

.container-our-webshop .columns-our-webshop{
	max-width: 1024px;
	margin: 0px auto;
	margin-bottom: 30px;
}

.container-our-webshop #product-slider{
	position: absolute;
    left: 0px;
	width: 100%;
	opacity: 0;
	display: flex;
	-webkit-display: flex;
  	justify-content: stretch;
}

.container-our-webshop #product-slider .slick-prev{
	position: absolute;
	left: calc( 50% - 50px );
	bottom: -75px;
	top: auto;
	width: 40px;
	height:40px;
	border: 1px solid var(--color-primary);
}

.container-our-webshop #product-slider .slick-prev::before{
	content: "\f060" !important;
	font: var(--fa-font-solid);
	opacity: 1;
	color: var(--color-primary);
	font-size: 16px;
}

.container-our-webshop #product-slider .slick-next{
	position: absolute;
	right: calc( 50% - 50px );
	bottom: -75px;
	top: auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-primary);
}

.container-our-webshop #product-slider .slick-next::before{
	content: "\f061" !important;
	font: var(--fa-font-solid);
	opacity: 1;
	color: var(--color-primary);
	font-size: 16px;
}

.container-our-webshop #product-slider .slick-next:hover,
.container-our-webshop #product-slider .slick-prev:hover{
	background-color: var(--color-primary);
}

.container-our-webshop #product-slider .slick-next:hover::before,
.container-our-webshop #product-slider .slick-prev:hover::before{
	color: var(--color-white);
}

.container-our-webshop #product-slider .item.product{
	background-color: var(--color-white);
	border-bottom: 5px solid var(--color-primary);
	align-self: stretch;
	height: 100%;
}

.container-our-webshop #product-slider .item.product .product-info{
	padding: 0 20px 10px;
}

.container-our-webshop #product-slider .item.product .product-info .product-name{
	color: var(--color-black);
	font-weight: 800;
	font-family: 'Exo 2';
	font-size: 16px;
}

.container-our-webshop #product-slider .item.product .product-info .price-box .woocommerce-Price-amount{
	font-size: 16px;
	font-weight: 600 !important;
}

.container-our-webshop #product-slider .item.product .product-info .prefix-price{
	color: #000 !important;
	font-size: 14px;
}

.container-our-webshop #product-slider.slick-initialized{
	opacity: 1;
}

.container-columns-vestiging-arnhem{
	margin-top: 400px;
}

.container-columns-vestiging-arnhem > .wp-block-column{
	margin-top: -300px;
}

.columns-vestiging{
	max-width: 1200px; 
	margin: 0px auto;
}

/*
 * WEBSHOP
 */
body .site-content{
	background-color: var(--color-dark);
	overflow: hidden;
}

.ast-left-sidebar #content > .ast-container{
	flex-direction: column;
}

.ast-left-sidebar #primary{
	border: none;
}

.ast-left-sidebar #secondary{
	border: none;
	padding-right: 0;
	padding-bottom: 0;
}

.woocommerce-breadcrumb, .woocommerce-breadcrumb a{
	color: var(--color-white) !important;
}

.woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select{
	background-color: var(--color-white);
}

.woocommerce-result-count{
	color: var(--color-white);
}

.woocommerce-products-header__title.page-title{
	color: var(--color-primary)	
}

.woocommerce-products-header .page-description,
.woocommerce-products-header .term-description{
	color: var(--color-white) !important;
}

.woocommerce ul.products li, 
.woocommerce-page ul.products li{
	background-color: var(--color-white);
	border-bottom: 5px solid var(--color-primary);
}

.woocommerce ul.products li .astra-shop-summary-wrap, 
.woocommerce-page ul.products li .astra-shop-summary-wrap{
	padding: 0 15px;
}

.woocommerce-page ul.products li .woocommerce-loop-product__title,
.woocommerce ul.products li .woocommerce-loop-product__title{
	font-weight: 800;
}

.woocommerce-page ul.products li.product .price,
.woocommerce ul.products li.product .price{
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 600;
}

.woocommerce ul.products li.product .prefix-price, 
.woocommerce-page ul.products li.product .prefix-price{
	color: #000 !important;	
}

a.button.product_type_variable.add_to_cart_button,
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart{
	text-align: center;
}

a.button.product_type_variable.add_to_cart_button:after,
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:after {
  	content: "\e66e";
	font-family: 'Pe-icon-7-stroke';
	color: #fff;
	font-size: 30px;
}


@media screen and ( max-width: 921px ){
	
	.widget_product_search{
		width: 70%;
		margin-bottom: 10px;
	}
	
	.sidebar-main .widget-title{
		position: absolute;
		  right: 0px;
		  top: 20px;
	}
}

@media screen and ( min-width: 768px ){
	
	.woocommerce ul.products li.product .price,
	.woocommerce-js ul.products li.product a.ast-loop-product__link{
		width: calc( 100% - 70px );
		float: left;
	}
	
	.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button{
		width: 60px;
		float: right;
		padding: 0;
		margin-top: -30px;
		margin-bottom: 10px;
	}

}

/*
 * SIDEBAR
 */
.sidebar-main{
	padding: 15px 0;
	border-radius: 10px;
}

#block-3 > p{
	display: none !important;
}

.sidebar-main .product-categories{
	height: 0;
	transition-property: height;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
	overflow: hidden;
}

.sidebar-main .product-categories.open{
	height: 445px;
}

.sidebar-main .product-categories li{
	background-color: var(--color-primary);
	margin-bottom: 0.5em !important;
	font-family: 'Exo 2';
}

.sidebar-main .product-categories li a{
	color: var(--color-white);
	padding: 0 15px;
	display: block;
}

.sidebar-main .product-categories li a img{
	display: none;
}

.sidebar-main .widget-title{
	color: var(--color-white) !important;
	cursor: pointer;
}
	
.sidebar-main .widget-title::before{
	content: "\e659";
	font-family: 'Pe-icon-7-stroke';
	transform: rotate(90deg);
	font-size: 23px;
	position: relative;
	top:2px;
	margin-right: 5px;
	display: inline-block;
}

@media screen and ( min-width: 921px ), print{
	
	.sidebar-main .widget-title{
		display: none;
	}
	
	.sidebar-main .product-categories{
		height: auto;
		display: flex;
		-webkit-display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}
	
	.sidebar-main .product-categories li{
		flex: 100%;
		text-align: center;
		line-height: 1.2;
		margin-bottom: 0 !important;
		background-color: var(--color-white);
	}
	
	.sidebar-main .product-categories li a{
		color: var(--color-dark);
		display: flex;
		-webkit-display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5px 10px !important;
		align-content: center;
		position: relative;
	}
	
	.sidebar-main .product-categories li a::after{
		content: "\f061";
		font: var(--fa-font-solid);
		color: var(--color-primary);
		position: absolute;
		right: 35px;
		opacity: 0;
		transition: .3s all ease-in-out;
	}
	
	.sidebar-main .product-categories li:hover a::after{
		right: 15px;
		opacity: 1;
	}
	
	.sidebar-main .product-categories li a img{
		display: block; 
		clear: both;
		max-width: 60px;
		margin-right: 15px;
	}
}

/*
 * SINGLE PRODUCT
 */
.single-product .site-content{
	padding-top: 2em;
}

.single-product div.product .product_title{
	color: var(--color-white);
	font-weight: 600;
}

.single-product div.product .entry-summary .price{
	color: var(--color-white) !important;
}

.woocommerce-js div.product .entry-summary  form.cart .button.single_add_to_cart_button{
	color: var(--color-white);
}

.single-product div.product .product_meta{
	display: none;
}

.single-product div.product .woocommerce-product-details__short-description{
	color: var(--color-white);
}

.woocommerce-js div.product .woocommerce-tabs{
	padding-top: 0;
	 background-color: var(--color-white);
}

.woocommerce-js div.product .woocommerce-tabs ul.tabs li a{
	padding: 0.5em 1em
}

.woocommerce-js div.product .woocommerce-tabs .panel{
	padding: 15px;
}

.related.products > h2{
	color: var(--color-white);
	font-weight: 600;
}

.btn-slider a{
	padding-right: 45px !important;
}

.btn-slider i{
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}

.wp-block-columns .link-phone{
	position: relative;
}

.wp-block-columns .link-phone::before{
	content: "\f095";
	font: var(--fa-font-solid);
	color: var(--color-primary);
	position: absolute;
	left: 30px;
	top:4px;
	
}

.wp-block-columns .link-location{
	position: relative;
}

.wp-block-columns .link-location::before{
	content: "\f3c5";
	font: var(--fa-font-solid);
	color: var(--color-primary);
	position: absolute;
	left: 30px;
	top:4px;
}

/*
 * CART
 */

.woocommerce-cart .content-area,
.woocommerce-checkout .content-area
{
	max-width: 1240px;
	margin: 0px auto !important;
  	float: none !important;
}

.woocommerce-checkout .content-area h1,
.woocommerce-cart .content-area h1{
	color: var(--color-white);
}

.cart_totals,
.woocommerce #content table.cart td, 
.woocommerce-page #content table.cart td{
	background-color: var(--color-white);
}

.woocommerce #content table.cart td a, 
.woocommerce-page #content table.cart td a{
	color: var(--color-dark);
}

.woocommerce-additional-fields__field-wrapper,
.woocommerce-billing-fields,
.woocommerce-shipping-fields{
	background-color: var(--color-white);
	padding: 20px;
}

#pi_checkout_field{
	background-color: var(--color-white);
	padding: 20px;
	margin-bottom: 10px;
}

#order_review_heading, #order_review{
	background-color: var(--color-white);
	margin-bottom: 10px;
}

@media screen and ( min-width: 921px ) {
	
	#pi_checkout_field{
		width: 40%;
		float: right;	
	}
	
}

.ast-footer-overlay{
	background-color: #fff !important;
}

.ast-small-footer-section.ast-small-footer-section-2{
	color: #000;
}

.footer-links {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
	margin-left: 0;
}


.footer-links li a{
	color: var(--color-black);	
}

.footer-links li a:hover{
	color: var(--color-black);
	text-decoration: underline;
}

@media screen and ( min-width: 768px )
{
	.footer-links li{
		display: inline-block;
		color: var(--color-black);
	}
	
	.footer-links li:not(:last-child)::after{
		content: "-";
		display: inline-block;
		vertical-align: middle;
		margin: 0 10px;
	}

}

.footer-widget-area-inner{
	text-align: center;
}

.footer-widget-area-inner figure{
	margin: 0 !important;
	text-align: center;
}

#ContactModal{
	z-index: -10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
}

#ContactModal.show{
	z-index: 90000
}

#ContactModal .modal{
	position: fixed;
	opacity: 0;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	transition: .3 all ease-in-out;
	background-color: #fff;
	max-width: 600px;
	width: 100%;
	border-radius: 10px;
}

#ContactModal.show .modal{
	opacity: 1;
	top: 50%;
	transform: translate(-50%,-50%);
}

#ContactModal .modal .modal-header{
	padding: 10px 20px;
	display: flex;
	-webkit-display: flex;
	align-content: center;
	align-items: center;
}

#ContactModal .modal .modal-header button{
	margin-left: auto;
}

#ContactModal .modal .modal-body{
	padding: 20px;
}

#ContactModal .modal .modal-body .row{
	display: flex;
	-webkit-display: flex;
	gap: 10px
}

#ContactModal .modal .modal-body .row > div{
	flex-basis: 50%;
}

#ContactModal .modal .modal-body .row > div h5{
	margin-bottom: 10px;
}

#ContactModal .modal .modal-body .row > div table,
#ContactModal .modal .modal-body .row > div table tr td{
	border: none !important;
}

#ContactModal .modal .modal-body .row > div table tr td{
	padding: 2px 0;
}

body.modal-active{
	height: auto;
	overflow: hidden;
}

