/**
 * Hak4t AI Website OS — frontend runtime (mini-winkelwagen + live zoeken).
 * Neutraal gestyled; designs kunnen .h4r-* zelf herstylen.
 */

.h4r-panel {
	position: fixed;
	z-index: 99990;
	background: #ffffff;
	color: #111418;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(0, 0, 0, 0.08);
	font: 14px/1.5 system-ui, sans-serif;
	min-width: 300px;
	max-width: 380px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 12px;
}

.h4r-search { position: absolute; }

.h4r-panel ul { list-style: none; margin: 0; padding: 0; }

.h4r-panel li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
	color: #111418;
}

.h4r-panel li a:hover { background: rgba(0, 0, 0, 0.05); }

.h4r-panel img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: #f1f3f5;
}

.h4r-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.h4r-qty, .h4r-price { color: #5b6472; font-size: 13px; white-space: nowrap; }

.h4r-group {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a93a3;
	font-weight: 700;
	margin: 10px 4px 4px;
}

.h4r-group:first-child { margin-top: 0; }

.h4r-total {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-top: 10px;
	padding: 10px 4px 4px;
	font-weight: 700;
	text-align: right;
}

.h4r-actions { display: flex; gap: 8px; margin-top: 10px; }

.h4r-btn {
	flex: 1;
	text-align: center;
	padding: 10px 12px;
	border-radius: 10px;
	background: #eef1f4;
	color: #111418;
	font-weight: 700;
	text-decoration: none;
}

.h4r-btn--primary { background: #111418; color: #ffffff; }

.h4r-empty, .h4r-loading {
	padding: 18px 10px;
	text-align: center;
	color: #5b6472;
}

/* ---------- Productfilter (neutrale basis; design mag herstylen) ---------- */
.h4f-group { margin-bottom: 18px; }
.h4f-title { display: block; font-weight: 700; margin-bottom: 8px; }
.h4f-terms { display: flex; flex-direction: column; gap: 4px; }
.h4f-term { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.h4f-price { display: flex; align-items: center; gap: 8px; }
.h4f-price input { width: 80px; padding: 6px 8px; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; }
.h4f-subcats { list-style: none; margin: 0; padding: 0; }
.h4f-subcats li { margin-bottom: 4px; }
.h4f-subcats a { text-decoration: none; }
.h4f-subcats span { opacity: .6; font-size: .9em; }
.h4f-actions { margin-top: 8px; }
.h4f-reset { background: none; border: 1px solid rgba(0,0,0,.25); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; }
.h4f-pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.h4f-pager button { min-width: 38px; padding: 8px 12px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }
.h4f-pager button.is-active { background: #111; color: #fff; border-color: #111; }
ul.products { transition: opacity .2s ease; }

/* ---------- Winkelwagen-lade (slide-in) ---------- */
.h4cart-overlay {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(0,0,0,.45); opacity: 0; visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}
.h4cart-overlay.is-open { opacity: 1; visibility: visible; }
.h4cart-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 100001;
	width: 390px; max-width: 92vw;
	background: #fff; color: #111418; /* JS overschrijft met de echte paginastijl */
	box-shadow: -16px 0 50px rgba(0,0,0,.4);
	transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
	display: flex; flex-direction: column;
	font: 14px/1.5 system-ui, sans-serif;
}
.h4cart-drawer.is-open { transform: none; }
.h4cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid rgba(127,127,127,.22); font-size: 17px; font-weight: 800; }
.h4cart-close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: inherit; opacity: .7; }
.h4cart-close:hover { opacity: 1; }
.h4cart-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
.h4cart-items { list-style: none; margin: 0; padding: 0; }
.h4cart-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(127,127,127,.18); }
.h4cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background: rgba(127,127,127,.08); flex-shrink: 0; }
.h4cart-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.h4cart-item__info a { color: inherit; text-decoration: none; font-weight: 700; }
.h4cart-item__info a:hover { color: var(--h4-accent, var(--h4-primary, inherit)); }
.h4cart-item__qty { opacity: .7; font-size: 13px; }
.h4cart-total { display: flex; justify-content: space-between; padding: 18px 0; font-size: 17px; font-weight: 800; border-top: 2px solid rgba(127,127,127,.22); }
.h4cart-total strong { color: var(--h4-accent, var(--h4-primary, inherit)); }
.h4cart-actions { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid rgba(127,127,127,.18); }
.h4cart-btn { flex: 1; text-align: center; padding: 14px; border-radius: 11px; font-weight: 800; text-decoration: none; border: 1.5px solid currentColor; color: inherit; background: transparent; }
.h4cart-btn:hover { background: rgba(127,127,127,.12); }
.h4cart-drawer .h4cart-btn--primary { background: var(--h4-accent, var(--h4-primary, #1db954)); color: #08120c; border-color: transparent; }
.h4cart-drawer .h4cart-btn--primary:hover { opacity: .9; background: var(--h4-accent, var(--h4-primary, #1db954)); }

/* Winkelwagen-teller: verberg de "0" netjes */
[data-h4-cart-count].is-empty { opacity: .55; }
.h4-auto-cartcount {
	display: inline-grid; place-items: center;
	min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
	border-radius: 999px; background: currentColor; font-size: 11px; font-weight: 800;
	vertical-align: middle;
}
.h4-auto-cartcount.is-empty { display: none; }

/* ---------- Toast-melding ---------- */
.h4toast {
	position: fixed; right: 20px; bottom: 20px; z-index: 100002;
	display: flex; align-items: center; gap: 14px;
	background: #111418; color: #fff;
	padding: 16px 18px; border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0,0,0,.35);
	font: 14px/1.4 system-ui, sans-serif;
	max-width: 360px;
	transform: translateY(20px); opacity: 0;
	transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.h4toast.is-show { transform: none; opacity: 1; }
.h4toast__check { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.h4toast__body { display: flex; flex-direction: column; }
.h4toast__body span { opacity: .75; font-size: 13px; }
.h4toast__cart { margin-left: auto; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 8px; padding: 9px 12px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.h4toast__cart:hover { background: rgba(255,255,255,.25); }
@media (max-width: 480px) { .h4toast { left: 16px; right: 16px; max-width: none; } }

/* ---------- Variatie-swatches ---------- */
/* ====================================================================
 * Commerce-componenten — nette, neutrale basis die kleuren/typografie van
 * de template ERFT (currentColor, transparante vlakken). De template kan
 * alle .h4-* classes verder herstylen. Werkt zelfstandig, themavrij.
 * ==================================================================== */

/* ---------- Shop-indeling: filters links, producten rechts ---------- */
.h4-shop { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .h4-shop { grid-template-columns: 270px 1fr; } }
.h4-shop__filters { position: sticky; top: 90px; }
@media (max-width: 899px) { .h4-shop__filters { position: static; } }
.h4-products-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* ---------- Productkaarten (categorie/shop/gerelateerd/filter) ---------- */
ul.products.h4-products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { ul.products.h4-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { ul.products.h4-products { grid-template-columns: repeat(4, 1fr); } }

.h4-product-card {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.06);
	border: 1px solid rgba(127, 127, 127, 0.18);
}
.h4-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.9);
}
.h4-product-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; box-sizing: border-box; }
.h4-product-card__badge {
	position: absolute; top: 10px; left: 10px; z-index: 1;
	background: currentColor; border-radius: 999px; padding: 4px 12px;
	font-size: 12px; font-weight: 700;
}
.h4-product-card__badge { color: inherit; }
.h4-product-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.h4-product-card__cat { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.h4-product-card__title { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.h4-product-card__title a { color: inherit; text-decoration: none; }
.h4-product-card__price { font-weight: 800; font-size: 1.1rem; margin-top: auto; }
.h4-product-card__price del { opacity: .5; font-weight: 400; margin-right: 6px; }
.h4-product-card__btn {
	margin-top: 10px; display: inline-block; text-align: center;
	padding: 11px 16px; border-radius: 10px; border: 0; cursor: pointer;
	background: currentColor; font: inherit; font-weight: 700; text-decoration: none;
}
.h4-product-card__btn { color: inherit; }
.h4-product-card__btn:hover { opacity: .9; }

/* ---------- Productgalerij ---------- */
.h4-gallery__main {
	border-radius: 16px; overflow: hidden; background: #fff;
	aspect-ratio: 1 / 1;
}
.h4-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.h4-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.h4-gallery__thumb {
	width: 72px; height: 72px; padding: 0; border-radius: 10px; overflow: hidden;
	border: 2px solid transparent; background: #fff; cursor: pointer;
}
.h4-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.h4-gallery__thumb.is-active { border-color: currentColor; }

/* ---------- Koop/variatieblok ---------- */
/* Links uitgelijnd, ook als de template eromheen text-align:center gebruikt.
 * Hoog gespecificeerd (.h4-canvas) zodat het de template-CSS overstemt. */
.h4-canvas .h4-atc,
.h4-atc { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
.h4-canvas .h4-atc *,
.h4-atc * { text-align: left; }
.h4-canvas .h4-atc__btn,
.h4-canvas .h4-atc__qty { align-self: flex-start; }
.h4-atc__price { font-size: 1.6rem; font-weight: 800; }
.h4-atc__price del { opacity: .5; font-weight: 400; margin-right: 8px; }
.h4-atc__label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.h4-atc__attr { margin: 0; }
.h4-atc__stock { font-size: .9rem; opacity: .8; }

.h4-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.h4-swatch {
	min-width: 46px; padding: 10px 16px; border: 1.5px solid rgba(127,127,127,.4);
	border-radius: 10px; background: transparent; color: inherit; font: inherit;
	font-weight: 600; cursor: pointer; line-height: 1;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.h4-swatch:hover { border-color: currentColor; }
.h4-swatch.is-active { border-color: currentColor; box-shadow: 0 0 0 2px currentColor inset; }

.h4-atc__attr--color .h4-swatch { width: 40px; height: 40px; min-width: 0; padding: 0; border-radius: 50%; font-size: 0; }

.h4-atc__qty { display: inline-flex; align-items: center; border: 1.5px solid rgba(127,127,127,.4); border-radius: 10px; overflow: hidden; width: fit-content; }
.h4-atc__qty button { width: 42px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; }
.h4-atc__qty .h4-qty { width: 54px; height: 44px; border: 0; background: transparent; color: inherit; text-align: center; font: inherit; -moz-appearance: textfield; }
.h4-atc__qty .h4-qty::-webkit-outer-spin-button, .h4-atc__qty .h4-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.h4-atc__btn {
	padding: 16px 28px; border: 0; border-radius: 12px; cursor: pointer;
	background: currentColor; font: inherit; font-weight: 800; font-size: 1.05rem;
}
.h4-atc__btn { color: inherit; }
.h4-atc__btn:hover { opacity: .92; }
.h4-atc__btn:disabled { opacity: .4; cursor: not-allowed; }
.h4-atc__oos { font-weight: 700; opacity: .7; }

/* ---------- Specificaties ---------- */
.h4-specs { width: 100%; border-collapse: collapse; }
.h4-specs th, .h4-specs td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(127,127,127,.2); vertical-align: top; }
.h4-specs th { width: 38%; font-weight: 700; opacity: .8; }

/* ---------- Reviews ---------- */
.h4-reviews__avg { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.h4-reviews__score { font-size: 2rem; font-weight: 800; }
.h4-reviews__stars { color: currentColor; letter-spacing: 2px; }
.h4-review { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: rgba(127,127,127,.06); border: 1px solid rgba(127,127,127,.16); }
.h4-review blockquote { margin: 0 0 6px; }
.h4-review figcaption { font-size: .85rem; opacity: .7; }

/* ---------- Geen producten ---------- */
.h4-no-products, .h4-result-count { opacity: .7; }

/* ====================================================================
 * WooCommerce-flows (winkelwagen, afrekenen, mijn account, bedankt) —
 * Woo's eigen markup, maar overgenomen in de template-stijl. Gescoped op
 * .h4-canvas zodat het alleen onze takeover-pagina's raakt, en geladen ná
 * Woo's CSS zodat dit wint. Erft kleuren/typografie van het ontwerp.
 * ==================================================================== */
.h4-canvas .woocommerce { color: inherit; }
.h4-canvas .woocommerce a { color: inherit; }

/* Formuliervelden */
.h4-canvas .woocommerce form .form-row,
.h4-canvas .woocommerce .quantity { margin-bottom: 12px; }
.h4-canvas .woocommerce form .form-row label,
.h4-canvas .woocommerce-account .woocommerce label { display: block; margin-bottom: 6px; font-weight: 600; }
.h4-canvas .woocommerce input.input-text,
.h4-canvas .woocommerce textarea,
.h4-canvas .woocommerce select,
.h4-canvas .woocommerce .select2-selection,
.h4-canvas .woocommerce .quantity input.qty {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid rgba(127, 127, 127, 0.4);
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.06);
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}
.h4-canvas .woocommerce .quantity input.qty { width: 80px; text-align: center; }
.h4-canvas .woocommerce input.input-text:focus,
.h4-canvas .woocommerce textarea:focus,
.h4-canvas .woocommerce select:focus { outline: 2px solid currentColor; outline-offset: 1px; }

/* Knoppen */
.h4-canvas .woocommerce a.button,
.h4-canvas .woocommerce button.button,
.h4-canvas .woocommerce input.button,
.h4-canvas .woocommerce #respond input#submit,
.h4-canvas .woocommerce .button.alt,
.h4-canvas .woocommerce #place_order {
	display: inline-block;
	padding: 14px 26px;
	border: 1.5px solid currentColor;
	border-radius: 12px;
	background: rgba(127, 127, 127, 0.14);
	color: inherit;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	transition: opacity .15s ease, background .15s ease;
	text-decoration: none;
	line-height: 1.2;
}
.h4-canvas .woocommerce .button.alt,
.h4-canvas .woocommerce #place_order,
.h4-canvas .woocommerce .checkout-button {
	background: currentColor;
	border-color: currentColor;
}
/* Tekst van gevulde knoppen leesbaar maken op het accentvlak */
.h4-canvas .woocommerce .button.alt,
.h4-canvas .woocommerce #place_order,
.h4-canvas .woocommerce .checkout-button { color: #fff; mix-blend-mode: normal; }
.h4-canvas .woocommerce a.button:hover,
.h4-canvas .woocommerce button.button:hover,
.h4-canvas .woocommerce .button.alt:hover,
.h4-canvas .woocommerce #place_order:hover { opacity: .9; }

/* Meldingen */
.h4-canvas .woocommerce-message,
.h4-canvas .woocommerce-info,
.h4-canvas .woocommerce-error,
.h4-canvas .woocommerce-noticed {
	border-radius: 12px;
	padding: 14px 18px;
	border: 1px solid rgba(127, 127, 127, 0.25);
	background: rgba(127, 127, 127, 0.08);
	list-style: none;
	margin-bottom: 18px;
}
.h4-canvas .woocommerce-error { border-color: rgba(220, 53, 53, 0.5); background: rgba(220, 53, 53, 0.08); }
.h4-canvas .woocommerce-message { border-color: rgba(46, 160, 90, 0.5); background: rgba(46, 160, 90, 0.08); }

/* Tabellen (winkelwagen, bestellingen, totalen) */
.h4-canvas .woocommerce table.shop_table {
	border: 1px solid rgba(127, 127, 127, 0.2);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}
.h4-canvas .woocommerce table.shop_table th,
.h4-canvas .woocommerce table.shop_table td {
	padding: 14px 16px;
	border-top: 1px solid rgba(127, 127, 127, 0.18);
	text-align: left;
}
.h4-canvas .woocommerce table.shop_table thead th { background: rgba(127, 127, 127, 0.08); border-top: 0; }
.h4-canvas .woocommerce .cart_item img { width: 64px; height: auto; border-radius: 8px; }

/* Winkelwagen-indeling */
.h4-canvas .woocommerce .cart-collaterals { margin-top: 28px; display: grid; gap: 24px; }
@media (min-width: 800px) { .h4-canvas .woocommerce .cart-collaterals { grid-template-columns: 1fr 1fr; } .h4-canvas .woocommerce .cart-collaterals .cart_totals { grid-column: 2; } }
.h4-canvas .woocommerce .cart_totals h2 { margin-bottom: 12px; }
.h4-canvas .woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; }

/* Afrekenen — premium/branded look voor de ECHTE Woo-checkout.
   Bewust ÉÉN nette, gecentreerde kolom: betrouwbaar uitgelijnd ongeacht welke
   onderdelen Woo toont (login, waardebon, verzendadres, notities). Geen
   verspringende of smalle cellen meer. */
.h4-woo-flow { max-width: 880px; margin-left: auto; margin-right: auto; }
.h4-woo-flow.h4-container { padding-bottom: 48px; }
.h4-canvas .woocommerce-checkout form.checkout { display: block; }
.h4-canvas .woocommerce-checkout .col2-set,
.h4-canvas .woocommerce-checkout #customer_details { margin-bottom: 8px; display: block; }
/* Woo's eigen floats/halve-breedtes uitschakelen -> alles op volle breedte. */
.h4-canvas .woocommerce-checkout #customer_details .col2-set,
.h4-canvas .woocommerce-checkout #customer_details .col-1,
.h4-canvas .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; max-width: none; padding: 0; }
.h4-canvas .woocommerce-checkout .form-row-first,
.h4-canvas .woocommerce-checkout .form-row-last { float: none; width: 100%; }
@media (min-width: 560px) {
	/* Voor- en achternaam mogen wel naast elkaar. */
	.h4-canvas .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.h4-canvas .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
}
/* Klantgegevens & besteloverzicht als nette kaarten */
.h4-canvas .woocommerce-checkout .woocommerce-billing-fields,
.h4-canvas .woocommerce-checkout .woocommerce-shipping-fields,
.h4-canvas .woocommerce-checkout .woocommerce-additional-fields,
.h4-canvas .woocommerce-checkout #order_review {
	border: 1px solid rgba(127, 127, 127, 0.2);
	border-radius: 16px;
	padding: 22px 24px;
	margin-bottom: 22px;
	background: rgba(127, 127, 127, 0.05);
}
.h4-canvas .woocommerce-checkout h3 { margin-top: 0; font-size: 18px; }
.h4-canvas .woocommerce-checkout #order_review_heading { margin: 0 0 14px; }
.h4-canvas .woocommerce-checkout .shop_table { margin: 0; }
.h4-canvas .woocommerce .shop_table .product-name { font-weight: 700; }
/* Verzendmethodes netjes */
.h4-canvas .woocommerce ul#shipping_method,
.h4-canvas .woocommerce .woocommerce-shipping-methods { list-style: none; margin: 8px 0; padding: 0; }
.h4-canvas .woocommerce ul#shipping_method li { padding: 8px 0; display: flex; align-items: center; gap: 8px; }
/* Bestelling-plaatsen knop in merk-accent (niet onzichtbaar) */
.h4-canvas .woocommerce #place_order,
.h4-canvas .woocommerce .checkout-button,
.h4-canvas .woocommerce .button.alt {
	background: var(--h4-accent, var(--h4-primary, #1db954)) !important;
	border-color: transparent !important;
	color: #08120c !important;
	width: 100%;
	padding: 16px 24px;
	font-size: 16px;
	mix-blend-mode: normal;
}
.h4-canvas .woocommerce #payment {
	background: rgba(127, 127, 127, 0.06);
	border: 1px solid rgba(127, 127, 127, 0.2);
	border-radius: 14px;
	padding: 18px;
}
.h4-canvas .woocommerce #payment ul.payment_methods { list-style: none; margin: 0 0 14px; padding: 0; }
.h4-canvas .woocommerce #payment ul.payment_methods > li {
	padding: 14px 16px;
	margin-bottom: 10px;
	border: 1.5px solid rgba(127,127,127,.25);
	border-radius: 12px;
	transition: border-color .15s ease, background .15s ease;
}
.h4-canvas .woocommerce #payment ul.payment_methods > li:hover { border-color: var(--h4-accent, var(--h4-primary, currentColor)); }
.h4-canvas .woocommerce #payment ul.payment_methods label { display: inline; margin: 0; font-weight: 700; cursor: pointer; }
.h4-canvas .woocommerce #payment .payment_box { background: rgba(127,127,127,.08); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.h4-canvas .woocommerce input[type="radio"] { accent-color: var(--h4-accent, var(--h4-primary, #1db954)); width: 18px; height: 18px; vertical-align: middle; }

/* Genummerde stappen op de echte checkout (jouw ontwerp-look) */
.h4-canvas .h4-woo-flow { counter-reset: h4step; }
.h4-canvas .woocommerce-checkout .woocommerce-billing-fields > h3,
.h4-canvas .woocommerce-checkout .woocommerce-shipping-fields > h3,
.h4-canvas .woocommerce-checkout .woocommerce-additional-fields > h3,
.h4-canvas .woocommerce-checkout #order_review_heading {
	display: flex; align-items: center; gap: 12px; font-size: 18px;
}
.h4-canvas .woocommerce-checkout .woocommerce-billing-fields > h3::before,
.h4-canvas .woocommerce-checkout .woocommerce-shipping-fields > h3::before,
.h4-canvas .woocommerce-checkout .woocommerce-additional-fields > h3::before,
.h4-canvas .woocommerce-checkout #order_review_heading::before {
	counter-increment: h4step; content: counter(h4step);
	flex: 0 0 auto; width: 30px; height: 30px;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--h4-accent, var(--h4-primary, #1db954));
	color: #08120c; font-size: 14px; font-weight: 800;
}

/* Verzendmethodes (ophalen/versturen) als selecteerbare kaarten */
.h4-canvas .woocommerce ul#shipping_method,
.h4-canvas .woocommerce .woocommerce-shipping-methods { list-style: none; margin: 8px 0 0; padding: 0; }
.h4-canvas .woocommerce ul#shipping_method li {
	padding: 13px 16px; margin-bottom: 10px;
	border: 1.5px solid rgba(127,127,127,.25); border-radius: 12px;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.h4-canvas .woocommerce ul#shipping_method li label { display: inline; margin: 0; font-weight: 700; }

/* Mijn account */
.h4-canvas .woocommerce-account .woocommerce { display: grid; gap: 28px; }
@media (min-width: 800px) { .h4-canvas .woocommerce-account .woocommerce { grid-template-columns: 240px 1fr; align-items: start; } }
.h4-canvas .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(127,127,127,.2); border-radius: 14px; overflow: hidden; }
.h4-canvas .woocommerce-MyAccount-navigation li { border-bottom: 1px solid rgba(127,127,127,.15); }
.h4-canvas .woocommerce-MyAccount-navigation li a { display: block; padding: 13px 18px; text-decoration: none; font-weight: 600; }
.h4-canvas .woocommerce-MyAccount-navigation li.is-active a,
.h4-canvas .woocommerce-MyAccount-navigation li a:hover { background: rgba(127,127,127,.1); }

/* Inloggen / registreren / wachtwoord vergeten */
.h4-canvas .woocommerce .col2-set { display: grid; gap: 28px; }
@media (min-width: 800px) { .h4-canvas .woocommerce .col2-set { grid-template-columns: 1fr 1fr; } }
.h4-canvas .woocommerce form.login,
.h4-canvas .woocommerce form.register,
.h4-canvas .woocommerce form.woocommerce-form-login,
.h4-canvas .woocommerce form.woocommerce-form-register,
.h4-canvas .woocommerce .woocommerce-ResetPassword {
	border: 1px solid rgba(127, 127, 127, 0.2);
	border-radius: 16px;
	padding: 26px;
}

/* Bedankt-/bestelpagina */
.h4-canvas .woocommerce .woocommerce-order { max-width: 820px; }
.h4-canvas .woocommerce ul.order_details {
	list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 20px;
	border: 1px solid rgba(127,127,127,.2); border-radius: 14px; margin: 0 0 28px;
}
.h4-canvas .woocommerce ul.order_details li { border: 0; }

/* ============================================================
   Eigen winkelwagen-pagina (volledig in huisstijl, themavrij)
   ============================================================ */
.h4-cartpage-wrap { padding: 8px 0 40px; }
.h4-cartpage .h4r-loading,
.h4-cartpage .h4r-empty { padding: 40px 0; opacity: .7; font-weight: 600; }
.h4-cart-empty { text-align: center; padding: 48px 0; }
.h4-cart-empty p { font-size: 18px; font-weight: 700; margin: 0 0 20px; }

.h4-cart { display: grid; gap: 28px; align-items: start; }
@media (min-width: 920px) { .h4-cart { grid-template-columns: 1fr 340px; gap: 36px; } }

.h4-cart-lines { display: flex; flex-direction: column; }
.h4-cart-line {
	display: grid;
	grid-template-columns: 1fr 110px 130px 110px 40px;
	gap: 16px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid rgba(127, 127, 127, 0.18);
}
.h4-cart-line--head {
	padding: 0 0 12px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 800;
	opacity: .6;
}
.h4-cart-line__prod { display: flex; align-items: center; gap: 14px; min-width: 0; }
.h4-cart-line__prod img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: rgba(127,127,127,.08); flex: 0 0 auto; }
.h4-cart-line__prod a { font-weight: 700; text-decoration: none; color: inherit; line-height: 1.25; }
.h4-cart-line__prod a:hover { color: var(--h4-accent, var(--h4-primary, inherit)); }
.h4-cart-line__price,
.h4-cart-line__sub { font-weight: 700; }
.h4-cart-line__sub { color: var(--h4-accent, var(--h4-primary, inherit)); }

.h4-cart-line__qty { display: inline-flex; align-items: center; border: 1.5px solid currentColor; border-radius: 10px; overflow: hidden; width: fit-content; }
.h4-cart-qstep { width: 34px; height: 38px; border: 0; background: transparent; color: inherit; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; }
.h4-cart-qstep:hover { background: rgba(127,127,127,.14); }
.h4-cart-q { width: 46px; height: 38px; border: 0; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: transparent; color: inherit; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.h4-cart-q::-webkit-outer-spin-button, .h4-cart-q::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.h4-cart-remove { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(127,127,127,.35); background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .75; transition: all .15s ease; }
.h4-cart-remove:hover { opacity: 1; border-color: #dc3535; color: #dc3535; }

.h4-cart-summary {
	border: 1px solid rgba(127, 127, 127, 0.2);
	border-radius: 18px;
	padding: 24px;
	position: sticky;
	top: 20px;
	background: rgba(127, 127, 127, 0.05);
}
.h4-cart-summary h2 { margin: 0 0 16px; font-size: 20px; }
.h4-cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(127,127,127,.15); }
.h4-cart-summary__row--total { border-bottom: 0; font-size: 20px; font-weight: 800; padding-top: 16px; }
.h4-cart-summary__row--total strong { color: var(--h4-accent, var(--h4-primary, inherit)); }

.h4-cart-btn { display: block; text-align: center; padding: 15px 22px; border-radius: 12px; font-weight: 800; text-decoration: none; cursor: pointer; transition: opacity .15s ease, background .15s ease; margin-top: 14px; }
/* .h4-canvas-scope + !important: wint van design-CSS die <a> groen kleurt. */
.h4-canvas .h4-cart-btn--primary,
.h4-cart-btn--primary { background: var(--h4-accent, var(--h4-primary, #1db954)); color: #08120c !important; border: 0; }
.h4-cart-btn--primary:hover { opacity: .9; }
.h4-canvas .h4-cart-btn--ghost,
.h4-cart-btn--ghost { background: transparent; color: inherit !important; border: 1.5px solid currentColor; }
.h4-cart-btn--ghost:hover { background: rgba(127,127,127,.12); }

/* Mobiel: regels stapelen met labels */
@media (max-width: 640px) {
	.h4-cart-line--head { display: none; }
	.h4-cart-line { grid-template-columns: 1fr auto; grid-template-areas: "prod remove" "price qty" "sub qty"; gap: 8px 14px; }
	.h4-cart-line__prod { grid-area: prod; }
	.h4-cart-remove { grid-area: remove; justify-self: end; }
	.h4-cart-line__price { grid-area: price; }
	.h4-cart-line__qty { grid-area: qty; align-self: center; justify-self: end; }
	.h4-cart-line__sub { grid-area: sub; }
	.h4-cart-line__price::before { content: attr(data-label) ": "; opacity: .6; font-weight: 600; }
	.h4-cart-line__sub::before { content: attr(data-label) ": "; opacity: .6; font-weight: 600; }
}
/* === CTA-blokken: kop erft eigen kleur (wint van LiteSpeed UCSS-bleed, breekt lichte CTA's niet) === */
[class*="__cta"] h1,[class*="__cta"] h2,[class*="__cta"] h3{ color:inherit !important; }
/* Expliciet-witte knoppen in CTA's leesbaar houden (groene tekst op wit) */
[class*="__cta"] a[class*="--white"],[class*="__cta"] a[class*="--w"]{ background:#fff !important; color:#2F7D27 !important; }
.hkdl__cta .hkdl__btn,.hkvt__cta .hkvt__btn{ background:#fff !important; color:#2F7D27 !important; }
/* === Vangnetten (v0.41): beschermen elk template tegen veelvoorkomende contentfouten === */
/* Lege afbeeldingen (bv. bericht zonder uitgelichte foto) nooit als kader tonen. */
#h4-design-root img[src=""], #h4-design-root img:not([src]) { display: none; }
/* SVG's in artikelcontent (Elementor-restanten) nooit schermvullend laten renderen. */
.h4-prose svg { width: 20px; height: 20px; vertical-align: middle; display: inline-block; }
.h4-prose a > br { display: none; }
.h4-prose img { max-width: 100%; height: auto; }