/* ============================================================
   Skin atelier, deel 2: productlijst, productpagina, mandje,
   kassa en de overige pagina's. Na modern-*.css en skin-atelier.css.
   ============================================================ */

/* ---------- Kruimelpad ---------- */
body div#breadcrumbs .breadcrumb li a,
body div#breadcrumbs .breadcrumb li a .icon {
	color: var(--at-ink-soft) !important;
}
body div#breadcrumbs .breadcrumb li a svg {
	stroke: currentColor;
}
body div#breadcrumbs .breadcrumb li.is-active a {
	color: var(--at-heading-label) !important;
}

/* ---------- Productlijst: kaarten zoals op de home ---------- */
main #productlist .productlist > .columns > .column > .title.is-4 {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) !important;
	font-weight: 300 !important;
}
main #productlist .products-wrapper .card {
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	background: transparent;
	transform: none !important;
}
main #productlist .products-wrapper .card-image {
	aspect-ratio: 4 / 5;
	border-radius: var(--at-radius-img);
	overflow: hidden;
	background: var(--at-surface);
}
main #productlist .products-wrapper .card-image figure,
main #productlist .products-wrapper .card-image .image {
	height: 100%;
	padding-top: 0 !important;
}
main #productlist .products-wrapper .card-image img {
	position: static !important;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transform: none !important;
}
/* Productvideo (modern-catalog.css) over de foto: ook hier geen zoom bij hover. */
main #productlist .products-wrapper .card-image video.product-video {
	transform: none !important;
}
main #productlist .products-wrapper .card-content {
	padding: var(--shop-space-3) 0 0 !important;
	background: transparent;
}
main #productlist .products-wrapper .card-content .head p:first-child {
	color: var(--at-ink);
	font-size: 1.0625rem;
	font-weight: 400;
}
main #productlist .products-wrapper .card-content .content > p.is-size-6,
main #productlist .products-wrapper .card-content .quantity {
	color: var(--at-accent-text) !important;
	font-size: 0.875rem !important;
}
/* Labels (snel leverbaar, smaak van de week, nieuw, ...): kleine witte pil
   linksboven. Vorm, maat (11px/600/1px kapitalen in hele px, 10px op gsm) en
   maximum twee: modern-catalog.css. Hier enkel de atelier-kleuren. De zachte
   schaduw is de enige in de lijst: zonder leest de pil niet op een lichte foto. */
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag,
main .at-card__img > .tags-wrapper > .tag {
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--at-ink) !important;
	font-family: var(--shop-font-ui) !important;
	border-radius: var(--at-radius-pill) !important;
	box-shadow: 0 1px 2px rgba(42, 27, 14, 0.14), 0 2px 8px rgba(42, 27, 14, 0.1);
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag.shop-tag--quick::before,
main .at-card__img > .tags-wrapper > .tag.shop-tag--quick::before {
	background: var(--at-ok);
}
/* Filters als chips; actieve chip = cacao. */
main #productlist .filter .label,
main #productlist .filter form > .columns .field > label {
	color: var(--at-heading-label) !important;
	font-size: var(--at-caps-size) !important;
	font-weight: 600 !important;
	line-height: var(--at-caps-line);
	letter-spacing: var(--at-caps-track);
	text-transform: uppercase;
}
main #productlist .filter .is-checkradio[type=checkbox] + label {
	border: 1px solid var(--at-line-strong) !important;
	background: var(--at-bg) !important;
	color: var(--at-ink) !important;
	border-radius: var(--at-radius-pill) !important;
}
main #productlist .filter .is-checkradio[type=checkbox]:checked + label {
	background: var(--at-ink) !important;
	border-color: var(--at-ink) !important;
	color: #ffffff !important;
}
main #productlist .pagination-link.is-current {
	background: var(--at-ink) !important;
	border-color: var(--at-ink) !important;
	color: #ffffff !important;
}
main #filterModal .modal-content {
	background: var(--at-bg);
	border-radius: 14px 14px 0 0;
}
main #filterModal .modal-background {
	background: rgba(42, 27, 14, 0.4);
}

/* ---------- Productpagina (1b/1c) ---------- */
main #productinfo .productdetail .title.is-4 {
	font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem) !important;
	font-weight: 300 !important;
	line-height: 1.05;
	letter-spacing: -0.03em;
}
main #productinfo .productdetail .title.is-4 {
	margin-bottom: var(--shop-space-4) !important;
	padding-bottom: 0;
}
main #productinfo .productdetail .title:not(.is-spaced) + .subtitle {
	color: var(--at-ink-soft) !important;
	font-size: 1.125rem !important;
	line-height: 1.5;
}
main #productinfo .column.productimage img,
main #productinfo .column.productimage figure {
	border-radius: var(--at-radius-img);
}
/* Prijs als rustige regel onder de omschrijving: 20 px, inkt, geen kader. De prijs
   is niet het belangrijkste; de prijs per maat staat bij de verpakkingskeuze en,
   na een keuze, in de koopknop ("In mijn mandje · € 9,00"). */
main #productinfo .productdetail form > .columns:first-of-type {
	display: block;
}
main section#productinfo .productdetail #price-wrapper {
	display: flex !important;
	align-items: baseline;
	justify-content: flex-start;
	gap: var(--shop-space-3);
	margin: 0 0.75rem var(--shop-space-2);
	padding: 0;
	border: 0;
}
main section#productinfo .productdetail .price-wrapper .price {
	background: transparent !important;
	color: var(--at-ink) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 28px;
	letter-spacing: 0;
	padding: 0 !important;
	text-align: left !important;
}
main section#productinfo .productdetail #price-wrapper > span {
	color: var(--at-ink-soft) !important;
	font-size: 0.8125rem !important;
	white-space: nowrap;
}
main section#productinfo .productdetail .price-wrapper .price del {
	color: var(--at-ink-soft);
	font-size: 1rem;
}
/* Allergenen (modern-product.css): label in caps zoals de keuzelabels. */
main #productinfo .shop-allergens__title {
	color: var(--at-heading-label);
	font-size: var(--at-caps-size);
	font-weight: 600;
	line-height: var(--at-caps-line);
	letter-spacing: var(--at-caps-track);
	text-transform: uppercase;
}
main #productinfo .shop-allergens__item {
	border-color: var(--at-line-strong);
}
main #productinfo .shop-allergens__text,
main #productinfo .shop-allergens__text a {
	color: var(--at-ink);
}
/* "maak een keuze hieronder" verdwijnt; de datum verschijnt zodra ze er is. */
main section#productinfo .at-pending {
	display: none !important;
}
main section#productinfo .productdetail form .dates > span {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--at-ink-soft);
}
/* Keuzes: label in caps, smaken als raster van 3, actief = cacao. */
main section#productinfo .productdetail .field > label.has-text-weight-bold,
main section#productinfo .productdetail .field > .label {
	color: var(--at-heading-label) !important;
	font-size: var(--at-caps-size) !important;
	font-weight: 600 !important;
	line-height: var(--at-caps-line);
	letter-spacing: var(--at-caps-track);
	text-transform: uppercase;
}
main section#productinfo .productdetail .columns.has-multi-select {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0.5rem 0 0 !important;
}
main section#productinfo .productdetail .columns.has-multi-select > .column {
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	flex: none !important;
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > label > p {
	min-height: 3.25rem;
	gap: 0.6rem;
	flex-direction: row !important;
	justify-content: flex-start !important;
	text-align: left;
	align-items: center;
	padding: 0.5rem 0.9rem !important;
	border: 1px solid var(--at-line-strong) !important;
	border-radius: var(--at-radius-choice) !important;
	background: var(--at-bg) !important;
	color: var(--at-ink) !important;
	box-shadow: none !important;
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > input[type="radio"]:checked + label > p {
	background: var(--at-ink) !important;
	border-color: var(--at-ink) !important;
	color: #ffffff !important;
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > input[type="radio"]:checked + label > p * {
	color: #ffffff !important;
}
/* Smaakbolletje 22px: twee helften (boven/onder, -18°) uit het smaakicoon van de API. */
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > label > p .icecream {
	order: -1;
	flex: none !important;
	width: 22px;
	height: 22px;
	margin: 0 !important;
}
main section#productinfo .productdetail .icecream-wrapper {
	display: flex !important;
	flex-direction: column;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50%;
	overflow: hidden;
	transform: rotate(-18deg);
	background: linear-gradient(var(--at-dot-top, #c9a27e) 50%, var(--at-dot-bottom, var(--at-tan)) 50%);
	box-shadow: inset 0 0 0 1px var(--at-line);
}
main section#productinfo .productdetail .icecream-wrapper > i {
	flex: 1 1 50%;
	display: block;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 0 !important;
}
/* Hoeveelheid/personen: pillen. */
main section#productinfo .productdetail .columns.has-multi-select:not(:has(.icecream)) > .column > .control > label > p {
	justify-content: center;
	border-radius: var(--at-radius-pill) !important;
	padding-inline: 0.5rem !important;
	white-space: nowrap; /* "20 personen" op één regel, ook in DM Sans */
}
main section#productinfo .productdetail .columns.has-multi-select:not(:has(.icecream)):not(.shop-pack--choice) {
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}
main section#productinfo .productdetail .columns.has-multi-select:not(:has(.icecream)) .icecream {
	display: none;
}
/* Verpakkingskeuze (modern-product.css, product.packaging_style): maat in Pulp
   Display, prijs klein in het UI-font; actief in cacao (inkt). */
main section#productinfo .productdetail .shop-pack--choice .shop-pack__size {
	font-family: var(--at-font) !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0;
}
main section#productinfo .productdetail .shop-pack--segmented .shop-pack__size {
	font-size: 16px;
	line-height: 20px;
}
@media screen and (max-width: 825px) {
	main section#productinfo .productdetail .shop-pack--choice .shop-pack__size {
		font-size: 16px;
		line-height: 20px;
	}
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--cards > .column > .control > input[type="radio"]:checked + label > p.shop-pack__option {
	background: var(--at-surface) !important;
}
/* Volgorde in het formulier: keuzes, feitenblokjes, dan aantal + knop. */
main section#productinfo .productdetail form {
	display: flex;
	flex-direction: column;
}
main section#productinfo .productdetail form > .at-facts {
	order: 1;
}
main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) {
	order: 2;
}
.at-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin: var(--shop-space-4) 0;
	padding: 0;
	list-style: none;
}
.at-facts li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--at-line-strong);
	border-radius: var(--at-radius-choice);
}
.at-facts strong {
	color: var(--at-ink);
	font-weight: 500;
}
.at-facts span {
	color: var(--at-ink-soft);
	font-size: 0.9375rem;
}
/* Aantal als stepper (skin-atelier.js), rond de echte select. */
.at-stepper {
	display: inline-flex;
	align-items: center;
	height: 3.5rem;
	border: 1px solid var(--at-line-strong);
	border-radius: var(--at-radius-pill);
}
.at-stepper > .select {
	position: absolute !important;
	width: 1px !important;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.at-stepper button {
	width: 48px;
	height: 48px;
	border: 0;
	background: none;
	color: var(--at-ink);
	font: 300 1.375rem/1 var(--at-font);
	cursor: pointer;
}
.at-stepper button:disabled {
	color: var(--at-line-strong);
	cursor: default;
}
.at-stepper output {
	min-width: 2rem;
	text-align: center;
	color: var(--at-ink);
	font-size: 1.0625rem;
}
main section#productinfo .productdetail .button.shopping-cart {
	height: 3.5rem;
	padding: 0 2rem;
	font-size: 1.0625rem;
}
main section#productinfo .productdetail .button.shopping-cart .icon:first-child {
	display: none;
}
main section#productinfo .productdetail .columns.is-variable:has(.shopping-cart) > .column.is-narrow {
	flex: 1 1 auto;
	width: auto;
}
main section#productinfo .productdetail .columns.is-variable:has(.shopping-cart) .column.is-narrow-tablet {
	flex: 1 1 auto;
}
/* Vijf tabs als uitklaplijst met hairlines en een dunne "+" (ook op desktop). */
/* skin-atelier.js zet de uitklaplijst in de rechterkolom (onder het formulier). */
main #productinfo .productdetail > .productinfo {
	margin: var(--shop-space-6) 0 0;
}
main #productinfo .productdetail > .productinfo > .column,
main #productinfo .productdetail > .productinfo .tabs-content > div > .columns > .column {
	padding-left: 0;
	padding-right: 0;
}
main section#productinfo .productdetail .columns.is-variable:has(.shopping-cart) .columns.is-mobile {
	flex-wrap: nowrap;
}
main #productinfo .productinfo .tabs {
	display: none !important;
}
main #productinfo .productinfo .tabs-content {
	border-top: 1px solid var(--at-line-strong);
}
.shop-acc__head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 3.5rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--at-line-strong);
	background: none;
	color: var(--at-ink);
	font: 400 1.125rem/1.3 var(--at-font);
	text-align: left;
	cursor: pointer;
}
.shop-acc__head i {
	display: none;
}
.shop-acc__head::after {
	content: '+';
	color: var(--at-ink);
	font-size: 1.375rem;
	font-weight: 300;
}
.shop-acc__head[aria-expanded="true"]::after {
	content: '\2212';
}
main #productinfo .productinfo .tabs-content > div.shop-acc__panel {
	display: none !important;
	padding: var(--shop-space-3) 0 var(--shop-space-5);
	border-bottom: 1px solid var(--at-line-strong);
}
main #productinfo .productinfo .tabs-content > div.shop-acc__panel.is-open {
	display: block !important;
}
main #productinfo .productinfo .tabs-content > div.shop-acc__panel > .columns,
main #productinfo .productinfo .tabs-content > div.shop-acc__panel > .columns > .column {
	margin: 0;
	padding: 0;
}
main #productinfo .productinfo .tabs-content article.content {
	font-size: 1rem;
	color: var(--at-ink-soft);
}
@media screen and (max-width: 825px) {
	main section#productinfo .productdetail .columns.has-multi-select:has(.icecream) {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 0.25rem;
		scrollbar-width: none;
	}
	main section#productinfo .productdetail .columns.has-multi-select:has(.icecream) > .column {
		flex: 0 0 84px !important;
	}
	main section#productinfo .productdetail .columns.has-multi-select:has(.icecream) > .column > .control > label > p {
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center;
		min-height: 5.25rem;
		padding: 0.5rem !important;
		font-size: 0.8125rem;
		line-height: 1.2;
		text-align: center;
		hyphens: none;
		overflow-wrap: normal;
		word-break: normal;
	}
	.at-facts {
		grid-template-columns: 1fr;
	}
	/* Vaste koopbalk onderaan op ivoor. */
	main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) {
		background: var(--at-surface) !important;
		box-shadow: var(--at-shadow-bar) !important;
		border-top: 0 !important;
	}
	.at-stepper {
		height: 3rem;
	}
	.at-stepper button {
		width: 40px;
	}
	/* Knop met prijs ("In mijn mandje · € 16,00") past naast de stepper. */
	main section#productinfo .productdetail .columns.is-variable:has(.shopping-cart) .column.is-narrow-tablet {
		min-width: 0;
	}
	main section#productinfo .productdetail .button.shopping-cart {
		height: 3rem;
		padding: 0 12px;
		font-size: 16px;
	}
}

/* ---------- Mandje (1d): lijst met hairlines, totaal in rood ---------- */
main .shop-cart__head .title {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) !important;
	font-weight: 300 !important;
	line-height: 1;
	padding-bottom: 0.3em;
}
main .shop-cart__list {
	border-top: 1px solid var(--at-line-strong);
}
main .shop-line {
	border: 0 !important;
	border-bottom: 1px solid var(--at-line-strong) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
main .shop-line__img,
main .shop-line__img img {
	border-radius: var(--at-radius-img) !important;
	background: var(--at-surface);
}
main .shop-line__name {
	color: var(--at-ink) !important;
	font-weight: 400 !important;
}
main .shop-line__price {
	color: var(--at-ink) !important;
	font-weight: 400 !important;
}
main .shop-badge {
	background: transparent !important;
	border: 1px solid var(--at-line-strong);
	color: var(--at-ink-soft) !important;
}
main .shop-qty {
	border: 1px solid var(--at-line-strong) !important;
	background: var(--at-bg) !important;
}
main .shop-cart__summary,
.shop-co .shop-co-summary,
.shop-co aside {
	border: 1px solid var(--at-line-strong) !important;
	border-radius: var(--at-radius-choice) !important;
	box-shadow: none !important;
	background: var(--at-bg) !important;
}
main .shop-cart__summary .title,
.shop-co aside .title {
	font-weight: 300 !important;
	font-size: 1.75rem !important;
}
main .shop-totals__total dd,
.shop-co aside .shop-totals__total dd {
	color: var(--at-accent) !important;
	font-weight: 300 !important;
	font-size: 1.75rem !important;
}
main .shop-cart__codes,
main .shop-cart__main > form,
main .shop-cart__main > div:not(.shop-cart__list) {
	border-radius: var(--at-radius-choice);
}
main .shop-cart__bar {
	background: var(--at-surface) !important;
	box-shadow: var(--at-shadow-bar) !important;
	border-top: 0 !important;
}
main .shop-cart__bar strong,
main .shop-cart__bar .shop-cart__bar-total {
	color: var(--at-accent-text) !important;
}

/* ---------- Kassa: stappen, radiokaarten = keuzeblokken, cacao = actief ---------- */
.shop-co .checkout-content .head h3,
.shop-co .checkout-content .title.is-5 {
	font-weight: 300 !important;
	letter-spacing: -0.02em;
}
.shop-co .checkout-content .head .step,
main #checkout-status .steps li.is-active a i {
	background: var(--at-ink) !important;
	color: #ffffff !important;
}
main #checkout-status .steps li a::after {
	background: var(--at-line-strong) !important;
}
main #checkout-status .steps li.is-active a::after,
main #checkout-status .steps li:has(~ li.is-active) a::after {
	background: var(--at-ink) !important;
}
.shop-co :is(#checkout-step-1, #checkout-step-3, #checkout-step-4) .body input[type=radio] + label > .card {
	border: 1px solid var(--at-line-strong) !important;
	border-radius: var(--at-radius-choice) !important;
	box-shadow: none !important;
	background: var(--at-bg) !important;
}
.shop-co :is(#checkout-step-1, #checkout-step-3, #checkout-step-4) .body input[type=radio]:checked + label > .card {
	border-color: var(--at-ink) !important;
	box-shadow: inset 0 0 0 1px var(--at-ink) !important;
}
.shop-co :is(#checkout-step-1, #checkout-step-4) .body input[type=radio] + label > .card > .card-content > svg {
	background: var(--at-surface) !important;
	color: var(--at-ink) !important;
}
.shop-co .checkout-content .label {
	color: var(--at-ink) !important;
	font-weight: 500 !important;
}
.shop-co .checkout-content .input,
.shop-co .checkout-content .select select,
.shop-co .checkout-content .textarea {
	border-color: var(--at-line-strong) !important;
	border-radius: var(--at-radius-choice) !important;
	box-shadow: none !important;
}
.shop-co .checkout-content .input:focus,
.shop-co .checkout-content .select select:focus {
	border-color: var(--at-ink) !important;
	box-shadow: var(--shop-focus-ring) !important;
}

/* ---------- Inloggen, account, infopagina's ---------- */
main .shop-auth .card,
main #signin .card,
main #signup .card,
main #account .card,
main .card.shop-card {
	border: 1px solid var(--at-line-strong) !important;
	border-radius: var(--at-radius-choice) !important;
	box-shadow: none !important;
}
main article.content h2,
main article.content h3 {
	font-weight: 300 !important;
}
main article.content a {
	color: var(--at-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
main .shop-toast,
main #added-product-modal .modal-card {
	border-radius: var(--at-radius-choice) !important;
	box-shadow: var(--shop-shadow-lg) !important;
}

/* ---------- Productlijst: lege toestand (ivoor vlak, cacao; geen rood) ---------- */
main #productlist .shop-list-empty {
	background: var(--at-surface);
	border: 1px solid var(--at-line);
	border-radius: var(--at-radius-choice);
}
main #productlist .shop-list-empty__icon,
main #productlist .shop-list-empty__title {
	color: var(--at-ink) !important;
}
main #productlist .shop-list-empty__title {
	font-weight: 300 !important;
}
main #productlist .shop-list-empty__clear {
	background: transparent !important;
	border: 1px solid var(--at-ink) !important;
	color: var(--at-ink) !important;
	border-radius: var(--at-radius-pill) !important;
}
main #productlist .shop-list-empty__contact a,
main #productlist .shop-list-empty__contact a:hover {
	color: var(--at-ink) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
main #productlist .shop-list-empty__contact a:hover {
	color: var(--at-ink-hover) !important;
}

/* Smakenkiezer (modern-flavours.css): sectietitels als kleine kapitalen, in hele px. */
.shop-flv__title {
	font-family: var(--shop-font-ui);
	font-size: var(--at-caps-size) !important;
	font-weight: 600;
	line-height: var(--at-caps-line);
	letter-spacing: var(--at-caps-track);
	text-transform: uppercase;
	color: var(--at-heading-label);
}
.shop-flv__n { letter-spacing: 0; }