/* ============================================================
   Maatkeuze en snelkeuzes boven de productlijst (concept E).
   Enkel geladen op een categorie met de maatkeuze
   (include/modern/size-selector.php, thema modern). Kleuren uit
   de atelier-tokens (--at-*) met de gewone modern-tokens als
   terugval, zodat het ook zonder skin werkt.
   Lettertypes: maat in het titelfont (Pulp Display bij atelier),
   kleine tekst in het UI-font (--shop-font-ui, bv. DM Sans). Geen
   kapitalen; alle maten in hele px.
   ============================================================ */

/* ---------- Maatkeuze: één gesegmenteerde balk met 4 gelijke delen ---------- */
.shop-sizes {
	margin: 0 0 16px;
}
.shop-sizes__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 !important;
	padding: 0;
	list-style: none !important;
	border: 1px solid var(--at-line-strong, var(--shop-border-strong));
	border-radius: 14px;
	overflow: hidden;
	background: var(--at-bg, var(--shop-bg-1));
}
.shop-sizes__list > li {
	display: flex;
	margin: 0 !important;
	min-width: 0;
}
.shop-sizes__list > li + li {
	border-left: 1px solid var(--at-line, var(--shop-border));
}
.shop-size {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 0;
	min-height: 76px;
	padding: 12px 16px;
	background: var(--at-bg, var(--shop-bg-1));
	color: var(--at-ink, var(--shop-fg-1)) !important;
	text-decoration: none !important;
	transition: background-color var(--shop-dur-fast, 0.12s) ease;
}
.shop-size:hover {
	background: var(--at-surface, var(--shop-bg-2));
}
.shop-size.is-active,
.shop-size.is-active:hover {
	background: var(--at-ink, var(--shop-fg-1));
	color: #ffffff !important;
}
/* Focus binnen de knop (de balk heeft overflow: hidden). !important wint van
   :focus-visible in modern-base.css. Op de gekozen maat of snelkeuze (donkere
   vulling) een witte ring met een donkere rand erbuiten. */
.shop-size:focus-visible,
.shop-choice:focus-visible {
	outline: 3px solid var(--at-ink, var(--shop-fg-1)) !important;
	outline-offset: -3px;
}
.shop-size.is-active:focus-visible,
.shop-choice.is-active:focus-visible {
	outline-color: #ffffff !important;
	outline-offset: -6px;
}
.shop-size__icon {
	flex: none;
	width: 22px;
	height: 22px;
}
.shop-size--2 .shop-size__icon {
	width: 26px;
	height: 26px;
}
.shop-size--3 .shop-size__icon {
	width: 30px;
	height: 30px;
}
.shop-size--4 .shop-size__icon {
	width: 34px;
	height: 34px;
}
.shop-size__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}
.shop-size__label {
	font-family: var(--shop-font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
}
.shop-size__note {
	font-family: var(--shop-font-ui, var(--shop-font-sans));
	font-size: 13px;
	line-height: 18px;
	opacity: 0.85;
}

/* ---------- Snelkeuzes: één rij pillen ---------- */
.shop-choices__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px !important;
	padding: 0;
	list-style: none !important;
}
.shop-choices__list > li {
	margin: 0 !important;
	flex: none;
}
.shop-choice {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--at-line-strong, var(--shop-border-strong));
	border-radius: var(--at-radius-pill, var(--shop-r-pill));
	background: var(--at-bg, var(--shop-bg-1));
	color: var(--at-ink, var(--shop-fg-1)) !important;
	font-family: var(--shop-font-ui, var(--shop-font-sans));
	font-size: 15px;
	line-height: 20px;
	text-decoration: none !important;
	white-space: nowrap;
}
.shop-choice:hover {
	border-color: var(--at-ink, var(--shop-fg-1));
}
.shop-choice.is-active {
	border-color: var(--at-ink, var(--shop-fg-1));
	background: var(--at-ink, var(--shop-fg-1));
	color: #ffffff !important;
}

/* ---------- Samenvatting links van het sorteren ---------- */
main #productlist .productlist .columns.sort > .column.shop-size-summary {
	flex: 1 1 auto;
}
.shop-size-summary p {
	margin: 0;
	color: var(--at-ink-soft, var(--shop-fg-2));
	font-family: var(--shop-font-ui, var(--shop-font-sans));
	font-size: 14px;
	line-height: 20px;
}

/* ---------- Gsm: 4 kolommen, icoon boven het label; chips scrollen ---------- */
@media screen and (max-width: 825px) {
	.shop-sizes {
		margin-bottom: 12px;
	}
	.shop-sizes__list {
		border-radius: 12px;
	}
	.shop-size {
		flex-direction: column;
		gap: 6px;
		min-height: 64px;
		padding: 8px 4px;
	}
	.shop-size__text {
		align-items: center;
	}
	.shop-size__label {
		font-size: 16px;
		line-height: 18px;
	}
	.shop-size__note {
		display: none;
	}
	.shop-size__icon {
		width: 18px;
		height: 18px;
	}
	.shop-size--2 .shop-size__icon {
		width: 21px;
		height: 21px;
	}
	.shop-size--3 .shop-size__icon {
		width: 24px;
		height: 24px;
	}
	.shop-size--4 .shop-size__icon {
		width: 27px;
		height: 27px;
	}
	.shop-choices {
		position: relative;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.shop-choices::-webkit-scrollbar {
		display: none;
	}
	.shop-choices__list {
		flex-wrap: nowrap;
		gap: 8px;
		margin-bottom: 4px !important;
	}
	.shop-choice {
		min-height: 44px;
		padding: 0 16px;
	}
	/* Samenvatting op een eigen regel, sorteren eronder. */
	main #productlist .productlist .columns.sort:has(> .shop-size-summary) {
		flex-wrap: wrap;
	}
	main #productlist .productlist .columns.sort > .column.shop-size-summary {
		flex: 1 1 100%;
	}
	/* Label "op bestelling" mag op een smalle kaart naar een tweede regel (geen afgekapte tekst). */
	main #productlist .productlist:has(.shop-sizes) .products-wrapper .card > .card-image > .tags-wrapper > .tag {
		border-radius: 10px !important;
	}
	main #productlist .productlist:has(.shop-sizes) .products-wrapper .card > .card-image > .tags-wrapper > .tag p {
		white-space: normal;
		overflow: visible;
	}
}
@media (prefers-reduced-motion: reduce) {
	.shop-size {
		transition: none;
	}
}