/* PurePlugins Woo Commerce — frontend */
.pwc-personalisatie { margin: 16px 0; padding: 16px; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 6px; }
.pwc-field { margin-bottom: 14px; }
.pwc-label { display: block; font-weight: 600; margin-bottom: 6px; }
.pwc-required { color: #d63638; }

.pwc-input { width: 100%; padding: 8px 10px; border: 1px solid #c3c4c7; border-radius: 4px; box-sizing: border-box; }
.pwc-textarea { min-height: 80px; }

.pwc-select--dropdown-styled option { font-size: 16px; }

.pwc-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.pwc-choice-input { position: absolute; opacity: 0; pointer-events: none; }
.pwc-choice-label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #c3c4c7; border-radius: 4px; padding: 6px 12px; user-select: none; transition: border-color 0.15s, box-shadow 0.15s; }
.pwc-choice-input:checked + .pwc-choice-label { border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25); }
.pwc-choice-input:focus-visible + .pwc-choice-label { outline: 2px solid #2271b1; outline-offset: 2px; }

.pwc-swatch { width: 36px; height: 36px; padding: 0; position: relative; overflow: hidden; }
.pwc-swatch--round { border-radius: 50%; }
.pwc-swatch--square { border-radius: 4px; }
.pwc-swatch-color { display: block; width: 100%; height: 100%; }
.pwc-swatch img { width: 100%; height: 100%; object-fit: cover; }

.pwc-button { padding: 8px 16px; font-weight: 500; }

.pwc-preview { margin-top: 12px; padding: 12px; background: #fff; border: 1px dashed #c3c4c7; border-radius: 4px; min-height: 40px; }

.pwc-wishlist-btn { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 8px 14px; border: 1px solid #c3c4c7; background: #fff; border-radius: 4px; cursor: pointer; max-width: 100%; min-width: 0; }
.pwc-wishlist-btn.is-on { background: #fef9c3; border-color: #dba617; }

/* Mobiel: de knop staat bij flex-rij-themes NAAST de winkelwagen-knop en drukt
   de pagina breder dan het scherm. Vol-breed op een eigen regel eronder.
   !important bewust: themes en builders zetten eigen flex-regels op de
   knoppenrij met hogere specificiteit (zelfde les als de verzendmeter-balk);
   order 99 legt de knop altijd als laatste onderaan. */
@media (max-width: 600px) {
    /* Ook ZONDER de single-product body-class: de Theme Builder-preview van
       Elementor heeft die class niet, en daar wordt ontworpen. form.cart
       bestaat alleen in product-context, dus de brede selector is veilig. */
    form.cart,
    .single-product form.cart,
    .woocommerce div.product form.cart,
    form.cart .woocommerce-variation-add-to-cart {
        flex-wrap: wrap !important;
        max-width: 100%;
    }
    .pwc-wishlist-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 !important;
        justify-content: center !important;
        order: 99;
    }
}
.pwc-wishlist-melding { display: block; margin-top: 8px; font-size: 0.92em; }
.pwc-wishlist-nieuwe-categorie { display: inline-flex; gap: 4px; margin-left: 6px; align-items: center; }
.pwc-wishlist-nieuwe-categorie input { max-width: 160px; padding: 4px 6px; }
.pwc-wishlist-nieuwe-categorie button { border: 1px solid #c3c4c7; background: #fff; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.pwc-inpak-regelwrap { margin: 4px 0 0; font-size: 0.92em; }
.pwc-wishlist-list { list-style: none; padding: 0; margin: 0 0 12px; }
.pwc-wishlist-groep { margin: 18px 0 6px; }
.pwc-wishlist-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #e5e5e5; }
.pwc-wishlist-item__foto img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; display: block; }
.pwc-wishlist-item__info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.pwc-wishlist-item__prijs { font-size: 0.95em; color: #555; }
.pwc-wishlist-item__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwc-wishlist-item__verwijder { border: none; background: none; color: #d63638; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }

/* Mobiel: de actie-rij (dropdown plus knoppen) op een eigen regel onder foto
   en naam, zodat de lijst nooit breder wordt dan het scherm. */
@media (max-width: 600px) {
    .pwc-wishlist-item { flex-wrap: wrap; }
    .pwc-wishlist-item__info { min-width: 0; }
    .pwc-wishlist-item__acties { flex: 1 1 100%; justify-content: flex-start; }
    .pwc-wishlist-item__acties select { max-width: 100%; flex: 1 1 auto; }
}
.pwc-wishlist-leegmaken { border: 1px solid #c3c4c7; background: #fff; border-radius: 4px; padding: 6px 12px; cursor: pointer; color: #d63638; }

/* Variant-weergave (swatches op Woo-attributen) */
.pwc-swatches .pwc-swatch-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pwc-swatches .pwc-swatch-list li { margin: 0; padding: 0; }
/* De originele Woo-select blijft bestaan voor de variatie-JS, maar visueel verborgen. */
.pwc-swatch-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.pwc-swatch { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #c3c4c7; background: #fff; padding: 0; transition: border-color .15s, box-shadow .15s; }
.pwc-swatch.pwc-swatch--button { padding: 6px 14px; border-radius: 4px; font-size: 14px; }
.pwc-swatch.pwc-swatch--shape { position: relative; width: 36px; height: 36px; overflow: hidden; box-sizing: border-box; background: #fff; }
.pwc-swatches--round .pwc-swatch--shape { border-radius: 50%; }
.pwc-swatches--square .pwc-swatch--shape { border-radius: 4px; }
/* Kleur en afbeelding vullen de hele cirkel, absoluut zodat thema-knopstijlen ze niet vervormen. */
.pwc-swatch .pwc-swatch-color { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pwc-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pwc-swatch-fallback { font-size: 11px; text-transform: uppercase; }
/* Duidelijke selectie: witte tussenring plus ring in de tekstkleur van het
   theme (currentColor werkt in licht EN donker), bevinding Rianne 2026-08-06. */
.pwc-swatch.is-selected { border-color: currentColor; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.pwc-swatch.pwc-swatch--button.is-selected { box-shadow: 0 0 0 2px currentColor inset; }
.pwc-swatch-gekozen { display: inline-block; margin-top: 6px; font-size: .9em; font-weight: 600; }
.pwc-swatch-gekozen:empty { display: none; }
.pwc-swatch:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
/* Uitverkochte waardes: gedimd, niet kiesbaar, met een diagonale streep door de vorm. */
.pwc-swatch.pwc-swatch--uitverkocht { opacity: .4; filter: grayscale(.6); cursor: not-allowed; }
.pwc-swatch.pwc-swatch--uitverkocht.pwc-swatch--button { text-decoration: line-through; }
.pwc-swatch.pwc-swatch--uitverkocht.pwc-swatch--shape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent calc(50% - 1px), rgba(60,60,60,.75) calc(50% - 1px), rgba(60,60,60,.75) calc(50% + 1px), transparent calc(50% + 1px)); z-index: 1; }

/* Labels (actie-stickers): het theme stijlt .onsale, wij geven alleen een
   nette basis voor themes zonder eigen sale-flash-styling. */
.pwc-label { display: inline-block; padding: 0.3em 0.8em; }
.pwc-sale-overzicht { margin: 12px 0; }

/* Sets en bundels */
.pwc-set { margin: 16px 0; padding: 12px 16px; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 6px; }
.pwc-set__titel { font-weight: 600; margin: 0 0 6px; }
.pwc-set__lijst { list-style: disc; margin: 0 0 8px; padding-left: 20px; }
.pwc-set__item { margin: 2px 0; }
.pwc-set__besparing { margin: 0; font-weight: 600; color: #1e8e4e; }

/* Inpakservice */
/* Volle breedte afdwingen, ook als een theme de omliggende rij als flex opmaakt:
   het blok mag nooit naast het aantal-veld of de knoppen belanden. */
.pwc-inpak-artikel { display: block; width: 100%; flex: 0 0 100%; box-sizing: border-box; margin: 12px 0; padding: 12px; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 6px; }
.pwc-inpak-artikel__keuze { font-weight: 600; }
.pwc-inpak-velden { margin-top: 8px; }
.pwc-inpak-veld { margin: 8px 0 0; }
.pwc-inpak-veld select, .pwc-inpak-veld textarea { width: 100%; max-width: 420px; }

/* Verzendmeter (gratis verzending) */
.pwc-verzendmeter { margin: 12px 0; }
.pwc-verzendmeter[data-leeg] { display: none; }
.pwc-verzendmeter__tekst { margin: 0 0 6px; font-size: 0.95em; }
.pwc-verzendmeter__balk { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.pwc-verzendmeter__balk span { display: block; height: 100%; background: #2ecc71; border-radius: 4px; transition: width 0.3s ease; }
.pwc-verzendmeter.is-klaar .pwc-verzendmeter__tekst { color: #1e8e4e; font-weight: 600; }
/* --- Hover-afbeelding in de productlijst (Instellingen > Catalogus) --- */

.pwc-hover-wrap {
	position: relative;
	display: block;
	max-width: 100%;
}

.pwc-hover-wrap .pwc-hover-afbeelding {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

/* Alleen op apparaten met echte hover; aanraakschermen blijven ongewijzigd. */
@media (hover: hover) {
	.pwc-hover-wrap:hover .pwc-hover-afbeelding,
	a:focus-visible .pwc-hover-wrap .pwc-hover-afbeelding {
		opacity: 1;
	}
}

/* --- Add-on-producten (Pro-module addons) --- */

.pwc-addons {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100%;
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 8px;
}

.pwc-addons__titel {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.pwc-addons__optie {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0;
	cursor: pointer;
	max-width: 100%;
}

.pwc-addons__optie:hover .pwc-addons__naam,
.pwc-addons__optie input:focus-visible ~ .pwc-addons__naam {
	text-decoration: underline;
}

.pwc-addons__naam {
	min-width: 0;
	overflow-wrap: anywhere;
}

.pwc-addons__prijs {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
	opacity: 0.85;
}

@media (max-width: 600px) {
	.pwc-addons {
		flex-basis: 100% !important;
	}
}

/* --- Checkout: herhaal-mailveld (module Checkout) --- */

input.pwc-mail-mismatch {
	border-color: #c0392b !important;
}

.pwc-mail-hint {
	display: block;
	margin-top: 4px;
	font-size: 0.85em;
	color: #c0392b;
}

/* Inpak-positie "vlak voor de knop": vangnet tegen flex-knoppenrijen van
   themes (zelfde !important-les als de wensenlijst-knop en verzendmeter). */
form.cart .pwc-inpak-artikel {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100%;
    margin: 0 0 12px;
}

/* Desktop-knijp-vangnet: sommige themes zetten row nowrap op form.cart of op
   de variatie-knoppenrij; flex 1 1 100% kan dan niet wrappen en de blokken
   belanden geknepen NAAST de knop. Wrap afdwingen zodra er een pwc-blok in de
   rij staat, en elk blok een eigen volle regel geven. De Pro-klassen
   (personalisatie plus add-ons) staan hier bewust ook: alleen selectors,
   zonder Pro matcht er simpelweg niets. */
form.cart:has(> .pwc-inpak-artikel),
form.cart:has(> .pwc-personalisatie),
form.cart:has(> .pwc-addons),
.woocommerce-variation-add-to-cart:has(> .pwc-inpak-artikel),
.woocommerce-variation-add-to-cart:has(> .pwc-personalisatie),
.woocommerce-variation-add-to-cart:has(> .pwc-addons) {
    flex-wrap: wrap !important;
}
form.cart > .pwc-personalisatie,
form.cart > .pwc-addons,
.woocommerce-variation-add-to-cart > .pwc-inpak-artikel,
.woocommerce-variation-add-to-cart > .pwc-personalisatie,
.woocommerce-variation-add-to-cart > .pwc-addons {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100%;
    min-width: 0;
}

/* Attribuut-weergave "onder elkaar": elke waarde op een eigen regel. */
.pwc-attribuut--regels { display: block; }
.pwc-attribuut--regels .pwc-attribuut__waarde { display: block; }