/* Variantkeuze als horizontale schuif, naar het model van de marge-schuif in
   de inkoopomgeving. De originele <select> blijft in de pagina staan en blijft
   leidend; de schuif zet alleen zijn waarde. Zo blijft alle WooCommerce-logica
   (prijs, voorraad, beeld, winkelwagen) ongemoeid. */
.vk-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vk-schuif { display: flex; align-items: center; gap: 1rem; width: 100%; min-width: 220px; }
.vk-schuif .vk-range {
	-webkit-appearance: none; appearance: none;
	flex: 1 1 auto; height: 10px; margin: 0; padding: 0;
	border-radius: 999px; background: #e4e4e4; outline: none; cursor: pointer;
	background-image: linear-gradient(#2d6a34, #2d6a34);
	background-repeat: no-repeat;
	background-size: var(--vk-vulling, 0%) 100%;
}
.vk-schuif .vk-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 22px; height: 22px; border-radius: 50%;
	background: #2d6a34; border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: grab;
}
.vk-schuif .vk-range::-webkit-slider-thumb:active { cursor: grabbing; }
.vk-schuif .vk-range::-moz-range-thumb {
	width: 16px; height: 16px; border-radius: 50%;
	background: #2d6a34; border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: grab;
}
.vk-schuif .vk-range::-moz-range-track { height: 10px; border-radius: 999px; background: transparent; }
.vk-schuif .vk-waarde {
	flex: 0 0 auto; min-width: 5.5rem; text-align: right;
	font-size: 1.15rem; font-weight: 700; color: #222; white-space: nowrap;
}
.vk-grenzen { display: flex; justify-content: space-between; font-size: .8rem; color: #888; margin-top: .25rem; }

/* De variatietabel stond in de flex-rij van .cart naast het prijsblok en
   schoof daardoor naar rechts, tot voorbij de rechterrand. Op een eigen volle
   regel zetten, zodat hij links uitlijnt met de prijs erboven. */
#productrightblock .cart table.variations {
	flex: 1 0 100%;
	width: 100%;
	table-layout: fixed;
	margin: 0 0 .75rem;
}
#productrightblock .cart table.variations th.label { width: 8rem; }
#productrightblock .cart table.variations td.value { width: auto; }
#productrightblock .cart table.variations .value { flex-wrap: wrap; gap: .5rem 1rem; }
.vk-omhulsel { flex: 1 1 auto; width: 100%; min-width: 0; }
.vk-schuif { min-width: 0; }

/* main.css zet #productrightblock .row:nth-child(6) en (7) op 50% inline-block: het
   prijsblok links, de variatiekeuze rechts ernaast. Dat was prima voor een smal
   uitklaplijstje, maar een schuif hoort over de volle breedte en links uitgelijnd.
   variant-knoppen.js hangt deze klasse op die rij zodra er een schuif in staat. */
#productrightblock .row.vk-volledige-regel {
	width: 100%;
	display: block;
	margin-left: 0;
	margin-right: 0;
}
#productrightblock .row.vk-volledige-regel > .col-12 { padding-left: 0; padding-right: 0; }