/*

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

    Author: Qreative-Web
    Author URI: https://web.wijzijnqreative.nl

	Text Domain: basetheme
	Domain Path: /languages/

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

*/

:root {
	
	/* Fix a few naming inconsistencies */
	--primary: var(--main);
	--secondary: var(--second);
	--primary-contrast: var(--main-contrast);
	--secondary-contrast: var(--second-contrast);

	/* Borders */
	--border-width: 2px;
	--border-style: solid;
	--border-color: var(--borderColor); /* Because settings stores it as borderColor but border-color is more consisten for a variable name */
	--border-preset: var(--border-width, 2px) var(--border-style, solid) var(--border-color);

	/* 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);
	--gap: var(--wp--style--block-gap);
	--wp--style--block-gap: var(--wp--preset--spacing--30);

	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;

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

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

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

	/* Stuff */
	/* --content-width--small: 750px; */
	--content-width--small: 70ch;

	/* Forms */
	--form-background: canvas;
	--form-color-text: fieldtext;
	--form-padding-inline: 1rem;
	--form-padding-block: 1rem;
    --form-border-color: var(--border-color);
	--placeholder-color: var(--textColorAlt);

}
* {
	box-sizing: border-box;
	accent-color: var(--main);
}
body {
	margin: 0;
	font-family: var(--text-font,'system-ui');
	background-color: var(--backgroundColor);
	color: var(--textColor);
	interpolate-size: allow-keywords;
	/* color-scheme: light dark; */
	color-scheme: light;
	text-rendering: optimizeSpeed;
	scroll-behavior: smooth;

	/* Temp overwrite */
	--wc-form-color-background: var(--form-background)!important;
    --wc-form-border-color: var( --form-border-color)!important;
    --wc-form-color-text: var( --form-color-text)!important;
    --wc-form-border-radius: var(--border-radius)!important;
    --wc-form-border-width: var(--border-width, 2px)!important;

	/* Accessability: Motion */
	--transition-duration: 100ms;
	--transition-timing-function: ease-in-out;

	@media ( prefers-reduced-motion: no-preference ) {
		--transition-duration: 300ms;
		--transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
		transition-behavior: allow-discrete;
	}

	/* Accessability: Contrast */
	@media ( prefers-contrast: more ) {

		--border-color: var(--textColor);
		--form-border-color: var(--textColor);
		--placeholder-color: var(--textColor);

		--textColorAlt: var(--textColor);

	}

}

/* ====================================== BASICS ======================================  */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font);
	margin-top: 0;
}
img, svg {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}
mark {
	background: unset;
	color: unset;
}
::selection {
    background-color: var(--main);
    color: var(--main-contrast);
}
.wrap, 
.is-style-wrap {
	--wrapper-width: var(--content-width);
}
.is-style-small-wrap {
	--wrapper-width: var(--content-width--small);
}
.wrap, 
.is-style-wrap,
.is-style-small-wrap {
	width: min( 100%, var(--wrapper-width) );
	margin-inline: auto;
	position: relative;
	padding-inline: var(--padding);
	container-name: wrapper;
	container-type: inline-size;
}
a {
	color: inherit;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
		text-underline-offset: var(--border-width, 2px);
		text-decoration-thickness: var(--border-width, 2px);
	}
	&[target='_blank']:not(.wp-block-button__link):after {
		content: " ↗";
	}
}
figure {
	margin: 0;
}
pre {
	background: #282C34;
	color: #FFF;
	padding: var(--padding);
    overflow-y: auto;
    border-radius: var(--border-radius);
}
address {
	font-style: normal;
}

/* ====================================== SCREEN READERS ======================================  */
.screen-reader-shortcut {
    position: absolute;
    top: -1000em;
    left: 6px;
    height: auto;
    width: auto;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    background: #FFF;
    color: #000;
    z-index: 100000;
    line-height: normal;
	&:focus {
		top: -25px;
	}
}

/* ====================================== FORMS ======================================  */
::placeholder {
	color: var(--placeholder-color);
}
fieldset,
input, 
select, 
textarea,
button
{
	position: relative;
	background-color: var(--form-background);
	color: var(--form-color-text);
	border: var(--border-width, 2px) solid var(--form-border-color);
	border-radius: var(--border-radius);
	padding-inline: var(--form-padding-inline);
	padding-block: var(--form-padding-block);
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	&:focus-visible {
		outline: 4px solid hsl( from var( --textColor ) h s l / 0.4 );
		outline-offset: 2px;
	}
	&:focus,
	&:hover {
		border-color: currentColor;
	}
	&:-webkit-autofill {
		-webkit-box-shadow: 0 0 0px 1000px canvas inset;
	}
}
input[type="checkbox"], 
input[type="radio"] 
{
	width: auto;
}
button {
	font-weight: bold;
	background-color: var(--main);
	border-color: var(--main);
	cursor: pointer;
}
select {
	appearance: none;
	background-image: var(--chevron);
	background-position: right 1rem top 50%;
    background-repeat: no-repeat;
    background-size: auto 1lh;
}
#content .wc-blocks-components-select,
#content .wc-block-components-text-input,
#content :is( #increase-specifity-hack, .form-row )
{
	&:has( input, select, textarea ):has( > label[for]:not(.screen-reader-text) ) {
		position: relative;
		isolation: isolate;
		padding: 0;
		--label-focus-size: .7rem;

		&:before, &:after {
			display: unset;
			content: unset;
		}
		label {
			padding-inline: var(--form-padding-inline);
			padding-block: var(--form-padding-block);
			position: absolute;
			inset: 0;
			z-index: 3;
			color: var(--placeholder-color);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			pointer-events: none;

			transition-property: font-size, padding-block;
			transition-duration: var(--transition-duration);
			transition-timing-function: var(--transition-timing-function); 
		}
		input, select, textarea, .input-text {
			padding-block: calc( var(--form-padding-block) + var(--label-focus-size) - .25rem ) calc( var(--form-padding-block) - var(--label-focus-size) + .25rem);
			padding-inline: var(--form-padding-inline);
		}
		&:has( :focus, :placeholder-shown, :valid ) {
			label {
				font-size: var(--label-focus-size);
				padding-block: calc( var(--form-padding-block) - var(--label-focus-size) + .25rem ) calc( var(--form-padding-block) + var(--label-focus-size) - .25rem );
			}
		}
		[id*='description'], [class*='description'] {
			font-style: normal;
			font-size: .8em;
			margin-top: .5em;
			display: flex;
			align-items: center;
			gap: .25rem;
			em { 
				font-style: inherit; 
			}
			&:before {
				content: '';
				display: inline-block;
				height: 1em;
				aspect-ratio: 1;
				background-color: currentColor;
				mask: var(--info) var(--mask-settings);
				-webkit-mask: var(--info) var(--mask-settings);
			}
		}
	}
}

/* ====================================== BUTTONS ======================================  */
.wp-block-button,
.wc-block-components-button,
button
{
	position: relative;
	isolation: isolate;
	font-family: var(--button-font, var(--heading-font, var(--text-font, 'system-ui')));
	font-weight: 600;

	/* Variables */
	--_button-color: var(--main);
	--_background-color: var(--_button-color);
	--_border-color: var(--_button-color);
	--_color: var(--main-contrast);
	@supports ( color: contrast-color(red) ) {
		--_color: contrast-color(var(--_background-color));
	}

	&.use-spacing {
		padding: 0; /* The spacing classes will add padding to the parent div too */
	}
	a, button, .wc-block-components-button__text {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: center;

		position: relative;
		line-height: 1.1;
		text-box: trim-both cap alphabetic;

		padding: calc( var(--spacing) / 1.5 ) var(--spacing);
		border-radius: var(--border-radius);

		transition: all var(--transition-duration) ease-in-out;
		outline: 2px solid transparent;
		outline-offset: -2px;

		&:focus-visible {
			outline: 2px solid currentColor;
		}
		&:hover {
			outline: 2px solid rgb( from currentColor r g b / .1 );
			text-decoration: none;
		}
		&.has-text-align-left {
			justify-content: left;
			&:after {
				margin-left: auto;
			}
		}
		&.has-text-align-center {
			justify-content: space-between;
		}
		&.has-text-align-right {
			justify-content: right;
			flex-direction: row-reverse;
			&:after {
				margin-right: auto;
			}
		}
		&:not(.has-background,button) {
			background: var(--_background-color);
		}
		&:not(.has-text-color,button) {
			color: var(--_color);
		}
		&:not(.has-border-color,button) {
			border-width: var(--border-width, 2px);
			border-style: solid;
			border-color: var(--_border-color);
		}
	}
	img {
		height: 1lh;
		width: auto;
		scale: 1.3;
	}
	&[class*="has-icon-"] {
		&:before {
			all: unset;
		}
		.wp-block-button__link {
			&:after {
				content: '';
				display: inline-block;
				height: 1lh;
				aspect-ratio: 1;
				background-color: currentColor;
				mask: var(--show-icon) var(--mask-settings);
				-webkit-mask: var(--show-icon) var(--mask-settings);
				animation: var(--icon-animation);
			}
		}
		&.icon-position-left {
			.wp-block-button__link {
				flex-direction: row-reverse;
			}
		}
	}
	&:not([class*="-spacing"]) {
		--spacing: var(--padding);
	}
	&[class*="alternative"] {
		--_button-color: var(--second);
		--_color: var(--second-contrast);
	}
	&[class*="accent"] {
		--_button-color: var(--accent);
		--_color: var(--accent-contrast);

				--_background-color: linear-gradient( 110deg, rgba(0,0,0,0.0), rgba(255,255,255,0.3) ) var(--accent);

	}
	&[class*="grey"] {
		--_button-color: var(--grayscale);
		--_color: var(--textColor);
		@media ( prefers-contrast: more ) {
			--_border-color: currentColor;
		}
	}
	&[class*="outline"] {
		--_border-color: currentColor;
		&:not(:hover) {
			--_background-color: canvas;
			--_color: var(--_button-color);
		}
	}
	&[class*="minimal"] {
		--_button-color: transparent;
		--_color: var( --textColor );
		text-decoration: underline;
		text-decoration-color: currentColor;
		text-decoration-thickness: var(--border-width, 2px);
		text-decoration-skip-ink: none;
		text-underline-offset: var(--border-width, 2px);
	}
	&[class*="active"] {
		--_border-color: var(--main);
	}
}

.woocommerce .wp-block-button:has(.add_to_cart_button) {
	width: 100%;
}
.woocommerce .wp-block-button .add_to_cart_button {
	padding: 1rem;
	line-height: 1.1;
	text-box: trim-both cap alphabetic;
	&.single_add_to_cart_button {
		background: linear-gradient( 110deg, rgba(0,0,0,0.0), rgba(0,0,0,0.3) ) var(--wc-primary);
		border-color: var(--wc-primary);
		color: var(--wc-primary-contrast);
	}
	&:hover, &:focus-visible {
		outline: 2px solid var(--textColor);
	}
	&.loading .bi {
		--show-icon: var(--loading); 
		animation: button-loading-spinner 1s ease infinite;
	}
	&.added {
		background-color: rgb( from currentColor r g b / .05 );
		border-color: var(--wc-green);
		color: var(--wc-green);
		& .bi {
			--show-icon: var(--checkmark); 
			transform: scale(1.5);
		}
	}
}


/* ====================================== 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(--content-width) + 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(--border-color);
		border-right: 1px solid var(--border-color);
	}
}
.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(--top-background);
	color: var(--top-color);
	padding: calc( var(--spacing) / 4 ) 0;
	position: relative;
	z-index: 10;
}
header {
	position: relative;
	
	&#header {
		background: var(--headerBackground);
		color: var(--headerColor);
		inset: 0;
		bottom: auto;
		z-index: 900;
		anchor-name: --site_header;
	}
	.inner {
		display: flex;
		gap: min( var(--spacing), .5rem );
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-block: var(--spacing);
	}
	.site-info {
		width: max-content;
	}
	.header-widget {
		flex-grow: 1;
	}
	.search-form {
		flex-grow: 1;
		@media screen and (max-width: 724px) { /* This should prolly be a container query */
			order: 9;
		}	
		input {
			padding: var(--spacing)!important;
			box-shadow: none!important;
		}
	}
	.header-inline-nav {
		min-width: 252px;  /* A really cheap way to work around the container query set on nav elements */
		flex-grow: 1;
	}
	.toolbar-menu {
		text-align: right;
		--spacing: var(--padding);
		ul {
			container-type: normal;
			height: var(--ideal-touch-size);
			--nav_item_background: transparent;
			--nav_item_color: var(--headerColor);
		}
	}

}
@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;
		}
		.toolbar-menu, 
		.header-inline-nav {
			min-width: 0;
			text-align: inherit;
		}
		.toolbar-menu {
			ul.show_labels {
				container-type: inline-size;
			}
			ul:not(.show_labels) {
				text-align: center;
			}
		}
	}
}
form.search-form {
	position: relative;
	input[type="search"] {
		padding-right: 4rem;
		box-shadow: var(--depth-8);
	}
	input[type="submit"] {
		position: absolute;
		cursor: pointer;
		width: var(--ideal-touch-size);
		inset: 3px;
		left: auto;
		background: #FFF var(--search) no-repeat center center;
		color: transparent;
		border: 0;
		&:hover {
			background-color: var(--grayscale);
		}
	}
}
#inlinesearch {
	position: relative;
	isolation: isolate;
	background: var(--submenu_background);
	color: var(--submenu_color);
	border-radius: var(--searchbox_border-radius);
	border: var(--border-width, 2px) solid var(--border-color);
	outline: 0px solid rgba( 0, 0, 0, 0.1 );
	transition-property: outline;
	transition-duration: var(--transition-duration);
	transition-timing-function: ease-in-out;

	&:focus-within {
		outline: 500vh solid rgba( 0, 0, 0, 0.3 );
		z-index: 1000;
		box-shadow: var(--depth-16);
		button {
			filter: brightness(90%)
		}
	}
	&:has(.data-is-shown):focus-within {
		#search-results-popup {
			display: block;
			content-visibility: initial;
		}
	}
	input, button {
		all: unset;
		box-sizing: border-box;
		padding-block: .5rem;
		padding-inline: 1rem;
		position: relative;
		z-index: 2;
	}
	input {
		width: 100%;
	}
	button {
		position: absolute;
		inset: 0;
		left: auto;
		border-radius: inherit;
		background-color: inherit;
		cursor: pointer;
		transition-property: filter, scale;
		&:hover {
			filter: contrast(2);
			transform: scale(1.05);
		}
		&:active {
			filter: contrast(0.5);
			transform: scale(0.9);
		}
	}
	#search-results-popup {
		display: none;
		content-visibility: hidden;
		position: absolute;
		z-index: 1;
		inset-inline: calc( var(--border-width, 2px) * -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, 2px) * -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, 2px) solid var(--border-color);
			&: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, 2px);
				}
			}
			.single-search-results__meta {
				color: var(--textColorAlt);
			}
		}
	}
}
#subheader {
	inset: var(--gap);
	top: auto;
	bottom: -100%;
	border-radius: var(--border-radius);
	z-index: 100;
	content-visibility: auto;
	opacity: 0;

	.title {
		font-weight: 600;
		margin-bottom: .67em;
	}
	@media screen and (min-width: 725px) {
		background-color: var(--grayscale);
		padding: var(--spacing);
		box-shadow: var(--depth-8);
	}
	@media screen and (max-width: 725px) {
		& div, & a {
			width: 100%;
		}
		.wp-block-button__link {
			border-radius: 100vh;
		}
	}

	@supports( scroll-timeline: --test ) {
		animation-name: fadeInBottom;
		animation-timeline: scroll();
		animation-timing-function: ease-in-out;
		animation-duration: 500ms;
		animation-fill-mode: forwards;
		animation-range: 50vh 75vh;
	}

}

/* Carousels, testing */
@supports ( scroll-snap-type: x mandatory ) {
	.has-scroll-buttons {
		ul {
			white-space: nowrap;
			overflow: auto;

			overflow-x: scroll;
  			scroll-snap-type: x mandatory;
			anchor-name: --myCarousel;
			--button_size: 30px;
			scrollbar-width: none;

			/* &::scroll-button(*) {
				color: var(--textColor);
				cursor: pointer;
				position: absolute;
				position-anchor: --myCarousel;
				bottom: calc( anchor(bottom) + 3px );
				width: var(--button_size);
				border: 1px solid currentColor;
				background-color: var(--border-color);
				border-radius: 100vh;
				aspect-ratio: 1;
			}
			&::scroll-button(*):disabled {
				opacity: 0;
				cursor: unset;
			}
			&::scroll-button(left) {
				content: "←";
				right: calc( anchor(left) - var(--button_size) );
			}

			&::scroll-button(right) {
				content: "→";
				left: calc( anchor(right) - var(--button_size) );
			} */

			li {
				scroll-snap-align: left;
			}

		}
	}
}

/* Navigation  */
/* SVG icons */
svg.btt-icon {
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linecap: linejoin;
	fill: none;
	> * {
		stroke-width: 3;
	}
}
svg.account-icon {
	border-radius: 24px;
}

/* Hamburger Icon */
#primary-navigation-toggle {
	svg line {
		transition-property: transform;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		transform-origin: 12px 12px;
	}
	&[aria-expanded="true"] {
		svg line:first-child {
			transform: translateY(4px) rotate(45deg);
		}
		svg line:last-child {
			transform: translateY(-5px) rotate(-45deg);
		}
	}
}

/* The menu */
nav {
	&#primary-navigation {
		background-color: var(--navbar_background);
		color: var(--navbar_color);
		padding-block: var(--spacing);
	}
	&#sub-categories {
		/* Nothing yet */
	}
	
	/* Pagination */
	&.pagination {
		text-align: center;
	}

	/* Sepperated from the header */
	&.seperate-nav ul {
		width: min( var(--content-width), 100% );
		margin-inline: auto;
	}

	/* General styling */
	& ul {
		list-style: none outside;
		padding: 0;
		margin: 0;
		container-name: navigation-list;
		container-type: inline-size;
	}

	/* Inline nav */
	&.inline-nav ul {
		white-space: nowrap;
		overflow: auto;
	}

	/* Items */
	& li {
		display: inline-flex;
		/* align-items: center; Won't work with submenu's */
		flex-wrap: wrap;
		position: relative;
		margin: 2px;
		padding: 0;

		background-color: var(--nav_item_background, transparent);
		color: var(--nav_item_color, inherit);
		border-radius: var(--border-radius);
		
		transition: all 300ms;
	}

	& li[class*="current-"] {
		background-color: var(--nav_item_background__current);
		color: var(--nav_item_color__current);
	}

	& li:hover {
		background-color: var(--nav_item_background__hover);
		color: var(--nav_item_color__hover);
	}

	& .nav-menu-link:not( ul ) { /* The paginate_links_output filter adds the nav-menu-link class to the parent ul too... */
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		box-sizing: content-box;
		padding: calc( var(--spacing) / 1.5 ) var(--spacing);
		cursor: pointer;
		&:has( .menu-item-description ) {
			padding-top: calc( var(--spacing) - 0.4em );
			padding-bottom: calc( var(--spacing) - 0.4em );
		}
		&:hover {
			text-decoration: none;
		}

	}

	.menu-item-description {
		flex-basis: 100%;
		font-weight: normal;
		line-height: 1;
	}

	.menu-item-icon {
		width: 1lh;
		height: 1lh;
		&.menu-icon--with-label {
			transform: translateX(-25%);
		}
	}

	& .toggle-submenu {
		all: revert;
		display: grid;
		place-content: center;
		background: transparent;
		color: inherit;
		border: 0;
		padding: 0;
		padding-right: calc( var(--spacing) / 2 );
		font-size: 1.1em;
		& .bi {
			transform: rotate(0);
			transition: transform var(--transition-duration) var(--transition-timing-function);
		}
	}

	& li[open] > .toggle-submenu .bi {
		transform: rotate(180deg);
	}

	/* Layout styles */
	&.nav-style-plain-links li {
		background-color: unset;
		& a:hover {
			text-decoration: underline;
		}
	}
	&.nav-style-buttons-pills li {
		border-radius: 100vw;
		& a {
			padding-inline: calc( var(--spacing) * 2 );
		}
	}
	&.nav-style-underlined li {
		background-color: unset;
		& a:after {
			content: "";
			display: block;
			position: absolute;
			height: 4px;
			top: auto;
			inset-inline: 25%;
			bottom: 0;
			border-radius: var(--border-radius);
			background-color: var(--nav_item_background, transparent);
			transition: inset-inline var(--transition-duration) ease-in-out;
		}
		&[class*="current-"] a:after {
			background-color: var(--nav_item_background__current);
			inset-inline: var(--spacing);
		}
		&:hover a:after {
			background-color: var(--nav_item_background__hover);
			inset-inline: var(--spacing);
		}
	}

	/* ul.menu {

	}
	ul.sub-menu {

	} */


	/* Submenu's */
	& ul.sub-menu {
		--nav_item_background: var(--submenu_background);
		--nav_item_color: var(--submenu_color);

		display: none;
		background: var(--submenu_background);
		color: var(--submenu_color);
		font-size: var(--wp--preset--font-size--intermediate);

		padding: 0;

		top: 100%;
		left: 0;

		&:focus-within {
			display: block;
		}
		& li {
			display: flex;
			margin: .25rem;
		}
		& a {
			flex: 1;
		}
		& button.toggle-submenu .bi {
			transform: rotate(-90deg);
		}
	}
}

/* The entire nav will be rewritten at some time.. so take this crappy code for now :) */
@media screen and (max-width: 725px) {
nav#primary-navigation {

	position: fixed;
	z-index: 5002;
	bottom: 0;
	overflow: auto;
	width: min( 100%, 250px );
	background: var(--mobile_nav_background);
	color: var(--mobile_nav_color);
	padding: 0;
	height: 100%;

	transition-property: left, right;
	transition-duration: var(--transition-duration);

	/* temp */
	top: calc( 70px + var( --wp-admin--admin-bar--height ) ); /* Maybe anchor this? */
	@supports ( position-anchor: --site_header ) {
		position-anchor: --site_header;
		top: anchor( bottom );
	}

	&[mobile-position="right"] {
		right: -100%;
		&[open] {
			right: 0;
		}
	}
	&[mobile-position="left"] {
		left: -100%;
		&[open] {
			left: 0;
		}
	}
	&[mobile-position="wide"] {
		transition: top .3s, bottom .3s;
		bottom: -100%;
		width: 100%;
		&:not([open]) {
			top: 100%;
		}
		&[open] {
			bottom: 0;
		}
	}

	ul {
		width: min( 100%, 250px );
		margin-inline: auto;
		&:has( [open] ) > li:not( [open] ) {
			opacity: .3;
		}	
		li {
			position: relative;
			display: flex;
			background-color: var(--mobile_nav_background)!important;
			color: var(--mobile_nav_color)!important;
			border-radius: 0;
			border-bottom: 1px solid var(--border-color);
			.sub-menu {
				display: block;
				block-size: 0;
				content-visibility: hidden;
				@media ( prefers-reduced-motion: no-preference ) {
					transition-property: block-size, content-visibility;
					transition-duration: var(--transition-duration);
					transition-behavior: allow-discrete;
				}
			}
			&[open] > .sub-menu {
				block-size: auto;
				content-visibility: auto;
			}
			a {
				padding: var(--padding);
				position: relative;
				flex: 1;
			}
		}
		.menu-item-icon {
			display: none;
			content-visibility: hidden;
		}
	}

} /* End nas.responsive-menu */
} /* End media query, told you the current code sucks right? */

/* Temporary seperate while we migrate */
.disabled {

	/* Hover and Active states */
	nav [class*="current"] > *, 
	nav [class*="active"] > *, 
	nav ul li > *[class*="current"],
	nav ul li:hover > * {
		background-color: var(--_active_menu_background);
		color: var(--_active_menu_color);
		text-decoration: none;
	}

	/* Underlined nav */
	nav.nav-style-underlined ul li > *:after {
		content: "";
		display: block;
		position: absolute;
		bottom: -3px;
		height: 3px;
		left: 45%;
		right: 45%;
		background-color: transparent;
		border-radius: 10px;
		transition: left .3s, right .3s, background-color .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-color: currentColor;
		left: 25%;
		right: 25%;
	}
	nav.nav-style-underlined ul li ul li > *:after {
		display: none;
		content-visibility: hidden;
	}

	/* 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:not(.has-big-sub):has( > ul ) {
	--_display-type: block;
	--_sub_padding: 0;
	--_width: 250px;
}
nav ul li.has-big-sub:has( > ul ) {
	--_display-type: grid;
	--_sub_padding: 1.25rem;
	--_width: 100%;
	position: initial;
}
nav ul li[open] {
	&:after {
		transform: rotate(90deg)
	}
	& > .sub-menu {
		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) {

	/* .sub-menu {
		transition-property: display opacity;
		transition-duration: var(--transition-duration);
		transition-timing-function: var(--transition-timing-function);

		@media ( prefers-reduced-motion: no-preference ) {
			--dialog_translate_effect: 0 50px;
		}

		opacity: 0;
		translate: var(--dialog_translate_effect, 0 0 );
		anchor-name: --sub-menu;

	}
	.menu-item-has-children:hover > .sub-menu {
		display: block;
		opacity: 1;
		translate: 0 0;
		@starting-style {
			opacity: 0;
			translate: var(--dialog_translate_effect, 0 0 );
		}
	} */

	.menu-item-has-children:hover > .sub-menu {
		display: block;
	}

	nav ul li ul.sub-menu {
		container-type: initial;
		position: absolute;
		z-index: 1000;
		width: var(--_width);
		border-radius: var(--border-radius);
		border: var(--border-width, 2px) solid var(--border-color);
		box-shadow: var(--depth-2);

		/* 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  */
#banner {
	background: var(--banner-background);
	color: var(--banner-color);
	padding: 0;
	position: relative;
	align-content: center;
	justify-content: center;
	align-items: center;

	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;
		}
	}
	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;
	}
	&.is-style-wrap {
		overflow: hidden;
		div[class*="inner"] {
			padding-inline: var(--spacing);
		}
		@media screen and (min-width: 725px) { 
			border-radius: var(--border-radius);
		}
	}

}
#breadcrumbsbar {
	display: flex;
	gap: var(--spacing);
	align-items: center;
	padding: var(--spacing);
	.back_button a {
		border: var(--border-width, 2px) solid currentColor;
		border-radius: var(--border-radius);
		padding: .5em;
		display: flex;
		align-items: center;
		width: max-content;
		font-weight: 600;
		line-height: 1;
	}
}
ol.breadcrumbs {
	list-style: none outside;
	padding: 0;
	margin: 0;
	display: flex;
	column-gap: var(--wp--style--block-gap);
	flex-wrap: wrap;
	.breadcrumbs_divider {
		opacity: .3;
	}
}

/* Invisble buttons (make entire div clickable */
div:has( > .wp-block-buttons .is-style-invis-cover-button ) {
	position: relative;
	&:hover {
		text-decoration: underline;
	}
	.is-style-invis-cover-button {
		position: absolute;
		inset: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
	}
}

/* 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;
		}
	}
}

/* Content  */
#content {
	--column-1-width: 1fr;
	--column-2-width: 1fr;
	--sidebar-width: 250px;

	position: relative;
	z-index: 10;
	padding-block: var(--spacing);
	content-visibility: auto;
	
	@media screen and (min-width: 725px) { 
		&:not( .is-style-small-wrap ) {
			&[class*="sidebar-show-"]:has(.widget) {
				display: grid;
				grid-template-areas: "column-1 column-2";
				grid-template-columns: var(--column-1-width) var(--column-2-width);
				gap: var(--padding);
			}
			&.sidebar-show-left {
				--column-1-width: var(--sidebar-width);
				#sidebar {
					grid-area: column-1;
				}
			}
			&.sidebar-show-right {
				--column-2-width: var(--sidebar-width);
				#sidebar {
					grid-area: column-2;
				}
			}
		}
	}

	ul:has( li.icon-position-left ) {
		list-style: none outside;
		padding-inline-start: 0;
	}

}
main :where( a ) {
	color: var(--linkColor);
}
main :where( .page-title ) {
	margin-top: 0;
}
.widget {

	/* Lists */
	& ul {
		list-style: none outside;
		padding:  0;
		margin: 0;

		& li {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: .5rem 0;
		}
		& a {
			display: block;
			flex: 1;
			padding: 0.5rem 0;
			margin: -0.5rem 0;
			&:hover {
				text-decoration: underline;
			}
		}
		& [class*="current"] > a {
			font-weight: bold;
		}

		/* Page list */
		&.wp-block-page-list li a:after {
			display: inline-block;
			content: "";
			mask: var(--chevron) var(--mask-settings);
			-webkit-mask: var(--chevron) var(--mask-settings);
			background-color: currentColor;
			aspect-ratio: 1;
			width: 1lh;
			float: right;
			rotate: 90deg;
			padding-inline: 0.2rem;
		}

		/* Sub-menu's */
		& li.has-child {
			& li {
				padding-left: 1lh;
			}
			& > a:after {
				rotate: 180deg;
				transition: rotate .3s;
			}
			&[class*="current"] > a:after, &:hover > a:after {
				rotate: 0deg;
			}
		}
		& ul[class*="submenu"] {
			block-size: 0;
			overflow: hidden;
			margin-block: 0;
			font-size: smaller;
			width: 100%;
			@media ( prefers-reduced-motion: no-preference ) {
				transition-behavior: allow-discrete;
				transition-property: block-size, content-visibility, margin-block;
				transition-duration: var(--transition-duration);
			}
		}
		& li[class*="current"] > ul[class*="submenu"], & li:hover > ul[class*="submenu"] {
			block-size: auto;
			margin-block: .5rem;
		}

	}

}
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);
	
	.inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.copy_siteinfo:has(.show_logo) {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: center;
	}

}
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, 2px) solid var(--border-color);
	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;
			content-visibility: hidden;
		}
	}
	
	.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, 2px) solid var(--border-color);
	width: 100%;
}
.next-and-previous-posts-columns {
	padding-top: 50px;
}
.archive-introduction,
.woocommerce-products-header {
	margin-bottom: var(--spacing);
	margin-trim: block;
	.term-description__bottom {
		margin-top: var(--spacing);
	}
	#read_more_term_description {
		display: none;
	}
	label[for="read_more_term_description"] {
		cursor: pointer;
		color: var(--linkColor);
		span {
			display: flex;
			align-items: center;
		}
		span:after {
			content: '';
			display: block;
			height: 1rem;
			aspect-ratio: 1;
			background-color: currentColor;
			mask: var(--chevron_down) var(--mask-settings);
			-webkit-mask: var(--chevron_down) var(--mask-settings);
		}
		.read_less:after {
			transform: rotate(180deg);
		}
	}
	&:has( #read_more_term_description:checked ) {
		.read_more {
			display: none;
			content-visibility: hidden;
		}
	}
	&:not( :has( #read_more_term_description:checked ) ) {
		.term-description {
			display: -webkit-box;
			line-clamp: 3;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;  
			overflow: hidden;
		}
		.read_less {
			display: none;
			content-visibility: hidden;
		}
	}
}
.archive-grid {
	grid-template-rows: repeat( 5, auto );
	--gap: var(--spacing);
	.blogitem {
		position: relative;
		background-color: var(--blog_backgroundColor);
		border-radius: var(--border-radius);
		transition-duration: var(--transition-duration);
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		gap: 1rem;
		padding: var(--spacing);
		outline: 2px solid transparent;
		outline-offset: 4px;
		small {
			color: var(--main);
			text-transform: uppercase;
		}
		.inline-post-img {
			width: 100%;
			position: relative;
			isolation: isolate;
			overflow: hidden;
			box-shadow: var(--depth-8);
			border-radius: inherit;
			a {
				display: block;
				aspect-ratio: 16 / 9;
				overflow: hidden;
				border-radius: inherit;

			}
			.blogitem__label,
			.blogitem-author {
				position: absolute;
				left: .5rem;
				z-index: 10;
				font-size: var(--wp--preset--font-size--small);
				border-radius: inherit;
				width: max-content;
				padding: .5em .6em;
				transition-property: left, opacity;
				transition-duration: var(--transition-duration);
				transition-timing-function: var(--transition-timing-function);
				border: 2px solid currentColor;
				p {
					text-box: trim-both cap alphabetic;
				}
			}
			.blogitem__label {
				top: .5rem;
				background-color: var(--main);
				color: var(--main-contrast);
			}
			.blogitem-author {
				bottom: .5rem;
				background-color: var(--second);
				color: var(--second-contrast);
				display: flex;
				flex-direction: column;
				gap: .5em;
			}
			img {
				min-width: 100%;
				min-height: 100%;
				width: auto;
				height: auto;
				object-fit: cover;
				object-position: 50% 50%; 
				transition-property: scale;
				transition-duration: var(--transition-duration);
				transition-timing-function: var(--transition-timing-function);
			}
		}
		.blogitem-author {
			color: var(--textColorAlt);
		}
		&.item-aside {
			background-color: var(--second);
		}
		&:hover {
			border-color: var(--main);
			outline-color: currentColor;
			a {
				text-decoration: underline;
			}
			img {
				scale: 1.1;
			}
			.wp-block-button__link {
				--_border-color: currentColor;
			}
			.blogitem__label,
			.blogitem-author {
				left: -100%;
				opacity: 0;
			}
		}
		

	}
	@media screen and (min-width: 725px) {
		&.has-1-columns .blogitem,
		.blogitem.latest-post {
			grid-column: span var(--_columns);
			grid-template-columns: 40% 1fr;
			align-items: center;
			padding: 1rem;
			margin-left: -1rem;
			.inline-post-img {
				grid-row: 1 / 4; 
			}
			> *:not(.inline-post-img) {
				grid-column: 2;
			}
		}
	}
}

/* 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;
	}
}

/* Loading */
.is-loading {
	background-color: var(--border-color);
	border-radius: var(--border-radius);
	display: grid;
	place-content: center;
}
.loading-icon {
	animation: button-loading-spinner 1s ease infinite;
}

/* Modals */
button.close-button {
	width: auto;
	min-width: var(--ideal-touch-size);
	aspect-ratio: 1;
	border-radius: 100px;
	border: 0;
	padding: 0;
	background-color: transparent;
	color: var(--textColor);
	&:hover {
		background-color: var(--grayscale);
	}
	@media ( prefers-contrast: more ) { 
		border: 2px solid currentColor;
	}
}
dialog {
    background: var(--contentBackground);
	color: var(--textColor);
	border: var(--border-preset);
	padding: var(--spacing);
	isolation: isolate;

	/* Default style */
	&:not([data-type]) {
		border-radius: var(--border-radius);
    	width: min( 100%, 600px );
	}

	/* Sidebar style */
	&[data-type='sidebar'] {
    	width: min( 100%, 400px );
		inset: 0;
		left: auto;
		height: 100%;
		max-height: unset;
		margin: 0;

		@media screen and (max-width: 725px) {
			width: 100%;
			border: 0;
		}
	}

	/* Sidebar style */
	&[data-type='fullscreen'] {

		border: 0;
		padding: 0;
		box-shadow: none;
		width: 100%;
		height: 100%;
		background: transparent;

		&::backdrop {
			/* background-color: var(--contentBackground); */
		}

		&[open] {
			display: grid;
			place-content: center;
		}

		& header {
			position: absolute;
            top: 0;
            left: 0;
            right: 0;
			margin: 0;
			padding: var(--spacing);
			background: transparent;
		}

		& button.close-button {
    		background: var(--contentBackground);
		}

	}

	& header {
		position: sticky;
		inset: calc( var(--spacing) * -1 );
		bottom: auto;
		z-index: 50;
		background: inherit;
		
		padding-block: var(--spacing);
		margin-top: calc( var(--spacing) * -1 );
		margin-bottom: var(--spacing);

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

		& h3 {
			font-family: var(--text-font);
			font-weight: normal;
			margin: 0;
		}
	}
	
	& section {
		padding-block: 2em;
		border-top: var(--border-preset);
	}
	
}

/* Handling animations seperately for now, there's a few issues that I wamt to solve first */
dialog {
	transition-behavior: allow-discrete;
	transition-property: opacity, transform;
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-timing-function);
	opacity: 0;
	transform: scale(0.8);

}
dialog[open] {
	opacity: 1;
	transform: scale( 1 );
	@starting-style {
		opacity: 0;
		transform: scale(0.8);
	}
}

/* Summary, Details */
details {
	overflow: hidden;
	&.is-style-grey {
		background-color: var(--border-color);
		border-radius: var(--border-radius);
		padding: var(--padding );
	}
	&.is-style-striped {
		padding-block: var(--padding );
		border-bottom: var(--border-width, 2px) solid var(--border-color);
		&:first-of-type {
			border-top: var(--border-width, 2px) solid var(--border-color);
		}
		summary {
			font-weight: bold;
		}
	}
	summary {
		cursor: pointer;
		list-style-type: none;
		position: relative;
		padding: inherit;
		::marker,
		::-webkit-details-marker {
			display: none;
			content-visibility: hidden;
			font-size: 0;
		}
		&:after {
			display: block;
			content: "";
			mask: var(--chevron_down) var(--mask-settings);
			-webkit-mask: var(--chevron_down) var(--mask-settings);
			background-color: currentColor;
			aspect-ratio: 1;
			width: 1lh;
			float: right;
			rotate: 0deg;
			transition: rotate .3s;
		}
	}
	&[open] {
		summary {
			&:after {
				rotate: 180deg;
			}
		}
	}
	&::details-content {
		block-size: 0;
		@media ( prefers-reduced-motion: no-preference ) {
			transition-behavior: allow-discrete;
			transition-property: block-size, content-visibility;
			transition-duration: var(--transition-duration);
		}
	}
	&[open]::details-content {
		block-size: auto;
	}

}

/* Messages */
.notice-info,
.notice-succes,
.notice-error,
.woocommerce-info, 
.woocommerce-message, 
.woocommerce-error,
.wc-block-components-notice-banner 
{
	all: revert;
	list-style: none outside;
	padding: .5rem 1rem;
	margin-block: .2rem;
	border-radius: var(--border-radius);
	text-box: trim-start cap alphabetic;

	a {
		text-decoration: underline;
	}
	.wc-block-components-button.wc-block-components-notice-banner__dismiss {
		width: 30px;
		padding: 0;
		border: 0;
		color: currentColor;
		margin-left: auto;
	}
	&[class*="info"] {
		background-color: rgb( from currentColor r g b / .05 );
		color: var(--wc-primary);

		@media ( prefers-contrast: more ) {
			background-color: var(--wc-primary);
			color: var(--wc-primary-contrast);
		}
	}
	&[class*="success"], &[class*="message"] {
		background-color: rgb( from currentColor r g b / .05 );
		color: var(--wc-green);

		@media ( prefers-contrast: more ) {
			background-color: var(--wc-green);
			color: var(--wc-green-contrast);
		}
	}	
	&[class*="error"] {
		background-color: rgb( from currentColor r g b / .05 );
		color: var(--wc-red);

		@media ( prefers-contrast: more ) {
			background-color: var(--wc-red);
			color: var(--wc-red-contrast);
		}
	}
	&::before,
	&::after,
	svg 
	{
		display: none;
		content-visibility: hidden;
	}
}
.wc-block-components-notice-banner__content:has( a.button ) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

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

/* Add specifity to overwrite their default styling */
body.woocommerce {

	/* Items in cart badge (header) */
	:has( > .items-in-cart-counter ) {
		position: relative;
	}
	.items-in-cart-counter {
		display: block;
		align-self: center;
		position: relative;
		right: 1em;
		font-family: monospace;

		@media ( prefers-contrast: no-preference ) {
			background: linear-gradient( 110deg, rgba(0,0,0,0.0), rgba(0,0,0,0.1) ) var(--wc-highlight);
			color: var(--wc-highlight-text);
			outline: 4px solid rgb( from var(--wc-highlight) r g b / .3 );
			font-size: .9em;
			padding: .4em .5em;
			border-radius: 100vh;
		}
	}
	.items-in-cart-counter.items-0 {
		display: none;
		content-visibility: hidden;
	}

	/* Ordering */
	.woocommerce-ordering {
		float: unset;
	}

	/* Loop */
	ul.products[class*="columns-"] li.product 
	{
		width: unset;
		float: unset;
		margin: unset;
		clear: unset;
	}

	/* Images */
	& .wc-block-components-product-image,
	& .btt-image-wrapper--loop
	{
		--aspect-ratio: 8 / 9;
		--image-background: var(--grayscale);

		position: relative;
		border-radius: var(--border-radius);
		background-color: var(--image-background);
		overflow: clip;

		& a {
			display: block;
			padding: .5rem;
		}
		& img {
			width: 100%;
			height: 100%;
			object-fit: scale-down;
			aspect-ratio: var(--aspect-ratio);
			object-position: center;
			margin: 0;
			padding: 0;
		}
		/* Dunno what this is.. */
		& .wc-block-components-product-image__inner-container {
			display: none;
		}
	}

	/* Buttons */
	& .wc-block-components-button {

	}
	& .wc-block-components-product-button {

	}

	/* Prices */
	& .wc-block-components-product-price,
	:is( #increase-specifity-hack, .price ) 
	{
		margin: unset;
		font-weight: inherit;
		font-size: inherit;
		line-height: 1;
		color: var(--textColor);

		del {
			opacity: 1;
			color: unset;
			margin-right: .5em;
		}
		ins {
			text-decoration: unset;
			color: var(--wc-red);
			font-weight: bolder;
		}
	}

	/* Stock and Shipping */
	& .btt-stock-wrapper {
		padding: var(--spacing);
		border-radius: var(--border-radius);
		background-color: rgb( from currentColor r g b / .05 );
		border: var(--border-preset);
		border-color: currentColor;
		&:has(.in-stock) {
			color: var(--wc-green);
		}
		&:has(.available-on-backorder) {
			color: var(--wc-orange);
		}
		&:has(.out-of-stock) {
			color: var(--wc-red);
		}
		& p {
			margin: 0;
		}
		& p.delivery {
			font-weight: 600;
		}
		& p.stock {
			color: inherit;
			opacity: 0.6;
		}
		& .bi {
			float: left;
		}
	}

	/* Password input */
	:is( #increase-specifity-hack, .password-input ) {
		all: unset;
		input {
			padding-right: var(--ideal-touch-size);
		}
		button.show-password-input {
			all: unset;
			appearance: none;
			width: var(--ideal-touch-size);
			position: absolute;
			inset: 5px;
			left: auto;
			&:before {
				background-repeat: no-repeat;
				background-size: 50%;
				background-position: center center;
				background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');
				content: "";
				display: block;
				height: 100%;
				width: 100%;
			}
			&.display-password:before {
				background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
			}
		}
	}

	/* Single product page */
	[id*="product-"].product.type-product {
		border-width: 0;
		box-shadow: none;
	}
	#product-title {
		padding-block: var(--spacing);
		& h1 {
			margin: 0;
		}
		.woocommerce-product-rating {
			display: flex;
			align-items: center;
			gap: var(--gap);
			margin: .25rem 0 0 0;
			&:before, &:after {
				display: none;
			}
			& a {
				color: var(--textColor);
			}	
		}
	}
	#product-fold {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);

		& div.image-wrapper,
		& div.summary 
		{
			flex: 1;
			min-width: 300px;
		}
		& div.summary {
			all: unset;

			display: flex;
			flex-direction: column;
			gap: var(--spacing);

		}

		.price-wrapper {
			font-size: 1.5em;
		}

		& label {
    		display: block;
			font-weight: 700;
			margin-block-end: 0.67em;
		}
		
	.woocommerce-product-details__short-description {
		font-weight: 300;
	}
	
	.bulkdiscount .wp-block-buttons {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr) );
		gap: var(--border-width, 2px);

		background-color: var(--form-background);
		color: var(--form-color-text);
		border: var(--border-width, 2px) solid var(--form-border-color);
		border-radius: 100vh;
		padding: .25em;

		.wp-block-button .wp-block-button__link {
			height: 3lh;
			border-radius: 100vh;
		}
	}

	.product-family__single {
		border-top: 1px solid var(--border-color);
		padding-block: var(--spacing);

		.wp-block-buttons {
			flex-wrap: nowrap;
			flex-direction: row;
			overflow: auto;
			.wp-block-button {
				max-width: 19vw;
			}
			.wp-block-button__link {
				font-weight: normal;
				font-size: var(--wp--preset--font-size--intermediate);
			}
		}
		.product-families-property {
			font-weight: 600;
		}
		.product-families-price {
			opacity: .6;
		}
		.no-stock img {
			opacity: .5;
		}

		.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-afbeeldingen {
			--_width: 50px;
			a {
				flex-direction: column;
				text-align: center;
			}
			img {
				height: var(--_width);
			}
			.product-families-product-attributes {
				width: calc( var(--_width) + var(--padding) );
				margin-top: var(--gap);
			}
		}

		/* Display as buttons */
		&.family-style-knoppen {
			@media screen and (max-width: 750px) {
				--_width: 50px;
				.wp-block-buttons {
					flex-wrap: nowrap;
					overflow: auto;
				}
			}
		}

	}

		/* Product gallery */
		/* div .woocommerce-product-gallery > div .woocommerce-product-gallery__wrapper > div .woocommerce-product-gallery__image > a > img */
		.woocommerce-product-gallery,
		:is( #increase-specifity-hack, div.images ) {

			isolation: isolate;

			background-color: var(--grayscale);
			border-radius: var(--border-radius);
			padding: var(--spacing);
		
			width: unset;
			float: unset;

			--arrow_positioning: calc( var(--spacing) * -1.5 );

			@media screen and (min-width: 725px) {
				--arrow_positioning: 0px;
				--arrow_opacity: 0;
			}
			&:hover {
				--arrow_opacity: 1;
				--arrow_positioning: var(--padding);
			}

			a, img {
				border-radius: var(--border-radius);
				overflow: clip;
			}

			/* Gallery wrapper */
			.woocommerce-product-gallery__wrapper {
				display: flex;
				margin-bottom: var(--gap);
			}

			/* Main image */
			.woocommerce-product-gallery__image {
				width: 100%;
				height: min( 75svw, 500px );
				anchor-name: --gallery_image;
				& a {
					display: grid;
					place-content: center;
					height: 100%;
					width: 100%;
				}
				& img {
					width: auto;
					height: auto;
					max-width: 100%;
					max-height: 100%;
					margin: auto;
				}
			}

			/* Navigation arrows */
			.flex-direction-nav {
				list-style: none outside;
				padding: 0;
				margin: 0;
				li {
					position: absolute;
					position-anchor: --gallery_image;
					top: calc( anchor(top) + 50% );
					transform: translateY(-50%);
					z-index: 50;
					opacity: var(--arrow_opacity, 1);

					transition-property: opacity, left, right, scale;
					transition-duration: var(--transition-duration);
					transition-timing-function: var(--transition-timing-function);

					a {
						display: block;
						width: var(--ideal-touch-size);
						font-size: 0;
						aspect-ratio: 1;
						border-radius: 100px;
						background: #FFF var(--_background-image) no-repeat center center;
						border: 1px solid var(--border-color);
						box-shadow: var(--depth-2);
					}
					&:hover {
						scale: 1.1;
					}
				}
				.flex-nav-prev {
					left: calc( anchor(left) + var(--arrow_positioning,0) );
					--_background-image: var(--chevron_left);
				}
				.flex-nav-next {
					right: calc( anchor(right) + var(--arrow_positioning,0) );
					--_background-image: var(--chevron_right);
				}

			}

			/* Navigation thumbnails */
			.flex-control-nav {
				all: unset;
				list-style: none outside;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				overflow: auto;
				gap: var(--gap);
				min-height: 3rem;

				li {
					width: 3rem;
					border-radius: var(--border-radius);
					position: relative;

					&:not(:has(img)) {
						background-color: #FFF;
						border: 1px solid var(--border-color);
						box-shadow: var(--depth-2);
						border-radius: 100px;
						height: .75rem;
						a {
							display: block;
							color: transparent;
							position: absolute;
							left: 0;
							right: 0;
							aspect-ratio: 1;
							transform: translateY(-50%);
						}
					}
				}
				:has(.flex-active) {
					@media ( prefers-contrast: no-preference ) {
						background-color: var(--wc-highlight);
						border-color: var(--wc-highlight);
					}
					@media ( prefers-contrast: more ) {
						background-color: var(--textColor );
						border-color: var(--textColor );
					}
				}
				img {
					border: 1px solid var(--grayscale);
					box-shadow: var(--depth-2);
				}
			}

		}

	}

}
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;
}
.product_usp {
	border-radius: var(--border-radius);
    padding: calc( var(--padding) / 2 );
    margin-block: calc( var(--padding) / 2 );
	&._shipping_class_description {
		background: var(--grayscale);
		--_icon: url( 'assets/truck.svg' ) no-repeat 50% 50%;
	}
	&._sale_price_dates_to {
		background: #F0F6FF;
		color: #3578E5;
		--_icon: url( 'assets/calendar.svg' ) no-repeat 50% 50%;
	}
	p {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 0;
		margin: 0;
		&:before {
			display: inline-block;
			content: "";
			mask: var(--_icon);
			mask-size: cover;
			-webkit-mask: var(--_icon);
			-webkit-mask-size: cover;
			background-color: currentColor;
			aspect-ratio: 1;
			width: 1lh;
		}
	}
}
#mollie-applepayDirect-button {
	margin-top: .5rem;
}
.woocommerce .product form.cart {

	/* Wrapper around the quantity input and the add to cart button */
	.cart-button-wrapper {
		&[data-hasquantity='true'] {
			display: flex;
			gap: .5rem;
		}
		&[data-hasquantity='false'] {
			.quantity, 
			#quantity-block {
				display: none;
			}
		}
	}

	/* 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(--wp--preset--font-size--medium);
						aspect-ratio: 1;
						background-color: currentColor;
					}
				}
			}
			&.woocommerce-grouped-product-list-item__price {
				grid-column: 2;
				display: flex;
				gap: 5px;
				.stock {
					margin-block: 0;
					flex-direction: row;
					gap: 5px;
				}			
			}
		}
	}
}

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

/* 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;
	content-visibility: hidden;
}
#review_form input, #review_form textarea, #review_form select {
	width: 100%;
}

/* Sidebar filters */
.wc-block-product-filters {

	/* --wc-product-filter-checkbox-list-option-element-selected: var(--main);
	--wc-product-filter-checkbox-list-option-element: var(--border-color);
	--wc-product-filter-checkbox-list-option-element-border: var(--border-color);
	--wc-product-filter-block-spacing: var(--wp--preset--spacing--50); */

	.wc-block-product-filters__open-overlay,
	.wc-block-product-filters__close-overlay 
	{
		display: none;
		content-visibility: hidden;
	}

	div[data-block] {
		margin-bottom: var(--gap);
		& h3 {
			&:after {
				content: "+";
			}
		}
	}

	h3 {
		margin-top:0;
		margin-bottom:0.625rem;
	}
	fieldset {
		margin: 0;
		padding: 0;
		border: 0;
	}
	label {
		display: flex;
		padding: .5rem 0;
	}
	input[type=checkbox].wc-block-product-filter-checkbox-list__input {
		appearance: checkbox;
		color: var(--main);
		accent-color: currentColor;
	}
	.wc-block-product-filter-checkbox-list__input-wrapper *
	{
		all: revert;
	}
	.wc-block-product-filter-checkbox-list__mark,
	.wc-block-product-filter-checkbox-list__input-wrapper:before {
		display: none;
		content-visibility: hidden;
	}
	.wc-block-product-filter-checkbox-list__show-more {
        display: flex;
        align-items: center;
		gap: .65em;
		cursor: pointer;
        padding: .5rem 0;
        font-size: var(--wp--preset--font-size--small);
        font-weight: bold;
        color: var(--linkColor);
		border-radius: var(--border-radius);
		text-decoration: none;
		&:before {
			content: '';
			display: inline-block;
			height: 1rem;
			aspect-ratio: 1;
			background-color: currentColor;
			mask: var(--chevron) var(--mask-settings);
			-webkit-mask: var(--chevron) var(--mask-settings);
			rotate: 180deg;
		}
		&:hover {
			background-color: var(--grayscale);
		}
	}
	.wc-block-product-filter-removable-chips__items {
		.wc-block-product-filter-removable-chips__item {
			border: 0;
			border-radius: var(--border-radius);
			background-color: var(--border-color);
			font-size: var(--wp--preset--font-size--small);
			line-height: 1.1;
			padding: .5rem;
			.wc-block-product-filter-removable-chips__label {
				width: min-content;
			}
			.wc-block-product-filter-removable-chips__remove {
				width: auto;
			}
		}
	}
}

/* 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;
			grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); /* Temp fix */
		}
	}
	li {
		padding-inline: 15px;
		padding-block: 15px;
		background-color: var(--backgroundColor);
		border-radius: var(--border-radius);
		border: var(--border-width, 2px) solid var(--border-color);

		.wc-block-review-list-item__meta,
		.meta {
			margin-block: 0;
		}
		.rating-stars,
		.wc-block-review-list-item__rating__stars {
			overflow: hidden;
			margin-block: 0;
			float: right;
		}
		.woocommerce-review__author,
		.wc-block-review-list-item__author {
			display: block;
			font-weight: bold;
		}
		.woocommerce-review__dash {
			display: none;
			content-visibility: hidden;
		}
		.woocommerce-review__published-date,
		.wc-block-review-list-item__published-date {
			display: block;
			color: var(--textColorAlt);
			font-size: var(--wp--preset--font-size--small);
		}
		.description,
		.wc-block-review-list-item__text {
			font-size: 1.1em;
			padding-top: 5px;
			margin-top: 5px;
			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);
	.woocommerce-result-count {
		margin: 0;
		color: var(--textColorAlt);
	}
	@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;
}

/* Product loop */
.disabled .wp-block-woocommerce-cart-cross-sells-block > div,
.disabled .wc-block-product-template[class*="columns-"] {

	gap: var(--padding);
	--_grid-spacing: 0;

	.cross-sells-product,
	li.wc-block-product {

		&:not(:has(.wp-block-button.wc-block-components-product-button.has-custom-width, .wp-block-cart-cross-sells-product__product-add-to-cart)) {
			display: grid;
			grid-template-columns: 1fr auto;
			--_grid-spacing: var(--padding);
		}

		.wc-block-components-product-image {
			aspect-ratio: 9 / 10;
			background-color: var(--grayscale);
			border-radius: var(--border-radius);
			overflow: clip;
			grid-column: span 2;
			a {
				height: 100%;
				width: 100%;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: contain!important;
				transition: 0.3s transform;
			}
		}

		&:hover {
			.wc-block-components-product-image {
				img {
					transform: scale(1.1);
				}
			}
		}

		.wc-block-components-product-title,
		.wp-block-post-title {
			font-size: inherit;
			font-weight: normal;
			line-height: 1.2;
			grid-column: span 2;
			margin-bottom: var(--_grid-spacing);
		}

		.wc-block-components-product-rating-stars {
			display: none;
			content-visibility: hidden;
		}

		.wp-block-woocommerce-product-price {
			margin: 0;
			align-self: center;
			.wc-block-components-product-price {
				font-size: inherit;
				font-family: var(--heading-font);
			}
		}

		.wp-block-button.wc-block-components-product-button {
			&:not(.has-custom-width) {
				.wp-block-button__link {
					aspect-ratio: 1;
					padding: 0.7rem;
					span {
						display: none;
						content-visibility: hidden;
					}
				}
			}
		}

	}
}

/* Because WooCommerce hates us; some custom changes to the cross sells block on cart pages */
.wp-block-woocommerce-cart-cross-sells-block > div {
	display: flex;
	margin-top: var(--padding);

	.cross-sells-product {
		flex: 1;
		max-width: 250px;

		.wc-block-components-product-title,
		.wc-block-components-product-price {
			display: block;
			margin-top: var(--padding);
		}
		.wp-block-cart-cross-sells-product__product-add-to-cart {
			.add_to_cart_button {
				--_background: var(--wc-primary);
				display: flex;
				align-items: center;
				gap: 5px;
				aspect-ratio: unset!important;
				margin-top: var(--padding);
				width: 100%;
				&: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: 24px;
					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;
				}
			}
		}
	}
}

/* Product loop */
.wc-block-grid__products-old,
.woocommerce ul.products {

	list-style: none outside;
	padding: 0;
	margin: 0;

	display: grid;
	gap: var(--gap);
	row-gap: 1em;
	grid-template-rows: repeat( 4, auto );
	/* grid-template-columns: repeat( var(--_columns), 1fr ); */

	--_percentage_width: calc( 100% / var(--_columns) );
	grid-template-columns: repeat( auto-fill, minmax( max( 150px, calc( var(--_percentage_width) - var(--gap) ) ), 1fr ) );
	
	&::after, &::before {
		all: unset;
	}
	li {
		/* background-color: var(--product_backgroundColor); */
		gap: .5rem;
		position: relative;
		padding: var(--spacing);
		border: 0px solid var(--border-color);
		border-radius: var(--border-radius);

		transition-property: border-color, filter, box-shadow;
		transition-duration: .2s;

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

		container-name: product_loop_box;
		container-type: inline-size;

		a {
			color: inherit;
		}

		/* For some child elements */
		--flex-align: start;
		
		&.t-center, /* Because tbe customizer has to be updated to the new class name */
		&.has-text-align-center {
			--flex-align: center;
		}
		&.t-right, 
		&.has-text-align-right {
			--flex-align: end;
		}

		&.border-style-border {
			border-width: var(--border-width, 2px);
		}
		&.border-style-border-bottom {
			border-bottom-width: var(--border-width, 2px);
			border-radius: 0;
		}

		/* Wide products */
		&.list-has-1-columns {
			grid-template-columns: 125px 1fr auto auto;
			grid-template-rows: auto;
			align-items: center;
		}
		a:not(.wp-block-button__link) {
			display: block;
			height: 100%;
		}
		.wc-block-grid__product-title,
		h2
		{
			font-size: inherit;
			font-weight: normal;
			font-family: var(--heading-font);
			line-height: 1.2;
			&:has(del) {
				display: flex;
				align-items: top;
				justify-content: var(--flex-align);
				gap: .25rem;
			}
		}
		.btt_rating_wrapper {
			display: flex;
			align-items: center;
			justify-content: var(--flex-align);
			gap: .25rem;
			margin-top: .25em;

			@media screen and (max-width: 724px) {
				.rating-stars {
					margin-block: 0;
					height: 1.5ch;
				}
			}
			.rating-counter {
				color: var(--textColorAlt);
				font-size: small;
			}
		}
		.wc-block-grid__product-add-to-cart,
		.btt-loop-button-wrapper {
			margin-top: 1em;
			display: inline-flex;

		}
		&:hover {
			border-color: var(--main);
			filter: brightness(95%);
		}
	}

}

/* General product stuff */
.woocommerce {

	.products .product .product-badges {
		position: absolute;
		top: var(--gap);
		left: var(--gap);
		z-index: 10;
		flex-direction: column;
		font-size: var(--wp--preset--font-size--small);
	}

	.product-badges {
		display: flex;
		gap: .25rem;

		.product-badge {
			flex-grow: 0;
			width: max-content;
			isolation: isolate;
			padding: .5em;
			border-radius: calc( var(--border-radius) / 2 );
			font-weight: 700;
			text-transform: lowercase;

			background-color: var(--main);
			color: var(--main-contrast);

			&.product-badge__aanrader {
				background-color: var(--second);
				color: var(--second-contrast);
			}
			&.product-badge__new {
				background-color: var(--wc-green);
				color: var(--wc-green-contrast);
			}
			&.product-badge__sale {
				background-color: var(--accent);
				color: var(--accent-contrast);
			}
			&.product-badge__custom {
				background-color: var(--grayscale);
				color: var(--grayscale-contrast);
			}

		}
	}

}
.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;
}

/* 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 tabs: General */
.woocommerce-page {
	--wc-tab-columns: 1fr;
	--tabs-flow: row;
	--row-gap: 0;
	--column-gap: var(--spacing);
	--width: 70ch;

	.woocommerce-tabs {
		all: unset;
		--spacing: var(--padding);
		position: relative;
		display: grid;
		grid-template-columns: var(--wc-tab-columns);
		gap: 0;
		width: min( var(--width), 100% );
		margin-inline: auto;
	}
	ul.tabs {
		list-style: none;
		display: flex;
		flex-direction: var(--tabs-flow);
		column-gap: var(--column-gap);
		row-gap: var(--row-gap);
		padding: calc( var(--spacing) / 2 ) 0;
		margin: 0;
		margin-bottom: 1lh;
		white-space: nowrap;
		overflow: auto;
		background-color: var(--backgroundColor);
		position: sticky;
		top: 0;
		z-index: 10;
		@media screen and (max-width: 724px) {
			display: none;
			content-visibility: hidden;
		}
		li {
			background: transparent;
			color: inherit;
			text-decoration: underline transparent var(--border-width, 2px);
			text-underline-offset: .5em;
			a {
				display: block;
				color: inherit;
			}
			&:hover {
				text-decoration-color: var(--border-color);
			}
			&.active {
				font-weight: bold;
				text-decoration-color: var(--main);
			}
		}
	}
	.panel {
		content-visibility: auto;
		@media screen and (max-width: 724px) {
			display: block!important;
			content-visibility: visible;
			padding-block: var(--spacing);
			border-bottom: var(--border-width, 2px) solid var(--border-color);
		}
	}
	figure.additional-product-information {
		margin-block-start: 1em;
	}

	/* Vertical tabs */
	&.wc-product-layout-v-tabbed {
		--tabs-flow: column;
		--row-gap: var(--spacing);
		--column-gap: 0;
		@media screen and (min-width: 725px) {
			--width: calc( 70ch + 250px );
			--wc-tab-columns: 250px 1fr;
		}
	}

	/* Sections */
	&.wc-product-layout-sections {
		ul.tabs {
			display: none!important;
			content-visibility: hidden;
		}
		.panel {
			display: block!important;
			content-visibility: visible;
			padding-block: var(--spacing);
			border-bottom: var(--border-width, 2px) solid var(--border-color);
		}
	}

	/* Accordions */
	&.wc-product-layout-accordion {
		ul.tabs {
			display: none!important;
			content-visibility: hidden;
		}
		.panel {
			display: block!important;
			content-visibility: visible;
			details {
				border-top: 0px;
				padding-block: 0;
				summary {
					padding-block: var(--spacing);
				}
			}
		}
	}


}

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

	&:before,
	&:after {
		display: none!important;
		content-visibility: hidden;
	}
	> div[class*="col"] {
		float: none!important;
		width: 100%!important;
	}
}

/* Account page */
.woocommerce-account {

	/* Login form */
	&.wc-account-loginform {
		.woocommerce-form-login__rememberme	
		{
			display: none;
			content-visibility: hidden;
		}
		#header {
			position: unset;
		}
		main {
			a {
				color: var(--wc-primary);
			}
		}
		button[name="login"] {
			background-color: var(--wc-primary);
			border-color: var(--wc-primary);
			color: var(--wc-primary-contrast);
		}
		button[name="register"] {
			background-color: var(--main);
			border-color: var(--main);
			color: var(--main-contrast);
		}
		.lost_password {
			text-align: center;
		}
	}

	/* Reset */
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content {
		width: unset;
		float: unset;
	}

	/* Navigation */
	.woocommerce-MyAccount-navigation {
		overflow: auto;
		background-color: var(--grayscale);
		color: var(--textColor);
		border-radius: var(--border-radius);
		box-shadow: var(--depth-2);
		position: sticky;
		top: 90px;
		z-index: 50;
		ul {
			white-space: nowrap;
			padding: .25em .5em;
		}
		li {
			font-weight: 500;
            font-size: var(--wp--preset--font-size--intermediate);
			&:hover a,
			&.is-active a {
				background-color: canvas;
				
				@media ( prefers-contrast: more ) {
					outline: var(--border-width, 2px) solid currentColor;
				}
			}
			&.woocommerce-MyAccount-navigation-link--dashboard {
				--_icon: var(--home);
			}
			&.woocommerce-MyAccount-navigation-link--customer-logout {
				--_icon: var(--logout);
			}
			a {
				display: flex;
				align-items: center;
				gap: .25rem;
				padding: .5em 1em;
				@container style(--_icon) {
					padding-left: 2em;
					&:before {
						content: '';
						display: inline-block;
						position: absolute;
						left: .7em;
						mask: var(--_icon) var(--mask-settings);
						-webkit-mask: var(--_icon) var(--mask-settings);
						height: 1em;
						aspect-ratio: 1;
						background-color: currentColor;
					}
				}
			}
		}
		a, a:hover {
			color: inherit;
			text-decoration: none;
		}
	}

	/* General content */
	.woocommerce-MyAccount-content {
		#account-dashboard {
			h2 {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			p:first-of-type {
				display: none;
				content-visibility: hidden;
			}
			p {
				font-size: var(--wp--preset--font-size--intermediate);
			}
			a {
				text-decoration: none;
				color: inherit;
				pointer-events: none;
			}
		}
		section, 
		form 
		{
			margin-block: var(--padding);
			padding-block: var(--padding);
			header, > h2 {
				margin-bottom: 1rem;
			}
		}
		form.edit-account,
		.woocommerce-address-fields__field-wrapper 
		{
			display: grid;
			gap: var(--padding);
			grid-template-columns: 1fr 1fr;
			> p {
				margin: 0;
			}

			.form-row-wide,
			fieldset,
			p:has([type="submit"])
			{
				grid-column: span 2;
			}
			.select2 {
				display: none;
				content-visibility: hidden;
			}
		}
		p:has([type="submit"]) {
			position: sticky;
			bottom: .25rem;
			button {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&:after {
					content: '';
					display: inline-block;
					mask: var(--checkmark) var(--mask-settings);
					-webkit-mask: var(--checkmark) var(--mask-settings);
					height: 1lh;
					aspect-ratio: 1;
					background-color: currentColor;
				}
			}
		}
		.woocommerce-orders-table {
			all: unset;
			thead {
				display: none;
				content-visibility: hidden;
			}
			tbody {
				display: grid;
				gap: var(--padding);
				grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr) );

				tr {
					display: grid;
					padding: var(--padding);
					border-radius: var(--border-radius);
					border: var(--border-width, 2px) solid var(--border-color);
					.woocommerce-orders-table__cell-order-number {
						font-size: 1.17rem;
						font-family: var(--heading-font);
					}
					.woocommerce-orders-table__cell-order-date {
						color: var(--textColorAlt);
						font-size: var(--wp--preset--font-size--small);
					}
					.woocommerce-orders-table__cell-order-status {
						display: none;
						content-visibility: hidden;
					}
					.woocommerce-orders-table__cell-order-actions {
						display: flex;
						gap: .25rem;
						margin-top: .5rem;
						padding-top: .5rem;
					}
					a.button {
						display: inline-flex;
						flex: 1;
						align-items: center;
						justify-content: space-between;
						gap: .25em;
						background-color: var(--grayscale);
						color: var(--textColor);
						text-decoration: none;
						text-align: center;          
                        font-size: var(--wp--preset--font-size--intermediate);
                        font-weight: 600;
                        padding: .5em 1em;
						border-radius: var(--border-radius);
						text-box: trim-both cap alphabetic;
						border: var(--border-width, 2px) solid var(--border-color);
						&.view {
							--_icon: var(--view);
						}
						&.invoice {
							--_icon: var(--document);
						}
						@container style(--_icon) {
							&:after {
								content: '';
								display: inline-block;
								mask: var(--_icon) var(--mask-settings);
								-webkit-mask: var(--_icon) var(--mask-settings);
								height: 1lh;
								aspect-ratio: 1;
								background-color: currentColor;
							}
						}
					}
				}
			}
		}
		/* #account-orders {
			overflow: auto;
			.woocommerce-orders-table {
				display: block;
				width: max-content;
				tbody {
					display: flex;
					flex-wrap: nowrap;
					tr {
						flex-basis: 300px;
						flex-grow: 1;
						flex-shrink: 0;
					}
				}
			}
		} */
		.woocommerce-Address {
			padding: var(--padding);
			border-radius: var(--border-radius);
			border: var(--border-width, 2px) solid var(--border-color);

			header {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			h2 {
				font-size: 1.17em;
			}
			a.edit {
				display: grid;
				place-content: center;
				width: 2rem;
				font-size: 0;
				aspect-ratio: 1;
				border-radius: 100px;
				background: #FFF var(--edit) no-repeat center center;
				border: 1px solid var(--border-color);
				background-size: 50%;
				box-shadow: var(--depth-2);
			}
		}
	}
}
ul.wc-item-meta {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	li {
		display: flex;
		gap: 5px;
		p {
			margin: 0;
		}
	}
}

/* Coupons block */
[class*="-coupon-form-block"] {
	.wc-block-components-panel__button {
		display: flex;
		align-items: center;
		gap: .25rem;
		cursor: pointer;
		color: var(--wc-green);
		&:before {
			content: '';
			display: inline-block;
			mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%231CA970%22%3E%3Cpath%20d%3D%22M160-280v80h640v-80H160Zm0-440h88q-5-9-6.5-19t-1.5-21q0-50%2035-85t85-35q30%200%2055.5%2015.5T460-826l20%2026%2020-26q18-24%2044-39t56-15q50%200%2085%2035t35%2085q0%2011-1.5%2021t-6.5%2019h88q33%200%2056.5%2023.5T880-640v440q0%2033-23.5%2056.5T800-120H160q-33%200-56.5-23.5T80-200v-440q0-33%2023.5-56.5T160-720Zm0%20320h640v-240H596l60%2082q10%2014%208%2029.5T648-503q-14%2010-29.5%207.5T593-511L480-664%20367-511q-10%2013-25.5%2015.5T312-503q-14-10-16.5-25.5T303-558l59-82H160v240Zm200-320q17%200%2028.5-11.5T400-760q0-17-11.5-28.5T360-800q-17%200-28.5%2011.5T320-760q0%2017%2011.5%2028.5T360-720Zm240%200q17%200%2028.5-11.5T640-760q0-17-11.5-28.5T600-800q-17%200-28.5%2011.5T560-760q0%2017%2011.5%2028.5T600-720Z%22%2F%3E%3C%2Fsvg%3E) var(--mask-settings);
			-webkit-mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%231CA970%22%3E%3Cpath%20d%3D%22M160-280v80h640v-80H160Zm0-440h88q-5-9-6.5-19t-1.5-21q0-50%2035-85t85-35q30%200%2055.5%2015.5T460-826l20%2026%2020-26q18-24%2044-39t56-15q50%200%2085%2035t35%2085q0%2011-1.5%2021t-6.5%2019h88q33%200%2056.5%2023.5T880-640v440q0%2033-23.5%2056.5T800-120H160q-33%200-56.5-23.5T80-200v-440q0-33%2023.5-56.5T160-720Zm0%20320h640v-240H596l60%2082q10%2014%208%2029.5T648-503q-14%2010-29.5%207.5T593-511L480-664%20367-511q-10%2013-25.5%2015.5T312-503q-14-10-16.5-25.5T303-558l59-82H160v240Zm200-320q17%200%2028.5-11.5T400-760q0-17-11.5-28.5T360-800q-17%200-28.5%2011.5T320-760q0%2017%2011.5%2028.5T360-720Zm240%200q17%200%2028.5-11.5T640-760q0-17-11.5-28.5T600-800q-17%200-28.5%2011.5T560-760q0%2017%2011.5%2028.5T600-720Z%22%2F%3E%3C%2Fsvg%3E) var(--mask-settings);
			height: .8lh;
			aspect-ratio: 1;
			background-color: currentColor;
		}
	}
	.wc-block-components-totals-coupon__form {
		input {
			margin-block: .5rem;
		}
		button {
			width: auto;
			padding: .5rem 1rem;
			&[disabled] {
				filter: grayscale(100%);
				cursor: not-allowed;
			}
		}
	}
}

/* WV Block Sidebar layour */
main {
	.wc-block-components-sidebar-layout {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;

		.wc-block-components-main {
			flex: 1;
		}
		.wc-block-components-sidebar {
			display: flex;
			flex-direction: column;
			gap: .5rem;
		}
	}
}

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

	.wc-block-cart__submit-button .wc-block-components-button__text {
		background-color: var(--wc-primary);
		border-color: var(--wc-primary);
		color: var(--wc-primary-contrast);
		padding: 1.2rem;
		justify-content: space-between;
		&:after {
			content: '';
			display: inline-block;
			height: 1lh;
			aspect-ratio: 1;
			background-color: currentColor;
			mask: var(--arrow_right) var(--mask-settings);
			-webkit-mask: var(--arrow_right) var(--mask-settings);
		}
	}

	svg {
		fill: currentColor;
		width: 20px;
		&.wc-block-components-checkbox__mark {
			display: none;
			content-visibility: hidden;
		}
	}
	.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(--wp--preset--font-size--small);
		}
		&.wc-block-components-express-payment--checkout {
			border: var(--border-width, 2px) solid var(--wc-primary);
			padding: 12px 16px;
			border-radius: var(--border-radius);
			margin-bottom: var(--padding);
			background-color: var(--bodyBackground);
		}
	}

	.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;
			content-visibility: hidden;
		}
	}

	/* Summmary / Sidebar */
	.wp-block-woocommerce-cart-order-summary-block,
	.wp-block-woocommerce-checkout-order-summary-block {

		/* 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;
				content-visibility: hidden;
			}
			.wc-block-components-product-details {
				list-style: none;
				padding: 0;
				margin: 0;
				font-size: var(--wp--preset--font-size--intermediate);
				color: var(--textColorAlt);
				li {
					&.wc-block-components-product-details__voorraad {
						.wc-block-components-product-details__name {
							display: none;
							content-visibility: hidden;
						}
					}
				}
			}
		}

		/* Totals */
		.wc-block-components-totals-item {
			display: grid;
			grid-template-columns: 1fr auto;
			padding-block: .25rem;
			.wc-block-components-totals-item__description {
				grid-column: span 2;
				font-size: smaller;
				color: var(--textColorAlt);
			}
		}
		.wc-block-components-totals-footer-item-tax {
			display: none;
			content-visibility: hidden;
		}
	}

	/* 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;
			content-visibility: hidden;
		}
		.wc-block-checkout__shipping-method-option,
		label {
			background-color: var(--backgroundColor);
			border: var(--border-width, 2px) solid var(--textColor);
			border-radius: var(--wc-form-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;
			content-visibility: hidden;
		}
	}

	/* Cart shipping methods */
	.wp-block-woocommerce-cart-totals-block {
		.wc-block-components-totals-item__description {
			grid-column: span 2;
		}
		.wc-block-components-shipping-rates-control__package {
			.wc-block-components-radio-control {
				margin-top: .5lh;
				grid-template-columns: 1fr;
				gap: 0;
				label {
					border-radius: 0;
					border-color: var(--border-color);
					&.wc-block-components-radio-control__option-checked {
						font-weight: bold;
						color: var(--textColor);
						outline: 2px solid;
						border-radius: var(--wc-form-border-radius);
						z-index: 1;
					}
					&:first-of-type {
						border-top-left-radius: var(--wc-form-border-radius);
						border-top-right-radius: var(--wc-form-border-radius);
					}
					&:last-of-type {
						border-bottom-left-radius: var(--wc-form-border-radius);
						border-bottom-right-radius: var(--wc-form-border-radius);
					}
					&:not(:last-of-type) {
						border-bottom: 0;
					}
					.wc-block-components-radio-control__option-layout {
						display: grid;
						grid-template-columns: 1fr auto;
						gap: 5px;
					}
				}
			}
		}
	}

}

/* Cart */
.woocommerce-cart--disabled {
	table.wc-block-cart-items {
		all: revert;
		width: 100%;

		thead {
			display: none;
			content-visibility: hidden;
		}
		tbody {
			tr {
				position: relative;
				isolation: isolate;
				&.is-disabled {
					&:before, &:after
					{
						content: '';
						display: inline-block;
						position: absolute;
						inset: 0;
					}
					&:before {
						z-index: 1;
						backdrop-filter: blur(4px);
					}
					&:after {
						z-index: 3;
						background-color: currentColor;
						mask: var(--loading) var(--mask-settings);
						-webkit-mask: var(--loading) var(--mask-settings);
						mask-size: 24px;
						animation: button-loading-spinner 1s ease infinite;
					}
				}
				td {
					padding-block: var(--padding);
					vertical-align: top;
					border-bottom: var(--border-width, 2px) solid var(--border-color);

					&.wc-block-cart-item__product {
						padding-inline: calc( var(--padding) / 2 );
						.wc-block-components-product-name {
							color: var(--linkColor);
							font-weight: bold;
						}
						.wc-block-components-product-metadata {
							font-size: var(--wp--preset--font-size--small);
							ul {
								list-style: none;
								padding: 0;
								margin: 0;
								width: fit-content;
								li {
									display: flex;
									justify-content: space-between;
									gap: 5px;
								}
							}
						}
					}

					&.wc-block-cart-item__image {
						min-width: 25px;
						max-width: 100px;
						img {
							border-radius: var(--border-radius);
							width: min(100%, 100px);
							aspect-ratio: 1;
							object-fit: contain;
						}
					}

					&.wc-block-cart-item__total {
						text-align: right;
					}

					/* Hide some stuff */
					.wc-block-components-product-badge,
					.wc-block-cart-item__prices,
					.wc-block-components-product-metadata__description {
						display: none;
						content-visibility: hidden;
					}

					/* Quantity input & Remove button */
					.wc-block-cart-item__quantity {
						margin-top: .5rem;
						display: flex;
						align-items: center;
						gap: .5rem;
					}
					button.wc-block-cart-item__remove-link {
						all: inherit;
						text-decoration: underline;
						font-size: var(--wp--preset--font-size--small);
						margin: 0;
						cursor: pointer;
					}
				}
			}
		}
	}
	.wc-block-components-sidebar-layout.wc-block-cart.is-mobile {
		display: flex;
		flex-direction: column-reverse;
		gap: 5px;
		.wp-block-woocommerce-cart-totals-block {
			border-bottom: var(--border-width, 2px) solid var(--border-color);
		}
	}
}

/* Mini Cart */
#mini_cart-dialog[open] {
	display: flex;
    flex-direction: column;
}
#load_mini_cart {
	flex: 1;
}
.mini_cart {
	.woocommerce-mini-cart__empty-message {
		text-align: center;
		color: var(--textColorAlt);
	}
	.woocommerce-mini-cart__total {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap);
		align-items: center;
		strong {
			font-weight: normal;
		}
		span {
			text-align: right;
		}
	}
}
.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(--border-color);
			
			.remove_from_cart_button {
				display: none;
				content-visibility: hidden;
			}
			.variation-Voorraad {
				display: none;
				content-visibility: hidden;
			}
			.variation-backorder {
				color: var(--wc-orange);
			}
			dl {
				display: flex;
				gap: 5px;
				font-size: var(--wp--preset--font-size--small);
				dd, p {
					margin: 0;
				}
			}
			span.quantity {
				display: block;
				margin-top: 10px;
				font-size: var(--wp--preset--font-size--intermediate);
			}
			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, 2px) solid var(--border-color);
		}
	}

	/* 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, 2px) 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, 2px) );
			}
		}

		/* 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;
			content-visibility: hidden;
		}
	}

	/* 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(--wp--preset--font-size--small);
			}
			&.wc-block-checkout__shipping-method-option--selected {
				outline: var(--border-width, 2px) 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, 2px) solid var(--border-color);
		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(--heading-font);
		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;
			line-clamp: 2;
			-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 */
.woocommerce-checkout main form.woocommerce-form-coupon,
.woocommerce-checkout main form.login {
	all: revert;
}
.woocommerce main form.woocommerce-checkout {
	#order_review_heading,
	.woocommerce-checkout-review-order table thead,
	.woocommerce-checkout-review-order table tbody {
		display: none;
		content-visibility: hidden;
	}
	.woocommerce-checkout-review-order table,
	div[class^='col-'] {
		background: var(--backgroundColor);
		padding: var(--padding);
		border-radius: var(--border-radius);
		margin-bottom: var(--padding);
		border: var(--border-width, 2px) solid var(--border-color);
	}
}

/* Payment boxes on shortcode pages */
#payment {
	all: revert!important;
	
	div.payment_box,
	> :before,
	> :after {
		display: none!important;
		content-visibility: hidden;
	}
	#place_order {
		all: revert;
		display: block;
		width: 100%;
		background-color: var(--wc-primary);
		color: #FFF;
		border-radius: var(--wc-form-border-radius);
		padding: 15px;
		font-weight: bold;
		cursor: pointer;
		border: 0;
		text-align: center;
		font-family: var(--heading-font);
		font-size: 1.1em;
		margin-top: var(--padding);
		&:hover {
			filter: brightness(80%);
		}
	}
	ul.payment_methods {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 4px;
		border-radius: 0;
		overflow: clip;
		padding: 0!important;

		li {
			display: flex;
			align-items: center;
			border: var(--wc-form-border-width) solid var(--wc-form-border-color);
			background-color: var(--wc-form-color-background, #fff);
			border-radius: var(--wc-form-border-radius);
		
			&:has( input[checked="checked"] ) {
				outline: var(--border-width, 2px) solid;
				outline-offset: calc( var(--border-width, 2px) * -1 );
				font-weight: bold;
			}
			input {
				margin: 0 0 0 10px!important;
			}
			label {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 5px 10px;
				cursor: pointer;
			}
			img {
				display: none;
				content-visibility: hidden;
			}
		}
	}
	.form-row.place-order {
		padding: 0!important;
	}
	.woocommerce-terms-and-conditions-wrapper {
		label {
			display: flex!important;
			line-height: 1.3!important;
		}
	}
}

/* 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;
	}
}

/* Quantity input */
.wc-block-components-quantity-selector {
	position: relative;
	display: grid;
	input {
		padding-inline: calc( 1rem + var(--ideal-touch-size) );
		text-align: center;
		appearance: none;
		-moz-appearance: textfield;
		height: 100%;
		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}
	.quantity .qty {
		width: 100%;
	}
	button {
		background-color: transparent;
		border-color: transparent;
		color: var(--form-color-text);
		width: var(--ideal-touch-size);
		position: absolute;
		inset: var(--border-width, 2px);
        display: grid;        
		place-content: center;
		font-weight: normal;
		&.wc-block-components-quantity-selector__button--minus,
		&.minus {
			right: auto;
		}
		&.wc-block-components-quantity-selector__button--plus,
		&.plus {
			left: auto;
		}
	}
}

/* WC gutenberg blocks */
.wc-block-featured-product {
	.wc-block-featured-product__wrapper {
		padding: var(--padding);
	}
	.wc-block-featured-product__background-image {
		transition: scale .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(--border-color);
	}
	.schema-faq-section:last-child {
		border-bottom: 0;
	}
	.schema-faq-question {
		font-family: var(--heading-font);
		font-size: 1.2rem;
	}
}

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

/* Only on devices != mobile */
@media screen and (min-width: 725px ) {
	.hide-on-big,
	.hideThisOnDesktop {
		display: none;
		content-visibility: hidden;
	}
}

/* Medium screens */
@media screen and (max-width: 1000px) {
	.hide-on-medium,
	.hideThisOnTablet {
		display: none;
		content-visibility: hidden;
	}
}

/* Only on devices == mobile */
@media screen and (max-width: 724px) { 
	
	.hide-on-small,
	.hideThisOnMobile {
		display: none!important;
		content-visibility: hidden;
	}
	.padding .wrap, 
	.padding .is-style-wrap {
		padding: 0;
	}
	
	/* 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(--header-background);
	color: var(--header-color);
	#wp-toolbar ul.ab-top-menu > li:not(:hover) * {
		color: var(--header-color);
		&:before {
			color: revert;
		}
	}
	.ab-item,
	.ab-label 
	{
		max-width: 125px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#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;
		content-visibility: hidden;
	}
}

/* WP Block: Media */
.wp-block-media-text {
	gap: var(--padding);
	--_image-outline-radius: 100vh;
	.wp-block-media-text__media,
	.wp-block-media-text__content {
		padding: 0;
	}
	&.is-vertically-aligned-center {
		> .wp-block-media-text__media,
		> .wp-block-media-text__content {
			align-self: unset;
			align-content: center;
		}
	}
	@media screen and (max-width: 600px) {
		&.is-stacked-on-mobile {
			--_image-outline-radius: 0 0 100vh 100vh;
		}
	}
	@media screen and (min-width: 601px) {
		&.has-media-on-the-left {
			--_image-outline-radius: 0 100vh 100vh 0; 
		}
		&.has-media-on-the-right {
			--_image-outline-radius: 100vh 0 0 100vh; 
		}
	}
	&.is-style-image-has-background {
		.wp-block-media-text__media {
			position: relative;
			isolation: isolate;
			img {
				filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.1));
			}
			&:before {
				content: "";
				display: block;
				position: absolute;
				inset: -25%;
				backdrop-filter: brightness(0.9);
				z-index: -1;
				border-radius: var(--_image-outline-radius);
				transition-property: inset;
				transition-duration: var(--transition-duration);
				transition-timing-function: var(--transition-timing-function);
			}
		}
	}
	&:has( .wp-block-buttons .is-style-invis-cover-button ) {
		position: relative;
		outline: 0;
		outline-offset: -2px;

		.wp-block-media-text__content {
			position: unset;
		}
		&:focus-within,
		&:hover {
			outline: 2px solid var(--textColor);
			.wp-block-media-text__media:before {
				inset: -50%;
			}
		}
	}
}

/* WP Block: Couple of matching blocks */
.wp-block-latest-posts__list,
.wc-block-product-categories-list--disabled,
.wc-block-product-template--disabled
{

	/* List versions: */
	/* wp-block-latest-posts also has: has-dates has-author */
	/* wc-block-product-categories-list also has: wc-block-product-categories-list--depth-0 */
	/* wc-block-product-template also has: is-product-collection-layout-list wp-block-woocommerce-product-template */

	/* Grid versions: */
	/* wp-block-latest-posts also has: is-grid columns-3 has-dates has-author */
	/* wc-block-product-categories-list also has: wc-block-product-categories-list--depth-0 wc-block-product-categories-list--has-images */
	/* wc-block-product-template also has: ( wc-block-product-template__responsive OR is-flex-container )columns-5 wp-block-woocommerce-product-template */

	/* Base styling */
	list-style: none outside;
	padding: 0;
	margin: 0;

	li {
		position: relative;
		&:has( img ) {
			padding-block: 1rem;

			&:not(:has(.aligncenter)) {
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: start;
				gap: var(--wp--style--block-gap);
			}
			:not( .wp-block-latest-posts__featured-image, .wc-block-grid__product-image ) {
				grid-column: 2;
			}
			&:has([class*="-image"].alignright) {
				direction: rtl;
				text-align: right;
			}
			&:has([class*="-image"].aligncenter) {
				text-align: center;
			}
		}
		&:has(.wc-block-product-categories-list-item-count) {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			a {
				flex: 1;
			}
			> ul {
				flex: 0 0 100%;
			}
		}
	}
	a {
		transition: none;
		display: block;
		color: inherit;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
	.wp-block-latest-posts__featured-image,
	.wc-block-grid__product-image {
		border-radius: var(--border-radius);
		overflow: hidden;
		float: unset;
		margin: 0 0 var(--padding) 0;
		aspect-ratio: 16 / 9;
		a {
			overflow: hidden;
			aspect-ratio: inherit;
		}
		&:has(.size-thumbnail) {
			aspect-ratio: 1;
		}
		img {
			border-radius: var(--border-radius);
		}
		&:not(.aligncenter) {
			grid-row: span 2;
			img {
				max-width: 100px;
			}
		}
	}
	.wp-block-latest-posts__post-title,
	.wc-block-product-categories-list-item__name,
	.wp-block-post-title
	{
		font-family: var(--text-font);
		font-weight: normal;
		text-box: trim-start cap alphabetic;
		font-size: inherit;
		line-height: 1.3;
		&:not([class*="has-text-align-"]) {
			text-align: inherit;
		}
	}
	.wp-block-latest-posts__post-author,
	.wp-block-latest-posts__post-date 
	{
		display: none;
		content-visibility: hidden;
	}
	.wp-block-latest-posts__post-excerpt {
		all: revert;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.5;
		color: var(--textColorAlt);
		text-box: trim-end cap alphabetic;
	}
	.wc-block-product-categories-list-item-count {
		background-color: rgb( from currentColor r g b / .05 );
		color: inherit;
		padding: .25em;
		border-radius: .25em;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1;
		font-weight: bold;
		&:before,
		&:after {
			display: none;
			content-visibility: hidden;
		}
	}

	/* List styling */
	&:not([class*="columns-"], .wc-block-product-categories-list--has-images) {	
		border-bottom: 1px solid var(--border-color);
		li {
			border-top: 1px solid var(--border-color);
			ul {
				li {
					padding-left: 12px;
					color: var(--textColorAlt);
					.wc-block-product-categories-list-item-count {
						background-color: transparent;
					}
				}
			}
			&:not(:has(img)) {
				a {
					padding-block: 4px;
				}
			}
		}
	}

	/* Grid styling */
	&[class*="columns-"],
	&.wc-block-product-categories-list--has-images
	{	
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 350px, 1fr) );
		gap: var(--wp--style--block-gap);
		
		li {
			width: unset;
			margin: 0;
		}

		/* wc-block-product-categories-list supports sub-menu's, for now we disable them */
		ul {
			display: none!important;
			content-visibility: hidden!important;
		}
	}


}

/* WP Block: Separator */
.wp-block-separator {
	color: var(--border-color);
	&:not(.is-style-wide):not(.is-style-dots) {
		width: min( 100px, 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 */
.wp-block-image {
	overflow: clip;
}
.is-style-rounded {
	border-radius: var(--border-radius);
}
.is-style-circle {
	border-radius: 100vh;
}

/* Scrollable divs */
.is-scrollable:has( [class*="inner"] ) {
	overflow: auto;
	> [class*="inner"] {
		display: flex;
		gap: var(--padding);
		width: max-content;
		> div {
			max-width: 75vw;
			flex-grow: 0;
			flex-shrink: 0;
		}
	}
}

/* Overlay */
::backdrop {
	background-color: rgba( 0, 0, 0, 0.2 );
}
#overlay {
	background-color: rgba( 0, 0, 0, 0.2 );
	display: none;
	visibility: hidden;
	position: fixed;
	inset: 0;
	z-index: 800;
	cursor: pointer;
} 
:has( nav[open], .menu-item-has-children:hover ) #overlay {
	display: block;
	visibility: visible;
}
body:has( dialog[open][data-type='fullscreen'] ) {
	overflow: hidden;
}
@media screen and (max-width: 725px) {
	body:has( nav[open] ) {
		overflow: hidden;
	}
}

/* ====================================== CUSTOM & SIMPLE CLASSES ======================================  */
.is-style-wide {
	width: 100%;
}
.is-layout-grid {
	display: grid;
	gap: var(--gap);
}
.is-layout-flex {
	display: flex;
	gap: var(--gap);
}
.is-layout-block {
	display: block;
}
.is-layout-inline {
	display: inline;
}
.no-gap {
	gap: 0;
}
.float-none {
	float: none!important;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.sticky {
	position: sticky;
}
.fixed {
	position: fixed;
}
[class*="margin"]  {
	--_margin_modifier: var(--padding);
	&[class*="no-margin"]  {
		--_margin_modifier: 0;
	}
	&:not(&[class*="margin-"]) {
		margin: var(--_margin_modifier);
	}
	&[class*="margin-block"]  {
		margin-block: var(--_margin_modifier);
	}
	&[class*="margin-inline"]  {
		margin-inline: var(--_margin_modifier);
	}
	&[class*="margin-top"]  {
		margin-top: var(--_margin_modifier);
	}
	&[class*="margin-left"]  {
		margin-left: var(--_margin_modifier);
	}
	&[class*="margin-right"]  {
		margin-right: var(--_margin_modifier);
	}
	&[class*="margin-bottom"]  {
		margin-bottom: var(--_margin_modifier);
	}
}
.use-spacing {
	padding: var(--spacing);
}
[class*="padding"]  {
	--_padding_modifier: var(--padding);
	&[class*="no-padding"]  {
		--_padding_modifier: 0;
	}
	&:not(&[class*="padding-"]) {
		padding: var(--_padding_modifier);
	}
	&[class*="padding-block"]  {
		padding-block: var(--_padding_modifier);
	}
	&[class*="padding-inline"]  {
		padding-inline: var(--_padding_modifier);
	}
	&[class*="padding-top"]  {
		padding-top: var(--_padding_modifier);
	}
	&[class*="padding-left"]  {
		padding-left: var(--_padding_modifier);
	}
	&[class*="padding-right"]  {
		padding-right: var(--_padding_modifier);
	}
	&[class*="padding-bottom"]  {
		padding-bottom: var(--_padding_modifier);
	}
}
.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-preset);
}
.border-radius {
	border-radius: var(--border-radius);
	overflow: clip;
}
.no-border-radius {
	border-radius: 0!important;
	img {
		border-radius: 0!important;
	}
}
.has-upper-letter-case {
	text-transform: uppercase;
}
.has-default-letter-case {
	text-transform: none;
}
.has-lower-letter-case {
	text-transform: lowercase;
}
.align_top {
	align-content: flex-start;
	justify-content: flex-start;
	align-items: flex-start;
}
.aligncenter {
	margin-inline: auto!important;
}
.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;
}

/* ====================================== COLORS ======================================  */
/* .has-text-color {

}
.has-background {

}
.has-link-color {

} */

.has-text-color-black,
.has-black-color {
	color: #000;
}
.has-black-background-color {
	background-color: #0000;
}

.has-text-color-white,
.has-white-color {
	color: #FFF;
}
.has-white-background-color {
	background-color: #FFF;
}

.has-text-color-primary,
.has-primary-color {
    color: var(--main);
}
.has-primary-background-color {
    background-color: var(--main);
}

.has-text-color-secondary,
.has-secondary-color {
    color: var(--second);
}
.has-secondary-background-color {
    background-color: var(--second);
}

.has-text-color-accent,
.has-accent-color {
    color: var(--accent);
}
.has-accent-background-color {
    background-color: var(--accent);
}

.has-text-color-border-color,
.has-border-color-color {
    color: var(--border-color);
}
.has-border-color-background-color {
    background-color: var(--border-color);
}

.has-text-color-text-color,
.has-text-color-color {
    color: var(--textColor);
}
.has-text-color-background-color {
    background-color: var(--textColor);
}

.has-text-color-text-color-alt,
.has-text-color-alt-color {
    color: var(--textColorAlt);
}
.has-text-color-alt-background-color {
    background-color: var(--textColorAlt);
}

.has-text-color-green,
.has-green-color {
    color: var(--wc-green);
}
.has-green-background-color {
    background-color: var(--wc-green);
}

.has-text-color-orange,
.has-orange-color {
    color: var(--wc-orange);
}
.has-orange-background-color {
    background-color: var(--wc-orange);
}

.has-text-color-red,
.has-red-color {
    color: var(--wc-red);
}
.has-red-background-color {
    background-color: var(--wc-red);
}

/* ==================================== FALLBACKS ====================================  */
[disabled] {
	opacity: .5;
	cursor: not-allowed;
}
[content-state="collapsed"] {
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

/* ====================================== HIDDEN ======================================  */
[hidden],
.hidden,
.home .hide-on-front,

.woocommerce-checkout .hide-on-checkout,
.woocommerce-cart .hide-on-cart 
{
	display: none;
	content-visibility: hidden;
}

/* ============================== KEYFRAMES / ANIMATIONS ==============================  */
@keyframes fadeInBottom {
	from { 
		opacity: 0; 
		bottom: -100%;
	}
	to { 
		bottom: var(--gap);
		opacity: 1; 
	}
}
@keyframes button-loading-spinner {
	to { 
		transform: rotate( 1turn ); 
	}
}
@keyframes fadeInScale {
	from { 
		opacity: 0; 
		scale: 0.8; 
	}
	to { 
		opacity: 1; 
		scale: 1; 
	}
}

/* ====================================== 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 );
}

/* Columns, to be removed at some point */
/* @container wrapper (width > 500px) {
	
} */
[class*="columns"] {
	--_columns: 2;
}
@media screen and (min-width: 725px) {
	.columns-1,
	.has-1-columns {
		--_columns: 1;
		grid-template-columns: 1fr;
	}
	.columns-2,
	.has-2-columns {
		--_columns: 2;
		grid-template-columns: repeat(2, 1fr);
	}
	.columns-3,
	.has-3-columns {
		--_columns: 3;
		grid-template-columns: repeat(3, 1fr);
	}
	.columns-4,
	.has-4-columns {
		--_columns: 4;
		grid-template-columns: repeat(4, 1fr);
	}
	.columns-5,
	.has-5-columns {
		--_columns: 5;
		grid-template-columns: repeat(5, 1fr);
	}
	.columns-6,
	.has-6-columns {
		--_columns: 6;
		grid-template-columns: repeat(6, 1fr);
	}
	.columns-7,
	.has-7-columns {
		--_columns: 7;
		grid-template-columns: repeat(7, 1fr);
	}
	.columns-8,
	.has-8-columns {
		--_columns: 8;
		grid-template-columns: repeat(8, 1fr);
	}
	.columns-9,
	.has-9-columns {
		--_columns: 7;
		grid-template-columns: repeat(9, 1fr);
	}
	.columns-10,
	.has-10-columns {
		--_columns: 10;
		grid-template-columns: repeat(10, 1fr);
	}
}

/* ====================================== FONTS, SIZES, WEIGHTS ETC. ======================================  */
.has-font-family-paragraph,  /* Old name */
.has-paragraph-font-family {
	font-family: var(--text-font, 'system-ui');
}
.has-font-family-heading, /* Old name */
.has-heading-font-family {
	font-family: var(--heading-font, var(--text-font, 'system-ui'));
}
[class*="-font-size"] {
	font-size: var(--font-size);
	line-height: var(--line-height);
}
.has-small-font-size {
	--font-size: var(--wp--preset--font-size--small);
	--line-height: 1.7;
}
.has-intermediate-font-size {
	--font-size: var(--wp--preset--font-size--intermediate);
	--line-height: 1.6;
}
.has-default-font-size {
	--font-size: var(--wp--preset--font-size--default);
	--line-height: 1.5;
}
.has-medium-font-size {
	--font-size: var(--wp--preset--font-size--medium);
	--line-height: 1.4;
}
.has-large-font-size {
	--font-size: var(--wp--preset--font-size--large);
	--line-height: 1.2;
}
.has-huge-font-size,
.has-x-large-font-size {
	--font-size: var(--wp--preset--font-size--x-large);
	--line-height: 1.1;
}
.has-parent-font-size {
	font-size: inherit;
	line-height: inherit;
}
.has-text-align-left {
	text-align: left;
}
.has-text-align-center {
	text-align: center;
}
.has-text-align-right {
	text-align: right;
}
.has-no-lineheight {
	line-height: 1;
	--line-height: 1; /* For the font-size classes etc. */
}
.has-100-font-weight {
	font-weight: 100;
}
.has-200-font-weight {
	font-weight: 200;
}
.has-300-font-weight {
	font-weight: 300;
}
.has-default-font-weight,
.has-400-font-weight {
	font-weight: 400;
}
.has-500-font-weight {
	font-weight: 500;
}
.has-600-font-weight {
	font-weight: 600;
}
.has-bold-font-weight,
.has-700-font-weight {
	font-weight: 700;
}
.has-800-font-weight {
	font-weight: 800;
}
.has-900-font-weight {
	font-weight: 900;
}

/* Deprecated classes */
.show-for-admins {
	display: none;
	content-visibility: hidden;
}
.admin-bar {
	.grid, 
	.block, 
	.flex, 
	.inline-block, 
	.nogap,
	.nomargin,
	.nopadding,
	.wide,
	.t-right,
	.t-left,
	.t-center
	{
		outline: 3px solid orange;
	}
	.text-100, .text-200, .text-300, .text-400, .text-500, .text-600, .text-700, .text-800, .text-900,
	.wrap {
		outline: 3px solid red;
	}

	.show-for-admins {
		display: revert;
		content-visibility: revert;
		outline: 3px dashed var(--wp-admin-theme-color, red);
		background-color: rgb( from red r g b / .05 );
		outline-offset: -3px;
		position: relative;
		&:before {
			content: "Admin only";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 12px;
			font-weight: 500;
			opacity: .5;
			z-index: 10;
		}
	}

}