@charset "UTF-8";

main>section[data-section="catalog"] {
	width: var(--width);
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	gap: var(--gap, 5px);
	/* justify-content: space-between; */
	/* justify-content: space-evenly; */
	/* background-color: var(--tg-theme-secondary-bg-color); */
}

main>section[data-section="catalog"]:last-child {
	margin-bottom: unset;
}

main>section[data-section="catalog"]>a.category[type="button"] {
	height: 23px;
	padding: 8px 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	border-radius: 0.75rem;
	color: var(--tg-theme-button-text-color);
	background-color: var(--tg-theme-button-color);
}

main>section[data-section="catalog"]>article.product {
	/* --product-height: 200px; */
	--product-height: 220px;
	--title-font-size: 0.9rem;
	--title-height: 1.5rem;
	--button-height: 33px;
	position: relative;
	/* width: calc((100% - var(--gap) * 2) / 3); */
	width: calc((100% - var(--gap)) / 2);
	height: var(--product-height);
	display: flex;
	flex-grow: 0;
	flex-direction: column;
	white-space: nowrap;
	border-radius: 0.75rem;
	overflow: clip;
	backdrop-filter: brightness(0.7);
	cursor: pointer;
}

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

main>section[data-section="catalog"]>article.product:hover>* {
	transition: 0s;
}

main>section[data-section="catalog"]>article.product:not(:hover)>* {
	transition: 0.2s ease-out;
}

main>section[data-section="catalog"]>article.product>img:first-of-type {
	z-index: -50;
	position: absolute;
	bottom: var(--button-height);
	/* bottom: calc(var(--button-height) + var(--title-height)); */
	width: 100%;
	/* height: 100%; */
  height: calc(var(--product-height) - var(--button-height));
	object-fit: cover;
}

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

main>section[data-section="catalog"]>article.product>a {
	padding: 4px 8px 4px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
	backdrop-filter: brightness(0.4) contrast(1.2);
	color: var(--text-light, var(--tg-theme-text-color));
}

main>section[data-section="catalog"]>article.product>a.title {
	padding: 0 8px 0 8px;
	height: var(--title-height);
	min-height: var(--title-height);
	line-height: var(--title-height);
	font-size: var(--title-font-size);
}

main>section[data-section="catalog"]>article.product:hover>a.title {
	backdrop-filter: brightness(0.35) contrast(1.2);
}

main>section[data-section="catalog"]>article.product>a+ :is(a, small) {
	padding: 0px 8px 0 8px;
}

main>section[data-section="catalog"]>article.product>small {
	padding: 3px 8px 0 8px;
	white-space: normal;
	word-break: break-all;
	font-size: 0.7rem;
	backdrop-filter: brightness(0.4) contrast(1.2);
	color: var(--text-light, var(--tg-theme-text-color));
}

main>section[data-section="catalog"]>article.product>small.description {
	overflow: hidden;
}

main>section[data-section="catalog"]>article.product:hover>small.description {
	height: calc(var(--product-height) - var(--title-height) - var(--button-height) - 6px);
}

main>section[data-section="catalog"]>article.product:not(:hover)>small.description {
	height: 0;
	padding: 0 8px 0px 8px !important;
}

main>section[data-section="catalog"]>article.product>*:has(+ button:last-of-type) {
	--offset-before-button: 9px;
	padding: 4px 8px 13px 8px;
}

main>section[data-section="catalog"]>article.product>button:last-of-type {
	height: var(--button-height);
	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);
}
