/*
 * JV Productinformatie 1.1.0 — maattabel voor schoenen
 *
 * Alle regels staan binnen .jvpi-maattabel.jvpi-schoenen. Die klassen zet de
 * plugin zelf op de wikkel van de maattabel, en alleen wanneer onmiskenbaar
 * vaststaat dat het om een schoenmaattabel gaat. Een kledingtabel, een tabel
 * met een afwijkende opbouw of een product waarbij het niet zeker is, houdt
 * dus exact de oude weergave.
 *
 * Uitzondering: één regel voor de tabkop, omdat de tabnaam nu de - soms lange -
 * titel van de maattabel is. Die regel is met de id van die ene tab begrensd.
 */

/* De tabnaam kan lang zijn ("The Last Redemption Dames Sneakers Maatgids").
   Het thema zet ul.tabs li op nowrap; hier mag hij afbreken. */
#tab-title-ts_size_chart {
	white-space: normal;
	max-width: 100%;
}

/* ---------------------------------------------------------------- tabel -- */

.jvpi-maattabel.jvpi-schoenen .jvpi-mt-schuif {
	max-width: 100%;
	max-height: 400px;                   /* lange lijst: binnen de tabel scrollen */
	overflow-x: auto;                    /* alleen de tabel schuift, nooit de pagina */
	overflow-y: auto;
	scrollbar-gutter: stable;            /* geen verspringing als het scrollen aan/uit gaat */
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e3e8f0;
	border-radius: 12px;
	background: #ffffff;
}

/* Tabel nog niet helemaal in beeld (zet jv-maattabel.js): de pagina scrolt, niet de tabel. */
.jvpi-maattabel.jvpi-schoenen .jvpi-mt-schuif.jvpi-mt-wacht {
	overflow-y: hidden;
}

.jvpi-maattabel.jvpi-schoenen .jvpi-mt-schuif:focus-visible {
	outline: 2px solid #2c5aa0;
	outline-offset: 2px;
}

.jvpi-maattabel.jvpi-schoenen table.jvpi-mt {
	width: 100%;
	min-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: auto;                  /* kolommen naar de inhoud, niet gelijk verdeeld */
	background: transparent;
	font-size: 14px;
	line-height: 1.45;
}

.jvpi-maattabel.jvpi-schoenen table.jvpi-mt th,
.jvpi-maattabel.jvpi-schoenen table.jvpi-mt td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid #eceff5;
	background: #ffffff;
	color: #2b3348;
	font-family: inherit;
	font-weight: 400;
	font-size: inherit;
	line-height: inherit;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;                 /* 35.5 en 8.50 blijven op één regel */
}

/* Rijen om en om, heel licht. */
.jvpi-maattabel.jvpi-schoenen table.jvpi-mt tr:nth-child(2n) th,
.jvpi-maattabel.jvpi-schoenen table.jvpi-mt tr:nth-child(2n) td {
	background: #fafbfd;
}

.jvpi-maattabel.jvpi-schoenen table.jvpi-mt tr:last-child th,
.jvpi-maattabel.jvpi-schoenen table.jvpi-mt tr:last-child td {
	border-bottom: 0;
}

/* Kolomkoppen: iets meer nadruk, geen zware letters. Blijven bovenaan staan
   bij scrollen; de dekkende achtergrond houdt de rijen eronder onzichtbaar. */
.jvpi-maattabel.jvpi-schoenen table.jvpi-mt th.jvpi-mt-kop {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f6f8fb;
	color: #16234a;
	font-weight: 600;
	letter-spacing: .01em;
	border-bottom: 1px solid #e3e8f0;
}

/* De EU-kolom: rustig lichtblauw, en in beeld als de tabel opzij geschoven is. */
.jvpi-maattabel.jvpi-schoenen table.jvpi-mt th.jvpi-mt-eu {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #eef4fe;
	color: #16234a;
	font-weight: 600;
	border-right: 1px solid #e3e8f0;
}

.jvpi-maattabel.jvpi-schoenen table.jvpi-mt tr:nth-child(2n) th.jvpi-mt-eu {
	background: #e7effc;
}

/* De hoekcel zit vast in beide richtingen en ligt boven kop en EU-kolom. */
.jvpi-maattabel.jvpi-schoenen table.jvpi-mt th.jvpi-mt-kop.jvpi-mt-eu {
	top: 0;
	left: 0;
	z-index: 3;
	background: #e3edfd;
}

/* ------------------------------------------------------------ meetuitleg -- */

.jvpi-maattabel.jvpi-schoenen {
	--jvpi-liniaal: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='7.5' width='21' height='9' rx='1.5'/%3E%3Cpath d='M6 7.5v3M10 7.5v4.5M14 7.5v3M18 7.5v4.5'/%3E%3C/svg%3E");
}

/*
 * De balk is lichtblauw, het uitgeklapte vlak eronder is wit. Alleen de balk
 * draagt dus kleur; zo blijft de uitleg rustig leesbaar.
 */
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg {
	margin: 0 0 14px 0;
	padding: 0;
	max-width: none;
	border: 1px solid #e3e8f0;
	border-radius: 12px;
	overflow: hidden;                    /* houdt de balk binnen de ronde hoeken */
	background: #ffffff;
	color: #374151;
	font-family: inherit;
	line-height: 1.5;
}

.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	background: #edf4ff;
	color: #16234a;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

/* Alles onder de balk: witte ondergrond, neutraal donkergrijze tekst. */
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > *:not(summary),
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg li,
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg p {
	color: #374151;
}

/* Het tipvak hield zijn eigen vlak, maar nu subtiel lichtgrijs. */
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg .jvpi-mt-tip,
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg .jvpi-mt-tip p {
	background: #f5f6f8;
	color: #374151;
}

.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg .jvpi-mt-tip p {
	background: transparent;
}

.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > summary::-webkit-details-marker {
	display: none;
}

/* Liniaaltje vóór de tekst en een chevron erachter, beide zonder extra bestand. */
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: #16234a;
	-webkit-mask: var(--jvpi-liniaal) center/20px 20px no-repeat;
	mask: var(--jvpi-liniaal) center/20px 20px no-repeat;
}

.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid #16234a;
	border-bottom: 2px solid #16234a;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg[open] > summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > summary:focus-visible {
	outline: 2px solid #2c5aa0;
	outline-offset: -2px;
}

/* De uitleg zelf blijft inhoudelijk ongewijzigd; alleen de ruimte eromheen. */
.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > *:not(summary) {
	margin-left: 16px;
	margin-right: 16px;
}

.jvpi-maattabel.jvpi-schoenen details.jvpi-mt-meetuitleg > *:last-child {
	margin-bottom: 16px;
}

/* --------------------------------------------------------------- breder -- */

@media (min-width: 600px) {

	.jvpi-maattabel.jvpi-schoenen table.jvpi-mt {
		font-size: 15px;
	}

	.jvpi-maattabel.jvpi-schoenen table.jvpi-mt th,
	.jvpi-maattabel.jvpi-schoenen table.jvpi-mt td {
		padding: 12px 18px;
	}
}