/* Header mode switch, see inc/theme-mode-switch.php; scoped to .gg-mode-switch to outrank the kit. */
.gg-mode-switch {
	display: inline-flex;
	align-items: center;
}

.gg-mode-switch .gg-switch {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 999px;
	background: #E7DFD1;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.2;
}

/* Yellow outline around the desktop header mode switch. */
@media (min-width: 1025px) {
	.elementor-location-header .gg-mode-switch .gg-switch {
		border: 2px solid var(--e-global-color-secondary, #E6C616);
	}
}

.gg-mode-switch .gg-switch .gg-switch__item {
	display: inline-block;
	flex: 0 0 auto;
	white-space: nowrap;
	border: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
	padding: 10px 14px;
	border-radius: 999px;
	color: #6B6455;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.gg-mode-switch .gg-switch .gg-switch__item:hover,
.gg-mode-switch .gg-switch .gg-switch__item:focus {
	color: #17140E;
	background: transparent;
	text-decoration: none;
	outline: none;
}

.vraag-over-wrapper span.elementor-icon-list-text {
	text-decoration: underline;
}

.gg-mode-switch .gg-switch .gg-switch__item.is-active,
.gg-mode-switch .gg-switch .gg-switch__item.is-active:hover,
.gg-mode-switch .gg-switch .gg-switch__item.is-active:focus {
	background: #FFFCF7;
	color: #17140E;
	box-shadow: 0 1px 2px rgba(23, 20, 14, .12);
}

/* Floating copy of the pill: one icon badge on the left edge, each tab sliding out its label on hover.
   Stacked under JetMenu's dropdowns (998 and 999), so an open mega menu covers the tabs, not the other way round. */
.gg-mode-float {
	position: fixed;
	top: 50%;
	left: 0;
	z-index: 990;
	transform: translateY(-50%);
}

/* drop-shadow follows the tabs' shape, so an opened tab does not leave a shadowed box behind the other. */
.gg-mode-float .gg-switch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	filter: drop-shadow(0 4px 12px rgba(23, 20, 14, .22));
}

/* Closed, the label starts at the 48px edge and is transparent, so only the icon shows.
   Each tab sizes itself from its own label on one line, and max-width alone clips it. */
.gg-mode-float .gg-switch .gg-switch__item,
.gg-mode-float .gg-switch .gg-switch__item:hover,
.gg-mode-float .gg-switch .gg-switch__item:focus {
	--gg-mode-ink: #E7DFD1;
	display: flex;
	align-items: center;
	gap: 13px;
	width: max-content;
	max-width: 48px;
	white-space: nowrap;
	padding: 13px;
	overflow: hidden;
	border-radius: 0;
	background: var(--e-global-color-text, #372C24);
	color: transparent;
	box-shadow: none;
	transition: max-width .3s ease, color .2s ease, border-radius .3s ease, background .18s ease;
}

.gg-mode-float .gg-switch .gg-switch__item:first-child {
	border-top-right-radius: 12px;
}

.gg-mode-float .gg-switch .gg-switch__item:last-child {
	border-top: 1px solid rgba(231, 223, 209, .35);
	border-bottom-right-radius: 12px;
}

/* The active side stays open with its name, so the visitor always sees where they are. */
.gg-mode-float .gg-switch .gg-switch__item.is-active,
.gg-mode-float .gg-switch .gg-switch__item.is-active:hover,
.gg-mode-float .gg-switch .gg-switch__item.is-active:focus {
	--gg-mode-ink: var(--e-global-color-text, #372C24);
	max-width: 260px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	background: var(--e-global-color-secondary, #E6C616);
	color: var(--gg-mode-ink);
	box-shadow: none;
}

/* The icon needs a real width next to its flex size: Safari measures an empty ::before at 0 when it works out the
   tab's max-content width, which left the label 22px short. */
.gg-mode-float .gg-switch .gg-switch__item::before {
	content: '';
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background: var(--gg-mode-ink);
	-webkit-mask: var(--gg-mode-icon) center / contain no-repeat;
	mask: var(--gg-mode-icon) center / contain no-repeat;
}

.gg-mode-float .gg-switch__item[data-mode="b2b"] {
	--gg-mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

.gg-mode-float .gg-switch__item[data-mode="b2c"] {
	--gg-mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

/* Hover only where a pointer can hover, so a tap on a phone goes straight to the link. */
@media (hover: hover) {

	.gg-mode-float .gg-switch .gg-switch__item:hover,
	.gg-mode-float .gg-switch .gg-switch__item:focus-visible,
	.gg-mode-float .gg-switch .gg-switch__item.is-active:hover,
	.gg-mode-float .gg-switch .gg-switch__item.is-active:focus-visible {
		max-width: 260px;
		color: var(--gg-mode-ink);
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
	}
}

/* Floating buttons, see goesten_floating_buttons(); bottom right so they never meet the mode switch on the left. */
.gg-float-actions {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Hidden until the visitor has scrolled, theme-script.js adds is-visible. */
.gg-float-actions .gg-to-top {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--e-global-color-text, #372C24);
	box-shadow: 0 4px 12px rgba(23, 20, 14, .22);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.gg-float-actions .gg-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.gg-float-actions .gg-to-top:hover,
.gg-float-actions .gg-to-top:focus {
	background: var(--e-global-color-text, #372C24);
}

.gg-float-actions .gg-to-top svg {
	width: 22px;
	height: 22px;
}

.gg-float-actions .gg-to-top svg path {
	fill: none;
	stroke: #E7DFD1;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gg-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(23, 20, 14, .22);
	transition: transform .18s ease;
}

.gg-whatsapp:hover,
.gg-whatsapp:focus {
	color: #FFFFFF;
	transform: scale(1.06);
}

.gg-whatsapp svg {
	width: 30px;
	height: 30px;
}

/* Filled on the path itself, so the kit's link colour cannot tint the logo. */
.gg-whatsapp svg path {
	fill: #FFFFFF;
}

/* Direct bestellen price on the product page, see goesten_b2c_price_html(): the excl. amount leads, the incl. line and the heading's "ex. btw" follow small. */
.gg-price-excl .woocommerce-Price-amount {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

.gg-price-incl,
.gg-price-incl~.span-color1 {
	font-size: 14px;
	font-weight: 400;
}

/* Offerte aanvraag page, scoped to .gg-offerte-layout so it never reaches /winkelwagen/. */
.gg-offerte-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
	gap: 28px;
	align-items: start;
	color: var(--e-global-color-text, #372C24);
}

/* Clears the theme's focus outline, scoped to .woocommerce so the empty cart is covered too. */
.gg-offerte .woocommerce :focus,
.gg-offerte .woocommerce :focus-visible,
.gg-offerte .woocommerce :focus-within,
.gg-offerte .woocommerce:focus-within {
	box-shadow: none;
	outline: 0;
}

.gg-offerte-layout .gg-offerte-layout__cart,
.gg-offerte-layout .gg-offerte-layout__form {
	background: var(--e-global-color-af54861, #FFFFFF);
	border: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	border-radius: 8px;
	padding: 16px;
}

.gg-offerte-layout__cart table thead:first-child tr:first-child th {
	border: none;
}

.gg-offerte-layout .gg-offerte-layout__cart .shop_table {
	border: none;
	margin-bottom: 0;
}

/* Reduce Woo's full border grid to row rules. */
.gg-offerte-layout .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse !important;
}

.gg-offerte-layout .shop_table th,
.gg-offerte-layout .shop_table td {
	border: 0;
	border-bottom: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	padding: 14px 10px;
	vertical-align: middle;
	text-align: left;
}

.gg-offerte-layout .shop_table th {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #6B6455;
}

.gg-offerte-layout .shop_table tr:last-child td {
	border-bottom: 0;
}

.gg-offerte-layout .product-remove {
	width: 32px;
}

/* WooCommerce sets both colours with !important, so they are restated the same way. */
.gg-offerte-layout .product-remove a.remove {
	color: #B32D2E !important;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.gg-offerte-layout .product-remove a.remove:hover {
	color: #7E1F21 !important;
	background: transparent;
}

.gg-offerte-layout .product-thumbnail {
	width: 84px;
}

.gg-offerte-layout .product-thumbnail img {
	display: block;
	width: 68px;
	height: auto;
	border-radius: 6px;
}

.gg-offerte-layout .product-name a {
	color: var(--e-global-color-text, #372C24);
	font-weight: 600;
	text-decoration: none;
}

.gg-offerte-layout .quantity input.qty {
	width: 64px;
	padding: 8px;
	border: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	border-radius: 8px;
	text-align: center;
}

.gg-offerte-layout td.actions {
	text-align: right;
	padding-top: 18px;
}

.gg-offerte-layout .gg-offerte-form__title {
	margin: 0 0 18px;
	font-family: var(--e-global-typography-fac4741-font-family, "Roboto Flex"), sans-serif;
	font-size: var(--e-global-typography-fac4741-font-size, 20px);
	font-weight: var(--e-global-typography-fac4741-font-weight, 600);
	line-height: var(--e-global-typography-fac4741-line-height, 1.4em);
	color: var(--e-global-color-text, #372C24);
}

.gg-offerte-layout .gg-offerte-form__intro {
	margin: 0 0 16px;
	color: #6B6455;
	font-size: 15px;
	line-height: 1.6;
}

/* Sales contact above the fields, set apart so it does not read as a form label. */
.gg-offerte-layout .gg-offerte-form__contact {
	margin: 0 0 24px;
	padding: 14px 16px;
	border-left: 3px solid var(--e-global-color-5bf50a5, #BE9510);
	border-radius: 8px;
	background: #F6F3EA;
}

.gg-offerte-layout .gg-offerte-form__contact p {
	margin: 0;
	line-height: 1.6;
}

.gg-offerte-layout .gg-offerte-form__contact-title {
	font-weight: 600;
	color: var(--e-global-color-text, #372C24);
}

.gg-offerte-layout .gg-offerte-form__contact-text {
	color: #6B6455;
	font-size: 15px;
}

.gg-offerte-layout .gg-offerte-form__contact-text a {
	color: var(--e-global-color-text, #372C24);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.gg-offerte-layout .gg-offerte-form__contact-text a:hover {
	color: var(--e-global-color-5bf50a5, #BE9510);
}

.gg-offerte-layout .gg-offerte-form__error {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 6px;
	background: #FBECEC;
	color: #B32D2E;
	font-size: 14px;
}

.gg-offerte-layout .gg-offerte-form__done,
.gg-offerte-layout .gg-offerte-form__empty {
	margin: 0;
	color: #6B6455;
}

/* Two fields per row. Nonce and honeypot inputs are out of flow, so take no cell. */
.gg-offerte-layout .gg-offerte-form__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row .gg-offerte-form__field {
	width: 100%;
	padding: 10px 15px;
	border: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	border-radius: 12px;
	background: var(--e-global-color-af54861, #FFFFFF);
	color: var(--e-global-color-text, #372C24);
	font-family: var(--e-global-typography-text-font-family, "Roboto Flex"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 18px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.5em);
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row .gg-offerte-form__field::placeholder {
	color: #6B6455;
	opacity: 1;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row .gg-offerte-form__field:focus {
	border-color: var(--e-global-color-text, #372C24);
	box-shadow: 0 0 0 3px rgba(55, 44, 36, .10);
	outline: none;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row textarea.gg-offerte-form__field {
	min-height: 132px;
	resize: vertical;
}

/* Each field is a row in the grid, scoped through the form to outrank Woo's .form-row. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row--full {
	grid-column: 1 / -1;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row label {
	margin: 0 0 5px;
	font-family: var(--e-global-typography-text-font-family, "Roboto Flex"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 18px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.5em);
	color: var(--e-global-color-text, #372C24);
}

/* Woo hides the required marker and colours it red; both are overridden here. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row label .required,
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row label .optional {
	visibility: visible;
	border: none;
	color: var(--e-global-color-text, #372C24);
	text-decoration: none;
}

/* Woo wraps its own control in a span, which would otherwise collapse the column. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* The country select is Woo's markup, matched by element as well as by the field class. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row select.gg-offerte-form__field {
	appearance: none;
	cursor: pointer;
	width: 100%;
	padding: 10px 34px 10px 15px;
	border: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	border-radius: 12px;
	background-color: var(--e-global-color-af54861, #FFFFFF);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6455' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	color: var(--e-global-color-text, #372C24);
	font-family: var(--e-global-typography-text-font-family, "Roboto Flex"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 18px);
	line-height: var(--e-global-typography-text-line-height, 1.5em);
}

/* Select2 is loaded by WooCommerce and replaces the select, so its box is matched too. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row .select2-container--default .select2-selection--single {
	height: auto;
	padding: 13px 14px;
	border: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	border-radius: 12px;
	background: var(--e-global-color-af54861, #FFFFFF);
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__privacy {
	grid-column: 1 / -1;
	margin: 0;
	color: #6B6455;
	font-size: 13px;
}

/* Both messages sit in the markup and the row's class decides which one shows. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row .error-msg {
	display: none;
	margin: 5px 0 0;
	color: #B32D2E;
	font-size: 14px;
	line-height: 1.4;
}

p.gg-min-qty {
	font-size: 16px;
	margin-top: 10px !important;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row.field-error .error-msg {
	display: block;
}

/* A format error replaces the required message rather than showing both. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row.format-error .error-msg {
	display: none;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row.format-error .error-msg.format {
	display: block;
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__row.field-error .gg-offerte-form__field {
	border-color: #B32D2E;
}

.gg-offerte-layout .gg-offerte-form .hide {
	display: none;
}

a.button.gg-direct-order:hover {
	background-color: var(--e-global-color-text);
	color: var(--e-global-color-primary);
}

/* Update winkelwagen, matching the header Contact button; Woo disables it until a quantity changes. */
.gg-offerte-layout .shop_table td.actions button[name="update_cart"] {
	padding: 12px 24px;
	border: none;
	border-radius: 100px;
	background-color: var(--e-global-color-text, #372C24);
	color: var(--e-global-color-af54861, #FFFFFF);
	font-family: var(--e-global-typography-ddc9d9b-font-family, "Roboto Flex"), sans-serif;
	font-size: var(--e-global-typography-ddc9d9b-font-size, 15px);
	font-weight: var(--e-global-typography-ddc9d9b-font-weight, 600);
	cursor: pointer;
}

.gg-offerte-layout .shop_table td.actions button[name="update_cart"]:enabled:hover {
	background-color: var(--e-global-color-accent, #E6C616);
	color: var(--e-global-color-text, #372C24);
}

.gg-offerte-layout .shop_table td.actions button[name="update_cart"]:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* Terug naar winkel, shown once the cart is empty; hover restates the colours Woo repaints. */
.woocommerce a.button.wc-backward {
	border-radius: 100px;
	background-color: var(--e-global-color-c3fa0a0, #372C24);
	color: var(--e-global-color-af54861, #FFFFFF);
	font-family: var(--e-global-typography-ddc9d9b-font-family, "Roboto Flex"), sans-serif;
	font-size: var(--e-global-typography-ddc9d9b-font-size, 15px);
	font-weight: var(--e-global-typography-ddc9d9b-font-weight, 600);
	font-style: var(--e-global-typography-ddc9d9b-font-style, normal);
	text-transform: var(--e-global-typography-ddc9d9b-text-transform, none);
}

.woocommerce a.button.wc-backward:hover {
	background-color: var(--e-global-color-c3fa0a0, #372C24);
	color: var(--e-global-color-af54861, #FFFFFF);
}

.gg-mode-switch-mobile .gg-mode-switch {
	margin-bottom: 10px;
}

/* Submit button. The box is declared once here and hover only repaints it. */
.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__submit {
	grid-column: 1 / -1;
	justify-self: stretch;
	padding: 12px 24px;
	border: none;
	border-radius: 16px;
	background-color: var(--e-global-color-5bf50a5, #BE9510);
	color: var(--e-global-color-af54861, #FFFFFF);
	font-family: var(--e-global-typography-accent-font-family, "Roboto Flex"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, 16px);
	font-weight: var(--e-global-typography-accent-font-weight, 400);
	font-style: var(--e-global-typography-accent-font-style, normal);
	line-height: var(--e-global-typography-accent-line-height, 24px);
}

.gg-offerte-layout .gg-offerte-form__form .gg-offerte-form__submit:hover {
	background-color: var(--e-global-color-text, #372C24);
	color: var(--e-global-color-primary, #FFFFFF);
}

.form-wrapper .elementor-field-type-html.elementor-field-group-field_f292f63 {
	margin-top: -10px;
}

.form-wrapper .elementor-field-type-checkbox.elementor-field-group-nieuwsbrief {
	margin-bottom: 5px !important;
}

.form-wrapper .elementor-upload-field {
	padding: 8px 16px;
}

.woocommerce form .form-row label.checkbox,
.woocommerce-page form .form-row label.checkbox {
	display: inline-block;
	padding: 6px 15px !important;
	font-size: 14px !important;
}

.woocommerce form .form-row .required {
	color: var(--wc-red) !important;
}

/* Kleur image swatches, see goesten_variation_swatches(); the select stays for Woo's script. */
.gg-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gg-swatches .gg-swatches__select {
	display: none;
}

/* The justified add to cart widget gives every form button flex-basis 100%, so it is reset the same way. */
.gg-swatches .gg-swatch {
	position: relative;
	flex-basis: auto !important;
	width: 80px;
	height: 80px;
	padding: 4px;
	border: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	border-radius: 8px;
	background: var(--e-global-color-af54861, #FFFFFF);
	cursor: pointer;
}

/* The kit restyles buttons on hover and focus, so the box is restated. */
.gg-swatches .gg-swatch:hover,
.gg-swatches .gg-swatch:focus {
	border: 1px solid var(--e-global-color-03cf24f, #B2B2B24D);
	border-radius: 8px;
	background: var(--e-global-color-af54861, #FFFFFF);
}

.gg-swatches .gg-swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gg-swatches .gg-swatch.is-active {
	border: 2px solid var(--e-global-color-text, #372C24);
}

/* Tick on the chosen swatch, drawn with two borders. */
.gg-swatches .gg-swatch.is-active::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 9px;
	width: 7px;
	height: 12px;
	border: solid var(--e-global-color-text, #372C24);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.gg-swatches .gg-swatch.is-disabled {
	opacity: .35;
	cursor: not-allowed;
}

/* Colour name above the swatch on hover and keyboard focus. */
.gg-swatches .gg-swatch::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--e-global-color-text, #372C24);
	color: var(--e-global-color-af54861, #FFFFFF);
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity .15s ease;
	pointer-events: none;
}

.gg-swatches .gg-swatch:hover::before,
.gg-swatches .gg-swatch:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

/* Woo paints a disabled add to cart in its own purple, so its own selector restates the widget's colours. */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled {
	color: var(--e-global-color-text);
	background-color: var(--e-global-color-secondary);
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover {
	background-color: var(--e-global-color-text);
	color: var(--e-global-color-primary);
}

.mode-b2b .woofc-area.woofc-style-02 .woofc-shipping-area,
.mode-b2b .woofc-area.woofc-style-02 .woofc-area-bot .woofc-data,
.mode-b2b .woofc-area.woofc-style-02 .woofc-area-bot .woofc-total {
	display: none;
}

span.error-msg {
	color: red;
	font-size: 14px;
	margin-top: -10px;
}

a.button.gg-direct-order {
	background-color: var(--e-global-color-text);
	font-family: "Roboto Flex", Sans-serif;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 24px;
	fill: var(--e-global-color-text);
	color: var(--e-global-color-primary);
	border-radius: 100px 100px 100px 100px;
	float: none !important;
	text-align: center;
}

.woocommerce ul#shipping_method li label {
	font-size: 16px;
	line-height: 1.2em;
}

.woocommerce .elementor-jet-checkout-order-review #order_review .shop_table #shipping_method li {
	margin: 0 0 20px !important;
	display: flex;
	align-items: flex-start;
}

@media (max-width: 1024px) {
	.gg-offerte-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.gg-mode-float {
		top: 70%;
	}
}

@media (max-width: 767px) {

	.gg-offerte-layout .gg-offerte-layout__cart,
	.gg-offerte-layout .gg-offerte-layout__form {
		padding: 18px;
	}

	.gg-offerte-layout .gg-offerte-form__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.gg-offerte-layout .shop_table th {
		display: none;
	}

	/* The Kleur label gives up its column, so all four swatches fit on one line. */
	.variations tr:has(.gg-swatches) th,
	.variations tr:has(.gg-swatches) td {
		display: block;
		width: 100%;
	}

	.gg-swatches {
		gap: 8px;
	}

	.gg-swatches .gg-swatch {
		width: 56px;
		height: 56px;
		padding: 3px;
	}

	/* No floating tabs on a phone, the switch lives in the mobile header there. */
	.gg-mode-float {
		display: none;
	}

	/* Mobile header switch, a shortcode widget with the class gg-mode-switch-mobile in its own row under the logo
	   row: full width, both sides an equal half. The widget itself stays a block, so Elementor's .elementor-shortcode
	   wrapper inside it keeps the full width instead of shrinking to the pill. */
	.gg-mode-switch-mobile {
		width: 100%;
	}

	.gg-mode-switch-mobile .gg-mode-switch,
	.gg-mode-switch-mobile .gg-switch {
		display: flex;
		width: 100%;
	}

	.gg-mode-switch-mobile .gg-switch {
		padding: 3px;
		font-size: 14px;
	}

	.gg-mode-switch-mobile .gg-switch .gg-switch__item {
		flex: 1 1 0;
		padding: 9px 12px;
		text-align: center;
	}

	/* An open tab covers the content on a phone, so the active side only sticks out 12px past the other. */
	.gg-mode-float .gg-switch .gg-switch__item.is-active,
	.gg-mode-float .gg-switch .gg-switch__item.is-active:hover,
	.gg-mode-float .gg-switch .gg-switch__item.is-active:focus {
		max-width: 60px;
		color: transparent;
	}

	a.button.gg-direct-order {
		margin-left: 0 !important;
	}


}

/* Product configurator: Goesten colours and compact configuration rows. */
.gg-configurator,
.gg-configurator * {
	box-sizing: border-box;
}

.gg-configurator {
	--gg-ink: var(--e-global-color-text, #372C24);
	--gg-accent: var(--e-global-color-accent, #E6C616);
	--gg-cream: var(--e-global-color-fa016a8, #F5F4F0);
	color: var(--gg-ink);
}

.gg-configurator .gg-configurator__dialog,
.gg-configurator .gg-configurator__picker {
	width: min(1400px, calc(100vw - 48px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 32px;
	border: 0;
	border-radius: 24px;
	background: var(--gg-cream);
	color: var(--gg-ink);
	font-family: var(--e-global-typography-text-font-family, 'Roboto Flex'), sans-serif;
	font-size: 16px;
	line-height: 1.5;
	overflow: auto;
}

.gg-configurator dialog::backdrop {
	background: rgba(55, 44, 36, .48);
}

.gg-configurator .gg-configurator__layout {
	display: grid;
	grid-template-columns: minmax(200px, 26%) minmax(0, 1fr);
	align-items: start;
	gap: 24px;
}

.gg-configurator .gg-configurator__product,
.gg-configurator .gg-configurator__form {
	padding: 28px;
	border-radius: 20px;
	background: #fff;
	min-width: 0;
	margin: 0;
}

.gg-configurator .gg-configurator__product img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: contain;
}

.gg-configurator .gg-configurator__product h2 {
	margin: 24px 0 0;
	font-family: var(--e-global-typography-primary-font-family, 'Lora'), serif;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.3;
	color: var(--gg-ink);
}

.gg-configurator .gg-configurator__rows {
	overflow-x: auto;
	padding: 4px;
}

.gg-configurator .gg-configurator__row {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	min-width: max-content;
}

.gg-configurator .gg-configurator__choices {
	display: grid;
	grid-template-columns: 76px repeat(var(--gg-option-count, 1), minmax(150px, 1fr)) 40px;
	align-items: end;
	gap: 14px;
}

.gg-configurator .gg-configurator__choices label {
	display: block;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.gg-configurator .gg-configurator__choices label>span {
	display: block;
	margin-bottom: 12px;
}

.gg-configurator .gg-configurator__row legend,
.gg-configurator .gg-configurator__row:not(:first-child) label>span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gg-configurator .gg-configurator__choices input,
.gg-configurator .gg-configurator__choices select,
.gg-configurator button.gg-configurator__choose {
	display: block;
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #CCC7BF;
	border-radius: 8px;
	background: #fff;
	color: var(--gg-ink);
	font: inherit;
	font-weight: 400;
	text-align: left;
}

.gg-configurator button.gg-configurator__choose {
	position: relative;
	padding-right: 36px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.gg-configurator button.gg-configurator__choose::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 18px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.gg-configurator button.button.gg-configurator__open,
.gg-configurator button.button.gg-configurator__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 100px;
	background: var(--gg-accent);
	color: var(--gg-ink);
	font-family: var(--e-global-typography-text-font-family, 'Roboto Flex'), sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.gg-configurator button.button.gg-configurator__open:hover,
.gg-configurator button.button.gg-configurator__submit:hover {
	background: var(--gg-ink);
	color: #fff;
}

.gg-configurator button.gg-configurator__close {
	position: absolute;
	right: 8px;
	top: 8px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--gg-ink);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.gg-configurator button.gg-configurator__remove,
.gg-configurator button.gg-configurator__add,
.gg-configurator button.gg-configurator__cancel {
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gg-ink);
	font: inherit;
	text-transform: none;
	cursor: pointer;
}

.gg-configurator button.gg-configurator__remove {
	font-size: 24px;
	height: 48px;
	width: 40px;
}

/* Keep the action column aligned when only one row exists. */
.gg-configurator button.gg-configurator__remove[hidden] {
	display: block !important;
	visibility: hidden;
}

.gg-configurator button.gg-configurator__add {
	margin-top: 4px;
}

.gg-configurator button.gg-configurator__cancel:hover,
.gg-configurator button.gg-configurator__add:hover,
.gg-configurator button.gg-configurator__remove:hover,
.gg-configurator button.gg-configurator__close:hover {
	background: var(--gg-cream);
}

.gg-configurator .gg-configurator__summary {
	margin: 36px 0 20px;
	font-size: 18px;
}

.gg-configurator .gg-configurator__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.gg-configurator .gg-configurator__error {
	margin: 16px 0;
	color: #A52222;
}

.gg-configurator [hidden] {
	display: none !important;
}

.gg-configurator button:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.gg-configurator :focus-visible {
	outline: 2px solid var(--gg-ink);
	outline-offset: 3px;
}

.gg-configurator .gg-configurator__picker {
	width: min(860px, calc(100vw - 48px));
	padding: 36px;
	background: #fff;
	box-shadow: 0 20px 80px rgba(55, 44, 36, .2);
}

.gg-configurator .gg-configurator__picker h2 {
	margin: 0 36px 28px 0;
	color: var(--gg-ink);
	font: inherit;
	font-size: 24px;
	font-weight: 600;
}

.gg-configurator .gg-configurator__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
}

.gg-configurator button.gg-configurator__option {
	min-height: 80px;
	padding: 16px;
	border: 1px solid #CCC7BF;
	border-radius: 12px;
	background: var(--gg-cream);
	color: var(--gg-ink);
	font: inherit;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.gg-configurator button.gg-configurator__option:hover,
.gg-configurator button.gg-configurator__option[aria-pressed="true"] {
	border-color: var(--gg-ink);
	background: var(--gg-accent);
}

@media (max-width: 767px) {

	.gg-configurator .gg-configurator__dialog,
	.gg-configurator .gg-configurator__picker {
		padding: 48px 12px 12px;
		width: calc(100vw - 16px);
		max-height: calc(100dvh - 16px);
		border-radius: 16px;
	}

	.gg-configurator .gg-configurator__layout {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.gg-configurator .gg-configurator__product,
	.gg-configurator .gg-configurator__form {
		padding: 16px;
	}

	.gg-configurator .gg-configurator__product {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.gg-configurator .gg-configurator__product img {
		height: 100px;
		width: 90px;
	}

	.gg-configurator .gg-configurator__product h2 {
		margin: 0;
		font-size: 20px;
	}

	.gg-configurator .gg-configurator__row {
		min-width: 0;
		padding-bottom: 16px;
		border-bottom: 1px solid #EEECE1;
	}

	.gg-configurator .gg-configurator__choices {
		grid-template-columns: minmax(0, 1fr) 40px;
		gap: 12px;
	}

	.gg-configurator .gg-configurator__quantity {
		grid-column: 1;
		max-width: 90px;
	}

	.gg-configurator .gg-configurator__attribute {
		grid-column: 1 / -1;
	}

	.gg-configurator .gg-configurator__remove {
		grid-column: 2;
		grid-row: 1;
	}

	.gg-configurator .gg-configurator__row legend,
	.gg-configurator .gg-configurator__row:not(:first-child) label>span {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 12px;
		clip-path: none;
		white-space: normal;
	}

	.gg-configurator .gg-configurator__row legend {
		font-weight: 600;
	}

	.gg-configurator .gg-configurator__actions>button {
		width: 100%;
	}

	.gg-configurator .gg-configurator__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.gg-configurator .gg-configurator__summary {
		margin-top: 24px;
	}

	.gg-whatsapp svg {
		width: 25px;
		height: 25px;
	}

	.gg-whatsapp {
		width: 40px;
		height: 40px;
	}

	.gg-mode-float .gg-switch .gg-switch__item,
	.gg-mode-float .gg-switch .gg-switch__item:hover,
	.gg-mode-float .gg-switch .gg-switch__item:focus {
		max-width: 40px;
		padding: 8px;
	}

	.gg-mode-float .gg-switch .gg-switch__item::before {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
	}

	.gg-mode-float .gg-switch .gg-switch__item.is-active,
	.gg-mode-float .gg-switch .gg-switch__item.is-active:hover,
	.gg-mode-float .gg-switch .gg-switch__item.is-active:focus {
		max-width: 50px;
	}

	.gg-float-actions .gg-to-top {
		width: 40px;
		height: 40px;
	}
}

/* The shortcode replaces the standard single-product purchase form. */
.single-product.gg-configurator-active form.cart {
	display: none;
}

.main-con-div {
	position: relative;
}

.main-con-div .bekijken-img {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	z-index: 2;
}

.sale-btn-menu .jet-mega-menu-item__label {
	color: #B3402A;
}

/* Hide the whole checkbox filter box when no options remain after indexing. */
.e-con:is(.categories-filter-wrap,
	.materiaal-filter-wrap,
	.kleur-filter-wrap,
	.stapelbar-filter-wrap,
	.verri-filter-wrap):not(:has(.jet-checkboxes-list__row:not(.jet-filter-row-hide))) {
	display: none;
}

/* Price is a range slider, not a checkbox list. */
.e-con.prijs-filter-wrap:not(:has(.jet-range)),
.e-con.prijs-filter-wrap:has(.jet-smart-filters-range[style*="display: none"]),
.elementor:has(#product-listing-b2b .jet-listing-not-found) .e-con.prijs-filter-wrap {
	display: none;
}

.usps-mobile-wrapper {
	border-radius: 16px;
}