/* REACH Supply responsive and overflow safeguards. */

body.reach-design-system :where(
	.rs-container,
	.rs-content,
	.rs-form-shell,
	.rs-surface,
	.rs-card,
	.woocommerce,
	.woocommerce-page,
	.reach-b2b-application,
	.reach-b2b-quick-order,
	.reach-b2b-purchase-lists,
	.reach-b2b-company-account
) {
	max-width: 100%;
	min-width: 0;
}

body.reach-design-system :where(img, svg, video, canvas, iframe) {
	max-width: 100%;
}

/* Logged-out My Account pages do not render the account navigation/content pair. */
body.reach-design-system.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
}

@media (max-width: 1024px) {
	body.reach-design-system .rs-grid {
		--rs-grid-columns: 2;
	}

	body.reach-design-system.woocommerce-account .woocommerce {
		gap: var(--rs-space-5);
		grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	body.reach-design-system {
		--rs-section-space: clamp(2rem, 8vw, 3rem);
		--rs-component-space: var(--rs-space-5);
		--rs-page-gutter: var(--rs-space-4);
	}

	body.reach-design-system .rs-grid,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) .u-columns.col2-set {
		grid-template-columns: 1fr;
	}

	body.reach-design-system.woocommerce-account .woocommerce {
		display: block;
	}

	body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: var(--rs-space-5);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: var(--rs-space-2);
		overflow-x: auto;
		padding: var(--rs-space-2);
	}

	body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}

	body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation a {
		border-bottom: 3px solid transparent;
		border-left: 0;
		white-space: nowrap;
	}

	body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
	body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
		border-bottom-color: var(--rs-color-gold);
		border-left-color: transparent;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) :where(
		input.input-text,
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="password"],
		input[type="number"],
		input[type="search"],
		input[type="url"],
		select,
		textarea
	) {
		font-size: 16px;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products:not(.swiper-wrapper):not(.slick-track):not(.flickity-slider) {
		display: grid;
		gap: var(--rs-space-3);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products:not(.swiper-wrapper):not(.slick-track):not(.flickity-slider)::before,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products:not(.swiper-wrapper):not(.slick-track):not(.flickity-slider)::after {
		display: none;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products:not(.swiper-wrapper):not(.slick-track):not(.flickity-slider) li.product {
		clear: none;
		float: none;
		margin: 0;
		width: auto;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product .product_title {
		font-size: clamp(1.75rem, 8vw, 2.3rem);
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product form.cart {
		align-items: stretch;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive thead,
	body.reach-design-system .woocommerce-page table.shop_table_responsive thead {
		display: none;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive tbody tr,
	body.reach-design-system .woocommerce-page table.shop_table_responsive tbody tr {
		border-bottom: var(--rs-border-default);
		display: block;
		padding: var(--rs-space-3);
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive tr td,
	body.reach-design-system .woocommerce-page table.shop_table_responsive tr td {
		align-items: center;
		border: 0;
		display: flex;
		gap: var(--rs-space-3);
		justify-content: space-between;
		padding: var(--rs-space-2) 0;
		text-align: right;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive tr td::before,
	body.reach-design-system .woocommerce-page table.shop_table_responsive tr td::before {
		color: var(--rs-color-ink);
		content: attr(data-title);
		font-weight: var(--rs-font-weight-semibold);
		text-align: left;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive tr td.product-remove,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive tr td.product-thumbnail {
		justify-content: flex-end;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive tr td.product-remove::before,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table_responsive tr td.product-thumbnail::before {
		display: none;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.shop_table td.product-thumbnail img {
		max-width: 4.5rem;
		width: 4.5rem;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.cart td.actions,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.cart td.actions .coupon {
		align-items: stretch;
		display: grid;
		gap: var(--rs-space-3);
		grid-template-columns: 1fr;
		width: 100%;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.cart td.actions .coupon .input-text,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) table.cart td.actions :where(button, input.button) {
		margin: 0;
		width: 100%;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) .cart-collaterals .cart_totals,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) .cart-collaterals .cross-sells {
		float: none;
		margin-top: var(--rs-space-5);
		width: 100%;
	}

	body.reach-design-system .woocommerce-checkout .col2-set :where(.col-1, .col-2) {
		float: none;
		width: 100%;
	}

	body.reach-design-system .woocommerce-checkout .col2-set .col-2 {
		margin-top: var(--rs-space-5);
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product .woocommerce-tabs ul.tabs {
		display: flex;
		gap: var(--rs-space-4);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
		margin: 0;
	}
}

@media (max-width: 480px) {
	body.reach-design-system {
		--rs-page-gutter: var(--rs-space-3);
	}

	body.reach-design-system .rs-section {
		padding-block: var(--rs-space-7);
	}

	body.reach-design-system :where(.rs-surface, .rs-card) {
		border-radius: var(--rs-radius-md);
		padding: var(--rs-space-4);
	}

	body.reach-design-system .rs-faq summary,
	body.reach-design-system .rs-faq__answer {
		padding: var(--rs-space-4);
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) :where(
		form.login,
		form.register,
		form.lost_reset_password,
		form.checkout_coupon,
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields,
		.woocommerce-checkout .woocommerce-billing-fields,
		.woocommerce-checkout .woocommerce-shipping-fields,
		.woocommerce-checkout .woocommerce-additional-fields,
		.woocommerce-checkout #order_review,
		.cart-collaterals .cart_totals,
		.cart-collaterals .cross-sells
	),
	body.reach-design-system.woocommerce-account .woocommerce-MyAccount-content {
		border-radius: var(--rs-radius-md);
		padding: var(--rs-space-4);
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products li.product {
		border-radius: var(--rs-radius-md);
		padding: 0.65rem;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.875rem;
		line-height: 1.35;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products li.product .price {
		font-size: 0.95rem;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products li.product :where(a.button, button.button) {
		font-size: 0.8125rem;
		min-height: 2.5rem;
		padding: 0.55rem 0.65rem;
		width: 100%;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) span.onsale {
		margin: var(--rs-space-2);
		padding: 0.38rem 0.55rem;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product form.cart {
		display: grid;
		grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
		width: 100%;
	}

	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product form.cart .variations,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product form.cart .single_variation_wrap,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product form.cart .variations_button,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) div.product form.cart .group_table {
		grid-column: 1 / -1;
		width: 100%;
	}

	body.reach-design-system .woocommerce-checkout #place_order,
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) .wc-proceed-to-checkout a.checkout-button {
		width: 100%;
	}
}

@media (max-width: 339px) {
	:is(body.reach-design-system .woocommerce, body.reach-design-system.woocommerce) ul.products:not(.swiper-wrapper):not(.slick-track):not(.flickity-slider) {
		grid-template-columns: 1fr;
	}
}