.product{
	border-radius: var(--m_gap);
	box-shadow: var(--shadow);
	box-sizing: border-box;
	display: grid;
	grid-gap: var(--s_gap);
	grid-template-columns: 100%;
	grid-template-areas: "a" "b";
	padding: var(--s_gap)}
.product.green{
	background-color: var(--green_3)}
.product.white{
	background-color: white}
.product.yellow{
	background-color: var(--yellow_3)}
	.product > img{
		product-fit: cover;
		aspect-ratio: 9/10;
		border-radius: var(--m_gap);
		grid-area: a;
		width: 100%}
	.product > .horizontal_menu{
		align-self: start;
		display: grid;
		grid-area: a;
		justify-self:end;
		margin: var(--s_gap)}
	.product > .attributes{
		align-self: end;
		display: grid;
		grid-area: a;
		grid-auto-flow: column;
		grid-gap: var(--s_gap);
		justify-self:start;
		margin: var(--m_gap)}
		.product > .attributes > div{
			align-items: center;
			border-radius: var(--m_gap);
			box-sizing: border-box;
			color: var(--green_3);
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: min-content;
			grid-gap: var(--s_gap);
			font-size: var(--s_font);
			background-color: var(--gray_3);
			padding: var(--xs_gap) var(--s_gap);
			font-size: var(--l_font);
			font-weight: bold;}
			.product > .attributes > div > svg{
				fill: var(--green_3);
				height: var(--l_font);
				width: var(--l_font)}
	.product > .details{
		border-radius: var(--m_gap);
		box-sizing: border-box;
		background-color: var(--gray_3);
		display: grid;
		grid-area: b;
		grid-gap: var(--xs_gap);
		padding: var(--s_gap) var(--m_gap)}
		.product > .details > .title{
			font-size: var(--m_font);
			font-weight: bold}
		.product > .details > .shop{
			font-size: var(--s_font)}
.zero_product{
	aspect-ratio: 5/7;
	background: var(--yellow_3);
	border-radius: var(--m_gap);
	box-shadow: var(--shadow);
	box-sizing: border-box;
	display: grid;
	place-items:center}