.bl-products {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 479px) {
	.bl-products { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
	.bl-products--cols-3,
	.bl-products--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.bl-products--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* В узком контейнере четыре карточки схлопываются до нечитаемых 170px. */
	.bl-container-narrow .bl-products--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Единственная позиция не должна растягиваться во всю ширину блока. */
.bl-products:has(> :only-child) { grid-template-columns: minmax(0, 22rem); }

.bl-product {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--bl-card-radius);
	background: var(--bl-surface);
	border: var(--bl-border-width, 1px) solid transparent;
}

.bl-catalog-block--shadow .bl-product { box-shadow: var(--bl-shadow); }
.bl-catalog-block--border .bl-product { border-color: var(--bl-border); }
.bl-catalog-block--flat .bl-product { background: transparent; }

.bl-product__media {
	position: relative;
	overflow: hidden;
}

.bl-media-crop--empty {
	display: block;
	background: linear-gradient(135deg, color-mix(in srgb, var(--bl-accent) 8%, transparent), color-mix(in srgb, var(--bl-accent) 18%, transparent));
}

.bl-card-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	max-width: calc(100% - 1.5rem);
	padding: .3rem .7rem;
	border-radius: var(--bl-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	color: var(--bl-accent-contrast);
	background: var(--bl-accent);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--bl-accent) 45%, transparent);
}

.bl-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	gap: .5rem;
	/* Отступ не меньше скругления: карточка клипует содержимое, и при крупном
	   радиусе текст в углу иначе срезается. */
	padding: max(clamp(1rem, 1.8vw, 1.35rem), calc(var(--bl-card-radius, 1rem) * .7));
}

.bl-product__cat {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bl-accent);
	overflow-wrap: anywhere;
}

.bl-product__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.bl-product__title a { color: inherit; text-decoration: none; }
.bl-product__title a:hover { color: var(--bl-accent); }

.bl-product__text {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--bl-muted);
	overflow-wrap: anywhere;
}

.bl-product__specs {
	display: grid;
	gap: .35rem;
	margin: .25rem 0 0;
	padding-top: .6rem;
	border-top: 1px dashed var(--bl-border);
	font-size: .84rem;
}

.bl-product__specs > div {
	display: flex;
	align-items: baseline;
	gap: .4rem;
}

.bl-product__specs dt {
	flex: 0 1 auto;
	min-width: 0;
	color: var(--bl-muted);
	overflow-wrap: anywhere;
}

.bl-product__specs > div::after {
	content: "";
	order: 1;
	flex: 1 1 .5rem;
	height: 0;
	border-bottom: 1px dotted var(--bl-border);
}

.bl-product__specs dd {
	order: 2;
	margin: 0;
	min-width: 0;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.bl-product__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: auto;
	padding-top: .9rem;
	flex-wrap: wrap;
}

.bl-product__price {
	display: flex;
	flex-direction: column;
	font-size: 1.15rem;
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.bl-product__price small {
	font-size: .72rem;
	font-weight: 500;
	color: var(--bl-muted);
	letter-spacing: 0;
}

.bl-product__price del {
	font-size: .8rem;
	font-weight: 500;
	color: var(--bl-muted);
}

.bl-product__footer .bl-btn { padding: .7em 1.25em; font-size: .9375rem; max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 600px) {
	.bl-product__footer { flex-direction: column; align-items: stretch; }
	.bl-product__footer .bl-btn { width: 100%; }
}