/**
 * Product card: .mk-product-card (templates/components/product-card.php).
 *
 * Two rows: square picture (badges top left, wishlist top right) and body.
 * Values per breakpoint: theme.json `custom.productCard.{mobile,tablet,desktop}`
 * (48rem / 64rem = `custom.breakpoint.{tablet,desktop}`).
 */

.mk-product-card {
	--mk-card-row-gap: var(--wp--custom--product-card--mobile--row-gap);
	--mk-card-badge-top: var(--wp--custom--product-card--mobile--badge-top);
	--mk-card-badge-left: var(--wp--custom--product-card--mobile--badge-left);
	--mk-card-title-size: var(
		--wp--custom--product-card--mobile--title-font-size
	);
	--mk-card-title-line: var(
		--wp--custom--product-card--mobile--title-line-height
	);
	--mk-card-text-size: var(
		--wp--custom--product-card--mobile--description-font-size
	);
	--mk-card-text-line: var(
		--wp--custom--product-card--mobile--description-line-height
	);

	display: flex;
	flex-direction: column;
	gap: var(--mk-card-row-gap);
	box-sizing: border-box;
	min-inline-size: 0;
	padding: var(--wp--custom--product-card--padding);
	border-width: var(--wp--custom--product-card--border-width);
	border-style: solid;
	border-color: var(--wp--custom--color--interactive--default);
	border-radius: var(--wp--custom--product-card--radius);
	color: var(--wp--custom--color--text--primary);
}

@media (min-width: 48rem) {
	.mk-product-card {
		--mk-card-row-gap: var(--wp--custom--product-card--tablet--row-gap);
		--mk-card-badge-top: var(--wp--custom--product-card--tablet--badge-top);
		--mk-card-badge-left: var(
			--wp--custom--product-card--tablet--badge-left
		);
		--mk-card-title-size: var(
			--wp--custom--product-card--tablet--title-font-size
		);
		--mk-card-title-line: var(
			--wp--custom--product-card--tablet--title-line-height
		);
		--mk-card-text-size: var(
			--wp--custom--product-card--tablet--description-font-size
		);
		--mk-card-text-line: var(
			--wp--custom--product-card--tablet--description-line-height
		);
	}
}

@media (min-width: 64rem) {
	.mk-product-card {
		--mk-card-row-gap: var(--wp--custom--product-card--desktop--row-gap);
		--mk-card-badge-top: var(
			--wp--custom--product-card--desktop--badge-top
		);
		--mk-card-badge-left: var(
			--wp--custom--product-card--desktop--badge-left
		);
		--mk-card-title-size: var(
			--wp--custom--product-card--desktop--title-font-size
		);
		--mk-card-title-line: var(
			--wp--custom--product-card--desktop--title-line-height
		);
		--mk-card-text-size: var(
			--wp--custom--product-card--desktop--description-font-size
		);
		--mk-card-text-line: var(
			--wp--custom--product-card--desktop--description-line-height
		);
	}
}

/* Row 1: picture with overlays. */
.mk-product-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--product-card--media-radius);
	background-color: var(--wp--custom--color--surface--hover);
}

.mk-product-card__image-link,
.mk-product-card__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.mk-product-card__image {
	object-fit: cover;
}

.mk-product-card__badges {
	position: absolute;
	inset-block-start: var(--mk-card-badge-top);
	inset-inline-start: var(--mk-card-badge-left);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--product-card--badge-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-product-card__wishlist {
	position: absolute;
	inset-block-start: var(--wp--custom--product-card--overlay-inset);
	inset-inline-end: var(--wp--custom--product-card--overlay-inset);
}

/* Row 2: name, description, swatches, price + quick add. */
.mk-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-inline-size: 0;
}

.mk-product-card__title {
	margin: 0 0 var(--wp--custom--product-card--title-gap);
	font-family: var(--wp--custom--product-card--title-font-family);
	font-size: var(--mk-card-title-size);
	font-weight: var(--wp--custom--product-card--title-font-weight);
	line-height: var(--mk-card-title-line);
	letter-spacing: var(--wp--custom--text--label-large--letter-spacing);
}

.mk-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.mk-product-card__description {
	margin: 0 0 var(--wp--custom--product-card--description-gap);
	font-family: var(--wp--custom--product-card--description-font-family);
	font-size: var(--mk-card-text-size);
	font-weight: var(--wp--custom--product-card--description-font-weight);
	line-height: var(--mk-card-text-line);
}

.mk-product-card__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--product-card--swatch-gap);
	min-inline-size: 0;
	margin: 0 0 var(--wp--custom--product-card--swatches-gap);
	padding: 0;
	border: 0;
}

.mk-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--product-card--footer-gap);
	margin-block-start: auto;
}

.mk-product-card__title a:focus {
	outline-style: none;
}

.mk-product-card__title a:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}