/* ============================================================
   Thema modern: basis (typografie, knoppen, velden, kaarten).
   Wordt bovenaan <body> geladen (include/theme.php), dus na Bulma
   en de pagina-CSS: dezelfde specificiteit volstaat meestal.
   !important enkel waar de classic-CSS in head.php het zelf zet.
   Alle waarden komen uit tokens.css (var(--shop-*)).
   ============================================================ */

:root {
	/* Bulma 1 volgt de tokens (hier, want bulma1.min.css komt na tokens.css). */
	--bulma-family-primary: var(--shop-font-sans);
	--bulma-body-family: var(--shop-font-sans);
	--bulma-family-secondary: var(--shop-font-sans);
	--bulma-text: var(--shop-fg-2);
	--bulma-text-strong: var(--shop-fg-1);
	--bulma-border: var(--shop-border);
	--bulma-radius-small: var(--shop-r-sm);
	--bulma-radius: var(--shop-r-sm);
	--bulma-radius-medium: var(--shop-r-md);
	--bulma-radius-large: var(--shop-r-lg);
	--bulma-radius-rounded: var(--shop-r-pill);
	--bulma-card-radius: var(--shop-r-card);
	--bulma-box-radius: var(--shop-r-card);
	--bulma-card-shadow: var(--shop-shadow-sm);
	--bulma-box-shadow: var(--shop-shadow-sm);
	--fa-width: auto;
}

html {
	background-color: var(--shop-bg-1);
	scroll-padding-top: 8rem;
}
body {
	font-family: var(--shop-font-sans) !important;
	color: var(--shop-fg-2);
	font-size: var(--shop-text-md);
	line-height: var(--shop-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv11", "ss01";
}
strong, b, .label, .title, .subtitle strong {
	color: var(--shop-fg-1);
}

/* ---------- Typografie ---------- */
main .title,
main .title.is-3,
main .title.is-4 {
	font-family: var(--shop-font-display) !important;
	color: var(--shop-fg-1);
	font-weight: var(--shop-weight-bold);
	letter-spacing: var(--shop-tracking-tight);
	line-height: var(--shop-leading-tight);
}
main .title.is-3 {
	font-size: var(--shop-text-3xl);
}
main .title.is-4 {
	font-size: var(--shop-text-2xl);
}
main .title.is-5 {
	font-size: var(--shop-text-xl);
}
main .subtitle {
	color: var(--shop-fg-2);
	line-height: var(--shop-leading-body);
}
main a {
	color: var(--shop-brand-text);
	text-underline-offset: 0.2em;
}
main a:hover {
	color: var(--shop-fg-1);
}
.shop-eyebrow {
	display: inline-block;
	font-size: var(--shop-text-xs);
	font-weight: var(--shop-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--shop-brand-text);
	margin-bottom: var(--shop-space-2);
}

/* ---------- Focus (WCAG 2.4.7) ---------- */
:focus-visible {
	outline: 3px solid var(--shop-brand-text) !important;
	outline-offset: 2px;
}

/* ---------- Secties ---------- */
main section:nth-child(even) {
	background-color: transparent;
}
main .section {
	padding: var(--shop-section-y) var(--shop-gutter);
}
main .container,
header .container,
footer .container,
#breadcrumbs .container {
	max-width: var(--shop-container) !important;
}

/* ---------- Knoppen ---------- */
main .button,
header .button,
.modal .button {
	font-family: var(--shop-font-sans);
	font-weight: var(--shop-weight-semibold);
	border-radius: var(--shop-r-pill);
	min-height: 2.75rem;
	padding-inline: 1.25em;
	transition: background-color var(--shop-dur) var(--shop-ease), box-shadow var(--shop-dur) var(--shop-ease), transform var(--shop-dur) var(--shop-ease);
}
main .button.is-primary,
header .button.is-primary,
.modal .button.is-primary,
.cookies .button.is-primary {
	background-color: var(--shop-brand) !important;
	color: var(--shop-fg-on-brand) !important;
	border-color: transparent !important;
	box-shadow: var(--shop-shadow-sm);
}
main .button.is-primary:hover,
header .button.is-primary:hover,
.modal .button.is-primary:hover,
.cookies .button.is-primary:hover {
	background-color: var(--shop-brand-deep) !important;
	color: var(--shop-fg-on-brand-deep) !important;
	box-shadow: var(--shop-shadow-brand);
}
main .button.is-primary:active {
	transform: translateY(1px);
}
main .button:not(.is-primary):not(.is-text):hover {
	background-color: var(--shop-bg-2) !important;
	color: var(--shop-fg-1) !important;
	border-color: var(--shop-border-strong) !important;
}
main .button.is-loading:hover {
	color: transparent !important;
}
main .has-text-primary,
header .has-text-primary {
	color: var(--shop-brand-text) !important;
}
main .has-background-primary {
	background-color: var(--shop-brand) !important;
	color: var(--shop-fg-on-brand) !important;
}

/* ---------- Velden ---------- */
main .input,
main .textarea,
main .select select,
header .input {
	border-radius: var(--shop-r-sm);
	border-color: var(--shop-border-strong) !important;
	box-shadow: none;
	min-height: 2.75rem;
	color: var(--shop-fg-1);
	font-family: var(--shop-font-sans);
}
main .input:focus,
main .textarea:focus,
main .select select:focus,
header .input:focus {
	border-color: var(--shop-brand) !important;
	box-shadow: var(--shop-focus-ring) !important;
}
main .input::placeholder,
header .input::placeholder {
	color: var(--shop-fg-3);
}
main form .select:not(.is-multiple):not(.is-loading)::after {
	border-color: var(--shop-fg-2) !important;
}

/* ---------- Kaarten en beelden ---------- */
main .card,
main .box {
	border-radius: var(--shop-r-card);
	box-shadow: var(--shop-shadow-sm);
	border: 1px solid var(--shop-border);
}
main img {
	border-radius: var(--shop-r-md);
}
main .card-image:first-child img,
main .card-image:last-child img {
	border-radius: 0;
}

/* ---------- Tags / badges ---------- */
main .tag:not(body) {
	border-radius: var(--shop-r-pill);
	font-weight: var(--shop-weight-semibold);
	font-size: var(--shop-text-xs);
	background-color: var(--shop-bg-1);
	color: var(--shop-fg-1);
	box-shadow: var(--shop-shadow-sm);
}

/* ---------- Skeleton en lege toestand ---------- */
.shop-skeleton {
	background: linear-gradient(90deg, var(--shop-bg-3) 0%, var(--shop-bg-2) 50%, var(--shop-bg-3) 100%);
	background-size: 200% 100%;
	animation: shop-shimmer 1.4s linear infinite;
	border-radius: var(--shop-r-sm);
}
@keyframes shop-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}
.shop-empty {
	text-align: center;
	padding: var(--shop-space-7) var(--shop-space-4);
	color: var(--shop-fg-2);
	background: var(--shop-bg-2);
	border-radius: var(--shop-r-card);
}
.shop-empty .icon {
	font-size: 2rem;
	color: var(--shop-fg-3);
	margin-bottom: var(--shop-space-3);
}

/* ---------- Breadcrumbs ---------- */
#breadcrumbs {
	background: var(--shop-bg-1);
}
#breadcrumbs .breadcrumb {
	font-size: var(--shop-text-sm);
	padding-block: var(--shop-space-4) 0;
}
#breadcrumbs .breadcrumb a {
	color: var(--shop-fg-3);
}
#breadcrumbs .breadcrumb li.is-active a {
	color: var(--shop-fg-1);
	font-weight: var(--shop-weight-medium);
}

@media (prefers-reduced-motion: reduce) {
	.shop-skeleton {
		animation: none;
	}
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}

/* ---------- Gedeelde stukjes (stap 2: mandje, kassa, account) ---------- */
.is-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.shop-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.65em;
	border-radius: var(--shop-r-pill);
	background: var(--shop-bg-2);
	color: var(--shop-fg-2);
	font-size: var(--shop-text-xs);
	font-weight: var(--shop-weight-semibold);
	line-height: 1.5;
}
.shop-badge.is-pos { background: var(--shop-pos-quiet); color: var(--shop-pos); }
.shop-badge.is-warn { background: var(--shop-warn-quiet); color: var(--shop-warn); }
.shop-badge.is-neg { background: var(--shop-neg-quiet); color: var(--shop-neg); }
.shop-badge.is-brand { background: var(--shop-accent-quiet); color: var(--shop-brand-text); }
.shop-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 var(--shop-space-4);
	border: 1px solid var(--shop-border-strong);
	border-radius: var(--shop-r-pill);
	background: var(--shop-bg-1);
	color: var(--shop-fg-1) !important;
	font-weight: var(--shop-weight-medium);
	text-decoration: none;
	transition: border-color var(--shop-dur) var(--shop-ease), background-color var(--shop-dur) var(--shop-ease);
}
.shop-chip:hover {
	border-color: var(--shop-brand);
	background: var(--shop-accent-quiet);
}
.shop-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--shop-fg-3);
	cursor: pointer;
	font-size: 1rem;
	transition: background-color var(--shop-dur) var(--shop-ease), color var(--shop-dur) var(--shop-ease);
}
.shop-icon-btn:hover {
	background: var(--shop-neg-quiet);
	color: var(--shop-neg);
}
.shop-alert {
	display: flex;
	gap: var(--shop-space-3);
	align-items: flex-start;
	padding: var(--shop-space-4);
	border-radius: var(--shop-r-md);
	background: var(--shop-warn-quiet);
	color: var(--shop-warn);
}
.shop-alert.is-neg { background: var(--shop-neg-quiet); color: var(--shop-neg); }
.shop-alert p { color: inherit; margin: 0; }
.shop-alert i { margin-top: 0.3em; }
.shop-optional {
	color: var(--shop-fg-3);
	font-weight: var(--shop-weight-regular);
}
main .shop-field-error,
main .errorMessage.shop-field-error {
	color: var(--shop-neg);
	font-size: var(--shop-text-sm);
	margin-top: var(--shop-space-2);
}