/**
 * Reusable Watch product card — component contract 8 / SB-WCH-001.
 */

.sb-watch-card {
	min-width: 0;
}

.sb-watch-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.sb-watch-card__media:empty::after {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	content: "";
	border: var(--sb-border-hairline) solid var(--sb-color-border);
}

.sb-watch-card__media > .sb-watch-card__alternate {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.sb-watch-card__link:hover .sb-watch-card__media > .sb-watch-card__alternate,
.sb-watch-card__link:focus-visible .sb-watch-card__media > .sb-watch-card__alternate {
	opacity: 1;
}

.sb-watch-card__link:hover .sb-watch-card__media > img:first-child,
.sb-watch-card__link:focus-visible .sb-watch-card__media > img:first-child {
	opacity: 0;
}

.sb-watch-card__meta {
	min-width: 0;
	margin-top: var(--sb-space-9);
	padding-top: var(--sb-space-7);
	border-top: var(--sb-border-hairline) solid var(--sb-color-border);
}

.sb-watch-card__collection,
.sb-watch-card__name {
	margin: 0;
}

.sb-watch-card__collection {
	color: var(--sb-color-text-label);
}

.sb-watch-card__name {
	margin-top: var(--sb-space-4);
	overflow-wrap: anywhere;
}

.sb-watch-card--featured {
	grid-column: span 2;
}

.sb-watch-card--featured .sb-watch-card__name {
	font-size: var(--sb-type-product-name-list);
}

@media (max-width: 767px) {
	.sb-watch-card--featured {
		grid-column: 1 / -1;
	}

	.sb-watch-card__meta {
		margin-top: var(--sb-space-6);
		padding-top: var(--sb-space-5);
	}

	.sb-watch-card__name {
		margin-top: var(--sb-space-3);
	}

	.sb-watch-card--featured .sb-watch-card__name {
		font-size: var(--sb-type-product-name-list);
	}
}