/**
 * Qrest — winkelwagen, afrekenen en bevestiging.
 *
 * Laadt alleen op die schermen. qrest-drawer.css is een vereiste: daar staan
 * de ontwerptokens en de componenten die de lade meegebruikt.
 */
@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; } }

/* ---------------------------------------------------------------------------
   1. Paginashell — de winkelwagen/checkout/bedankt-pagina's krijgen het
   zandkleurige paginavlak uit het ontwerp en gaan uit de Avada-kolom.
   --------------------------------------------------------------------------- */

/* Paginagrond wit op verzoek; het zand blijft alleen als klein accent
   (stapnummers, aantalbadge, lege-winkelwagenschijf). */
/* Achtergrond van beide schermen: zand bovenaan, naar wit toe.
   Het verloop staat op de body en niet op .qc-page, zodat het ook achter de
   eigen kopbalk doorloopt en niet met de inhoud meegroeit — over een pagina van
   3000px uitgerekt zou je van het zand niets meer zien. Vandaar een vaste
   overgangshoogte en daaronder gewoon wit. Het eindpunt is dezelfde kleur met
   alfa 0: naar `white` toe lopen geeft een grijzige tussenkleur. */
body.qc-screen {
	background-color: var(--qc-white);
	background-image: linear-gradient(180deg, var(--qc-sand-light) 0, rgba(247, 239, 228, 0) 560px);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 560px;
}

/* Laat de contentkolom van het thema het zandvlak doorlaten.
   LET OP: alles hieronder staat bewust binnen <main> / #main. Avada gebruikt
   .fusion-row óók voor de header en de footer; zonder die inperking trekken we
   de sitebreedte van de header uit elkaar. */
body.qc-screen #main,
body.qc-screen main,
body.qc-screen #main .fusion-row,
body.qc-screen main .fusion-row,
body.qc-screen #main .post-content,
body.qc-screen main .post-content,
body.qc-screen .entry-content,
body.qc-screen .woocommerce {
	background: transparent !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	/* Verticaal net zo goed. Het thema zet op deze houders zijn eigen onder- en
	   bovenruimte (Avada: Theme Options -> content padding), en op een kort
	   scherm — een lege winkelwagen, of een winkelwagen met één regel — bleef
	   daaronder een groot wit vlak staan tot aan de voettekst. Onze eigen
	   .qc-page levert de ruimte al: 44px boven, 72px onder. */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Wat het thema aan onze eigen buitenkant hangt, telt niet mee. */
.qc-page { margin: 0 !important; }

.qc-page {
	/* Doorzichtig: het verloop op de body moet hier doorheen komen. */
	background: transparent;
	font-family: var(--qc-font-body);
	font-weight: 300;
	color: var(--qc-text-body);
	-webkit-font-smoothing: antialiased;
	width: 100%;
	--qc-bleed: 0px;
	padding-inline: max(24px, calc((100% - 1200px) / 2));
	padding-block: 44px 72px;
	box-sizing: border-box;
}

.qc-page a { color: var(--qc-orange-text); text-decoration: underline; text-underline-offset: 2px; }
.qc-page a:hover { color: var(--qc-orange-deep); }

.qc-page h1 {
	font-family: var(--qc-font-heading);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.25;
	color: var(--qc-text-heading);
	margin: 0 0 20px;
}
.qc-page h1 .qc-count {
	font-family: var(--qc-font-body);
	font-size: 16px;
	font-weight: 300;
	color: var(--qc-text-muted);
	margin-left: 8px;
}

.qc-spinner {
	display: inline-block;
	width: 16px; height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 999px;
	animation: qc-spin .8s linear infinite;
	flex: none;
}

/* Kaart ------------------------------------------------------------------- */
.qc-card {
	background: var(--qc-white);
	border: 1px solid var(--qc-border);
	border-radius: var(--qc-radius-m);
	box-shadow: var(--qc-shadow-card);
}

/* Invoervelden ------------------------------------------------------------ */
.qc-page .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.qc-page .form-row label,
.qc-page .form-row > label {
	font-size: 13px;
	font-weight: 600;
	color: var(--qc-text-heading);
	line-height: 1.4;
	margin: 0;
}
.qc-page .form-row label .required,
.qc-page abbr.required { color: var(--qc-error); border: 0; text-decoration: none; }
.qc-page .optional { font-weight: 400; color: var(--qc-text-muted); }

.qc-page input[type=text],
.qc-page input[type=email],
.qc-page input[type=tel],
.qc-page input[type=number],
.qc-page input[type=password],
.qc-page textarea,
.qc-page select,
.qc-page .input-text {
	width: 100%;
	background: var(--qc-white) !important;
	border: 1px solid var(--qc-border) !important;
	border-radius: var(--qc-radius-m) !important;
	/* `.woocommerce form .form-row .input-text {padding:.5em}` uit de thema-compat
	   van WooCommerce is specifieker dan onze klasse; vandaar !important. */
	padding: 12px 16px !important;
	font-family: var(--qc-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4 !important;
	color: var(--qc-text-heading);
	box-shadow: none;
	transition: border-color var(--qc-fast) var(--qc-ease), box-shadow var(--qc-fast) var(--qc-ease);
	height: auto;
	min-height: 0;
}
.qc-page input::placeholder, .qc-page textarea::placeholder { color: var(--qc-text-muted); }
.qc-page input:focus,
.qc-page textarea:focus,
.qc-page select:focus,
.qc-page .input-text:focus {
	outline: none;
	border-color: var(--qc-orange) !important;
	box-shadow: 0 0 0 3px var(--qc-focus-ring) !important;
}
.qc-page input:disabled, .qc-page .input-text:disabled {
	background: var(--qc-sand-light);
	opacity: .55;
	cursor: not-allowed;
}

/* Fout / succes — Woo zet .woocommerce-invalid zelf op de wrapper */
.qc-page .woocommerce-invalid input.input-text,
.qc-page .woocommerce-invalid select,
.qc-page .qc-field--error input { border-color: var(--qc-error) !important; }
.qc-page .woocommerce-invalid input.input-text:focus,
.qc-page .qc-field--error input:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .18) !important; }

.qc-page .form-row .description {
	font-size: 13px;
	font-weight: 400;
	color: var(--qc-text-muted);
	line-height: 1.5;
}
/* Onder een veld hoort geen tekst te staan — het rode kader markeert het veld
   en de melding bovenaan het formulier noemt ze alle bij naam. Twee partijen
   schrijven daar tóch ongevraagd:
   · WooCommerce zet sinds 9.x een <p class="checkout-inline-error-message">
     onder het veld ("Vul E-mailadres in.");
   · Avada zet in includes/dynamic-css.php een globale regel
     .woocommerce-invalid:after { content: 'Please enter correct details…' }.
     Dat is een pseudo-element in een grid-cel, dus het duwt de kolommen uit
     elkaar; alleen `content: none` haalt het echt weg, `display:none` niet. */
/* WooCommerce trekt onder 840px zijn winkelwagentabel 30px omhoog
   (`.woocommerce-cart-form__contents { margin-top: -30px }`), omdat zijn eigen
   mobiele opmaak daar de tabelkop verbergt. Onze rijen dragen die klasse omdat
   Woo's cart.js hem nodig heeft om de AJAX-update te herkennen — met als gevolg
   dat de eerste kaart over de paginatitel heen schoof. */
.qc-page .woocommerce-cart-form__contents,
.qc-page form.woocommerce-cart-form .woocommerce-cart-form__contents {
	margin-top: 0 !important;
}

.qc-page .woocommerce-invalid .woocommerce-error,
.qc-page .checkout-inline-error-message,
.qc-page .form-row .woocommerce-password-hint { display: none !important; }

.qc-hidden, .qc-page .qc-hidden { display: none !important; }
.qc-choice {
	display: inline-flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 10px;
	cursor: pointer;
	font-family: var(--qc-font-body);
	margin: 0;
	position: relative;
}
.qc-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.qc-choice__box {
	width: 20px; height: 20px;
	flex: none;
	margin-top: 1px;
	background: var(--qc-white);
	border: 1.5px solid var(--qc-border);
	transition: border var(--qc-fast) var(--qc-ease), background var(--qc-fast) var(--qc-ease);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.qc-choice--radio .qc-choice__box { border-radius: 50%; }
.qc-choice--check .qc-choice__box { border-radius: var(--qc-radius-s); }
.qc-choice--radio input:checked ~ .qc-choice__box { border: 6px solid var(--qc-orange); }
.qc-choice--check input:checked ~ .qc-choice__box { border-color: var(--qc-orange); background: var(--qc-orange); }
.qc-choice input:focus-visible ~ .qc-choice__box { box-shadow: 0 0 0 3px var(--qc-focus-ring); }
.qc-choice__text { min-width: 0; }
.qc-choice__label { font-size: 15px; font-weight: 400; color: var(--qc-text-heading); line-height: 1.4; display: block; }
.qc-choice input:checked ~ .qc-choice__text .qc-choice__label { font-weight: 500; }
.qc-choice__desc { font-size: 13px; color: var(--qc-text-muted); display: block; margin-top: 2px; line-height: 1.5; }

/* Optiekaart (verzendmethode / betaalmethode) ----------------------------- */
.qc-option {
	display: flex;
	gap: 14px;
	align-items: center;
	border: 1px solid var(--qc-border-warm);
	background: var(--qc-white);
	border-radius: var(--qc-radius-m);
	padding: 16px 18px;
	transition: border-color var(--qc-fast) var(--qc-ease), background var(--qc-fast) var(--qc-ease);
	list-style: none;
	margin: 0;
}
.qc-option:hover { border-color: var(--qc-orange); }
.qc-option.qc-is-selected {
	border: 1.5px solid var(--qc-orange);
	background: var(--qc-action-soft);
	padding: 15.5px 17.5px;
}
.qc-option .qc-choice { flex: 1; }
.qc-option__price { font-weight: 600; font-size: 14.5px; white-space: nowrap; color: var(--qc-text-price); }
.qc-option__price--free { color: var(--qc-teal); }
.qc-options { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }

/* De lege ankers waar de JS blokken achter terugzet, tellen als flex-item mee
   en gaven daardoor telkens een extra gap — zichtbaar als een te grote sprong
   tussen de voorwaardenregel en de scheidingslijn. display:none haalt ze uit de
   opmaak; als DOM-ankerpunt blijven ze gewoon werken. */
.qc-page .qc-actions-home,
.qc-page .qc-assurance-home,
.qc-page .qc-shipping-source:empty { display: none; }

/* Alert ------------------------------------------------------------------- */
.qc-alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-radius: var(--qc-radius-m);
	padding: 14px 16px;
	font-family: var(--qc-font-body);
	border: 1px solid var(--qc-border);
	background: var(--qc-info-bg);
	margin: 0;
}
.qc-alert__title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.qc-alert__body { font-size: 13px; font-weight: 400; color: var(--qc-text-body); line-height: 1.55; }
.qc-alert__body p:last-child { margin-bottom: 0; }
.qc-alert--info { color: var(--qc-bark); }
.qc-alert--error { background: var(--qc-error-bg); border-color: rgba(192, 57, 43, .35); color: var(--qc-error); }
.qc-alert--warning { background: var(--qc-warning-bg); border-color: rgba(224, 134, 22, .4); color: #8A5410; }

/* ---------------------------------------------------------------------------
   Eén meldingscomponent
   WooCommerce kent drie generaties meldingen: de klassieke .woocommerce-message
   / -info / -error, en sinds 9.x de blokvariant .wc-block-components-notice-banner
   met is-success / is-error / is-warning / is-info. Ze verschijnen bovendien
   buiten .qc-page, in de eigen notice-wrapper van het thema. Ze krijgen hier
   allemaal exact de opmaak van .qc-alert, zodat een melding er op de winkelwagen
   hetzelfde uitziet als op het afrekenscherm.
   --------------------------------------------------------------------------- */
body.qc-screen .wc-block-components-notice-banner,
body.qc-screen .woocommerce-error,
body.qc-screen .woocommerce-message,
body.qc-screen .woocommerce-info,
.qc-page .woocommerce-error,
.qc-page .woocommerce-message,
.qc-page .woocommerce-info {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-radius: var(--qc-radius-m);
	padding: 14px 16px;
	border: 1px solid var(--qc-border);
	background: var(--qc-info-bg);
	color: var(--qc-bark);
	font-size: 14px;
	list-style: none;
	margin: 0 0 18px;
	flex-wrap: wrap;
}
body.qc-screen .woocommerce-error,
body.qc-screen .wc-block-components-notice-banner.is-error,
.qc-page .woocommerce-error {
	background: var(--qc-error-bg);
	border-color: rgba(192, 57, 43, .35);
	color: var(--qc-error);
	flex-direction: column;
	gap: 4px;
}
.qc-page .woocommerce-error li,
body.qc-screen .woocommerce-error li { list-style: none; margin: 0; }

body.qc-screen .woocommerce-message,
body.qc-screen .wc-block-components-notice-banner.is-success,
.qc-page .woocommerce-message {
	background: var(--qc-success-bg);
	border-color: rgba(101, 188, 123, .35);
	color: #2E6B3E;
}

body.qc-screen .wc-block-components-notice-banner.is-warning {
	background: var(--qc-warning-bg);
	border-color: rgba(224, 134, 22, .4);
	color: #8A5410;
}

/* Het icoon van de blokmelding krijgt de kleur van de melding zelf; Avada plakt
   er daarnaast met een pseudo-element een eigen glyph voor — die gaat uit. */
body.qc-screen .wc-block-components-notice-banner > svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	fill: currentColor;
}
body.qc-screen .wc-block-components-notice-banner::before,
body.qc-screen .wc-block-components-notice-banner .wc-forward::before,
.qc-page .woocommerce-error::before,
.qc-page .woocommerce-message::before,
.qc-page .woocommerce-info::before { content: none !important; display: none; }

/* Avada zet de binnenmaat van de blokmelding met !important
   (.fusion-body .wc-block-components-notice-banner). Zonder dezelfde nadruk
   houdt de melding op de winkelwagen andere marges dan onze eigen alert. */
body.qc-screen .wc-block-components-notice-banner {
	padding: 14px 16px !important;
	margin: 0 0 18px !important;
}

body.qc-screen .wc-block-components-notice-banner__content {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.5;
}

/* De knop in Woo's eigen melding ("Bekijk winkelwagen") krijgt onze look. */
body.qc-screen .woocommerce-message .button,
body.qc-screen .woocommerce-error .button {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	font-family: var(--qc-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	padding: 9px 20px !important;
	border-radius: var(--qc-radius-m) !important;
	border: 1px solid var(--qc-orange) !important;
	background: transparent !important;
	color: var(--qc-orange-text) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
}
body.qc-screen .woocommerce-message .button:hover {
	background: var(--qc-action-soft) !important;
}

/* USP-regel --------------------------------------------------------------- */
.qc-usp { display: flex; align-items: center; gap: 12px; font-family: var(--qc-font-body); }
.qc-usp__icon {
	width: 42px; height: 42px;
	border-radius: 50%;
	flex: none;
	background: var(--qc-sand);
	border: 1px solid var(--qc-sand-deep);
	color: var(--qc-orange-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}
.qc-usp__title { display: block; font-size: 15px; font-weight: 600; color: var(--qc-text-heading); line-height: 1.35; }
.qc-usp__desc { display: block; margin-top: 2px; font-size: 13px; font-weight: 300; color: var(--qc-text-muted); line-height: 1.5; }

/* Vertrouwensregels + sterren --------------------------------------------- */
.qc-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.qc-trust li { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--qc-text-body); margin: 0; }
.qc-stars { display: inline-flex; align-items: center; gap: 8px; }
.qc-stars__list { display: inline-flex; gap: 2px; }
.qc-stars__item { position: relative; display: inline-flex; }
/* Deels gevulde ster: een geklemde kopie bovenop de omtrek. */
.qc-stars__fill { position: absolute; inset: 0; overflow: hidden; display: inline-flex; }
.qc-stars__label { font-size: 13px; font-weight: 500; color: var(--qc-text-muted); }

/* Genummerde sectiekop ---------------------------------------------------- */
.qc-step {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.qc-step__n {
	width: 28px; height: 28px;
	border-radius: 999px;
	background: var(--qc-sand);
	color: var(--qc-text-heading);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.qc-step__title { font-weight: 700; font-size: 17px; color: var(--qc-text-heading); }
.qc-step__sub { font-size: 13px; color: var(--qc-text-muted); font-weight: 400; }
.qc-divider { height: 1px; background: var(--qc-border); border: 0; margin: 0; }

/* ---------------------------------------------------------------------------
   3. Winkelwagen — boards 2a/2b/2c (gevuld) en 2d/2e/2f (leeg)
   --------------------------------------------------------------------------- */

.qc-cart__grid {
	display: grid;
	grid-template-columns: 1fr 384px;
	gap: 40px;
	align-items: start;
}
.qc-cart__items { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.qc-page .woocommerce-cart-form { margin: 0; }

.qc-cart__table { overflow: hidden; }
.qc-cart__head,
.qc-cart__row {
	display: grid;
	grid-template-columns: 1fr 130px 110px 36px;
	gap: 20px;
	align-items: center;
}
.qc-cart__head {
	padding: 14px 26px;
	border-bottom: 1px solid var(--qc-border);
	font-size: 12px;
	font-weight: 600;
	color: var(--qc-text-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.qc-cart__head span:nth-child(3) { text-align: right; }
.qc-cart__row { padding: 22px 26px; border-bottom: 1px solid var(--qc-border); }
.qc-cart__row:last-child { border-bottom: 0; }

.qc-cart__product { display: flex; gap: 18px; align-items: center; min-width: 0; }
.qc-cart__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qc-page a.qc-cart__name, .qc-cart__name { font-weight: 600; font-size: 16px; color: var(--qc-text-heading); text-decoration: none; line-height: 1.35; }
.qc-page a.qc-cart__name:hover { color: var(--qc-orange-text); }
.qc-cart__variant,
.qc-cart__unit { font-size: 13.5px; color: var(--qc-text-muted); }
.qc-cart__variant p, .qc-cart__variant dl { margin: 0; font-size: inherit; }
.qc-cart__line { text-align: right; font-weight: 700; font-size: 16px; color: var(--qc-text-price); white-space: nowrap; }

.qc-page .product-remove { justify-self: end; }
.qc-page a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 999px;
	color: var(--qc-text-muted);
	background: transparent;
	font-size: 0;
	text-decoration: none;
	transition: background var(--qc-fast) var(--qc-ease), color var(--qc-fast) var(--qc-ease);
}
.qc-page a.remove:hover { background: var(--qc-action-soft); color: var(--qc-orange-text); }
.qc-remove__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qc-page .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* De update-knop is er alleen voor Woo's eigen AJAX-flow; de stepper klikt hem. */
.qc-cart__submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Overzichtkaart ---------------------------------------------------------- */
.qc-page .cart_totals {
	background: var(--qc-white);
	border: 1px solid var(--qc-border);
	border-radius: var(--qc-radius-m);
	box-shadow: var(--qc-shadow-card);
	padding: 26px !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: sticky;
	top: 24px;
}
.qc-page .cart_totals h2, .qc-summary__title { font-weight: 700; font-size: 18px; color: var(--qc-text-heading); font-family: var(--qc-font-body); margin: 0; }
.qc-summary__title .qc-count { font-weight: 400; font-size: 14px; color: var(--qc-text-muted); }

/* Lege winkelwagen — boards 2d/2e/2f -------------------------------------- */
/* Meldingenblok boven de lege-winkelwagenplaat. */
.qc-page.cart-empty-wrapper .qc-notices { margin: 0 auto 28px; max-width: 640px; }

.qc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
	padding: 44px 0 24px;
}
.qc-empty__disc {
	width: 72px; height: 72px;
	border-radius: 999px;
	background: var(--qc-sand);
	color: var(--qc-bark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.qc-empty__head { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; }
.qc-empty__title { font-family: var(--qc-font-heading); font-weight: 400; font-size: 36px; line-height: 1.25; color: var(--qc-text-heading); margin: 0; }
.qc-empty__text { font-size: 16px; color: var(--qc-text-body); font-weight: 300; line-height: 1.7; margin: 0; }
.qc-empty__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.qc-empty__usps { display: flex; gap: 56px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------------------
   5. Afrekenen — boards 3a/3b/3c + 5a
   --------------------------------------------------------------------------- */

.qc-checkout__grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 44px;
	align-items: start;
}
/* De titel loopt over beide kolommen; daardoor beginnen de eerste kaart links
   en de samenvatting rechts op dezelfde hoogte. */
.qc-checkout__grid > .qc-checkout__title { grid-column: 1 / -1; margin: 0; }
.qc-checkout__main { display: flex; flex-direction: column; gap: 20px; max-width: 700px; min-width: 0; }
.qc-page form.checkout { margin: 0; display: block; width: 100%; }
.qc-page form, .qc-page .woocommerce-cart-form { display: block; width: 100%; }
.qc-page #customer_details { display: contents; }
.qc-page .col2-set, .qc-page .col-1, .qc-page .col-2 { width: auto; float: none; display: contents; }

.qc-block {
	background: var(--qc-white);
	border: 1px solid var(--qc-border);
	border-radius: var(--qc-radius-m);
	box-shadow: var(--qc-shadow-card);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.qc-block h3 { margin: 0; }

.qc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qc-page .qc-col-12, .qc-page .form-row-wide { grid-column: 1 / -1; }
.qc-page .qc-col-6, .qc-page .form-row-first, .qc-page .form-row-last { grid-column: span 1; }

/* Op de bovenkant uitlijnen, niet op de onderkant. Met align-items:end schoof
   elk veld dat een foutmelding kreeg omhoog — de melding groeit naar beneden,
   de onderkanten bleven gelijk, en de labels van Postcode / Huisnr. / Toev.
   kwamen als een trapje te staan. De invoervelden liggen nu op één lijn omdat
   alle drie de labels even hoog zijn (één regel). */
/* Twee velden-rasters onder elkaar (bij het afwijkende bezorgadres staan de
   naamvelden in een eigen raster boven het adres) raakten elkaar: het raster
   heeft wel een gap tussen zijn eigen rijen, maar niet naar een volgend raster.
   De labels van Postcode/Huisnr. plakten daardoor tegen de naamvelden aan. */
.qc-page .qc-fields + .qc-fields,
.qc-page .qc-fields + .qc-fields--address,
.qc-page .qc-fields--address + .qc-fields { margin-top: 16px; }

.qc-fields--address { display: grid; grid-template-columns: 170px 110px 90px 1fr; gap: 12px; align-items: start; }
.qc-page .qc-col-postcode { grid-column: 1; }
.qc-page .qc-col-house { grid-column: 2; }
.qc-page .qc-col-suffix { grid-column: 3; }
.qc-lookup {
	grid-column: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--qc-teal);
	/* Zelfde hoogte als een invoerveld, 24px onder de labelregel — dat is precies
	   de afstand label -> input, dus de tekst staat op de lijn van de velden. */
	margin-top: 24px;
	min-height: 50px;
}
.qc-lookup:empty { display: none; }
.qc-lookup--error { color: var(--qc-error); }
.qc-lookup--busy { color: var(--qc-text-muted); }
.qc-lookup__spinner {
	width: 14px; height: 14px;
	border: 2px solid var(--qc-action-soft-strong);
	border-top-color: var(--qc-orange);
	border-radius: 999px;
	animation: qc-spin .8s linear infinite;
	flex: none;
}
/* Straat/plaats verschijnen alleen als de postcodecheck niets vindt. */
.qc-page .qc-manual-only { display: none; grid-column: span 2; }
.qc-address--manual .qc-manual-only { display: flex !important; }
/* Zonder JavaScript worden Straatnaam en Plaats opengezet door een <noscript>
   in woocommerce/checkout/form-checkout.php — ze zijn verplicht, en de
   postcodecheck die ze normaal invult is JavaScript. */

.qc-page #ship-to-different-address { margin: 2px 0 !important; font-size: inherit; font-weight: 400; display: block; }
.qc-page .shipping_address { display: none; margin-top: 4px; }
.qc-page .qc-ship-toggle { margin: 2px 0; }
/* Woo wikkelt elke input in een span — die moet de volle breedte pakken. */
.qc-page .woocommerce-input-wrapper { display: block; width: 100%; }

.qc-sublabel { font-size: 13px; font-weight: 600; color: var(--qc-text-heading); }

/* Verzendmethodes — verplaatst uit #order_review naar kaart 2 */
#qc-shipping-slot:empty { display: none; }
.qc-page #shipping_method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

/* Betaalmethodes — kaart 3 */
.qc-page #payment { background: transparent; border-radius: 0; padding: 0; }
.qc-page .wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qc-page .wc_payment_method > label { display: flex; flex: 1; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; font-size: 15px; font-weight: 400; color: var(--qc-text-heading); }
.qc-page .wc_payment_method > input[type=radio],
.qc-page .wc_payment_method > input.input-radio {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	pointer-events: none;
}
.qc-page .wc_payment_method label img { max-height: 22px; width: auto; margin-left: auto; }
.qc-page .wc_payment_method > input:checked + label .qc-choice__box { border: 6px solid var(--qc-orange); }
.qc-page .wc_payment_method > input:checked + label .qc-choice__label { font-weight: 500; }
.qc-page .wc_payment_method > input:focus-visible + label .qc-choice__box { box-shadow: 0 0 0 3px var(--qc-focus-ring); }
/* Geen hoogte-animatie: die rekt het blok uit en meet zijn eindhoogte te vroeg
   (zie settlePaymentBox in de JS). Alleen een zachte inloop, zodat het openen
   niet hard aanvoelt. */
.qc-page .wc_payment_method > input:checked ~ .payment_box {
	animation: qc-payment-in var(--qc-fast) var(--qc-ease) both;
}@keyframes qc-payment-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.qc-page .wc_payment_method > input:checked ~ .payment_box { animation: none; }
}

/* Avada zet hier `.checkout .payment_methods .payment_box { padding: 20px }`
   (0,3,0) overheen. Met die 20px kwamen de velden van de betaalprovider 37,5px
   van de rand van de kaart te staan, terwijl het label van de methode op 17,5px
   staat — zichtbaar uit de pas. Onze regel krijgt daarom de gatewayklasse erbij
   en dezelfde binnenmaat als de kaart zelf. */
.qc-page .payment_box,
.qc-page .payment_methods .payment_box,
.qc-page .wc_payment_method .payment_box {
	flex-basis: 100%;
	background: transparent;
	margin: 0 !important;
	padding: 14px 0 2px !important;
	font-size: 13px;
	color: var(--qc-text-muted);
	line-height: 1.55;
}
.qc-page .payment_box::before { display: none; }
.qc-page .payment_box p:last-child { margin-bottom: 0; }

/* Gateways die hun eigen formulier in de optiekaart zetten (WooPayments UPE,
   Stripe): de inhoud binnen de kaart houden. Wat ín hun iframe staat — zoals
   het Klarna-logo — bepaalt de gateway zelf. */
.qc-page .payment_box fieldset {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}
/* WooPayments zet border-radius: 10px !important op zijn eigen gatewayklasse
   (.payment_method_woocommerce_payments). Daardoor veranderde die ene kaart van
   vorm naast de andere. Met de gatewayklasse erbij weegt onze regel zwaarder. */
.qc-page li.wc_payment_method.qc-option,
.qc-page li.wc_payment_method.qc-option.qc-is-selected {
	border-radius: var(--qc-radius-m) !important;
}

/* Niet alleen in het label: een gateway zonder eigen chip valt terug op
   $gateway->get_icon(), en die zet zijn logo als los kind van de <li>. Klarna
   levert er een van 224x91 — zonder deze begrenzing rekt dat de hele kaart uit. */
.qc-page .payment_box img,
.qc-page .wc_payment_method img { max-height: 24px !important; width: auto !important; }
.qc-page .payment_box iframe,
.qc-page .payment_box .wcpay-upe-element,
.qc-page .payment_box .wc-payment-form { max-width: 100% !important; }
.qc-page .payment_box .testmode-info {
	font-size: 12.5px;
	color: var(--qc-text-muted);
	line-height: 1.5;
	margin: 0 0 8px;
}
.qc-page .payment_box .testmode-info:empty { display: none; }
.qc-page .wc_payment_method { flex-wrap: wrap; }

/* WooCommerce's eigen kolomlayout uitschakelen — wij doen het met grid.
   woocommerce-layout.css en de thema-compat-sheets gebruiken selectors als
   `.woocommerce-checkout form #order_review` (1,2,1); vandaar !important. */
.qc-page #customer_details, .qc-page #order_review,
.qc-page .col2-set, .qc-page .col-1, .qc-page .col-2,
.qc-page .cart-collaterals, .qc-page .cart_totals, .qc-page .woocommerce-cart-form {
	width: auto !important;
	float: none !important;
	clear: none !important;
}

/* Thema's zetten breedtes op de losse velden, soms per ID
   (Avada: `form.checkout #billing_first_name_field { width: 48% }` — (1,1,1),
   met een klasse niet te verslaan). Binnen onze schermen bepaalt het grid de
   kolombreedte, dus elk veld vult gewoon zijn cel. */
.qc-page .form-row,
.qc-page form.checkout .form-row,
.qc-page .woocommerce-billing-fields .form-row,
.qc-page .woocommerce-shipping-fields .form-row {
	width: auto !important;
	min-width: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Alleen de kale wrappers hun padding afnemen. .cart_totals en #order_review
   zijn in dit ontwerp kaarten met eigen padding — die staan hier bewust NIET
   tussen, anders plakt hun inhoud tegen de rand. */
.qc-page #customer_details,
.qc-page .col2-set, .qc-page .col-1, .qc-page .col-2,
.qc-page .cart-collaterals, .qc-page .woocommerce-cart-form {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Samenvattingskaart ------------------------------------------------------ */
/* De samenvatting plakt bij het scrollen vast. 24px was te krap: hij kwam tegen
   de bovenrand van het scherm te liggen, en met de beheerbalk erbij schoof hij
   er zelfs deels onder. */
.qc-checkout__aside { position: sticky; top: 40px; min-width: 0; }
body.admin-bar .qc-checkout__aside { top: 72px; }
.qc-page #order_review {
	background: var(--qc-white);
	border: 1px solid var(--qc-border);
	border-radius: var(--qc-radius-m);
	box-shadow: var(--qc-shadow-card);
	padding: 26px !important;
}

.qc-page .woocommerce-checkout-review-order-table { display: flex; flex-direction: column; gap: 15px; }

.qc-summary__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.qc-summary__item { display: flex; gap: 14px; align-items: center; margin: 0; }
.qc-summary__thumb { position: relative; flex: none; width: 52px; height: 52px; }
.qc-summary__thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; display: block; background: var(--qc-sand); }
.qc-summary__qty {
	position: absolute;
	top: -6px; right: -6px;
	background: var(--qc-bark);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px; height: 18px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}
.qc-summary__name { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-summary__name > span:first-child { font-weight: 600; font-size: 14px; color: var(--qc-text-heading); line-height: 1.3; }
.qc-summary__name .qc-summary__variant { font-size: 12.5px; color: var(--qc-text-muted); }
.qc-summary__line { font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--qc-text-price); }

.qc-summary__actions { display: flex; flex-direction: column; gap: 15px; }
.qc-actions-home { display: none; }
/* Het totaalbedrag hoort alleen in de mobiele CTA ("Bestelling plaatsen · € 298,85"). */
.qc-cta-total { display: none; }
.qc-notices:empty { display: none; }
.qc-notices { margin-bottom: 4px; }
#qc-shipping-slot:empty + * { margin-top: 0; }
.qc-terms { font-size: 12px; color: var(--qc-text-muted); text-align: center; line-height: 1.55; margin: -4px 0 0; }
.qc-page .place-order { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.qc-page #place_order { width: 100%; float: none; }

/* Accordeonbalk boven het formulier (tablet/mobiel) */
.qc-page .qc-sumbar {
	display: none;
	/* Een <button> stretcht niet vanzelf; width:100% zou met negatieve marges
	   rechts te kort blijven. Vandaar de expliciete breedte. */
	width: calc(100% + var(--qc-bleed) * 2);
	margin-inline: calc(var(--qc-bleed) * -1);
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 16px;
	background: var(--qc-white) !important;
	border-bottom: 1px solid var(--qc-border) !important;
	font-family: var(--qc-font-body);
	cursor: pointer;
	margin-block: 0 20px;
}
.qc-sumbar__label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--qc-orange-text); font-weight: 600; }
.qc-sumbar__total { font-weight: 700; font-size: 15px; color: var(--qc-text-price); }
.qc-sumbar .qc-icon { transition: transform var(--qc-fast) var(--qc-ease); }
.qc-sumbar[aria-expanded="true"] .qc-icon { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   6. Bevestiging — boards 4a/4b/4c
   --------------------------------------------------------------------------- */

.qc-thanks { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.qc-thanks__head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 40px 8px; }
.qc-thanks__disc {
	width: 64px; height: 64px;
	border-radius: 999px;
	background: var(--qc-success-bg);
	border: 1.5px solid var(--qc-green);
	display: flex;
	align-items: center;
	justify-content: center;
}
.qc-thanks__title { font-family: var(--qc-font-heading); font-weight: 400; font-size: 36px; line-height: 1.25; color: var(--qc-text-heading); margin: 0; }
.qc-thanks__lead { font-size: 15.5px; color: var(--qc-text-muted); line-height: 1.65; margin: 0; }
.qc-thanks__lead strong { color: var(--qc-text-body); font-weight: 500; }

.qc-overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	padding: 22px 26px;
	list-style: none;
	margin: 0;
}
.qc-overview li { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.qc-overview__k { font-size: 12px; color: var(--qc-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.qc-overview__v { font-weight: 600; font-size: 15px; color: var(--qc-text-heading); }

.qc-panel { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.qc-panel__title { font-weight: 700; font-size: 16px; color: var(--qc-text-heading); margin: 0; font-family: var(--qc-font-body); }
.qc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.qc-steps li { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.qc-steps__n {
	width: 26px; height: 26px;
	border-radius: 999px;
	background: var(--qc-sand);
	color: var(--qc-text-heading);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.qc-steps li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-steps__t { display: block; font-weight: 600; font-size: 14px; color: var(--qc-text-heading); }
.qc-steps__d { display: block; font-size: 13px; color: var(--qc-text-muted); line-height: 1.55; }

.qc-orderlines { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.qc-orderlines li { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--qc-text-muted); margin: 0; }
.qc-orderlines li > span:last-child { font-weight: 600; white-space: nowrap; color: var(--qc-text-price); }
.qc-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 4px; }
.qc-addresses__k { font-size: 12px; color: var(--qc-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; display: block; margin-bottom: 4px; }
.qc-addresses address { font-style: normal; font-size: 14px; color: var(--qc-text-body); line-height: 1.6; }

.qc-ctabanner {
	background: linear-gradient(135deg, var(--qc-bark) 0%, var(--qc-bark-deep) 100%);
	border-radius: var(--qc-radius-l);
	padding: 32px 36px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.qc-ctabanner__text { max-width: 520px; min-width: 260px; flex: 1 1 300px; }
.qc-ctabanner h2 { margin: 0; font-family: var(--qc-font-heading); font-weight: 400; font-size: 28px; line-height: 1.2; color: #fff; }
.qc-ctabanner p { margin: 12px 0 0; font-size: 16px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .85); }
.qc-ctabanner__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.qc-ctabanner .qc-btn--secondary { border-color: rgba(255, 255, 255, .6) !important; color: #fff !important; }
.qc-ctabanner .qc-btn--secondary:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

.qc-redirect {
	position: fixed;
	inset: 0;
	background: rgba(247, 239, 228, .96);
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--qc-font-body);
}
.qc-redirect__card {
	background: var(--qc-white);
	border: 1px solid var(--qc-border);
	border-radius: var(--qc-radius-m);
	box-shadow: var(--qc-shadow-overlay);
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	max-width: 360px;
}
.qc-redirect__spinner {
	width: 26px; height: 26px;
	border: 3px solid var(--qc-action-soft-strong);
	border-top-color: var(--qc-orange);
	border-radius: 999px;
	animation: qc-spin .9s linear infinite;
}
.qc-redirect__title { font-weight: 600; font-size: 14px; color: var(--qc-text-heading); }
.qc-redirect__text { font-size: 12.5px; color: var(--qc-text-muted); line-height: 1.55; }

/* ---------------------------------------------------------------------------
   8. Afleidingsvrije header (checkout + bedankt)
   --------------------------------------------------------------------------- */

.qc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 76px;
	padding: 0 24px;
	background: var(--qc-white);
	border-bottom: 1px solid var(--qc-border);
	font-family: var(--qc-font-body);
}
.qc-topbar--center { justify-content: center; }
.qc-topbar__back,
.qc-topbar__safe {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--qc-text-body);
	text-decoration: none;
	flex: 1 1 0;
}
.qc-topbar__back:hover { color: var(--qc-orange-text); }
.qc-topbar__safe { justify-content: flex-end; }
.qc-topbar__logo { display: flex; flex: none; }
.qc-topbar__logo img { height: 32px; width: auto; display: block; }

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

@media (max-width: 1024px) {
	.qc-page { padding-block: 32px 56px; }

	.qc-page h1 { font-size: 32px; }

	/* Winkelwagen: tabelrijen worden kaarten */
	.qc-cart__grid, .qc-checkout__grid { grid-template-columns: 1fr; gap: 16px; }
	.qc-cart__head { display: none; }
	/* overflow:hidden hoort bij de bureaubladweergave, waar de regels binnen één
	   afgeronde kaart zitten. Hier is elke regel een eigen kaart; de houder hoeft
	   dan niets af te snijden. */
	.qc-cart__table { background: transparent; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 12px; overflow: visible; }
	.qc-cart__row {
		display: grid;
		grid-template-columns: 72px 1fr auto;
		grid-template-areas:
			"img name  price"
			"img qty   remove";
		gap: 10px 16px;
		padding: 18px;
		background: var(--qc-white);
		border: 1px solid var(--qc-border);
		border-radius: var(--qc-radius-m);
		box-shadow: var(--qc-shadow-card);
		align-items: center;
	}
	/* Op het bureaublad scheiden de regels elkaar met een onderrand binnen één
	   kaart, en heeft de laatste er geen nodig. Hier is elke regel een losse
	   kaart: zonder deze regel mist de onderste zijn onderrand. */
	.qc-cart__row:last-child { border-bottom: 1px solid var(--qc-border); }

	.qc-cart__product { display: contents; }
	.qc-cart__meta { grid-area: name; }
	.qc-cart__line { grid-area: price; align-self: start; }
	.qc-cart__cell--qty { grid-area: qty; }
	.qc-page .product-remove { grid-area: remove; justify-self: end; }
	.qc-cart__name { font-size: 15px; }
	/* Verwijderen wordt een tekstlink, zoals in board 2b/2c. */
	.qc-page a.remove { width: auto; height: auto; padding: 0; font-size: 13px; border-radius: 0; }
	.qc-page a.remove .qc-icon { display: none; }
	.qc-remove__label { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
	.qc-page a.remove:hover { background: none; text-decoration: underline; }

	.qc-page .cart_totals { padding: 22px !important; }
	.qc-page .cart_totals, .qc-checkout__aside { position: static; }
	.qc-checkout__main { max-width: none; }

	/* Checkout: samenvatting als accordeon boven het formulier */
	.qc-page .qc-checkout__aside { order: -1; }
	.qc-page { --qc-bleed: 24px; }
	.qc-page .qc-sumbar { display: flex; padding: 14px 24px; margin-top: -32px; margin-bottom: 0; }
	.qc-page #order_review { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; background: var(--qc-white); padding: 4px 24px 20px !important; margin: 0 -24px 20px; }
	.qc-page .woocommerce-checkout-review-order-table { gap: 13px; }
	/* De acties horen op mobiel in het onderpaneel; overal elders verbergen we
	   ze, anders staan ze ook nog een keer in het besteloverzicht. */
	.qc-summary__actions { display: none; }
	.qc-actions-slot .qc-summary__actions,
	.qc-mobilebar > .qc-summary__actions { display: flex; }
	.qc-actions-slot { display: flex; flex-direction: column; gap: 12px; }
	.qc-page #order_review { border-bottom: 1px solid var(--qc-border); }
	.qc-page #order_review .qc-trust { display: none; }
	.qc-cta-total { display: inline; }

	.qc-block { padding: 22px; gap: 14px; }
	.qc-step__n { width: 26px; height: 26px; font-size: 13px; }
	.qc-step__title { font-size: 16px; }

	.qc-fields--address { grid-template-columns: 1.1fr .8fr .6fr; }
	.qc-lookup { grid-column: 1 / -1; margin-top: 0; min-height: 20px; font-size: 13px; }
	.qc-page .qc-manual-only { grid-column: span 3; }

	.qc-overview { grid-template-columns: 1fr 1fr; padding: 20px 22px; }
	.qc-steps { grid-template-columns: 1fr; gap: 15px; }
	.qc-steps li { flex-direction: row; gap: 12px; align-items: flex-start; }
	.qc-thanks__title { font-size: 32px; }
	.qc-thanks__head { padding: 0 20px 6px; }
	.qc-panel { padding: 22px; }
	.qc-addresses { grid-template-columns: 1fr; }

	.qc-empty__usps { flex-direction: column; gap: 18px; align-items: flex-start; }
	.qc-empty__title { font-size: 34px; }
	.qc-topbar { height: 64px; }
}

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

@media (max-width: 640px) {
	.qc-page { padding-inline: 16px; padding-block: 22px 32px; }

	/* De kolom Toev. is hier zo'n 68px breed; "(optioneel)" paste daar niet in en
	   liep 8px buiten het scherm. Het veld draagt geen sterretje, dus dat het
	   optioneel is blijft ook zonder dat woord duidelijk. */
	.qc-page .qc-col-suffix .optional { display: none; }

	.qc-page h1 { font-size: 28px; margin-bottom: 14px; }

	.qc-cart__row { padding: 14px; gap: 12px; }
	.qc-cart__name { font-size: 14px; }
	.qc-cart__line { font-size: 14px; }
	.qc-cart__unit { display: none; }

	.qc-page .cart_totals { padding: 16px !important; gap: 11px; }

	.qc-block { padding: 16px; gap: 13px; }
	.qc-step__n { width: 25px; height: 25px; font-size: 12.5px; }
	.qc-step__title { font-size: 15.5px; }
	.qc-fields { gap: 10px; }
	.qc-fields--address { grid-template-columns: 1.2fr .8fr .6fr; gap: 8px; }
	.qc-option { padding: 13px 14px; gap: 11px; }
	.qc-option.qc-is-selected { padding: 12.5px 13.5px; }
	.qc-option__price { font-size: 13.5px; }

	.qc-page #order_review { padding: 4px 16px 20px !important; margin: 0 -16px 14px; }
	.qc-page { --qc-bleed: 16px; }
	.qc-page .qc-sumbar { padding: 13px 16px; margin-top: -22px; margin-bottom: 0; }

	.qc-empty { padding: 26px 0 12px; gap: 20px; }
	.qc-empty__disc { width: 60px; height: 60px; }
	.qc-empty__title { font-size: 27px; }
	.qc-empty__text { font-size: 14px; line-height: 1.65; }
	.qc-empty__actions { flex-direction: column; width: 100%; }
	.qc-empty__actions .qc-btn { width: 100%; }
	.qc-empty__usps { align-self: flex-start; text-align: left; }

	.qc-thanks__title { font-size: 26px; }
	.qc-thanks__head { padding: 0 8px; }
	.qc-overview { grid-template-columns: 1fr 1fr; padding: 16px; gap: 14px; }
	.qc-overview__v { font-size: 13.5px; }
	.qc-panel { padding: 16px; gap: 14px; }
	.qc-ctabanner { padding: 24px; border-radius: var(--qc-radius-m); }
	.qc-ctabanner h2 { font-size: 24px; }
	.qc-ctabanner__actions .qc-btn { width: 100%; }

	.qc-topbar { height: 58px; padding: 0 16px; }
	.qc-topbar__back span, .qc-topbar__safe span:not(.qc-icon) { display: none; }
	.qc-topbar__logo img { height: 23px; }
}

/* Toegankelijkheid: geen animatie voor wie dat liever niet heeft. */
@media (prefers-reduced-motion: reduce) {
	.qc-spinner, .qc-redirect__spinner, .qc-lookup__spinner,
	.qc-page .blockUI.blockOverlay::before { animation-duration: 2s; }
}
.qc-page .qc-btn { font-size: 16px !important; padding: 13px 29px !important; }
.qc-page .qc-btn--l,
.qc-page a.checkout-button,
.qc-page #place_order { font-size: 18px !important; padding: 25px 35px !important; }
/* De maten hierboven kwamen anders uit `--awb-padding-*` van Avada; die volgen
   de thema-instellingen en zouden dus met een klik in de themaopties meebewegen. */

/* `.button span { line-height: normal }` pakte ook de twee spans in de knop. */
.qc-page #place_order .qc-cta-label,
.qc-page #place_order .qc-cta-total,
.qc-page .qc-btn > span { line-height: 1.2 !important; }

/* `.checkout .input-text:not(textarea)` legde elk veld op precies 50px vast;
   onze velden bepalen hun hoogte uit padding en regelhoogte. */
.qc-page .input-text,
.qc-page input[type=text],
.qc-page input[type=email],
.qc-page input[type=tel],
.qc-page select {
	height: auto !important;
	min-height: 0 !important;
}

/* `.post-content h2` (0,2,0) won van `.qc-ctabanner h2` (0,1,1): de kop van het
   donkere blok werd bijna zwart op donkerbruin en was niet te lezen. */
.qc-page .qc-ctabanner h2,
.qc-page .qc-ctabanner h3 { color: #fff !important; }
.qc-page .qc-ctabanner p { color: rgba(255, 255, 255, .82) !important; }

/* `.post-content h1` plus de responsieve typografie van Avada (die zet een
   eigen klasse én een inline line-height op onze koppen) maakten er 44,7px van
   in plaats van de 36px uit het ontwerp. */
.qc-page h1 {
	font-family: var(--qc-font-heading) !important;
	font-weight: 400 !important;
	font-size: 36px !important;
	line-height: 1.25 !important;
	color: var(--qc-text-heading) !important;
}
.qc-page h1 .qc-count {
	font-family: var(--qc-font-body) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	color: var(--qc-text-muted) !important;
	line-height: 1.25 !important;
}

@media (max-width: 1024px) {
	.qc-page h1 { font-size: 32px !important; }
}
@media (max-width: 640px) {
	.qc-page h1 { font-size: 28px !important; }
}

/* De samenvattingsminiatuur heeft geen eigen achtergrondmaat; die zetten we hier. */
.qc-page .qc-summary__thumb.qc-thumb--leeg { border-radius: 10px; }

/* ---------------------------------------------------------------------------
   Onderpaneel op mobiel
   Kop, besteloverzicht en bestelknop zitten in één vast element onderaan het
   scherm. Dicht zie je de kop en de knop; open schuift het overzicht ertussen
   omhoog. Zo blijft de bestelknop altijd bereikbaar en verhuist er bij het
   openen niets — dat laatste maakte de beweging eerder schokkerig.

   De hoogte animeert met max-height op het overzicht; het plafond is tegelijk
   de scrollgrens van het paneel.
   --------------------------------------------------------------------------- */
.qc-page .qc-mobilebar,
.qc-page .qc-sheet-backdrop { display: none; }

@media (max-width: 1024px) {
	.qc-page .qc-sheet-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1090;
		background: rgba(2, 20, 19, .38);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--qc-med) var(--qc-ease), visibility 0s linear var(--qc-med);
	}
	.qc-page .qc-sheet-backdrop[hidden] { display: none; }

	.qc-page .qc-mobilebar {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1100;
		max-height: 88vh;
		padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
		background: var(--qc-white);
		border-top: 1px solid var(--qc-border);
		border-radius: var(--qc-radius-l) var(--qc-radius-l) 0 0;
		box-shadow: 0 -10px 30px rgba(2, 20, 19, .12);
		transition: border-radius var(--qc-med) var(--qc-ease);
	}
	.qc-page .qc-mobilebar[hidden] { display: none; }

	/* Greep zoals in het ontwerp: alleen zichtbaar als het paneel openstaat. */
	.qc-page .qc-sheet__grip {
		flex: none;
		width: 44px;
		height: 4px;
		margin: 0 auto;
		border-radius: 999px;
		background: var(--qc-sand-deep);
	}

	/* Kopregel: dicht "Bestelling bekijken (4)" met totaal, open de paneelkop. */
	.qc-page .qc-mobilebar .qc-sumbar {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin: 0;
		padding: 10px 2px;
		border: 0;
		border-radius: 0;
		background: none;
		text-align: left;
	}
	.qc-page .qc-mobilebar .qc-sumbar__count { font-weight: 400; color: var(--qc-text-muted); }

	/* Het overzicht zelf: de rij die groeit. */
	/* Het overzicht groeit met max-height op het kind, niet met grid-fr op de
	   houder: als flex-item met min-height 0 zakt de basismaat van zo'n grid
	   naar nul, en dan blijft 1fr ook nul. Het plafond is tegelijk de
	   scrollgrens — past het overzicht erin, dan zie je alles; is het langer,
	   dan scrolt het binnen het paneel terwijl kop en knop staan blijven. */
	.qc-page .qc-mobilebar #order_review {
		flex: 0 1 auto;
		display: block;
		min-height: 0;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	.qc-page .qc-mobilebar #order_review > * {
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--qc-med) var(--qc-ease);
	}
	.qc-page .qc-mobilebar--open #order_review > * {
		max-height: 58vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* De kopregel eindigt op een scheidingslijn; zonder deze ruimte plakt de
		   eerste productregel eraan vast. Alleen in de open stand, anders telt
		   de padding mee in de dichte hoogte. */
		padding-top: 14px;
	}

	/* Het overzichtsblok gebruikt buiten het paneel een negatieve marge om
	   randloos te staan; binnen het paneel loopt het daarmee het scherm uit. */
	.qc-page .qc-mobilebar .qc-summary__body {
		width: auto !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
		border: 0;
		box-shadow: none;
	}
	.qc-page .qc-mobilebar .qc-summary__title { display: none; }

	.qc-page .qc-mobilebar .qc-summary__actions { flex: none; margin: 0; padding-top: 10px; }
	.qc-page .qc-mobilebar .form-row.place-order { margin: 0; padding: 0; }
	/* In de balk zou de voorwaardenregel de halve hoogte kosten; hij staat op
	   mobiel in de pagina, boven de balk. */
	.qc-page .qc-mobilebar .qc-terms { display: none; }
	.qc-page .qc-assurance-slot .qc-terms {
		display: block;
		margin: 14px 0 0;
		text-align: center;
	}

	/* ---- open ---- */
	.qc-page .qc-mobilebar--open { border-radius: var(--qc-radius-l) var(--qc-radius-l) 0 0; }
	.qc-page .qc-mobilebar--open .qc-sumbar__total { display: none; }
	.qc-page .qc-mobilebar--open .qc-sumbar .qc-icon { transform: rotate(180deg); }

	body.qc-sheet-lock { overflow: hidden; }
	body.qc-sheet-lock .qc-sheet-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--qc-med) var(--qc-ease);
	}

	/* Ruimte onder de pagina, anders dekt de dichte balk de laatste kaart af. */
	.qc-page { padding-bottom: calc(32px + var(--qc-mobilebar-h, 0px)); }

	/* Betaalwijzen en beoordeling staan op mobiel onder het formulier. */
	.qc-page .qc-assurance-slot .qc-assurance {
		margin-top: 18px;
		padding: 18px 18px 20px;
		background: var(--qc-white);
		border: 1px solid var(--qc-border);
		border-radius: var(--qc-radius-m);
	}
	.qc-page .qc-assurance-slot .qc-divider { display: none; }
}

.qc-page .qc-assurance-slot:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
	.qc-page .qc-mobilebar,
	.qc-page .qc-mobilebar #order_review,
	.qc-page .qc-sheet-backdrop,
	.qc-page .qc-sheet__grip { transition: none; }
}

/* ---------------------------------------------------------------------------
   Expresknoppen (Apple Pay / Google Pay)
   Snelkoppelingen die de betaling in één keer afronden, dus staan ze onder de
   gewone methodes en niet ertussen. De knoppen zelf tekent de provider in een
   iframe; hun afronding komt uit zijn instelling
   payment_request_button_border_radius, niet uit deze CSS. Wat hier staat is de
   omlijsting eromheen.
   --------------------------------------------------------------------------- */
.qc-page .qc-express {
	display: none;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--qc-border);
}
/* Pas zichtbaar zodra de provider meldt dat er een knop staat — zie
   toonExpressAlsKlaar() in de JS. Zonder dit hangt er een kopregel boven een
   leeg vlak bij iedereen zonder Apple Pay of Google Pay. */
.qc-page .qc-express.qc-express--klaar { display: block; }
.qc-page .qc-express__label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--qc-text-muted);
}
.qc-page .qc-express .wcpay-express-checkout-wrapper { margin: 0; }
/* De provider zet zelf een "— OR —"-scheiding tussen zijn knoppen en de rest;
   die had betekenis bovenaan het formulier, hier niet meer. */
.qc-page .qc-express #wcpay-express-checkout-button-separator { display: none !important; }
/* Het iframe van de provider draagt margin:-4px. Daardoor stond de knop 4px
   links van de betaalkaarten en kwam hij rechts 4px tekort — zichtbaar als een
   knop die niet even breed is als de rest. */
.qc-page .qc-express iframe {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
}

/* =====================================================================
   Wat de betaalprovider en select2 in ons scherm zetten
   ===================================================================== */

/* Select2 verbergt het oorspronkelijke <select> met `height:1px !important` op
   `.select2-hidden-accessible` (0,1,0). Onze veldopmaak `.qc-page select`
   (0,1,1) is specifieker en won dat, waardoor het verborgen veld weer zichtbaar
   werd: naast de nette landkeuze stond een tweede vakje "Nederland". Hier zetten
   we de verberging terug, specifieker dan al onze eigen veldregels. */
.qc-page select.select2-hidden-accessible,
.qc-drawer select.select2-hidden-accessible {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	appearance: none !important;
}

/* De provider hangt zijn betaalbericht ("3 rentevrije termijnen van € 316,67
   met Klarna") in dezelfde houder als onze knop. Dat bericht zit in een iframe
   met een negatieve marge en zonder eigen hoogte, waardoor de houder inklapte
   tot 7px en de tekst óver de knop viel. Een kolom met gap kan per definitie
   niet overlappen, wat de provider er ook in hangt. */
.qc-page .wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Ruim genoeg dat het betaalbericht van de provider, als het aanstaat, niet
	   tegen de knop aan plakt. */
	gap: 16px;
}
.qc-page .wc-proceed-to-checkout > * { margin: 0 !important; }
.qc-page #payment-method-message,
.qc-page .wc-proceed-to-checkout .StripeElement {
	display: block;
	width: 100%;
	overflow: visible;
}
.qc-page #payment-method-message iframe {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Afrekenen gaat hier altijd als gast (zie QREST_CHECKOUT_IMPLIED_TERMS en
   force_guest_checkout), dus "betaalgegevens opslaan in mijn account" belooft
   iets wat niet bestaat: er wordt geen account aangemaakt. */
.qc-page .woocommerce-SavedPaymentMethods-saveNew,
.qc-page label[for$="-new-payment-method"],
.qc-page input[id$="-new-payment-method"] { display: none !important; }
/* Apart gehouden: een browser die :has() niet kent gooit de hele regel weg
   waarin hij staat, en dan zou ook de bovenstaande regel verdwijnen. */
.qc-page p:has(> input[id$="-new-payment-method"]) { display: none !important; }

/* ---------------------------------------------------------------------
   De landkeuze (select2)
   ---------------------------------------------------------------------
   WooCommerce vervangt het <select> door een eigen widget met eigen
   stylesheet. Die is grijs, hoekig en 32px hoog — naast onze velden viel dat
   meteen op. Hieronder krijgt hij dezelfde vorm als de rest van het formulier.
   Het uitklappaneel hangt WooCommerce aan <body>, dus buiten .qc-page; daarom
   `body:has(.qc-page)`: dan geldt het alleen op een scherm dat wij renderen. */

.qc-page .select2-container { width: 100% !important; }

.qc-page .select2-container--default .select2-selection--single {
	height: auto !important;
	min-height: 0 !important;
	padding: 12px 16px !important;
	background: var(--qc-white) !important;
	border: 1px solid var(--qc-border) !important;
	border-radius: var(--qc-radius-m) !important;
	box-shadow: none !important;
	display: flex;
	align-items: center;
}
.qc-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.35 !important;
	color: var(--qc-text-heading) !important;
	font-family: var(--qc-font-body) !important;
	font-size: 15px !important;
}
.qc-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--qc-text-muted) !important;
}
/* Het standaardpijltje is een CSS-driehoek in een grijs vak; vervangen door
   hetzelfde chevron-teken dat de rest van het ontwerp gebruikt. */
.qc-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 12px !important;
	width: 14px !important;
	background: none !important;
	border: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.qc-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: 0 !important;
	margin: 0 !important;
	width: 10px;
	height: 10px;
	position: static !important;
	border-right: 1.6px solid var(--qc-icon) !important;
	border-bottom: 1.6px solid var(--qc-icon) !important;
	transform: rotate(45deg) translate(-2px, -2px);
}
.qc-page .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	transform: rotate(225deg) translate(-2px, -2px);
}
.qc-page .select2-container--default.select2-container--open .select2-selection--single,
.qc-page .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--qc-orange) !important;
	box-shadow: 0 0 0 3px var(--qc-focus-ring) !important;
}

/* Het uitklappaneel zelf. */
body:has(.qc-page) .select2-container--default .select2-dropdown {
	border: 1px solid var(--qc-border) !important;
	border-radius: var(--qc-radius-m) !important;
	box-shadow: var(--qc-shadow-overlay) !important;
	overflow: hidden;
	background: var(--qc-white) !important;
	margin-top: 4px;
}
body:has(.qc-page) .select2-container--default .select2-search--dropdown { padding: 10px !important; }
body:has(.qc-page) .select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--qc-border) !important;
	border-radius: var(--qc-radius-s) !important;
	padding: 9px 12px !important;
	font-family: var(--qc-font-body) !important;
	font-size: 14px !important;
	outline: none !important;
}
body:has(.qc-page) .select2-container--default .select2-results__options { padding: 4px !important; }
body:has(.qc-page) .select2-container--default .select2-results__option {
	padding: 9px 12px !important;
	border-radius: var(--qc-radius-s) !important;
	font-family: var(--qc-font-body) !important;
	font-size: 14.5px !important;
	color: var(--qc-text-body) !important;
}
/* Het blauw van de browserstandaard hoort niet in dit ontwerp. */
body:has(.qc-page) .select2-container--default .select2-results__option--highlighted[aria-selected],
body:has(.qc-page) .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--qc-action-soft) !important;
	color: var(--qc-text-heading) !important;
}
body:has(.qc-page) .select2-container--default .select2-results__option[aria-selected="true"],
body:has(.qc-page) .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--qc-action-soft-strong) !important;
	color: var(--qc-text-heading) !important;
	font-weight: 500;
}

/* Vangnet voor de wikkel van het thema om de winkelwagentabel.
   Avada_Woocommerce::before_cart_table() opent een <div class="woocommerce-content-box">
   met een eigen kop ("Je hebt 1 item in je winkelwagen") en sluit hem op
   after_cart_table. Die callbacks worden nu op de hook zelf weggehaald, maar als
   een themaversie ze op nóg een andere manier binnenbrengt, mag dat het ontwerp
   niet alsnog verbouwen: binnen ons eigen blok is deze wikkel niets. */
.qc-page .woocommerce-content-box,
.qc-page .woocommerce-content-box.full-width {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	/* Avada zet hier overflow:hidden en margin-left:240px; het eerste knipt onze
	   schaduwen af, het tweede duwt de hele tabel opzij zodra .full-width niet
	   meegegeven wordt. */
	overflow: visible !important;
	width: auto !important;
}
/* De kop "Je hebt 1 item in je winkelwagen" plus het streepje eronder. Dat
   streepje is geen apart element maar de border-bottom van deze h2
   (Avada: .woocommerce-content-box h2 { border-bottom: 1px solid; ... }), dus
   met de kop verdwijnt het streepje mee. Onze eigen h1 staat er al boven. */
.qc-page .woocommerce-content-box > h2 { display: none !important; }
.qc-page .woocommerce-content-box::before,
.qc-page .woocommerce-content-box::after { content: none !important; }

/* Het landkeuzeveld als WooCommerce er géén select2 van maakt.
   Op het afwijkende bezorgadres blijft het een gewoon <select>: dat blok staat
   bij het laden verborgen, en select2 slaat verborgen velden over. Naast de
   opgemaakte landkeuze van het factuuradres viel dat meteen op — en het thema
   tekent daar zijn eigen pijl in het lettertype "awb-icons", die als leeg
   blokje in een eigen randje naast het veld terechtkwam. Hieronder tekenen we
   de pijl zelf, zodat beide velden er hetzelfde uitzien, met of zonder select2. */
.qc-page select:not(.select2-hidden-accessible) {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2345362A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	text-indent: 0 !important;
}
/* Wat het thema er verder omheen zet, hoort hier niet. */
.qc-page select::-ms-expand { display: none !important; }
.qc-page .avada-select-parent > .select-arrow,
.qc-page .avada-select-parent::after,
.qc-page .select-arrow { display: none !important; }