.product-wrapper {
	padding: 0 0 var(--s4) 0;
	margin-top: var(--s4);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"media media title title price"
		"media media attributes attributes price"
		"media media attributes attributes price"
		"text text text text ."
	;
	gap: var(--s4);
}

.product-wrapper__>div {
	background: var(--color-100);
	padding: var(--s2);
	border-radius: var(--s2);
	overflow: hidden;
}

.product-media.content-block {
	padding: 0;
	grid-area: media;
}

.product-price>.prices.content-block {
	position: sticky;
	top: 90px;
}

.price.price-current {
	font-size: var(--font-large);
	font-weight: 600;
}

.price.price-before {
	font-size: var(--font-medium);
}

.product-title {
	grid-area: title;
}

.product-price {
	grid-area: price;
}

.product-price>.prices>section {
	border-radius: var(--s2);
	padding: var(--s2);
	margin-top: var(--s4);
	border: var(--border);
}

.product-price>.prices>section:hover {
	border-color: var(--color-active);
}

.product-price>.prices>section div.price-title {
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: var(--s);
}

.product-price>.prices>section a.w_button {
	color: var(--color-05);
	background-color: var(--color-100);
	margin-bottom: var(--s);
	margin-right: var(--s);
}

.product-price>.prices>section a.w_button.active {
	color: var(--color-100);
	background-color: var(--color-active);
}

.product-price>.prices>section a.w_button.cart-add-v-exists::after {
	content: '\f243';
	font-family: "bootstrap-icons";
	font-size: var(--font-small);
	color: var(--color-100);
	background-color: var(--color-active);
	border-radius: 50%;
	border: var(--s-half) solid var(--color-100);
	position: absolute;
	right: calc(-1 * var(--s2));
	width: var(--s5);
	height: var(--s5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-attributes {
	grid-area: attributes;
}

.product-attributes>section {
	border-bottom: var(--border);
	margin-bottom: var(--s2);
}

.product-attributes span {
	width: inherit;
	display: block;
}

.product-text {
	grid-area: text;
}

@media screen and (max-width: 810px) {
	.product-wrapper {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"media title"
			"media price"
			"attributes attributes"
			"text text"
		;
	}
}


@media screen and (max-width: 480px) {
	.product-wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"media"
			"title"
			"price"
			"attributes"
			"text"
		;
	}
}