/* Joh Clothing v2: groep Assortiment en Catalogi. Alleen wat 10-basis.css en 20-componenten.css niet dekken.
 * joh-assortiment-kleding (vc_row, Assortiment #kleding): uitsnede van het staande beeld op tablet en gsm.
 * joh-assortiment-criteria (el_class op een joh-kaart, Assortiment): lange lijst in twee kolommen op desktop.
 * joh-geen-breuk (span in een titel): woord met koppelteken niet afbreken ("high-end").
 * joh-springnaar (p in de paginakop van Catalogi): ankerlinks als pillen.
 */

/* Kleding: 16:10 (tablet) en 4:3 (gsm) sneden door het gezicht; hoofd en bovenkant van de print in beeld houden */
@media only screen and (max-width: 999px) {
	body .main-content .joh-assortiment-kleding .img-with-aniamtion-wrap img { object-position: 50% 17%; }
}

/* Tien korte criteria: twee kolommen zodat de kaart niet veel hoger wordt dan de kaart ernaast */
@media only screen and (min-width: 1000px) {
	body .main-content .joh-assortiment-criteria ul { columns: 2; column-gap: 40px; }
	body .main-content .joh-assortiment-criteria ul li { break-inside: avoid; }
}

body .main-content .joh-geen-breuk { white-space: nowrap; }

/* Spring naar: pillen met een tikdoel van minstens 36 px hoog */
body .main-content .wpb_text_column p.joh-springnaar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
}
body .main-content .wpb_text_column p.joh-springnaar span {
	color: var(--joh-tekst-zacht);
	margin-right: 4px;
}
body .main-content .wpb_text_column p.joh-springnaar a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 200px;
	background: var(--joh-wit);
	box-shadow: var(--joh-schaduw);
	color: var(--joh-tekst);
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease, box-shadow .2s ease;
}
body .main-content .wpb_text_column p.joh-springnaar a:hover,
body .main-content .wpb_text_column p.joh-springnaar a:focus-visible {
	color: var(--joh-rood);
	box-shadow: var(--joh-schaduw-hover);
}
@media only screen and (max-width: 690px) {
	body .main-content .wpb_text_column p.joh-springnaar { gap: 6px; }
	body .main-content .wpb_text_column p.joh-springnaar span { flex-basis: 100%; margin: 0 0 2px; }
	body .main-content .wpb_text_column p.joh-springnaar a { padding: 6px 12px; font-size: 13px; }
}