/* ============================================================
   Skin sorbet, deel 2: productlijst, productpagina, mandje, kassa.
   Alleen onder thema modern + skin = sorbet (theme.php). Zelfde
   regels als deel 1: crème, inkt, roze knoppen met inktrand, rond,
   maten in hele px, display nooit onder 24 px
   (tests/unit/AtelierTypeTest.php). De kassa (flow, velden,
   payloads) verandert niet: enkel opmaak.
   ============================================================ */

/* ---------- Kruimelpad ---------- */
main div#breadcrumbs a,
main div#breadcrumbs li {
	color: var(--so-ink-soft);
	font-size: 14px;
	line-height: 22px;
}
/* De tenant-css (classic-erfenis) kleurt links in de merkkleur: 'body' + id winnen. */
body div#breadcrumbs .breadcrumb li:not(.is-active) a,
body div#breadcrumbs .breadcrumb li a .icon {
	color: var(--so-ink-soft);
}
body div#breadcrumbs .breadcrumb li:not(.is-active) a:hover {
	color: var(--so-ink);
}
main div#breadcrumbs li.is-active a {
	color: var(--so-ink);
	font-weight: 600;
}

/* ---------- Velden: wit, inktrand, rond ---------- */
main .select select,
main .input,
main .textarea {
	border: 2px solid var(--so-ink) !important;
	border-radius: 16px !important;
	background-color: var(--so-surface);
	color: var(--so-ink);
	box-shadow: none !important;
}
main .select:not(.is-multiple):not(.is-loading)::after,
main form .select:not(.is-multiple):not(.is-loading)::after {
	border-color: var(--so-ink) !important;
}
main form .input:focus,
main form .textarea:focus,
main form .select select:focus {
	border-color: var(--so-ink) !important;
	box-shadow: var(--so-sticker-sm) !important;
}
main form .field .label > i,
main form .field .label > svg {
	color: var(--so-pink-text);
}
main .input::placeholder,
main .textarea::placeholder {
	color: var(--so-ink-mute);
	opacity: 1;
}

/* ---------- Productlijst: kop in de display, kaarten met inktrand ---------- */
main #productlist .productlist > .columns > .column > .title.is-4 {
	font-size: 48px;
	line-height: 52px;
	font-weight: 900 !important;
	margin-bottom: 16px;
}
main #productlist .productlist .columns.sort > .column.is-hidden-mobile p,
.shop-sort__label {
	color: var(--so-ink-mute);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}
.shop-products .card,
main #productlist .products-wrapper .card {
	overflow: hidden;
	background: var(--so-surface);
	border: var(--so-border);
	border-radius: 20px;
	box-shadow: none;
	transition: transform var(--shop-dur-fast) var(--shop-ease), box-shadow var(--shop-dur-fast) var(--shop-ease);
}
.shop-products .card:hover,
main #productlist .products-wrapper .card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--so-sticker);
}
.shop-products .card-image,
main #productlist .products-wrapper .card-image {
	overflow: hidden;
	background: var(--so-cream-soft);
	border-bottom: var(--so-border);
	border-radius: 0;
}
.shop-products .card-image img,
main #productlist .products-wrapper .card-image img {
	border-radius: 0 !important;
}
.shop-products .card-content,
main #productlist .products-wrapper .card-content {
	padding: 16px 16px 20px;
}
.shop-products .card-content .head p:first-child,
main #productlist .products-wrapper .card-content .head p:first-child {
	color: var(--so-ink) !important;
	font-family: var(--so-font-ui);
	font-size: 17px !important;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0;
}
.shop-products .card-content .content > p.is-size-6,
main #productlist .products-wrapper .card-content .content > p.is-size-6 {
	color: var(--so-ink) !important;
	font-weight: 600;
}
/* Labels op een kaart: inkt-pil met witte kapitalen (12/1/16 px). */
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag {
	border-radius: 999px;
	background: var(--so-ink);
	color: #ffffff;
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag p {
	font-size: var(--so-tag-size);
	font-weight: 700;
	line-height: var(--so-tag-line);
	letter-spacing: var(--so-tag-track);
	text-transform: uppercase;
	color: #ffffff;
}
/* Filters: pillen; actief = mintvlak met inktrand. */
main #productlist .filter .tag {
	border: 2px solid var(--so-ink);
	border-radius: 999px !important;
	background: var(--so-surface);
	color: var(--so-ink);
	font-weight: 600;
}
main #productlist .filter .tag.is-active,
main #productlist .filter .active-filters .tag {
	background: var(--so-mint);
	border-color: var(--so-ink);
	color: var(--so-ink);
}
/* Filterpillen (checkboxen): inktrand van 2 px; lange namen lopen netjes over
   twee regels (16 px hoeken i.p.v. een pil); gekozen = mint. */
main #productlist .filter .is-checkradio[type=checkbox] + label {
	padding: 6px 14px !important;
	border: 2px solid var(--so-ink);
	border-radius: 16px;
	background: var(--so-surface);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}
main #productlist .filter .is-checkradio[type=checkbox] + label:hover {
	border-color: var(--so-ink);
	background: var(--so-cream-soft);
}
main #productlist .filter .is-checkradio[type=checkbox]:checked + label {
	background: var(--so-mint);
	border-color: var(--so-ink);
	color: var(--so-ink);
}
main #productlist .filter .is-checkradio[type=checkbox]:focus-visible + label {
	outline-color: var(--so-ink);
}
/* Paginering: de tenant-css (main section#productlist ...) kleurt ze blauw. */
main section#productlist .productlist .pagination .pagination-link.is-current {
	background-color: var(--so-pink);
	border-color: var(--so-ink);
	color: var(--so-ink);
}
main section#productlist .productlist .pagination .pagination-previous:hover,
main section#productlist .productlist .pagination .pagination-next:hover {
	background-color: var(--so-cream);
	border-color: var(--so-ink);
	color: var(--so-ink);
}
main .pagination-link,
main .pagination-previous,
main .pagination-next {
	border: 2px solid var(--so-ink);
	border-radius: 999px;
	color: var(--so-ink);
}
main .pagination-link.is-current,
main .pagination-previous.is-current {
	background: var(--so-pink);
	border-color: var(--so-ink);
	color: var(--so-ink);
}

/* ---------- Productpagina ---------- */
main #productinfo .productdetail .card-image img,
main #productinfo .productdetail figure img {
	border-radius: 24px;
}
main #productinfo .productdetail .title.is-4 {
	font-size: 48px !important;
	line-height: 52px;
	font-weight: 900 !important;
	margin-bottom: 12px !important;
}
main #productinfo .productdetail .title:not(.is-spaced) + .subtitle {
	font-family: var(--so-font-ui) !important;
	color: var(--so-ink-soft) !important;
	font-size: 18px;
	line-height: 28px;
}
main section#productinfo .productdetail .price-wrapper .price {
	font-family: var(--so-font-ui) !important;
	color: var(--so-ink) !important;
	font-size: 28px !important;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: 0;
}
main section#productinfo .productdetail #price-wrapper > span {
	color: var(--so-ink-mute);
	font-size: 14px;
	line-height: 20px;
}
/* Afhalen/leveren: zachte crème pillen met inkticoon. */
main section#productinfo .productdetail form .dates > span {
	background: var(--so-cream);
	border-radius: 999px;
	color: var(--so-ink-soft);
}
main section#productinfo .productdetail form .dates > span svg {
	color: var(--so-ink);
}
main section#productinfo .productdetail form .dates > span i:not([data-feather]) {
	color: var(--so-ink);
	font-style: normal;
	font-weight: 700;
}
main section#productinfo .productdetail .field > .label,
main section#productinfo .productdetail label.label {
	color: var(--so-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
}
/* Maat in een keuzekaart en de maatkiezer: UI-letter, de display is daar te klein. */
main section#productinfo .productdetail .shop-pack--choice .shop-pack__size,
.shop-size__label {
	font-family: var(--so-font-ui) !important;
	font-weight: 700;
	letter-spacing: 0;
}
/* Keuzes (maat, aantal personen): ronde tegels; gekozen = roze vlak met sticker. */
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > label > p {
	border: 2px solid var(--so-ink) !important;
	border-radius: 16px !important;
	background: var(--so-surface);
	color: var(--so-ink);
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > label:hover > p {
	background: var(--so-cream-soft);
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > input[type="radio"]:checked + label > p {
	background: var(--so-pink-tint) !important;
	border-color: var(--so-ink) !important;
	box-shadow: var(--so-sticker-sm);
	color: var(--so-ink) !important;
}
main section#productinfo .productdetail .button.shopping-cart {
	min-height: 52px;
	padding: 0 32px;
	background: var(--so-pink) !important;
	border: var(--so-border) !important;
	color: var(--so-ink) !important;
	border-radius: 999px !important;
	box-shadow: var(--so-sticker) !important;
	font-family: var(--so-font-ui) !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}
main section#productinfo .productdetail .button.shopping-cart:hover {
	background: var(--so-pink-hover) !important;
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--so-ink) !important;
}
/* Allergenen (modern-product.css): de naam staat daar in IBM Plex Mono, die
   nergens geladen wordt (systeem-monospace). Hier de UI-letter in kleine
   kapitalen en de pil met inktrand zoals de andere pillen. */
main #productinfo .shop-allergens__item {
	border: var(--so-border);
	background: var(--so-surface);
}
main #productinfo .shop-allergens__name {
	color: var(--so-ink);
	font-family: var(--so-font-ui);
	font-size: var(--so-tag-size);
	font-weight: 600;
	line-height: var(--so-tag-line);
	letter-spacing: var(--so-tag-track);
	text-transform: uppercase;
}
/* Tabs: actieve tab met een dikke roze onderlijn. */
main #productinfo .productinfo .tabs ul {
	border-bottom: 2px solid var(--so-line);
}
main #productinfo .productinfo .tabs a {
	color: var(--so-ink-mute);
	font-family: var(--so-font-ui) !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
	border-bottom-width: 4px;
	margin-bottom: -2px;
}
main #productinfo .productinfo .tabs a:hover {
	color: var(--so-ink);
}
main section#productinfo .productinfo .tabs li.is-active a {
	color: var(--so-ink);
	border-color: var(--so-pink);
}
/* Gsm: uitklaplijst in plaats van tabs. */
main .shop-acc__head {
	color: var(--so-ink);
	font-family: var(--so-font-ui) !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}
main #productinfo .productinfo .tabs-content article.content {
	color: var(--so-ink-soft);
	font-size: 17px;
	line-height: 28px;
}

/* ---------- Mandje en kassa: blokken als crème kaarten ---------- */
.shop-co .checkout-content .box,
main .shop-cart .box,
main #mand .box {
	border: var(--so-border);
	border-radius: 20px;
	background: var(--so-surface);
	box-shadow: none;
}

/* ---------- Display-koppen van mandje, kassa, smaakkiezer, lade ----------
   modern zet ze in --shop-font-display (= Sorbet Display) op 17-20 px; onder
   24 px loopt de zachte schreef dicht, dus 24 px, 700. */
.shop-co .checkout-content .head h3,
.shop-co .checkout-content .title.is-5,
.shop-flv__legend,
.shop-drawer__title,
main section#registreren .step h2 {
	font-family: var(--so-font-display) !important;
	font-size: 24px !important;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: var(--so-display-track);
	color: var(--so-ink) !important;
}

@media screen and (max-width: 768px) {
	main #productlist .productlist > .columns > .column > .title.is-4,
	main #productinfo .productdetail .title.is-4 {
		font-size: 36px !important;
		line-height: 40px;
	}
	main section#productinfo .productdetail .button.shopping-cart {
		min-height: 48px;
	}
}
/* Smalle gsm's (320 px): de rij aantal + knop loopt niet om (.columns.is-mobile);
   met 32 px binnenmarge stak de knop 23 px buiten beeld. */
@media screen and (max-width: 359px) {
	main section#productinfo .productdetail .button.shopping-cart {
		padding: 0 16px;
		font-size: 16px;
	}
}