/* Products showcase: [cx_products] */
.cx-products [hidden] { display: none !important; }

.cx-products__filters {
	display: none;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}
.cx-products.is-ready .cx-products__filters { display: flex; }
.cx-products__filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	font: 600 14.5px/1.2 var(--cx-head);
	color: var(--cx-ink);
	background: var(--cx-white);
	border: 1px solid #C3C8CE;
	border-radius: var(--cx-radius);
	cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}
.cx-products__filter span { font-weight: 500; color: var(--cx-steel); }
.cx-products__filter:hover { border-color: var(--cx-graphite); }
.cx-products__filter[aria-pressed="true"] { color: var(--cx-white); background: var(--cx-graphite); border-color: var(--cx-graphite); }
.cx-products__filter[aria-pressed="true"] span { color: #B9BEC4; }
.cx-products__filter:focus-visible { outline: 3px solid rgba(187, 0, 0, .35); outline-offset: 2px; }

.cx-products__count { margin: 0 0 22px; font: 600 14px/1.4 var(--cx-body); color: var(--cx-steel); }

.cx-products__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.cx-prod {
	display: flex;
	flex-direction: column;
	background: var(--cx-white);
	border: 1px solid var(--cx-line);
	border-radius: var(--cx-radius);
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}
.cx-prod:hover { border-color: #C3C8CE; box-shadow: 0 14px 30px -18px rgba(30, 31, 33, .35); }

.cx-prod__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 22px;
	background: var(--cx-white);
	border-bottom: 3px solid var(--cx-concrete);
}
.cx-prod:hover .cx-prod__media { border-bottom-color: var(--cx-red); }
.cx-products .cx-prod__img { position: absolute; top: 22px; left: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; transition: transform .35s ease; }
.cx-prod:hover .cx-prod__img { transform: translateY(-4px); }

.cx-prod__media--blank { flex-direction: column; gap: 14px; background: #F7F8F9; }
.cx-prod__blank-icon { width: 46px; height: auto; fill: none; stroke: #C3C8CE; stroke-width: 3; stroke-linejoin: round; }
.cx-prod__blank-text { font: 500 13px/1.3 var(--cx-body); color: var(--cx-steel); }

.cx-prod__body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.cx-prod__cat { margin: 0 0 6px; font: 600 12.5px/1.4 var(--cx-body); color: var(--cx-red); }
body .cx-prod__name { margin: 0 0 8px; font: 700 18px/1.3 var(--cx-head); letter-spacing: -0.01em; color: var(--cx-ink); }
.cx-prod__desc { margin: 0 0 16px; font: 400 14.5px/1.6 var(--cx-body); color: var(--cx-steel); }
.cx-prod__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; }
.cx-prod__sizes li {
	padding: 5px 10px;
	font: 600 12.5px/1.3 var(--cx-head);
	color: var(--cx-ink);
	background: var(--cx-concrete);
	border-radius: var(--cx-radius);
}

@media (prefers-reduced-motion: reduce) {
	.cx-prod, .cx-products .cx-prod__img, .cx-products__filter { transition: none; }
	.cx-prod:hover .cx-prod__img { transform: none; }
}

@media (max-width: 1100px) {
	.cx-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.cx-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
	.cx-products.is-ready .cx-products__filters {
		flex-wrap: nowrap;
		margin: 0 -20px 16px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.cx-products__filters::-webkit-scrollbar { display: none; }
	.cx-products__filter { flex: 0 0 auto; padding: 10px 14px; font-size: 14px; }
	.cx-products__grid { grid-template-columns: 1fr; gap: 14px; }
	.cx-prod { flex-direction: row; }
	.cx-prod__media { flex: 0 0 118px; aspect-ratio: auto; min-height: 118px; padding: 12px; border-bottom: 0; border-right: 3px solid var(--cx-concrete); }
	.cx-products .cx-prod__img { top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
	.cx-prod:hover .cx-prod__media { border-right-color: var(--cx-red); }
	.cx-prod__media--blank { gap: 8px; }
	.cx-prod__blank-icon { width: 30px; }
	.cx-prod__blank-text { font-size: 11.5px; text-align: center; }
	.cx-prod__body { padding: 14px 16px 16px; }
	body .cx-prod__name { font-size: 16.5px; margin-bottom: 6px; }
	.cx-prod__desc { margin-bottom: 12px; font-size: 13.5px; line-height: 1.55; }
}