:root {
	--container-width: 1200px;
	--gutter: 20px;
}

body.show-filters {
	overflow: hidden;
}

/* Container */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Grid */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--gutter) * -1);
	margin-right: calc(var(--gutter) * -1);
}

.col {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* 12 koloms systeem */
/*.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }*/



:root {
	--color-primary: #7a0f1c;
	--color-dark: #222;
	--color-light: #f8f8f8;

	--font-base: 16px;
	--font-lg: 22px;
	--font-xl: 32px;

	--spacing-sm: 10px;
	--spacing-md: 20px;
	--spacing-lg: 40px;
}



.header {
	border-bottom: 1px solid #cbbebe;
	/*height: 94px;*/
	height: 6vw;
	min-height: 50px;
	max-height: 100px;
}

.header__top {
	align-items: center;
	padding: 15px 0;
}

.logo {
	height: 5vw;
	width: 100%;
	margin-top: 5px;
	background: url('/layout/images/logo.webp') no-repeat;
	background-size: contain;
}

.logo a {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.header__row {
	width: 100%;
	height: 100%;
}

.header__right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
}

.header__account,
.header__cart {
	font-size: 14px;
}

.header__cart a {
	background: #7a0f1c;
	color: #fff;
	padding: 8px 12px;
	text-decoration: none;
	border-radius: 4px;
}

/* NAV */
.nav {
	text-align: right;
	border-top: 1px solid #eee;
	padding: 1.6vw 0;
	float: right;
}

.nav__list {
	list-style: none;
	display: flex;
	gap: 20px;
}

.nav__list a {
	text-decoration: none;
	color: #333;
}

.nav__list .active a {
	color: #7a0f1c;
	font-weight: bold;
}

.nav ul {
	padding: 0;
	margin-bottom: 0;
}

.nav ul li {
	display: inline-block;
	position: relative;
	padding-bottom: 10px;
}

.nav ul li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	padding: 10px 0;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	z-index: 1000;
}

.nav ul li ul li {
	display: block;
	margin: 0;
	text-align: left;
	padding-bottom: 0px;
}

.nav ul li ul a {
	display: block;
	padding: 8px 15px;
	margin: 0;
	white-space: nowrap;
}

/* hover opent submenu */
.nav ul li:hover > ul {
	display: block;
}

.nav-toggle, .filter-toggle {
	/*display: none;*/
	position: absolute;
	left: -9999px;
}

.nav-toggle-label {
	display: none;
	font-size: 24px;
	cursor: pointer;
	padding: 10px 0;
}

.shoppingcart_button {
	background: url(/layout/images/shoppingcart_icon.png) no-repeat bottom center;
	background-size: contain;
	width: 16px;
	height: 17px;
	display: inline-block;
	margin-bottom: -4px;
}

#mobilecart {
	display: none;
}









.text-right {
	text-align: right;
}

.hero {
	position: relative;
	height: 535px;
	background: url('/layout/images/header.webp') center/cover no-repeat;
}

.hero_compact {
	position: relative;
	height: 265px;
	background: url('/layout/images/header_compact_algemeen.webp') center/cover no-repeat;
	margin-bottom: 26px;
}

.hero_compact.mousserend {
	background: url('/layout/images/header_compact_mouserend.webp') center/cover no-repeat;
}

.hero_compact.dessert {
	background: url('/layout/images/header_compact_mouserend.webp') center/cover no-repeat;
}

.hero_compact.gedistilleerd {
	background: url('/layout/images/header_compact_gedestileerd.webp') center/cover no-repeat;
}

.hero_compact.olijfoliespecialiteiten {
	background: url('/layout/images/header_compact_olijfolie.webp') center/cover no-repeat;
}

.hero_compact.port, .hero_compact.versterktewijnenport {
	background: url('/layout/images/header_compact_port.webp') center/cover no-repeat;
}

.hero_compact.proeverij {
	background: url('/layout/images/header_compact_mouserend.webp') center/cover no-repeat;
}

.hero_compact.wit, .hero_compact.witte_wijn, .hero_compact.wittewijnen {
	background: url('/layout/images/header_compact_witte_wijn.webp') center/cover no-repeat;
}

.hero_compact.rood, .hero_compact.rode_wijn, .hero_compact.rodewijnen {
	background: url('/layout/images/header_compact_rode_wijn.webp') center/cover no-repeat;
}

.hero_compact.rose {
	background: url('/layout/images/header_compact_mouserend.webp') center/cover no-repeat;
}

.hero_compact.accessoires, .hero_compact.wijncadeaus, .hero_compact.giftsgadgets {
	background: url('/layout/images/header_compact_cadeaus.webp') center/cover no-repeat;
}

.hero_product {
	position: relative;

	width: 100%;
	height: 618px;

	background-image: url('/layout/images/hero_product_sparkling.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	overflow: hidden;
}

.hero_product.witte_wijn {
	background-image: url('/layout/images/hero_product_witte_wijn.png');
}

.hero_product.rode_wijn {
	background-image: url('/layout/images/hero_product_rode_wijn.png');
}

.hero_product.cadeaus {
	background-image: url('/layout/images/hero_product_cadeaus.png');
}

.hero_product.gedestileerd {
	background-image: url('/layout/images/hero_product_gedestileerd.png');
}

.hero_product.olijfolie {
	background-image: url('/layout/images/hero_product_olijfolie.png');
}

.hero_product.port {
	background-image: url('/layout/images/hero_product_port.png');
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	display: flex;
	align-items: flex-end;
	padding-bottom: 20px;
}

.hero__overlay_product {
	inset: 0;
	display: flex;
	align-items: center;
	background: linear-gradient(
			to right,
			rgba(255,255,255,0) 0%,
			rgba(255,255,255,0) 25%,
			rgba(255,255,255,1) 40%,
			rgba(255,255,255,1) 100%
	);
	height: 100%;
}

.hero_compact .hero__overlay {
	background: none;
}

.hero__content {
	color: white;
}

.search {
	margin-top: var(--spacing-md);
	display: flex;
	gap: 10px;
}

.search-box {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.search-form {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.search-form input,
.search-form select {
	padding: 10px;
}

/* COMPLETE CONTAINER */
#wijnzoeker {
	position: relative;
	float: left;
	width: 100%;
	max-width: 1920px;
	background: #fdf8f4;
	border-radius: 18px;
	padding: 28px 24px 24px;
	box-sizing: border-box;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* HEADER */
#wijnzoekerheader {
	position: absolute;
	left: 0;
	top: -42px;
	background: #fdf8f4;
	padding: 18px 30px 12px;
	border-radius: 18px 18px 0 0;
	width: auto;
	height: auto;
}

#wijnzoekerheader h2 {
	margin: 0;
	font-family: Georgia, serif;
	font-size: 38px;
	font-weight: bold;
	color: #564240;
	line-height: 1;
}

/* FORMULIER */
#wijnzoeker form {
	display: flex;
	gap: 14px;
	align-items: stretch;
	flex-wrap: wrap;
}

/* INPUTS EN SELECTS */
#trefwoord,
#soort,
#kleur,
#land,
#gerecht {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid #efebe8;
	border-radius: 4px;
	background: #fff;
	font-family: "Century Gothic", Arial, sans-serif;
	font-size: 16px;
	color: #756968;
	box-sizing: border-box;
	outline: none;
}

/* CONTAINERS */
#soortcontainer,
#kleurcontainer,
#landcontainer,
#gerechtcontainer {
	width: calc(20% - 14px);
	min-width: 140px;
	overflow: visible;
}

#trefwoord {
	float: none;
	width: calc(20% - 14px);
	min-width:140px;
}

/* SELECT PIJL */
#soort,
#kleur,
#land,
#gerecht {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	background-image:
			url('/layout/images/arrow_down.png');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 60px;
}

/* ZOEKKNOP */
#zoeken {
	width: calc(20% - 14px);
	min-width: 140px;
	height: 44px;
	margin: 0;

	border: none;
	border-radius: 7px;

	background: linear-gradient(
			180deg,
			#b05873 0%,
			#a54d68 100%
	);

	color: #fff;
	font-family: Georgia, serif;
	font-size: 17px;
	font-weight: bold;
	text-align: center;

	cursor: pointer;
	box-shadow:
			inset 0 1px 0 rgba(255,255,255,.15),
			0 2px 5px rgba(0,0,0,.08);

	padding: 0;
}

#zoeken:hover {
	filter: brightness(1.03);
}

/* RESPONSIVE */
@media (max-width: 1400px) {

	#wijnzoeker form {
		gap: 16px;
	}

	#trefwoord,
	#soortcontainer,
	#kleurcontainer,
	#landcontainer,
	#gerechtcontainer {
		width: calc(50% - 8px);
	}

	#zoeken {
		width: 100%;
	}
}

@media (max-width: 768px) {

	#trefwoord,
	#soortcontainer,
	#kleurcontainer,
	#landcontainer,
	#gerechtcontainer,
	#zoeken {
		width: 100%;
		min-width: 0;
	}

	#trefwoord,
	#soort,
	#kleur,
	#land,
	#gerecht,
	#zoeken {
		height: 64px;
		font-size: 20px;
	}

	#wijnzoekerheader h2 {
		font-size: 28px;
	}
}

.section {
	padding: var(--spacing-lg) 0;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	color: #333;
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

/* HEADER */
.header {
	background: #fff;
	border-bottom: 1px solid #ddd;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
}

.nav a {
	margin-left: 20px;
	text-decoration: none;
	color: #a75064;
}

.nav a:hover {
	color: #333;
}


.container ul {
	list-style-type: disc !important;
}

.container ol {
	list-style-type: decimal !important;
}

.container ul,
.container ol {
	padding-left: 2rem;
	margin-bottom: 1rem;
}




/* CARDS */
.card {
	background: white;
	padding: var(--spacing-md);
	border: 1px solid #eee;
	transition: 0.2s;
	min-height: 240px;
}

.card:hover {
	transform: translateY(-3px);
}

.cadeaubox {
	background: url(layout/images/cadeaubox.webp);
}
.proeverij {
	background: url(layout/images/proeverij_events.webp);
}
.over_nafzger {
	background: url(layout/images/over_nafzger.webp);
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 40px auto;
}

.card h3 {
	font-family: Georgia, serif;
	font-size: 28px;
	color: #fff;
}

.card p {
	font-family: "Century Gothic", serif;
	font-size: 16px;
	color: #fff;
}

.card .btn {
	margin-top: auto;
	margin-bottom: 0px;
}








.layout {
	display: flex;
	gap: 20px;
}

/* Desktop */
.filter-col {
	width: 25%;
	z-index: 1000;
}

.content-col {
	width: 75%;
}

/* Mobile */
@media (max-width: 992px) {

	.layout {
		flex-direction: column;
	}

	.content-col {
		width: 100%;
	}

	.filter-col {
		position: fixed;
		inset: 0;
		background: white;
		z-index: 1000;
		transform: translateX(-100%);
		transition: 0.3s;
		width: 80%;
		max-width: 320px;
		overflow-y: auto;
	}

	body.show-filters .filter-col {
		transform: translateX(0);
	}

	.mobile-filter-toggle {
		position: relative;
		display: inline-block;
		margin: 0 20px 10px 0;
	}

	.mobile-filter-toggle button {
		position: relative;

		border: none;
		background: transparent;

		font-family: "Century Gothic", serif;
		font-size: 16px;
		color: #413431;

		padding: 10px 40px 10px 0;
		cursor: pointer;
	}

	.filter-icon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);

		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #f3eee9;

		display: flex;
		align-items: center;
		justify-content: center;

		pointer-events: none;
	}

	.filter-icon::after {
		content: "";
		width: 14px;
		height: 14px;
		background-color: #6b625c;

		/* trechter icon */
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8L3 4z'/%3E%3C/svg%3E") no-repeat center;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8L3 4z'/%3E%3C/svg%3E") no-repeat center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	/* hover */
	.mobile-filter-toggle button:hover .filter-icon {
		background: #e7e0da;
	}

	/* focus reset */
	.mobile-filter-toggle button:focus {
		outline: none;
	}

	.mobile-filter-toggle button:focus {
		outline: none;
	}
}

/* Desktop: knop verbergen */
@media (min-width: 993px) {
	.mobile-filter-toggle {
		display: none;
	}
}











/* PRODUCTS */
.product-grid {
	display: grid;
	#grid-template-columns: repeat(3, 1fr);
	grid-template-columns: repeat(auto-fit, minmax(230px, 0.5fr));
	gap: 20px;
}

.product {
	position: relative;
	background: #fdf8f4;
	border: 1px solid #f9f0eb;
	min-width: 0;
}

.product_compact {
	max-width: 100%;
}

.product a {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
}

a.productimagelink {
	background: url("/layout/images/product_background_sparkling.png") no-repeat;
	min-height: 305px;
	text-align: center;
}

a.productimagelink.witte_wijn, a.productimagelink.wit {
	background: url("/layout/images/product_background_rode_wijn.png") no-repeat;
}

a.productimagelink.rode_wijn, a.productimagelink.rood {
	background: url("/layout/images/product_background_rode_wijn.png") no-repeat;
}

a.productimagelink.cadeaus {
	background: url("/layout/images/product_background_cadeaus.png") no-repeat;
}

a.productimagelink.gedestileerd {
	background: url("/layout/images/product_background_gedestileerd.png") no-repeat;
}

a.productimagelink.olijfolie {
	background: url("/layout/images/product_background_olijfolie.png") no-repeat;
}

a.productimagelink.port {
	background: url("/layout/images/product_background_port.png") no-repeat;
}

.product_country_flag {
	position: absolute;
	float: none;
	top: 10px;
	left: 10px;
	z-index: 10;
}

.product h4, .product h4 a{
	position: relative;
	float: left;
	color: #523a39;
	font-family: "Century Gothic", serif;
	font-weight: bold;
	font-size: 19px;
	line-height: 20px;
	width: 100%;
	height: auto;
	min-height: 50px;
	text-align: left;
	padding: 10px 10px 0 22px;
}

.product h4 a {
	min-height: 15px !important;
	padding: 0;
}

.product h4 a {
	background: none !important;
}

.product a.productimagelink img {
	margin-top: 20px;
	max-width: 250px;
	height: auto;
	max-height: 280px;
}

.product-meta {
	position: relative;
	float: left;
	width: 100%;
	color: #523a39;
	font-family: "Century Gothic", serif;
	padding: 0 10px 40px 22px;
	font-size: 15px;
}

.price {
	position: relative;
	float: left;
	width: 100%;
	color: #a64e62;
	font-weight: bold;
	font-family: "Century Gothic", serif;
	padding: 0 10px 10px 22px;
	font-size: 21px;
}

.quantity_input {
	position: relative;
	float: left;
	margin: 0 14px 20px 22px;
	background: #fdf8f4;
	border: 1px solid #f8f0eb;
	font-size: 16px;
	color: #523a39;
	font-weight: bold;
	font-family: "Century Gothic", serif;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	width: 40px;
	height: 46px;
	padding: 0;
}

.productknoppen .btn {
	position: relative;
	float: right;
	width: 56%;
	height: auto;
	margin:  1px 22px 0 0;
}

/* BUTTON */
.btn {
	display: inline-block;
	background: #7A2D22;
	background: linear-gradient(0deg,rgba(93, 32, 24, 1) 0%, rgba(122, 45, 34, 1) 100%);
	color: #fff;
	padding: 10px 5px;
	text-decoration: none;
	margin-top: 10px;
	font-size: 15px;
	font-family: "Georgia", "Times New Roman", serif;
	text-align: center;
	border-radius: 5px;
}

.btn.blue {
	background: linear-gradient(0deg, #161e2c 0%, #29334a 100%);
	border: none !important;
}

a.btn, a.btn:hover {
	text-decoration: none;
	color: #fff;
}

.filters {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	border: 1px solid #f8f0eb;
	background: #fdf8f4;
}


.filterheader, .sidebarheader {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	padding: 24px;
	background: #f8f0eb;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 27px;
	font-weight: bold;
	color: #523a39;
}

.sidebarheader {
	position: unset;
	float: unset;
}

.sidebarheader h2 {
	padding: 0;
	margin: 0;
	background: #f8f0eb;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 27px;
	font-weight: bold;
	color: #523a39;
}

.filterblok {
	position: relative;
	float: left;
	width: calc(100% - 48px);
	height: auto;
	margin: 24px 24px 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #f8f0eb;
	font-family: "Century Gothic", serif;
	font-size: 16px;
	color: #413431;
}

.filtername {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: bold;
	color: #523a39;
	margin-bottom: 16px;
}

ul.filteroptions {
	padding-left: 0;
	margin-bottom: 0;
}
ul.filteroptions li {
	list-style: none;
	margin-bottom: 4px;
}

.filteroptions li label {
	opacity: 1;
	transition: 0.2s ease;
}

.filteroptions input:disabled + span,
.filteroptions li label.filter-disabled, .filteroptions li label.filter-disabled input {
	opacity: 0.4;
}

.zero-count {
	color: #999;
}

.filter-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	pointer-events: none;
	transition: 0.3s;
	z-index: 999;
}

body.show-filters .filter-overlay {
	opacity: 1;
	pointer-events: auto;
}

.sorting {
	position: relative;
	width: 100%;
	height: auto;
	padding: 14px 24px 14px 24px;
	margin-bottom: 18px;
	border: 1px solid #f8f0eb;
	background: #fdf8f4;
	clear: both;
}

.select-wrapper {
	position: relative;
	display: inline-block;
	width: 130px;
}

/* SELECT */
.select-wrapper select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	border: none;
	background: transparent;

	font-family: "Century Gothic", serif;
	font-size: 16px;
	color: #413431;
	padding: 10px 0px 10px 0;
	cursor: pointer;
}

/* PIJLTJE KNOP */
.select-arrow {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);

	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f3eee9;

	pointer-events: none; /* belangrijk: klik gaat naar select */
}

/* PIJL */
.select-arrow::after {
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	left: 50%;
	transform: translate(-50%, -40%) rotate(45deg);

	width: 6px;
	height: 6px;

	border-right: 2px solid #6b625c;
	border-bottom: 2px solid #6b625c;
}

.select-wrapper select:focus {
	outline: none;
}

.select-wrapper:hover .select-arrow {
	background: #e7e0da;
}




.filter-apply-btn{
	width:100%;
	height:58px;

	margin-top:24px;

	border:none;
	border-radius:14px;

	background:linear-gradient(
			to bottom,
			#8e2b1f,
			#68150f
	);

	color:#fff;
	font-size:22px;
	font-weight:600;

	cursor:pointer;

	transition:.2s ease;
}

.filter-apply-btn:hover{
	transform:translateY(-1px);
}

/* COMPLETE FILTERKOLOM */
.filters-wrapper {
	position: relative;
	height: calc(100% - 94px);
}

/* FILTERS */
.filters {
	position: relative;
	padding-bottom: 140px;
}

/* STICKY FILTER BUTTON CONTAINER */
.filter-submit-wrap {

	position: sticky;
	bottom: 0;

	padding-top: 40px;
	padding-bottom: 20px;

	margin-top: 30px;

	background: linear-gradient(
			to bottom,
			rgba(253,248,244,0) 0%,
			rgba(253,248,244,0.82) 35%,
			#fdf8f4 100%
	);

	z-index: 30;
}



/* MOBIEL */
@media screen and (max-width: 991px) {

	.filter-submit-wrap {
		padding-bottom: 12px;
	}

	.filter-apply-btn {
		font-size: 16px;
		padding: 15px 18px;
	}
}

.ajax-pagination{
	display:flex;
	gap:12px;
	margin-top:40px;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}

.ajax-pagination a{
	width:42px;
	height:42px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	background:#f5f1ee;
	color:#5c4038;
	text-decoration:none;
}

.product-grid.loading{
	opacity:.45;
	pointer-events:none;
}










/* ===== LAYOUT ===== */

.product-hero {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 80px;

	align-items: start;
}

/* ===== GALLERY ===== */

.product-gallery {
	width: 100%;
}

/* bxgallery wrapper */
#piGal .outer {
	display: flex;
	flex-direction: column;
}

/* GROTE AFBEELDING */
#piGal .gallery {
	position: relative !important;

	width: 100% !important;
	height: 600px !important;

	margin: 0;
	padding: 0;

	list-style: none;
}

#piGal .gallery li {
	width: 100%;
	height: 100%;
	list-style: none;
}

#piGal .gallery img {
	width: 100% !important;
	height: 100% !important;

	object-fit: contain;
}

/* THUMBS */
#piGal .thumbs {
	display: flex;

	gap: 16px;

	margin-top: 24px;
	padding: 0;

	list-style: none;
}

#piGal .thumbs li {
	width: 70px;
	height: 70px;

	border: 1px solid #ddd;

	cursor: pointer;

	transition: 0.2s;

	opacity: 0.7;
}

#piGal .thumbs li.on {
	border-color: #6a3d3b;
	opacity: 1;
}

#piGal .thumbs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.product-thumbs-wrapper {
	margin-top: 40px;
}

.product-thumbs-wrapper .thumbs {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-thumbs-wrapper .thumbs li {
	width: 72px;
	height: 72px;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.7;
	transition: 0.2s;
}

.product-thumbs-wrapper .thumbs li.on {
	opacity: 1;
	border-color: #7b3028;
}

.product-thumbs-wrapper .thumbs img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/* ===== SUMMARY ===== */

.product-summary {
	padding-top: 40px;
}

.product-title {
	font-size: 42px;
	line-height: 1.1;
	color: #5a3535;
	margin-bottom: 20px;
}

.product-origin {
	font-size: 22px;
	color: #5e514d;
	margin-bottom: 50px;
}

.product-price {
	font-size: 35px;
	color: #8b2f2f;
	margin-bottom: 30px;
}

.product-stock {
	color: #64754b;

	font-size: 22px;

	margin-bottom: 50px;
}

/* ===== BUY WRAPPER ===== */

.product-buy {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* =========================
   COMPACT PRODUCT GRID
   ========================= */

.product-grid.compact {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid #d8ccc5;
}

.product-grid.compact .product {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 26px 0;
	border-bottom: 1px solid #d8ccc5;
	background: transparent;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	min-height: 0;
	margin: 0 16px;
	width: calc(100% - 32px);
}

.product-grid.compact .product:last-of-type {
	border-bottom: none;
}

/* afbeelding links */
.product-grid.compact .productimagelink {
	position: relative;
	flex: 0 0 78px;
	width: 78px !important;
	min-height: 0;
	background: none;
	text-align: center;
}

.product-grid.compact .productimagelink img {
	width: auto;
	max-width: 78px;
	max-height: 185px;
	margin: 0;
	display: block;
}

.compact_product_details {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}

/* contentblok */
.product-grid.compact .product h4,
.product-grid.compact .product .price,
.product-grid.compact .product .productknoppen,
.product-grid.compact .product .product-meta {
	float: none;
	width: auto;
	padding: 0;
}

/* titel */
.product-grid.compact .product h4 {
	margin: 0 0 8px 0;
	min-height: 0;
	font-size: 17px;
	font-weight: bold;
	position: relative;
	width: 100%;
}

.product-grid.compact .product h4 a {
	float: none;
	display: inline;
	width: auto;
	padding: 0;
	color: #523a39;
	text-decoration: none;
	font-size: 17px;
}

/* meta info */
.product-grid.compact .product .product-meta {
	display: block;
	margin: 0 0 22px 0;
	color: #766867;
	font-size: 14px;
	line-height: 22px;
	font-family: "Century Gothic", Arial, sans-serif;
}

/* prijs */
.product-grid.compact .product .price {
	display: inline-block;
	margin-top: 4px;
	color: #b25572;
	font-size: 22px;
	font-weight: bold;
	font-family: "Century Gothic", Arial, sans-serif;
	margin-top: 40px;
}

/* rechterkolom */
.product-grid.compact .productknoppen {
	margin-left: auto;
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: -35px;
}

/* quantity verbergen */
.product-grid.compact .quantity_input {
	display: none;
}

/* winkelwagenknop */
.product-grid.compact .productknoppen .btn {
	position: relative;
	float: none;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	border: 1px solid #e4d9d2;
	text-indent: -9999px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	background: #fdf8f4 url('/layout/images/cart_small.svg') no-repeat center center;
	background-size: 50%;
}

/* hover */
.product-grid.compact .productknoppen .btn:hover {
	background-color: #f7efea;
	border-color: #d7c5bc;
}

/* clearfix ellende uit 2007 neutraliseren */
.product-grid.compact .product:after {
	content: "";
	display: block;
	clear: both;
}

/* ===== QUANTITY ===== */

.quantity-selector {
	position: relative;
	float: left;
	margin-right: 15px;
	display: flex;
	align-items: stretch;
	height: 54px;
	width: 156px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #ece4de;
	background: #f8f5f2;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.04);
}

/* knoppen */
.qty-btn {
	width: 44px;
	border: none;
	background: linear-gradient(to bottom, #f7f3f0, #f1ebe7);
	color: #6a5450;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: 0.2s;
}

/* hover */
.qty-btn:hover {
	background: linear-gradient(to bottom, #efe7e2, #e7ddd8);
}

/* active */
.qty-btn:active {
	transform: translateY(1px);
}

/* input */
.qty-input {
	width: calc(100% - 88px);
	border: none;
	border-left: 1px solid #ece4de;
	border-right: 1px solid #ece4de;
	background: #fbf9f7;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	color: #6a5450;
	outline: none;
}

/* ===== BUTTON ===== */

.btn-cart {
	position: relative;
	float: left;
	height: 54px;
	padding: 0 56px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(to bottom, #8e2e22 0%, #7d241c 45%, #6b1d18 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.18), 0 3px 8px rgba(0,0,0,0.15);
	color: white;
	font-size: 20px;
	font-family: Georgia, serif;
	font-weight: normal;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
}

/* hover */
.btn-cart:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 5px 12px rgba(0,0,0,0.18);
}

/* active */
.btn-cart:active {
	transform: translateY(1px);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {

	.product-buy {
		flex-direction: column;
		align-items: stretch;
	}
}

.wine-tabs {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	overflow-x: scroll;
	overflow-y: hidden;

	/* Verberg scrollbalk voor Edge, Chrome, Safari en Opera */
	&::-webkit-scrollbar {
		display: none;
	}

	/* Verberg scrollbalk voor Firefox */
	scrollbar-width: none;

	/* Verberg scrollbalk voor oudere versies van Edge en IE */
	-ms-overflow-style: none;
}

.wine-tabs::before {
	position: absolute;
	float: right;
	content: "";
	right: 0;
	width: 50px;
	height: 24px;

	background: linear-gradient(
			to right,
			rgba(251,246,241,0),
			rgba(251,246,241,.8),
			rgba(251,246,241,1)
	);

	pointer-events: none;

}

.wine-tabs a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: georgia, serif;
	font-size:  20px;
	color: #4f4340;
}

.wine-tabs a.active {
	color: #a75064;
	text-decoration: underline;
	font-weight: bold;
}

.wine-header {
	display: flex;
	flex-direction: row;
	gap: 0;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	margin-top: 15px;
}

.wine-header hr, .wine-header div {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.wine-header h2 {
	font-family: georgia, serif;
	color: #a75064;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 0px;
}

.wine-header p {
	font-family: georgia, serif;
	color: #4f4340;
	font-size: 14px;
	margin-top: 0;
}


.wine-slider {
	overflow: hidden;
	position: relative;
	background: url(/layout/images/wine_selection_background.png) no-repeat top;
	min-height: 500px;
}

.wine-track {
	display: flex;
	transition:
			transform .35s ease,
			opacity .35s ease;
	flex-direction: row;
	gap: 0;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

.wine-track.loading {
	opacity: 0;
	transform: translateX(-60px);
}

.wine-track {
	position:absolute;
	top:0;
	width:100%;

	display: flex;
	transition: transform .35s ease, opacity .35s ease;
	flex-direction: row;
	gap: 20px;
	align-items: stretch;
	box-sizing: border-box;

	/* 1. Dwing de parent naar de gewenste hoogte */
	height: 100%;
}

.current {
	left:0;
}

.next {
	left:100%;
}

.current.animate {
	transform:translateX(-100%);
	transition:.5s ease;
}

.next.animate {
	transform:translateX(-100%);
	transition:.5s ease;
}

.slider_product {
	align-self: stretch;
	flex-shrink: 0;
	width: calc(20% - 20px);
	text-align: center;
	margin-bottom: 20px;
}

.slider_product img {
	height: 100%;
	max-height: 385px;
	width: 100%;
	object-fit: contain; /* Zorgt dat de wijnfles/afbeelding mooi in de knop past zonder te vervormen */
}

.slider_product h5 {
	font-family: "Century Gothic", serif;
	color: #4f4340;
	font-size: 14px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.slider_product .price {
	font-size: 14px;
	font-weight: normal;
}




@media (max-width: 1175px) {
	.wine-track {
		overflow-x: auto;
		overflow-y: hidden;
	}
	.slider_product {
		width: calc(25% - 20px);
	}
}
@media (max-width: 975px) {
	.slider_product {
		width: calc(33% - 20px);
	}
}
@media (max-width: 775px) {
	.slider_product {
		width: calc(50% - 20px);
	}
}


/* ===== USPS ===== */

.product-usps {
	display: grid;
	grid-template-columns: 1fr 1fr;

	border-top: 1px solid #ddd;

	padding-top: 40px;
}

.usp {
	display: flex;
	align-items: center;

	gap: 20px;

	padding-right: 30px;
}

.usp:first-child {
	border-right: 1px solid #ddd;
}

.usp-icon {
	font-size: 52px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {

	.product-summary {
		padding-top: 0;
	}

	#piGal .gallery {
		height: 500px !important;
	}
}

@media (max-width: 768px) {

	.product-title {
		font-size: 38px;
	}

	.product-price {
		font-size: 42px;
	}

	.product-origin,
	.product-stock {
		font-size: 18px;
	}

	.product-buy {
		flex-direction: column;
		align-items: stretch;
	}

	.quantity-selector {
		width: 45%;
	}

	.btn-cart {
		width: 45%;
	}

	.product-usps {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.usp:first-child {
		border-right: none;
	}
}



.mindLoginContainer {
	float: left;
	width: 48%;
	margin-bottom: 20px;
}

.mindLoginContainer:last-of-type {
	float:right;
}









/* ===== LAYOUT ===== */

.product-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	margin-top: 25px;
}

/* ===== SIDEBAR ===== */

.product-detail__sidebar {
	min-height: 500px;
	border: 1px solid #f8f0eb;
	background: #fdf8f4;
	margin-bottom: 20px;
}

/* ===== TABS ===== */

.tabs {
	position: relative;
}

/* radio buttons verbergen */
.tabs input[type="radio"] {
	display: none;
}

/* doorlopende lijn */
.tabs__line {
	position: absolute;
	top: 50px;
	left: -2000px;
	right: 0;

	height: 1px;
	background: #e5ddd8;

	z-index: 1;
}

/* nav */
.tabs__nav {
	position: relative;
	z-index: 2;

	display: flex;
}

/* tab knop */
.tabs__button {
	padding: 14px 22px;

	font-size: 20px;
	line-height: 1;

	color: #564743;
	cursor: pointer;

	border-right: 1px solid #e5ddd8;

	font-family: Georgia, serif;

	background: transparent;

	transition: 0.2s;
}

/* hover */
.tabs__button:hover {
	color: #8d3b32;
}

/* actieve tab */
#tab-1:checked ~ .tabs__nav label[for="tab-1"],
#tab-2:checked ~ .tabs__nav label[for="tab-2"],
#tab-3:checked ~ .tabs__nav label[for="tab-3"],
#tab-4:checked ~ .tabs__nav label[for="tab-4"],
#tab-5:checked ~ .tabs__nav label[for="tab-5"] {

	background: #fff;

	border: 1px solid #e5ddd8;
	border-bottom: 1px solid #fff;

	border-top-left-radius: 6px;
	border-top-right-radius: 6px;

	color: #8d3b32;

	position: relative;
	z-index: 3;
}

/* ===== CONTENT ===== */

.tabs__content-wrapper {
	padding: 20px;
}

.tabs__content {
	display: none;
}

.tabs__content, .tabs__content p, .tabs__content div, .tabs__content ul, .tabs__content ol{
	font-family: "Century Gothic";
	color: #5f5551;
	font-size: 16px;
	line-height: 1.4;
}

/* actieve content */
#tab-1:checked ~ .tabs__content-wrapper .tab-content-1,
#tab-2:checked ~ .tabs__content-wrapper .tab-content-2,
#tab-3:checked ~ .tabs__content-wrapper .tab-content-3,
#tab-4:checked ~ .tabs__content-wrapper .tab-content-4 {
	display: block;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {

	.product-detail {
		grid-template-columns: 1fr;
	}

	.product-detail__sidebar {
		min-height: 250px;
	}
}

@media (max-width: 768px) {

	.tabs__nav {
		flex-wrap: wrap;
	}

	.tabs__button {
		font-size: 18px;
		padding: 12px 18px;
	}

	.tabs__line {
		display: none;
	}
}







/* Basis knop */

.buttonSet .ui-state-default, .buttonSet .ui-widget-content .ui-state-default, .buttonSet .ui-widget-header .ui-state-default,
.ui-button,
a.ui-button,
.contentText .ui-button {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid #8d3a2d;
	border-radius: 4px;
	background: linear-gradient(
			to bottom,
			#9b3a2b 0%,
			#7f2d22 100%
	);
	color: #fff !important;
	text-decoration: none !important;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 1;
	box-shadow:
			inset 0 1px 0 rgba(255,255,255,.18),
			0 1px 2px rgba(0,0,0,.12);
	opacity: 1 !important;
}

/* hover */
.ui-button:hover {
	background: linear-gradient(
			to bottom,
			#a34232 0%,
			#873124 100%
	);
	color: #fff !important;
}

/* active */
.ui-button:active {
	background: linear-gradient(
			to bottom,
			#72271d 0%,
			#8a3427 100%
	);
}

/* tekst */
.ui-button .ui-button-text {
	display: block;
	padding: 0;
	line-height: 1;
}

/* oud jquery ui pijltje weg */
.ui-button .ui-button-icon-primary,
.ui-button .ui-icon {
	display: none;
}

/* ruimte terugpakken die voor het icoon gereserveerd werd */
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: 0;
}

.ui-button:not(.back) .ui-button-text:after {
	content: " »";
}


.back.ui-button .ui-button-text:before {
	content: "« ";
}









.usp-bar {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	font-size: 14px;
}

.usp-bar .container {
	border-top: 1px solid #cbbebe;
	border-bottom: 1px solid #cbbebe;
}

.usp-bar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	gap: 20px;
}

.usp-item, .usp-item-spacer {
	display: flex;
	align-items: center;
	text-align: center;
	gap: 10px;
	color: #4a3f3a;
}

.usp-item-spacer {
	border-right: 1px solid #cbbebe;
	height: 50px;
}

/* ICON BASIS */
.usp-icon {
	width: 24px;
	height: 24px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
}

/* TRUCK */
.usp-icon--truck {
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNGY0ZjRmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTMgNmgxMnY4aC0xYTIgMiAwIDEgMS00IDBoLTVhMiAyIDAgMSAxLTQgMHYtOGgyeiIvPjxwYXRoIGQ9Ik0xNSAxMGgzbDMgM3YxaC0xYTIgMiAwIDEgMS00IDBoLTF2LTZ6Ii8+PC9zdmc+");
}

/* USER */
.usp-icon--user {
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNGY0ZjRmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSI0Ii8+PHBhdGggZD0iTTQgMjBjMC00IDQtNiA4LTZzOCAyIDggNnoiLz48L3N2Zz4=");
}

/* AWARD */
.usp-icon--award {
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNGY0ZjRmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJsMyA2IDYgMS01IDQgMSA2LTUtMy01IDMgMS02LTUtNCA2LTF6Ii8+PC9zdmc+");
}

@media (max-width: 800px) {
	.mindLoginContainer {
		width: 100%;
	}

	.usp-bar__inner {
		flex-direction: column;
	}

	.usp-item-spacer {
		display: none;
	}
}




/* FOOTER */
.footer {
	position: relative;
	float: left;
	width: 100%;
	padding: 40px 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2.5fr 1fr 0.75fr 1fr;
}

.footer h4 {
	font-family: Georgia, serif;
	font-size: 18px;
	color: #a75064;
	margin: 0 0 13px 0;
}

.footer p{
	position: relative;
	float: left;
	width: 48%;
	margin: 0 2% 0 0;
	font-size: 13px;
}

.footer a{
	font-size: 13px;
	color: #4f4340;
	text-decoration: none;
}

.footer ul{
	padding-left: 0;
}

.footer ul li{
	font-size: 13px;
	color: #4f4340;
	line-height: 1.5;
	padding-left: 0;
}

@media (max-width: 1250px) {
	.container {
		width: 98%;
		max-width: unset;
	}
}

@media (max-width: 1175px) {
	.footer-grid div:nth-child(3) {
		display: none;
	}
	.footer-grid {
		grid-template-columns: 2.5fr 1fr 1fr;
	}
}

@media (max-width: 850px) {

	.quantity-selector {
		width: 50%;
	}
	.btn-cart {
		width: 45%;
		padding: 0;
		font-size: 18px;
	}

	.footer-grid div p {
		width: 100%;
	}
	.footer-grid {
		grid-template-columns: 1.2fr 1fr 1fr;
	}
}

@media (max-width: 630px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
            "left right1"
            "left right2";
	}
	.footer-grid div:nth-child(1) {
		grid-area: left;
	}
	.footer-grid div:nth-child(2) {
		grid-area: right1;
	}
	.footer-grid div:nth-child(4) {
		grid-area: right2;
	}

	.quantity-selector {
		width: 100%;
		margin-bottom: 10px;
	}
	.btn-cart {
		width: 100%;
	}
}




.tableBox {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.tableBox-row {
	display: flex;
	width: 100%;
}

.tableBox-cell {
	flex: 1;
}

.tableBox-cell.align-left {
	text-align: left;
}

.tableBox-cell.align-center {
	text-align: center;
}

.tableBox-cell.align-right {
	text-align: right;
}

.password_forgotten {
	background: #a64e62;
	padding: 10px;
	color: #fff;
	margin-bottom: 10px;
}


.block_splitter {
	clear: both;
	border-bottom: 1px solid #cbbebe;
	margin-bottom: 10px;
}







@media (max-width: 1100px) {
	.product-hero {
		grid-template-columns: 40% 1fr;
		gap: 20px;
	}
}

@media (max-width: 1024px) {
	.col-4 { width: 50%; }
}

@media (max-width: 768px) {
	.col-4,
	.col-6,
	.col-3,
	.col-9 {
		width: 100%;
	}

	#logo {
		order: 2;
	}

	#menu {
		order: 1;
	}

	#mobilecart {
		display: block;
		position: absolute;
		right: 0;
		top: 12px;
	}
	#desktopcart {
		display: none;
	}

	.nav-toggle-label {
		display: block;
	}

	.header {
		position: relative;
	}

	.nav {
		position: absolute;
		top: 49px;
		left: 0;
		right: 0;

		background: #fff;
		z-index: 9999;

		border-top: 1px solid #ddd;
		box-shadow: 0 8px 20px rgba(0,0,0,.1);
		display: none;
	}


	.nav ul {
		flex-direction: column;
		padding: 0;
	}

	.nav ul li {
		display: block;
	}

	.nav ul li a {
		display: block;
		padding: 10px 0 5px 0;
		text-align: left
	}

	/* menu open */
	/*.nav-toggle:checked + .nav + .nav ul {*/
	.nav-toggle:checked ~ .nav {
		display: flex;
	}

	/* submenu altijd netjes onder elkaar */
	.nav ul li ul {
		position: static;
		display: none;
		box-shadow: none;
		padding-left: 15px;
		padding-top: 0;
	}

	.nav ul li ul {
		display: block;
	}

	.container {
		width: 98%;
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.card {
		min-height: 180px;
		margin-bottom: 10px;
	}

	.filterheader {
		cursor: pointer;
	}

	.mobile_bottom_margin {
		margin-bottom: 16px;
	}

	/*.filters, */.filter-submit-wrap {
		display: none;
	}

	.filter-toggle:checked ~ .filters, #productFilters:has(.filter-toggle:checked) .filter-submit-wrap {
		display: block;
	}
}


@media (max-width: 576px) {
	.col-xs-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-xs-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-xs-6 {
		flex: 0 0 auto;
		width: 50%;
	}
}