/*
 * REACH Supply canonical side-cart design.
 *
 * RS-DS-019: the header mini cart uses one overflow-safe item layout, one
 * contained footer, dark product titles, legible quantity controls, and
 * consistent View Cart / Checkout actions on desktop and mobile.
 *
 * This layer is presentation-only. WooCommerce and Breakdance continue to own
 * cart fragments, quantity changes, item removal, subtotals, and navigation.
 */

body.reach-design-system .reach-header-mini-cart,
body.reach-design-system .reach-header-mini-cart *,
body.reach-design-system .reach-header-mini-cart *::before,
body.reach-design-system .reach-header-mini-cart *::after {
	box-sizing: border-box;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-offcanvas-body {
	background: var(--rs-color-surface) !important;
	color: var(--rs-color-ink) !important;
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr) auto !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
	max-width: 100vw !important;
	min-height: 0 !important;
	min-width: 0 !important;
	overscroll-behavior: contain !important;
	overflow: hidden !important;
	width: min(30rem, 100vw) !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-offcanvas-topbar {
	align-items: center !important;
	background: var(--rs-color-surface) !important;
	border-bottom: var(--rs-border-default) !important;
	display: flex !important;
	justify-content: space-between !important;
	min-height: 4rem !important;
	padding: 0.625rem 1rem !important;
	position: relative !important;
	width: 100% !important;
	z-index: 2 !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-offcanvas__close-button {
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--rs-radius-sm) !important;
	color: var(--rs-color-muted) !important;
	display: inline-flex !important;
	height: var(--rs-touch-target-min) !important;
	justify-content: center !important;
	margin: 0 !important;
	min-height: var(--rs-touch-target-min) !important;
	min-width: var(--rs-touch-target-min) !important;
	padding: 0 !important;
	width: var(--rs-touch-target-min) !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-offcanvas__close-button:hover {
	background: var(--rs-color-surface-hover) !important;
	color: var(--rs-color-ink) !important;
}

/* Keep the product region vertically scrollable while removing the unwanted
 * horizontal/side scroll indicator. Different Breakdance releases use
 * different wrapper names, so all known content containers are normalized. */
body.reach-design-system .reach-header-mini-cart :where(
	.bde-mini-cart-offcanvas-content,
	.bde-mini-cart-offcanvas-products,
	.bde-mini-cart-offcanvas-items,
	.widget_shopping_cart_content,
	ul.woocommerce-mini-cart
) {
	max-width: 100% !important;
	min-height: 0 !important;
	min-width: 0 !important;
	overflow-x: hidden !important;
	overscroll-behavior-x: none !important;
	scrollbar-width: none !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart :where(
	.bde-mini-cart-offcanvas-content,
	.bde-mini-cart-offcanvas-products,
	.bde-mini-cart-offcanvas-items,
	ul.woocommerce-mini-cart
) {
	overflow-y: auto !important;
}

body.reach-design-system .reach-header-mini-cart :where(
	.bde-mini-cart-offcanvas-content,
	.bde-mini-cart-offcanvas-products,
	.bde-mini-cart-offcanvas-items,
	.widget_shopping_cart_content,
	ul.woocommerce-mini-cart
)::-webkit-scrollbar {
	height: 0 !important;
	width: 0 !important;
}

body.reach-design-system .reach-header-mini-cart
ul.woocommerce-mini-cart {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item {
	align-items: start !important;
	background: var(--rs-color-surface) !important;
	border: 0 !important;
	border-bottom: var(--rs-border-default) !important;
	column-gap: 0.875rem !important;
	display: grid !important;
	grid-template-areas:
		"thumb title remove"
		"controls controls controls" !important;
	grid-template-columns: 5rem minmax(0, 1fr) 2.75rem !important;
	grid-template-rows: auto auto !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
	padding: 1.125rem 1rem !important;
	position: relative !important;
	row-gap: 0.875rem !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item:last-child {
	border-bottom: 0 !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-thumbnail {
	align-items: center !important;
	align-self: start !important;
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	display: grid !important;
	grid-area: thumb !important;
	height: 5rem !important;
	justify-items: center !important;
	margin: 0 !important;
	max-height: 5rem !important;
	max-width: 5rem !important;
	min-height: 5rem !important;
	min-width: 5rem !important;
	overflow: hidden !important;
	padding: 0 !important;
	place-items: center !important;
	width: 5rem !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-thumbnail :where(a, img) {
	display: block !important;
	height: 100% !important;
	margin: 0 !important;
	max-height: 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-thumbnail img {
	object-fit: contain !important;
	padding: 0.375rem !important;
}

/* Product titles are always neutral/dark. Header link hover rules must not turn
 * the drawer's merchandise names gold or white on desktop. */
body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-title,
body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-title :where(a, a:link, a:visited) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--rs-color-ink) !important;
	font-size: 1rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	grid-area: title !important;
	line-height: 1.35 !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow-wrap: anywhere !important;
	padding: 0 !important;
	text-decoration: none !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-title :where(a:hover, a:focus) {
	color: var(--rs-color-ink-hover) !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-title dl.variation {
	color: var(--rs-color-muted) !important;
	display: grid !important;
	font-size: var(--rs-font-size-sm) !important;
	gap: 0.1875rem 0.5rem !important;
	grid-template-columns: max-content minmax(0, 1fr) !important;
	line-height: 1.35 !important;
	margin: 0.625rem 0 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-title dl.variation :where(dt, dd, p) {
	background: transparent !important;
	border: 0 !important;
	color: inherit !important;
	float: none !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-title dl.variation dt {
	color: var(--rs-color-subtle) !important;
	font-weight: var(--rs-font-weight-semibold) !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item-title dl.variation dd {
	color: var(--rs-color-ink) !important;
	font-weight: var(--rs-font-weight-semibold) !important;
	overflow-wrap: anywhere !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item .remove_from_cart_button {
	align-items: center !important;
	align-self: start !important;
	background: var(--rs-color-error-soft) !important;
	border: 1px solid rgb(163 58 58 / 20%) !important;
	border-radius: var(--rs-radius-sm) !important;
	box-shadow: none !important;
	color: var(--rs-color-error) !important;
	display: inline-flex !important;
	font-size: 1.125rem !important;
	grid-area: remove !important;
	height: 2.75rem !important;
	justify-content: center !important;
	justify-self: end !important;
	line-height: 1 !important;
	margin: 0 !important;
	max-height: 2.75rem !important;
	max-width: 2.75rem !important;
	min-height: 2.75rem !important;
	min-width: 2.75rem !important;
	padding: 0 !important;
	position: static !important;
	text-decoration: none !important;
	transform: none !important;
	width: 2.75rem !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item .remove_from_cart_button:hover {
	background: var(--rs-color-error) !important;
	color: var(--rs-color-on-ink) !important;
}

/* Quantity and line total share a contained purchase row. The 60px numeric
 * field keeps four-digit quantities readable without swallowing the price. */
body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity {
	align-items: center !important;
	border-top: var(--rs-border-default) !important;
	display: flex !important;
	gap: 1rem !important;
	grid-area: controls !important;
	justify-content: space-between !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: visible !important;
	padding: 0.875rem 0 0 !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity .quantity {
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-strong) !important;
	border-radius: var(--rs-radius-sm) !important;
	box-shadow: var(--rs-shadow-xs) !important;
	display: grid !important;
	flex: 0 0 8.75rem !important;
	grid-template-columns: 2.5rem 3.75rem 2.5rem !important;
	height: 2.75rem !important;
	margin: 0 !important;
	max-width: 8.75rem !important;
	min-height: 2.75rem !important;
	min-width: 8.75rem !important;
	overflow: hidden !important;
	padding: 0 !important;
	width: 8.75rem !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity .quantity :where(
	.bde-quantity-button,
	.minus,
	.plus,
	button
) {
	align-items: center !important;
	background: var(--rs-color-surface-soft) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--rs-color-ink) !important;
	display: grid !important;
	font-size: 1.375rem !important;
	height: 2.625rem !important;
	justify-items: center !important;
	margin: 0 !important;
	max-width: 2.5rem !important;
	min-height: 2.625rem !important;
	min-width: 2.5rem !important;
	padding: 0 !important;
	place-items: center !important;
	position: static !important;
	transform: none !important;
	width: 2.5rem !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity .quantity :where(
	.bde-quantity-button,
	.minus,
	.plus,
	button
):hover {
	background: var(--rs-color-warning-soft) !important;
	color: var(--rs-color-warning) !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity .quantity input.qty {
	appearance: textfield !important;
	background: var(--rs-color-surface) !important;
	border: 0 !important;
	border-left: var(--rs-border-default) !important;
	border-radius: 0 !important;
	border-right: var(--rs-border-default) !important;
	color: var(--rs-color-ink) !important;
	font-size: 1rem !important;
	font-variant-numeric: tabular-nums;
	font-weight: var(--rs-font-weight-bold) !important;
	height: 2.625rem !important;
	line-height: 2.625rem !important;
	margin: 0 !important;
	max-width: 3.75rem !important;
	min-height: 2.625rem !important;
	min-width: 3.75rem !important;
	padding: 0 0.25rem !important;
	position: static !important;
	text-align: center !important;
	transform: none !important;
	width: 3.75rem !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity .quantity input.qty::-webkit-inner-spin-button,
body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity .quantity input.qty::-webkit-outer-spin-button {
	appearance: none !important;
	margin: 0 !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity .quantity:focus-within {
	border-color: var(--rs-color-focus) !important;
	box-shadow: var(--rs-focus-ring) !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-quantity > :where(.amount, .woocommerce-Price-amount),
body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-item .bde-mini-cart-quantity > :where(.amount, .woocommerce-Price-amount) {
	color: var(--rs-color-ink) !important;
	flex: 0 1 auto !important;
	font-size: var(--rs-font-size-lg) !important;
	font-variant-numeric: tabular-nums;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: 1.2 !important;
	margin: 0 0 0 auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	text-align: right !important;
	white-space: nowrap !important;
}

/* Footer content is in normal flow inside the drawer grid. Subtotal, buttons,
 * and the continue-shopping link cannot overlap one another. */
body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-offcanvas-footer {
	background: var(--rs-color-surface) !important;
	border-top: var(--rs-border-default) !important;
	box-shadow: 0 -8px 24px rgb(27 42 56 / 7%) !important;
	inset: auto !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
	padding: 1rem !important;
	position: relative !important;
	transform: none !important;
	width: 100% !important;
	z-index: 3 !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__total {
	align-items: baseline !important;
	color: var(--rs-color-ink) !important;
	display: grid !important;
	font-size: var(--rs-font-size-base) !important;
	gap: 1rem !important;
	grid-template-columns: auto minmax(0, 1fr) !important;
	line-height: 1.35 !important;
	margin: 0 0 1rem !important;
	min-height: 0 !important;
	padding: 0 0 0.875rem !important;
	position: static !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__total :where(strong, b) {
	color: var(--rs-color-ink) !important;
	font-weight: var(--rs-font-weight-semibold) !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__total .amount {
	color: var(--rs-color-ink) !important;
	font-size: var(--rs-font-size-xl) !important;
	font-variant-numeric: tabular-nums;
	font-weight: var(--rs-font-weight-bold) !important;
	justify-self: end !important;
	margin: 0 !important;
	text-align: right !important;
	white-space: nowrap !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__buttons {
	display: grid !important;
	gap: 0.75rem !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__buttons .button {
	align-items: center !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: var(--rs-shadow-sm) !important;
	display: inline-flex !important;
	font-size: var(--rs-font-size-base) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	justify-content: center !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	min-height: 3.25rem !important;
	min-width: 0 !important;
	padding: 0.75rem 1rem !important;
	position: static !important;
	text-align: center !important;
	text-decoration: none !important;
	transform: none !important;
	width: 100% !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: var(--rs-color-ink) !important;
	border: 1px solid var(--rs-color-ink) !important;
	color: var(--rs-color-on-ink) !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__buttons .button.checkout {
	background: var(--rs-color-gold) !important;
	border: 1px solid var(--rs-color-gold-hover) !important;
	color: var(--rs-color-on-gold) !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background: var(--rs-color-ink-hover) !important;
	color: var(--rs-color-on-ink) !important;
}

body.reach-design-system .reach-header-mini-cart
.woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--rs-color-gold-hover) !important;
	color: var(--rs-color-on-gold) !important;
}

body.reach-design-system .reach-header-mini-cart
.bde-mini-cart-continue-link {
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--rs-color-ink) !important;
	display: flex !important;
	font-size: var(--rs-font-size-sm) !important;
	font-weight: var(--rs-font-weight-semibold) !important;
	justify-content: center !important;
	line-height: 1.35 !important;
	margin: 0.625rem 0 0 !important;
	min-height: var(--rs-touch-target-min) !important;
	padding: 0.5rem !important;
	position: static !important;
	text-align: center !important;
	text-decoration-color: var(--rs-color-gold) !important;
	text-underline-offset: 0.25rem !important;
	transform: none !important;
	width: 100% !important;
}

@media (max-width: 767px) {
	body.reach-design-system .reach-header-mini-cart
	.bde-mini-cart-offcanvas-body {
		width: 100vw !important;
	}

	body.reach-design-system .reach-header-mini-cart
	.bde-mini-cart-item {
		grid-template-columns: 4.75rem minmax(0, 1fr) 2.75rem !important;
		padding: 1rem !important;
	}

	body.reach-design-system .reach-header-mini-cart
	.bde-mini-cart-item-thumbnail {
		height: 4.75rem !important;
		max-height: 4.75rem !important;
		max-width: 4.75rem !important;
		min-height: 4.75rem !important;
		min-width: 4.75rem !important;
		width: 4.75rem !important;
	}

	body.reach-design-system .reach-header-mini-cart
	.bde-mini-cart-offcanvas-footer {
		padding: 1rem !important;
	}
}

@media (max-width: 340px) {
	body.reach-design-system .reach-header-mini-cart
	.bde-mini-cart-item {
		column-gap: 0.625rem !important;
		grid-template-columns: 4.25rem minmax(0, 1fr) 2.5rem !important;
		padding: 0.75rem !important;
	}

	body.reach-design-system .reach-header-mini-cart
	.bde-mini-cart-item-thumbnail {
		height: 4.25rem !important;
		max-height: 4.25rem !important;
		max-width: 4.25rem !important;
		min-height: 4.25rem !important;
		min-width: 4.25rem !important;
		width: 4.25rem !important;
	}

	body.reach-design-system .reach-header-mini-cart
	.bde-mini-cart-quantity {
		gap: 0.625rem !important;
	}

	body.reach-design-system .reach-header-mini-cart
	.woocommerce-mini-cart__buttons {
		gap: 0.5rem !important;
	}

	body.reach-design-system .reach-header-mini-cart
	.woocommerce-mini-cart__buttons .button {
		font-size: var(--rs-font-size-sm) !important;
		padding-inline: 0.625rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.reach-design-system .reach-header-mini-cart * {
		transition: none !important;
	}
}