/*
 * Category card — the artwork tile with its VIEW ALL button.
 * Site-wide because the cart drawer's empty state reuses it, and shop pages do
 * not load home.css; keeping it here stops the button rendering as bare text.
 */

.category-card {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	line-height: 0;
}

.category-card__img {
	display: block;
	width: 100%;
	height: auto;
}

.category-card__button {
	position: absolute;
	inset-inline: 25%;
	inset-block-end: 4%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 10.4%;
	padding: 8px 4px;
	border-radius: 6px;
	background: var(--category-button-bg);
	color: var(--category-button-text);
	font-family: var(--font-display);
	font-size: clamp(13px, 1.25vw, 17px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

a.category-card:hover .category-card__button {
	background: var(--color-primary);
	color: var(--color-white);
}