/* ── Winkelwagen-lade ─────────────────────────────────────────────── */

/* De positionering hangt aan de omhullende span en niet aan de knop.
   Safari rekent een <button> niet altijd als containing block voor een
   absoluut geplaatst kind: op iOS zakte de teller daardoor ONDER de tas
   en werd de hele kop hoger. Op een span klopt het overal. */
.pph-cart-knop-wrap { display: inline-flex; position: relative; }
.pph-cart-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}
.pph-cart-knop:hover { opacity: .7; }
.pph-cart-aantal {
	position: absolute;
	top: -4px;
	right: -7px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: #2B46AB;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.pph-cart-scherm {
	position: fixed;
	inset: 0;
	background: rgba(3, 63, 136, .34);
	opacity: 0;
	transition: opacity .25s ease;
	z-index: 10000000;
}
.pph-cart-scherm.is-open { opacity: 1; }
.pph-cart-scherm[hidden] { display: none; }

.pph-cart-lade {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -8px 0 32px rgba(3, 63, 136, .14);
	transform: translateX(100%);
	transition: transform .25s ease;
	z-index: 10000001;
}
.pph-cart-lade.is-open { transform: translateX(0); }
.pph-cart-lade[hidden] { display: none; }
body.pph-cart-vast { overflow: hidden; }

.pph-cart-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid #E3E6EB;
}
.pph-cart-kop h2 { margin: 0; font-size: 1.05rem; color: #033F88; }
.pph-cart-sluit {
	min-width: 36px; min-height: 36px;
	border: 0; background: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}

.pph-cart-lade-inhoud {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	transition: opacity .15s ease;
}
.pph-cart-lade-inhoud.is-bezig { opacity: .5; pointer-events: none; }

.pph-cart-gratis { padding: 14px 20px; border-bottom: 1px solid #F1F2F6; }
.pph-cart-gratis p { margin: 0 0 8px; font-size: .84rem; color: #4b5563; }
.pph-cart-balk { height: 5px; border-radius: 999px; background: #E3E6EB; overflow: hidden; }
.pph-cart-balk span { display: block; height: 100%; background: #0EB7A8; transition: width .3s ease; }

.pph-cart-regels { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.pph-cart-regel {
	display: flex;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid #F1F2F6;
}
.pph-cart-beeld img { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; }
.pph-cart-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pph-cart-naam { font-size: .88rem; line-height: 1.35; }
.pph-cart-naam a { color: #1a2230; text-decoration: none; }
.pph-cart-naam a:hover { text-decoration: underline; }
.pph-cart-voorraad { font-size: .74rem; color: #0E8F85; }
.pph-cart-aantallen {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid #D7DCE8;
	border-radius: 8px;
	width: fit-content;
}
/* 36 px: op een telefoon moet je dit kunnen raken zonder te mikken. */
.pph-cart-min, .pph-cart-plus {
	min-width: 36px; min-height: 36px;
	border: 0; background: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	color: #1a2230;
}
.pph-cart-min:hover, .pph-cart-plus:hover { color: #2B46AB; }
.pph-cart-qty { min-width: 22px; text-align: center; font-size: .86rem; font-weight: 600; }
.pph-cart-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pph-cart-prijs { font-size: .9rem; font-weight: 600; color: #1a2230; white-space: nowrap; }
.pph-cart-weg {
	border: 0; background: none; padding: 0; cursor: pointer;
	font-size: .76rem; color: #6B7280; text-decoration: underline;
}
.pph-cart-weg:hover { color: #A7144C; }

.pph-cart-voet { padding: 16px 20px 20px; border-top: 1px solid #E3E6EB; background: #FAFBFC; }
.pph-cart-subtotaal {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: 1rem; font-weight: 700; color: #033F88;
}
.pph-cart-noot { margin: 4px 0 14px; font-size: .76rem; color: #6B7280; }
.pph-cart-afrekenen {
	display: block; width: 100%; box-sizing: border-box;
	padding: 14px 20px; border-radius: 10px;
	background: #2B46AB; color: #fff; text-align: center;
	font-weight: 600; text-decoration: none;
}
.pph-cart-afrekenen:hover { background: #1f3690; color: #fff; }
.pph-cart-bekijk {
	display: block; margin-top: 10px; text-align: center;
	font-size: .84rem; color: #2B46AB;
}

.pph-cart-leeg { padding: 48px 24px; text-align: center; color: #6B7280; }
.pph-cart-verder {
	display: inline-block; margin-top: 12px; padding: 11px 18px;
	border: 1.5px solid #2B46AB; border-radius: 10px;
	color: #2B46AB; text-decoration: none; font-weight: 600;
}

/* Boven alles wat op deze site zweeft. Gemeten op 09/10/2026: de
   taalschakelaar van TranslatePress staat op 99999 en UberMenu op
   9999999, en de lade verdween daaronder -- met de afrekenknop en al.
   Daarom ook de schakelaar zelf wegduwen zolang de lade open staat:
   hij zweeft rechtsonder, precies over die knop. */
body.pph-cart-vast .trp-floating-switcher {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* De melding na "in winkelwagen" krijgt van WooCommerce de focus, zodat
   een schermlezer hem voorleest. Safari tekent daar zijn focusrand
   omheen en dan lijkt de melding aangeklikt -- een blauw kader om een
   zin die niets doet.

   :focus-visible is het verschil tussen focus die de browser zelf geeft
   en focus die iemand met de toetsenbord-tab haalt. Alleen de eerste
   verliest zijn rand; wie tabt ziet hem gewoon, en dat hoort ook. */
.woocommerce-message:focus:not(:focus-visible),
.woocommerce-info:focus:not(:focus-visible),
.woocommerce-error:focus:not(:focus-visible),
.woocommerce-notices-wrapper > *:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}