/**
 * Symbiotic Peptides shop and product category pages.
 *
 * Restyles WooCommerce/Kadence archive markup to match the home page product
 * cards. Everything is scoped to body.sp-shop (added in inc/woocommerce/shop.php)
 * (plus .woocommerce on buttons) so it outranks Kadence without !important.
 *
 * Brand rules (see style.css contrast notes):
 *   - Primary buttons: orange background, BLACK text (6.1:1).
 *   - Orange text on white uses --sp-orange-dark (#BE5008, 4.8:1).
 *   - Every interactive element defines default, hover, focus-visible,
 *     active (pressed) and, where relevant, current / loading / added /
 *     disabled states.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

body.sp-shop {
	--sp-shop-text: var( --global-palette4, #1a1a1a );
	--sp-shop-muted: var( --global-palette6, #6b6b6b );
	--sp-shop-border: #ebe7e2;
	--sp-shop-border-strong: #dcd6cc;
	--sp-shop-surface: #fbf8f5;
	--sp-shop-disabled-bg: var( --global-palette8, #f5f5f5 );
	--sp-shop-disabled-border: var( --global-palette7, #e2e2e2 );
	--sp-shop-alert: var( --global-palette13, #b82105 );
	--sp-shop-radius: 20px;
	--sp-shop-ring: 0 0 0 2px var( --sp-white, #ffffff ), 0 0 0 4px var( --sp-orange, #e8620a );
	--sp-shop-speed: 0.18s;
}

/* Page background matches the white home page sections. */
body.sp-shop #inner-wrap {
	background: var( --sp-white, #ffffff );
}

body.sp-shop .content-area {
	margin-top: clamp( 1.75rem, 3.5vw, 2.5rem );
	margin-bottom: clamp( 3rem, 6vw, 5rem );
}

/* ==========================================================================
   2. Hero (template-parts/woocommerce/archive-header.php)
   --------------------------------------------------------------------------
   Full-width band under the site header with the home hero's blueprint grid.
   Category bar: one row that scrolls sideways, with prev/next buttons and
   edge fades driven by assets/js/woocommerce/shop.js.
   ========================================================================== */

body.sp-shop .woocommerce-products-header {
	margin: 0;
	padding: 0;
}

.sp-shop-hero {
	--sp-hero-grid: 88px;
	--sp-hero-line: rgba( 232, 98, 10, 0.14 );

	position: relative;
	overflow: hidden;
	background: var( --sp-white, #ffffff );
	border-bottom: 1px solid var( --sp-shop-border );
}

/* Blueprint grid, fading out to the sides and bottom. */
.sp-shop-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		radial-gradient( ellipse 60% 90% at 88% 0%, rgba( 232, 98, 10, 0.08 ) 0%, transparent 70% ),
		linear-gradient( to right, #ffffff 0%, transparent 10%, transparent 90%, #ffffff 100% ),
		linear-gradient( to bottom, transparent 0%, transparent 45%, #ffffff 100% ),
		linear-gradient( to right, var( --sp-hero-line ) 1px, transparent 1px ),
		linear-gradient( to bottom, var( --sp-hero-line ) 1px, transparent 1px );
	background-size: 100% 100%, 100% 100%, 100% 100%, var( --sp-hero-grid ) var( --sp-hero-grid ), var( --sp-hero-grid ) var( --sp-hero-grid );
	background-position: center top;
	pointer-events: none;
}

.sp-shop-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --global-content-width, 1290px );
	margin-inline: auto;
	padding: clamp( 1.5rem, 3vw, 2.25rem ) var( --global-content-edge-padding, 1.5rem ) clamp( 1.5rem, 3vw, 2rem );
}

.sp-shop-hero__crumbs {
	margin-bottom: clamp( 2rem, 4.5vw, 3.25rem );
}

/* Heading + aside -------------------------------------------------------- */

.sp-shop-hero__intro {
	display: grid;
	grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr );
	align-items: end;
	gap: 2rem clamp( 2rem, 5vw, 4.5rem );
}

.sp-shop-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 1.125rem;
	background: var( --sp-white, #ffffff );
	border: 1px solid rgba( 232, 98, 10, 0.35 );
	border-radius: 999px;
	color: var( --sp-orange-dark, #be5008 );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.sp-shop-hero__dot {
	display: block;
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	background: var( --sp-orange, #e8620a );
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba( 232, 98, 10, 0.18 );
}

.sp-shop-hero__title {
	margin: 0;
	color: var( --sp-black, #000000 );
	font-size: clamp( 2.75rem, 6vw, 4.5rem );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

.sp-shop-hero__aside {
	padding-left: clamp( 1.25rem, 2.5vw, 2rem );
}

.sp-shop-hero__desc {
	max-width: 440px;
	color: var( --sp-shop-muted );
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sp-shop-hero__desc p {
	margin: 0;
}

.sp-shop-hero__desc p + p {
	margin-top: 0.75rem;
}

/* Category bar: single scrolling row ------------------------------------- */

.sp-shop-pills {
	--sp-fade-left: 0px;
	--sp-fade-right: 0px;

	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: clamp( 1.75rem, 3.5vw, 2.5rem );
}

.sp-shop-pills.can-scroll-left {
	--sp-fade-left: 48px;
}

.sp-shop-pills.can-scroll-right {
	--sp-fade-right: 48px;
}

.sp-shop-pills__track {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 0.625rem;
	min-width: 0;
	/* Room for focus rings inside the scroll area. */
	margin: -0.375rem;
	padding: 0.375rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 0.375rem;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000000 var( --sp-fade-left ), #000000 calc( 100% - var( --sp-fade-right ) ), transparent 100% );
	mask-image: linear-gradient( to right, transparent 0, #000000 var( --sp-fade-left ), #000000 calc( 100% - var( --sp-fade-right ) ), transparent 100% );
}

.sp-shop-pills__track::-webkit-scrollbar {
	display: none;
}

.sp-shop-pill {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	min-height: 40px;
	padding: 0.5rem 1.125rem;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-shop-border );
	border-radius: 999px;
	color: var( --sp-shop-text );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: background-color var( --sp-shop-speed ) ease, border-color var( --sp-shop-speed ) ease, color var( --sp-shop-speed ) ease, transform var( --sp-shop-speed ) ease;
}

.sp-shop-pill__count {
	color: var( --sp-shop-muted );
	font-size: 0.75rem;
	font-weight: 500;
	transition: color var( --sp-shop-speed ) ease;
}

/* Hover */
.sp-shop-pill:hover {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
}

/* Focus (keyboard) */
.sp-shop-pill:focus-visible {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-shop-ring );
}

/* Pressed */
.sp-shop-pill:active {
	transform: translateY( 1px );
}

/* Current category */
.sp-shop-pill.is-active,
.sp-shop-pill.is-active:hover {
	background: var( --sp-black, #000000 );
	border-color: var( --sp-black, #000000 );
	color: var( --sp-white, #ffffff );
}

.sp-shop-pill.is-active .sp-shop-pill__count {
	color: rgba( 255, 255, 255, 0.72 );
}

/* Prev / next buttons: shown only when the row overflows. */
body.sp-shop .sp-shop-pills__nav {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-shop-border );
	border-radius: 50%;
	box-shadow: none;
	color: var( --sp-black, #000000 );
	cursor: pointer;
	transition: background-color var( --sp-shop-speed ) ease, border-color var( --sp-shop-speed ) ease, color var( --sp-shop-speed ) ease, opacity var( --sp-shop-speed ) ease, transform var( --sp-shop-speed ) ease;
}

body.sp-shop .sp-shop-pills__nav[hidden] {
	display: none;
}

body.sp-shop .sp-shop-pills__nav .sp-icon {
	width: 18px;
	height: 18px;
}

body.sp-shop .sp-shop-pills__nav:hover {
	background: var( --sp-black, #000000 );
	border-color: var( --sp-black, #000000 );
	box-shadow: none;
	color: var( --sp-white, #ffffff );
}

body.sp-shop .sp-shop-pills__nav:focus-visible {
	border-color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-shop-ring );
}

body.sp-shop .sp-shop-pills__nav:active {
	transform: scale( 0.94 );
}

/* At the start / end of the row. */
body.sp-shop .sp-shop-pills__nav:disabled,
body.sp-shop .sp-shop-pills__nav:disabled:hover {
	background: var( --sp-white, #ffffff );
	border-color: var( --sp-shop-border );
	color: var( --sp-shop-muted );
	opacity: 0.45;
	transform: none;
	cursor: default;
}

/* ==========================================================================
   3. Toolbar: result count, sorting, grid/list toggle
   ========================================================================== */

body.sp-shop .kadence-shop-top-row {
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0 0 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var( --sp-shop-border );
}

body.sp-shop .kadence-woo-results-count {
	margin-right: auto;
}

body.sp-shop .woocommerce-result-count {
	margin: 0;
	color: var( --sp-shop-muted );
	font-size: 0.875rem;
	line-height: 1.4;
}

body.sp-shop .woocommerce-ordering {
	margin: 0;
}

/* Sort: native select (shown only if shop.js does not run) */
body.sp-shop select.orderby {
	height: 40px;
	min-width: 220px;
	padding: 0 2.5rem 0 1.125rem;
	background-color: var( --sp-white, #ffffff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 14px;
	border: 1px solid var( --sp-shop-border );
	border-radius: 999px;
	color: var( --sp-shop-text );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 38px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var( --sp-shop-speed ) ease, box-shadow var( --sp-shop-speed ) ease;
}

body.sp-shop select.orderby:hover {
	border-color: var( --sp-black, #000000 );
}

body.sp-shop select.orderby:focus,
body.sp-shop select.orderby:focus-visible {
	border-color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-shop-ring );
}

body.sp-shop select.orderby:disabled {
	background-color: var( --sp-shop-disabled-bg );
	border-color: var( --sp-shop-disabled-border );
	color: var( --sp-shop-muted );
	cursor: not-allowed;
}

/* Sort: custom listbox (assets/js/woocommerce/shop.js) ------------------
   button   default / hover / focus / open / disabled / loading
   option   default / hover + keyboard-active / pressed / selected / disabled
   ------------------------------------------------------------------------ */

.sp-select {
	position: relative;
	display: inline-block;
	min-width: 240px;
}

body.sp-shop .sp-select__native {
	display: none;
}

body.sp-shop .sp-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 0.875rem 0 1.25rem;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-shop-border );
	border-radius: 999px;
	box-shadow: none;
	color: var( --sp-shop-text );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var( --sp-shop-speed ) ease, box-shadow var( --sp-shop-speed ) ease, color var( --sp-shop-speed ) ease;
}

.sp-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-select__chevron {
	display: inline-flex;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.sp-select__chevron .sp-icon {
	width: 18px;
	height: 18px;
}

/* Hover */
body.sp-shop .sp-select__button:hover {
	background: var( --sp-white, #ffffff );
	border-color: var( --sp-black, #000000 );
	box-shadow: none;
	color: var( --sp-black, #000000 );
}

/* Focus (keyboard) */
body.sp-shop .sp-select__button:focus-visible {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-shop-ring );
}

/* Open */
body.sp-shop .sp-select__button[aria-expanded="true"] {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
}

.sp-select__button[aria-expanded="true"] .sp-select__chevron {
	transform: rotate( 180deg );
}

/* Disabled */
body.sp-shop .sp-select__button:disabled {
	background: var( --sp-shop-disabled-bg );
	border-color: var( --sp-shop-disabled-border );
	color: var( --sp-shop-muted );
	cursor: not-allowed;
}

/* Loading: the sorted page is on its way. */
body.sp-shop .sp-select.is-loading .sp-select__button {
	background: var( --sp-white, #ffffff );
	border-color: var( --sp-shop-border );
	color: var( --sp-shop-text );
	cursor: progress;
}

.sp-select.is-loading .sp-select__chevron .sp-icon {
	display: none;
}

.sp-select.is-loading .sp-select__chevron::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid var( --sp-shop-border );
	border-top-color: var( --sp-orange, #e8620a );
	border-radius: 50%;
	animation: sp-spin 0.7s linear infinite;
}

@keyframes sp-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* List */
.sp-select__list {
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	z-index: 50;
	min-width: 100%;
	max-height: 320px;
	margin: 0;
	padding: 0.375rem;
	overflow-y: auto;
	list-style: none;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-shop-border );
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.1 );
	outline: none;
	animation: sp-select-in 0.16s ease-out;
}

.sp-select__list[hidden] {
	display: none;
}

/* The highlighted option carries the focus ring, not the whole list. */
body.sp-shop .sp-select__list:focus-visible {
	outline: none;
}

@keyframes sp-select-in {
	from {
		opacity: 0;
		transform: translateY( -4px );
	}
}

.sp-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 0;
	padding: 0.625rem 0.75rem 0.625rem 0.875rem;
	border-radius: 10px;
	color: var( --sp-shop-text );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.sp-select__check {
	display: inline-flex;
	color: var( --sp-orange-dark, #be5008 );
	visibility: hidden;
}

.sp-select__check .sp-icon {
	width: 18px;
	height: 18px;
}

/* Hover + keyboard-highlighted */
.sp-select__option.is-active {
	background: var( --sp-orange-tint, rgba( 232, 98, 10, 0.08 ) );
	color: var( --sp-black, #000000 );
}

/* Keyboard users get a visible ring on the highlighted option. */
.sp-select__list:focus-visible .sp-select__option.is-active {
	box-shadow: inset 0 0 0 2px var( --sp-orange, #e8620a );
}

/* Pressed */
.sp-select__option:active {
	background: rgba( 232, 98, 10, 0.16 );
}

/* Selected */
.sp-select__option[aria-selected="true"] {
	color: var( --sp-black, #000000 );
	font-weight: 600;
}

.sp-select__option[aria-selected="true"] .sp-select__check {
	visibility: visible;
}

/* Disabled */
.sp-select__option[aria-disabled="true"] {
	background: transparent;
	color: var( --sp-shop-muted );
	opacity: 0.5;
	cursor: not-allowed;
}

/* Grid / list toggle */
body.sp-shop .kadence-product-toggle-container {
	display: flex;
	gap: 0.375rem;
}

body.sp-shop .kadence-product-toggle-container .kadence-toggle-shop-layout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-shop-border );
	border-radius: 50%;
	color: var( --sp-shop-muted );
	box-shadow: none;
	cursor: pointer;
	transition: background-color var( --sp-shop-speed ) ease, border-color var( --sp-shop-speed ) ease, color var( --sp-shop-speed ) ease, transform var( --sp-shop-speed ) ease;
}

body.sp-shop .kadence-product-toggle-container .kadence-toggle-shop-layout svg {
	width: 18px;
	height: 18px;
	top: 0;
}

body.sp-shop .kadence-product-toggle-container .kadence-toggle-shop-layout:hover {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
	box-shadow: none;
}

body.sp-shop .kadence-product-toggle-container .kadence-toggle-shop-layout:focus-visible {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-shop-ring );
}

body.sp-shop .kadence-product-toggle-container .kadence-toggle-shop-layout:active {
	transform: translateY( 1px );
}

body.sp-shop .kadence-product-toggle-container .kadence-toggle-shop-layout.toggle-active,
body.sp-shop .kadence-product-toggle-container .kadence-toggle-shop-layout.toggle-active:hover {
	background: var( --sp-black, #000000 );
	border-color: var( --sp-black, #000000 );
	color: var( --sp-white, #ffffff );
}

/* ==========================================================================
   4. Product grid
   --------------------------------------------------------------------------
   Cards: template-parts/product-card.php + assets/css/components/product-card.css
   ========================================================================== */

body.sp-shop ul.products {
	gap: 1.5rem;
	margin: 0 0 clamp( 2.5rem, 5vw, 3.5rem );
}

/* ==========================================================================
   7. Pagination
   ========================================================================== */

body.sp-shop nav.woocommerce-pagination {
	text-align: center;
}

body.sp-shop nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

body.sp-shop nav.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

body.sp-shop nav.woocommerce-pagination ul li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 0.75rem;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-shop-border );
	border-radius: 999px;
	color: var( --sp-shop-text );
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color var( --sp-shop-speed ) ease, border-color var( --sp-shop-speed ) ease, color var( --sp-shop-speed ) ease, transform var( --sp-shop-speed ) ease;
}

body.sp-shop nav.woocommerce-pagination ul li .page-numbers .sp-icon {
	width: 18px;
	height: 18px;
}

body.sp-shop nav.woocommerce-pagination ul li a.page-numbers:hover {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
}

body.sp-shop nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
	border-color: var( --sp-black, #000000 );
	color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-shop-ring );
}

body.sp-shop nav.woocommerce-pagination ul li a.page-numbers:active {
	transform: translateY( 1px );
}

/* Current page */
body.sp-shop nav.woocommerce-pagination ul li .page-numbers.current {
	background: var( --sp-black, #000000 );
	border-color: var( --sp-black, #000000 );
	color: var( --sp-white, #ffffff );
}

/* "…" gap: not a link. */
body.sp-shop nav.woocommerce-pagination ul li .page-numbers.dots {
	min-width: 0;
	padding: 0 0.25rem;
	background: transparent;
	border-color: transparent;
	color: var( --sp-shop-muted );
}

/* ==========================================================================
   8. Notices (added to cart without JS, no products found)
   ========================================================================== */

body.sp-shop .woocommerce-message,
body.sp-shop .woocommerce-info,
body.sp-shop .woocommerce-error,
body.sp-shop .woocommerce-no-products-found .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var( --sp-shop-surface );
	border: 1px solid var( --sp-shop-border );
	border-radius: 12px;
	color: var( --sp-shop-text );
	font-size: 0.9375rem;
	line-height: 1.5;
}

body.sp-shop .woocommerce-error {
	background: rgba( 184, 33, 5, 0.05 );
	border-color: rgba( 184, 33, 5, 0.22 );
}

body.sp-shop .woocommerce-message::before,
body.sp-shop .woocommerce-info::before,
body.sp-shop .woocommerce-error::before {
	display: none;
}

body.sp-shop .woocommerce-message .button,
body.sp-shop .woocommerce-info .button {
	order: 2;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.5rem 1.125rem;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-black, #000000 );
	border-radius: 999px;
	box-shadow: none;
	color: var( --sp-black, #000000 );
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var( --sp-shop-speed ) ease, color var( --sp-shop-speed ) ease;
}

body.sp-shop .woocommerce-message .button:hover,
body.sp-shop .woocommerce-info .button:hover,
body.sp-shop .woocommerce-message .button:focus-visible,
body.sp-shop .woocommerce-info .button:focus-visible {
	background: var( --sp-black, #000000 );
	color: var( --sp-white, #ffffff );
}

body.sp-shop .woocommerce-message .button:focus-visible,
body.sp-shop .woocommerce-info .button:focus-visible {
	outline: none;
	box-shadow: var( --sp-shop-ring );
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media ( max-width: 800px ) {
	.sp-shop-hero__intro {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.sp-shop-hero__aside {
		padding-left: 0;
		border-left: 0;
	}

	/* Touch: swipe the row; the bar bleeds to the screen edge. */
	body.sp-shop .sp-shop-pills__nav {
		display: none;
	}

	.sp-shop-pills__track {
		margin-right: calc( -1 * var( --global-content-edge-padding, 1.5rem ) );
		padding-right: var( --global-content-edge-padding, 1.5rem );
	}

	body.sp-shop ul.products {
		gap: 1rem;
	}
}

@media ( max-width: 520px ) {
	body.sp-shop .kadence-woo-results-count {
		flex: 1 1 100%;
	}

	body.sp-shop .woocommerce-ordering,
	body.sp-shop select.orderby,
	.sp-select {
		min-width: 0;
		width: 100%;
	}

	body.sp-shop .kadence-woo-ordering {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.sp-shop-pill,
	body.sp-shop .sp-shop-pills__nav,
	.sp-select__chevron,
	.sp-select__option,
	body.sp-shop nav.woocommerce-pagination ul li .page-numbers {
		transition: none;
		transform: none;
	}

	.sp-select__list {
		animation: none;
	}
}