/*
 * Krugio C1: Product Card look (shop, categories, search, home sections, recommendations).
 * Loads right after Base product-card.css wherever cards load. Tokens only: no colour, radius or size literals
 * that a token covers.
 *
 * Kept from Base on purpose (nothing is restated here):
 * - grid: columns 4 / 3 / 2 and gaps come from --krugio-columns-*, --krugio-grid-gap, --krugio-grid-gap-row;
 * - media box: aspect-ratio, object-fit, surface background, --krugio-radius-card;
 * - hover image: shown only inside (hover: hover) and (pointer: fine), opacity transition through
 *   --krugio-transition. Nothing in this file shows it elsewhere, adds hover content that changes layout,
 *   or adds a second link or button to the card: on touch the first tap opens the product.
 */

.krugio-card__body {
	padding: 0.75rem var(--krugio-card-body-inline) 0;
	text-align: start;
}

.krugio-card__category {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0 0 var(--krugio-space-1);
	overflow: hidden;
	color: var(--krugio-color-text-muted);
	font-size: var(--krugio-card-category-size);
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.krugio-card__title {
	font-size: var(--krugio-card-title-size);
	font-weight: var(--krugio-weight-heading);
	line-height: var(--krugio-line-height-heading);
}

.krugio-card__link {
	color: var(--krugio-color-primary);
	text-decoration: none;
}

.krugio-card__link:hover {
	color: var(--krugio-color-accent);
}

.krugio-card__price {
	color: var(--krugio-color-card-price);
	font-size: var(--krugio-card-price-size);
	font-weight: var(--krugio-weight-heading);
}

.krugio-card__price del {
	color: var(--krugio-color-text-muted);
	font-weight: var(--krugio-weight-body);
}

.krugio-card__price ins {
	color: var(--krugio-color-card-price);
	text-decoration: none;
}

/* Badge: sale colours and the badge radius token (Base sets the same; restated so a design change stays local) */
.krugio-card__media .krugio-badge {
	background: var(--krugio-color-sale-badge);
	color: var(--krugio-color-on-sale-badge);
	border-radius: var(--krugio-radius-badge);
}