/**
 * Medanta Organics — shop filtering/toolbar/drawer/pagination skin.
 *
 * BUILD OUTPUT — do not edit directly. This is a verbatim copy of
 * assets/src/css/shop.css (no preprocessing needed - it's already plain
 * CSS). See docs/shop-filtering.md, "Asset build process", for why this
 * project has no bundler and how to regenerate this file after editing the
 * source.
 *
 * Consumes the theme's design tokens (custom-store-theme/assets/css/tokens.css,
 * loaded globally) — no values are hard-coded here that already exist as a
 * --mo-* custom property. Product card and grid-column styling live in the
 * theme's woocommerce.css (Phase 1); this file is scoped to the filtering UI
 * added in Phase 4 only: .mo-shop-layout, .mo-shop-filters, .mo-shop-toolbar,
 * #mo-shop-grid loading state, and .mo-shop-pagination.
 *
 * Breakpoints tested: 320, 375, 480, 768, 1024, 1280, 1440px. The
 * filters/drawer switch from an always-visible sidebar to an off-canvas
 * drawer at 1024px, matching assets/js/shop.js's (filter-drawer section)
 * MOBILE_QUERY.
 */

/* ==========================================================================
   Layout — sidebar + main, single column until 1024px
   ========================================================================== */

.mo-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mo-space-6);
	align-items: start;
	max-width: var(--mo-container-wide);
	margin-inline: auto;
	padding-inline: var(--mo-gutter);
	padding-block: var(--mo-space-6);
}

@media (min-width: 1024px) {
	.mo-shop-layout {
		grid-template-columns: 260px minmax(0, 1fr);
	}
}

.mo-shop-main {
	min-width: 0; /* prevent the grid item forcing horizontal overflow */
}

/* ==========================================================================
   Toolbar — result count, mobile filter toggle, sort, per-page
   ========================================================================== */

.mo-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mo-space-3);
	margin-bottom: var(--mo-space-5);
	padding-bottom: var(--mo-space-4);
	border-bottom: 1px solid var(--mo-color-line);
}

.mo-shop-toolbar__count {
	margin: 0;
	color: var(--mo-color-muted);
	font-size: var(--mo-text-sm);
	flex: 1 1 auto;
	order: 2;
}

.mo-shop-toolbar__sort,
.mo-shop-toolbar__per-page {
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
	margin: 0;
	order: 3;
}

.mo-shop-toolbar__sort label,
.mo-shop-toolbar__per-page label {
	font-size: var(--mo-text-sm);
	color: var(--mo-color-muted);
	white-space: nowrap;
}

.mo-shop-toolbar__select {
	width: auto;
	min-height: 44px;
}

/* Mobile filter-drawer toggle button — only meaningful under 1024px, but kept
   in the DOM (not CSS-hidden with `display:none`, which would also hide it
   from AT) so it can be reached by keyboard; it is visually hidden on
   desktop where the sidebar is always open. */
.mo-shop-toolbar__filters-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--mo-space-4);
	order: 1;
	font: inherit;
	font-weight: var(--mo-weight-medium);
	color: var(--mo-color-ink);
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius-pill);
	cursor: pointer;
}

@media (min-width: 1024px) {
	.mo-shop-toolbar__filters-toggle {
		display: none;
	}
}

/* ==========================================================================
   Filters — desktop sidebar / mobile off-canvas drawer
   ========================================================================== */

.mo-shop-filters {
	display: block;
}

/* The <summary> disclosure triangle is only the toggle on narrow viewports
   before JS enhances things further; on desktop the panel is always open and
   visible, so the summary (and its default marker) is hidden entirely. */
.mo-shop-filters__summary {
	display: none;
}

@media (max-width: 1023px) {
	.mo-shop-filters__summary {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: var(--mo-space-2) 0;
		font-weight: var(--mo-weight-medium);
		color: var(--mo-color-ink);
		cursor: pointer;
		list-style: none;
	}
	.mo-shop-filters__summary::-webkit-details-marker {
		display: none;
	}
}

.mo-shop-filters__panel {
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius);
	padding: var(--mo-space-5);
}

.mo-shop-filters__panel:focus {
	outline: none; /* programmatic focus target only (JS drawer open) */
}
.mo-shop-filters__panel:focus-visible {
	outline: 2px solid var(--mo-color-focus);
	outline-offset: -2px;
}

.mo-shop-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mo-space-3);
	margin-bottom: var(--mo-space-4);
}

.mo-shop-filters__title {
	margin: 0;
	font-size: var(--mo-text-lg);
}

/* Only meaningful inside the mobile overlay; hidden on the always-open
   desktop sidebar where there is nothing to "close" back to. */
.mo-shop-filters__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: var(--mo-text-xl);
	line-height: 1;
	color: var(--mo-color-ink);
	background: transparent;
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius-pill);
	cursor: pointer;
}
@media (max-width: 1023px) {
	.mo-shop-filters__close {
		display: inline-flex;
	}
}

.mo-shop-filters__clear {
	display: inline-block;
	margin-bottom: var(--mo-space-4);
	font-size: var(--mo-text-sm);
}

.mo-shop-filters__group {
	margin: 0 0 var(--mo-space-5);
	padding: 0;
	border: 0;
}
.mo-shop-filters__group legend {
	margin-bottom: var(--mo-space-2);
	padding: 0;
	font-weight: var(--mo-weight-medium);
	color: var(--mo-color-ink);
}

.mo-shop-filters__option {
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
	min-height: 44px;
	font-size: var(--mo-text-sm);
	cursor: pointer;
}
.mo-shop-filters__option input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.mo-shop-filters__count {
	color: var(--mo-color-muted);
	font-size: var(--mo-text-xs);
}

.mo-shop-filters__price-range {
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
}
.mo-shop-filters__price-range label {
	flex: 1 1 0;
}
.mo-shop-filters__price-range input {
	min-height: 44px;
}

.mo-shop-filters__apply {
	width: 100%;
}

/* --- Mobile: off-canvas overlay -----------------------------------------
   Scoped to `body.mo-scroll-locked`, a class filter-drawer.js ONLY adds when
   it has actually opened the drawer on a narrow viewport. Without JS the
   <details open> panel therefore stays in normal document flow (see the
   no-JS fallback note below) instead of becoming an unclosable fixed
   overlay - `[open]` alone is the permanent no-JS baseline state and must
   never trigger fixed positioning on its own. */
@media (max-width: 1023px) {
	body.mo-scroll-locked .mo-shop-filters[open] .mo-shop-filters__panel {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(85vw, 360px);
		max-width: 100vw;
		overflow-y: auto;
		z-index: var(--mo-z-drawer);
		border-radius: 0;
		box-shadow: var(--mo-shadow-lg);
		animation: mo-shop-drawer-in 200ms ease;
	}
}

@keyframes mo-shop-drawer-in {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.mo-scroll-locked .mo-shop-filters[open] .mo-shop-filters__panel {
		animation: none;
	}
}

.mo-shop-filters__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(28, 43, 39, 0.5);
	z-index: var(--mo-z-overlay);
}

/* Prevent the page behind the open drawer from scrolling. Applied to <body>
   by filter-drawer.js while the drawer is open on mobile. */
body.mo-scroll-locked {
	overflow: hidden;
}

/* ==========================================================================
   Grid loading state
   ========================================================================== */

#mo-shop-grid {
	position: relative;
	min-height: 4rem; /* keeps layout stable while a request is in flight */
}

.mo-shop-layout--loading #mo-shop-grid {
	opacity: 0.5;
	transition: opacity var(--mo-transition);
}

.mo-shop-layout--loading .mo-shop-toolbar__count {
	color: var(--mo-color-primary);
}

/* ==========================================================================
   Pagination — restyle WooCommerce's native paginate_links() markup
   ========================================================================== */

.mo-shop-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mo-space-2);
	margin-top: var(--mo-space-6);
}

.mo-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--mo-space-2);
	color: var(--mo-color-ink);
	text-decoration: none;
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius);
}
.mo-shop-pagination a.page-numbers:hover {
	border-color: var(--mo-color-primary);
	color: var(--mo-color-primary-600);
}
.mo-shop-pagination .page-numbers.current {
	color: #fff;
	background: var(--mo-color-primary);
	border-color: var(--mo-color-primary);
}
.mo-shop-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ==========================================================================
   No-JS fallback
   ========================================================================== */

/* No rule is needed here: the overlay/fixed-position styling above is
   already scoped to `body.mo-scroll-locked`, a class only JS ever adds. With
   JS disabled, `.mo-shop-filters__panel` never leaves normal document flow —
   it simply sits inline, full width, above the grid, always reachable via
   the native <summary> toggle and never blocking content. */