@charset "UTF-8";

main>section#categories:has(a),
main>section#categories:not(:has(a))>ul:has(li.category[type="button"]) {
	width: var(--width);
	display: flex;
	flex-flow: var(--catalog-categories-wrap-flex-wrap, row wrap);
	flex-direction: var(--catalog-categories-wrap-flex-direction, 'row');
}

main>section#categories:has(a) {
	gap: var(--gap, 5px);
}

main>section#categories:not(:has(a))>ul:has(li.opened.category[type="button"])>ul {
	border: 2px solid var(--list-border-color, var(--section-border-color));
	border-top: unset;
}

main>section#categories:not(:has(a))>ul:has(li.category[type="button"])>ul {
	/* margin-bottom: var(--gap, 5px); */
	border: 0px solid transparent;
}

main>section#categories ul {
	padding-left: 1.3rem;
	list-style-type: none;
	overflow: hidden;
	width: 100%;
}

main>section#categories>li {
	line-height: 1rem;
}

main>section#categories li {
	/* font-family: "Chalet"; */
}

main>section#categories li.openable {
	/* font-weight: 400; */
}

/* */
main>section#categories ul>li:has(+ ul) {
	z-index: 100;
}

main>section#categories ul>ul {
	--offset: 1rem;
	--padding: 1rem;
	margin-top: calc(var(--offset, 1rem) * -1);
	padding-top: calc(var(--offset, 1rem) + var(--padding, 1rem));
	padding-bottom: var(--padding, 1rem);
	border-radius: 0 0 0.75rem 0.75rem;
	display: flex;
	flex-direction: column;
	/* gap: 0.3rem; */
	color: var(--list-text-color, var(--section-text-color, var(--tg-theme-secondary-bg-color)));
	background: var(--list-background-color, var(--section-background-color, var(--tg-theme-secondary-bg-color)));
}

main>section#categories:not(:has(a))>ul:has(li.category[type="button"]) {
	margin: unset;
	padding: unset;
}

main>section#categories>a.category[type="button"],
main>section#categories>ul>li.category[type="button"] {
	--padding: 0.7rem;
	z-index: unset;
	position: relative;
	width: var(--catalog-categories-buttons-width, calc(50% - var(--padding) * 2));
	height: var(--catalog-categories-buttons-height, 180px);
	/* padding: var(--padding); */
	padding: unset;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid var(--categories-border-color);
	color: var(--categories-text-color, var(--tg-theme-button-text-color));
	/* background-color: var(--categories-background-color, var(--catalog-categories-buttons-background)); */
}

main>section#categories ul>li.category[type="button"].opened+ul+li {
	margin-top: 0;
	transition: margin 0.1s ease-in;
}

main>section#categories ul>li.category[type="button"]:not(.opened)+ul+li {
	margin-top: calc(var(--gap) * -1);
	transition: margin 0.1s ease-out 0.2s;
}

main>section#categories ul>li.category[type="button"]:not(.opened):has(+ ul) {
	transition: border-radius 0.1s ease-out;
}

main>section#categories>ul>li.category[type="button"].opened:has(+ ul) {
	border-radius: 0.75rem 0.75rem 0 0 !important;
	border: 2px solid var(--categories-border-color) !important;
	border-bottom: 2px dashed var(--categories-border-color) !important;
	transition: 0s;
}

main>section#categories ul>ul {
	--offset: 0rem;
	border-radius: 0 0 0.75rem 0.75rem;
}

main>section#categories>ul ul>ul {
	margin-left: var(--gap, 5px);
	width: calc(100% - var(--gap, 5px));
}

main>section#categories>a.category[type="button"]:not(.column):after,
main>section#categories>ul>li.category[type="button"]:not(.column):after {
	z-index: -100;
	position: absoulute;
	left: 0;
	top: 0;
	content: '';
	width: 100%;
	height: 100%;
	filter: brightness(0.8);
	background-color: var(--categories-background-color, var(--tg-theme-button-color));
}

main>section#categories:last-child {
	/* margin-bottom: unset; */
}

/* main>section#categories>a.category[type="button"]:has(>img) {
	min-width: calc(50% - var(--padding) * 2);
	height: 180px;
	padding: unset;
} */

main>section#categories ul>li[type="button"].opened+ul {
	max-height: var(--catalog-categories-buttons-lists-height, 500px);
	opacity: 1;
	transition: border 0s linear, opacity 0.05s ease-in, max-height 0.15s ease-in 0.1s, margin 0s ease-out 0.1s, padding 0s ease-out 0.1s;
}

main>section#categories ul>li[type="button"]:not(.opened)+ul {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding: 0;
	opacity: 0;
	transition: opacity 0.25s ease-out, border 0.1s ease-out, max-height 0.25s ease-out, margin 0s ease-out 0.25s, padding 0.1s ease-out 0.3s;
}

main>section#categories>a.category[type="button"]>img,
main>section#categories>ul>li.category[type="button"]>img {
	position: absolute;
	left: -5%;
	top: -5%;
	width: 110%;
	height: 110%;
	object-fit: cover;
	/* filter: blur(1px); */
	filter: var(--catalog-categories-buttons-images-filter, contrast(1.2) brightness(60%));
}

main>section#categories>a.category[type="button"]>img.right,
main>section#categories>ul>li.category[type="button"]>img.right {
	position: absolute;
	left: unset;
	top: unset;
	width: 100%;
	filter: brightness(0.8) contrast(1.2);
}

main>section#categories>a.category[type="button"]:is(:hover, :focus)>img,
main>section#categories>ul>li.category[type="button"]:is(:hover, :focus)>img {
	filter: unset;
}

/* main>section#categories>a.category[type="button"]:has(>img)>p { */
main>section#categories>a.category[type="button"]>p,
main>section#categories>ul>li.category[type="button"]>p {
	position: absolute;
	left: var(--padding);
	top: var(--catalog-categories-buttons-texts-top, var(--padding));
	bottom: var(--catalog-categories-buttons-texts-bottom, var(--padding));
	right: var(--padding);
	margin: unset;
	width: calc(var(--catalog-categories-buttons-texts-width, 10rem) - 0.7rem * 2);
	border-radius: 0.75rem;
	color: var(--catalog-categories-buttons-texts-title-color, var(--tg-theme-text-color));
	/* background: var(--tg-theme-hint-color); */
}

main>section#categories>a.category[type="button"]>div.filter:not(:has(+.separator.gradient+img.right)),
main>section#categories>ul>li.category[type="button"]>div.filter:not(:has(+.separator.gradient+img.right)) {
	z-index: 100;
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--catalog-categories-buttons-background, var(--categories-background-color, var(--tg-theme-button-color)));
	mix-blend-mode: color-burn;
}

main>section#categories>a.category[type="button"]>div.filter:has(+.separator.gradient+img.right),
main>section#categories>ul>li.category[type="button"]>div.filter:has(+.separator.gradient+img.right) {
	z-index: 100;
	content: '';
	position: absolute;
	left: 0;
	width: var(--catalog-categories-buttons-texts-width, 10rem);
	height: 100%;
	background-color: var(--catalog-categories-buttons-background, var(--categories-background-color, var(--tg-theme-button-color)));
	mix-blend-mode: color-burn;
}

main>section#categories>a.category[type="button"]>div.separator.gradient:has(+img.right),
main>section#categories>ul>li.category[type="button"]>div.separator.gradient:has(+img.right) {
	--background-color: var(--catalog-categories-buttons-background, var(--categories-background-color, var(--tg-theme-button-color)));
	z-index: 100;
	content: '';
	position: absolute;
	right: 0;
	width: calc(100% - var(--catalog-categories-buttons-texts-width, 10rem));
	height: 100%;
	background: linear-gradient(90deg, var(--background-color) 0%, transparent var(--catalog-categories-buttons-separator-width, 100%));
	mix-blend-mode: color-burn;
}

main>section#categories>a.category[type="button"]>p,
main>section#categories>ul>li.category[type="button"]>p {
	z-index: 100;
	padding: 0 calc(var(--padding) / 2);
}

main>section#categories>a.category[type="button"]>p:not(.background),
main>section#categories>ul>li.category[type="button"]>p:not(.background) {
	bottom: 10px;
	width: 100%;
	font-family: "Geologica";
	font-weight: 300;
	font-size: 1.2rem;
	color: var(--text-color);
}

main>section#categories>a.category[type="button"]>p.background,
main>section#categories>ul>li.category[type="button"]>p.background {
	padding: 8px calc(var(--padding, 0.7rem) * 1.3);
	width: min-content;
}

main>section#categories>a.category[type="button"]>p.background:after,
main>section#categories>ul>li.category[type="button"]>p.background:after {
	z-index: -100;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 0.75rem;
	background-color: var(--tg-theme-button-color);
	box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
}

main>section#filters {
	--filters-height: 2rem;
	width: var(--width);
	max-height: var(--filters-height);
	display: flex;
	align-items: start;
}

main>section#products {
	--column: calc((100% - var(--gap)) / 2);
	width: var(--width);
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(2, var(--column));
	grid-auto-flow: row dense;
}

main>section#products>div.column {
	--background-color: var(--section-background-color, var(--tg-theme-section-bg-color));
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

main>section#products>div.column>article.product {
	position: relative;
	width: 100%;
	height: var(--catalog-products-list-height);
	display: flex;
	flex-grow: 0;
	flex-direction: column;
	border-radius: 0.75rem;
	overflow: clip;
	cursor: pointer;
	backdrop-filter: brightness(0.7);
	background-color: var(--background-color);
}

main>section#products>div.column>article.product:is(:hover, :focus) {
	/* flex-grow: 0.1; */
	/* background-color: var(--tg-theme-section-bg-color); */
}

main>section#products>div.column>article.product:is(:hover, :focus)>* {
	transition: 0s;
}

main>section#products>div.column>article.product:not(:is(:hover, :focus))>* {
	transition: 0.2s ease-out;
}

main>section#products>div.column>article.product>a>img:first-of-type {
	--border: 2px;
	width: calc(100% - var(--border) * 2);
	height: var(--catalog-products-list-image-height);
	object-fit: var(--catalog-products-list-image-object-fit);
	image-rendering: auto;
	border-radius: 0.75rem;
	border: var(--border) solid var(--button-border-color);
}

main>section#products>div.column>article.product>a>img:first-of-type+* {
	margin-top: auto;
}

main>section#products>div.column>article.product>a>p.title {
	z-index: 50;
	margin: unset;
	padding: 4px 8px 8px;
	font-family: "Geologica";
	font-weight: 200;
	font-size: 0.9rem;
	overflow-wrap: anywhere;
	hyphens: auto;
	color: var(--text-color, var(--tg-theme-text-color));
}

main>section#products>div.column>article.product>a>p.title>span {
	margin-top: 0.2rem;
	display: block;
	/* font-family: 'Geologica';
	font-weight: 200; */
	color: var(--tg-theme-hint-color);

	&:is(.metadata) {
		font-family: 'Geologica';
		font-weight: 500;
		font-size: 0.7rem;
	}

	&:is(.description) {
		font-family: "Geologica";
		font-weight: 400;
		font-size: 0.6rem;
	}
}

main>section#products>div.column>article.product>div[data-product="buttons"]:last-of-type {
	z-index: 100;
	position: absolute;
	margin-top: auto;
	width: 100%;
	height: 33px;
	box-sizing: border-box;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid var(--button-cart-border-color, var(--button-border-color));
}

/* main>section#products>div.column>article.product[data-product-amount]:not(:is([data-product-amount="0"], [data-product-amount="1"]))>div[data-product="buttons"]:last-of-type { */
main>section#products>div.column>article.product[data-product-amount]:not(:is([data-product-amount="0"]))>div[data-product="buttons"]:last-of-type {
	container-type: inline-size;
	container-name: product-buttons;
}

main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"] {
	padding: 0;
	flex-grow: 1;
	color: var(--button-cart-text-color, var(--button-text-color, var(--tg-theme-button-text-color)));
	background-color: var(--button-cart-background-color, var(--button-background-color, var(--tg-theme-button-color)));

}

/* main>section#products>div.column>article.product:is([data-product-amount="0"], [data-product-amount="1"])>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parameter="amount"], */
main>section#products>div.column>article.product:is([data-product-amount="0"])>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parameter="amount"],
main>section#products>div.column>article.product[data-product-amount="0"]>div[data-product="buttons"]>button:is([data-product-button="write"], [data-product-button="delete"]) {
	display: none;
}

main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parameter="amount"]:after {
	content: '*';
	margin: 0 0.2rem;
}

main>section#products>div.column>article.product[data-product-amount]:not([data-product-amount="0"])>div[data-product="buttons"]>button[data-product-button="toggle"] {
	background-color: var(--button-cart-added-background-color, var(--tg-theme-button-color));
}

main>section#products>div.column>article.product[data-product-amount]:not([data-product-amount="0"])>div[data-product="buttons"] {
	/* hehe */
	filter: var(--button-cart-added-background-color, hue-rotate(calc(120deg + var(--hue-rotate-offset, 0deg))));
}

main>section#products>div.column>article.product>div[data-product="buttons"]>button {
	color: var(--button-cart-added-text-color, var(--tg-theme-button-text-color));
	background-color: var(--button-cart-added-background-color, var(--tg-theme-button-color));
}

@container product-buttons (max-width: 200px) {
	main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span:is([data-product-parameter="cost"], [data-product-parameter="currency"]) {
		display: none;
	}

	main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parameter="amount"]:after {
		content: unset;
	}
}