@charset "UTF-8";

main>section[data-section="catalog"] {
	width: var(--width);
	display: flex;
	flex-flow: row wrap;
	gap: var(--gap, 5px);
}

main>section[data-section="catalog"][data-catalog-type="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[data-section="catalog"][data-catalog-type="categories"]:last-child {
	/* margin-bottom: unset; */
}

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

main>section[data-section="catalog"][data-catalog-type="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[data-section="catalog"][data-catalog-type="categories"]>a.category[type="button"]:is(:hover, :focus)>img {
	filter: unset;
}

main>section[data-section="catalog"][data-catalog-type="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-secondary-bg-color);
}

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

main>section[data-section="catalog"][data-catalog-type="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[data-section="catalog"][data-catalog-type="products"]>div.column {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product {
	position: relative;
	width: 100%;
	display: flex;
	flex-grow: 0;
	flex-direction: column;
	border-radius: 0.75rem;
	overflow: clip;
	backdrop-filter: brightness(0.7);
	cursor: pointer;
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product:is(:hover, :focus) {
	/* flex-grow: 0.1; */
	/* background-color: var(--tg-theme-secondary-bg-color); */
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product:is(:hover, :focus)>* {
	transition: 0s;
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product:not(:is(:hover, :focus))>* {
	transition: 0.2s ease-out;
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product>a {
	display: contents;
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product>a>img:first-of-type {
	width: 100%;
	height: 100%;
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product>a>img:first-of-type+* {
	margin-top: auto;
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product>a>p.title {
	z-index: 50;
	margin: unset;
	padding: 4px 8px;
	font-size: 0.9rem;
	font-weight: bold;
	overflow-wrap: anywhere;
	hyphens: auto;
	color: var(--tg-theme-text-color);
	background-color: var(--tg-theme-secondary-bg-color);
}

main>section[data-section="catalog"][data-catalog-type="products"]>div.column>article.product>button:last-of-type {
	z-index: 100;
	height: 33px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--tg-theme-button-text-color);
	background-color: var(--tg-theme-button-color);
}

main>section[data-section="cart"] {
	--diameter: 4rem;
	z-index: 999;
	right: 5vw;
	bottom: 5vw;
	position: fixed;
	width: var(--diameter);
	height: var(--diameter);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 100%;
	background-color: var(--tg-theme-button-color);
}

main>section[data-section="cart"]>i.icon.shopping.cart {
	top: -1px;
	color: var(--tg-theme-button-text-color);
}

main>section[data-section="filters"] {
	max-height: 2.5rem;
	display: flex;
	align-items: start;
}
