/* Tuinkussen Configurator */
.tk-conf {
	--tk-ink: var(--tk-color-ink, #1A1D17);
	--tk-lime: var(--tk-color-lime, #8ED530);
	--tk-green: var(--tk-color-green, #2F6B12);
	--tk-ground: var(--tk-color-ground, #F5F7EF);
	--tk-line: var(--tk-color-line, #E3E7DA);
	--tk-muted: var(--tk-color-muted, #4A5042);
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 20px;
	color: var(--tk-ink);
	width: 100%;
}
.tk-step {
	position: relative;
	border: 1px solid var(--tk-line);
	border-radius: 20px;
	padding: 20px 22px 22px;
	margin: 0;
	min-width: 0;
}
.tk-step__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 19px;
	font-weight: 700;
	padding: 0;
	margin-bottom: 14px;
	float: left;
	width: 100%;
}
.tk-step__title + * { clear: both; }
.tk-step__num {
	width: 32px; height: 32px;
	border-radius: 10px;
	background: var(--tk-lime);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex: none;
}
.tk-step__help {
	display: inline-block;
	clear: both;
	margin: -4px 0 12px;
	font-weight: 600;
	font-size: 15px;
	color: var(--tk-green);
}
@media (min-width: 600px) {
	.tk-step__title { padding-right: 190px; }
	.tk-step__help { position: absolute; top: 24px; right: 22px; margin: 0; }
}
.tk-sizes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	clear: both;
}
.tk-size { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.tk-size__field {
	display: flex; align-items: center; gap: 4px;
	border: 1.5px solid #CFD5C4;
	border-radius: 12px;
	padding: 0 14px;
	background: #fff;
}
.tk-size__field:focus-within { border-color: var(--tk-ink); box-shadow: 0 0 0 3px var(--tk-lime); }
.tk-size__field input {
	border: 0 !important; outline: none; box-shadow: none !important;
	font: inherit; font-size: 20px; font-weight: 700;
	width: 100%; padding: 12px 0 !important; background: transparent; color: var(--tk-ink);
	-moz-appearance: textfield;
}
.tk-size__field input[aria-invalid="true"] { color: #8A2B1E; }
.tk-size__field span { color: var(--tk-muted); font-weight: 500; }
.tk-warn { background: #FFF4E5; color: #7A4100; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; margin: 12px 0 0; }
.tk-hint { font-size: 14px; color: var(--tk-muted); margin: 12px 0 0; }

.tk-colls { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; clear: both; }
.tk-conf:not(.tk-js) .tk-colls { display: none; }
.tk-coll {
	flex: none;
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	padding: 10px 16px;
	border-radius: 12px;
	border: 2px solid var(--tk-line);
	background: #fff; color: var(--tk-ink);
	font: inherit; cursor: pointer;
	min-height: 44px;
}
.tk-coll small { opacity: .8; font-size: 13px; }
.tk-coll[aria-selected="true"] { background: var(--tk-ink); color: #fff; border-color: var(--tk-ink); }
.tk-coll:focus-visible { outline: 3px solid var(--tk-lime); outline-offset: 2px; }

.tk-colors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tk-colors[hidden], .tk-features[hidden] { display: none; }
.tk-swatch { position: relative; cursor: pointer; }
.tk-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk-swatch__chip {
	display: block;
	width: 48px; height: 48px;
	border-radius: 12px;
	background-color: var(--tk-swatch);
	background-image: var(--tk-swatch-img, none);
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.tk-swatch input:checked + .tk-swatch__chip { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tk-ink); }
.tk-swatch input:focus-visible + .tk-swatch__chip { outline: 3px solid var(--tk-lime); outline-offset: 5px; }
.tk-features { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tk-features li { background: var(--tk-ground); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.tk-features li::before { content: "✓ "; color: var(--tk-green); }
.tk-picked { margin: 14px 0 0; font-size: 15px; }

.tk-fills { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; clear: both; }
.tk-fill { cursor: pointer; }
.tk-fill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk-fill__card {
	display: flex; flex-direction: column; gap: 4px;
	height: 100%;
	box-sizing: border-box;
	padding: 14px;
	border-radius: 14px;
	border: 2px solid var(--tk-line);
	background: #fff;
}
.tk-fill__card small { color: var(--tk-muted); font-size: 13px; line-height: 1.4; }
.tk-fill__card em { font-style: normal; font-weight: 600; font-size: 14px; margin-top: auto; }
.tk-fill input:checked + .tk-fill__card { border-color: var(--tk-ink); box-shadow: 0 0 0 3px var(--tk-lime); }
.tk-fill input:focus-visible + .tk-fill__card { outline: 3px solid var(--tk-lime); outline-offset: 2px; }

.tk-summary {
	background: var(--tk-ink);
	color: #fff;
	border-radius: 20px;
	padding: 22px;
	display: flex; flex-direction: column; gap: 12px;
}
.tk-summary__row, .tk-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tk-summary__row span, .tk-summary__total span { color: #A3AD95; font-size: 14px; }
.tk-summary__total strong { font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; }
.tk-summary .woocommerce-Price-amount { color: inherit; }
.tk-ship { display: flex; flex-direction: column; gap: 6px; }
.tk-ship__bar { display: block; height: 8px; background: #343A2D; border-radius: 999px; overflow: hidden; }
.tk-ship__bar span { display: block; height: 100%; width: 0; background: var(--tk-lime); border-radius: 999px; transition: width .3s ease; }
.tk-ship small { color: #DDE3D3; font-size: 13px; }
.tk-conf__lead { margin: 0; color: #A3AD95; font-size: 13px; }
.tk-conf:not(.tk-js) .tk-summary__total, .tk-conf:not(.tk-js) .tk-ship { display: none; }

.tk-from { font-size: .8em; font-weight: 500; opacity: .8; }

/* Stalenformulier */
.tk-samples { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.tk-samples__picker { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.tk-samples__coll h3 { margin: 0 0 10px; font-size: 20px; }
.tk-samples__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.tk-sample { cursor: pointer; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.tk-sample input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk-sample .tk-swatch__chip { width: 100%; height: auto; aspect-ratio: 1; }
.tk-sample input:checked + .tk-swatch__chip { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tk-color-ink, #1A1D17); }
.tk-sample input:focus-visible + .tk-swatch__chip { outline: 3px solid var(--tk-color-lime, #8ED530); outline-offset: 5px; }
.tk-samples__form {
	flex: 1 1 320px; min-width: 0;
	border: 1px solid var(--tk-color-line, #E3E7DA);
	border-radius: 24px; padding: 28px;
	display: flex; flex-direction: column; gap: 12px;
}
.tk-samples__form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.tk-samples__form input[type="text"], .tk-samples__form input[type="email"] {
	border: 1.5px solid #CFD5C4; border-radius: 12px; padding: 12px 14px; font: inherit; font-weight: 500;
}
.tk-hp { position: absolute !important; left: -9999px !important; }
.tk-notice { border-radius: 14px; padding: 16px 18px; font-weight: 600; margin: 0 0 20px; }
.tk-notice--ok { background: #EAF6DA; color: #1E4A0A; }
.tk-notice--err { background: #FDECEA; color: #8A2B1E; }

/* Gratis-verzending-balk in winkelwagen */
.tk-cartship { border-radius: 16px; background: var(--tk-color-ground, #F5F7EF); padding: 14px 16px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.tk-cartship__bar { height: 8px; background: #DDE3D3; border-radius: 999px; overflow: hidden; }
.tk-cartship__bar span { display: block; height: 100%; background: var(--tk-color-lime, #8ED530); }