/* Match the accessibility states used by the theme on plugin-owned surfaces. */
html.font-size-medium:has(body.rcm-accessibility-surface) {
	font-size: 12px;
}

html.font-size-large:has(body.rcm-accessibility-surface) {
	font-size: 15px;
}

html.contrast-mode:has(body.rcm-accessibility-surface) {
	filter: grayscale(1);
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
	.rcm-market-grid .product-card__content {
	height: auto;
	min-height: 24rem;
	flex: 1 0 auto;
}

/* Keep the catalog controls and card actions stable as rem-based text grows. */
html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-toolbar {
	flex-direction: column;
	align-items: stretch;
	gap: 1.6rem;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-tabs {
	width: 100%;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-sort {
	width: min(24rem, 100%);
	margin-left: auto;
	flex: 0 0 auto;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-sort::after {
	top: 50%;
	right: 1.8rem;
	transform: translateY(-50%) rotate(45deg);
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-sort select {
	height: auto;
	min-height: 4.8rem;
	padding: 1.1rem 4.8rem 1.1rem 1.6rem;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-grid .product-card__actions {
	flex-direction: column;
	align-items: stretch;
	gap: 1.6rem;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-grid .product-card__actions > .product-card__price {
	width: 100%;
	white-space: normal;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	text-align: left;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-grid .product-card__btns,
html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-grid .rcm-merch-card__buttons {
	width: 100%;
	flex: 0 0 auto;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-grid .product-card__btns .btn,
html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
	.rcm-market-grid .rcm-merch-card__buy {
	width: auto;
	min-width: 0;
	min-height: 4.8rem;
	padding: 1.1rem 2rem;
	flex: 1 1 auto;
}

/* A long availability label needs a status shape rather than a two-line pill. */
html:is(.font-size-medium, .font-size-large)
	body.term-online-study.rcm-accessibility-surface
	.product-card__attribute.available-by {
	display: grid;
	width: 100%;
	min-width: 0;
	padding: 10px 12px;
	grid-template-columns: minmax(0, 1fr) 22px;
	column-gap: 12px;
	align-items: center;
	border-radius: 8px;
	line-height: 1.35;
	overflow-wrap: normal;
	text-wrap: balance;
}

html:is(.font-size-medium, .font-size-large)
	body.term-online-study.rcm-accessibility-surface
	.product-card__attribute.available-by svg {
	width: 22px;
	height: 22px;
	justify-self: end;
}

/* Do not stretch mobile course cards between the title and actions. */
@media (max-width: 640px) {
	html:is(.font-size-medium, .font-size-large)
		body.term-online-study.rcm-accessibility-surface
		.product-card__content {
		height: auto;
		justify-content: flex-start;
	}

	html.font-size-medium
		body.term-online-study.rcm-accessibility-surface
		.product-card__actions {
		margin-top: 8px;
	}

	html:is(.font-size-medium, .font-size-large)
		body.term-online-study.rcm-accessibility-surface
		.product-card__image {
		min-width: 0;
	}
}

/* Rem-based gallery widths must not consume the summary column at 150%/200%. */
@media (min-width: 900px) {
	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__layout {
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
		gap: clamp(32px, 4vw, 56px);
	}

	/* Keep the simple-product purchase controls close to the price as text grows. */
	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__summary .price {
		margin-top: 2.4rem;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__summary form.cart:not(.variations_form) {
		display: flex;
		flex-wrap: wrap;
		gap: 1.6rem;
		align-items: stretch;
		margin-top: 2.4rem !important;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__summary form.cart:not(.variations_form) .quantity {
		width: clamp(160px, 14rem, 180px);
		max-width: 180px;
		flex: 0 1 clamp(160px, 14rem, 180px);
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__summary form.cart:not(.variations_form) .quantity.rcm-quantity {
		grid-template-columns: 48px minmax(48px, 1fr) 48px;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__summary form.cart:not(.variations_form)
		.single_add_to_cart_button {
		width: auto;
		min-width: min(240px, 100%);
		padding-right: 1.6rem !important;
		padding-left: 1.6rem !important;
		flex: 1 1 240px;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__summary form.cart:not(.variations_form) .rcm-cart-error {
		flex: 0 0 100%;
	}
}

/* Keep enlarged related-product prices clear of the wishlist and buy actions. */
html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
	.rcm-product__details ul.products li.product {
	--rcm-related-action-size: clamp(48px, 4.4rem, 60px);
	--rcm-related-buy-width: clamp(144px, 12rem, 180px);
	--rcm-related-action-gap: 0.8rem;
	--rcm-related-price-gap: 0.8rem;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
	.rcm-product__details ul.products li.product .price {
	max-width: none;
	flex-wrap: wrap;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
	.rcm-product__details ul.products li.product > .button {
	width: var(--rcm-related-buy-width);
	min-height: var(--rcm-related-action-size);
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
	.rcm-product__details ul.products .yith-wcwl-add-to-wishlist-button {
	width: var(--rcm-related-action-size);
	height: var(--rcm-related-action-size);
}

/* Preserve one x0 action row when three cards become narrow on small laptops. */
@media (min-width: 1025px) and (max-width: 1199px) {
	html:not(.font-size-medium):not(.font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product {
		--rcm-normal-related-action-size: 44px;
		--rcm-normal-related-buy-width: 104px;
		--rcm-normal-related-gap: 8px;
	}

	html:not(.font-size-medium):not(.font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price {
		right: calc(
			1.6rem + var(--rcm-normal-related-buy-width) +
				var(--rcm-normal-related-gap) + var(--rcm-normal-related-action-size) +
				var(--rcm-normal-related-gap)
		);
		bottom: calc(
			1.6rem + (var(--rcm-normal-related-action-size) - 2.16rem) / 2
		);
		max-width: none;
		flex-wrap: nowrap;
	}

	html:not(.font-size-medium):not(.font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product > .button {
		width: var(--rcm-normal-related-buy-width);
		padding-right: 1rem;
		padding-left: 1rem;
	}

	html:not(.font-size-medium):not(.font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product
		> .yith-add-to-wishlist-button-block {
		right: calc(
			1.6rem + var(--rcm-normal-related-buy-width) + var(--rcm-normal-related-gap)
		);
	}
}

/* At x1, keep the price and both actions in one row. */
@media (max-width: 767px), (min-width: 1025px) {
	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price {
		right: calc(
			1.6rem + var(--rcm-related-buy-width) +
				var(--rcm-related-action-gap) + var(--rcm-related-action-size) +
				var(--rcm-related-price-gap)
		);
		bottom: calc(
			1.6rem + (var(--rcm-related-action-size) - 2.16rem) / 2
		);
		flex-direction: row;
		gap: 0.6rem;
		align-items: baseline;
		flex-wrap: nowrap;
	}

	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product
		> .yith-add-to-wishlist-button-block {
		right: calc(
			1.6rem + var(--rcm-related-buy-width) + var(--rcm-related-action-gap)
		);
	}
}

@media (max-width: 767px), (min-width: 1025px) and (max-width: 1279px) {
	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product {
		--rcm-related-action-size: 44px;
		--rcm-related-buy-width: 96px;
		--rcm-related-action-gap: 0.6rem;
		--rcm-related-price-gap: 0.4rem;
	}
}

@media (min-width: 1025px) and (max-width: 1099px) {
	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product {
		--rcm-related-buy-width: 88px;
	}

	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product > .button {
		padding-right: 1rem;
		padding-left: 1rem;
	}
}

/* At x2, keep two rows and let the buy action fill the space beside wishlist. */
@media (max-width: 767px), (min-width: 1025px) {
	html.font-size-large:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price {
		right: 1.6rem;
		bottom: calc(1.6rem + var(--rcm-related-action-size) + 1.2rem);
	}

	html.font-size-large:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product > .button {
		right: 1.6rem;
		left: calc(
			1.6rem + var(--rcm-related-action-size) + var(--rcm-related-action-gap)
		);
		width: auto;
	}

	html.font-size-large:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product
		> .yith-add-to-wishlist-button-block {
		right: auto;
		left: 1.6rem;
	}
}

/* Cap the rem-based tablet grid so its action columns cannot leave the card. */
@media (min-width: 768px) and (max-width: 1024px) {
	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product {
		grid-template-columns:
			clamp(220px, 26rem, 260px)
			minmax(96px, 1fr)
			var(--rcm-related-action-size)
			var(--rcm-related-buy-width);
		grid-template-rows: minmax(0, 1fr) var(--rcm-related-action-size);
		gap: clamp(12px, 1.2rem, 16px);
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product img {
		width: clamp(220px, 26rem, 260px);
		height: clamp(124px, 14.6rem, 146px) !important;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price {
		flex-direction: column;
		gap: 0;
		align-items: flex-start;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price del {
		order: 2;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price ins {
		order: 1;
	}

	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price {
		flex-direction: row;
		gap: 0.6rem;
		align-items: baseline;
		flex-wrap: nowrap;
	}

	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price del {
		order: 1;
	}

	html.font-size-medium:has(body.rcm-merchandise-product)
		.rcm-product__details ul.products li.product .price ins {
		order: 2;
	}
}

/* PhotoSwipe uses a 44px sprite; scaling its box exposes adjacent icons. */
html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
	body.rcm-merchandise-product button.pswp__button--fs,
html:is(.font-size-medium, .font-size-large):has(body.rcm-merchandise-product)
	body.rcm-merchandise-product button.pswp__button--close {
	width: 44px;
	height: 44px;
	flex-basis: 44px;
	overflow: hidden;
}

/* Give enlarged prices their own row instead of letting them escape the panel. */
html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
	.rcm-side-cart li.rcm-cart-line {
	display: grid !important;
	grid-template-columns: 12rem minmax(0, 1fr);
	grid-template-areas:
		"image title"
		"image actions";
	column-gap: 1.2rem;
	row-gap: 0.8rem;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
	.rcm-side-cart li.rcm-cart-line .woocommerce-mini-cart-item__image {
	grid-area: image;
	width: 12rem !important;
	min-width: 12rem !important;
	height: 100% !important;
	min-height: 13.2rem;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
	.rcm-side-cart li.rcm-cart-line .woocommerce-mini-cart-item__title {
	grid-area: title;
	height: auto;
	min-height: 0;
	justify-content: flex-start;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
	.rcm-side-cart li.rcm-cart-line .rcm-cart-item__name {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
	.rcm-side-cart li.rcm-cart-line .woocommerce-mini-cart-item__actions {
	display: flex !important;
	grid-area: actions;
	width: 100%;
	height: auto;
	min-width: 0;
	min-height: 4rem;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	align-self: end;
}

html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
	.rcm-side-cart li.rcm-cart-line .woocommerce-mini-cart-item__actions .quantity {
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	html:is(.font-size-medium, .font-size-large):has(body.rcm-market-catalog)
		.rcm-market-tabs__list {
		overflow-x: visible;
		flex-wrap: wrap;
	}
}

@media (min-width: 993px) {
	html:is(.font-size-medium, .font-size-large):has(body.woocommerce-checkout.rcm-accessibility-surface)
		body.woocommerce-checkout .checkout__fields {
		min-width: 0;
	}

	html:is(.font-size-medium, .font-size-large):has(body.woocommerce-checkout.rcm-accessibility-surface)
		body.woocommerce-checkout .checkout__order-review {
		width: min(45.6rem, 50%);
		min-width: 0;
		flex: 0 0 min(45.6rem, 50%);
	}
}

@media (max-width: 767px) {
	html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
		li.rcm-cart-line {
		display: grid !important;
		grid-template-columns: 8rem minmax(0, 1fr);
		grid-template-areas:
			"image title"
			"image actions";
		column-gap: 0.8rem;
		row-gap: 0.8rem;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
		li.rcm-cart-line .woocommerce-mini-cart-item__image {
		grid-area: image;
		width: 8rem !important;
		min-width: 8rem !important;
		height: 100% !important;
		min-height: 10.4rem;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
		li.rcm-cart-line .woocommerce-mini-cart-item__title {
		grid-area: title;
		height: auto;
		min-height: 0;
		justify-content: flex-start;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
		li.rcm-cart-line .rcm-cart-item__name {
		display: block;
		overflow: visible;
		-webkit-line-clamp: unset;
	}

	html:is(.font-size-medium, .font-size-large):has(body.rcm-accessibility-surface)
		li.rcm-cart-line .woocommerce-mini-cart-item__actions {
		display: flex !important;
		grid-area: actions;
		width: 100%;
		height: auto;
		min-width: 0;
		min-height: 4rem;
		flex-direction: row;
		align-items: center;
		align-self: end;
	}

	html.font-size-large:has(body.woocommerce-cart.rcm-accessibility-surface)
		.mobile-totals__container {
		padding-inline: 1.6rem;
	}

	html.font-size-large:has(body.woocommerce-cart.rcm-accessibility-surface)
		.mobile-totals__container > div {
		gap: 1.2rem;
	}

	html.font-size-large:has(body.woocommerce-cart.rcm-accessibility-surface)
		.mobile-totals__container > div > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	html.font-size-large:has(body.woocommerce-cart.rcm-accessibility-surface)
		.mobile-totals__container h2 {
		margin: 0;
	}

	html:is(.font-size-medium, .font-size-large):has(body.woocommerce-checkout.rcm-accessibility-surface)
		.mobile-place-order {
		padding-right: 1.6rem;
		padding-left: 1.6rem;
	}

	html.font-size-large:has(body.woocommerce-checkout.rcm-accessibility-surface)
		.mobile-totals__container > div {
		gap: 1.2rem;
	}

	html.font-size-large:has(body.woocommerce-checkout.rcm-accessibility-surface)
		.mobile-totals__container > div > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	html.font-size-large:has(body.woocommerce-checkout.rcm-accessibility-surface)
		.mobile-totals__container h2 {
		margin: 0;
	}
}