.category-title {
	flex: 0 0 auto;
	grid-area: title;
	padding: 0 0.5rem;
	width: 100%;
	#filters-toggle {
		font-size: 24px;
		float: right;
	}
}

.products_panel {
	article {
		--flow-space: 4em;
	}
}

.products-list {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	.cat-title {
		grid-column: 1 / -1;
		margin-top: 2rem;
		width: 100%;
		&:first-of-type {
			margin-top: 0;
		}
	}
}

.product {
	/*border: 1px solid #888;*/
	display: flex;
	flex-flow: column nowrap;
	padding: 0;
	position: relative;
	width: 100%;
	.woocommerce-LoopProduct-link {
		display: flex;
		flex: 1 1 auto;
		flex-flow: column nowrap;
		justify-content: space-between;
		text-decoration: none;
		img {
			display: block;
			flex: 0 0 auto;
			margin: 0 auto;
			max-height: 100%;
			min-width: 100%;
			object-fit: cover;
			/*height: 210px;*/
		}
		.product-details {
			align-items: end;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			.product-attribute {
				display: block;
				color: var(--theme-grey);
				font-family: var(--font-roboto);
				font-size: 16px;
			}
			.product-name {
				color: #000;
				flex: 1 1 auto;
				font-family: var(--font-bank);
				font-size: 28px;
				font-weight: 200;
				margin: 0;
				overflow-wrap: break-word;
				padding: 4px;
				text-align: left;
				width: 60%;
			}
			.product-price {
				display: flex;
				flex: 0 0 auto;
				flex-flow: column nowrap;
				justify-content: space-between;
				padding: 0 0.25rem;
				text-align: right;
				.price-wrapper {
					color: var(--theme-grey);
				}
				.amount {
					color: #000;
					display: inline-block;
					font-size: 1.5rem;
					margin-left: 0.5rem;
				}
				.sku {
					color: #000;
					font-size: 0.8rem;
					font-style: italic;
					.low-stock {
						color: red;
					}
				}
			}
		}

		.price {
			font-size: 0.9rem;
			height: 60px;
			margin: 0;
			position: relative;
			@media screen and (min-width: 1024px) {
				font-size: 1rem;
			}
			del {
				display: inline;
			}
			.price-wrapper {
				padding: 0 0.25rem;
				flex: 0 0 auto;
			}
		}
	}
	.flash {
		position: absolute;
		right: 0;
		top: 0;
		.label {
			color: white;
			display: block;
			font-weight: bold;
			margin: 0;
			text-transform: uppercase;
		}
	}
	.sizes {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		left: 10px;
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 250px;
		transition: all 0.3s;
		z-index: 400;
		li {
			background: rgba(0, 0, 0, 0.5);
			border: 1px solid #ccc;
			color: white;
			flex: 0 0 auto;
			font-size: 12px;
			line-height: 32px;
			margin: 1px;
			padding: 0;
			text-align: center;
			transition: all 0.3s;
			width: 32px;
			&:hover {
				background: rgba(255, 0, 0, 0.8);
			}
			a {
				color: white;
				text-decoration: none;
			}
		}
	}
}

.price {
	font-size: 1.2rem;
	margin: 0 0 0.5rem;
	width: 100%;
	del {
		color: #ccc;
		display: block;
		font-size: 0.8rem;
	}
	ins {
		background: none;
		color: #000;
	}
}

.widget_layered_nav {
	width: 100%;
	h2 {
		margin: 0;
		text-align: left;
		i {
			margin-left: 0.25rem;
		}
	}
	ul {
		display: flex;
		flex-flow: row wrap;
		list-style: none;
		margin: 0 0 1rem;
		padding: 0;
		transition: all 0.5s ease-in-out;
		width: 100%;
		li {
			flex: 1 1 auto;
			font-family: var(--font-bank);
			font-weight: 200;
			margin: 0 0 0.2rem;
			padding: 0.25rem;
			padding-left: 2rem;
			position: relative;
			width: 100%;
			a {
				color: #333;
				text-decoration: none;
			}
		}
		li.chosen {
			background: var(--theme-gold);
			color: black;
			a {
				color: black;
			}
			&::before {
				font: var(--fa-font-solid);
				content: "\f00c";
				left: 4px;
				position: absolute;
				top: 8px;
			}
		}
	}
}

.widget_layered_nav_filters,
.widget_product_categories
{
	width: 100%;
	h2 {
		margin: 0;
		text-align: left;
		i {
			margin-left: 0.25rem;
		}
	}
	ul {
		display: flex;
		flex-flow: row wrap;
		list-style: none;
		margin: 0 0 1rem;
		padding: 0;
		transition: all 0.5s ease-in-out;
		width: 100%;
		li {
			flex: 1 1 auto;
			margin: 0 0 0.2rem;
			padding: 0.25rem;
			width: 50%;
			width: 100%;
			a {
				display: block;
				text-decoration: none;
			}
		}
	}
}
