/*

    Theme Name: Thema
    Theme URI: https://web.wijzijnqreative.nl
    Description: Is een korte omschrijving echt nodig?
    Version: 2025.03.09

    Author: Profi-Web
    Author URI: https://profi-web.nl/

    License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

/* Available vars 

	General Colors
	--main
	--second
	--bodyBackground
	--backgroundColor
	--textColor
	--textColorAlt
	--linkColor
	--borderColor

	Elements
	--topBackground
	--topColor
	--headerBackground
	--headerColor
	--navBackground
	--navColor
	--navColorHover
	--bannerBackground
	--bannerColor
	--footerBackground
	--footerColor
	--copyBackground
	--copyColor

	--blog_backgroundColor
	--product_backgroundColor

    WooCommerce
    --wc-green
    --wc-highlight
    --wc-red
    --wc-orange
    --woocommerce
    --wc-primary

	Fonts
    --headingFont
    --textFont

	Styling
    --border-radius
    --padding
    --logo_size
    --wrapperWidth

*/
:root {
	
	/* Overwritable in child css, not a setting */
	--border-width: 2px;
	--box-shadow: 1px 1px 18px rgba(27, 23, 23, 0.05);
	--grayscale: var(--borderColor);

	/* Depth */
	--depth-2: 0 0 2px rgba(17, 34, 68, .12), 0 1px 2px rgba(17, 34, 68, .14);
	--depth-4: 0 0 2px rgba(17, 34, 68, .12), 0 1px 4px rgba(17, 34, 68, .14);
    --depth-8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
    --depth-16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
    --depth-28: 0 0 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.14);
    --depth-64: 0 0 8px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.14);

    /* Spacing */
    --spacing: var(--padding);

    /* The ideal minimal size for touch elements according to Google */
    --ideal-touch-size: 48px;

    /* Review stars */
    --wc-stars-color: #FFC723;

	/*  Font sizes  */ 
	--small-font-size: .8rem;
	--intermediate-font-size: .9rem;
	--default-font-size: 1rem;
	--medium-font-size: 1.3rem;
	--large-font-size: 2.25rem;
	--x-large-font-size: 2.62rem;

	/* Stuff */
	--smallWrapperWidth: 750px;

}
* {
	box-sizing: border-box;
}
html, 
body {
	padding: 0;
	margin: 0;
	font-family: var(--textFont);
	background: var(--backgroundColor);
	color: var(--textColor);
	scroll-behavior: smooth;
	interpolate-size: allow-keywords;
	color-scheme: light dark;
}

/* ====================================== GLOBAL SETTING CLASSES ======================================  */
.has-no-spacing {
	--spacing:  0;
}
.has-small-spacing {
	--spacing: calc( var(--padding) / 1.5 );
}
.has-intermediate-spacing {
	--spacing: calc( var(--padding) / 1.3 );
}
.has-default-spacing {
	--spacing: var(--padding);
}
.has-medium-spacing {
	--spacing: calc( var(--padding) * 1.5 );
}
.has-large-spacing {
	--spacing: calc( var(--padding) * 2 );
}
.has-x-large-spacing {
	--spacing: calc( var(--padding) * 2.5 );
}
@media screen and (max-width: 724px) {
	.mob-has-no-spacing {
		--spacing:  0;
	}
	.mob-has-small-spacing {
		--spacing: calc( var(--padding) / 1.5 );
	}
	.mob-has-intermediate-spacing {
		--spacing: calc( var(--padding) / 1.3 );
	}
	.mob-has-default-spacing {
		--spacing: var(--padding);
	}
	.mob-has-medium-spacing {
		--spacing: calc( var(--padding) * 1.5 );
	}
	.mob-has-large-spacing {
		--spacing: calc( var(--padding) * 2 );
	}
	.mob-has-x-large-spacing {
		--spacing: calc( var(--padding) * 2.5 );
	}
}
@media screen and (min-width: 725px) {
	.has-2-columns {
		--_columns: 2;
		grid-template-columns: repeat(2, 1fr);
	}
	.has-3-columns {
		--_columns: 3;
		grid-template-columns: repeat(3, 1fr);
	}
	.has-4-columns {
		--_columns: 4;
		grid-template-columns: repeat(4, 1fr);
	}
	.has-5-columns {
		--_columns: 5;
		grid-template-columns: repeat(5, 1fr);
	}
	.has-6-columns {
		--_columns: 6;
		grid-template-columns: repeat(6, 1fr);
	}
	.has-7-columns {
		--_columns: 7;
		grid-template-columns: repeat(7, 1fr);
	}
}
.has-font-family-paragraph {
	font-family: var(--textFont);
}
.has-font-family-heading {
	font-family: var(--headingFont);
}

/* ====================================== HIDDEN ======================================  */
.home .hide-on-front,
.woocommerce-checkout .hide-on-checkout {
	display: none!important;
}

/* ====================================== BASICS ======================================  */
label {
	display: block;
	position: relative;
}
fieldset {
	margin: 0;
	border: 0;
	padding: 0;
}
legend {
	font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--headingFont);
	margin: 0;
}
img, svg {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}
mark {
	background: transparent;
	color: inherit;
}
::selection {
    background-color: var(--main);
    color: #FFF;
}
.wrap, 
.is-style-wrap {
	--_wrapperWidth: var(--wrapperWidth);
}
.is-style-small-wrap {
	--_wrapperWidth: var(--smallWrapperWidth);
}
.wrap, 
#wp-toolbar, 
.is-style-wrap,
.is-style-small-wrap {
	width: min( 100%, var(--_wrapperWidth) );
	margin-inline: auto;
	position: relative;
	padding-inline: var(--padding);
}
a {
	color: inherit;
	text-decoration: none;
}
figure {
	margin: 0;
}
pre {
	background: #282C34;
	color: #FFF;
	padding: var(--padding);
    overflow-y: auto;
    border-radius: var(--border-radius);
}

/* ====================================== FORMS ======================================  */
::placeholder {
	color: var(--textColorAlt);
}
input, 
select, 
textarea,
button,
.button {
	display: inline-block;
	background-color: var(--backgroundColor);
	color: var(--textColor);
	font-family: inherit;
	border: var(--border-width) solid var(--borderColor);
	padding: 10px 15px;
	border-radius: var(--border-radius);
	width: 100%;
	font-size: inherit;
	&:hover {
		border-color: var(--textColor);
	}
	&:checked {
		accent-color: var(--main);
	}
	&[type="submit"],
	&[type="checkbox"],
	&[type="radio"] {
		width: auto;
		position: relative;
	}
	&[type="submit"] {
		font-weight: bold;
		background-color: var(--main);
		border-color: var(--main);
		&:hover {
			filter: brightness(80%);
		}
	}
}
button, 
.button {
	cursor: pointer;
}
select {
	appearance: none;
	background-image: url( 'assets/down.svg' );
	background-position: right 15px top 50%;
    background-repeat: no-repeat;
    background-size: auto 1lh;
}

/* ====================================== BUTTONS ======================================  */
.wp-block-button {
	position: relative;
	font-family: var(--headingFont);
	font-weight: bold;
	--_background: var(--main);
	--_color: #FFF;

	a,
	.wp-block-button__link {
		border-radius: var(--border-radius);
		padding: calc( var(--spacing) / 2 ) var(--spacing);
		position: relative;
		&:not(.has-background) {
			background-color: var(--_background);
			border: var(--border-width) solid var(--_background);
		}
		&:not(.has-text-color) {
			color: var(--_color);
		}
		&:hover {
			text-decoration: none!important;
			filter: brightness(80%);
		}
		& > span {
			color: var(--_background);
			filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
		}
	}
	&.has-span-overflow {
		.wp-block-button__link {
			display: flex;
			span {
				line-height: 1.4;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	&:not([class*="-spacing"]) {
		--spacing: var(--padding);
	}
	&[class*="wp-block-button__width"] {
		.wp-block-button__link {
			width: 100%;
		}
	}
	&[class*="alternative"] {
		--_background: var(--second);
		--_color: #FFF;
	}
	&[class*="accent"] {
		--_background: var(--accent);
		--_color: #FFF;
	}
	&[class*="grey"] {
		--_background: var(--grayscale);
		--_color: var(--textColor);
	}
	&[class*="woocommerce"] {
		--_background: var(--wc-primary);
		.wp-block-button__link {
			display: inline-flex;
			gap: 10px;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			&:before {
				content: '';
				display: inline-block;
				mask: url( 'assets/add-to-cart.svg' ) no-repeat 50% 50%;
				mask-size: cover;
				-webkit-mask: url( 'assets/add-to-cart.svg' ) no-repeat 50% 50%;
				-webkit-mask-size: cover;
				height: 1lh;
				aspect-ratio: 1;
				background-color: currentColor;
			}
			&.select_options:before {
				mask: url( 'assets/select-options.svg' ) no-repeat 50% 50%;
				-webkit-mask: url( 'assets/select-options.svg' ) no-repeat 50% 50%;
			}
			&.added:before {
				mask: url( 'assets/check.svg' ) no-repeat 50% 50%;
				-webkit-mask: url( 'assets/check.svg' ) no-repeat 50% 50%;
			}
			&.loading:before {
				mask: unset;
				background-color: transparent;
				border: 4px solid transparent;
				height: calc(1lh - 8px); /* - (4 * 2 ) for the border */
				border-top-color: currentColor;
				border-radius: 50%;
				animation: button-loading-spinner 1s ease infinite;
			}
			&.proceed-to-checkout:before {
				mask: url( 'assets/payment.svg' ) no-repeat 50% 50%;
				-webkit-mask: url( 'assets/payment.svg' ) no-repeat 50% 50%;
			}
		}
		span {
			line-height: 1.4;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--wc-primary);
			filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
		}
	}
	&[class*="outline"] {
		--_color: var(--_background);
		.wp-block-button__link {
			background-color: transparent;
		}
	}
	&[class*="active"] {
		.wp-block-button__link {
			border-color: var(--accent);
			border-width: var(--border-width);
		}
	}
}

/* ====================================== STYLING ======================================  */
body.page-layout-boxed {
	--contentBackground: var(--bodyBackground);
}
body:not(.page-layout-boxed ) {
	--contentBackground: var(--backgroundColor);
}
@media screen and (min-width: 725px) {
	#page.is-style-left-sidebar {
		margin-left: 250px;
	}
}
#page.is-style-boxed {
	--_bodywidth: calc( var(--wrapperWidth) + calc( var(--padding) * 2 ) );
	background: var(--bodyBackground);
    width: min( 100%, var(--_bodywidth) );
    margin-inline: auto;
    position: relative;

	@media screen and (min-width: 725px) { 
		border-left: 1px solid var(--borderColor);
		border-right: 1px solid var(--borderColor);
	}
}
.woocommerce-store-notice, p.demo_store {
    position: fixed;
    font-size: 1em;
    padding: 10px;
	background-color: var(--footerBackground);
	color: var(--footerColor);
    box-shadow: none;
}
#top {
	background: var(--topBackground);
	color: var(--topColor);
	padding: calc( var(--spacing) / 4 ) 0;
	position: relative;
	z-index: 10;
	&.has-second-menu > div {
		display: flex;
		& > ul {
			flex: 1;
			&:last-child {
				text-align: right;
			}
		}
	}
}
header {
	position: relative;
	
	.inner {
		display: flex;
		gap: min( var(--spacing), 10px );
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-block: var(--spacing);
	}
	.site_info {
		display: flex;
		align-items: center;
		gap: min( var(--spacing), 10px );
		width: max-content;
	}
	.search_block {
		width: min( 100%, 450px );
	}
	.header-inline-nav {
		min-width: 252px;  /* A really cheap way to work around the container query set on nav elements */
		flex-grow: 1;
	}
	.account-icons {
		text-align: right;
		ul {
			container-type: normal;
		}
	}
	.seperate-nav {
		padding: var(--spacing);
		background-color: var(--navBackground);
		color: var(--navColor);
	}
	&.transparent_header:not(.scroll) {
		.seperate-nav {
			background-color: transparent;
		}
	}

	/* Fires when site_info is outside of .inner (for centered header) */
	> .site_info {
		padding-top: var(--spacing);
		margin-inline: auto;
	}

	/* Scroll class */
	.scroll {
		box-shadow: var(--depth-4);
	}

}
#header {
	background: var(--headerBackground);
	color: var(--headerColor);
	top:  0;
	left:  0;
	right:  0;
	z-index: 6000;
	&.transparent_header:not(.scroll) {
		background: transparent;
		color: var(--bannerColor);
		position: absolute;
	}
}
@media screen and (min-width: 725px) {
	#header.left-sidebar {
		right: auto;
		bottom: 0;
		width: 250px;
		padding: var(--spacing);
		
		.inner {
			display: grid;
			grid-template-columns: 100%;
			width: 100%;
			padding-inline: 0;
		}
		.site_info {
			display: block;
			width: 100%;
			text-align: center;
			img, svg {
				width: var(--logo_size);
			}
		}
		.account-icons, 
		.header-inline-nav {
			min-width: 0;
			text-align: inherit;
		}
		.account-icons {
			ul.show_labels {
				container-type: inline-size;
			}
			ul:not(.show_labels) {
				text-align: center;
			}
		}
	}
}
#inlinesearch {
	--searchbox_border-radius: var(--border-radius);
	position: relative;
	isolation: isolate;
	background: var(--subBackground);
	color: var(--subColor);
	border-radius: var(--searchbox_border-radius);
	border: var(--border-width) solid var(--borderColor);

	&:focus-within {
		outline: 500vh solid rgba(0, 0, 0, 0.3);
	}
	&:has(.data-is-shown):focus-within {
		#search-results-popup {
			display: block;
			content-visibility: initial;
		}
	}
	input, button {
		all: unset;
		box-sizing: border-box;
		padding: var(--spacing);
		position: relative;
		z-index: 2;
	}
	input {
		width: 100%;
	}
	button {
		position: absolute;
		top: 0;
		right: 0;
	}
	#search-results-popup {
		display: none;
		content-visibility: hidden;
		position: absolute;
		z-index: 1;
		inset-inline: calc( var(--border-width) * -1 );
		inset-block-start: 100%;
		background-color: inherit;
		color: inherit;
		border-radius: inherit;
		border: inherit;
		border-top-width: 0px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		&:before {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: calc( var(--border-radius) + ( var(--border-radius) * 2 ) );
			transform: translateY( -50% );
			inset-inline: calc( var(--border-width) * -1 );
			background: inherit;
			border: inherit;
			border-top-width: 0;
			border-bottom-width: 0;
			z-index: -1;
		}
	}
}
.show_search_results {
	overflow: auto;
	&:not(:empty) {
		height: min( 50vh, 350px );
	}
	.search-results-output {
		padding: var(--spacing);
		.single-search-result {
			padding-block: var(--spacing);
			border-bottom: var(--border-width) solid var(--borderColor);
			&:has(img) {
				display: grid;
				grid-template-columns: 50px 1fr;
				gap: 10px;
				align-items: center;
			}
			img {
				border-radius: var(--border-radius);
			}
			.single-search-results__link {
				display: block;
				&:hover {
					text-decoration: underline;
					text-decoration-thickness: var(--border-width);
				}
			}
			.single-search-results__meta {
				color: var(--textColorAlt);
			}
		}
	}
}
#subheader {
    background: var(--contentBackground);
    color: var(--textColor);
	z-index: 5001;
	content-visibility: auto;
	&.product-header {
		bottom: 0;
		@media screen and (max-width: 724px) {
			border-top: 1px solid var(--borderColor);
		}
		.inner {
			flex-wrap: nowrap;
			.header_block {
				overflow: hidden;
				min-width: 48px;
			}
		}
		h2 {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			@media screen and (max-width: 724px) {
				--_sizing: .8rem;
			}
		}
		@media screen and (max-width: 724px) {
			.wp-block-button.is-style-woocommerce {
				.wp-block-button__link {
					height: 48px;
					aspect-ratio: 1;
					border-radius: 100px;
					padding: 0;
					display: grid;
					place-content: center;
					&:before {
						height: 30px;
					}
					span {
						display: none;
					}
				}
			}
		}
	}
}

/* Navigation  */
nav {
	--_active_menu_background: transparent;
	--_active_menu_color: var(--navColorHover);
	--_spacing: var(--spacing);
	--_border-radius: var(--border-radius);

	--_padding-block: calc( var(--_spacing) / 1.5 );
	--_padding-inline: var(--_spacing);

	&.nav-style-buttons-pills {
		--_border-radius: 100vw;
		--_padding-block: calc( var(--_spacing) / 2.5 );
	}
	&.inline-nav {
		ul {
			white-space: nowrap;
			overflow: auto;
		}
	}
	&.pagination {
		text-align: center;
		ul {
			li {
				& > * {
					aspect-ratio: 1;
					text-align: center;
				}
			}
		}
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		container-type: inline-size;
		container-name: navigation-list;
		font-size: inherit;
		li {
			border-radius: var(--_border-radius);
			margin: 2px;
			position: relative;
			display: inline-block;

			svg {
				height: 1lh;
				aspect-ratio: 1;
			}
			.menu_item_subtext {
				display: block;
				font-size: small;
				opacity: .8;
			}
			& > *:not( ul )  {
				position: relative;
				display: grid;
				align-items: center;
				grid-template-columns: 1fr;
				gap: 0;
				padding-block: var(--_padding-block);
				padding-inline: var(--_padding-inline);
				border-radius: inherit;
				min-width: 32px;

				&:has( .menu_item_label ) {
					grid-template-columns: auto 1fr auto;
					grid-template-areas: "icon text arrow";
					.menu_item_icon {
						grid-area: icon;
					}
					.menu_item_dropdown {
						grid-area: arrow;
						/* Increase touch area */
						padding: 10px;
						margin: -10px;
						transform: translateY(-2px);
						div {
							display: inline-block;
							width: 7px;
							aspect-ratio: 1;
							border-width: 0 2px 2px 0;
							border-style: solid;
							border-color: currentColor;
							border-bottom-right-radius: 2px;
							rotate: 45deg;
							transform: scale(0.8);
						}
					}
					.menu_item_label {
						grid-area: text;
						margin-inline: calc( var(--_spacing) / 5 );
					}
				}
			}
			&.cat-item-none {
				display: none;
			}
		}
	}
}
nav [class*="current"] > *, 
nav [class*="active"] > *, 
nav ul li > *[class*="current"],
nav ul li:hover > * {
	background: var(--_active_menu_background);
	color: var(--_active_menu_color);
}

/* Underlined nav */
nav.nav-style-underlined ul li > *:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -3px;
	height: 3px;
	left: 45%;
	right: 45%;
	background: transparent;
	border-radius: 10px;
	transition: .3s;
	z-index: 0;
}
nav.nav-style-underlined [class*="current"] > *:after, 
nav.nav-style-underlined [class*="active"]  > *:after, 
nav ul li > *[class*="current"]:after,
nav.nav-style-underlined ul li > *:hover:after {
	background: currentColor;
	left: 25%;
	right: 25%;
}
nav.nav-style-underlined ul li ul li > *:after {
	display: none!important;
}

/* Menu buttons */
nav.nav-style-buttons [class*="current"] > *:not( ul ), 
nav.nav-style-buttons [class*="active"] > *:not( ul ), 
nav ul li > *:not( ul )[class*="current"],
nav.nav-style-buttons ul li:hover > *:not( ul ) {
	--_active_menu_background: var(--navColorHover);
	--_active_menu_color: var(--navColor);
}

/* Menu pills */
nav.nav-style-buttons-pills [class*="current"] > *:not( ul ), 
nav.nav-style-buttons-oills [class*="active"] > *:not( ul ), 
nav ul li > *:not( ul )[class*="current"],
nav.nav-style-buttons-pills ul li:hover > *:not( ul ) {
	--_active_menu_background: var(--navColorHover);
	--_active_menu_color: var(--navColor);
}

/* Submenus */
nav ul li ul.sub-menu {
	--_active_menu_color: var(--navColorHover);
	display: none;
	background: var(--subBackground);
	color: var(--subColor);
	padding: var(--_sub_padding);
	li {
		display: block;
		text-align: left;
		width: 100%;
		margin-block: 2px;
		margin-inline: 0;
		padding: 0;
		a {
			font-weight: normal;
		}
		.menu_item_dropdown {
			transform: rotate(-90deg);
			float: right;
		}
	}
}
nav ul li.menu-item-has-children {
	--_display-type: block;
	--_sub_padding: 15px;
	--_width: 250px;
}
nav ul li.menu-item-has-children.has-big-sub {
	--_display-type: grid;
	--_sub_padding: 20px;
	/* --_width: var(--wrapperWidth); */
	--_width: 100%;
	position: initial;
}
nav ul li ul.sub-menu.submenu-is-opened {
	display: var(--_display-type);
}

/* Mobile view and Left sidebar navigation */
@container navigation-list (max-width: 250px) {
	nav ul li {
		display: block;
	}
	nav ul li.menu-item-has-children,
	nav ul li.menu-item-has-children.has-big-sub {
		--_sub_padding: 0;
		--_display-type: block;
	}
}

/* Not mobile view and not left sidebar navigation */
@container navigation-list (min-width: 251px) {
	nav ul li:hover > ul.sub-menu {
		display: var(--_display-type);
		animation: showsub 300ms;
	}
	nav ul li ul.sub-menu {
		container-type: initial;
		position: absolute;
		z-index: 1000;
		/* top: 98%; */
		left: 0;
		width: var(--_width);
		border-radius: var(--border-radius);
		border: var(--border-width) solid var(--borderColor);
		box-shadow: var(--box-shadow);

		/* For the grid version */
    	grid-template-columns: repeat( 3, 1fr );
    	gap: var(--spacing);
		align-items: start;

		/* Subs of subs */
		li:hover > ul {
			animation: none;
			top: 0;
			left: 100%;
		}
	}
	nav ul li.has-big-sub ul.sub-menu {
		li.menu-item-has-children > a {
			font-weight: bold;
		}
		.menu_item_dropdown {
			display: none;
		}
		ul {
			display: block;
			position: relative;
			border: 0;
			box-shadow: none;
			width: auto;
			margin: 0;
			padding-block: 5px;
			padding-inline: 0;
		}
		li:hover > ul {
			left: 0;
		}

	}
}

/* Content  */
.parallax {
	position: relative;
	z-index: 0;
	display: grid;
	grid-template-areas: "stack";

	> * {
		animation: parallax linear;
		animation-timeline: scroll();
		grid-area: "stack";
	}
	div[class*="inner"] {
		--parallax-speed: 5;
		z-index: 5;
	}
	img[class*="background"] {
		--parallax-speed: -5;
		z-index: 2;
	}
}
#banner {
	--textColorAlt: var(--bannerColor);
	display: grid;
	background: var(--bannerBackground);
	color: var(--bannerColor);
	justify-content: initial;
	padding: 0;
	position: relative;

	div[class*="inner"] {
		position: relative;
		z-index: 6;
		padding-block: var(--spacing);
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr;

		@media screen and (min-width: 725px) {
			grid-template-columns: 1fr auto auto;
		}
	}
	h1 {
		margin: 10px 0;
		font-weight: inherit;
		line-height: 1;
	}
	ul, ol {
		font-weight: normal;
	}
	select {
		font-size: 1rem;
	}
	img[class*="background"] {
		position: absolute;
		z-index: 2;
		top:  50%;
		left:  0;
		right: 0;
		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 100%;
		object-fit: cover;
		transform: translateY(-50%);
	}
	.wp-block-cover__background.has-background-dim {
		z-index: 4;
	}
	&:not(.parallax) {
		overflow: hidden;
	}
	&.is-style-wrap {
		overflow: hidden;
		div[class*="inner"] {
			padding-inline: var(--spacing);
		}
		@media screen and (min-width: 725px) { 
			border-radius: var(--border-radius);
		}
	}

}
#breadcrumbsbar {
	padding-block: var(--padding);
	.is-style-wrap,
	.is-style-small-wrap {
		&:has(.back_button) {
			display: flex;
			gap: calc( var(--spacing) * 2 );
			.back_button {
				a {
					font-weight: bold;
				}
			}
		}
	}
}
ol.breadcrumbs {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		display: inline-flex;
		&.breadcrumbs_divider {
			padding-inline: 10px;
			opacity: .3;
		}
	}
	a {
		display: inline-flex;
		color: var(--textColorAlt);
		border-bottom: 1px solid transparent;
		&:hover {
			border-bottom-color: currentColor;
		}
	}
	svg {
		width: var(--_sizing);
	}
	span.item-name {
		display: inline-block;
		max-width: 250px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Single blog posts */
.single_post_header {
	padding-inline: 0;
}
.single_post_image {
	text-align: center;
	margin-block: calc( var(--spacing) / 1.5 );
	aspect-ratio: 16 / 9;
	overflow: hidden;
	img {
		width: 100%;
		margin: 0;
	}
	@media screen and (max-width: 724px) {
		margin-inline: calc( var(--padding) * -1 );
	}
	@media screen and (min-width: 725px) {
		border-radius: var(--border-radius);
	}
}
.single_post_body {
	margin-block: calc( var(--spacing) / 1.5 );
	margin-inline: auto;
	@media screen and (min-width: 725px) {
		&:has(#post-sidebar) {
			display: grid;
			grid-template-columns: 1fr 250px;
			gap: 20px;
			width: min(100%, calc( var(--smallWrapperWidth) + 250px ));
		}
		&:not(:has(#post-sidebar)) {
			width: min(100%, var(--smallWrapperWidth) );
		}
	}
	.wp-block-heading {
		line-height: 1.3;
		padding-top: 1em;
	}
	.single_post_content {
		a {
			text-decoration: underline;
		}
	}
	.single_post_sidebar {
		
	}
}

/* Content  */
#content {
	background: inherit;
	position: relative;
	z-index: 10;
	gap: var(--padding);
	padding-block: var(--spacing);
	grid-template-areas: "column-1 column-2";
	container-type: inline-size;
	container-name: main-content;
	content-visibility: auto;
	ol.wp-block-list {
		list-style-type: none;
		margin: 0;
		padding: 0;
		li {
			margin-block: var(--padding);
			display: grid;
			align-items: center;
			grid-template-columns: 1lh 1fr;
			&:before {
				content: "";
				display: inline-block;
				height: 1lh;
				width: 1lh;
				background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z' fill='%231786C8'/%3E%3C/svg%3E");
				background-position: center;
				background-repeat: no-repeat;
			}
		}
	}
}
#content.sidebar-show-left {
	display: grid;
	grid-template-columns: 250px 1fr;

	#sidebar {
		grid-area: column-1;
	}
}
#content.sidebar-show-right {
	display: grid;
	grid-template-columns: 1fr 250px;

	#sidebar {
		grid-area: column-2;
	}
}
main a:not([class]) {
	color: var(--linkColor);
}
main a:not([class]):hover {
	text-decoration: underline;
}
.widget ul {
	padding:  0;
	list-style: none;
	li {
		display: block;
		padding: 10px 0;
		a:hover {
			text-decoration: underline;
		}
		ul {
			padding-top: 10px;
			padding-left: 10px;
			opacity: .8;
		}
	}
}
#html_sitemap {
	ul {
		list-style: none;
		li {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.html-sitemap-column > ul {
		padding: 0;
	}
}
footer {
	background: var(--footerBackground);
	color: var(--footerColor);
	margin: 0;
	clear: both;
	content-visibility: auto;
	contain: content;

	.is-style-wrap {
		padding: var(--spacing) var(--padding);
	}
}
footer#copy {
	background: var(--copyBackground);
	color: var(--copyColor);
	.copy_siteinfo:has(.show_logo) {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: center;
	}
	em {
		font-style: normal;
		display: block;
		margin-top: var(--spacing);
		text-transform: uppercase;
		font-size: .7em;
		font-weight: bold;
		opacity: .8;
	}

}
ol.commentlist,
ol.commentlist li.comment ul.children {
	list-style: none;
	padding: 0;
}
ol.commentlist li.comment {
	--_spacing: 20px;

	padding: var(--_spacing);
	border-radius: var(--border-radius);
	border: var(--border-width) solid var(--borderColor);
	margin: var(--_spacing) 0;

	.comment-author {
		display: inline-block;
		vertical-align: middle;
		width: 50%;
		img {
			border-radius: var(--border-radius);
			margin-right: 10px;
		}
		cite {
			font-style: normal;
		}
		.says {
			display: none;
		}
	}
	
	.comment-meta {
		display: inline-block;
		vertical-align: middle;
		width: 50%;	
		text-align: right;
	}

}
ol.commentlist li.comment ul.children li.comment {
	--_spacing: 10px;
}
body:not(.single-product) #respond {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 10px;
	padding: 20px;
	border-radius: var(--border-radius);
	border: var(--border-width) solid var(--borderColor);
	width: 100%;
}
.next-and-previous-posts-columns {
	padding-top: 50px;
}
.woocommerce-products-header {
	margin-bottom: var(--spacing);
	.term-description {
		p {
			&:first-child {
				margin-top: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
		&.term-description__bottom {
			margin-top: var(--spacing);
		}
		&[content-state="collapsed"] {
			-webkit-line-clamp: 3;
		}
	}
	.term-description-toggle {
		color: var(--linkColor);
		text-decoration: underline;
	}
}
.archive-grid {
	grid-template-rows: repeat( 5, auto );

	.blogitem {
		position: relative;
		background-color: var(--blog_backgroundColor);
		transition:  .3s;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 5;
		gap: 20px;
		padding: var(--spacing);

		@media screen and (min-width: 725px) {
			&.latest-post {
				grid-column: span var(--_columns);
				grid-template-columns: 1fr 1fr;
				.inline-post-img {
					grid-row: 1 / 5; 
				}
				> *:not(.inline-post-img) {
					grid-column: 2;
				}
				h3 {
					zoom: 130%;
				}
				p {
					zoom: 115%;
					&[content-state="collapsed"] {
						-webkit-line-clamp: 6!important;
					}
				}
			}
		}
		small {
			color: var(--main);
			text-transform: uppercase;
			font-size: var(--small-font-size)
		}
		.inline-post-img {
			width: 100%;
			a {
				display: block;
				aspect-ratio: 16 / 9;
				overflow: hidden;
				border-radius: var(--border-radius);

			}
			img {
				min-width: 100%;
				min-height: 100%;
				width: auto;
				height: auto;
				object-fit: cover;
				object-position: 50% 50%; 
			}
		}
		.blogitem-author {
			color: var(--textColorAlt);
		}
		&.border:hover {
			border-color: var(--main);
		}
		&.depth-2:hover {
			box-shadow: var(--depth-4);
		}
		&.item-aside {
			outline: 2px solid var(--second);
		}
		

	}
}

/* Layout 2 */
.layout-2 .blogitem {
	.inline-post-img {
		aspect-ratio: 1;
	}
}

/* Layout 3 */
.layout-3 .blogitem {
	.inline-post-img {
		position: absolute;
		height: 100%;
		aspect-ratio: initial;
		z-index: 1;
		opacity: .2;
	}
	.article-content-coloring {
		color: var(--blog_backgroundColor);
		filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
	}
	.blogitem-title {
		grid-row: span 2; /* With the image "removed" we need this to span 2 rows for proper alignment */
	}
	div:not( .inline-post-img ) {
		position: relative;
		z-index: 2;
	}
}

/* Modals */
dialog {
	--_maxwidth: 600px;
	--_spacing: 15px;
    background: var(--contentBackground);
	color: var(--textColor);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--borderColor);
    width: min( 100%, var(--_maxwidth) );
  	padding: 0;
	transition-property: display opacity;
	transition-duration: 300ms;
	transition-behavior: allow-discrete;
	opacity: 0;
	translate: 0 -50px;
	@media screen and (max-width: 725px) {
		max-height: 90%;
	}
	header {
		padding: var(--_spacing);
		position: sticky;
		top: 0;
		z-index: 100;
		display: grid;
		grid-template-columns: 1fr 50px;
		gap: 10px;
		align-items: center;
		background: inherit;
		border-bottom: 1px solid var(--borderColor);
	
		button.closebutton {
			background: var(--grayscale);
			color: var(--textColor);
			padding: 10px;
			aspect-ratio: 1;
			font-size: 0;
			mix-blend-mode: multiply;
		}
		> div > * {
			margin: 0;
		}
	}
	&#search-dialog header {
		background-color: var(--grayscale);
	}
	section {
		padding: calc( var(--_spacing) / 2 ) var(--_spacing);
		h2, h3 {
			font-size: 1em;
		}
	}
}
dialog[open] {
	opacity: 1;
	translate: 0 0;
	@starting-style {
		opacity: 0;
		translate: 0 -50px;
	}
}
dialog.wc_gallery_dialog {
	--_maxwidth: 1000px;
	header {
		background: transparent;
		border: 0;
		position: fixed;
		right: 0;
	}
	section {
		text-align: center;
	}
	img {
		max-height: 90vh;
	}
}

/* Summary, Details */
details {
	background-color: var(--grayscale);
	border-radius: var(--border-radius);
	padding: calc( var(--padding) / 2 );
	summary {
		cursor: pointer;
		list-style-type: none;
		padding: calc(var(--spacing) / 2) var(--spacing);
		position: relative;
		::marker,
		::-webkit-details-marker {
			display: none;
			font-size: 0rem;
		}
		&:after {
			content: "\23F7";
			display: block;
			position: absolute;
			top: 50%;
			right: var(--spacing);
			transform: translateY(-50%);
		}
	}
}
footer details {
	--spacing: 0;
	border-radius: 0;
}

/* ====================================== WOOCOMMERCE ======================================  */

/* Messages */
.woocommerce-info, 
.woocommerce-message, 
.woocommerce-error,
.wc-block-components-notice-banner {
	background-color: transparent;
	padding: 5px 0;
	border: 0;
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	svg {
		fill: currentColor;
		min-width: 24px; /* Required for the flexbox */
	}
	a:not(.button) {
		text-decoration: underline;
	}
	a.button {
		order: 4; 
		width: auto;

	}
	.wc-block-components-button.wc-block-components-notice-banner__dismiss {
		width: 30px;
		padding: 0;
		border: 0;
		color: currentColor;
		margin-left: auto;
	}
	&::before,
	&::after {
		display: none!important;
	}
}
[data-notice="getcarttotals"],
[data-notice="getfreeshipping"],
[data-notice="combideal_savings"] {
	grid-template-columns: 0 1fr;
}
.woocommerce-info, 
.wc-block-components-notice-banner.is-info {
	color: var(--wc-primary);
}
.woocommerce-message, 
.wc-block-components-notice-banner.is-success {
	color: var(--wc-green);
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	color: var(--wc-red);
}
[data-notice="getcarttotals"] {
	color: var(--textColor);
}
.wc-block-components-notice-banner__content:has( a.button ) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.woocommerce div.product div.summary {
	.price-wrapper,
	p.woocommerce-product-details__short-description,
	div.stock,
	#product-families,
	.bulkdiscount {
		margin-block: var(--padding);
		padding: 0;
	}
	.price-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		p {
			margin: 0;
		}
		.savings {
			color: var(--wc-green);
		}
	}
	.product-family__single {
		margin-block: calc( var(--padding) / 1.5 );
		label {
			margin-bottom: .2lh;
			font-weight: 700;
			span {
				font-weight: normal;
			}
		}
		.no-stock {
			img {
				filter: grayscale(1);
			}
			.product-families-price {
				color: var(--wc-red);
			}
		}
		.product-families-product-attributes {
			overflow: hidden;
			white-space: nowrap;
			p {
				margin: 0;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.product_family__dropdown {
			summary {
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		/* Display as images */
		&.family-style-3 {
			--_width: 75px;
			a {
				font-size: .8em;
				text-align: center;
				line-height: 1.2;
				padding: 10px;
			}
			img {
				width: var(--_width);
			}
			.product-families-product-attributes {
				width: calc( var(--_width) + var(--padding) );
				margin-top: 3px;
			}
		}

	}
	.woocommerce-review-link {
		margin: 0;
		color: var(--textColorAlt);
	}
	.woocommerce-product-details__short-description {
		color: var(--textColorAlt);
		font-size: var(--intermediate-font-size);
	}
	.woosb-wrap {
		margin-top: var(--spacing);
		.woosb-product {
			display: grid;
			grid-template-columns: 1fr auto;
			padding-block: 10px;
			border-bottom: 1px solid var(--borderColor);
		}
		.woosb-availability {
			display: none;
		}
	}
	#mollie-applepayDirect-button {
		padding-top: 10px;
	}
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
	width: auto;
	float: none;
}
.woocommerce div.product div.wc-product-page-columns {
	gap: var(--padding);
}
.woocommerce div.product .woocommerce-product-rating:before,
.woocommerce div.product .woocommerce-product-rating:after {
	display: none;
}
.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.woocommerce div.product .single_product_brandimage {
	max-height: 60px;
	float: right;
	margin: 0 0 10px 10px;
}
.woocommerce div.product .summary .stock,
.stock {
	display: flex;
	flex-direction: column;
	color: inherit;
}
.stock.in-stock strong {
	color: var(--wc-green);
}
.stock.low-in-stock strong {
	color: var(--wc-orange);
}
.stock.on-backorder strong {
	color: var(--wc-orange);
}
.stock.out-of-stock strong {
	color: var(--wc-red);
}
main div.product section.products {
	padding: var(--padding) 0;
	content-visibility: auto;
}
.woocommerce-product-details__short-description p:first-child {
	margin-top: 0;
}
.woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}
._shipping_class_description,
._sale_price_dates_to {
	border-radius: var(--border-radius);
    padding: calc( var(--padding) / 2 );
}
._shipping_class_description {
	background: var(--grayscale);
}
._shipping_class_description p:before {
	display: inline-block;
	content: "";
	mask: url( 'assets/truck.svg' ) no-repeat 50% 50%;
	mask-size: cover;
	-webkit-mask: url( 'assets/truck.svg' ) no-repeat 50% 50%;
	-webkit-mask-size: cover;
	background-color: currentColor;
	aspect-ratio: 1;
	width: 1lh;
}
._sale_price_dates_to {
    background: #F0F6FF;
    color: #3578E5;
}
._sale_price_dates_to p:before {
	display: inline-block;
	content: "";
	mask: url( 'assets/calendar.svg' ) no-repeat 50% 50%;
	mask-size: cover;
	-webkit-mask: url( 'assets/calendar.svg' ) no-repeat 50% 50%;
	-webkit-mask-size: cover;
	background-color: currentColor;
	aspect-ratio: 1;
	width: 1lh;
}
._shipping_class_description p,
._sale_price_dates_to p {
	display: flex;
    align-items: center;
    gap: 5px;
	padding: 0;
	margin: 0;
}
.woocommerce .product form.cart {
	/* Wrapper around the quantity input and the add to cart button */
	.cart-button-wrapper {
		&[data-hasquantity='true'] {
			display: grid;
			grid-template-columns: 150px 1fr;
			gap: 5px;
		}
		&[data-hasquantity='false'] {
			.quantity, 
			.quantity-block {
				display: none;
			}
		}
	}
	/* Quantity input with buttons */
	.quantity-block {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		background-color: var(--backgroundColor);
		color: var(--textColor);
		font-family: inherit;
		border: var(--border-width) solid var(--borderColor);
		border-radius: var(--border-radius);
		button, input {
			border: 0;
			padding-inline: 0;
			text-align: center;
		}
		button {
			background-color: transparent;
			&:hover {
				background-color: var(--grayscale);
				cursor: pointer;
			}
		}
	}
	/* Input field */
	div.quantity .qty {
		height: 100%;
		width: min( 150px, 100% );
		text-align: center;
		appearance: none;
		-moz-appearance: textfield;
		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}
	/* Variable products */
	.woocommerce-variation-add-to-cart.variations_button {
		/* Disabled / Not all options selected */
		&.woocommerce-variation-add-to-cart-disabled {
			filter: grayscale(100%);
			cursor: not-allowed;
			position: relative;
			&:after {
				content: "";
				display: block;
				position: absolute;
				inset: 0;
				background: rgba(255,255,255,0.5);
			}
		}
	}
}

/* Variations */
.woocommerce div.product form.cart table.variations {
	width: 100%;
	padding-block: 10px;
	tbody, tr, th, td {
		display: block;
		width: 100%;
		font-weight: normal;
	}
	tr {
		position: relative;
	}
	label {
		position: absolute;
		top: 4px;
		left: 15px;
		right: 15px;
		font-size: .6rem;
		transition: .3s;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--textColorAlt);
	}
	select,
	input {
		padding-block: 14px;
		padding-inline: 16px;
		width: 100%;
	}
}

/* Grouped products */
.woocommerce div.product form.cart table.woocommerce-grouped-product-list {
	width: 100%;
	padding-block: 10px;
	tr {
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: 5px;
		align-items: center;
		padding-block: 5px;
		td {
			&.woocommerce-grouped-product-list-item__quantity {
				grid-row: span 2;
				.button.product_type_simple {
					font-size: 0;
					text-align: center;
					&:before {
						content: '';
						display: inline-block;
						mask: url( 'assets/view.svg' ) no-repeat 50% 50%;
						mask-size: cover;
						-webkit-mask: url( 'assets/view.svg' ) no-repeat 50% 50%;
						-webkit-mask-size: cover;
						height: var(--medium-font-size);
						aspect-ratio: 1;
						background-color: currentColor;
					}
				}
			}
			&.woocommerce-grouped-product-list-item__label {
	
			}
			&.woocommerce-grouped-product-list-item__price {
				grid-column: 2;
				display: flex;
				gap: 5px;
				.stock {
					margin-block: 0;
					flex-direction: row;
					gap: 5px;
				}			
			}
		}
	}
	tr.outofstock {

	}
}

/* Add to cart, Proceed to checkout etc. */
.woocommerce a.added_to_cart {
	display: none!important;
}

/* Reviews  */
#review_form p.stars {
	font-size: 2rem;
	margin: 0;
	
	a {
		position: relative;
		height: 1em;
		width: 1em;
		text-indent: -999em;
		display: inline-block;
		text-decoration: none;
	}
	a::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 1em;
		aspect-ratio: 1;
		mask: url( 'assets/star.svg' );
		mask-size: contain;
		-webkit-mask: url( 'assets/star.svg' );
		-webkit-mask-size: contain;
		background: currentColor;
	}
	a:hover {
		color: var(--wc-stars-color);
	}
	a.active::before {
		color: var(--wc-stars-color);
	}

}
#review_form span#reply-title {
	display: none;
}
#review_form input, #review_form textarea, #review_form select {
	width: 100%;
}

/* Reviews: New */
#reviews .commentlist,
.wc-block-review-list {
	--columns: 1;
	list-style: none;
	padding: 0;
	margin: var(--spacing) 0;
	display: grid;
	grid-template-columns: repeat( var(--columns), 1fr );
	gap: var(--spacing);
	@media screen and (min-width: 725px) {
		&.wc-block-components-review-list {
			--columns: 4;
		}
	}
	li {
		padding-block: 10px;
		border-bottom: 1px solid var(--grayscale);
		.wc-block-review-list-item__meta,
		.meta {
			margin-block: 0;
		}
		.rating-stars,
		.wc-block-review-list-item__rating__stars {
			overflow: hidden;
			margin-block: 0;
		}
		.woocommerce-review__author,
		.wc-block-review-list-item__author {
			display: block;
			font-weight: bold;
		}
		.woocommerce-review__dash {
			display: none;
		}
		.woocommerce-review__published-date,
		.wc-block-review-list-item__published-date {
			display: block;
			color: var(--textColorAlt);
			font-size: var(--small-font-size);
		}
		.description,
		.wc-block-review-list-item__text {
			font-size: 1.1em;
			padding-top: 5px;
			margin-top: 5px;
			border-top: 1px solid var(--grayscale);
			p {
				margin-block: 0;
				&::before {
					content: open-quote;
				}
				&::after {
					content: close-quote;
				}
			}
		}
	}
}

/* Meters */
#meter {
	--meter-color: var(--wc-green);

	display: block;
	width: 100%;
	height: 15px;
	background-color: var(--grayscale);
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: 100vw;
	.meter-bar {
		display: block;
		height: inherit;
		border-radius: inherit;
		background-color: var(--meter-color);
	}

	&.shipping-meter {
		margin-block: 5px;
	}
	&.rating-meter {
		--meter-color: var(--wc-stars-color);
	}
}

/* Archive */
.wc-count-sorting {
	margin-bottom: var(--spacing);
	@media screen and (min-width: 725px) {
		display: grid;
		grid-template-columns: 1fr 350px;
		align-items: center;
	}
	@media screen and (max-width: 724px) {
		text-align: center;
	}
}
.wc-block-grid {
	text-align: left;
}
ul.wc-block-grid__products,
.woocommerce ul.products {

	/* This whole --_columns situation is a bit messed up right now.. but I'll be looking into the likelyhood of the attr selector being supported "soon" to see if, how and when to improve this code. For now at least it works right? */

	/* --_columns: attr( data-columns number, 4 ); */
	--_columns: 4;

	/* Desktop */
	@media screen and (min-width: 1101px) {
		&.columns-1 {
			--_columns: 1;
		}
		&.columns-2 {
			--_columns: 2;
		}
		&.columns-3 {
			--_columns: 3;
		}
		&.columns-4 {
			--_columns: 4;
		}
		&.columns-5 {
			--_columns: 5;
		}
		&.columns-6 {
			--_columns: 6;
		}
		&.columns-7 {
			--_columns: 7;
		}
		&.columns-8 {
			--_columns: 8;
		}
		&.columns-9 {
			--_columns: 9;
		}
		&.columns-10 {
			--_columns: 10;
		}
	}

	/* Intermediate */
	@media screen and (min-width: 725px) and (max-width: 1100px) {
		&.columns-1 {
			--_columns: 1;
		}
		&.columns-2 {
			--_columns: 2;
		}
		&.columns-3 {
			--_columns: 3;
		}
		&.columns-4,
		&.columns-5,
		&.columns-6,
		&.columns-7,
		&.columns-8,
		&.columns-9,
		&.columns-10 {
			--_columns: 4;
		}
	}

	/* Mobile */
	@media screen and (max-width: 724px) {
		--_columns: 1;
	}

	list-style: none;
	display: grid;
	gap: 10px;
	padding: 0;
	container-type: inline-size;
	container-name: productlist;
	grid-template-columns: repeat( var(--_columns), 1fr );
	grid-template-rows: repeat( 4, auto );;
	font-size: 1rem;

	&::after, &::before {
		display: none;
	}
	li {
		--_spacing: 15px;
		--_border-radius: var(--border-radius);

		/* container-type: inline-size; */
		/* container-name: productitem; */
		background-color: var(--product_backgroundColor);
		gap: calc( var(--_spacing) * .7 );
		overflow: hidden;
		position: relative;
		border-width: var(--border-width);
		padding: var(--_spacing);
		border-radius: var(--_border-radius);

		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;

		/* Small screens */
		@media screen and (max-width: 724px) { 
			--_border-radius: 0;
			grid-template-columns: 100px 1fr auto;
			grid-template-rows: auto;
			row-gap: 0;
			box-shadow: none;
			border-width: 0px;
			border-bottom-width: var(--border-width);
			padding-block: 5px;
			.btt_image_wrapper {
				grid-column: 1;
				grid-row: 1 / span 2;
				height: 100%;
				aspect-ratio: initial;
			}
			.btt_price_wrapper {
				grid-column: 2;
			}
			.btt_product_buttons {
				grid-column: 3;
				grid-row: 1 / span 2;
				align-self: center;
				.view_product {
					display: none;
				}
			}
		}

		/* Wide products */
		&.list-has-1-columns {
			grid-template-columns: 100px 1fr auto;
			grid-template-rows: auto;
			row-gap: 0;
			.btt_image_wrapper {
				grid-column: 1;
				grid-row: 1 / span 2;
				height: 100%;
				aspect-ratio: initial;
			}
			.btt_price_wrapper {
				grid-column: 2;
			}
			.btt_product_buttons {
				grid-column: 3;
				grid-row: 1 / span 2;
				align-self: center;
				.view_product {
					display: none;
				}
			}
		}

		/* Wide products / Mobile display     -- Doesn't seem to work tho... */
		/* @container productlist (min-width: 300px) {
			--_border-radius: 0;
			grid-template-columns: 100px 1fr;
			border-width: 0px;
			border-bottom-width: var(--border-width);
			padding-inline: 0;
			.btt_image_wrapper {
				grid-row: span 3;
				height: 100%;
				aspect-ratio: initial;
			}
			.btt_price_wrapper {
				grid-row: span 2;
			}
		} */

		a {
			display: block;
			height: 100%;
		}
		.wc-block-grid__product-title,
		h2,
		.price {
			font-size: inherit;
			font-weight: normal;
			font-family: var(--headingFont);
			line-height: 1.2;
		}
		.btt_image_wrapper {
			position: relative;
		}
		.wc-block-grid__product-image,
		.basetheme_product_thumbnail {
			aspect-ratio: 1;
			display: grid;
			place-items: center;

			img {
				width: auto;
				max-height: 100%;
				max-width: 100%;
				margin: 0;
			}
		}
		.wc-block-grid__product-price,
		.btt_price_wrapper {
			.stock {
				font-size: var(--small-font-size);
				@media screen and (min-width: 725px) {
					padding-top: var(--_spacing);
				}
				@media screen and (max-width: 724px) {
					color: var(--textColorAlt);
					.stock-string {
						display: none;
					}
				}
			}
		}
		.btt_rating_wrapper {
			display: grid;
			align-items: center;
			grid-template-columns: auto 1fr;
			gap: 5px;
			@media screen and (max-width: 724px) {
				.rating-stars {
					margin-block: 0;
					height: 1.5ch;
				}
			}
			.rating-counter {
				color: var(--textColorAlt);
				font-size: .8em;
			}
		}
		.wc-block-grid__product-add-to-cart,
		.btt_product_buttons {
			display: flex;
			gap: 5px;
			a {
				background: var(--grayscale);
				color: var(--textColor);
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				padding: 7px;
				height: 48px; /* "ideal" touch size */
				line-height: 1;
				&:has(span) {
					gap: 5px;
				}
				&:before {
					content: '';
					display: inline-block;
					mask: url( 'assets/view.svg' ) no-repeat 50% 50%;
					mask-size: cover;
					-webkit-mask: url( 'assets/view.svg' ) no-repeat 50% 50%;
					-webkit-mask-size: cover;
					height: max( 16px, 1.3lh );
					aspect-ratio: 1;
					background-color: currentColor;
				}
				&.product_type_variable,
				&.ajax_add_to_cart {
					background: var(--wc-primary);
					border-color: var(--wc-primary);
					aspect-ratio: 1;
					font-size: 0;
					width: auto;
					&:before {
						background-color: var(--wc-primary);
						mask: url( 'assets/add-to-cart.svg' ) no-repeat 50% 50%;
						filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
					}
					&.product_type_variable:before {
						mask: url( 'assets/select-options.svg' ) no-repeat 50% 50%;
					}
					&.added:before {
						mask: url( 'assets/check.svg' ) no-repeat 50% 50%;
					}
					&.loading:before {
						mask: unset;
						background-color: transparent;
						border: 4px solid transparent;
						height: 16px; /* 24 - ( 4 * 2 ) for the border */
						border-top-color: var(--wc-primary);
						filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
						border-radius: 50%;
						animation: button-loading-spinner 1s ease infinite;
					}
				}
				&:hover {
					filter: brightness(90%);
				}
			}
		}
	}
	li:hover {
		border-color: var(--main);
	} 

}

/* General product stuff */
.wc-block-grid__product-onsale,
.woocommerce .btt_badges {
	position: absolute;
    top: var(--padding);
    z-index: 10;
    @media screen and (min-width: 725px) {
    	left: var(--padding);
    } 
	span:not(.badge, .badge_inner),
	.badge {
		--_background: var(--second);
		font-weight: bold;
		padding: 5px 10px;
		border-radius: var(--border-radius);
		background: var(--_background);
		margin: 1px;
		.badge_inner {
			color: var(--_background);
			filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
		}
		&.new {
			--_background: var(--wc-orange);
		}
		&.sale {
			--_background: var(--wc-green);
		}
		&.aanrader {
			--_background: var(--main);
		}
		&.lowstock {
			--_background: var(--grayscale);
		}
		&.bulkdiscount {
			--_background: var(--headerBackground);
		}
		&.custom_badge {
			--_background: var(--wc-primary);
		}
	}
}
.price {
	font-size: 1.3rem;
	font-family: var(--headingFont);
	color: var(--textColor);
	margin: 0;
	&:has(del) {
		display: flex;
		gap: .75em;
	}
	.woocommerce-Price-amount {
		font-weight: normal;
	}
	del {
		color: var(--textColorAlt);
	}
	ins {
		text-decoration: none;
		color: var(--wc-red);
	}
}
.wc-block-review-list-item__rating__stars,
.wc-block-components-product-rating-stars__stars,
.rating-stars {
	display: inline-block;
	height: 24px;
	aspect-ratio: 5 / 1;
	mask: url( 'assets/star.svg' );
	mask-size: contain;
	-webkit-mask: url( 'assets/star.svg' );
	-webkit-mask-size: contain;
	background: var(--grayscale);
	margin-block: 5px;
	span,
	.bar {
		display: block;
		background: var(--wc-stars-color);
		height: inherit;
		font-size: 0;
	}
}
.has-large-font-size .rating-stars {
	height: 36px;
}
.has-x-large-font-size .rating-stars {
	height: 42px;
}
body.single-product {
	[id*="product-"].product.type-product {
		border-width: 0;
		box-shadow: none;
	}
}

/* Gallery + Summary position */
@media screen and (min-width:  725px) {
	.wc-product-column-layout-switched .wc-product-page-column.product-summary {
		order: 0;
	}
	.wc-product-column-layout-switched .wc-product-page-column.product-image {
		order: 1;
		position: relative;
	}
}

/* Product gallery */
.woocommerce-product-gallery {
	color: var(--textColor);
	position: relative;
	img {
		margin: 0 auto;
		border-radius: var(--border-radius);
		&.zoomImg {
			background: var(--contentBackground);
		}
	}
	ul, ol {
		list-style: none;
		padding: 0;
		margin: 0;
	}
}
.woocommerce-product-gallery__image {
	text-align: center;
	/* aspect-ratio: 4 / 3; */
	img {
		max-height: 500px;
		object-fit: contain;
	}
}
ul.flex-direction-nav {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: var(--padding);
	right: var(--padding);
	li a {
		--_sizing: 40px;
		display: block;
		font-size: 0;
		width: var(--_sizing);
		aspect-ratio: 1;
		border-radius: 100px;
	}
	a:before {
		display: block;
		width: 100%;
		aspect-ratio: 1;
		font-size: 2rem;
		color: currentColor;
	}
	li.flex-nav-prev a:before {
		content: '←';
	}
	li.flex-nav-next a:before {
		content: '→';
	}
}

/* Default gallery */
.woocommerce div.product div.images {
	.flex-control-thumbs {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 5px;
		padding-block: 10px;
		li {
			width: 60px;
			margin: 0;
			padding: 0;
			float: none;
			border-radius: var(--border-radius);
			transition: .3s;
			img {
				border: var(--border-width) solid transparent;
				&.flex-active {
					border-color: var(--textColor);
				}
			}
		}
	}
}

/* Bullets gallery */
.wc-product-gallery-layout-bullets.woocommerce div.product div.images {
	.flex-control-thumbs li {
		height: 10px;
		background-color: currentColor;
		li {
			&:hover,
			&:has( img.flex-active ) {
				background: var(--main);
			}
			img {
				opacity: 0;
			}
		}
	}
}

/* Leftsided gallery */
@media screen and (min-width: 725px) {
	.wc-product-gallery-layout-leftside .woocommerce-product-gallery {
		display: grid;
		grid-template-columns: 60px 1fr;
		gap: 10px;
	}
	.wc-product-gallery-layout-leftside.woocommerce div.product div.images .flex-viewport {
		order: 2;
	}
	.wc-product-gallery-layout-leftside.woocommerce div.product div.images .flex-control-thumbs {
		order: 1;
		flex-direction: column;
		overflow-y: auto;
	}
	.wc-product-gallery-layout-leftside.woocommerce div.product div.images .flex-control-thumbs li {
	    width: 100%;
	}
	.wc-product-gallery-layout-leftside.woocommerce div.product div.images ul.flex-direction-nav {
		display: none;
	}
}

/* No images */
.wc-product-gallery-layout-no-images.woocommerce div.product div.images .flex-control-thumbs {
	display: none;
}

/* Product tabs: General */
.woocommerce div.product {
	.woocommerce-tabs {
		ul.tabs {
			list-style: none;
			padding: 0;
			margin: 0;
			li {
				background: transparent;
				color: inherit;
				border: 0;
				&:after, &:before {
					display: none;
				}
				a {
					display: block;
					color: inherit;
					padding-block: calc( var(--spacing) / 2 );
				}
			}
		}
		.panel {
			content-visibility: auto;
			padding-block: var(--spacing);
			margin-block: var(--spacing);
		}
	}

}

/* Products tabs: Default tabs */
.woocommerce-page.wc-product-layout-tabbed .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--spacing);
	border-top: var(--border-width) solid var(--borderColor);
	margin-bottom: var(--spacing);
	li {
		border-top: 4px solid transparent;
		&:hover {
			border-color: var(--borderColor);
		}
		&.active {
			border-color: var(--main);
			font-weight: bold;
		}
	}
}

/* Products tabs: Vertical tabs */
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: var(--padding);
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs {
	display: flex;
	flex-direction: column;
	gap: 5px;
	border-right: var(--border-width) solid var(--borderColor);
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs li {
	border-right: 4px solid transparent;
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs li:hover {
	border-color: var(--borderColor);
}
.woocommerce-page.wc-product-layout-v-tabbed .woocommerce-tabs ul.tabs li.active {
	border-color: var(--main);
	font-weight: bold;
}

/* Products tabs: Rows */
.woocommerce-page.wc-product-layout-rows .woocommerce-tabs ul.tabs {
	display: none;
}
.woocommerce-page.wc-product-layout-rows .woocommerce-tabs .panel {
	display: grid!important;
	grid-template-columns: 350px 1fr;
	gap: var(--spacing);
	padding-block: var(--spacing);
	margin-block: var(--spacing);
}

/* Products tabs: Rows */
.woocommerce-page.wc-product-layout-small-rows .woocommerce-tabs ul.tabs {
	display: none;
}
.woocommerce-page.wc-product-layout-small-rows .woocommerce-tabs .panel {
	display: block!important;
	width: min( 100%, var(--smallWrapperWidth) );
	margin-inline: auto;
	padding-block: var(--spacing);
	margin-block: var(--spacing);
	border-top: var(--border-width) solid var(--borderColor);
}
.woocommerce-page.wc-product-layout-small-rows .woocommerce-tabs .panel #tab-header h2 {
	text-transform: uppercase;
}

/* Woocommerce columns */
.u-columns {
	display: grid;
	gap: var(--padding);
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr) );
	
}

/* Remember me button */
p.form-row:has( label.woocommerce-form-login__rememberme ) {
	display: grid;
	gap: var(--padding);
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

/* Account page */
.woocommerce-account {
	*:before, *:after {
		display: none!important;
	}
	.woocommerce-MyAccount-content {
		padding-block: var(--padding);
		section {
			margin-block: var(--padding);
			h2 {
				margin-block: 10px;
			}
		}
	}
	header.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block: var(--spacing);
		h2 {
			font-size: 1.17em; /* H3 default size */
		}
		a {
			color: var(--linkColor);
			text-decoration: underline;
		}
	}
	.wp-block-table table {
		border: var(--border-width) solid var(--borderColor);
		a.button {
			width: auto;
			background-color: transparent;
			border: 0;
			text-decoration: underline;
			font-weight: bold;
			padding-left: 0;
		}
	}

}
@container main-content (min-width: 725px) {
	.woocommerce-account.wc-account-layout-v-tabbed:not(.wc-account-loginform) {
		main .woocommerce {
			display: grid;
			grid-template-columns: 250px 1fr;
			gap: var(--padding);
		}
	}
}
ul.wc-item-meta {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--small-font-size);
	li {
		display: flex;
		gap: 5px;
		p {
			margin: 0;
		}
	}
}

/* Both cart & checkout */
.wc-block-cart,
.wc-block-checkout {

	/* Make it a grid */
	@media screen and (min-width: 725px) {
		&.wc-block-components-sidebar-layout,
		.wc-block-components-sidebar-layout {
			display: grid;
			grid-template-columns: 1fr 350px;
			gap: 20px;
		}
	}

	/* Elements */
	h2 {
		font-size: 1.1rem;
		margin-bottom: .2rem;
	}
	button,
	.wp-element-button {
		display: block;
		border-radius: var(--border-radius);
		font-weight: bold;
		&.wc-block-cart__submit-button,
		&.wc-block-components-checkout-place-order-button {
			background: var(--wc-primary);
			color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			padding-block: 15px;
			&:before {
				content: '';
				display: inline-block;
				mask: url( 'assets/payment.svg' ) no-repeat 50% 50%;
				mask-size: cover;
				-webkit-mask: url( 'assets/payment.svg' ) no-repeat 50% 50%;
				-webkit-mask-size: cover;
				height: 24px;
				aspect-ratio: 1;
				background-color: currentColor;
			}
		}
	}
	svg {
		fill: currentColor;
		width: 20px;
		&.wc-block-components-checkbox__mark {
			display: none;
		}
	}
	.wc-block-components-panel__button {
		width: 100%;
		display: flex;
		align-items: center;
		text-align: left;
		svg {
			order: 2;
		}
		span {
			display: inline-block;
			order: 1;
		}
	}

	/* Express payment */
	.wc-block-components-express-payment {
		.wc-block-components-express-payment__event-buttons {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		.wc-block-components-express-payment-continue-rule {
			text-align: center;
			text-transform: uppercase;
			font-size: var(--small-font-size);
		}
		&.wc-block-components-express-payment--checkout {
			border: var(--border-width) solid var(--wc-primary);
			padding: 12px 16px;
			border-radius: var(--border-radius);
			margin-bottom: var(--padding);
			background-color: var(--bodyBackground);
		}
	}

	/* Coupons */
	.wp-block-woocommerce-cart-order-summary-coupon-form-block,
	.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
		.wc-block-components-panel__button {
			border: var(--border-width) solid var(--wc-green);
			color: var(--wc-green);
			border-radius: var(--border-radius);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			padding-block: 10px;
			&:hover {
				background-color: var(--wc-green);
				color: #FFF;
			}
			&:before {
				content: '';
				display: inline-block;
				mask: url( 'assets/coupon.svg' ) no-repeat 50% 50%;
				mask-size: cover;
				-webkit-mask: url( 'assets/coupon.svg' ) no-repeat 50% 50%;
				-webkit-mask-size: cover;
				height: 1lh;
				aspect-ratio: 1;
				background-color: currentColor;
				margin-right: 5px;
			}
		}
		.wc-block-components-totals-coupon__form {
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 5px;
			padding-top: 10px;
			button {
				background: var(--wc-primary);
				color: #FFF;
				border: 0;
				aspect-ratio: 1;
				height: 100%;
				&:after {
					content: "+";
					display: block;
				}
				.wc-block-components-button__text {
					display: none;
				}
				&[disabled] {
					filter: grayscale(100%);
				}
			}
		}
	}

	/* Forms */
	.wc-blocks-components-select,
	.wc-block-components-text-input {
		position: relative;

		--_label-size: 1rem;
		--_top: 10px;
		--_labelColor: var(--textColorAlt);

		select,
		input {
			padding: 12px 16px;
		}
		label {
			position: absolute;
			top: var(--_top);
			left: 15px;
			right: 15px;
			font-size: var(--_label-size);
			color: var(--_labelColor);
			transition: .3s;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		&.is-active {
			--_label-size: .6rem;
			--_top: 2px;
		}
		&.has-error {
			--_labelColor: var(--wc-red);
		}
	}
	.wc-blocks-components-select {
		--_top: 2px; /* Select "always" shows a value */
		--_label-size: .6rem;
	}
	.wc-block-components-checkbox {
		padding-block: 5px;
		label {
			display: flex;
			align-items: flex-start;
			gap: 5px;
			line-height: 1.3;
		}
	}
	.wc-blocks-components-select__container {
		svg {
			display: none;
		}
	}

	/* Summmary / Sidebar */
	.wp-block-woocommerce-cart-order-summary-block,
	.wp-block-woocommerce-checkout-order-summary-block {
		border: var(--border-width) solid var(--borderColor);
		padding: 12px 16px;
		border-radius: var(--border-radius);
		margin-bottom: var(--padding);

		/* The toggle content div */
		.wc-block-components-panel {
			padding-bottom: 10px;
			margin-bottom: 10px;
		}

		/* The products */
		.wc-block-components-order-summary-item {
			.wc-block-components-product-low-stock-badge,
			.wc-block-components-order-summary-item__image,
			.wc-block-components-product-metadata__description {
				display: none;
			}
			.wc-block-components-product-details {
				list-style: none;
				padding: 0;
				margin: 0;
				font-size: var(--intermediate-font-size);
				color: var(--textColorAlt);
				li {
					&.wc-block-components-product-details__voorraad {
						.wc-block-components-product-details__name {
							display: none;
						}
					}
				}
			}
			.wc-block-components-order-summary-item__total-price {
				.price {
					font-size: 1rem;
				}
			}
		}

		/* Totals */
		.wc-block-components-totals-item {
			display: grid;
			grid-template-columns: 1fr auto;
			padding-block: 8px;
			.wc-block-components-totals-item__description {
				color: var(--textColorAlt);
				font-size: var(--intermediate-font-size);
			}
		}
		.wc-block-components-totals-footer-item-tax {
			margin: 0;
		}
	}

	/* Shipping, payment etc. */
	.wc-block-checkout__shipping-method-container,
	.wc-block-components-radio-control {
		display: grid;
		gap: 5px;
		@media screen and (min-width: 725px) {
			grid-template-columns: repeat(2, 1fr);
		}
		input[type="radio"] {
			display: none;
		}
		.wc-block-checkout__shipping-method-option,
		label {
			background-color: var(--backgroundColor);
			border: var(--border-width) solid var(--textColor);
			border-radius: var(--border-radius);
			padding: 12px 16px;
			cursor: pointer;
			.wc-block-checkout__shipping-method-option-price,
			.wc-block-components-radio-control__secondary-label {
				display: block;
				color: var(--textColorAlt);
				font-size: .8rem;
			}
			&.wc-block-checkout__shipping-method-option--selected,
			&.wc-block-components-radio-control__option-checked {
				border-color: var(--accent);
				color: var(--accent);
			}
			&:hover {
				filter: brightness(90%)
			}
			.wc-block-components-radio-control__description-group {
				font-size: .8rem;
			}
		}
		.wc-block-components-radio-control-accordion-content {
			display: none;
		}
	}

	/* Cart shipping methods */
	.wp-block-woocommerce-cart-totals-block .wc-block-components-shipping-rates-control__package {
		.wc-block-components-radio-control {
			grid-template-columns: 1fr;
		}
	}

}

/* Cart */
.woocommerce-cart-page {
	@media screen and (min-width: 725px) {
		display: grid;
		grid-template-columns: 1fr 350px;
		gap: var(--padding);
	}
}
.woocommerce-cart {
	.cart-header {
		.woocommerce-message, 
		.woocommerce-error, 
		.woocommerce-info {
			padding: 0;
			margin: 0;
			background: transparent;
		}
		.woocommerce-info:has( .showcoupon ) {
			display: none!important;
		}
		.woocommerce-notices-wrapper {
			width: min(350px, 100%);
		}
	}
	main {
		&:has( .wc-empty-cart-message ) {
			text-align: center;
			.wc-empty-cart-message {
				font-size: var(--medium-font-size);
			}
		}
	}
	table.wc-block-cart-items,
	table.shop_table {
		border: 0;
		width: 100%;

		thead,
		td.product-remove,
		.product-price,
		.product-subtotal,
		.wc-block-cart-item__total {
			display: none;
		}
		tr {
			position: relative;
		}
		td {
			padding: 0;
			margin: 0;
			border: 0;
			background: transparent!important; /* Mostly for mobile */
		}
		tr.cart_item {
			grid-template-columns: var(--image_column) 1fr var(--qty_column); /* The "old" view has an extra column */
		}
		tr.wc-block-cart-items__row {
			grid-template-columns: var(--image_column) 1fr;  /* The "new" view does not */
		}
		tr.wc-block-cart-items__row,
		tr.cart_item {
			display: grid;
			align-items: center;
			gap: var(--padding);
			padding-block: var(--padding);

			/* Desktop view */
			@media screen and (min-width: 725px) {
				--image_column: 100px;
				--qty_column: 100px;
				padding-inline: var(--padding);
				border: var(--border-width) solid var(--borderColor);
				border-radius: var(--border-radius);
				margin-bottom: var(--padding);
			}

			/* Mobile view */
			@media screen and (max-width: 724px) {
				--image_column: 75px;
				--qty_column: 0;
				border-bottom: var(--border-width) solid var(--borderColor);
			}
		}
		.wc-block-cart-item__image,
		.product-thumbnail {
			padding-inline: 0;
			a {
				display: grid;
				place-items: center;
				width: 100%;
				aspect-ratio: 1;
				background: var(--grayscale);
				border-radius: var(--border-radius);
			}
			img {
				border-radius: var(--border-radius);
				width: auto;
				height: auto;
				min-width: 100%;
				min-height: 100%;
				object-fit: contain;
			}
		}
		.wc-block-cart-item__product {
			a {
				color: var(--textColor);
				font-family: var(--headingFont);
				font-weight: bold;
			}
			.price {
				display: flex;
				font-size: var(--medium-font-size);
				padding-block: 5px;
			}
			p {
				margin: 0;
			}
			.wc-block-components-product-low-stock-badge,
			p.backorder_notification {
				font-size: var(--small-font-size);
				color: var(--wc-orange);
				@media screen and (min-width: 725px) {
					display: inline-block;
					position: absolute;
					top: 5px;
					right: 5px;
					padding: 3px 6px;
					&:before {
						content: "";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border-radius: var(--border-radius);
						background-color: currentColor;
						opacity: .05;
					}
				}
				@media screen and (max-width: 724px) {
					display: block;
				}	
			}
			.wc-block-components-product-badge.wc-block-components-sale-badge {
				display: none;

			}
			.wc-block-components-product-metadata__description {
				display: none;
				font-size: var(--small-font-size);
				padding-block: 5px;
			}
			ul.wc-block-components-product-details,
			dl.variation {
				font-size: var(--small-font-size);
				margin: 0;
				padding: 0;
				display: flex;
				gap: 5px;
				list-style: none;
				dt, dd {
					margin-left: 0;
					float: none;
				}
				dd.variation-delivery {
					color: var(--wc-green);
				}
			}
			.wc-block-cart-item__quantity {
				display: flex;
				gap: 5px;
				align-items: center;
				padding-top: 10px;

				.wc-block-components-quantity-selector {
					display: grid;
					grid-template-columns: 36px 1fr 36px;
					grid-template-areas: "minus input plus";
					align-items: center;
					width: min(100%, 150px);
					border: 1px solid var(--borderColor);
					border-radius: var(--border-radius);

					input.wc-block-components-quantity-selector__input,
					button {
						text-align: center;
						background-color: transparent;
						color: var(--textColor);
						border: 0;
						padding: 0;
						border-radius: 0;
					}
					input.wc-block-components-quantity-selector__input {
						grid-area: input;
						width: max(100%, 50px);
					}
					button {
						aspect-ratio: 1;
						&.wc-block-components-quantity-selector__button--minus {
							grid-area: minus;
						}
						&.wc-block-components-quantity-selector__button--plus {
							grid-area: plus;
						}
					}
				}
				button.wc-block-cart-item__remove-link {
					display: inline-block;
					width: auto;
					font-size: 0;
					background-color: transparent;
					color: var(--wc-red);
					border-color: transparent;
					padding: 10px;
					overflow: clip;
					&:before {
						content: '';
						display: inline-block;
						mask: url( 'assets/trash.svg' ) no-repeat 50% 50%;
						mask-size: cover;
						-webkit-mask: url( 'assets/trash.svg' ) no-repeat 50% 50%;
						-webkit-mask-size: cover;
						height: var(--small-font-size);
						aspect-ratio: 1;
						background-color: currentColor;
					}
					&:hover {
						border-color: currentColor;
					}
				}
			}
		}
	}
	.wp-block-woocommerce-cart-cross-sells-block {
		padding-block: var(--padding);
		& > div {
			display: flex;
			gap: 20px;
			margin-top: calc( var(--padding) / 2 );
			.cross-sells-product {
				flex: 1;
				max-width: 250px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: 10px;
				& > div {
					display: flex;
                	flex-direction: column;
               	 	gap: 10px;
					position: relative;
					.wc-block-components-product-rating-stars {
						position: absolute;
						top: 5px;
						left: 10px;
					}
					.wc-block-components-product-image {
						display: grid;
						place-content: center;
						aspect-ratio: 1;
						border-radius: var(--border-radius);
						padding: 10px;
						background-color: var(--grayscale);
					}
					.wc-block-components-product-name {
						font-size: 1rem;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;  
						overflow: hidden;
					}
				}
			}
			.add_to_cart_button {
				display: flex;
				align-items: center;
				gap: 5px;
				font-size: var(--small-font-size);
				width: max-content;
				&:before {
					content: '';
					display: inline-block;
					mask: url( 'assets/add-to-cart.svg' ) no-repeat 50% 50%;
					mask-size: cover;
					-webkit-mask: url( 'assets/add-to-cart.svg' ) no-repeat 50% 50%;
					-webkit-mask-size: cover;
					height: 1lh;
					aspect-ratio: 1;
					background-color: var(--wc-primary);
					filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
				}
				&.loading:before {
					mask: unset;
					background-color: transparent;
					border: 4px solid transparent;
					height: calc(1lh - 8px); /* - 4 * 2 for the border */
					border-top-color: var(--wc-primary);
					filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
					border-radius: 50%;
					animation: button-loading-spinner 1s ease infinite;
				}
			}
		}
	}
}
.woocommerce .cart-collaterals {
	.cart_totals {
		float: none;
		width: 100%;
		border: var(--border-width) solid var(--borderColor);
		border-radius: var(--border-radius);
		padding: var(--spacing);
	}
	.wp-block-woocommerce-cart-order-summary-block,
	table.shop_table {
		tr, th, td {
			display: block;
			padding: 0;
			border: 0;
			width: 100%;
			font-weight: normal;
		}
		.wc-block-components-totals-wrapper,
		tr {
			padding-block: 10px;
		}
		.wc-block-components-totals-item__label,
		th {
			font-size: var(--small-font-size);
		}
		.wp-block-woocommerce-cart-order-summary-discount-block,
		tr.cart-discount td {
			color: var(--wc-green);
		}
		.wc-block-components-totals-wrapper:empty {
			display: none;
		}
		.wc-block-components-totals-shipping {
			.wc-block-components-totals-item__description {
				display: none;
			}
			fieldset {
				margin: 0;
			}
		}
		.woocommerce-shipping-destination {
			font-size: var(--small-font-size);
			line-height: 1.3;
		}
	}
	.wc-block-components-order-summary-item {
		padding-block: 10px;
		.wc-block-components-order-summary-item__individual-prices,
		.wc-block-components-order-summary-item__image,
		.wc-block-components-product-details,
		.wc-block-components-product-metadata__description {
			display: none;
		}
	}
}

/* Mini Cart */
.wc_mini_cart {

	.woocommerce-mini-cart {
		list-style: none;
		padding: 0;
		margin: 0;

		.woocommerce-mini-cart-item {
			padding-block: var(--spacing);
			--_imagesize: 50px;
			--_gap: 10px;
			border-bottom: 1px solid var(--borderColor);
			
			.remove_from_cart_button {
				display: none;
			}
			.variation-Voorraad {
				display: none;
			}
			.variation-backorder {
				color: var(--wc-orange);
			}
			dl {
				display: flex;
				gap: 5px;
				font-size: var(--small-font-size);
				dd, p {
					margin: 0;
				}
			}
			span.quantity {
				display: block;
				margin-top: 10px;
				font-size: var(--intermediate-font-size);
			}
			img {
				max-width: var(--_imagesize);
				max-height: var(--_imagesize);
				width: auto;
				height: auto;
				border-radius: var(--border-radius);
				float: right;
				margin-left: var(--_gap);
			}
		}
	}
}

/* Checkout */
.wc-block-checkout {
	.wc-block-components-checkout-step__heading {
		display: flex;
		justify-content: space-between;
	}
	.wc-block-checkout__actions {
		position: sticky;
		bottom: 0;
		margin-top: 15px;
		padding-block: 15px;
	}
	a {
		text-decoration: underline;
	}

	/* Don't show steps */
	&:not([data-show-form-step-numbers="true"]) {
		fieldset {
			background-color: var(--grayscale);
			padding: 15px;
			border-radius: var(--border-radius);
			border: var(--border-width) solid var(--borderColor);
		}
	}

	/* Desktop only */
	@media screen and (min-width: 725px) {

		/* Show steps */
		&[data-show-form-step-numbers="true"] {
			counter-reset: section;
			--_counter-width: 25px;
			.wc-block-components-checkout-step__heading {
				margin-block: 1.5em 0.6em;
			}
			.wc-block-checkout__terms,
			.wc-block-components-checkout-step__container {
				border-left: var(--border-width) solid var(--grayscale);
				padding-left: var(--_counter-width);
			}
			.wc-block-components-checkout-step h2:before {
				display: inline-block;
				counter-increment: section;
				content: counter(section) ". ";
				width: calc( var(--_counter-width) + var(--border-width) );
			}
		}

		/* Fix a strange bug... */
		.wc-block-components-main {
			order: 1;
		}
		.wc-block-components-sidebar {
			order: 2;
		}

	}

	/* Mobile only */
	@media screen and (max-width: 724px) {
		.wp-block-woocommerce-checkout-order-summary-shipping-block,
		.wp-block-woocommerce-checkout-order-summary-subtotal-block {
			display: none;
		}
	}

	/* Blocks / Groups */
	.wc-block-checkout__form fieldset,
	#customer_details div[class*="col"] {
		width: auto;
		float: none;
		margin-bottom: var(--spacing);
		.wc-block-components-checkout-step__description {
			margin-top: 0;
			color: var(--textColorAlt);
		}
	}

	/* Account stuff */
	.wc-block-checkout__guest-checkout-notice {
		color: var(--textColorAlt);
		margin-top: 0;
	}
	.wc-block-components-password-strength {
		meter {
			width: 100%;
		}
	}

	/* Shipping or pickup */
	.components-button-group.wc-block-checkout__shipping-method-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 5px;
		button {
			.wc-block-checkout__shipping-method-option-price {
				display: block;
				font-size: var(--small-font-size);
			}
			&.wc-block-checkout__shipping-method-option--selected {
				outline: var(--border-width) solid var(--wc-primary);
			}
		}
	}

	/* Adress preview */
	.wc-block-components-address-card {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 8px;
		align-items: start;
		border: var(--border-width) solid var(--borderColor);
		padding: 12px 16px;
		border-radius: var(--border-radius);
		margin-bottom: var(--padding);

		address {
			font-style: normal;
			span {
				display: block;
			}
			.wc-block-components-address-card__address-section:first-child {
				font-weight: bold;
			}
		}
		.wc-block-components-address-card__edit {
			cursor: pointer;
			text-decoration: underline;
		}
	}

	/* The address edit styling */
	.wc-block-components-address-address-wrapper {
		.wc-block-components-address-form-wrapper {
			transition: all .3s ease-in-out;
			width: 100%;
		}
		&:not(.is-editing) {
			.wc-block-components-address-form-wrapper {
				height: 0;
				opacity: 0;
				visibility: hidden;
			}
		}
		&.is-editing {
			.wc-block-components-address-card-wrapper {
				opacity: 0;
				position: absolute;
				top: 0;
				visibility: hidden;
			}
			.wc-block-components-address-form-wrapper {
				opacity: 1;
			}
		}
	}

	/* Errors and alerts */
	.wc-block-components-validation-error {
		color: var(--wc-red);
		font-size: .8rem;
        padding-inline: var(--border-radius);
        padding-block: 3px;
		p {
			margin: 0;
		}
	}
	
	/* Product overview */
	.wc-block-components-checkout-order-summary__title-text {
		font-size: 1.1rem;
		margin-block: 0 .2rem;
		font-family: var(--headingFont);
		font-weight: bold;
	}
	.wc-block-components-order-summary-item {
		padding-block: 10px;
		.wc-block-components-product-name {
			font-weight: bold;
			font-size: 1rem;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;  
			overflow: hidden;
		}
		.wc-block-components-order-summary-item__individual-prices {
			display: none;
		}
	}

	/* Shipping address */
	.wc-block-components-address-form {
		&:not(#additional-information):not(#contact) {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
		}
		&:not(:has(.wc-block-components-address-form__address_2)) {
			.wc-block-components-address-form__address_1 {
				grid-column: span 2;
			}
		}
		.wc-block-components-address-form__email,
		.wc-block-components-address-form__company,
		.wc-block-components-address-form__phone,
		.wc-block-components-address-form__country {
			grid-column: span 2;
		}

		/* Stupid bug requiring these fields... */
		.wc-block-components-address-form__address_2-toggle {
			grid-column: span 2;
			cursor: pointer;
			position: relative;
            top: -5px;
		}
		.wc-block-components-address-form__address_2-hidden-input {
			display: none;
		}
	}

}

/* Shortcode checkout */
form.woocommerce-checkout {
	display: grid;
	gap: var(--spacing);

	@media screen and (min-width: 725px) {
		grid-template-columns: 1fr 1fr;
	}
	div[class^='col-'] {
		width: 100%!important;
		float: none!important;
		margin-bottom: var(--spacing);
	}
	#order_review_heading {
		display: none;
	}
}

/* Payment boxes on shortcode pages */
#add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment {
	border-radius: var(--border-radius);
	background: var(--grayscale);
	padding: var(--padding);
}

/* Thank you page */
ul.order_details {
	list-style: none;
	padding: 0!important;
	margin: 10px 0!important;
	display: flex;
	gap: 20px;
	li {
		margin: 0!important;
		padding: 0!important;
		border: 0!important;
	}
	&:before {
		display: none!important;
	}
}

/* Orders & Details */
.woocommerce-order {
	h2 {
		margin: 10px 0;
		font-size: 1.17em;
	}
}
.woocommerce address, 
.woocommerce .woocommerce-customer-details address {
	font-style: normal;
	border: 0;
	padding: 0;
	font-size: .9em;
	line-height: 1.2;
}

/* WC gutenberg blocks */
.wc-block-featured-product {
	.wc-block-featured-product__wrapper {
		padding: var(--padding);
	}
	.wc-block-featured-product__background-image {
		transition: .3s;
	}
	&:hover .wc-block-featured-product__background-image {
		transform: scale(1.2);
	}
	.wc-block-featured-product__description, 
	.wc-block-featured-product__link, 
	.wc-block-featured-product__price, 
	.wc-block-featured-product__title, 
	.wc-block-featured-product__variation {
		padding: 8px 0!important;
	}
}

/* Yoast */
.schema-faq {
	display: grid;
	gap: var(--padding);
	.schema-faq-section {
		border-bottom: 1px solid var(--borderColor);
	}
	.schema-faq-section:last-child {
		border-bottom: 0;
	}
	.schema-faq-question {
		font-family: var(--headingFont);
		font-size: 1.2rem;
	}
}

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

/* Only on devices != mobile */
@media screen and (min-width: 725px ) {
	.hideThisOnDesktop {
		display: none!important;
	}
}

/* Medium screens */
@media screen and (max-width: 1000px) {
	.hideThisOnTablet {
		display: none;
	}
}

/* Only on devices == mobile */
@media screen and (max-width: 724px) { 
	
	.hideThisOnMobile {
		display: none!important;
	}
	.padding .wrap, 
	.padding .is-style-wrap {
		padding: 0;
	}
	#header ul li .menu_item_icon svg {
		width: 24px;
		height: 24px;
	}
	nav.responsive-nav-menu {
		position: fixed;
		z-index: 5002;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: auto;
		width: min( 100%, 250px );
		background: var(--mobNavBackground);
		color: var(--mobNavColor);
		padding: var(--spacing);
		transition: .2s;
		&.mob-nav-position-right {
			left: auto;
			right: -100%;
			&[mobile-state="show"] {
				right: 0;
				outline: 500vh solid rgba(0, 0, 0, 0.3);
			}
		}
		&.mob-nav-position-left {
			left: -100%;
			right: auto;
			&[mobile-state="show"] {
				left: 0;
				outline: 500vh solid rgba(0, 0, 0, 0.3);
			}
		}
		&.mob-nav-position-wide {
			top: 100%;
			bottom: -100%;
			width: 100%;
			&[mobile-state="show"] {
				top: 0;
				bottom: 0;
			}
		}
		header {
			padding-block: var(--spacing);
			position: sticky;
			top: 0;
			z-index: 100;
			display: grid;
			grid-template-columns: 1fr 40px;
			gap: 10px;
			align-items: center;
			background: inherit;
			border-bottom: 1px solid var(--borderColor);
			margin-bottom: var(--spacing);
			
			div {
				line-height: 1;
				small {
					display: block;
				}
			}
			button.closebutton {
				background: var(--grayscale);
				color: var(--textColor);
				padding: 5px;
				aspect-ratio: 1;
				font-size: 0;
				mix-blend-mode: multiply;
			}
		}
		ul {
			width: min( 100%, 250px );
			margin-inline: auto;
			li {
				a {
					padding: var(--spacing);
				}
				.menu_item_icon {
					width: 0;
				}
			}
		}
	}
	.mobmenuoverlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 5001;
		display: none;
	}
	#content[class*='sidebar-show'] {
		grid-template-columns: 1fr;
		grid-template-areas: "column-1" "column-2";
		#sidebar {
			grid-area: column-2;
		}
	}

	/* Woocommerce: Single product */
	body.single-product {
		#content {
			padding-top: 0;
		}
		div.images.woocommerce-product-gallery {
			background: var(--grayscale);
			margin: 0 calc( var(--padding) * -1 );
			border-radius: 0;
			.flex-viewport,
			.flex-viewport img {
				height: 300px!important;
				width: auto!important;
			}
		}
		.product_title,
		.price {
			font-size: 1.1rem;
		}
	}

	/* Woocommerce tabs */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: none;
	}
	.woocommerce div.product .woocommerce-tabs .panel {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		margin: 0;
	}
	.woocommerce div.product .woocommerce-tabs .panel .panel-title h2 {
		display: grid;
		grid-template-columns: 1fr 25px;
		align-items: center;
		font-size: 1.2em;
		margin: 0;
	}

	/* Woocommerce: Cart */
	.cart-header {
		.inner {
			display: block;
		}
		.wp-block-button.is-style-woocommerce .wp-block-button__link {
			width: 100%;
			margin-top: var(--padding);
			height: 50px;
		}
	}

	/* Cart table */
	.woocommerce-cart {
		table.shop_table {
			td:before {
				display: none;
			}
			tr.cart_item {
				display: grid!important;
				padding: 10px;
			}
			.product-thumbnail {
				display: block!important;
			}
			.product-name {
				grid-column: span 2;
				text-align: left!important;
			}
			.product-quantity {
				grid-column: span 3;
			}
		}
	}

}

/* ====================================== WORDPRESS CORE ======================================  */
#wpadminbar {
	background-color: var(--headerBackground);
	ul:not(.ab-submenu) {
		& > li:not(#wp-admin-bar-query-monitor) {
			color: var(--headerColor);
			& > a {
				max-width: 125px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&:not(:hover) {
				* {
					color: inherit!important;
				}
			}
		}
		.ab-icon:before, .ab-item:before {
			color: inherit!important;
		}
	}
	#wp-admin-bar-wp-logo,
	#wp-admin-bar-my-account .username,
	#wp-admin-bar-search,
	#wp-admin-bar-updates,
	#wp-admin-bar-comments,
	#wp-admin-bar-woocommerce-site-visibility-badge {
		display: none!important;
	}
}

/* General */
.aligncenter {
	margin-inline: auto!important;
}

/* WP Block: Media */
.wp-block-media-text {
	gap: var(--padding);
	.wp-block-media-text__content {
		padding: 0;
	}
}

/* WP Block: Latest posts */
.wp-block-latest-posts.wp-block-latest-posts__list li {
	.wp-block-latest-posts__featured-image {
		overflow: hidden;
		border-radius: var(--border-radius);
		margin-bottom: 1rem;
		a {
			display: block;
		}
		img {
			width: 100%;
			transition: .3s;
		}
	}
	.wp-block-latest-posts__post-title {
		display: block;
		margin-bottom: .2rem;
	}
	.wp-block-latest-posts__post-author,
	.wp-block-latest-posts__post-date {
		opacity: .8;
	}
	&:hover {
		.wp-block-latest-posts__featured-image {
			img {
				transform: scale(1.2);
			}
		}
	}
}

/* WP Block: Separator */
.wp-block-separator {
	color: var(--borderColor);
	&:not(.is-style-wide):not(.is-style-dots) {
		width: 100px;
	}
	&.is-style-wide {
		width: 100%;
	}
	&.is-style-dots {
		color: var(--main);
	}
}

/* Tables */
.wp-block-table {
	&.is-style-stripes {
		tbody tr:nth-child(odd) {
			background-color: var(--grayscale);
		}
	}
}

/* WP Block: Quote */
.wp-block-quote {
	border-left: 0;
	position: relative;
	padding: 0;
	margin: 0;
	p {
		font-style: normal;
		margin: 0;
	}
	&:before {
		content: open-quote;
		position: absolute;
		font-size:  3em;
		top: -15px;
		left: 0;
		transform: translateX( -100% );
	}
	&:after {
		content: no-close-quote;
	}
	&.is-style-large:before {
		font-size: 6em;
	}
	cite {
		font-style: normal;
		opacity: .5;
		font-size:  .7em;
	}
}

/* WP Block: Image */
.is-style-rounded,
.is-style-rounded img {
	border-radius: var(--border-radius);
}
.is-style-circle,
.is-style-circle img {
	border-radius: 999px;
}

/* ====================================== CUSTOM & SIMPLE CLASSES ======================================  */
.stretch-div {
	height: 100%;
}
.grid {
	display: grid;
}
.block {
	display: block!important;
}
.inline-block {
	display: inline-block!important;
}
.hidden {
	display: none!important;
}
.float-none {
	float: none!important;
}
.gap {
	gap: var(--padding);
}
.nogap {
	gap: 0!important;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.sticky {
	position: sticky;
}
.fixed {
	position: fixed;
}
.nolineheight {
	line-height: 1;
}
.nomargin {
	margin: 0;
	> figure, > img, > svg {
		margin: 0!important;
	}
}
.nomargintop {
	margin-top: 0!important;
}
.nomarginleft {
	margin-left: 0!important;
}
.nomarginright {
	margin-right: 0!important;
}
.nomarginbottom {
	margin-bottom: 0!important;
}
.margin-block {
	margin-block: var(--padding);
}
.margin-inline {
	margin-inline: var(--padding);
}
.wp-block-columns.nogap > .wp-block-column,
.wp-block-columns.nomargin > .wp-block-column,
.wp-block-columns > .wp-block-column.nomargin {
	margin: 0!important;
}
.nopadding {
	padding: 0!important;
}
.nopaddingtop {
	padding-top: 0!important;
}
.nopaddingleft {
	padding-left: 0!important;
}
.nopaddingright {
	padding-right: 0!important;
}
.nopaddingbottom {
	padding-bottom: 0!important;
}
.padding {
	padding: var(--padding);
}
.use-spacing {
	padding: var(--spacing);
}
.padding-block {
	padding-block: var(--padding);
}
.padding-inline {
	padding-inline: var(--padding);
}
.padding-top {
	padding-top: var(--padding);
}
.padding-left {
	padding-left: var(--padding);
}
.padding-right {
	padding-right: var(--padding);
}
.padding-bottom {
	padding-bottom: var(--padding);
}
.depth-2 {
	box-shadow: var(--depth-2);
}
.depth-4 {
	box-shadow: var(--depth-4);
}
.depth-8 {
	box-shadow: var(--depth-8);
}
.depth-16 {
	box-shadow: var(--depth-16);
}
.depth-28 {
	box-shadow: var(--depth-28);
}
.depth-64 {
	box-shadow: var(--depth-64);
}
.border {
	border: var(--border-width) solid var(--borderColor);
}
.border-radius {
	border-radius: var(--border-radius);
	overflow: hidden;
}
.no-border-radius {
	border-radius: 0!important;
	img {
		border-radius: 0!important;
	}
}
.uppercase {
	text-transform: uppercase;
}
.regular {
	text-transform: initial;
}
.lowercase {
	text-transform: lowercase;
}
@media screen and (max-width: 725px) {
	.mob-uppercase {
		text-transform: uppercase;
	}
	.mob-regular {
		text-transform: initial;
	}
	.mob-lowercase {
		text-transform: lowercase;
	}
}
.align_top {
	align-content: flex-start;
	justify-content: flex-start;
	align-items: flex-start;
}
.align_middle,
.align_center {
	align-content: center;
	justify-content: center;
	align-items: center;
}
.align_bottom {
	align-content: flex-end;
	justify-content: flex-end;
	align-items: flex-end;
}
.t-left {
	text-align: left;
}
.t-center {
	text-align: center;
}
.t-right {
	text-align: right;
}
@media screen and (max-width: 725px) {
	.mob-t-left {
		text-align: left;
	}
	.mob-t-center {
		text-align: center;
	}
	.mob-t-right {
		text-align: right;
	}
}
.wide {
	width: 100%!important;
}
.text-100 {
	font-weight: 100;
}
.text-300 {
	font-weight: 300;
}
.text-400 {
	font-weight: 400;
}
.text-500 {
	font-weight: 500;
}
.text-600 {
	font-weight: 600;
}
.text-700 {
	font-weight: 700;
}
.text-800 {
	font-weight: 800;
}
.text-900 {
	font-weight: 900;
}
@media screen and (max-width: 725px) {
	.mob-text-100 {
		font-weight: 100;
	}
	.mob-text-300 {
		font-weight: 300;
	}
	.mob-text-400 {
		font-weight: 400;
	}
	.mob-text-500 {
		font-weight: 500;
	}
	.mob-text-600 {
		font-weight: 600;
	}
	.mob-text-700 {
		font-weight: 700;
	}
	.mob-text-800 {
		font-weight: 800;
	}
	.mob-text-900 {
		font-weight: 900;
	}
}
.has-black-color {
	color: #000;
}
.has-white-color {
	color: #FFF;
}
.has-cyan-bluish-gray-color {
	color: #abb8c3;
}
.has-vivid-red-color {
	color: #cf2e2e;
}
.has-vivid-orange-color {
	color: #ff6900;
}
.has-luminous-vivid-amber-color {
	color: #fcb900;
}
.has-light-green-cyan-color {
	color: #7bdcb5;
}
.has-vivid-green-cyan-color {
	color: #00d084;
}
.has-pale-cyan-blue-color {
	color: #8ed1fc;
}
.has-vivid-cyan-blue-color {
	color: #0693e3;
}
.has-vivid-cyan-purple {
	color: #9b51e0;
}
.has-primary-color {
    color: var(--main);
}
.has-primary-background-color {
    background-color: var(--main);
}
.has-secondary-color {
    color: var(--second);
}
.has-secondary-background-color {
    background-color: var(--second);
}
.has-accent-color {
    color: var(--accent);
}
.has-accent-background-color {
    background-color: var(--accent);
}
.has-border-color-color {
    color: var(--borderColor);
}
.has-border-color-background-color {
    background-color: var(--borderColor);
}
[class*="-font-size"] {
	font-size: var(--_sizing)!important;
	line-height: var(--_line-height)!important;
}
.has-small-font-size {
	--_sizing: var(--small-font-size);
	--_line-height: 1.7;
}
.has-intermediate-font-size {
	--_sizing: var(--intermediate-font-size);
	--_line-height: 1.6;
}
.has-default-font-size {
	--_sizing: var(--default-font-size);
	--_line-height: 1.5;
}
.has-medium-font-size {
	--_sizing: var(--medium-font-size);
	--_line-height: 1.4;
}
.has-large-font-size {
	--_sizing: var(--large-font-size);
	--_line-height: 1.2;
}
.has-huge-font-size,
.has-x-large-font-size {
	--_sizing: var(--x-large-font-size);
	--_line-height: 1.1;
}
.has-parent-font-size {
	font-size: inherit!important;
	line-height: inherit!important;
}
@media screen and (ma-width: 724px) {
	.mob-has-small-font-size {
		--_sizing: var(--small-font-size);
		--_line-height: 1.7;
	}
	.mob-has-intermediate-font-size {
		--_sizing: var(--intermediate-font-size);
		--_line-height: 1.6;
	}
	.mob-has-default-font-size {
		--_sizing: var(--default-font-size);
		--_line-height: 1.5;
	}
	.mob-has-medium-font-size {
		--_sizing: var(--medium-font-size);
		--_line-height: 1.4;
	}
	.mob-has-large-font-size {
		--_sizing: var(--large-font-size);
		--_line-height: 1.2;
	}
	.mob-has-huge-font-size,
	.mob-has-x-large-font-size {
		--_sizing: var(--x-large-font-size);
		--_line-height: 1.1;
	}
}

/* User preferences  */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms!important;
		animation-iteration-count: 1!important;
		transition-duration: .01ms!important;
		scroll-behavior: auto!important;
	}
}

/* HTML fallbacks */
[hidden] {
	display: none!important;
}
[disabled] {
	opacity: .5;
}
[content-state="collapsed"] {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

/* Keyframes */
@keyframes parallax {
	to { transform: translateY( calc( var(--parallax-speed) * 200px ) ); }
}
@keyframes showsub {
	from { margin-top: -20px; }
	to { margin-top: 0px; }
}
@keyframes button-loading-spinner {
	to { transform: rotate(1turn); }
}