/* ====
Theme Name: Nieuw Ontwerp Theme
Theme URI: http://www.nieuwontwerp.com
Description: Zet ideeën om in succesvolle producten
Version: 6.0
Author: Jeroen van der Wiel @ Nieuw Ontwerp
Tags: webdesign,nieuw,ontwerp,nieuwontwerp,wordpress

==== */

:root
{
	--trans: 1;
	--wdc-terracotta: rgba(164,95,68, var(--trans));
	--wdc-terracotta-hover: rgba(216,101,56, var(--trans));
	--wdc-pink: rgba(196,160,142, var(--trans));
	--wdc-pinkgrey: rgba(233,217,209, var(--trans));
	--wdc-creme: rgba(209,198,180, var(--trans));
	--wdc-steel: rgba(133,140,140, var(--trans));
	--wdc-black: rgba(57,65,65, var(--trans));
	--wdc-grey: rgba(223,225,225, var(--trans));
}

*
{
	box-sizing: border-box;
	margin-block-start: 0px;
	margin-block-end: 0px;
}

html,body
{
	font-family: "Open Sans", sans-serif;
	color: var(--wdc-black);
	margin: 0;
	overflow: initial;
	font-size: 105%;
	line-height: 1.5em;
}

.top-message
{
	background-color: #edc873;
	padding: .5rem 1rem;
	text-align: center;
	
	p
	{
		font-size: 1.1rem;
	}
}
.popup-wrapper
{
	display: flex;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.65);
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	padding: 1rem;
	user-select: none;
	pointer-events: none;

	main
	{
		position: relative;
		padding: clamp(1rem, 2.5%, 4rem) clamp(1rem, 2.5%, 4rem);
		background-color: white;

		> *
		{
			position: relative;
			z-index: 4;
		}
		.popup-close-button
		{
			display: flex;
			position: absolute;
			right: .5rem;
			top: .5rem;
			color: var(--wdc-terracotta);
			cursor: pointer;
			height: 2rem;
			width: 2rem;
			justify-content: center;
			align-items: center;
		}
	}

	main::before
		{
			content: '';
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			background-image: url('assets/pebbles-banner.svg');
			background-position: left top;
			background-size: contain;
			background-repeat: no-repeat;
	}
}

.popup-wrapper.is-active
{
	visibility: visible;
	opacity: 1;
	user-select: initial;
	pointer-events: initial;
}

body.scroll-locked
{
	overflow: hidden;
}
h1,h2,h3,h4,h5
{
	line-height: 1em;
}

h1
{
	font-size: clamp(1rem, calc(1rem + 4.26dvh), 64px);
}

h2
{
	font-size: clamp(1rem, calc(1rem + 2.04dvh), 40px);
}

h3
{
	font-size: clamp(1rem, calc(1rem + .56dvh), 24px);
	margin-bottom: 1rem;
}

h4
{
	font-size: clamp(1rem, calc(1rem + .56dvh), 24px);
}

h5
{
	font-size: clamp(1rem, calc(1rem + .56dvh), 24px);
}

.ginput_product_price_label
{
	display: none;
}

.ginput_product_price
{
	font-size: 1.34rem !important;
	color: var(--wdc-terracotta) !important;
}

section#flyout-menu
{
	position: fixed;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	padding: clamp(1rem, 5%, 4rem) clamp(1rem, 2.5%, 4rem);
	background: white;
	z-index: 99;
	user-select: none;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: all 250ms ease-in-out;
	
	div
	{
		position: relative;
		z-index: 3;
		
		div#flyout-close
		{
			position: absolute;
			top: .5rem;
			right: .5rem;
			position: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			
			span
			{
				
			}
		}
		
		ul
		{
			list-style-type: none;
			padding-inline-start: 0px;
			margin-top: 1rem;
			margin-bottom: 1rem;
		}
		
		ul.web.menu
		{
			li
			{
				a
				{
					font-size: 1.6rem;
                    color: var(--wdc-black);
                    font-weight: 600;
                    text-decoration: none;
				}
			}
		}
		
		ul.topmenu
		{
			li
			{
				a
				{
					font-size: 1.10rem;
                    color: var(--wdc-terracotta);
                    font-weight: 600;
                    text-decoration: none;
				}
			}
		}
		
		ul.social-media
		{
			display: flex;
			gap: 1rem;
			
			li
			{
				a
				{
					display: flex;
                    height: 100%;
                    padding: 0 0;
                    justify-content: center;
                    align-items: center;
                    aspect-ratio: 1 / 1;
                    background: none;
					
					svg
					{
						fill: var(--wdc-terracotta);
                        height: 1.5rem;
                        width: auto;
                        transition: all 250ms ease-in-out;
					}
				}
			}
		}
	}
}

section#flyout-menu:after
{
	content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    opacity: .75;
    background-image: url(assets/pebbles-banner.svg);
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
}

section#flyout-menu.visible
{
	z-index: 99;
	user-select: initial;
	pointer-events: initial;
	opacity: 1;
	visibility: visible;
}

#flyout-open
{
	display: none;
}
.frontpage-header
{
	width: 100%;
	height: clamp(400px, 66dvh, 720px);

	main.swiper
	{
		height: 100%;
		width: 100%;

		div.swiper-wrapper
		{
			div.swiper-slide
			{
				display: flex;
				position: relative;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 4rem clamp(1rem, 10dvw, 192px);
				
				*:not(.text-button-wrapper, .text-button-wrapper span, img)
				{
					color: white;
					position: relative;
					padding-bottom: .5rem;
					z-index: 3;
				}
				
				img
				{
					top: 0px;
					left: 0px;
					height: 100%;
					width: 100%;
					object-fit: cover;
					object-position: center;
					position: absolute;
					z-index: 1;
				}
			}
			
			div.swiper-slide:before
			{
				content: '';
				position: absolute;
				z-index: 2;
				height: 100%;
				width: 100%;
				top: 0px;
				left: 0px;
				background-image: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 65%);
			}
		}
	}
	
	.swiper-pagination
	{
		display: flex;
		gap: 2rem;
		padding: 0 clamp(1rem, 10dvw, 192px);
		bottom: 1rem;
		justify-content: space-between;
		
		.swiper-pagination-bullet
		{
			height: .75rem;
			border-radius: .5rem;
			width: clamp(100px, 15rem, 250px);
			background: white;
			opacity: .75;
		}
		
		.swiper-pagination-bullet-active
		{
			background: var(--wdc-terracotta);
			opacity: 1;
		}
	}
	
	@media ( width < 900px )
	{
		.swiper-pagination
		{
			display: none;
		}
	}
}

.woocommerce-notices-wrapper
{
	padding: 1rem clamp(1rem, 10dvw, 192px);	
		
	.button.wc-forward
	{
		display: inline-block !important;
		background: var(--wdc-terracotta) !important;
		margin-bottom: 0px !important;
		color: white !important;
		padding: .85rem !important;
		border-radius: 10px !important;
	}
}

:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button
{
	display: block !important;
	background: var(--wdc-terracotta) !important;
	margin-bottom: 0px !important;
	color: white !important;
	padding: .85rem !important;
	border-radius: 10px !important;
}

table.shop_table.woocommerce-checkout-review-order-table
{
	a
	{
		color: var(--wdc-terracotta);
	}
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment
{
	position: relative;
	background: var(--wdc-pinkgrey);
	
	>*
	{
		position: relative;
		z-index: 3;
	}
	
	.woocommerce-terms-and-conditions-link
	{
		color: var(--wdc-terracotta);
	}
	
	button[type=submit]
	{
		background: var(--wdc-terracotta) !important;
		margin-bottom: 0px !important;
		color: white !important;
		padding: .85rem !important;
		border-radius: 10px !important;
	}
}

#add_payment_method #payment::before, .woocommerce-cart #payment::before, .woocommerce-checkout #payment::before
{
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	opacity: .75;
	background-image: url(assets/pebbles-banner.svg);
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
}

blockquote
{
	position: relative;
	border-radius: 1rem;
	background-color: var(--wdc-pinkgrey);
	margin: 2rem 0;
	padding: 2rem;
	font-size: .95rem;
	
	> *
	{
		position: relative;
		z-index: 3;
	}
	h1,h2,h3
	{
		font-size: 1.65rem !important;
		color: var(--wdc-terracotta);
		margin-bottom: 1rem;
	}

	a
	{
		color: var(--wdc-terracotta);
	}
}

blockquote::before
{
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	opacity: .75;
	background-image: url(assets/pebbles-banner.svg);
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
}

wrapper
{
	display: flex;
	position: relative;
	flex-direction: column;
	flex-wrap: wrap;
	min-height: 100dvh;
	
	pebbles.first
	{
		z-index: -2;
		height: clamp(1.5rem, 80dvh, 810px);
		width: clamp(2rem, 50dvw, 850px);
		position: absolute;
		overflow: hidden;
		top: 5rem;
		left: 0px;
		
		img
		{
			object-fit: contain;
			object-position: left top;
			position: absolute;
			height: 100%;
			width: 100%;
			left: -50%;
		}
	}
		
	.frontpage-pointers
	{
		display: flex;
		position: relative;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 2rem;
		padding: 4rem clamp(1rem, 10dvw, 192px);
		background-color: var(--wdc-pinkgrey);
		
		.frontpage-pointer
		{
			flex-basis: 340px;
			position: relative;
			z-index: 2;
			
			h3
			{
				display: flex;
				gap: 1rem;
				align-items: center;
				
				span.material-icons
				{
					font-size: 1.5em;
					color: var(--wdc-terracotta);
				}
			}
		}
	}
	
	.frontpage-pointers:before,
	.frontpage-pointers:after
	{
		content: '';
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		background-image: url('assets/pebbles-banner.svg');
		background-position: left top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.frontpage-pointers:after
	{
		transform: rotate(180deg);
	}
	
	header.empty
	{
		padding: clamp(1rem, 10dvh, 108px) clamp(1rem, 10dvw, 192px) clamp(.5rem, 5dvh, 54px) clamp(1rem, 10dvw, 192px);
		
		nav.rank-math-breadcrumb
		{
			margin-bottom: .75rem;
			
			p
			{
				display: flex;
				flex-wrap: wrap;
				gap: .5rem;
				align-items: center;
				color: var(--wdc-steel);
				
				a
				{
					color: var(--wdc-steel);
					font-weight: 700;
					text-decoration: none;
					transition: all 250ms ease-in-out;
				}
				
				a:hover
				{
					color: var(--wdc-terracotta);
				}
				
				span.separator
				{
					font-family: 'Material Icons';
					font-weight: normal;
					font-style: normal;
					font-size: 24px;
					line-height: 1;
					letter-spacing: normal;
					text-transform: none;
					display: inline-block;
					white-space: nowrap;
					word-wrap: normal;
					direction: ltr;
					-webkit-font-smoothing: antialiased;
				}
			}
		}
		
		p.description
		{
			margin-top: 1rem;
			width: 100%;
			max-width: 800px;
		}
	}
	
	section.instagram-feed
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		width: 100%;
		padding: clamp(2rem, 10dvh, 108px) clamp(1rem, 10dvw, 192px);
		
		h2
		{
			color: var(--wdc-terracotta);
		}
	}
	
	section.webwinkel-feed
	{
		width: 100%;
		padding: clamp(2rem, 10dvh, 108px) clamp(1rem, 10dvw, 192px);
	}
	
	article.woo-content,
	article.woo-archive
	{
		width: 100%;
		padding: clamp(1rem, 5dvh, 54px) clamp(1rem, 10dvw, 192px);
		
		.woocommerce-cart-form
		{
			padding: 2rem;
			border-radius: .75rem;
			
			table.shop_table
			{
				border: none !important;
				
				th
				{
					font-size: 1rem;
					color: var(--wdc-pink);
					font-weight: 300;
				}

				td.product-name
				{
					a
					{
						color: black;
						font-weight: 700;
						text-decoration: none;
					}
				}
			}		
		}
		
		.woocommerce-MyAccount-navigation
		{
			padding: 2rem;
			background-color: var(--wdc-creme);
			background-image: url('assets/pebbles-3.svg');
			background-position: right bottom;
			background-size: cover;
			background-repeat: no-repeat;
			color: white;
			border-radius: .75rem;
			
			ul
			{
				padding-inline-start: 0px;
				list-style-type: none;
				
				li
				{
					a
					{
						color: white;
						font-weight: 700;
						text-decoration: none;
					}
					
					a:hover
					{
						color: var(--wdc-terracotta-hover);
					}
				}
			}
		}
		
		.woocommerce-MyAccount-content
		{
			p > a
			{
				text-decoration: none;
				color: var(--wdc-terracotta);
			}
			
			p > a:hover
			{
				text-decoration: underline;
				color: var(--wdc-terracotta);
			}
		}
		
		button.button
		{
			background: var(--wdc-pink);
			color: white;
			transition: all 125ms ease-in-out;
		}
		
		button.button:hover
		{
			background: var(--wdc-terracotta);
			color: white;
		}
		
		div.cross-sells
		{
			display: none;
		}
	}
	
	article.content
	{
		padding: clamp(.5rem, 5dvh, 54px) clamp(2rem, 20dvw, 384px);
		
		p:not(:last-child)
		{
			margin-bottom: 2.5rem;
		}
		
		a:not(.button)
		{
			color: var(--wdc-terracotta);
			font-weight: 500;
			text-decoration: none;
		}

		a:hover:not(.button)
		{
			color: var(--wdc-terracotta);
			text-decoration: underline;
		}
	}
}

article.woo-archive
{
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap: 2rem;
	
	aside
	{
		> h4
		{
			color: var(--wdc-terracotta);
			margin-bottom: .5rem;
		}
		> ul
		{
			display: flex;
			flex-direction: column;
			gap: .5rem;
			padding-inline-start: 1.5rem;
			list-style-type: disclosure-closed;
			
			> li
			{
				
				> ul
				{
					display: flex;
					flex-direction: column;
					padding-inline-start: 0;
					list-style-type: none;
					font-size: .9rem;
					
					> li
					{
						padding: .25rem 0 .25rem .5rem;
						margin-left: .5rem;
						border-left: 1px solid black;
					}
				}
			}
		}
		
		li > a
		{
			color: black;
			text-decoration: none;
			transition: all 125ms ease-in-out;
		}
		
		li > a:hover
		{
			color: var(--wdc-terracotta);
		}
	}
	main
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		align-items: start;
		grid-gap: 1rem;
		
		div.full-width
		{
			grid-column: span 3;
			display: grid;
			grid-template-columns: 1fr 2fr;
			align-items: start;
			grid-gap: 1rem;
			
			div.image-wrapper
			{
				display: block;
				position: relative;
				width: 100%;
				aspect-ratio: 1/1;
				border-radius: 15px;
				overflow: hidden;

				img
				{
					position: absolute;
					object-fit: cover;
					object-position: center;
					width: 100%;
					height: 100%;
					transform: scale(1);
					transition: all 250ms ease-in-out;
				}
			}
		}
		a
		{
			display: grid;
			position: relative;
			grid-template-rows: 2fr 1fr;
			grid-gap: .75rem;
			color: var(--wdc-black);
			text-decoration: none;
			
			div.hidden-label
			{
				position: absolute;
				top: 0px;
				left: 0px;
				padding: .5em 1em;
				background: #edc873;
				font-size: .67rem;
				z-index: 5;
			}

			div.image-wrapper
			{
				display: block;
				position: relative;
				width: 100%;
				aspect-ratio: 1/1;
				border-radius: 15px;
				overflow: hidden;

				img
				{
					position: absolute;
					object-fit: cover;
					object-position: center;
					width: 100%;
					height: 100%;
					transform: scale(1);
					transition: all 250ms ease-in-out;
				}
			}

			article
			{
				display: grid;
				grid-template-rows: 1fr 2fr 2fr;
				grid-gap: .5rem;

				h5
				{
					font-size: 1rem;
					color: var(--wdc-pink);
					font-weight: 300;
				}

				h2
				{
					font-size: clamp(1rem, calc(1rem + .37dvh), 20px);
					line-height: 1em;
				}

				h4.price
				{
					color: var(--wdc-terracotta);
				}
			}
		}

		a:hover
			{
				div.image-wrapper
				{			
					img
					{
						transform: scale(1.1);
					}
				}	
		}
	}
}

nav
{
	anchor-name: --nav;
	
	section.top-navigation
	{
		display: flex;
		justify-content: space-between;
		padding: 1rem clamp(1rem, 10dvw, 192px);
		background: var(--wdc-creme);
		
		ul
		{
			padding-inline-start: 0px;
			display: flex;
			gap: 1rem;
			list-style-type: none;
			
			li
			{
				a
				{
					font-size: .8rem;
					color: white;
					text-decoration: none;
				}
				
				a:hover
				{
					text-decoration: underline;
				}
			}
		}
		
		ul.social-media
		{		
			li
			{
				a
				{
					display: flex;
					height: 100%;
					padding: 0 0;
					justify-content: center;
					align-items: center;
					aspect-ratio: 1/1;
					background: none;
					
					svg
					{
						fill: white;
						height: 1.5rem;
						width: auto;
						transition: all 250ms ease-in-out;
					}
				}
				
				a:hover
				{
					background: none;
					
					svg
					{
						fill: var(--wdc-pink);
					}
				}
			}
		}
	}
	
	section.main-navigation
	{
		display: flex;
		gap: 2rem;
		align-items: center;
		padding: 1rem clamp(1rem, 10dvw, 192px);
		background: white;
		box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, .0125), 0px 0px 3px 5px rgba(0, 0, 0, .0125), 0px 0px 4px 7px rgba(0, 0, 0, .0125), 0px 0px 5px 9px rgba(0, 0, 0, .0125);
		
		ul
		{
			padding-inline-start: 0px;
			display: flex;
			gap: 2rem;
			list-style-type: none;
			
			li
			{
				a
				{
					font-size: 1.11rem;
					color: var(--wdc-black);
					font-weight: 600;
					text-decoration: none;
				}
				
				a:hover
				{
					color: var(--wdc-terracotta);
				}
			}
		}
		
		ul.button-menu
		{
			margin-left: auto;
			
			li
			{
				a
				{
					font-size: 1.2rem;
					position: relative;
					
					.cart-content
					{
						display: flex;
						justify-content: center;
						align-items: center;
						color: white;
						font-size: .65rem;
						position: absolute;
						height: 1.2rem;
						width: 1.2rem;
						border-radius: 50%;
						top: -.6rem;
						right: -.6rem;
						background: var(--wdc-pink);
					}
				}
			}
			
			li.search-button
			{
				cursor: pointer;
				position: relative;
								
				.open
				{
					display: block;
				}
				
				.close
				{
					display: none;
				}
			}
			
			li.search-button.activated
			{
				.open
				{
					display: none;
				}
				
				.close
				{
					display: block;
				}
			}
		}
	}
}

div.wc-proceed-to-checkout,
div.text-button-wrapper
{
	display: inline-block;
	position: relative;
	z-index: 3;
	border-radius: 12px;
	border: 2px solid var(--wdc-terracotta);
	padding: 2px !important;
	transition: all 250ms ease-in-out;

	> *
	{
		display: flex !important;
		gap: .75rem !important;
		font-weight: 700 !important;
		align-items: center !important;
		text-decoration: none !important;
		height: 100% !important;
		width: 100% !important;
		background: var(--wdc-terracotta) !important;
		margin-bottom: 0px !important;
		color: white !important;
		padding: .85rem !important;
		border-radius: 10px !important;
		transition: all 250ms ease-in-out !important;
	}
}

.gform_button.button
{
	display: inline-flex !important;
	gap: .75rem !important;
	font-weight: 700 !important;
	align-items: center !important;
	text-decoration: none !important;
	height: 100% !important;
	background: var(--wdc-terracotta) !important;
	margin-bottom: 0px !important;
	color: white !important;
	cursor: pointer !important;
	font-size: initial !important;
	padding: .85rem !important;
	border-radius: 12px;
	border: 2px solid var(--wdc-terracotta);
	transition: all 250ms ease-in-out !important;
}

.variations_form.cart > div,
.woocommerce-variation-add-to-cart
{
	display: flex;
	flex-wrap: wrap;
}

.quantity
{
	margin-right: 1rem;
}

a.reset_variations
{
	color: var(--wdc-terracotta-hover);
	font-size: .85rem;
	text-decoration: none;
}

a.reset_variations:hover
{
	text-decoration: underline;
}

.single_add_to_cart_button
{
	display: inline-block !important;
	background: var(--wdc-terracotta) !important;
	margin-bottom: 0px !important;
	color: white !important;
	padding: .85rem !important;
	border-radius: 10px !important;
}

div.quantity
{
	display: inline-block;
}

div.wc-proceed-to-checkout
{
	float: right !important;
	display: inline-block !important;
	
	> *
	{
		text-align: center !important;
		padding: 1.35rem !important;
		
	}
}

div.wc-proceed-to-checkout:hover,
div.text-button-wrapper:hover
{
	border-color: var(--wdc-terracotta-hover) !important;
	
	> *
	{
		background: var(--wdc-terracotta-hover) !important;
		box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, .0125), 0px 0px 3px 5px rgba(0, 0, 0, .0125), 0px 0px 4px 7px rgba(0, 0, 0, .0125), 0px 0px 5px 9px rgba(0, 0, 0, .0125) !important;
	}
}

.cart_totals
{
	tr
	{
		display: flex;
		justify-content: space-between;
	}
}
footer
{
	position: relative;
	
	section.main-footer
	{
		display: grid;
		padding: clamp(2rem, 10dvh, 108px) clamp(1rem, 10dvw, 192px);
		grid-gap: 10dvw;
		grid-template-columns: 1fr 1fr 1fr;
		
		main.colophon
		{
			span
			{
				display: block;
				margin-bottom: 2rem;
			}
			
			p
			{
				margin-bottom: 1rem;
				
				img:not(.logo)
				{
					display: inline-block;
					vertical-align: middle;
					max-width: 100px;
					width: 100%;
					height: auto;
					max-height: 3rem;
					object-fit: contain;
					margin-right: 1rem;
				}
			}
			
			ul
			{
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: .5rem;
				list-style-type: none;
				padding-inline-start: 0px;
				
				li
				{
					height: 2.5rem;
					width: 2.5rem;
					
					a
					{
						height: 100%;
						width: 100%;
						background: var(--wdc-pink) !important;
						padding: .75rem  !important;
						border-radius: .5rem;
						transition: all 250ms ease-in-out;
						
						svg
						{
							fill: white;
							max-height: 1.5rem;
							width: auto;
						}
					}
					
					a:hover
					{
						background: var(--wdc-terracotta) !important;
					}
				}
			}
		}
		
		h3
		{
			margin
		}
		
		ul
		{
			display: flex;
			flex-wrap: wrap;
			gap: .5rem;
			flex-direction: column;
			padding-inline-start: 0px;
			list-style-type: none;
			
			li
			{
				width: clamp(1rem, 100%, 260px);
				
				a
				{
					display: flex !important;
					width: 100%;
					align-items: center;
					text-decoration: none;
					color: var(--wdc-black);
					line-height: 1.5em !important;
					font-weight: 400 !important;
					padding: 0 !important;
					background-color: transparent !important;
					
					span
					{
						opacity: 0;
						transform: translateX(-1rem);
						transition: all 250ms ease-in-out;
						margin-left: auto;
					}
				}
				
				a:hover
				{
					background-color: transparent !important;
					
					span
					{
						opacity: 1;
						transform: translateX(0rem);
					}
				}
			}
		}
	}
	
	section.sub-footer
	{
		padding: 1rem clamp(1rem, 10dvw, 192px);
		background: var(--wdc-creme);
		
		ul
		{
			list-style-type: none;
			padding-inline-start: 0px;
			display: flex;
			flex-wrap: wrap;
			gap: 2rem;
			font-size: .78rem;
			
			li
			{
				display: flex;
				align-items: center;
				gap: .5em;
				
				a
				{
					color: var(--wdc-black);
					text-decoration: none;
				}
				
				a:hover
				{
					text-decoration: underline;	
				}
				
				a.nieuwontwerp
				{
					display: block;
					height: 2.5rem;
					width: 2.5rem;
					
					svg
					{
						height: 100%;
						width: 100%;
						transition: fill 250ms ease-in-out;
					}
				}
				
				a.nieuwontwerp:hover
				{
					svg
					{
						fill: #da4e1d;
					}
				}
			}
			
			li:last-child
			{
				margin-left: auto;
			}
		}
	}
	
	pebbles.footer
	{
		z-index: -2;
		height: 100%;
		width: 100%;
		position: absolute;
		overflow: hidden;
		bottom: 5rem;
		right: 0px;
		
		img
		{
			object-fit: contain;
			object-position: right bottom;
			position: absolute;
			height: 100%;
			width: 100%;
			right: -1rem;
		}
	}
}


wrapper.single
{
	section.product-summary
	{
		padding: clamp(.5rem, 5dvh, 54px) clamp(1rem, 10dvw, 192px);
		display: grid;
		align-items: start;
		grid-template-columns: 3fr 2fr;
		grid-gap: clamp(1rem, 10dvw, 192px);
		
		.woocommerce-product-gallery__trigger
		{
			display: none;
		}
		
		div.woocommerce-product-gallery__wrapper
		{
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
			
			div
			{
				a
				{
					display: block;
					height: 100%;
					width: 100%;
					cursor: zoom-in;
					
					img
					{
						width: 100%;
						border-radius: .5rem;
						object-fit: cover;
						object-position: center;
					}
				}
			}
			
			div:first-child
			{
				flex-basis: 100%;	
				a
				{
					img
					{
						aspect-ratio: 4/3;
					}
				}
			}
		}
		
		main
		{
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 2rem;
			align-items: start;
			color: var(--wdc-black);
			
			h2.price
			{
				font-weight: 100;
				font-size: clamp(1rem, calc(1rem + 1.3dvh), 30px);
				color: var(--wdc-terracotta);
				
				strong
				{
					font-weight: 700;
				}
			}
			
			h3
			{
				color: black;
				font-size: clamp(1rem, calc(1rem + .37dvh), 20px);
			}
			
			form.cart
			{
				display: flex;
				flex-wrap: wrap;
				gap: 2rem;
				
				.gform-body
				{
					flex-basis: 100%;
				}
				
				input[type=number]
				{
					background: var(--wdc-grey);
					border-radius: .5rem;
					border: none;
					height: 100%;
					min-width: 4rem;
					padding: .5rem;
				}
			}
			
			.additional-information
			{
				ul
				{
					padding-inline-start: 0px;
					list-style-type: none;
					
					li
					{
						display: grid;
						grid-template-columns: 1fr 2fr;
						grid-gap: 2rem;
					}
				}
			}
		}
	}
	
	section.product-additionals
	{
		padding: clamp(.5rem, 5dvh, 54px) clamp(1rem, 10dvw, 192px);
		display: grid;
		grid-template-columns: 3fr 2fr;
		grid-gap: clamp(1rem, 10dvw, 192px);
		align-items: start;
		
		article
		{
			p
			{
				margin-bottom: 1rem;
			}
			
			h3
			{
				margin-top: 2rem;
				font-size: clamp(1rem, calc(1rem + .37dvh), 20px);
			}
		}
		
		article.product-downloads
		{
			padding: 2rem;
			border-radius: .75rem;
			background: var(--wdc-creme);
			color: white;
			
			h3
			{
				margin-top: 0px;
				color: var(--wdc-steel);
			}
			
			h2
			{
				margin-top: 1rem;
				border-top: 1px solid white;
				padding-top: 1rem;
				font-size: clamp(1rem, calc(1rem + .56dvh), 24px);
			}
			
			h2:first-of-type
			{
				margin-top: 0rem;
				border-top: none;
				padding-top: 0rem;
			}
			
			div.text-button-wrapper
			{
				border-color: var(--wdc-steel);
				
				> *
				{
					background: var(--wdc-steel) !important;
				}
			}
			
			div.text-button-wrapper:hover
			{
				border-color: var(--wdc-black) !important;
				
				> *
				{
					background: var(--wdc-black) !important;
				}
			}
			
		}
	}
	
	@media ( width < 900px )
	{
		section.product-summary,
		section.product-additionals
		{
			grid-template-columns: 1fr;
			
			div.woocommerce-product-gallery__wrapper
			{
            	div
				{
					display: none;
				}
				
				div:first-child
				{
						display: block;
				}
			}
		}
	}
	
	section.product-related
	{
		padding: clamp(.5rem, 5dvh, 54px) clamp(1rem, 10dvw, 192px);
		
		h3
		{
			text-align: center;
		}
		
		main
		{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-gap: 2rem;
			
			a
			{
				display: grid;
				grid-template-rows: 2fr 1fr;
				grid-gap: .75rem;
				color: var(--wdc-black);
				text-decoration: none;

				div.image-wrapper
				{
					display: block;
					position: relative;
					width: 100%;
					aspect-ratio: 1/1;
					border-radius: 15px;
					overflow: hidden;

					img
					{
						position: absolute;
						object-fit: cover;
						object-position: center;
						width: 100%;
						height: 100%;
						transform: scale(1);
						transition: all 250ms ease-in-out;
					}
				}

				article
				{
					display: flex;
					flex-wrap: wrap;
					align-content: flex-start;
					gap: 1rem;
					
					> *
					{
						flex-basis: 100%;
					}
					h5
					{
						font-size: 1rem;
						color: var(--wdc-pink);
						font-weight: 300;
					}

					h2
					{
						font-size: clamp(1rem, calc(1rem + .37dvh), 20px);
						line-height: 1em;
					}

					h4.price
					{
						color: var(--wdc-terracotta);
					}
				}
			}

			a:hover
			{
				div.image-wrapper
				{			
					img
					{
						transform: scale(1.1);
					}
				}	
			}
		}
	}
}

div.coupon
{
	display: flex;
	
	.input-text
	{
		width: clamp(100px, 15dvw, 300px) !important;
	}
}

.woocommerce-info
{
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	color: var(--wdc-black);
	border: none;
	border-radius: .75rem;
	background-color: var(--wdc-pinkgrey);
	
	> *
	{
		position: relative;
		z-index: 3;
	}
	
	a.showcoupon
	{
		color: var(--wdc-terracotta);
	}
	
	.wc-forward.button
	{
		display: inline-flex;
		gap: .75rem;
		font-weight: 700;
		align-items: center;
		text-decoration: none;
		height: 100%;
		background: var(--wdc-terracotta);
		margin-bottom: 0px;
		color: white;
		padding: .85rem;
		border-radius: 10px;
		transition: all 250ms ease-in-out;
		user-select: initial;
		pointer-events: initial;
	}
	
	.wc-forward.button:hover
	{
		color: white;
		background: var(--wdc-terracotta-hover);
	}
}

.woocommerce-info::before
{
	top: unset;
	color: var(--wdc-terracotta);
}

.woocommerce-info::after
{
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	opacity: .75;
	background-image: url(assets/pebbles-banner.svg);
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(180deg);
}

section.archive-cta
{
	padding: clamp(2rem, 10dvh, 108px) clamp(1rem, 10dvw, 192px);
	
	main
	{
		display: flex;
		position: relative;
		overflow: hidden;
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
		padding: clamp(2rem, 10dvh, 108px) 2rem;
		background-color: var(--wdc-creme);
		border-radius: 1.5rem;
		color: white;
		
		> *
		{
			position: relative;
			z-index: 3;
			max-width: 50%;
		}
		
		@media ( width < 900px )
		{
			> *
			{
				max-width: 100%;
			}
		}
		
		div.text-button-wrapper
		{
			border-color: var(--wdc-steel);

			> *
			{
				background: var(--wdc-steel) !important;
			}
		}

		div.text-button-wrapper:hover
		{
			border-color: var(--wdc-black) !important;

			> *
			{
				background: var(--wdc-black) !important;
			}
		}
		
		img
		{
			position: absolute;
			top: 0px;
			right: 0px;
			bottom: 0px;
			height: 100%;
			width: 60%;
			object-fit: cover;
			object-position: center;
			z-index: 1;
		}
		
		@media ( width < 900px )
		{
			img
			{
				width: 100%;
			}
		}
	}
	
	main:before
	{
		content: '';
		z-index: 2;
		position: absolute;
		top: 0px;
		left: 50%;
		bottom: 0px;
		height: 100%;
		width: 50%;
		background-image: linear-gradient(90deg, rgba(209,198,180,1) 0%, rgba(209,198,180,0) 100%);
	}
	
	@media ( width < 900px )
	{
		main:before
		{
			left: 0%;
			width: 100%;
			background-image: linear-gradient(90deg, rgba(209,198,180,1) 0%, rgba(209,198,180,0.5) 100%);
		}
	}
}
.search-screen
{
	position: absolute;
	z-index: 999;
	position-anchor:  --nav;
    /* top: anchor(bottom); */
	visibility: initial;
	background: rgba(0,0,0,.65);
	opacity: 1;
	width: 100%;
	height: 80dvh;
	padding: 4rem clamp(1rem, 10dvw, 192px);
	transition: all 225ms ease-in-out;
	
	.search-input
	{
		padding-bottom: 2rem;
		
		input
		{
			font-size: clamp(1rem, calc(1rem + .37dvh), 20px);
			width: 100%;
			color: white;
			border: 1px solid var(--wdc-grey);
			border-radius: .75rem;
			padding: 1rem 2rem;
			background: transparent;
		}
	}
	
	.search-results
	{
		color: white;
		
		subtext
		{
			display: block;
			font-style: italic;
			font-size: .85rem;
			padding-bottom: 2rem;
		}
		
		ul
		{
			max-height: 50dvh;
			overflow-y: auto;
			overflow-x: hidden;
			padding-inline-start: 0px;
			list-style-type: none;
			
			li
			{
				display: grid;
				margin-bottom: .5rem;
				grid-template-columns: 2fr 1fr 3fr;
				grid-gap: 1rem;
				
				a
				{
					color: white;
					font-weight: 900;
					text-decoration: none;
					transition: all 125ms ease-in-out;
				}
				
				a:hover
				{
					color: var(--wdc-pink);
				}
				
				span.category
				{
					font-style: italic;
					font-size: .85rem;
				}
			}
		}
	}
}

.search-screen.hidden
{
	z-index: -999;
	opacity: 0;
	visibility: hidden;
}
@media ( width < 1020px )
{
	h1
	{
		font-size: 2rem;
	}

	h2
	{
		font-size: 1.67rem;
	}

	h3
	{
		font-size: 1.34rem;
	}

	wrapper.single
	{
		section.product-summary,
		section.product-additionals,
		section.product-related main,
		{
			grid-template-columns: 1fr;
		}
		
		section.product-related main a:not(:first-child)
		{
				display: none;
		}
	}
	
	article.woo-archive
	{
		grid-template-columns: 1fr;
		
		aside
		{
			display: none;
		}
		
		main
		{
			grid-template-columns: 1fr;
		}
	}
	
	nav
	{
		section.top-navigation
		{
			display: none;
		}
		
		section.main-navigation
		{
			ul.web.menu
			{
				display: none;
			}
			
			#flyout-open
			{
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
		}
	}
	
	footer
	{
		section.main-footer
		{
			grid-template-columns: 1fr;
		}
	}
}

dl.variation
{
	span.woocommerce-Price-amount
	{
		display: none;
	}
}

.ginput_price
{
	color: var(--wdc-terracotta);
	font-weight: 700;
}

.gform-footer.gform_footer.top_label
{
	position: absolute;
}