/* =========================================================
   VÖLKEL WOO Pflicht-Service – Frontend
   ========================================================= */

.vhsp-service-box,
.vhsp-service-box *,
.vhsp-loop-note,
.vhsp-loop-note * {
	box-sizing: border-box;
}

.vhsp-service-box {
	--vhsp-red: #D92D32;
	--vhsp-red-dark: #B92126;
	--vhsp-dark: #181A1D;
	--vhsp-text: #272A2E;
	--vhsp-muted: #686D73;
	--vhsp-light: #F7F6F3;
	--vhsp-white: #FFFFFF;
	--vhsp-line: #E1E2DF;

	width: 100%;
	margin: 22px 0 26px;
	padding: 25px;

	color: var(--vhsp-text);
	background: var(--vhsp-light);
	border: 1px solid var(--vhsp-line);
	border-top: 3px solid var(--vhsp-red);

	font-family: Inter, Arial, sans-serif;
}

.vhsp-service-box__head {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr) auto;
	align-items: center;
	gap: 15px;
}

.vhsp-service-box__icon {
	width: 50px;
	height: 50px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--vhsp-red);
	background: rgba(217, 45, 50, .10);
}

.vhsp-service-box__icon svg {
	width: 23px;
	height: 23px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vhsp-service-box__eyebrow {
	display: block;
	margin-bottom: 4px;

	color: var(--vhsp-red);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	line-height: 1.4;
	text-transform: uppercase;
}

.vhsp-service-box h3 {
	margin: 0 !important;

	color: var(--vhsp-dark);

	font-family: Manrope, Inter, Arial, sans-serif;
	font-size: 20px !important;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.03em;
}

.vhsp-service-box__required {
	padding: 8px 10px;

	color: var(--vhsp-white);
	background: var(--vhsp-red);

	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vhsp-service-box__description {
	margin: 18px 0 0 !important;

	color: var(--vhsp-muted);

	font-size: 13px;
	line-height: 1.7;
}

.vhsp-service-box__prices {
	margin-top: 20px;

	background: var(--vhsp-white);
	border: 1px solid var(--vhsp-line);
}

.vhsp-service-box__price-row {
	min-height: 53px;
	padding: 12px 15px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	border-bottom: 1px solid var(--vhsp-line);
}

.vhsp-service-box__price-row:last-child {
	border-bottom: 0;
}

.vhsp-service-box__price-row > span {
	color: var(--vhsp-muted);

	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
}

.vhsp-service-box__price-row > strong {
	flex: 0 0 auto;

	color: var(--vhsp-dark);

	font-family: Manrope, Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
}

.vhsp-service-box__price-row > strong .price,
.vhsp-service-box__price-row > strong del,
.vhsp-service-box__price-row > strong ins {
	font-size: inherit !important;
}

.vhsp-service-box__price-row > strong del {
	margin-right: 5px;
	color: #9A9D9A;
	opacity: .75;
}

.vhsp-service-box__price-row > strong ins {
	color: var(--vhsp-red);
	text-decoration: none;
}

.vhsp-service-box__price-row--service {
	background: #FCF4F4;
}

.vhsp-service-box__price-row--service > span,
.vhsp-service-box__price-row--service > strong {
	color: var(--vhsp-red-dark);
}

.vhsp-service-box__price-row--total {
	min-height: 62px;
	background: var(--vhsp-dark);
}

.vhsp-service-box__price-row--total > span {
	color: rgba(255, 255, 255, .64);
}

.vhsp-service-box__price-row--total > strong {
	color: var(--vhsp-white);
	font-size: 19px;
}

.vhsp-service-box__notice {
	margin-top: 15px;

	display: grid;
	grid-template-columns: 25px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}

.vhsp-service-box__notice > span {
	width: 25px;
	height: 25px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--vhsp-white);
	background: var(--vhsp-dark);

	font-family: Manrope, Inter, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
}

.vhsp-service-box__notice p {
	margin: 1px 0 0 !important;
	color: var(--vhsp-muted);
	font-size: 11px;
	line-height: 1.65;
}

.vhsp-loop-note {
	margin: 9px 0 5px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 9px;
	font-family: Inter, Arial, sans-serif;
}

.vhsp-loop-note > span {
	padding: 5px 7px;
	color: #FFFFFF;
	background: #D92D32;
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.vhsp-loop-note > strong {
	color: #686D73;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
}

.vhsp-cart-service {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	color: #272A2E;
	font-weight: 600;
}

.vhsp-cart-service small {
	color: #D92D32;
	font-weight: 700;
}

.wc-block-components-product-details__vhsp-service-enabled,
.wc-block-components-product-details__vhsp-service-name,
.wc-block-components-product-details__vhsp-service-price,
.wc-block-components-product-details__vhsp-base-price,
.wc-block-components-product-details__vhsp-source-product-id {
	display: none !important;
}

@media (max-width: 767px) {
	.vhsp-service-box {
		margin-top: 18px;
		padding: 20px 17px;
	}

	.vhsp-service-box__head {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 12px;
	}

	.vhsp-service-box__icon {
		width: 44px;
		height: 44px;
	}

	.vhsp-service-box__required {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.vhsp-service-box h3 {
		font-size: 18px !important;
	}

	.vhsp-service-box__price-row {
		align-items: flex-start;
	}

	.vhsp-service-box__price-row > span {
		max-width: 58%;
	}

	.vhsp-service-box__price-row > strong {
		max-width: 42%;
		font-size: 14px;
	}

	.vhsp-service-box__price-row--total > strong {
		font-size: 17px;
	}
}

/* Version 2.0: Abholpreis visuell eindeutig kennzeichnen. */
.vhsp-service-box--pickup {
	--vhsp-red: #2E3338;
	--vhsp-red-dark: #202428;
}

.vhsp-loop-note--pickup > span {
	background: #2E3338;
}

.vhsp-fixed-price {
	font: inherit;
}

/* =========================================================
   VERSION 3.0 – FREI WÄHLBARE PRODUKTOPTIONEN
   ========================================================= */

.vhsp-product-options,
.vhsp-product-options * {
	box-sizing: border-box;
}

.vhsp-product-options {
	--vhsp-opt-red: #D92D32;
	--vhsp-opt-red-dark: #B92126;
	--vhsp-opt-dark: #181A1D;
	--vhsp-opt-text: #272A2E;
	--vhsp-opt-muted: #686D73;
	--vhsp-opt-light: #F7F6F3;
	--vhsp-opt-line: #E1E2DF;
	width: 100%;
	margin: 24px 0;
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid var(--vhsp-opt-line);
	border-top: 3px solid var(--vhsp-opt-red);
	font-family: Inter, Arial, sans-serif;
}

.vhsp-product-options__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.vhsp-product-options__head > div > span {
	display: block;
	margin-bottom: 4px;
	color: var(--vhsp-opt-red);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	line-height: 1.4;
	text-transform: uppercase;
}

.vhsp-product-options__head h3 {
	margin: 0 !important;
	color: var(--vhsp-opt-dark);
	font-family: Manrope, Inter, Arial, sans-serif;
	font-size: 21px !important;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.03em;
}

.vhsp-product-options__head > small {
	max-width: 240px;
	color: var(--vhsp-opt-muted);
	font-size: 11px;
	line-height: 1.5;
	text-align: right;
}

.vhsp-product-options__groups {
	display: grid;
	gap: 18px;
}

.vhsp-product-options__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.vhsp-product-options__group legend {
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	color: var(--vhsp-opt-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.vhsp-product-options__list {
	display: grid;
	gap: 8px;
}

.vhsp-option-card {
	position: relative;
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	margin: 0;
	padding: 12px 14px;
	background: var(--vhsp-opt-light);
	border: 1px solid var(--vhsp-opt-line);
	cursor: pointer;
	transition: border-color .22s ease, background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.vhsp-option-card:hover {
	border-color: rgba(217,45,50,.45);
	transform: translateY(-1px);
}

.vhsp-option-card:has(input:checked) {
	background: #FCF3F3;
	border-color: var(--vhsp-opt-red);
	box-shadow: inset 3px 0 0 var(--vhsp-opt-red);
}

.vhsp-option-card > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vhsp-option-card__check {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	background: #FFFFFF;
	border: 1px solid #B9BCB9;
	transition: .2s ease;
}

.vhsp-option-card__check svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transform: scale(.7);
	transition: .2s ease;
}

.vhsp-option-card input:checked + .vhsp-option-card__check {
	background: var(--vhsp-opt-red);
	border-color: var(--vhsp-opt-red);
}

.vhsp-option-card input:checked + .vhsp-option-card__check svg {
	opacity: 1;
	transform: scale(1);
}

.vhsp-option-card input:focus-visible + .vhsp-option-card__check {
	outline: 2px solid var(--vhsp-opt-dark);
	outline-offset: 2px;
}

.vhsp-option-card__content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.vhsp-option-card__content strong {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	color: var(--vhsp-opt-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.vhsp-option-card__content strong em {
	padding: 4px 6px;
	color: #FFFFFF;
	background: var(--vhsp-opt-red);
	font-size: 8px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
}

.vhsp-option-card__content small {
	color: var(--vhsp-opt-muted);
	font-size: 10px;
	line-height: 1.5;
}

.vhsp-option-card__price {
	flex: 0 0 auto;
	color: var(--vhsp-opt-dark);
	font-family: Manrope, Inter, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.vhsp-product-options__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 18px;
	padding: 14px 15px;
	color: #FFFFFF;
	background: var(--vhsp-opt-dark);
}

.vhsp-product-options__summary span {
	color: rgba(255,255,255,.65);
	font-size: 11px;
	font-weight: 600;
}

.vhsp-product-options__summary strong {
	color: #FFFFFF;
	font-family: Manrope, Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.vhsp-cart-option {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 9px;
}

.vhsp-cart-option strong {
	color: #272A2E;
	font-weight: 600;
}

.vhsp-cart-option small {
	color: #D92D32;
	font-weight: 700;
}

.wc-block-components-product-details__vhsp-options-base-price,
.wc-block-components-product-details__vhsp-options-hash,
.wc-block-components-product-details__vhsp-selected-options {
	display: none !important;
}

@media (max-width: 767px) {
	.vhsp-product-options {
		margin: 20px 0;
		padding: 19px 15px;
	}

	.vhsp-product-options__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}

	.vhsp-product-options__head h3 {
		font-size: 18px !important;
	}

	.vhsp-product-options__head > small {
		max-width: none;
		text-align: left;
	}

	.vhsp-option-card {
		grid-template-columns: 25px minmax(0, 1fr);
		align-items: start;
		padding: 13px 12px;
	}

	.vhsp-option-card__check {
		margin-top: 2px;
	}

	.vhsp-option-card__price {
		grid-column: 2;
		padding-top: 3px;
		color: var(--vhsp-opt-red-dark);
	}

	.vhsp-product-options__summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}
}

@supports not selector(:has(*)) {
	.vhsp-option-card.vhsp-is-selected {
		background: #FCF3F3;
		border-color: #D92D32;
		box-shadow: inset 3px 0 0 #D92D32;
	}
}