/* Shared card surfaces & CTAs */
/* Cards — shared surface & hover
   ========================================================================== */

.product-card,
.blog-card,
.search-card,
.blog-product-promo,
.search-page__suggestion {
	border: 1px solid var(--color-border);
	transition: transform var(--transition), border-color var(--transition);
}

.product-card:hover,
.blog-card:hover,
.search-card:hover,
.blog-product-promo:hover,
.search-page__suggestion:hover {
	transform: translateY(var(--card-hover-lift));
	border-color: var(--card-hover-border);
}

.product-card:hover .product-card__title,
.blog-card:hover .blog-card__title,
.blog-card:hover .blog-card__stretched-link,
.search-card:hover .search-card__title,
.search-card:hover .search-card__stretched-link {
	color: var(--color-accent);
}

.card-cta,
.product-card__btn,
.blog-card__cta,
.search-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	padding: 12px 20px;
	border: 1px solid var(--color-white);
	border-radius: var(--radius);
	background: transparent;
	font-size: var(--font-size-ui);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition), border-color var(--transition), background-color var(--transition), gap var(--transition);
	width: fit-content;
}

.product-card:hover .product-card__btn,
.product-card:focus-within .product-card__btn,
.product-card__link:hover .product-card__btn,
.product-card__link:focus-visible .product-card__btn,
.blog-card:hover .blog-card__cta,
.blog-card:focus-within .blog-card__cta,
.search-card:hover .search-card__cta,
.search-card:focus-within .search-card__cta,
.blog-product-promo:hover .blog-product-promo__cta,
.blog-product-promo:focus-within .blog-product-promo__cta {
	color: var(--color-black);
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	gap: 14px;
}