/**
 * Qrest — winkelwagenlade en ontwerptokens.
 *
 * Laadt op ELKE pagina: de lade staat in de footer van elke pagina. Hierin
 * staat alleen wat die lade nodig heeft, plus de tokens uit :root.
 * Winkelwagen, afrekenen en bevestiging staan in qrest-checkout.css.
 */
/* ============================================================================
   QREST — winkelwagen, mini-cart, afrekenen, bevestiging
   Ontwerp: "Qrest Cart & Checkout v3" (boards 1a–5b).

   Tokens komen 1-op-1 uit het Qrest design system (tokens/colors, /typography,
   /spacing, /effects). Ze staan hier met een --qc-prefix zodat ze niet botsen
   met Avada of de --qr-* van de headerplugin.

   Lettertypes komen uit het thema: --qc-font-body en --qc-font-heading lezen de
   typografievariabelen die Avada op :root zet. Wisselt de winkel van lettertype,
   dan wisselt het afrekenen mee. Dit bestand haalt géén extra fonts op.

   Breakpoints: > 1024 desktop (board a) · 641–1024 tablet (board b) · <= 640 mobiel (board c)
   ========================================================================== */

:root {
	--qc-sand-light: #F7EFE4;
	--qc-sand: #EFE3D2;
	--qc-sand-deep: #E2D2B8;
	--qc-cream: #FFF9F2;
	--qc-white: #FFFFFF;
	--qc-border: #E6E6E6;
	--qc-border-warm: #E2D6C4;

	--qc-bark: #45362A;
	--qc-bark-deep: #33271E;
	--qc-ink: #021413;

	--qc-orange-light: #F2B04C;
	--qc-orange: #DE8527;
	--qc-orange-deep: #C4700F;
	--qc-orange-text: #A0590A;

	--qc-slate: #424D4E;
	--qc-teal: #18605D;
	--qc-green: #65BC7B;

	--qc-text-heading: var(--qc-ink);
	--qc-text-body: var(--qc-slate);
	--qc-text-muted: rgba(66, 77, 78, .65);
	--qc-text-price: var(--qc-bark);

	--qc-cta-gradient: linear-gradient(180deg, var(--qc-orange-light) 0%, var(--qc-orange) 100%);
	--qc-action-soft: rgba(222, 133, 39, .10);
	--qc-action-soft-strong: rgba(222, 133, 39, .20);
	--qc-focus-ring: rgba(222, 133, 39, .30);

	--qc-success-bg: #EEF7F0;
	--qc-warning-bg: #FDF1DE;
	--qc-error: #C0392B;
	--qc-error-bg: #FBEDEA;
	--qc-info-bg: #F4F5F5;
	--qc-rating: #F2B04C;

	/* Iconen in bruin (huisstijlkleur), op verzoek — niet in teal. */
	--qc-icon: var(--qc-bark);

	/*
	 * Typografie volgt de winkel, niet dit bestand.
	 *
	 * Avada zet zijn eigen typografie als variabelen op :root, dus we lezen die
	 * uit in plaats van een lettertype vast te schroeven. Wijzigt de winkel van
	 * lettertype in Avada -> Theme Options -> Typography, dan verandert het
	 * afrekenen mee, zonder deze plugin aan te raken. De opgeschreven waarden
	 * blijven staan als vangnet voor als het thema die variabelen niet levert.
	 */
	--qc-font-heading: var(--h3_typography-font-family, var(--awb-typography1-font-family, "Gentium Book Plus", Georgia, serif));
	--qc-font-body: var(--body_typography-font-family, var(--awb-typography4-font-family, "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif));

	--qc-radius-s: 6px;
	--qc-radius-m: 12px;
	--qc-radius-l: 20px;

	--qc-shadow-card: 0 2px 8px rgba(2, 20, 19, .06);
	--qc-shadow-overlay: 0 16px 48px rgba(2, 20, 19, .18);
	--qc-shadow-button: 0 2px 6px rgba(222, 133, 39, .28);

	--qc-ease: cubic-bezier(.22, .61, .36, 1);
	--qc-fast: 150ms;
	--qc-med: 250ms;
}

@keyframes qc-spin { to { transform: rotate(360deg); } }
@keyframes qc-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes qc-fade-in { from { opacity: 0; } to { opacity: 1; } }

.qc-page *, .qc-page *::before, .qc-page *::after,
.qc-drawer *, .qc-drawer *::before, .qc-drawer *::after { box-sizing: border-box; }
/* Knoppen, thumbnails en productnamen zijn geen tekstlinks. */
.qc-page a.qc-btn, .qc-page a.checkout-button, .qc-page a.qc-thumb, .qc-page a.remove,
.qc-page a.qc-cart__name, .qc-page .qc-choice a,
.qc-drawer a.qc-btn, .qc-drawer a.qc-drawer__thumb, .qc-drawer a.qc-drawer__name,
.qc-topbar a { text-decoration: none !important; }
.qc-page a.qc-cart__name:hover, .qc-drawer a.qc-drawer__name:hover { text-decoration: underline !important; }

.qc-icon { flex: none; display: block; }

/* Fusion-elementen en thema's zetten hun eigen typografie op de wrapper waar
   onze templates in landen; die erven wij dan. Daarom zetten we de font-family
   expliciet op onze eigen bouwstenen in plaats van hem te laten overerven. */
.qc-page, .qc-drawer, .qc-topbar,
.qc-page p, .qc-page span, .qc-page div, .qc-page li, .qc-page td, .qc-page th,
.qc-page a, .qc-page label, .qc-page strong, .qc-page em, .qc-page small, .qc-page address,
.qc-drawer p, .qc-drawer span, .qc-drawer div, .qc-drawer li, .qc-drawer a, .qc-drawer label,
.qc-topbar span, .qc-topbar a {
	font-family: var(--qc-font-body);
}
.qc-page h1, .qc-page h2,
.qc-page .qc-empty__title, .qc-page .qc-thanks__title, .qc-page .qc-ctabanner h2,
.qc-drawer .qc-drawer__title {
	font-family: var(--qc-font-heading);
}


/* ---------------------------------------------------------------------------
   2a. Themareset — thema's stylen kale <button> en <input> met hoge
   specificiteit (Avada: .fusion-button/button; Twenty Twenty-One:
   `button:not(:hover):not(:active):not(.has-background)` = 0,3,1). Binnen
   onze schermen horen onze eigen componentstijlen te winnen, dus deze
   eigenschappen krijgen !important. De componentregels hieronder staan later
   in het bestand en overschrijven de reset waar dat nodig is.
   --------------------------------------------------------------------------- */

.qc-page button, .qc-page input, .qc-page select, .qc-page textarea,
.qc-drawer button, .qc-drawer input,
.qc-topbar button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: var(--qc-font-body) !important;
	min-height: 0 !important;
	min-width: 0;
	text-shadow: none;
	color: inherit;
	line-height: 1.4;
	margin: 0;
}

/* Sommige thema's zetten een leesbreedte op alles in <main> (Twenty Twenty-One:
   `header *, main *, footer * { max-width: … }`). Onze schermen bepalen hun
   eigen breedtes; de componentregels verderop zetten waar nodig weer een max. */
.qc-page, .qc-page *, .qc-drawer, .qc-drawer *, .qc-topbar, .qc-topbar * { max-width: none; }
.qc-page img, .qc-drawer img, .qc-topbar img { max-width: 100%; height: auto; }

/* WooCommerce levert per thema een compat-stylesheet mee (assets/css/
   twenty-twenty-one.css, en Avada doet hetzelfde) die de klassieke winkelwagen
   opmaakt met selectors als `.woocommerce .woocommerce-cart-form {text-align:center}`
   en `.woocommerce .woocommerce-cart-form input.qty {width:6em}`. Die zijn
   specifieker dan onze klassen. Binnen onze schermen bepalen wij de uitlijning;
   elementen met een eigen text-align (bedragen, akkoordregel) blijven staan,
   want een eigen declaratie wint altijd van een geërfde waarde. */
.qc-page, .qc-page .woocommerce-cart-form, .qc-page form.checkout,
.qc-page .cart_totals, .qc-page #order_review,
.qc-drawer, .qc-topbar {
	text-align: left !important;
}

/* Thema's plakken een pijl achter .checkout-button en vergelijkbare knoppen. */
.qc-page .qc-btn::after, .qc-page .qc-btn::before,
.qc-page a.checkout-button::after, .qc-page a.checkout-button::before,
.qc-page #place_order::after, .qc-page #place_order::before,
.qc-drawer .qc-btn::after, .qc-drawer .qc-btn::before {
	content: none !important;
	display: none !important;
}

/* ---------------------------------------------------------------------------
   2. Primitieven — 1-op-1 met de design-system-componenten
   --------------------------------------------------------------------------- */

/* Button ------------------------------------------------------------------ */
.qc-btn,
.qc-page .woocommerce-cart-form .button,
.qc-page a.checkout-button,
.qc-page #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--qc-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	padding: 13px 29px;
	border: 1px solid var(--qc-orange-light) !important;
	border-radius: var(--qc-radius-m) !important;
	background: var(--qc-cta-gradient) !important;
	color: #fff !important;
	box-shadow: var(--qc-shadow-button) !important;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: background var(--qc-fast) var(--qc-ease),
	            border-color var(--qc-fast) var(--qc-ease),
	            box-shadow var(--qc-fast) var(--qc-ease);
	text-transform: none;
	letter-spacing: 0;
}
.qc-btn:hover,
.qc-page a.checkout-button:hover,
.qc-page #place_order:hover {
	background: var(--qc-orange-deep) !important;
	border-color: var(--qc-orange-deep) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.qc-btn:active, .qc-page #place_order:active {
	background: var(--qc-orange-text) !important;
	border-color: var(--qc-orange-deep) !important;
}
.qc-btn--l, .qc-page a.checkout-button, .qc-page #place_order {
	font-size: 18px;
	padding: 25px 35px;
}
.qc-btn--secondary {
	background: transparent !important;
	border-color: var(--qc-orange) !important;
	color: var(--qc-orange-text) !important;
	box-shadow: none !important;
}
.qc-btn--secondary:hover { background: var(--qc-action-soft) !important; border-color: var(--qc-orange) !important; color: var(--qc-orange-text) !important; }
.qc-btn--secondary:active { background: var(--qc-action-soft-strong) !important; }
.qc-btn--block { display: flex; width: 100%; }
.qc-btn[disabled], .qc-btn.qc-is-loading, .qc-page #place_order[disabled] {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
}
.qc-btn:focus-visible, .qc-page #place_order:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--qc-focus-ring) !important;
}

/* Tekstlink --------------------------------------------------------------- */
.qc-textlink {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 15px; font-weight: 500;
	color: var(--qc-orange-text);
	text-decoration: none;
	cursor: pointer;
	background: none; border: 0; padding: 0;
	font-family: inherit;
}
.qc-textlink { color: var(--qc-orange-text) !important; }
.qc-textlink:hover { color: var(--qc-orange-deep) !important; text-decoration: underline; text-underline-offset: 3px; }
.qc-textlink--muted { color: var(--qc-text-muted) !important; }
.qc-textlink--muted:hover { color: var(--qc-orange-text) !important; }
.qc-textlink--muted { color: var(--qc-text-muted); font-size: 13px; }
.qc-textlink--muted:hover { color: var(--qc-orange-text); }

.qc-page .woocommerce-invalid::after,
.qc-page .woocommerce-invalid::before,
.qc-page .woocommerce-invalid-required-field::after,
.qc-drawer .woocommerce-invalid::after {
	content: none !important;
}
.qc-page .includes_tax, .qc-page .tax_label, .qc-drawer .includes_tax { display: none; }

/* Radio & checkbox -------------------------------------------------------- */

/* WooCommerce's thema-compat-CSS tekent eigen radio's en toggles via
   pseudo-elementen (`.wc_payment_method input[type=radio] + label::before`,
   `#ship-to-different-address input + span::before/::after`). Wij hebben onze
   eigen .qc-choice__box, dus binnen een keuzeblok gaan alle pseudo-elementen uit. */
.qc-page .qc-choice::before, .qc-page .qc-choice::after,
.qc-page .qc-choice *::before, .qc-page .qc-choice *::after,
.qc-page .wc_payment_method > label::before,
.qc-page .wc_payment_method > label::after,
.qc-page #ship-to-different-address::before,
.qc-page #ship-to-different-address::after,
.qc-drawer .qc-choice::before, .qc-drawer .qc-choice::after,
.qc-drawer .qc-choice *::before, .qc-drawer .qc-choice *::after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
}

/* Deze regels bestaan omdat WooCommerce en het thema hun eigen radio's tekenen
   op label::before; alleen de eigenschappen die zij daadwerkelijk zetten hebben
   nadruk nodig. Het is nagemeten: zonder de rest blijven maat en uitlijning
   gelijk. */
.qc-page .qc-choice, .qc-drawer .qc-choice {
	display: inline-flex !important;
	text-align: left !important;
	float: none !important;
}
.qc-page .qc-choice__box, .qc-drawer .qc-choice__box {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	flex: none !important;
	padding: 0;
	background: var(--qc-white);
	transition: border var(--qc-fast) var(--qc-ease), background var(--qc-fast) var(--qc-ease);
}
.qc-page .qc-choice--radio .qc-choice__box, .qc-drawer .qc-choice--radio .qc-choice__box { border-radius: 50% !important; }
.qc-page .qc-choice--check .qc-choice__box, .qc-drawer .qc-choice--check .qc-choice__box { border-radius: var(--qc-radius-s) !important; }
.qc-page .qc-choice__text, .qc-drawer .qc-choice__text { text-align: left !important; padding: 0 !important; }
.qc-choice--check .qc-choice__box .qc-icon { opacity: 0; }
.qc-choice--check input:checked ~ .qc-choice__box .qc-icon { opacity: 1; }

/* Betaalchips ------------------------------------------------------------- */
.qc-chip {
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--qc-radius-s);
	padding: 3px 9px;
	white-space: nowrap;
	background: var(--qc-white);
	line-height: 1.4;
}
.qc-chip--ideal { font-style: italic; color: #B3005E; border: 1px solid #E3C7D4; }
.qc-chip--bancontact { color: #1E4A8F; border: 1px solid #C9D4E6; }
.qc-chip--card { color: var(--qc-text-muted); border: 1px solid var(--qc-border-warm); }
.qc-chip--klarna { color: #0B051D; border: 1px solid #F2B8CB; }
.qc-chip--paypal { color: #003087; border: 1px solid #C2CCE4; }
/* Ook klaar voor methodes die de winkel later aanzet — zonder deze regels
   zou zo'n chip zonder kleur en rand verschijnen. */
.qc-chip--eps { color: #B3005E; border: 1px solid #E3C7D4; }
.qc-chip--wallet { color: var(--qc-text-heading); border: 1px solid var(--qc-border-warm); }
/* Links uitlijnen, niet centreren: bij vijf methodes viel de laatste chip op
   een eigen regel en stond die in zijn eentje gecentreerd onder de rij. */
.qc-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	column-gap: 8px;
	row-gap: 8px;
}
.qc-chips .qc-chip { flex: 0 0 auto; }

/* Aantalteller ------------------------------------------------------------ */
/* Bij een "afzonderlijk verkocht" product staat er geen teller maar een vast
   getal. Zonder deze regel kreeg dat vakje geen breedte en werd het een randje
   van negen pixels naast een vak van honderdtien. */
.qc-stepper--single {
	min-width: 110px;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	color: var(--qc-text-heading);
}

.qc-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 46px;
	border: 1px solid var(--qc-border);
	border-radius: var(--qc-radius-m);
	background: var(--qc-white);
	overflow: hidden;
	flex: none;
}
.qc-stepper__btn:hover:not(:disabled) { background: var(--qc-action-soft) !important; }
.qc-stepper__btn {
	width: 42px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--qc-orange-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--qc-fast) var(--qc-ease);
}
.qc-stepper__btn:hover:not(:disabled) { background: var(--qc-action-soft); }
.qc-stepper__btn:disabled { color: var(--qc-text-muted); cursor: not-allowed; }
.qc-stepper input.qty {
	/* !important omdat zowel onze eigen generieke inputregel als
	   `.woocommerce .woocommerce-cart-form input.qty {width:6em}` specifieker zijn. */
	width: 44px !important;
	min-width: 44px;
	text-align: center !important;
	border: 0 !important;
	border-left: 1px solid var(--qc-border) !important;
	border-right: 1px solid var(--qc-border) !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-size: 15px;
	font-weight: 600;
	color: var(--qc-text-heading);
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
	height: auto;
}
.qc-stepper input.qty::-webkit-outer-spin-button,
.qc-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qc-stepper input.qty:focus { box-shadow: none; border-color: var(--qc-border); outline: none; }
.qc-stepper--s { height: 36px; }
.qc-stepper--s .qc-stepper__btn { width: 32px; }
.qc-stepper--s input.qty { width: 34px !important; min-width: 34px; font-size: 14px; }

/* Bedragregels ------------------------------------------------------------ */
.qc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; color: var(--qc-text-muted); }
.qc-row > span:last-child { color: var(--qc-text-body); white-space: nowrap; }
.qc-row--strong > span:first-child { font-weight: 700; font-size: 16px; color: var(--qc-text-heading); }
.qc-row--strong > span:last-child { font-weight: 700; font-size: 21px; color: var(--qc-text-price); }
.qc-row > span.qc-row__free, .qc-row__free { font-weight: 600; color: var(--qc-teal); }
.qc-row > span.qc-row__paid, .qc-row__paid { font-weight: 600; color: var(--qc-text-price); }
.qc-note { font-size: 12.5px; color: var(--qc-text-muted); line-height: 1.5; margin: -8px 0 0; }
.qc-thumb {
	width: 84px; height: 84px;
	flex: none;
	border-radius: var(--qc-radius-m);
	overflow: hidden;
	background: var(--qc-sand);
	display: block;
}
.qc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.qc-drawer .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   4. Mini-cart drawer — boards 1a/1b/1c
   --------------------------------------------------------------------------- */

.qc-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(2, 20, 19, .45);
	z-index: 100000;
	animation: qc-fade-in var(--qc-med) var(--qc-ease);
}
.qc-drawer-overlay[hidden] { display: none; }

.qc-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: 420px;
	max-width: calc(100vw - 28px);
	background: var(--qc-white);
	box-shadow: var(--qc-shadow-overlay);
	z-index: 100001;
	display: flex;
	flex-direction: column;
	font-family: var(--qc-font-body);
	color: var(--qc-text-body);
	animation: qc-slide-in 200ms var(--qc-ease);
}
.qc-drawer[hidden] { display: none; }
.qc-drawer .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qc-drawer a { color: var(--qc-orange-text); }

.qc-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var(--qc-border);
	flex: none;
}
.qc-drawer__title { font-family: var(--qc-font-heading); font-weight: 400; font-size: 22px; color: var(--qc-text-heading); margin: 0; }
.qc-drawer__title span { font-family: var(--qc-font-body); font-size: 14px; color: var(--qc-text-muted); }
.qc-drawer__close {
	background: none;
	border: 0;
	padding: 6px;
	margin: -6px;
	color: var(--qc-text-muted);
	cursor: pointer;
	border-radius: var(--qc-radius-s);
	display: flex;
}
.qc-drawer__close { border-radius: var(--qc-radius-s) !important; color: var(--qc-text-muted); }
.qc-drawer__close:hover { color: var(--qc-text-heading); background: var(--qc-sand-light) !important; }

.qc-drawer__list {
	flex: 1;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 4px 24px;
	min-height: 0;
}
.qc-drawer__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--qc-border); margin: 0; }
.qc-drawer__item:last-child { border-bottom: 0; }
.qc-drawer__thumb { width: 64px; height: 64px; flex: none; border-radius: var(--qc-radius-m); overflow: hidden; background: var(--qc-sand); }
.qc-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qc-drawer__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qc-drawer__top { display: flex; justify-content: space-between; gap: 10px; }
.qc-drawer a.qc-drawer__name, .qc-drawer__name { font-weight: 600; font-size: 14px; color: var(--qc-text-heading); line-height: 1.35; text-decoration: none; }
.qc-drawer a.qc-drawer__name:hover { color: var(--qc-orange-text); }
.qc-drawer__price { font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--qc-text-price); }
.qc-drawer__variant { font-size: 12.5px; color: var(--qc-text-muted); }
.qc-drawer__variant p, .qc-drawer__variant dl { margin: 0; font-size: inherit; }
.qc-drawer__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; gap: 10px; }

.qc-drawer__foot {
	border-top: 1px solid var(--qc-border);
	padding: 18px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--qc-white);
	flex: none;
	position: relative;
}
.qc-drawer__foot .qc-row { font-size: 14px; }
.qc-drawer__subtotal { display: flex; justify-content: space-between; align-items: baseline; }
.qc-drawer__subtotal > span:first-child { font-size: 14px; color: var(--qc-text-muted); }
.qc-drawer__subtotal .qc-small { font-size: 12px; }
.qc-drawer__subtotal > span:last-child { font-weight: 700; font-size: 18px; color: var(--qc-text-price); }

.qc-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 24px; text-align: center; }
.qc-drawer__empty p { margin: 0; font-size: 15px; color: var(--qc-text-body); }

body.qc-drawer-open { overflow: hidden; }
@keyframes qc-payment-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   7. Laadstatussen — board 5b (blockUI, redirect-interstitial)
   --------------------------------------------------------------------------- */

.qc-page .blockUI.blockOverlay,
.qc-drawer .blockUI.blockOverlay {
	background: rgba(255, 255, 255, .72) !important;
	opacity: 1 !important;
	border-radius: var(--qc-radius-m);
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: progress;
}
.qc-page .blockUI.blockOverlay::before,
.qc-drawer .blockUI.blockOverlay::before {
	content: "";
	width: 18px; height: 18px;
	flex: none;
	border: 2.5px solid var(--qc-action-soft-strong);
	border-top-color: var(--qc-orange);
	border-radius: 999px;
	animation: qc-spin .8s linear infinite;
	background: none;
}
.qc-page .blockUI.blockOverlay::after,
.qc-drawer .blockUI.blockOverlay::after {
	/* animation expliciet uit: een andere stylesheet kan hier een spinner op
	   zetten, en dan draait onze labeltekst mee. */
	animation: none !important;
	transform: none !important;
	content: attr(data-qc-label);
	font-family: var(--qc-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--qc-text-body);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   9. Tablet — 641…1024 (boards 1b/2b/2e/3b/4b)
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.qc-thumb { grid-area: img; width: 72px; height: 72px; align-self: start; }
	.qc-stepper { height: 36px; }
	.qc-stepper__btn { width: 32px; }
	.qc-stepper input.qty { width: 34px; min-width: 34px; font-size: 14px; }

	.qc-drawer { width: 400px; }
}

/* ---------------------------------------------------------------------------
   10. Mobiel — <= 640 (boards 1c/2c/2f/3c/4c/5a)
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.qc-thumb { width: 64px; height: 64px; }
	.qc-row { font-size: 13.5px; }
	.qc-row--strong > span:first-child { font-size: 15px; }
	.qc-row--strong > span:last-child { font-size: 19px; }
	/* De basisregel voor .qc-btn--l zet font-size en padding met !important
	   (nodig tegen Avada's .fusion-button-default-size). Zonder !important
	   hier bleef de knop op mobiel op desktopmaat staan. */
	.qc-btn--l, .qc-page a.checkout-button, .qc-page #place_order {
		font-size: 16px !important; padding: 15px 24px !important;
	}

	.qc-drawer { width: 100%; max-width: calc(100vw - 28px); }
	.qc-drawer__head { padding: 16px 18px; }
	.qc-drawer__title { font-size: 20px; }
	.qc-drawer__list { padding: 2px 18px; }
	.qc-drawer__item { gap: 12px; padding: 14px 0; }
	.qc-drawer__thumb { width: 56px; height: 56px; }
	.qc-drawer__foot { padding: 14px 18px 18px; gap: 10px; }
}

/* Toegankelijkheid: geen animatie voor wie dat liever niet heeft. */
@media (prefers-reduced-motion: reduce) {
	.qc-drawer, .qc-drawer-overlay { animation: none; }
}

/* =============================================================================
   Cascadewacht — gemeten, niet geraden.

   Avada levert één samengevoegde stylesheet mee die op deze schermen een aantal
   van onze eigen waarden overneemt. Waar dat gebeurt met een id-selector of een
   body-klasse is er geen specificiteit die daar nog bovenuit komt; dan is
   !important de enige nette uitweg. Per regel staat de winnende selector erbij,
   zodat later te controleren is of hij er nog steeds is.

   Meet altijd opnieuw voordat je hier iets weghaalt: draai de cascadecontrole
   uit het projectlogboek en kijk of het thema het nog steeds overneemt.
   ============================================================================= */

/* `.woocommerce .checkout #place_order` (id, 1-2-0) zette het gewicht op 300 en
   `.fusion-body .fusion-button-default-size` de maat op 16px en de regelhoogte
   op 19,2px — de knoptekst werd daardoor dun en klein. */
.qc-page .qc-btn,
.qc-page a.checkout-button,
.qc-page #place_order,
.qc-drawer .qc-btn {
	font-family: var(--qc-font-body) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   Ontbrekende productfoto
   Staat een afbeeldingsbestand er niet, dan toont de browser de alt-tekst als
   losse regel — die trekt de rij uit elkaar en valt op in de accentkleur. In
   plaats daarvan een rustige tegel in de maat die de rij toch al reserveert.
   De JS zet de klasse zodra een afbeelding niet laadt.
   --------------------------------------------------------------------------- */
.qc-page .qc-thumb--leeg,
.qc-drawer .qc-thumb--leeg {
	background-color: var(--qc-sand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2345362A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.45'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='m21 16-4.5-4.5L7 20'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 42%;
	overflow: hidden;
}
.qc-page .qc-thumb--leeg > *,
.qc-drawer .qc-thumb--leeg > * { display: none !important; }