.puro-variable-cart {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-family: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   Price display
   ───────────────────────────────────────────────────────────────────────── */
.pvc-price-display {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	line-height: 1;
}

/* Big price:  €22,80 — comma + cents as superscript */
.pvc-price-main {
	font-size: 2.25rem;
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: -0.02em;
	font-family: var(--h1-font-family, inherit);
}

.pvc-price-main sup {
	font-size: 0.55em;
	vertical-align: super;
	font-weight: 700;
	top: -0em;
}

/* Price per unit label  (€4,56/kg) */
.pvc-price-per-unit {
	font-size: 0.85rem;
	color: #666;
}

/* Keep WC's woocommerce-Price-amount formatting neutral */
.pvc-price-main .woocommerce-Price-amount,
.pvc-price-per-unit .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   Radio variation options
   ───────────────────────────────────────────────────────────────────────── */
.pvc-options {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 0, 1fr ) );
	gap: 0;
	border-radius: var(--Corner-radius-Buttons, 8px);
	border: 1px solid var(--color-goud-200, #CEAA5D);
	background: #FFF;
}
/* 4 options → 2 × 2 layout */
.pvc-options:has( .pvc-option:nth-child(4):last-child ) {
	grid-template-columns: repeat( 2, 1fr );
}

/* Each option card */
.pvc-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;        /* prevent grid blowout */
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
}

.pvc-option:hover {
	border-color: #888;
}

.pvc-option.is-active {
    box-shadow: 0 0 0px 3px rgb(231 207 157);
	z-index: 2;
	border-radius: 8px;
}

.pvc-option.is-out-of-stock {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hide the native <input type="radio"> but keep it accessible */
.pvc-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Custom radio dot */
.pvc-radio-dot {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
	border: 2px solid #bbb;
	border-radius: 50%;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
	position: relative;
}

.pvc-option.is-active .pvc-radio-dot {
    border-color: #CEAA5D;
    background: #ffffff;
}

/* Inner filled circle when active */
.pvc-option.is-active .pvc-radio-dot::after {
	content: '';
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: #7E5B0E;
}

/* Option label + price-per-unit text */
.pvc-option-body {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	flex: 1 1 auto;   /* fill remaining space, pushing dot to the right */
}

.pvc-option-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #1a1a1a;
}

.pvc-option-ppu {
	font-size: 0.78rem;
	color: #666;
}

/* Variation thumbnail inside the option card */
.pvc-option-img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: 4px;
	flex: 0 0 72px;
}

/* "Best value" badge – top-right corner */
.pvc-badge-best-value {
    position: absolute;
    top: -11px;
    right: -7px;
    padding: 6px 12px;
    color: #fff;
    font-size: 14px;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
    border-bottom: 2px solid var(--color-groen-900, #001410);
    background: var(--color-groen-800, #003127);
	z-index: 3;
}

/* ─────────────────────────────────────────────────────────────────────────
   WooCommerce form overrides
   ───────────────────────────────────────────────────────────────────────── */

/* Hide the attribute variation table (dropdowns) – our radio buttons replace it */
.pvc-wc-form table.variations,
.pvc-wc-form .woocommerce-variation-description,
.pvc-wc-form .woocommerce-variation-availability,
.pvc-wc-form .reset_variations {
	display: none !important;
}

/* Keep the price details hidden (we show our own price block above) */
.pvc-wc-form .woocommerce-variation.single_variation {
	display: none !important;
}

/* ── Quantity + Button row ── */
.pvc-wc-form form.cart,
.pvc-wc-form .cart {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	flex-wrap: nowrap;
}

/* Quantity box – number left, stacked chevrons right */
.pvc-wc-form .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--Gray-300, #E0E0E0);
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 auto;
	background: #fff;
}

.pvc-wc-form .quantity .qty {
	width: 2.4rem;
	text-align: center;
	border: none;
	font-size: 1rem;
	font-weight: 600;
	color: #1a1a1a;
	background: transparent;
	-moz-appearance: textfield;
	padding: 0rem;
	line-height: 1;
}

.pvc-wc-form .quantity .qty::-webkit-outer-spin-button,
.pvc-wc-form .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

/* Stacked up/down chevron arrows */
.pvc-qty-arrows {
	display: flex;
	flex-direction: column;
	border-left: 1px solid #E0E0E0;
}

.pvc-qty-arrows .plus,
.pvc-qty-arrows .minus {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 50%;
	width: 1.75rem;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #555;
	padding: 0;
	line-height: 1;
	transition: background 0.1s ease, color 0.1s ease;
}

.pvc-qty-arrows .plus {
	border-bottom: 1px solid #E0E0E0;
}

.pvc-qty-arrows .plus:hover,
.pvc-qty-arrows .minus:hover {
	background: #f5f5f5;
	color: #1a1a1a;
}

.pvc-qty-arrows .plus:disabled,
.pvc-qty-arrows .minus:disabled {
	color: #ccc;
	cursor: not-allowed;
}

.pvc-qty-arrows .fas {
	font-size: 0.6rem;
}


/* ─────────────────────────────────────────────────────────────────────────
   Delivery message
   ───────────────────────────────────────────────────────────────────────── */
.pvc-delivery {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 1rem;
	padding: 6px 12px;
	color: var(--Green-900, #1B5E20);
	font-weight: 500;
	border-radius: 6px;
	border-bottom: 2px solid var(--Green-200, #A5D6A7);
	background: var(--color-feedback-succes-container, #C8E6C9);
	width: fit-content;
}

/* ─────────────────────────────────────────────────────────────────────────
   Loading / transition state
   ───────────────────────────────────────────────────────────────────────── */
.puro-variable-cart.pvc-loading .pvc-price-display,
.puro-variable-cart.pvc-loading .pvc-options {
	opacity: 0.55;
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsive: mobile
   ───────────────────────────────────────────────────────────────────────── */

/* Stack to a single column on narrow screens */
@media ( max-width: 600px ) {
	.pvc-options {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 380px ) {
	.pvc-options {
		grid-template-columns: 1fr;
	}
}

/* Ensure the quantity + button row stays on one line on small screens
   by allowing the button to shrink its text slightly */
@media ( max-width: 380px ) {
	.pvc-wc-form form.cart,
	.pvc-wc-form .cart {
		flex-wrap: wrap;
	}
	.pvc-wc-form .single_add_to_cart_button.button,
	.pvc-wc-form button.single_add_to_cart_button {
		width: 100%;
		justify-content: center;
	}
	.pvc-wc-form .quantity {
		width: 100%;
		justify-content: center;
	}
	.pvc-wc-form .quantity .qty {
		flex: 1 1 auto;
	}
}