/**
 * Product card — the single shared loop template's styling. Used by the shop/category
 * grid, "Podobné produkty" and every homepage product grid. Markup: woocommerce/content-product.php.
 *
 * @package Geras_Custom
 */

.product-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var( --surface-page );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	box-shadow: var( --shadow-card );
	transition: transform .3s, box-shadow .3s;
}

.product-card:hover {
	box-shadow: var( --shadow-float );
	transform: translateY( -7px );
}

.product-card__image-link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3.05;
	overflow: hidden;
	background: var( --surface-raised );
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier( .2, .7, .3, 1 );
}

.product-card__img--empty {
	display: block;
	background: var( --surface-sand );
}

/* WC's default sale flash isn't part of the mockup's card; the category badge owns this corner. */
.product-card__image-link .onsale {
	display: none;
}

.product-card__badge {
	position: absolute;
	top: var( --space-14 );
	left: var( --space-14 );
	padding: var( --space-6 ) var( --space-13 );
	border-radius: var( --radius-pill );
	background: var( --c-paper-a94 );
	box-shadow: var( --shadow-card );
	color: var( --color-brand-red );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-badge );
	text-transform: uppercase;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --space-10 );
	padding: var( --space-22 ) var( --space-24 ) var( --space-24 );
}

.product-card__title {
	color: var( --color-heading );
	font-family: var( --font-display );
	font-size: var( --fs-20 );
	font-weight: var( --fw-560 );
	line-height: var( --lh-snug );
}

.product-card__meta {
	color: var( --color-muted );
	font-size: var( --fs-13-5 );
	font-weight: var( --fw-bold );
}

.product-card__link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-8 );
	margin-top: auto;
	color: var( --color-heading );
	font-size: var( --fs-15 );
	font-weight: var( --fw-black );
	transition: color .2s;
}

.product-card__link:hover {
	color: var( --color-heading-alt );
}

.product-card__dot {
	width: var( --space-8 );
	height: var( --space-8 );
	border-radius: var( --radius-circle );
	background: var( --color-accent );
}