/* ============================================================
   Skin sorbet, deel 1: basis, knoppen, header, hero, tegels, footer.
   Alleen geladen onder thema modern + skin = sorbet (theme.php),
   na de modern-*.css: dezelfde specificiteit volstaat.
   Speels maar netjes: crème, inktzwart, roze knoppen met inktrand en
   een sticker-schaduw zonder blur, pastelvlakken. Titels in Sorbet
   Display (Fraunces zacht, nooit onder 24 px), tekst en UI in Sorbet
   UI (Chivo). Maten in hele px (tests/unit/AtelierTypeTest.php).
   ============================================================ */

/* ---------- Basis ---------- */
body {
	font-family: var(--so-font-ui) !important;
	background: var(--so-bg);
	color: var(--so-ink);
}
main,
main .is-background-white,
main .section.is-background-white {
	background: var(--so-bg) !important;
}
main p,
main li {
	color: var(--so-ink-soft);
}
/* Links in lopende tekst: diep roze (7.3:1 op crème-wit), onder de muis inkt.
   Altijd onderlijnd: tegen inkttekst haalt het roze maar 2.6:1 (WCAG 1.4.1).
   De contacttekst staat in een div, niet in een p. */
main p a:not(.button),
main article.content a:not(.button),
main section#contact a:not(.button) {
	color: var(--so-pink-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
main p a:not(.button):hover,
main article.content a:not(.button):hover,
main section#contact a:not(.button):hover {
	color: var(--so-ink);
}
/* Display-titels: Sorbet Display 700, ink, geen spatiëring. Kale h1-h3 zonder
   .title blijven in de UI-letter. Nooit onder 24 px. */
main .title,
main .title.is-3,
main .title.is-4,
main .title.is-5,
main article.content :is(h2, h3, h4, .title),
main .smaken-overzicht :is(h2, h3) {
	font-family: var(--so-font-display) !important;
	color: var(--so-ink);
	font-weight: 700;
	letter-spacing: var(--so-display-track);
}
main .title.is-3,
main article.content h2 {
	font-size: 40px;
	line-height: 44px;
	font-weight: 900;
}
main .title.is-4,
main .smaken-overzicht h2 {
	font-size: 32px;
	line-height: 36px;
}
/* De ondergrens: alles wat modern kleiner zet (is-5 = 20 px op 390 px). */
main .title.is-5,
main .title.is-6,
main article.content :is(h3, h4, .title.is-5),
main .smaken-overzicht h3 {
	font-size: 24px !important;
	line-height: 28px;
}
main .subtitle {
	font-family: var(--so-font-ui) !important;
	color: var(--so-ink-soft);
}
@media screen and (max-width: 768px) {
	main .title.is-3,
	main article.content h2 {
		font-size: 32px;
		line-height: 36px;
	}
	main .title.is-4,
	main .smaken-overzicht h2 {
		font-size: 28px;
		line-height: 32px;
	}
}
/* Sectietitel: gecentreerd, met een roze golfje eronder. */
main .shop-section__head {
	justify-content: center;
	margin-bottom: 32px;
}
main .shop-section__head .title {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: 44px !important;
	line-height: 48px;
	font-weight: 900;
	text-align: center;
}
main .shop-section__head .title::after {
	content: '';
	width: 72px;
	height: 10px;
	background: var(--so-pink);
	-webkit-mask: var(--so-wave) center / 100% 100% no-repeat;
	mask: var(--so-wave) center / 100% 100% no-repeat;
}

/* ---------- Knoppen: roze pil, inktrand van 2 px, sticker-schaduw ---------- */
main .button.is-primary,
main .button.is-dark,
main .button.is-link,
.shop-header__basket {
	font-family: var(--so-font-ui) !important;
	font-size: var(--so-btn-size);
	font-weight: 700;
	line-height: var(--so-btn-line);
	letter-spacing: 0;
	border-radius: 999px !important;
	transition: transform var(--shop-dur-fast) var(--shop-ease), box-shadow var(--shop-dur-fast) var(--shop-ease), background-color var(--shop-dur-fast) var(--shop-ease);
}
main .button.is-primary,
main .button.is-dark,
main .button.is-link {
	min-height: 48px;
	padding: 0 28px;
	background: var(--so-pink) !important;
	border: var(--so-border) !important;
	color: var(--so-ink) !important;
	box-shadow: var(--so-sticker) !important;
}
main .button.is-primary:hover,
main .button.is-dark:hover,
main .button.is-link:hover {
	background: var(--so-pink-hover) !important;
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--so-ink) !important;
}
main .button.is-primary:active,
main .button.is-dark:active,
main .button.is-link:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 var(--so-ink) !important;
}
/* Andere knoppen: de tenant-css zet ze bij hover blauw met witte tekst. */
main .button:hover {
	background-color: var(--so-cream) !important;
	border-color: var(--so-ink);
	color: var(--so-ink) !important;
}
/* Tweede knop (is-light, is-outlined): crème met inktrand, zonder schaduw. */
main .button.is-light,
main .button.is-outlined {
	border: var(--so-border) !important;
	border-radius: 999px !important;
	background: var(--so-surface) !important;
	color: var(--so-ink) !important;
	font-weight: 700;
}
main .button.is-light:hover,
main .button.is-outlined:hover {
	background: var(--so-cream) !important;
}

/* ---------- Infobalk: inkt met witte tekst ----------
   header.php print na de skin een inline <style> met de secundaire kleur;
   'html' maakt deze regels specifieker. */
html body div#info-status > .columns {
	background-color: var(--so-ink);
}
html body div#info-status > .columns > .column > p,
html body div#info-status > .columns > .column > p *,
html body div#info-status a {
	color: #ffffff;
}

/* ---------- Header: crème, inktlijn, groot logo, roze mandje ---------- */
.shop-header {
	background: var(--so-bg);
	border-bottom: var(--so-border);
}
.shop-header.is-scrolled {
	box-shadow: none;
}
.shop-header__bar {
	min-height: 88px;
}
.shop-header__logo img {
	width: 140px !important;
	max-width: none;
	height: auto;
	max-height: none;
}
.shop-header__search .input {
	height: 44px;
	border-radius: 999px !important;
	background: var(--so-surface);
	border: var(--so-border) !important;
	color: var(--so-ink);
	box-shadow: none !important;
}
.shop-header__search .input::placeholder {
	color: var(--so-ink-mute);
	opacity: 1;
}
.shop-header__search .icon {
	color: var(--so-ink) !important;
}
.shop-header__action,
.shop-menu__trigger {
	color: var(--so-ink);
	font-weight: 600;
}
.shop-header__action:hover {
	background: var(--so-cream);
	color: var(--so-ink);
}
.shop-header__basket {
	height: 44px;
	gap: 10px;
	padding: 0 20px;
	background: var(--so-pink);
	border: var(--so-border);
	color: var(--so-ink);
	box-shadow: var(--so-sticker-sm);
}
.shop-header__basket:hover {
	background: var(--so-pink-hover);
	color: var(--so-ink);
	transform: translate(-1px, -1px);
	box-shadow: var(--so-sticker);
}
/* Teller: geel rondje met inktrand en inktcijfer. */
.shop-header .badge[data-badge]::after {
	background: var(--so-yellow);
	color: var(--so-ink);
	border: 2px solid var(--so-ink);
	box-shadow: none;
	font: 700 12px/16px var(--so-font-ui);
	min-width: 22px;
	height: 22px;
}

/* ---------- Categorieregel: pillen, actief = lila vlak met inktrand ---------- */
.shop-catnav {
	background: var(--so-bg);
	border-bottom: var(--so-border);
}
.shop-catnav__inner {
	gap: 8px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.shop-catnav__link {
	padding: 8px 16px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: transparent !important;
	color: var(--so-ink);
	font-size: var(--so-nav-size);
	font-weight: 600;
	line-height: var(--so-nav-line);
	white-space: nowrap;
}
.shop-catnav__link:hover {
	background: var(--so-cream) !important;
	color: var(--so-ink);
}
.shop-catnav__link.is-active {
	background: var(--so-lilac) !important;
	border-color: var(--so-ink);
	color: var(--so-ink);
	font-weight: 700;
}
.shop-catnav__link.shop-catnav__external {
	color: var(--so-ink-soft);
	font-weight: 500;
}
.shop-drawer__label {
	color: var(--so-ink-mute);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}
@media screen and (max-width: 1023px) {
	.shop-header__bar {
		min-height: 68px;
	}
	.shop-header__logo img {
		width: 112px !important;
	}
}

/* ---------- Hero: ronde kaart met inktrand en sticker-schaduw ----------
   Bij home.hero_overlay = light (Joris IJs) blijft de foto helder: de lichte waas
   van modern achter de tekst, inkttekst in de display (900). De knop is roze. */
.shop-hero__track,
.shop-hero__card {
	border-radius: 32px;
}
.shop-hero__track {
	padding: 0 4px 4px 0;
}
.shop-hero__card {
	border: var(--so-border);
	box-shadow: 4px 4px 0 var(--so-ink);
	min-height: clamp(380px, 40vw, 540px);
}
.shop-hero__title {
	font-family: var(--so-font-display) !important;
	font-size: 64px;
	font-weight: 900;
	line-height: 68px;
	letter-spacing: 0;
}
.shop-hero__text {
	font-size: 18px;
	line-height: 28px;
}
main .shop-hero__card--light .shop-hero__cta,
main .shop-hero__cta.button {
	background: var(--so-pink) !important;
	border: var(--so-border) !important;
	color: var(--so-ink) !important;
	box-shadow: var(--so-sticker) !important;
}
main .shop-hero__card--light .shop-hero__cta:hover,
main .shop-hero__cta.button:hover {
	background: var(--so-pink-hover) !important;
}

/* ---------- Tegels: pastelvlakken met inktrand, label in de display ---------- */
main #assortiment {
	padding-top: 72px;
}
.shop-tiles {
	grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
	justify-content: center;
	gap: 20px;
}
.shop-tile {
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 184px;
	padding: 28px 16px;
	border: var(--so-border);
	border-radius: 24px;
	background: var(--so-pink-tint);
	text-align: center;
	box-shadow: none;
	transition: transform var(--shop-dur-fast) var(--shop-ease), box-shadow var(--shop-dur-fast) var(--shop-ease);
}
.shop-tiles > li:nth-child(6n + 2) .shop-tile { background: var(--so-mint); }
.shop-tiles > li:nth-child(6n + 3) .shop-tile { background: var(--so-lilac); }
.shop-tiles > li:nth-child(6n + 4) .shop-tile { background: var(--so-sand); }
.shop-tiles > li:nth-child(6n + 5) .shop-tile { background: var(--so-sky); }
.shop-tiles > li:nth-child(6n + 6) .shop-tile { background: var(--so-yellow); }
.shop-tile:hover {
	transform: translate(-2px, -2px) rotate(-1deg);
	box-shadow: var(--so-sticker);
}
/* Icoon in een wit rondje met inktrand. */
.shop-tile__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: var(--so-border);
	border-radius: 999px;
	background: var(--so-surface);
	color: var(--so-ink) !important;
	font-size: 24px;
}
.shop-tile__icon > * {
	color: var(--so-ink) !important;
}
.shop-tile__arrow {
	display: none;
}
.shop-tile__label {
	hyphens: none;
	font-family: var(--so-font-display) !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	color: var(--so-ink);
}

/* ---------- Footer: crème met een golfrand, inktbalk onderaan ---------- */
footer.footer {
	position: relative;
	margin-top: 40px;
	background: var(--so-cream);
	border-top: 0;
	color: var(--so-ink-soft);
}
footer.footer::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
	background: var(--so-cream);
	-webkit-mask: var(--so-wave) center / 120px 16px repeat-x;
	mask: var(--so-wave) center / 120px 16px repeat-x;
	transform: scaleY(-1);
}
footer.footer p,
footer.footer a {
	color: var(--so-ink-soft);
	font-size: 15px;
	line-height: 24px;
}
footer.footer a:hover,
footer a:hover {
	color: var(--so-ink);
}
footer.footer .title {
	font-family: var(--so-font-display) !important;
	font-size: 24px !important;
	font-weight: 700;
	line-height: 28px;
	color: var(--so-ink);
}
footer.footer .icon {
	color: var(--so-ink);
}
/* De creditbalk van de footer (inline stijl in de tenant-footer): inkt, rond. */
footer.footer > p:last-of-type {
	margin: 32px 16px 16px !important;
	border-radius: 16px;
	background-color: var(--so-ink) !important;
}
/* Focusring op inkt: de roze ring van modern-base (#9e1f55) haalt op #0a0a0a
   maar 2.6:1; wit haalt 19:1 (WCAG 1.4.11). Ook voor de infobalk. */
footer.footer > p:last-of-type a:focus-visible,
html body div#info-status a:focus-visible {
	outline-color: #ffffff !important;
}

@media screen and (max-width: 768px) {
	main .shop-section__head .title {
		font-size: 32px !important;
		line-height: 36px;
	}
	.shop-hero__card {
		min-height: 440px;
	}
	.shop-hero__title {
		font-size: 34px;
		line-height: 38px;
	}
	/* Gsm: tegels als brede rijen (icoon links), zodat lange namen als
	   "Cadeaubonnen" op 24 px passen zonder afbreken. */
	.shop-tiles {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.shop-tile {
		flex-direction: row;
		justify-content: flex-start;
		min-height: 0;
		padding: 14px 16px;
		text-align: left;
	}
	.shop-tile__icon {
		flex: none;
		width: 52px;
		height: 52px;
		font-size: 20px;
	}
}