.meomix-bundles--form {
    display: grid;
	grid-column: full !important;
    grid-template-columns: inherit;
	column-gap: inherit;
}

.meomix-bundles--container {
	display: grid;
	grid-column: full;
    grid-template-columns: inherit;
	row-gap: 2rem;
	column-gap: inherit;
	h2, h3, h4 {
		margin: 0;
	}
	p {
		text-wrap: pretty;
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
	.meomix-bundles--name {
		grid-column: content;
		margin: 0;
	}
	.meomix-bundles--conditions,
	.meomix-bundles--description {
		grid-column: content;
		margin: 0;
	}
	.meomix-bundles--price {
		color: var(--wp--preset--color--foreground-alt);
		font-size: var(--wp--preset--font-size--small);
		margin-block-end: 1rem;
		.meomix-bundles--total {
			.woocommerce-Price-amount {
				display: block;
				color: var(--card-price-color);
				font-weight: var(--card-price-weight);
				font-size: var(--wp--preset--font-size--x-large);
			}
		}
		.price-info {
			display: block;
		}
	}
	.meomix-bundles--actions {
		grid-column: content;
		p:nth-child(2) {
			display: none;
		}
		button:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}
	.meomix-bundles--items {
		position: relative;
		grid-column: wide;
		list-style: none;
		margin: 0;
		padding-inline: 0;
		padding-block: 3rem;
		display: grid;
		gap: 3rem;

		&::after {
			content: '';
			position: absolute;
			inset-inline-start: 50%;
			inset-block-start: 0;
			inline-size: 100svw;
			block-size: 100%;
			transform: translateX(-50%);
			z-index: -1;
			background-color: var(--wp--preset--color--background);
			/* background-color: var(--wp--custom--color--pfalzfreude-sand); */
			/* opacity: 0.5; */
		}

		.meomix-bundles--item {
			display: grid;
			row-gap: 1rem;
			column-gap: 3rem;
			grid-template-columns: 250px 1fr 80px;
			grid-template-rows: auto 1fr auto;
			@media (max-width: 666px) {
				grid-template-columns: 1fr 80px;
			}
			.meomix-bundles--item--image {
				grid-column-start: 1;
				grid-column-end: 2;
				grid-row-start: 1;
				grid-row-end: 4;
				font-size: 0;
				line-height: 0;

				@media (max-width: 666px) {
					display: none;
				}

				img {
					inline-size: 100%;
					block-size: auto;
				}
			}
			.meomix-bundles--item--title {
				grid-column-start: 2;
				grid-column-end: 3;
				grid-row-start: 1;
				grid-row-end: 2;

				@media (max-width: 666px) {
					grid-column-start: 1;
					grid-column-end: 2;
					grid-row-start: 1;
					grid-row-end: 2;
				}

				margin: 0;
				padding-block-start: 1rem;
			}
			.meomix-bundles--item--description {
				grid-column-start: 2;
				grid-column-end: 3;
				grid-row-start: 2;
				grid-row-end: 3;

				@media (max-width: 666px) {
					grid-column-start: 1;
					grid-column-end: 2;
					grid-row-start: 2;
					grid-row-end: 3;
				}
			}
			.meomix-bundles--item--price {
				grid-column-start: 3;
				grid-column-end: 4;
				grid-row-start: 1;
				grid-row-end: 3;

				@media (max-width: 666px) {
					grid-column-start: 2;
					grid-column-end: 3;
					grid-row-start: 1;
					grid-row-end: 3;
				}
				padding-block-start: 1rem;
				text-align: end;
				.woocommerce-Price-amount {
					display: block;
					color: var(--card-price-color);
					font-weight: var(--card-price-weight);
					font-size: var(--wp--preset--font-size--x-large);
				}
				.price-info {
					display: block;
					color: var(--wp--preset--color--foreground-alt);
					font-size: var(--wp--preset--font-size--small);
				}
			}
			.meomix-bundles--item--variations {
				grid-column-start: 2;
				grid-column-end: 4;
				grid-row-start: 3;
				grid-row-end: 4;

				@media (max-width: 666px) {
					grid-column-start: 1;
					grid-column-end: 3;
					grid-row-start: 3;
					grid-row-end: 4;
				}

				--grid-cols: auto-fit;
				--grid-col-min-size: 200px;
    			--grid-gap: 1rem;

				margin: 0;
				padding: 0;
				padding-block-end: 1rem;
				list-style: none;
				display: grid;
				gap: var(--grid-gap);
				grid-template-columns: repeat(var(--grid-cols), minmax(min(var(--grid-col-min-size), 100%), 1fr));

				.meomix-bundles--item--variation {
					display: grid;
					gap: 1rem;
					grid-template-rows: 1fr auto;

					text-align: center;
					padding: 1rem;
					background-color: var(--wp--preset--color--background-alt);
					border-radius: 1rem;

					.meomix-bundles--item--variation--title {
						font-weight: normal;
						color: var(--wp--preset--color--foreground);
					}
					.meomix-bundles--item--variation--qty {
						--_shop-button-spacing: var(--shop-button-spacing, .5rem);
						--_shop-button-dimension: var(--shop-button-dimension, 2.8rem);
						--_shop-button-radius: var(--shop-button-radius, var(--_shop-button-dimension));
						--_shop-button-background: var(--shop-button-background, #000);
						--_shop-button-foreground: var(--shop-button-foreground, #fff);
						--_shop-button-background-hover: var(--shop-button-background-hover, var(--wp--preset--color--primary));
						--_shop-button-foreground-hover: var(--shop-button-foreground-hover, #fff);
						--_shop-button-outline: var(--shop-button-outline, #fff);
						--_shop-button-outline-size: var(--shop-button-outline-size, 0.5rem);
						--_shop-button-icon-size: var(--shop-button-icon-size, 1.5rem);
						--_shop-button-weight: var(--shop-button-weight, 500);
						--_shop-button-qty-background: var(--shop-button-qty-background, var(--_shop-button-background));
						--_shop-button-qty-foreground: var(--shop-button-qty-foreground, var(--_shop-button-foreground));
						--_shop-button-qty-background-hover: var(--shop-button-qty-background-hover, var(--_shop-button-background-hover));
						--_shop-button-qty-foreground-hover: var(--shop-button-qty-foreground-hover, var(--_shop-button-foreground-hover));
						--qty-size: 2.8rem;
						.meomix-add-to-cart--quantity {
							inline-size: fit-content;
							text-align: center;
							margin: auto;
							.input-text.qty {
								-moz-appearance: textfield;
								inline-size: var(--_shop-button-dimension);
								block-size: var(--_shop-button-dimension);
								line-height: var(--_shop-button-dimension);
								margin: 0 !important;
								padding: 0 !important;
								text-align: center;
								font-size: var(--wp--preset--font-size--medium);
								font-weight: var(--_shop-button-weight);
								font-family: var(--meocommerce-ui--font);
								border: none;
								outline: none;
								background: transparent;
								color: var(--_shop-button-qty-foreground);

								&::-webkit-outer-spin-button,
								&::-webkit-inner-spin-button {
									-webkit-appearance: none;
									margin: 0;
								}
						}
					}
					label {
						display: none;
					}
				}

			}
		}

	}

}