/**
 * Winkelwagen & afrekenen — montage compact onder de ouderregel, accessoires
 * visueel gegroepeerd. Huisstijl: zwart, neutraal grijs, groen voor "gratis".
 */

:root {
	--hpo-line: #d8d8d8;
	--hpo-bg: #f0f0f0;
	--hpo-ink: #000;
	--hpo-muted: #6b6b6b;
	--hpo-free: #059700;
}

/* --- Gekozen opties in de meta-lijst (winkelwagen + afrekenen) ----------- */

.hpo-opt-price,
.hpo-opt-qty {
	color: var(--hpo-muted);
	white-space: nowrap;
}

.hpo-opt-price .woocommerce-Price-amount {
	color: inherit;
}

/* --- Accessoireregels groeperen onder hun ouder -------------------------- */

tr.hpo-child > td.product-name,
tr.hpo-child > td:first-child {
	position: relative;
}

/* De accessoires krijgen GEEN eigen winkelwagenregel meer: ze staan als lijstje onder
   hun hoofdproduct (zie heemskerk_po_child_list_html). De regel zelf blijft bestaan —
   voorraad en totalen komen daarvandaan — maar is niet zichtbaar.
   De tweede selector is nodig onder 992 px: daar zet het thema elke rij van de
   responsieve tabel op display: block (.shop_table_responsive tr), en die regel wint
   anders van de eerste, waardoor het accessoire twee keer in de winkelwagen stond. */
tr.hpo-child,
.shop_table_responsive tr.hpo-child {
	display: none;
}

.hpo-child-marker {
	color: var(--hpo-muted);
	margin-right: 0.35em;
}

/* --- Accessoirelijstje onder het hoofdproduct --------------------------- */

.hpo-acc-blok {
	margin-top: 0.5em;
}

.hpo-acc-blok__titel {
	display: block;
	font-weight: 700;
	font-size: 0.9em;
	color: var(--hpo-ink);
}

.hpo-acc-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hpo-acc {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.15em 0;
	line-height: 1.4;
	font-size: 0.95em;
}

.hpo-acc::before {
	content: "–";
	flex: 0 0 auto;
	color: var(--hpo-muted);
}

.hpo-acc__naam {
	flex: 1 1 auto;
}

.hpo-acc__aantal,
.hpo-acc__aantal-vast,
.hpo-acc__stuk,
.hpo-acc__totaal {
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--hpo-muted);
}

/* Het aantalveldje: klein, en zonder de spinner-pijltjes die de regel hoog maken.
   De selector is bewust specifiek (en de breedte !important): het thema stylet
   input[type="number"] op volle breedte en wint anders. */
.hpo-acc-lijst .hpo-acc label.hpo-acc__aantal input.hpo-acc__qty,
.hpo-acc__qty {
	width: 3.4em !important;
	max-width: 3.4em;
	min-width: 0;
	min-height: 0;
	padding: 0.1em 0.3em;
	border: 1px solid var(--hpo-line);
	border-radius: 3px;
	background: #fff;
	font-size: 0.95em;
	line-height: 1.3;
	text-align: center;
	color: var(--hpo-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

.hpo-acc__qty::-webkit-outer-spin-button,
.hpo-acc__qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Regeltotaal is de "harde" prijs; de stukprijs blijft ondergeschikt. */
.hpo-acc__totaal {
	color: var(--hpo-ink);
	font-weight: 700;
}

.hpo-acc__stuk .woocommerce-Price-amount,
.hpo-acc__totaal .woocommerce-Price-amount {
	color: inherit;
}

.hpo-acc__verwijder {
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--hpo-muted);
	font-size: 1.15em;
	line-height: 1;
}

.hpo-acc__verwijder:hover,
.hpo-acc__verwijder:focus {
	color: var(--hpo-ink);
}

/* Knop terug naar de tussenpagina. Bewust een omlijnde knop en geen volvlak: hij
   mag niet concurreren met "Doorgaan naar afrekenen". */
.hpo-acc-knop {
	display: inline-block;
	margin-top: 0.4em;
	padding: 0.25em 0.7em;
	border: 1px solid var(--hpo-ink);
	border-radius: 3px;
	background: transparent;
	color: var(--hpo-ink);
	font-size: 0.85em;
	line-height: 1.5;
	text-decoration: none;
}

.hpo-acc-knop:hover,
.hpo-acc-knop:focus {
	background: var(--hpo-ink);
	color: #fff;
}

/* Mocht er toch item-data op een accessoireregel staan (bijv. van een andere plugin),
   houd het dan één rustige regel in plaats van een stapel dikgedrukte definities. */
tr.hpo-child dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin: 0;
	font-size: 0.85em;
	line-height: 1.3;
	color: var(--hpo-muted);
}

tr.hpo-child dl.variation dt,
tr.hpo-child dl.variation dd {
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	font-weight: 400;
	color: inherit;
}

tr.hpo-child dl.variation dd p {
	display: inline;
	margin: 0;
}

tr.hpo-child > td {
	background: linear-gradient(to right, var(--hpo-bg) 0, var(--hpo-bg) 3px, transparent 3px);
}

tr.hpo-child--orphan > td {
	opacity: 0.6;
}

tr.hpo-parent > td {
	border-bottom-width: 0;
}

/* --- Montagekeuze inline in de winkelwagen ------------------------------- */

.hpo-cart-options {
	margin: 0.5em 0 0;
	padding: 0.6em 0.75em;
	background: var(--hpo-bg);
	border-left: 3px solid var(--hpo-ink);
	font-size: 0.9em;
	line-height: 1.4;
	max-width: 32em;
}

.hpo-cart-options.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.hpo-cart-step + .hpo-cart-step {
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px solid var(--hpo-line);
}

/* Compacte samenvatting: alleen de gekozen optie, met "Wijzigen" om uit te klappen.
   <details>/<summary> doet het uitklappen zelf, dus dit werkt ook zonder JavaScript. */

.hpo-cart-step__samenvatting {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	cursor: pointer;
	list-style: none; /* het standaard driehoekje weg */
}

.hpo-cart-step__samenvatting::-webkit-details-marker {
	display: none;
}

.hpo-cart-step__title {
	font-weight: 700;
	color: var(--hpo-ink);
}

.hpo-cart-step__title::after {
	content: ":";
}

.hpo-cart-step__gekozen {
	flex: 1 1 auto;
}

/* In de samenvatting staan label en prijs in dezelfde regel tekst — zonder deze
   marge plakken ze aan elkaar ("Standaard TafeltennisnetjeGratis"). */
.hpo-cart-step__gekozen .hpo-cart-choice__price {
	margin-left: 0.4em;
}

.hpo-cart-step__leeg {
	color: var(--hpo-muted);
}

.hpo-cart-step__wijzig {
	flex: 0 0 auto;
	text-decoration: underline;
	color: var(--hpo-muted);
	white-space: nowrap;
}

.hpo-cart-step__samenvatting:hover .hpo-cart-step__wijzig {
	color: var(--hpo-ink);
}

.hpo-cart-step[open] .hpo-cart-step__wijzig {
	visibility: hidden; /* keuzelijst staat open — de link zegt dan niets meer */
}

.hpo-cart-step__choices {
	list-style: none;
	margin: 0.4em 0 0;
	padding: 0.4em 0 0;
	border-top: 1px solid var(--hpo-line);
}

.hpo-cart-choice {
	margin: 0;
	padding: 0;
}

.hpo-cart-choice label {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0;
	padding: 0.15em 0;
	cursor: pointer;
	font-weight: 400;
}

/* Het thema verbergt radio's/checkboxes globaal (eigen vormgeving elders). Binnen
   ons blok zetten we ze terug: zonder bolletje ziet de klant niet welke optie
   gekozen is, en dat is precies de verwarring die we willen wegnemen. */
.hpo-cart-choice input[type="radio"],
.hpo-cart-choice input[type="checkbox"] {
	position: static;
	display: inline-block;
	appearance: auto;
	-webkit-appearance: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	opacity: 1;
	clip: auto;
	clip-path: none;
	pointer-events: auto;
	flex: 0 0 auto;
}

.hpo-cart-choice__label {
	flex: 1 1 auto;
}

.hpo-cart-choice__price {
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--hpo-muted);
}

.hpo-cart-choice__price--free {
	color: var(--hpo-free);
}

.hpo-cart-choice input[type="radio"]:checked ~ .hpo-cart-choice__label,
.hpo-cart-choice input[type="checkbox"]:checked ~ .hpo-cart-choice__label {
	font-weight: 700;
}

.hpo-cart-choice--uitverkocht label {
	cursor: not-allowed;
	opacity: 0.55;
}

.hpo-cart-choice__badge {
	flex: 0 0 auto;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hpo-muted);
}

/* --- No-JS knop: alleen zichtbaar zonder JavaScript --------------------- */

/* Standaard verborgen: met JavaScript wordt de wijziging meteen doorgevoerd. Zou de
   knop zichtbaar starten, dan flitst hij bij elke paginalading kort in beeld voordat
   cart.js de class op <html> zet. Zonder JavaScript zet <noscript> hem alsnog aan
   (zie heemskerk_po_render_cart_options). */
.hpo-cart-options__submit {
	display: none;
	margin-top: 0.6em;
	padding: 0.35em 0.9em;
	background: var(--hpo-ink);
	color: #fff;
	border: 0;
	font-size: 0.95em;
	cursor: pointer;
}

.hpo-cart-options__status {
	display: none;
	margin-top: 0.4em;
	color: var(--hpo-muted);
}

.hpo-cart-options__status.is-visible {
	display: block;
}

.hpo-cart-options__status.is-error {
	color: #d52462;
}

/* --- Responsive (shop_table_responsive stapelt de cellen) ---------------- */

@media (max-width: 768px) {
	tr.hpo-child > td.product-name {
		padding-left: 0.75em;
	}

	.hpo-cart-options {
		max-width: none;
	}
}