@charset "UTF-8";
/* Product add-ons — self-contained (form-componenten uit core wcp-components.css) */
.wcp-product-add-ons { width: 100%; }
.wcp-product-add-ons .wcp-pao__field { width: 100%; margin-bottom: 1rem; }
.wcp-product-add-ons .wcp-pao__price { color: var(--wcp-color-muted, #6c757d); font-size: var(--wcp-font-size-sm, 0.875rem); white-space: nowrap; margin-left: 0.25rem; }
.wcp-product-add-ons .wcp-pao__desc { color: var(--wcp-color-muted, #6c757d); font-size: var(--wcp-font-size-sm, 0.875rem); margin-top: 0.25rem; }
.wcp-product-add-ons .wcp-pao__optlabel { display: inline-flex; align-items: center; }
.wcp-product-add-ons .wcp-form__check { margin-bottom: 0.25rem; }
.wcp-product-add-ons select.wcp-form__control { max-width: max-content; }

/* hulp-icoon (tooltip via wcp-ui) */
.wcp-product-add-ons i.svg-icon__help-fill { line-height: 0; margin-left: 0.25rem; }
.wcp-product-add-ons i.svg-icon__help-fill:before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: currentColor;
}

/* afbeelding-checkboxen (was row g-2 > col-3 + ratio-1x1) */
.wcp-product-add-ons .wcp-pao__imggrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	justify-content: start;
}
.wcp-product-add-ons .wpc-product-add-on-checkbox-image input { display: none; }
.wcp-product-add-ons .wcp-pao__imgratio {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	margin-bottom: 0.25rem;
	transition: 0.15s;
	width: 100%;
	overflow: hidden;
	border-radius: var(--wcp-radius, 0.375rem);
}
.wcp-product-add-ons .wcp-pao__imgratio img { width: 100%; height: 100%; object-fit: cover; }
.wcp-product-add-ons .wpc-product-add-on-checkbox-image input:checked + label .wcp-pao__imgratio { border-color: var(--wcp-color-dark, #374151); }
.wcp-product-add-ons .wpc-product-add-on-checkbox-image input + label {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1.2;
	cursor: pointer;
}

/* bestandsupload */
.wcp-product-add-ons .wcp-pao__file-feedback {
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	margin-top: 0.25rem;
	word-break: break-word;
}
.wcp-product-add-ons .wcp-pao__file-feedback.is-error { color: var(--wcp-color-danger, #9b1c1c); }
.wcp-product-add-ons .wcp-pao__file-feedback.is-success { color: var(--wcp-color-success, #1e7e34); }
.wcp-product-add-ons .wcp-pao__file-remove { color: inherit; }

/* Productpagina: zelfde taal als het variatieformulier van WooCommerce Plus — vetter donker label, keuzelijst op volle
   breedte en hoogte van stepper/knop, keuzes in de merkkleur, uploadknop als secundaire knop. Afbeeldingskeuze met
   merkkleur-rand bij de keuze. */
.wcp-product-add-ons { margin-bottom: 0.5rem; }
.wcp-product-add-ons .wcp-pao__field { margin-bottom: 1.1rem; }
.wcp-product-add-ons .wcp-form__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.35rem; margin: 0 0 0.5rem; font-size: var(--wcp-font-size-sm); font-weight: var(--wcp-font-weight-semibold, 600); line-height: 1.3; color: var(--wcp-color-dark); }
.wcp-product-add-ons .wcp-form__label .wcp-pao__price { margin: 0; font-weight: var(--wcp-font-weight-normal, 400); }
.wcp-product-add-ons input.wcp-form__control[type="text"],
.wcp-product-add-ons select.wcp-form__control {
	display: block;
	width: 100%;
	max-width: none;
	height: 2.875rem;
	padding: 0 1rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background-color: var(--wcp-color-surface);
	font-size: 1rem;
	color: var(--wcp-color-text);
	transition: border-color 0.15s ease;
}
.wcp-product-add-ons select.wcp-form__control {
	padding-right: 2.75rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem;
}
.wcp-product-add-ons :is(input.wcp-form__control[type="text"], select.wcp-form__control):hover { border-color: var(--wcp-color-dark); }
.wcp-product-add-ons :is(input.wcp-form__control[type="text"], select.wcp-form__control):focus-visible { outline: 2px solid var(--wcp-color-primary); outline-offset: 1px; border-color: var(--wcp-color-primary); }
/* Keuzerondjes en vinkjes */
.wcp-product-add-ons .wcp-form__check { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.4rem; }
.wcp-product-add-ons .wcp-form__check input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--wcp-color-primary); cursor: pointer; }
.wcp-product-add-ons .wcp-pao__optlabel { gap: 0.25rem; margin: 0; font-size: 0.9375rem; color: var(--wcp-color-text); cursor: pointer; }
.wcp-product-add-ons .wcp-pao__optlabel .wcp-pao__price { margin-left: 0.15rem; }
/* Afbeeldingskeuze */
.wcp-product-add-ons .wpc-product-add-on-checkbox-image input:checked + label .wcp-pao__imgratio { border-color: var(--wcp-color-primary); box-shadow: 0 0 0 1px var(--wcp-color-primary); }
/* Bestand uploaden: de native knop als secundaire knop in de stijl van de site */
.wcp-product-add-ons input.wcp-pao__file-input { width: 100%; padding: 0.4rem; border: var(--wcp-border-width) dashed var(--wcp-color-border); border-radius: var(--wcp-radius); background: var(--wcp-color-surface); font-size: var(--wcp-font-size-sm); color: var(--wcp-color-muted); }
.wcp-product-add-ons input.wcp-pao__file-input::file-selector-button { margin-right: 0.75rem; padding: 0.5rem 0.9rem; border: var(--wcp-border-width) solid var(--wcp-color-border); border-radius: var(--wcp-radius); background: var(--wcp-color-light); font: inherit; font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); cursor: pointer; }
.wcp-product-add-ons input.wcp-pao__file-input::file-selector-button:hover { background: var(--wcp-color-surface-alt); }
.wcp-product-add-ons .wcp-pao__desc { font-size: 0.8125rem; }