/*
 * REACH Supply WooCommerce presentation layer.
 * Scoped to body.reach-design-system so WordPress admin and other sites remain
 * untouched. Functional WooCommerce hooks and visibility are never removed.
 */

body.reach-design-system .woocommerce {
	color: var(--rs-color-ink);
}

body.reach-design-system .woocommerce :where(h1, h2, h3, h4, h5, h6) {
	color: var(--rs-color-ink);
}

body.reach-design-system .woocommerce :where(p, li, small, .description, .woocommerce-form-row span) {
	line-height: var(--rs-line-height-body);
}

/* Forms */
body.reach-design-system .woocommerce form .form-row {
	box-sizing: border-box;
	margin: 0 0 var(--rs-space-4);
	padding: 0;
}

body.reach-design-system .woocommerce form .form-row label,
body.reach-design-system .woocommerce-page form .form-row label {
	color: var(--rs-color-ink);
	font-size: var(--rs-font-size-base);
	font-weight: var(--rs-font-weight-semibold);
	line-height: 1.4;
	margin: 0 0 var(--rs-space-2);
}

body.reach-design-system .woocommerce form .form-row .required {
	color: var(--rs-color-error);
	text-decoration: none;
}

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
) {
	background: var(--rs-color-surface);
	border: var(--rs-border-strong);
	border-radius: var(--rs-radius-sm);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--rs-color-ink);
	font: inherit;
	font-size: var(--rs-font-size-base);
	line-height: 1.4;
	max-width: 100%;
	min-height: var(--rs-control-height);
	padding: 0.7rem 0.85rem;
	transition: border-color var(--rs-transition-fast), box-shadow var(--rs-transition-fast), background-color var(--rs-transition-fast);
}

body.reach-design-system .woocommerce textarea {
	min-height: 7.5rem;
	resize: vertical;
}

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
)::placeholder {
	color: var(--rs-color-subtle);
	opacity: 1;
}

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
):focus {
	border-color: var(--rs-color-focus);
	box-shadow: var(--rs-focus-ring);
	outline: 0;
}

body.reach-design-system .woocommerce :where(input, select, textarea):disabled {
	background: var(--rs-color-disabled);
	color: var(--rs-color-muted);
	cursor: not-allowed;
}

body.reach-design-system .woocommerce :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--rs-color-ink);
	box-shadow: none;
	flex: 0 0 auto;
	height: 1.25rem;
	margin: 0.15rem var(--rs-space-2) 0 0;
	min-height: 1.25rem;
	min-width: 1.25rem;
	padding: 0;
	vertical-align: top;
	width: 1.25rem;
}

body.reach-design-system .woocommerce :where(.woocommerce-form__label-for-checkbox, .woocommerce-form__label-for-radio, label.checkbox) {
	align-items: flex-start;
	color: var(--rs-color-ink);
	display: inline-flex;
	font-size: var(--rs-font-size-base);
	font-weight: var(--rs-font-weight-regular);
	gap: var(--rs-space-2);
	line-height: 1.5;
}

body.reach-design-system .woocommerce .select2-container .select2-selection--single {
	align-items: center;
	background: var(--rs-color-surface);
	border: var(--rs-border-strong);
	border-radius: var(--rs-radius-sm);
	display: flex;
	height: var(--rs-control-height);
	padding-inline: 0.85rem 2.5rem;
}

body.reach-design-system .woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
body.reach-design-system .woocommerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--rs-color-focus);
	box-shadow: var(--rs-focus-ring);
}

body.reach-design-system .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--rs-color-ink);
	line-height: 1.4;
	padding: 0;
}

body.reach-design-system .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 0.7rem;
}

/* Buttons */
body.reach-design-system .woocommerce :where(
	a.button,
	button.button,
	input.button,
	#respond input#submit,
	.woocommerce-button,
	.wc-forward,
	button[name="apply_coupon"],
	button[name="update_cart"],
	#place_order
) {
	align-items: center;
	appearance: none;
	background: var(--rs-color-ink);
	border: 1px solid var(--rs-color-ink);
	border-radius: var(--rs-radius-sm);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--rs-color-on-ink);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: var(--rs-font-weight-bold);
	justify-content: center;
	line-height: 1.2;
	min-height: var(--rs-control-height);
	padding: var(--rs-space-3) var(--rs-space-5);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--rs-transition-fast), border-color var(--rs-transition-fast), box-shadow var(--rs-transition-fast), color var(--rs-transition-fast), transform var(--rs-transition-fast);
}

body.reach-design-system .woocommerce :where(
	a.button,
	button.button,
	input.button,
	#respond input#submit,
	.woocommerce-button,
	.wc-forward,
	button[name="apply_coupon"],
	button[name="update_cart"],
	#place_order
):hover {
	background: var(--rs-color-ink-hover);
	border-color: var(--rs-color-ink-hover);
	color: var(--rs-color-on-ink);
	transform: translateY(-1px);
}

body.reach-design-system .woocommerce :where(button.button, input.button):disabled,
body.reach-design-system .woocommerce :where(button.button, input.button).disabled {
	background: var(--rs-color-disabled);
	border-color: var(--rs-color-border);
	color: var(--rs-color-muted);
	cursor: not-allowed;
	opacity: 1;
	transform: none;
}

body.reach-design-system .woocommerce a.remove {
	align-items: center;
	background: transparent;
	border: 1px solid var(--rs-color-border-strong);
	border-radius: var(--rs-radius-pill);
	color: var(--rs-color-error);
	display: inline-flex;
	font-size: 1.1rem;
	height: 2rem;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	width: 2rem;
}

body.reach-design-system .woocommerce a.remove:hover {
	background: var(--rs-color-error-soft);
	border-color: var(--rs-color-error);
	color: var(--rs-color-error);
}

/* Notices */
body.reach-design-system .woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-left: 4px solid var(--rs-color-gold);
	border-radius: var(--rs-radius-md);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--rs-color-ink);
	line-height: 1.55;
	list-style: none;
	margin: 0 0 var(--rs-space-5);
	padding: var(--rs-space-4) var(--rs-space-5);
}

body.reach-design-system .woocommerce .woocommerce-message {
	background: var(--rs-color-success-soft);
	border-left-color: var(--rs-color-success);
}

body.reach-design-system .woocommerce .woocommerce-info {
	border-left-color: var(--rs-color-gold);
}

body.reach-design-system .woocommerce .woocommerce-error {
	background: var(--rs-color-error-soft);
	border-left-color: var(--rs-color-error);
}

body.reach-design-system .woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	color: inherit;
	position: static;
}

body.reach-design-system .woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) a {
	color: var(--rs-color-ink);
	font-weight: var(--rs-font-weight-semibold);
	text-decoration-color: var(--rs-color-gold);
	text-underline-offset: 3px;
}

/* Login, registration, account and service forms */
body.reach-design-system .woocommerce :where(
	form.login,
	form.register,
	form.lost_reset_password,
	form.checkout_coupon,
	.woocommerce-EditAccountForm,
	.woocommerce-address-fields
) {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-xs);
	box-sizing: border-box;
	margin: 0;
	padding: clamp(var(--rs-space-5), 3vw, var(--rs-space-6));
}

body.reach-design-system .woocommerce .u-columns.col2-set {
	display: grid;
	gap: var(--rs-space-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.reach-design-system .woocommerce .u-columns.col2-set::before,
body.reach-design-system .woocommerce .u-columns.col2-set::after {
	display: none;
}

body.reach-design-system .woocommerce .u-column1,
body.reach-design-system .woocommerce .u-column2 {
	float: none;
	margin: 0;
	min-width: 0;
	width: auto;
}

body.reach-design-system.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--rs-space-6);
	grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
}

body.reach-design-system.woocommerce-account .woocommerce::before,
body.reach-design-system.woocommerce-account .woocommerce::after {
	display: none;
}

body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation ul {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-xs);
	list-style: none;
	margin: 0;
	overflow: clip;
	padding: var(--rs-space-2);
}

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

body.reach-design-system.woocommerce-account .woocommerce-MyAccount-navigation a {
	border-left: 3px solid transparent;
	border-radius: var(--rs-radius-sm);
	color: var(--rs-color-ink);
	display: block;
	font-weight: var(--rs-font-weight-semibold);
	padding: var(--rs-space-3) var(--rs-space-4);
	text-decoration: none;
}

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

body.reach-design-system.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-xs);
	box-sizing: border-box;
	float: none;
	min-width: 0;
	padding: clamp(var(--rs-space-5), 3vw, var(--rs-space-6));
	width: auto;
}

body.reach-design-system.woocommerce-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

/* Product loops */
body.reach-design-system .woocommerce ul.products {
	box-sizing: border-box;
	gap: var(--rs-space-5);
}

body.reach-design-system .woocommerce ul.products li.product {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-xs);
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	padding: var(--rs-space-4);
	transition: border-color var(--rs-transition-base), box-shadow var(--rs-transition-base), transform var(--rs-transition-base);
}

body.reach-design-system .woocommerce ul.products li.product:hover {
	border-color: var(--rs-color-border-strong);
	box-shadow: var(--rs-shadow-sm);
	transform: translateY(-2px);
}

body.reach-design-system .woocommerce ul.products li.product a {
	color: var(--rs-color-ink);
	text-decoration: none;
}

body.reach-design-system .woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	background: var(--rs-color-surface);
	border-radius: var(--rs-radius-md);
	display: block;
	height: auto;
	margin: 0 0 var(--rs-space-3);
	max-width: 100%;
	object-fit: contain;
	width: 100%;
}

body.reach-design-system .woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--rs-color-ink);
	font-size: var(--rs-font-size-base);
	font-weight: var(--rs-font-weight-semibold);
	line-height: 1.4;
	margin: 0 0 var(--rs-space-2);
	padding: 0;
}

body.reach-design-system .woocommerce ul.products li.product .price {
	color: var(--rs-color-ink);
	font-size: var(--rs-font-size-lg);
	font-weight: var(--rs-font-weight-bold);
	line-height: 1.3;
	margin: 0 0 var(--rs-space-3);
}

body.reach-design-system .woocommerce ul.products li.product .price del {
	color: var(--rs-color-muted);
	opacity: 1;
}

body.reach-design-system .woocommerce ul.products li.product .price ins {
	color: var(--rs-color-ink);
	font-weight: inherit;
	text-decoration: none;
}

body.reach-design-system .woocommerce span.onsale {
	background: var(--rs-color-gold);
	border-radius: var(--rs-radius-pill);
	box-shadow: none;
	color: var(--rs-color-on-gold);
	font-size: var(--rs-font-size-xs);
	font-weight: var(--rs-font-weight-bold);
	line-height: 1;
	margin: var(--rs-space-3);
	min-height: auto;
	min-width: auto;
	padding: 0.45rem 0.65rem;
}

body.reach-design-system .woocommerce :where(.stock, .available-on-backorder) {
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-semibold);
}

body.reach-design-system .woocommerce .stock.in-stock {
	color: var(--rs-color-success);
}

body.reach-design-system .woocommerce .stock.out-of-stock {
	color: var(--rs-color-error);
}

body.reach-design-system .woocommerce :where(.related.products, .upsells.products, .cross-sells) {
	margin-block: var(--rs-section-space) 0;
}

body.reach-design-system .woocommerce :where(.related.products, .upsells.products, .cross-sells).rs-is-empty {
	display: none !important;
}

/* Single product */
body.reach-design-system .woocommerce div.product div.images img {
	background: var(--rs-color-surface);
	border-radius: var(--rs-radius-md);
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

body.reach-design-system .woocommerce div.product .summary {
	color: var(--rs-color-ink);
}

body.reach-design-system .woocommerce div.product .product_title {
	font-size: var(--rs-font-size-page-title);
	line-height: var(--rs-line-height-tight);
}

body.reach-design-system .woocommerce div.product p.price,
body.reach-design-system .woocommerce div.product span.price {
	color: var(--rs-color-ink);
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: var(--rs-font-weight-bold);
}

body.reach-design-system .woocommerce .quantity .qty {
	min-height: var(--rs-control-height);
	min-width: 4.5rem;
	padding-inline: 0.5rem;
	text-align: center;
	width: 5rem;
}

body.reach-design-system .woocommerce div.product form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-space-3);
}

body.reach-design-system .woocommerce div.product form.cart::before,
body.reach-design-system .woocommerce div.product form.cart::after {
	display: none;
}

body.reach-design-system .woocommerce div.product .woocommerce-tabs {
	margin-top: var(--rs-section-space);
}

body.reach-design-system .woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: var(--rs-border-default);
	margin: 0 0 var(--rs-space-5);
	padding: 0;
}

body.reach-design-system .woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.reach-design-system .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.reach-design-system .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.reach-design-system .woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	margin: 0 var(--rs-space-4) 0 0;
	padding: 0;
}

body.reach-design-system .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--rs-color-gold);
}

body.reach-design-system .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--rs-color-ink);
	font-weight: var(--rs-font-weight-semibold);
	padding: var(--rs-space-3) 0;
}

/* Tables, cart and order details */
body.reach-design-system .woocommerce table.shop_table {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-collapse: separate;
	border-radius: var(--rs-radius-lg);
	border-spacing: 0;
	box-shadow: var(--rs-shadow-xs);
	color: var(--rs-color-ink);
	margin: 0 0 var(--rs-space-5);
	overflow: hidden;
	width: 100%;
}

body.reach-design-system .woocommerce table.shop_table :where(th, td) {
	border-color: var(--rs-color-border);
	padding: var(--rs-space-4);
	vertical-align: middle;
}

body.reach-design-system .woocommerce table.shop_table th {
	background: var(--rs-color-surface-soft);
	color: var(--rs-color-ink);
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-bold);
}

body.reach-design-system .woocommerce table.shop_table td.product-thumbnail img {
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-sm);
	height: auto;
	max-width: 5rem;
	object-fit: contain;
	width: 5rem;
}

body.reach-design-system .woocommerce table.shop_table td.product-name a {
	color: var(--rs-color-ink);
	font-weight: var(--rs-font-weight-semibold);
	text-decoration: none;
}

body.reach-design-system .woocommerce .cart-collaterals .cart_totals,
body.reach-design-system .woocommerce .cart-collaterals .cross-sells {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-xs);
	box-sizing: border-box;
	padding: clamp(var(--rs-space-5), 3vw, var(--rs-space-6));
}

body.reach-design-system .woocommerce table.cart td.actions .coupon {
	align-items: center;
	display: flex;
	gap: var(--rs-space-3);
}

body.reach-design-system .woocommerce table.cart td.actions .coupon .input-text {
	float: none;
	margin: 0;
	min-width: min(16rem, 100%);
	width: auto;
}

body.reach-design-system .woocommerce .woocommerce-shipping-calculator,
body.reach-design-system .woocommerce .shipping-calculator-form {
	box-sizing: border-box;
	max-width: 100%;
}

body.reach-design-system .woocommerce .shipping-calculator-form {
	background: var(--rs-color-surface-soft);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	margin-top: var(--rs-space-3);
	padding: var(--rs-space-4);
}

/* Checkout */
body.reach-design-system .woocommerce-checkout .col2-set,
body.reach-design-system .woocommerce-checkout #order_review,
body.reach-design-system .woocommerce-checkout #order_review_heading {
	box-sizing: border-box;
}

body.reach-design-system .woocommerce-checkout .woocommerce-billing-fields,
body.reach-design-system .woocommerce-checkout .woocommerce-shipping-fields,
body.reach-design-system .woocommerce-checkout .woocommerce-additional-fields,
body.reach-design-system .woocommerce-checkout #order_review {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-xs);
	padding: clamp(var(--rs-space-5), 3vw, var(--rs-space-6));
}

body.reach-design-system .woocommerce-checkout .woocommerce-shipping-fields,
body.reach-design-system .woocommerce-checkout .woocommerce-additional-fields {
	margin-top: var(--rs-space-5);
}

body.reach-design-system .woocommerce-checkout #order_review_heading {
	color: var(--rs-color-ink);
	font-size: var(--rs-font-size-section-title);
	line-height: var(--rs-line-height-heading);
	margin: var(--rs-space-6) 0 var(--rs-space-4);
}

body.reach-design-system .woocommerce-checkout #payment {
	background: var(--rs-color-surface-soft);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	color: var(--rs-color-ink);
}

body.reach-design-system .woocommerce-checkout #payment ul.payment_methods {
	border-bottom: var(--rs-border-default);
	padding: var(--rs-space-4);
}

body.reach-design-system .woocommerce-checkout #payment div.payment_box {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-sm);
	color: var(--rs-color-muted);
	margin: var(--rs-space-3) 0 0;
	padding: var(--rs-space-4);
}

body.reach-design-system .woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

body.reach-design-system .woocommerce-checkout #payment .place-order {
	margin: 0;
	padding: var(--rs-space-4);
}

body.reach-design-system .woocommerce-checkout #place_order {
	font-size: var(--rs-font-size-lg);
	width: 100%;
}

body.reach-design-system .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
body.reach-design-system .woocommerce-checkout .woocommerce-privacy-policy-text {
	color: var(--rs-color-muted);
	font-size: var(--rs-font-size-sm);
	line-height: 1.55;
}

body.reach-design-system .woocommerce-checkout .woocommerce-invalid :where(input.input-text, select, textarea) {
	border-color: var(--rs-color-error);
}

body.reach-design-system .woocommerce-checkout .woocommerce-validated :where(input.input-text, select, textarea) {
	border-color: var(--rs-color-success);
}

/* Order received and order detail surfaces */
body.reach-design-system .woocommerce :where(.woocommerce-order-overview, .woocommerce-customer-details address) {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-sizing: border-box;
	color: var(--rs-color-ink);
	padding: var(--rs-space-5);
}

body.reach-design-system .woocommerce ul.order_details {
	display: grid;
	gap: var(--rs-space-3);
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	margin: 0 0 var(--rs-space-6);
}

body.reach-design-system .woocommerce ul.order_details li {
	border: 0;
	margin: 0;
	padding: 0;
}