.content-banner {
	background: linear-gradient(90deg, var(--color-bg-blue-dark-ultra) 0%, #2974a8 100%);
}

.content-banner > .banner-title {
	padding:20px;
	width:100%;
}

.content-banner h2 {
	margin:0;
	font-size:1.5em;
	font-weight:300;
	color:var(--color-text-white);
}

.list-container {
	display:flex;
	height:100%;
	padding:20px;
}

.list-bar {
	position:sticky;
	top:60px;
	padding:0 35px;
	width:100%;
	height:50px;
	background-color:#3385bd;
	transition: background-color 0.3s ease;
	z-index:3;
	color:var(--color-text-white);
	display:flex;
	gap:20px;
	font-family:'Roboto', Arial;
	justify-content: space-between;
}

.list-bar > nav {
	display:flex;
	gap:20px;
	align-items:center;
}

.list-bar .btn {
	background-color:transparent;
	color:var(--color-text-white, #fff);
	padding:0px;
	font-weight:700;
	opacity:0.8;
	transition:opacity 0.2s ease-in-out;
}

.list-bar .btn:hover {
	opacity:1.0;
}

.list-bar[data-stuck="true"] {
	background-color:var(--color-gray-darker);
}

.list-bar[data-stuck="true"]::after {
	
}

.list-filter {
	display:none;
}

.list-products {
	flex:1;
	padding:0;
}

ul.product-items-container {
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	width:100%;
	gap:20px;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

ul.product-items-container > li {
	padding:0;
}

ul.product-items-container > li > a {
	display:flex;
	flex-direction: row;
	align-items:center;
	color:var(--color-gray-darker);
	gap:10px;
}

ul.product-items-container > li:hover {
	cursor:pointer;
}

ul.product-items-container > li > a > .media { width:180px; aspect-ratio:1/1; position:relative;max-width:180px; }
ul.product-items-container > li > a > .media > img {
	/*width: 100%;
 	max-width: 200px;
 	max-height: 160px;
  	object-fit: cover;*/

	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	will-change: transform;
	opacity:0;
	transition: transform 0.3s ease, opacity .25s ease; /* smooth */
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased; /* Safari quirk */
}

ul.product-items-container > li > a > .media > img.loaded { opacity:1; }
ul.product-items-container > li > a > .meta {
	flex:1;
}
ul.product-items-container > li > a > .meta > .part {
	font-size: 1em;
  	font-weight: bold;
}

ul.product-items-container > li > a > .meta > .name {
	font-size:1em;
	font-family:'Roboto',Arial;
	font-weight:400;
}

ul.product-items-container > li > a > .meta > .name.brand {
	font-size:1.5em;
	font-weight:700;
}

ul.product-items-container > li > a > .meta > .desc {
	font-size:1em;
}

ul.product-items-container > li > a > .meta > .grit {
	display:flex;
	flex-wrap: wrap;
	gap:5px;
	margin-top:10px;
	font-family:'Roboto',Arial;
}

ul.product-items-container > li > a > .meta > .grit > span.grit-item {
	background:#eee;padding:1px 6px 1px 4px;border-radius:3px;
	font-style:italic;
	font-weight:bold;
	font-size:0.8em;
	min-width:55px;
	color:#888;
	transition: background-color 0.3s ease, color 0.3s ease;
}

ul.product-items-container > li > a > .meta > .grit > span.grit-item:hover {
	background:#ccc;
	color:#555;
}

ul.product-items-container > li:hover img {
	transform: translateY(-8px);
}

@media only screen and (min-width: 576px) {
	.content-banner > .banner-title {
		padding:35px;
	}
	
	.content-banner h2 {
		font-size:2.5em;
	}

	.list-bar {
		top:79px;
	}

	.list-filter {
		width:320px;
		padding:0 35px 0 0;
		border-right:2px solid var(--color-bg-black-30);
		position:sticky;
		top:165px;
		display:flex;
	}

	.list-products {
		padding:0 0 0 35px;
	}

	.list-container {
		padding:35px;
	}
}


/* Skeleton */
.skeleton::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#eee 25%,#e3e3e3 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.2s infinite; }
.skeleton.block { border-radius:8px; height:12px; background:#eee; position:relative; overflow:hidden; }
.skeleton.block + .skeleton.block { margin-top:8px; }
.skeleton.block.t1 { width:60%; height:14px; }
.skeleton.block.t2 { width:90%; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }


/* Optional nice touch: fade in the whole card if you like */
.card.fade-in { animation:fade .25s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(2px);} to {opacity:1; transform:none;} }

aside#filters {
	width:100%;
}

.filter-group {
	display:flex;
	flex-direction: column;
	max-height:200px;
	overflow-y:auto;
}

.filter-group label {
	
}

.filter-group label small {
	font-size:0.8em;
	color:#888;
}

.list-filter h4 {
	border-bottom: 1px solid #ccc;
	padding: 5px 0px;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
}

.list-filter section {
	margin-bottom:20px;
}