/* ============================================================
   Skin atelier, deel 1: basis, header, footer en homepagina.
   Alleen geladen onder thema modern + skin = atelier (theme.php),
   na de modern-*.css: dezelfde specificiteit volstaat.
   Regels: wit is de basis, ivoor voor vlakken, cacao is de
   actiekleur, rood enkel voor script-woord, mandjesteller en prijs.
   Lijnen in plaats van schaduwen; foto's rechthoekig.
   ============================================================ */

/* ---------- Basis ---------- */
/* Lopende tekst: --shop-font-sans (Pulp Display; DM Sans met branding.font_body = ui). */
body {
	font-family: var(--shop-font-sans) !important;
}
/* Kleine UI-tekst in het UI-font (branding.font_ui, token --shop-font-ui;
   bv. DM Sans): header, categorieregel, lade, kruimelpad,
   knoppen, formulieren, labels, filters, keuzes, mandje- en kassatekst, footer.
   Pulp Display blijft voor titels, hero, producttitels en prijzen. */
button,
input,
select,
textarea,
.shop-header,
.shop-catnav,
.shop-drawer,
.shop-consent,
#info-status,
div#breadcrumbs,
footer.footer,
.at-label,
main :is(.button, label, .label, .help, .tag, .select, .checkbox, .radio, small, .notification, .dropdown-content, .shop-sort),
main #productlist :is(.filter, .sort),
main section#productinfo .productdetail :is(.field, #price-wrapper > span),
.at-usps__list p,
.at-facts span,
main .shop-cart,
.shop-co {
	font-family: var(--shop-font-ui) !important;
}
body {
	background: var(--at-bg);
	color: var(--at-ink);
}
main {
	background: var(--at-bg);
}
main p,
main li {
	color: var(--at-ink-soft);
}
main a:not(.button):hover {
	color: var(--at-accent-hover);
}
main .title,
main h1,
main h2,
main h3 {
	font-family: var(--at-font) !important;
	color: var(--at-ink);
	font-weight: 300;
	letter-spacing: -0.03em;
}
/* Script-woord (README Atelier §1): kleine x-hoogte, dus groter en iets lager. */
.at-script {
	font-family: var(--at-font-script);
	font-weight: 400;
	color: var(--at-accent);
	white-space: nowrap;
	font-size: 1.7em;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
	top: 0.16em;
	margin-left: 0.08em;
	letter-spacing: 0;
}
.at-title {
	line-height: 1;
	padding-bottom: 0.3em;
	margin: 0;
}
.at-title--section {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem) !important;
}
.at-label {
	margin: 0 0 var(--shop-space-4);
	color: var(--at-heading-label) !important;
	font-size: var(--at-caps-size);
	font-weight: 600;
	line-height: var(--at-caps-line);
	letter-spacing: var(--at-caps-track);
	text-transform: uppercase;
}
.at-price {
	color: var(--at-accent-text);
	white-space: nowrap;
}
/* Primaire knop: cacao pil; één per scherm. */
.button.is-primary,
.button.at-btn {
	text-decoration: none !important;
	background: var(--at-ink) !important;
	border-color: var(--at-ink) !important;
	color: #ffffff !important;
	border-radius: var(--at-radius-pill) !important;
	font-weight: 500;
	box-shadow: none !important;
	transform: none !important;
}
.button.is-primary:hover,
.button.at-btn:hover {
	background: var(--at-ink-hover) !important;
	border-color: var(--at-ink-hover) !important;
}
.button.at-btn {
	height: auto;
	padding: 1rem 1.75rem;
	font-size: 1rem;
}
.at-link {
	display: inline-block;
	padding: 0.25rem 0.1rem;
	border-bottom: 1px solid currentColor;
	color: var(--at-ink) !important;
	font-size: 1rem;
	white-space: nowrap;
}
.at-link:hover {
	color: var(--at-accent-hover) !important;
}

/* ---------- Header: zoekpil links, logo midden, acties rechts ---------- */
.shop-header {
	background: var(--at-bg);
	border-bottom: 1px solid var(--at-line);
}
.shop-header.is-scrolled {
	box-shadow: none;
}
.shop-header__bar {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "search logo actions";
	min-height: 5.25rem;
	max-width: 1280px;
}
.shop-header__logo img {
	height: 40px;
	max-height: none;
	max-width: none;
	width: auto;
}
.shop-header__search {
	justify-self: start;
	max-width: 360px;
}
.shop-header__search .input {
	background: var(--at-bg);
	border: 1px solid var(--at-line-strong) !important;
	color: var(--at-ink);
}
.shop-header__search .input::placeholder {
	color: var(--at-ink-soft);
	opacity: 1;
}
.shop-header__search .input:focus {
	border-color: var(--at-ink) !important;
}
.shop-header__actions {
	justify-self: end;
}
.shop-header__action,
.shop-menu__trigger {
	color: var(--at-ink);
	font-weight: 400;
	font-size: 0.9375rem;
}
.shop-header__action i,
.shop-menu__trigger i {
	display: none;
}
/* Open of onder de muis: bruin met een onderlijn van 1 px, zoals de categorieregel. */
.shop-header__action:hover,
.shop-menu__trigger:hover,
.shop-menu__trigger[aria-expanded="true"] {
	background: transparent;
	color: var(--at-ink-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.shop-header__action:focus-visible,
.shop-menu__trigger:focus-visible {
	outline: 2px solid var(--at-ink);
	outline-offset: 2px;
}
/* Paneel "Hulp nodig?": wit, lijn en zachte schaduw, rijen van 44 px. */
.shop-menu__panel {
	top: calc(100% + 4px);
	min-width: 240px;
	padding: 8px 0;
	background: var(--at-bg);
	border: 1px solid var(--at-line-strong);
	border-radius: var(--at-radius-img);
	box-shadow: 0 12px 32px rgba(107, 63, 12, 0.12);
}
.shop-menu__item {
	gap: 10px;
	padding: 12px 20px;
	border-radius: 0;
	color: var(--at-ink);
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;
}
.shop-menu__item:hover,
.shop-menu__item:focus-visible {
	background: var(--at-surface);
	color: var(--at-ink);
}
.shop-menu__item:focus-visible {
	outline: 2px solid var(--at-ink);
	outline-offset: -2px;
}
/* Mandje: tas + "Mandje", even hoog als het zoekveld (44 px), links en rechts
   18 px. De teller (rode cirkel, het enige rode element in de header) staat er
   enkel bij vanaf 1 stuk. De .badge (haak voor productinfo: data-badge) doet
   met display: contents niet mee in de opmaak: het icoon en de teller (::after)
   worden zelf flex-items, in de volgorde tas, label, teller. */
.shop-header__basket {
	height: 2.75rem;
	gap: 8px;
	padding: 0 18px;
	background: var(--at-ink);
	color: #ffffff;
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
}
.shop-header__basket:hover {
	background: var(--at-ink-hover);
	color: #ffffff;
}
.shop-header__basket:focus-visible {
	outline: 2px solid var(--at-ink);
	outline-offset: 2px;
}
.shop-header__basket .badge {
	display: contents;
}
.shop-header__basket .badge > i {
	order: 1;
	width: 16px;
	font-size: 16px;
	line-height: 1;
	text-align: center;
}
.shop-header__basket-label {
	order: 2;
}
.shop-header .badge[data-badge]::after {
	order: 3;
	position: static;
	display: inline-block;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--at-accent-text);
	color: #ffffff;
	box-shadow: none;
	font: 600 12px/20px var(--shop-font-ui);
}
.shop-header__basket .badge:not([data-badge="0"]) + .shop-header__basket-label {
	margin-left: 0;
}
.shop-header .badge[data-badge="0"]::after {
	display: none;
}
.shop-catnav {
	border-top: 1px solid var(--at-line);
}
/* Brandbook: 15 px, 600, kapitalen, 2 px spatiëring; regel 20 px. Balk
   6 + 40 + 6 px, basislijn op 25 px in de link: de kapitalen staan optisch in
   het midden (gemeten op 1x en 2x, docs/theme-modern.md). */
.shop-catnav__inner {
	justify-content: flex-start;
	gap: 20px;
	padding: 6px var(--shop-gutter);
}
/* Gecentreerd met auto-marges i.p.v. justify-content: center: past de regel
   niet (smallere laptops), dan begint ze links en scrolt ze, in plaats van de
   eerste categorie links af te snijden. */
.shop-catnav__inner > :first-child {
	margin-left: auto;
}
.shop-catnav__inner > :last-child {
	margin-right: auto;
}
@media screen and (max-width: 1279px) {
	.shop-catnav__inner {
		gap: 16px;
	}
}
.shop-catnav__link {
	position: relative;
	padding: 10px 0;
	/* De spatiëring na de laatste letter telt niet mee: de rij centreert op
	   de letters en de onderlijn is precies zo breed als het woord. */
	margin-right: calc(-1 * var(--at-nav-track));
	border-radius: 0;
	color: var(--at-ink);
	font-size: var(--at-nav-size);
	font-weight: 600;
	line-height: var(--at-nav-line);
	letter-spacing: var(--at-nav-track);
	text-transform: uppercase;
}
/* Onderlijn 1 px, 5 px onder de basislijn, zo breed als de letters. */
.shop-catnav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: var(--at-nav-track);
	bottom: 9px;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--shop-dur-fast) var(--shop-ease);
}
.shop-catnav__link:hover,
.shop-catnav__link.is-active {
	background: transparent;
	color: var(--at-heading-label);
	font-weight: 600; /* zelfde gewicht: de rij verspringt niet bij de actieve link */
}
.shop-catnav__link:hover::after,
.shop-catnav__link.is-active::after {
	opacity: 1;
}
.shop-catnav__external {
	margin-left: 0;
}
.shop-catnav__external::after {
	right: 0;
}
.shop-catnav__external i {
	letter-spacing: 0;
}
.shop-drawer__panel {
	background: var(--at-bg);
}
.shop-drawer__label {
	color: var(--at-heading-label);
	font-size: var(--at-caps-size);
	line-height: var(--at-caps-line);
	letter-spacing: var(--at-caps-track);
	font-weight: 600;
}
.shop-drawer__list a i:first-child {
	display: none;
}
@media screen and (max-width: 825px) {
	.shop-header__bar {
		grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
		grid-template-areas:
			"burger logo actions"
			"search search search";
		min-height: 0;
	}
	.shop-header__logo img {
		height: 24px;
	}
	.shop-header__search {
		max-width: none;
	}
	.shop-catnav {
		display: none;
	}
	/* Gsm: enkel de tas (44 x 44), de teller als kleine rode cirkel rechtsboven. */
	.shop-header__basket {
		width: 2.75rem;
		min-width: 2.75rem;
		padding: 0;
		margin: 0;
		justify-content: center;
		background: transparent;
		color: var(--at-ink);
	}
	.shop-header__basket:hover {
		background: transparent;
		color: var(--at-ink-hover);
	}
	.shop-header__basket-label {
		display: none; /* ook tussen 769 en 825 px (is-hidden-mobile stopt op 768) */
	}
	.shop-header__basket .badge {
		display: inline-flex;
		position: relative;
	}
	.shop-header__basket .badge > i {
		width: 20px;
		font-size: 20px;
	}
	.shop-header .badge[data-badge]::after {
		position: absolute;
		top: -8px;
		right: -10px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-shadow: 0 0 0 2px var(--at-bg);
		font: 600 11px/18px var(--shop-font-ui);
	}
}

/* ---------- Homepagina (include/modern/home-atelier.php) ---------- */
.at-hero {
	padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem);
}
.at-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	padding: 0 var(--shop-gutter);
}
.at-hero__title {
	font-size: clamp(3rem, 1.6rem + 5.6vw, 5rem) !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em;
}
.at-hero__text {
	margin: 0 0 var(--shop-space-6);
	max-width: 26em;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.5;
}
.at-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shop-space-5);
}
.at-hero__photo {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: var(--at-radius-img);
	overflow: hidden;
	background: var(--at-surface);
}
.at-hero__photo img,
.at-hero__photo picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.at-usps {
	padding: 0 0 clamp(2rem, 1rem + 3vw, 3.5rem);
}
.at-usps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--shop-space-6);
	margin: 0 var(--shop-gutter);
	padding: var(--shop-space-5) 0 0;
	border-top: 1px solid var(--at-line);
	list-style: none;
}
.at-usps__title {
	margin: 0 0 0.35rem;
	font-size: 1.125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}
.at-usps__list p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.at-section {
	padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
}
.at-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--shop-space-4);
	margin: 0 var(--shop-gutter) var(--shop-space-5);
}
/* Productkaart: 4:5, labels als witte pil (modern-catalog.css, zoals de productlijst), naam, "vanaf € 9,00", dunne +. */
.at-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--shop-space-5);
	margin: 0 var(--shop-gutter);
	padding: 0;
	list-style: none;
}
.at-card__link {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "img img" "meta plus";
	gap: var(--shop-space-3) var(--shop-space-2);
	color: var(--at-ink);
}
.at-card__img {
	grid-area: img;
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: var(--at-radius-img);
	overflow: hidden;
	background: var(--at-surface);
}
.at-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.at-card__meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.at-card__name {
	color: var(--at-ink);
	font-size: 1.0625rem;
	line-height: 1.3;
}
.at-card__price {
	color: var(--at-ink-soft);
	font-size: 0.875rem;
}
.at-card__plus {
	grid-area: plus;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--at-ink);
	border-radius: 50%;
	color: var(--at-ink);
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1;
}
.at-card__link:hover .at-card__plus {
	background: var(--at-ink);
	color: #ffffff;
}
.at-card__link:hover .at-card__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.at-delivery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	align-items: center;
	margin: 0 var(--shop-gutter);
	padding: clamp(1.5rem, 1rem + 3vw, 3rem);
	border-radius: 14px;
	background: var(--at-surface);
}
.at-delivery__body p {
	margin: 0 0 var(--shop-space-4);
	line-height: 1.6;
}
.at-delivery__days {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--at-line-strong);
}
.at-delivery__days li {
	display: flex;
	justify-content: space-between;
	gap: var(--shop-space-4);
	padding: 1rem 0;
	border-bottom: 1px solid var(--at-line-strong);
}
.at-delivery__day {
	color: var(--at-ink);
	font-weight: 500;
}

/* Overige secties van een eigen home (bv. "Hand made in Belgium"): rustig, op wit. */
main > section#info,
main > section#contact {
	background: var(--at-bg) !important;
	padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
	padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
}
main > section#info-foto > .small-container {
	border-radius: var(--at-radius-choice);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
main > section#info .columns,
main > section#info-foto .columns {
	align-items: center;
	margin-bottom: 0;
}
main > section#info .column {
	background: transparent !important;
}
main > section#info figure img {
	border-radius: var(--at-radius-img);
}
main > section#info .title.is-3,
main > section#info-foto .title.is-3,
main > section#contact .title {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem) !important;
}

/* ---------- Footer: wit met hairline ---------- */
footer.footer {
	background: var(--at-bg) !important;
	border-top: 1px solid var(--at-line);
	color: var(--at-ink-soft);
}
/* Koppen in de footer: eyebrow in kapitalen, zoals de labels. */
footer.footer .title,
footer.footer h2 {
	color: var(--at-heading-label) !important;
	font-family: var(--shop-font-ui) !important;
	font-size: var(--at-caps-size) !important;
	font-weight: 600 !important;
	line-height: var(--at-caps-line) !important;
	letter-spacing: var(--at-caps-track) !important;
	text-transform: uppercase !important;
}
footer.footer a,
footer.footer p {
	color: var(--at-ink-soft) !important;
	font-size: 0.9375rem;
}
footer.footer a:hover {
	color: var(--at-accent-hover) !important;
}
footer.footer .icon {
	display: none;
}
footer.footer .betaalmethode svg {
	filter: grayscale(0.2);
}

/* ---------- Gsm ---------- */
@media screen and (max-width: 825px) {
	.at-hero__grid {
		grid-template-columns: 1fr;
	}
	.at-hero__photo {
		order: -1;
		justify-self: stretch;
		max-width: none;
	}
	.at-usps__list {
		grid-template-columns: 1fr;
		gap: var(--shop-space-4);
	}
	.at-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--shop-space-4) var(--shop-space-3);
	}
	.at-cards--scroll {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-right: 0;
		padding-right: var(--shop-gutter);
		scrollbar-width: none;
	}
	.at-cards--scroll > .at-card {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
	.at-card__plus {
		width: 36px;
		height: 36px;
	}
	.at-delivery {
		grid-template-columns: 1fr;
	}
	.at-section__head {
		flex-direction: column;
		align-items: flex-start;
	}
}