/**
 * Vlotweg — scrollbare tabelwrapper (post-closeout, 12 september 2026)
 * Zet de class `vw-tabel-scroll` op een Elementor-tekstwidget met een tabel (via "CSS-classes" van de
 * widget). De widgetcontainer wordt dan de wrapper: horizontaal scrollbaar, met randschaduwen als
 * hint en op mobiel een korte tekst. Inhoud, tekstgrootte en kolommen blijven ongewijzigd; de tabel
 * krijgt een minimumbreedte zodat de cellen leesbaar blijven in plaats van samengeperst.
 * Eerste gebruik: pillar /huis-verkopen/ (archive-template 3780, widget 0a65780).
 */
.vw-tabel-scroll .elementor-widget-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	scrollbar-width: thin;
	/* randschaduwen die verdwijnen aan het einde van de scroll (background-attachment: local/scroll) */
	background:
		linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
		linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0,
		linear-gradient(to right, rgba(8,53,53,.18), rgba(8,53,53,0)),
		linear-gradient(to left, rgba(8,53,53,.18), rgba(8,53,53,0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}
.vw-tabel-scroll .elementor-widget-container > table {
	min-width: 640px;
	width: 100%;
	margin-bottom: 0;
}
.vw-tabel-scroll .elementor-widget-container:focus-visible { outline: 3px solid #083535; outline-offset: 2px; }
@media (max-width: 767px) {
	.vw-tabel-scroll .elementor-widget-container::before {
		content: "Schuif de tabel opzij om alle kolommen te zien";
		display: block;
		font-size: .8rem;
		color: #5A6A67;
		padding: 0 0 .4rem;
	}
}