/**
 * Cart item: .mk-cart-item (templates/components/cart-item.php).
 * Padding 36 / 24 / 33, bottom divider; photo 80 × 105 (radius 8) + 16 +
 * info column, aligned to the top. Info blocks 4 apart: title label-large,
 * options body-medium + 8 + "Change" body-small accent, size badges (gap 8),
 * price, then quantity input and remove button (space-between).
 */

.mk-cart-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--custom--cart-item--gap);
	padding-block: var(--wp--custom--cart-item--padding-top)
		var(--wp--custom--cart-item--padding-bottom);
	padding-inline: var(--wp--custom--cart-item--padding-inline);
	border-block-end: var(--wp--custom--border-width--thin) solid
		var(--wp--custom--color--divider);
	color: var(--wp--custom--color--text--primary);
}

.mk-cart-item__media {
	display: block;
	flex: none;
	overflow: hidden;
	inline-size: var(--wp--custom--cart-item--media-width);
	block-size: var(--wp--custom--cart-item--media-height);
	border-radius: var(--wp--custom--cart-item--media-radius);
	background-color: var(--wp--custom--color--surface--hover);
}

/* Fills the 80 × 105 frame. Two classes: Woo's `.woocommerce img`
   (height auto, max-width 100%) would win over one. */
.mk-cart-item .mk-cart-item__image {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

.mk-cart-item__info {
	display: grid;
	flex: 1;
	gap: var(--wp--custom--cart-item--info-gap);
	min-inline-size: 0;
}

.mk-cart-item__title {
	margin: 0;
	font-family: var(--wp--custom--text--label-large--font-family);
	font-size: var(--wp--custom--text--label-large--font-size);
	font-weight: var(--wp--custom--text--label-large--font-weight);
	line-height: var(--wp--custom--text--label-large--line-height);
	letter-spacing: var(--wp--custom--text--label-large--letter-spacing);
}

.mk-cart-item__title a {
	color: inherit;
	text-decoration: none;
}

.mk-cart-item__detail {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--custom--cart-item--option-gap);
	margin: 0;
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
}

.mk-cart-item__change {
	color: var(--wp--custom--color--text--accent);
	font-family: var(--wp--custom--text--body-small--font-family);
	font-size: var(--wp--custom--text--body-small--font-size);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	line-height: var(--wp--custom--text--body-small--line-height);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
	text-decoration: none;
}

.mk-cart-item__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--cart-item--sizes-gap);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mk-cart-item__price {
	margin: 0;
}

.mk-cart-item__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mk-cart-item :is(.mk-cart-item__title a, .mk-cart-item__change):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);
}

@media (hover: hover) {
	.mk-cart-item__title a:hover,
	.mk-cart-item__change:hover {
		color: var(--wp--custom--color--text--accent);
		text-decoration: underline;
	}
}