@charset "UTF-8";

section#window>div.product.page {
	--padding: 2rem;
	--card-menu-height: 3.2rem;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: scroll;
	-ms-overflow-style: none;
	background-color: var(--section-background-color, var(--tg-theme-bg-color));
}

section#window>div.product.page::-webkit-scrollbar {
	display: none;
}

section#window>div.product.page>nav#menu_top {
	position: fixed;
	top: 0;
	right: 0;
	padding: 0.5rem 1rem;
	display: flex;
	justify-content: end;
}

section#window>div.product.page>nav#menu_top>a[type="button"] {
	background-color: unset;
}

section#window>div.product.page>nav#menu_top>a[type="button"] {
	color: var(--hint-text-color, var(--button-text-color, var(--tg-theme-hint-color)));

	&:has(>i.icon.share) {
		padding-left: 12px;
		padding-right: 22px;
	}

	&:has(>i.icon.pen) {
		padding-top: 7px;
		padding-right: 12px;
	}
}

section#window>div.product.page>div.images {
	--height: var(--catalog-products-cards-images-height, var(--system-catalog-products-cards-images-height), 10rem);
	z-index: var(--catalog-products-cards-images-z-index);
	position: var(--catalog-products-cards-images-position);
	width: 100%;
	height: var(--height);
	min-height: var(--height);
	max-height: var(--height);
	display: flex;
	overflow: hidden;
	cursor: zoom-in;
	/* border-radius: 0 0 var(--catalog-products-cards-images-wrap-border-radius) var(--catalog-products-cards-images-wrap-border-radius); */
	transition: 0s;
}

section#window>div.product.page>div.images:not(.extend):has(> img:last-child:nth-child(2)) {
	padding: 0rem 1rem;
}

section#window>div.product.page>div.images.extend {
	z-index: 9999999;
	left: 0;
	top: 0;
	margin: unset !important;
	position: absolute;
	width: 100vw;
	max-width: unset;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	align-items: center;
	cursor: default;
	overflow: unset;
	transition: 0s;
}

section#window>div.product.page:has(>div.images.extend)>:not(div.images.extend) {
	filter: brightness(50%);
}

section#window>div.product.page>div.images>img {
	margin-right: var(--catalog-products-cards-images-margin-right, unset);
	min-width: 150px;
	max-width: var(--catalog-products-cards-images-max-width, unset);
	width: auto;
	flex-shrink: 0;
	flex-grow: 0;
	object-fit: cover;
	image-rendering: auto;
	border-radius: var(--catalog-products-cards-images-border-radius, unset);
	transition: 0s;
}

section#window>div.product.page>div.images.extend>img {
	height: 100vh;
	object-fit: contain;
	border-radius: 0.75rem;
}

section#window>div.product.page>div.images>img:last-child {
	margin-right: unset;
}

section#window>div.product.page>div.images>img.extend {
	z-index: 9999999;
	left: 0;
	top: 0;
	margin: unset !important;
	position: absolute;
	width: 100vw;
	max-width: unset;
	height: 100vh;
	object-fit: contain;
	border-radius: unset;
	transition: 0s;
	cursor: zoom-out;
}

section#window>div.product.page>div.body {
	position: relative;
	margin-top: var(--catalog-products-cards-images-height);
	width: 100%;
	box-sizing: border-box;
	padding: 0 var(--padding);
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 0.6rem;
	background-color: var(--background-color, var(--tg-theme-bg-color));
}

section#window>div.product.page>div.body>svg.inner.border {
	z-index: 1000;
	position: absolute;
	top: calc(var(--padding) * -1);
	left: 0;
}

section#window>div.product.page>div.body>svg.inner.border>rect:last-of-type {
	fill: var(--background-color, var(--tg-theme-bg-color));
}

section#window>div.product.page>div.body>p.cost {
	--currency-offset: 0.3rem;
	margin: unset;
	margin-top: 0.6rem;
	padding: unset;
	font-family: "Cygre";
	font-size: 1.3rem;
	font-weight: 800;
}

section#window>div.product.page>div.body>h3 {
	margin: unset;
	min-height: 23px;
	padding: 0.1rem 0 0;
	display: inline-flex;
	gap: 1rem;
	font-size: 1rem;
	font-weight: normal;
}

section#window>div.product.page>div.body>h3+div.parameters {
	margin: -0.2rem 0 1rem 0;
	display: flex;
	gap: 0.6rem;
	font-size: small;
	color: var(--hint-text-color, var(--button-text-color, var(--tg-theme-hint-color)));
}

section#window>div.product.page>div.body>h3>span.name {
	text-overflow: ellipsis;
	overflow: hidden;
}

section#window>div.product.page>div.body>section.select:last-of-type {
	margin-bottom: 0.7rem;
}

section#window>div.product.page>div.body>section.select>input[type="radio"]:has(+label) {
	display: none;
}

section#window>div.product.page>div.body>section.select:has(input[type="radio"]) {
	--padding: 0.2rem;
	display: inline-flex;
	flex-flow: row wrap;
	padding: var(--padding, 0.2rem) 0;
	gap: 1rem;
}

section#window>div.product.page>div.body>section.select.colors {
	--size: 2.2rem;
	--size-selected: 2.8rem;
	margin-top: -0.5rem;
	height: calc(var(--size-selected) + var(--padding, 0.2rem) * 2);
	/* box-sizing: border-box; */
	align-items: end;
}

section#window>div.product.page>div.body>section.select.colors>label {
	width: var(--size);
	height: var(--size);
	cursor: pointer;
	border-radius: 100%;
	border: 3px solid var(--button-background-color, var(--hint-background-color, #000));
	background-color: var(--color, transparent);
	transition: width 0.2s ease-out, height 0.2s ease-out;
}

section#window>div.product.page>div.body>section.select.colors>label:hover {
	border: 3px solid var(--button-hover-background-color, var(--button-background-color, var(--hint-hover-background-color, #000)));
	filter: brightness(1.2);
}

section#window>div.product.page>div.body>section.select.colors>label:is(:focus, :active) {
	border: 3px solid var(--button-active-background-color, var(--button-background-color, var(--hint-active-background-color, #000)));
	filter: brightness(0.9);
}

section#window>div.product.page>div.body>section.select.colors>input[type="radio"]:checked+label {
	--size: var(--size-selected);
	border: 3px solid var(--button-selected-background-color, var(--button-background-color, var(--hint-selected-background-color, #000)));
	transition: width 0.1s ease-in, height 0.1s ease-in;
}

section#window>div.product.page>div.body>section.select.sizes>label {
	padding: 0.4rem 0.8rem;
	font-size: small;
	cursor: pointer;
	border-radius: 0.75rem;
	color: var(--button-text-color, var(--hint-text-color));
	background-color: var(--button-background-color, var(--hint-background-color));
}

section#window>div.product.page>div.body>section.select.sizes>label:hover {
	background-color: var(--button-hover-background-color, var(--button-background-color, var(--hint-hover-background-color)));
	filter: brightness(1.2);
}

section#window>div.product.page>div.body>section.select.sizes>label:is(:focus, :active) {
	background-color: var(--button-active-background-color, var(--button-background-color, var(--hint-active-background-color)));
	filter: brightness(0.9);
}

section#window>div.product.page>div.body>section.select.sizes>input[type="radio"]:checked+label {
	background-color: var(--button-selected-background-color, var(--button-background-color, var(--hint-selected-background-color)));
}

section#window>div.product.page>div.body>span.title:has(+p.unfoldable) {
	--padding: 0.2rem;
	cursor: pointer;
	padding: 0 var(--padding);
	width: calc(100% - var(--padding) * 2);
	height: 1.6rem;
	display: inline-flex;
	justify-content: space-between;
	border-bottom: 1px solid transparent;
	transition: border-bottom 0.2s ease-out;
}


section#window>div.product.page>div.body>span.title:has(+p.unfoldable)>i.icon:last-child {
	rotate: 0deg;
	transition: rotate 0.1s ease-out;
}

section#window>div.product.page>div.body>span.title.unfolded:has(+p.unfoldable)>i.icon:last-child {
	rotate: 90deg;
	transition: rotate 0.1s ease-in;
}

section#window>div.product.page>div.body>span.title.unfolded:has(+p.unfoldable) {
	border-bottom: 1px solid var(--tg-theme-hint-color);
	transition: border-bottom 0.1s ease-in;
}

section#window>div.product.page>div.body>p {
	margin-bottom: unset;
	min-height: 1rem;
	padding: 0 1rem;
}

section#window>div.product.page>div.body>p.unfoldable {
	margin: unset;
	padding: unset;
	font-size: small;
	overflow: hidden;
	color: var(--hint-text-color, var(--tg-theme-hint-color));
}

section#window>div.product.page>div.body>span.title:not(.unfolded)+p.unfoldable {
	margin-bottom: 0rem;
	min-height: unset;
	height: 0px;
	transition: height 0.2s ease-out, margin-bottom 0.1s ease-out 0.2s;
}

section#window>div.product.page>div.body>span.title.unfolded+p.unfoldable {
	margin-bottom: 1rem;
	max-height: fit-content;
	height: 1000px;
	transition: height 0.1s ease-in, margin-bottom 0.1s ease-in 0.1s;
}

section#window>div.product.page>div.body>p:last-of-type {
	margin-bottom: revert;
}

section#window>div.product.page>div.footer {
	container-type: inline-size;
	container-name: window-footer;
	padding: 1rem var(--padding) calc(1rem + var(--card-menu-height) + var(--menu-height));
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	gap: 0.8rem;
	background-color: var(--background-color, var(--tg-theme-bg-color));
}

section#window>div.product.page>div.footer>small.dimensions {
	color: var(--tg-theme-section-header-text-color);
}

section#window>div.product.page>div.footer>small.weight {
	color: var(--tg-theme-section-header-text-color);
}

section#window>div.product.page>div.footer>button.buy {
	width: 100%;
	height: 3.5rem;
}

section#window>div.product.page>nav.menu:last-of-type {
	position: fixed;
	left: 0;
	margin: 0 calc(var(--padding) / 2);
	width: calc(100% - var(--padding));
	height: var(--card-menu-height);
	display: flex;
	gap: 0.6rem;
}

section#window>div.product.page>nav.menu:last-of-type>a[type="button"] {
	height: auto;
	border-radius: 0.75rem;
	border: 1px solid var(--button-cart-border-color);
	-webkit-box-shadow: 0px 0px 40px -20px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 40px -20px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 40px -20px rgba(0, 0, 0, 1);
}

section#window>div.product.page>nav.menu:last-of-type>a[type="button"]#menu_add {
	flex-grow: 1;
}

section#window>div.product.page>nav.menu:last-of-type>a[type="button"]#menu_add.added {
	color: var(--button-cart-added-text-color);
	background-color: var(--button-cart-added-background-color);
}

section#window>div.product.page>nav.menu:last-of-type:not(.hide) {
	bottom: calc(1rem + var(--menu-height));
	transition: bottom 0.1s linear;
}

section#window>div.product.page>nav.menu:last-of-type.hide {
	bottom: 1rem;
	transition: bottom 0.2s ease-out;
}

@container window-footer (max-width: 350px) {
	section#window>div.product.page>div.footer>small:first-of-type {
		margin-left: auto;
	}

	section#window>div.product.page>div.footer>small:last-of-type {
		margin-right: auto;
	}

	section#window>div.product.page>div.body>p.cost {
		margin: unset;
		width: 100%;
		text-align: center;
	}
}