/*
 * REACH Supply shop archive design system.
 *
 * RS-DS-030: the WooCommerce shop archive uses one canonical 1280px content
 * width, one neutral page canvas, and one consistent card/component language.
 * The Breakdance archive template remains authoritative for category content,
 * links, images, and ordering guidance.
 */

body.reach-design-system.woocommerce-shop {
	background: var(--rs-color-page) !important;
	color: var(--rs-color-ink) !important;
}

body.reach-design-system.woocommerce-shop #bde-main {
	background: var(--rs-color-page) !important;
}

body.reach-design-system.woocommerce-shop .reach-product-archive,
body.reach-design-system.woocommerce-shop .reach-archive-subcategory-area {
	background: var(--rs-color-page) !important;
	padding-right: var(--rs-page-gutter) !important;
	padding-left: var(--rs-page-gutter) !important;
}

body.reach-design-system.woocommerce-shop .reach-product-archive {
	padding-top: clamp(1.5rem, 3.5vw, 2.5rem) !important;
	padding-bottom: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-subcategory-area {
	padding-top: var(--rs-space-5) !important;
	padding-bottom: var(--rs-section-space) !important;
}

body.reach-design-system.woocommerce-shop .reach-product-archive > .section-container,
body.reach-design-system.woocommerce-shop .reach-archive-subcategory-area > .section-container {
	box-sizing: border-box !important;
	width: min(100%, var(--rs-container-width)) !important;
	max-width: var(--rs-container-width) !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-header-card,
body.reach-design-system.woocommerce-shop .reach-category-navigation {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: var(--rs-border-default) !important;
	border-top: 4px solid var(--rs-color-gold) !important;
	border-radius: var(--rs-radius-lg) !important;
	background: var(--rs-color-surface) !important;
	box-shadow: var(--rs-shadow-sm) !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-header-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: var(--rs-space-3) !important;
	padding: clamp(1.5rem, 4vw, 2.5rem) !important;
	overflow: hidden !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-header-card .woocommerce-breadcrumb,
body.reach-design-system.woocommerce-shop .reach-archive-header-card .bde-woo-breadcrumb {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: var(--rs-space-2) !important;
	margin: 0 !important;
	color: var(--rs-color-subtle) !important;
	font-size: var(--rs-font-size-sm) !important;
	font-weight: var(--rs-font-weight-medium) !important;
	line-height: var(--rs-line-height-heading) !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-header-card .woocommerce-breadcrumb a {
	color: var(--rs-color-ink) !important;
	font-weight: var(--rs-font-weight-semibold) !important;
	text-decoration: none !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-header-card .bde-woo-breadcrumb_delimiter {
	width: 0.4rem !important;
	height: 0.4rem !important;
	margin: 0 var(--rs-space-1) !important;
	border-top: 1.5px solid var(--rs-color-subtle) !important;
	border-right: 1.5px solid var(--rs-color-subtle) !important;
	transform: rotate(45deg) !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-title {
	max-width: 58rem !important;
	margin: 0 !important;
	color: var(--rs-color-ink) !important;
	font-size: var(--rs-font-size-page-title) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: var(--rs-line-height-tight) !important;
	letter-spacing: -0.035em !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-description {
	max-width: var(--rs-content-width) !important;
	margin: 0 !important;
	color: var(--rs-color-muted) !important;
	font-size: var(--rs-font-size-lg) !important;
	line-height: var(--rs-line-height-body) !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-description p {
	margin: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-category-navigation {
	padding: clamp(1.5rem, 4vw, 2.5rem) !important;
	overflow: hidden !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-subcategory-heading {
	position: relative !important;
	margin: 0 0 var(--rs-space-3) !important;
	padding-top: var(--rs-space-4) !important;
	color: var(--rs-color-ink) !important;
	font-size: var(--rs-font-size-section-title) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: var(--rs-line-height-tight) !important;
	letter-spacing: -0.025em !important;
}

body.reach-design-system.woocommerce-shop .reach-archive-subcategory-heading::before {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 3.5rem !important;
	height: 3px !important;
	border-radius: var(--rs-radius-pill) !important;
	background: var(--rs-color-gold) !important;
	content: "" !important;
}

body.reach-design-system.woocommerce-shop .reach-category-renderer {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-seo-intro {
	max-width: 62rem !important;
	margin: 0 !important;
	color: var(--rs-color-muted) !important;
	font-size: var(--rs-font-size-base) !important;
	line-height: var(--rs-line-height-body) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-seo-intro p {
	margin: 0 0 var(--rs-space-3) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-seo-intro p:last-child {
	margin-bottom: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-seo-intro strong {
	color: var(--rs-color-ink) !important;
	font-weight: var(--rs-font-weight-bold) !important;
}

body.reach-design-system.woocommerce-shop .reach-category-explorer-note {
	max-width: 62rem !important;
	margin: var(--rs-space-5) 0 var(--rs-space-4) !important;
	padding: var(--rs-space-3) var(--rs-space-4) !important;
	border: var(--rs-border-default) !important;
	border-left: 4px solid var(--rs-color-gold) !important;
	border-radius: var(--rs-radius-sm) !important;
	background: var(--rs-color-surface-soft) !important;
	color: var(--rs-color-muted) !important;
	font-size: var(--rs-font-size-sm) !important;
	font-weight: var(--rs-font-weight-medium) !important;
	line-height: var(--rs-line-height-body) !important;
}

body.reach-design-system.woocommerce-shop .reach-category-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: var(--rs-space-4) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile {
	position: relative !important;
	display: grid !important;
	grid-template-rows: auto 1fr auto !important;
	min-width: 0 !important;
	min-height: 16.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	background: var(--rs-color-surface-soft) !important;
	color: var(--rs-color-ink) !important;
	box-shadow: var(--rs-shadow-xs) !important;
	text-decoration: none !important;
	transition: border-color var(--rs-transition-fast), box-shadow var(--rs-transition-fast), transform var(--rs-transition-fast) !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__visual {
	display: grid !important;
	height: 11rem !important;
	place-items: center !important;
	padding: var(--rs-space-4) !important;
	overflow: hidden !important;
	border-bottom: var(--rs-border-default) !important;
	background: var(--rs-color-surface) !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__image {
	display: block !important;
	width: 100% !important;
	max-width: 9rem !important;
	height: 100% !important;
	max-height: 8.75rem !important;
	margin: 0 auto !important;
	object-fit: contain !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__fallback {
	display: grid !important;
	width: 5rem !important;
	height: 5rem !important;
	place-items: center !important;
	color: var(--rs-color-focus) !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__fallback svg {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__body {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: var(--rs-space-4) var(--rs-space-4) var(--rs-space-2) !important;
	text-align: center !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__body h3 {
	margin: 0 !important;
	color: var(--rs-color-ink) !important;
	font-size: var(--rs-font-size-card-title) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: var(--rs-line-height-heading) !important;
	letter-spacing: -0.015em !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__arrow {
	display: grid !important;
	width: var(--rs-touch-target-min) !important;
	height: var(--rs-touch-target-min) !important;
	place-items: center !important;
	justify-self: center !important;
	margin: 0 0 var(--rs-space-4) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-pill) !important;
	background: var(--rs-color-surface) !important;
	color: var(--rs-color-ink) !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile__arrow svg {
	width: 1.125rem !important;
	height: 1.125rem !important;
}

@media (hover: hover) {
	body.reach-design-system.woocommerce-shop .reach-category-tile:hover {
		border-color: var(--rs-color-border-strong) !important;
		box-shadow: var(--rs-shadow-sm) !important;
		transform: translateY(-2px) !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile:hover .reach-category-tile__arrow {
		border-color: var(--rs-color-gold) !important;
		background: var(--rs-color-gold) !important;
	}
}

body.reach-design-system.woocommerce-shop .reach-shop-seo-guide {
	display: grid !important;
	grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr) !important;
	grid-template-areas:
		"heading visual"
		"links links"
		"steps steps"
		"details details"
		"note note" !important;
	gap: var(--rs-space-5) var(--rs-space-6) !important;
	width: 100% !important;
	margin: var(--rs-space-8) 0 0 !important;
	padding: var(--rs-space-7) 0 0 !important;
	border-top: var(--rs-border-default) !important;
	background: transparent !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-heading {
	grid-area: heading !important;
	align-self: center !important;
	max-width: 48rem !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-eyebrow {
	display: inline-block !important;
	margin: 0 0 var(--rs-space-3) !important;
	color: var(--rs-color-warning) !important;
	font-size: var(--rs-font-size-xs) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-heading h2 {
	margin: 0 0 var(--rs-space-3) !important;
	color: var(--rs-color-ink) !important;
	font-size: var(--rs-font-size-section-title) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: var(--rs-line-height-tight) !important;
	letter-spacing: -0.025em !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-heading p {
	margin: 0 !important;
	color: var(--rs-color-muted) !important;
	font-size: var(--rs-font-size-base) !important;
	line-height: var(--rs-line-height-body) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-visual {
	grid-area: visual !important;
	align-self: stretch !important;
	margin: 0 !important;
	padding: var(--rs-space-4) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	background: var(--rs-color-surface-soft) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-visual__image {
	display: block !important;
	width: 100% !important;
	height: 15rem !important;
	margin: 0 !important;
	border-radius: var(--rs-radius-sm) !important;
	background: var(--rs-color-surface) !important;
	object-fit: contain !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-visual figcaption {
	margin: var(--rs-space-3) 0 0 !important;
	color: var(--rs-color-subtle) !important;
	font-size: var(--rs-font-size-xs) !important;
	line-height: var(--rs-line-height-body) !important;
	text-align: center !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-links {
	grid-area: links !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--rs-space-2) !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-links a {
	display: inline-flex !important;
	min-height: var(--rs-touch-target-min) !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--rs-space-2) var(--rs-space-4) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-sm) !important;
	background: var(--rs-color-surface-soft) !important;
	color: var(--rs-color-ink) !important;
	font-size: var(--rs-font-size-sm) !important;
	font-weight: var(--rs-font-weight-semibold) !important;
	text-decoration: none !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-links a:hover {
	border-color: var(--rs-color-gold) !important;
	background: var(--rs-color-surface-hover) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-grid {
	grid-area: steps !important;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--rs-space-4) !important;
	margin: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-grid article {
	position: relative !important;
	min-width: 0 !important;
	padding: var(--rs-space-5) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	background: var(--rs-color-surface-soft) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-grid article > span {
	display: grid !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	place-items: center !important;
	margin: 0 0 var(--rs-space-4) !important;
	border-radius: var(--rs-radius-sm) !important;
	background: var(--rs-color-ink) !important;
	color: var(--rs-color-on-ink) !important;
	font-size: var(--rs-font-size-sm) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	box-shadow: inset 0 -3px 0 var(--rs-color-gold) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-grid h3,
body.reach-design-system.woocommerce-shop .reach-shop-guide-details h3,
body.reach-design-system.woocommerce-shop .reach-shop-guide-note h3 {
	margin: 0 0 var(--rs-space-2) !important;
	color: var(--rs-color-ink) !important;
	font-size: var(--rs-font-size-xl) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: var(--rs-line-height-heading) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-grid p,
body.reach-design-system.woocommerce-shop .reach-shop-guide-details p,
body.reach-design-system.woocommerce-shop .reach-shop-guide-details li,
body.reach-design-system.woocommerce-shop .reach-shop-guide-note p {
	color: var(--rs-color-muted) !important;
	font-size: var(--rs-font-size-sm) !important;
	line-height: var(--rs-line-height-body) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-grid p,
body.reach-design-system.woocommerce-shop .reach-shop-guide-note p {
	margin: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details {
	grid-area: details !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.75fr) !important;
	gap: var(--rs-space-4) !important;
	margin: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details > div,
body.reach-design-system.woocommerce-shop .reach-shop-guide-details > aside {
	min-width: 0 !important;
	padding: var(--rs-space-5) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	background: var(--rs-color-surface-soft) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details h3:not(:first-child) {
	margin-top: var(--rs-space-5) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details p {
	margin: 0 0 var(--rs-space-3) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details p:last-child {
	margin-bottom: 0 !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details ul {
	margin: var(--rs-space-3) 0 0 !important;
	padding-left: 1.25rem !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details li {
	margin: 0 0 var(--rs-space-2) !important;
	padding-left: var(--rs-space-1) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-details a,
body.reach-design-system.woocommerce-shop .reach-shop-guide-grid a,
body.reach-design-system.woocommerce-shop .reach-shop-guide-note a {
	color: var(--rs-color-ink) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--rs-color-gold) !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-note {
	grid-area: note !important;
	margin: 0 !important;
	padding: var(--rs-space-5) !important;
	border: var(--rs-border-default) !important;
	border-left: 4px solid var(--rs-color-gold) !important;
	border-radius: var(--rs-radius-md) !important;
	background: var(--rs-color-surface-soft) !important;
}

body.reach-design-system.woocommerce-shop .reach-shop-guide-note p + p {
	margin-top: var(--rs-space-3) !important;
}

body.reach-design-system.woocommerce-shop .reach-category-tile:focus-visible,
body.reach-design-system.woocommerce-shop .reach-shop-guide-links a:focus-visible,
body.reach-design-system.woocommerce-shop .reach-shop-seo-guide a:focus-visible {
	outline: 3px solid rgb(58 90 115 / 28%) !important;
	outline-offset: 3px !important;
}

@media (max-width: 1023px) {
	body.reach-design-system.woocommerce-shop .reach-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-seo-guide {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"heading"
			"visual"
			"links"
			"steps"
			"details"
			"note" !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-visual__image {
		height: 18rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-details {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 767px) {
	body.reach-design-system.woocommerce-shop .reach-product-archive,
	body.reach-design-system.woocommerce-shop .reach-archive-subcategory-area {
		padding-right: 1rem !important;
		padding-left: 1rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-product-archive {
		padding-top: 1.25rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-archive-subcategory-area {
		padding-top: 1rem !important;
		padding-bottom: 3rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-archive-header-card,
	body.reach-design-system.woocommerce-shop .reach-category-navigation {
		border-radius: 0.875rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-archive-header-card,
	body.reach-design-system.woocommerce-shop .reach-category-navigation {
		padding: 1.25rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-archive-title {
		font-size: clamp(2rem, 10vw, 2.5rem) !important;
	}

	body.reach-design-system.woocommerce-shop .reach-archive-description {
		font-size: 1rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-archive-subcategory-heading {
		font-size: clamp(1.625rem, 8vw, 2rem) !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-explorer-note {
		margin-top: 1.25rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile {
		min-height: 12.5rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile__visual {
		height: 7.75rem !important;
		padding: 0.75rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile__image {
		max-width: 6.75rem !important;
		max-height: 6.5rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile__fallback {
		width: 3.75rem !important;
		height: 3.75rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile__body {
		padding: 0.875rem 0.75rem 0.375rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile__body h3 {
		font-size: 0.9375rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-category-tile__arrow {
		width: 2.25rem !important;
		height: 2.25rem !important;
		min-width: 2.25rem !important;
		min-height: 2.25rem !important;
		margin-bottom: 0.75rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-seo-guide {
		gap: 1.25rem !important;
		margin-top: 2.5rem !important;
		padding-top: 2rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-heading h2 {
		font-size: clamp(1.625rem, 8vw, 2rem) !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-visual {
		padding: 0.75rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-visual__image {
		height: 13rem !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-links {
		display: grid !important;
		grid-template-columns: 1fr !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-grid {
		grid-template-columns: 1fr !important;
	}

	body.reach-design-system.woocommerce-shop .reach-shop-guide-grid article,
	body.reach-design-system.woocommerce-shop .reach-shop-guide-details > div,
	body.reach-design-system.woocommerce-shop .reach-shop-guide-details > aside,
	body.reach-design-system.woocommerce-shop .reach-shop-guide-note {
		padding: 1.125rem !important;
	}
}

@media (max-width: 359px) {
	body.reach-design-system.woocommerce-shop .reach-category-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.reach-design-system.woocommerce-shop .reach-category-tile {
		transition: none !important;
	}
}