@charset "UTF-8";

main>section#categories {
	width: var(--width);
	display: flex;
	flex-flow: row wrap;
	gap: var(--gap, 5px);
}

main>section#categories>a.category[type="button"] {
	--padding: 0.7rem;
	position: relative;
	height: 23px;
	padding: var(--padding);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	overflow: hidden;
	border-radius: 0.75rem;
	color: var(--tg-theme-button-text-color);
	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>a.category[type="button"]>img {
	position: absolute;
	left: -5%;
	top: -5%;
	width: 110%;
	height: 110%;
	object-fit: cover;
	/* filter: blur(1px); */
	filter: brightness(60%);
}

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

main>section#categories>a.category[type="button"]:has(>img)>p {
	position: absolute;
	left: var(--padding);
	bottom: var(--padding);
	right: var(--padding);
	margin: unset;
	width: min-content;
	border-radius: 0.75rem;
	background: var(--tg-theme-section-bg-color);
	box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.3);
}

main>section#categories>a.category[type="button"]>p {
	z-index: 100;
	padding: 8px 16px;
}

main>section#filters {
	width: var(--width);
	max-height: 2.5rem;
	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 {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

main>section#products>div.column>article.product {
	position: relative;
	width: 100%;
	display: flex;
	flex-grow: 0;
	flex-direction: column;
	border-radius: 0.75rem;
	overflow: clip;
	cursor: pointer;
	backdrop-filter: brightness(0.7);
	background-color: var(--tg-theme-section-bg-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 {
	width: 100%;
	image-rendering: auto;
	border-radius: 0.75rem;
	box-shadow: 0px 5px 70px 20px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 5px 70px 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 5px 70px 20px rgba(0, 0, 0, 0.3);
}

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-size: 0.9rem;
	font-weight: bold;
	overflow-wrap: anywhere;
	hyphens: auto;
}

main>section#products>div.column>article.product>a>p.title>span {
	color: var(--tg-theme-hint-color);
}

main>section#products>div.column>article.product>div[data-product="buttons"]:last-of-type {
	z-index: 100;
	height: 33px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 0.75rem;
}

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 {
	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;
}

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[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"] {
	filter: hue-rotate(calc(120deg + var(--hue-rotate-offset, 0deg)));
}

@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;
	}
}
