/**
 * M M Sanidaz — Shop / Catalog
 * ------------------------------------------------------------------
 * Catalog header (heading, category navigation, Filters / count / Sort
 * bar, active-filter pills), the Filters panel, empty state and
 * pagination. Markup comes from inc/shop.php. Everything is scoped to
 * body.mmsc-catalog (Shop, category and tag archives only). Loaded after
 * product-card.css and quick-add.css.
 *
 * The product cards themselves are NOT styled here — the Shop and the
 * Homepage share one card: see the `body.mmsc-cards` section of
 * product-card.css.
 *
 * Breakpoints: mobile ≤767px · tablet 768–1023px · desktop 1024px+
 */

/* ---------------------------------------------------------------
   Page rhythm
------------------------------------------------------------------ */

body.mmsc-catalog #content-wrap.container {
	padding-top: 0;
	padding-bottom: var(--mmsc-space-8);
}

body.mmsc-catalog .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---------------------------------------------------------------
   Catalog header
------------------------------------------------------------------ */

.mmsc-shop-head {
	padding-top: var(--mmsc-space-6);
	margin-bottom: var(--mmsc-space-5);
}

@media (min-width: 768px) {
	.mmsc-shop-head {
		padding-top: var(--mmsc-space-7);
		margin-bottom: var(--mmsc-space-6);
	}
}

.mmsc-shop-head__intro {
	max-width: 640px;
}

.mmsc-shop-head__eyebrow {
	margin: 0 0 var(--mmsc-space-2);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmsc-color-primary);
}

/* The legacy Customizer CSS forces `h1 { font-family: poppins
   !important }` sitewide — matched here so the Shop title uses the same
   Fraunces heading face as every other heading on the site. */
body .mmsc-shop-head__title {
	margin: 0 0 var(--mmsc-space-3);
	font-family: var(--mmsc-font-heading) !important;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--mmsc-color-text);
}

@media (min-width: 768px) {
	body .mmsc-shop-head__title {
		font-size: 44px;
	}
}

@media (min-width: 1024px) {
	body .mmsc-shop-head__title {
		font-size: var(--mmsc-text-4xl);
	}
}

.mmsc-shop-head__lede {
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
}

@media (min-width: 768px) {
	.mmsc-shop-head__lede {
		font-size: var(--mmsc-text-base);
	}
}

/* Category navigation — one swipeable row on mobile and tablet (bleeds
   to the screen edge so the next chip visibly peeks in), wrapping chips
   on desktop where everything fits without hiding anything. */

.mmsc-shop-cats {
	margin-top: var(--mmsc-space-5);
}

.mmsc-shop-cats__list {
	display: flex;
	gap: var(--mmsc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmsc-shop-cats__list li {
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 1023px) {
	.mmsc-shop-cats {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	/* Two classes: WooCommerce's `.woocommerce ul { padding: 0 }` would
	   otherwise remove the inset below. */
	.mmsc-shop-cats .mmsc-shop-cats__list {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		/* 5vw = OceanWP's mobile/tablet container gutter (90% wide), so
		   the first chip lines up with the heading above it. */
		padding: 2px 5vw var(--mmsc-space-1);
		-webkit-overflow-scrolling: touch;
	}

	.mmsc-shop-cats__list::-webkit-scrollbar {
		display: none;
	}

	.mmsc-shop-cats__list li {
		scroll-snap-align: start;
		scroll-margin-left: 5vw;
	}

	/* Trailing spacer so the last chip can scroll clear of the edge. */
	.mmsc-shop-cats__list::after {
		content: '';
		flex: 0 0 1px;
	}
}

@media (min-width: 1024px) {
	.mmsc-shop-cats__list {
		flex-wrap: wrap;
	}
}

.mmsc-shop-cats__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-surface);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--mmsc-color-text);
	text-decoration: none;
	transition: border-color var(--mmsc-transition-fast), background var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

body .mmsc-shop-cats__chip:hover,
body .mmsc-shop-cats__chip:focus-visible {
	border-color: var(--mmsc-color-primary);
	color: var(--mmsc-color-text);
}

.mmsc-shop-cats__chip--new {
	color: var(--mmsc-color-sale);
}

.mmsc-shop-cats__chip--new::before {
	content: '';
	width: 6px;
	height: 6px;
	margin-right: var(--mmsc-space-2);
	border-radius: 50%;
	background: currentColor;
}

body .mmsc-shop-cats__chip.is-active {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

.mmsc-shop-cats__chip:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Search results: matches per category ("Dresses 3"). */
.mmsc-shop-cats__count {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--mmsc-color-text-muted);
}

body .mmsc-shop-cats__chip.is-active .mmsc-shop-cats__count {
	color: rgba(255, 255, 255, 0.7);
}

/* "Categories" — opens the full hierarchy sheet. A <button>, so OceanWP's
   button skin (fill, uppercase, letter-spacing) is reset here. */
.mmsc-shop-cats .mmsc-shop-cats__chip--browse {
	gap: 6px;
	margin: 0;
	padding: 0 var(--mmsc-space-4) 0 14px;
	border: 1px solid var(--mmsc-color-dark);
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-text);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.mmsc-shop-cats .mmsc-shop-cats__chip--browse:hover,
.mmsc-shop-cats .mmsc-shop-cats__chip--browse:focus-visible,
.mmsc-shop-cats .mmsc-shop-cats__chip--browse[aria-expanded="true"] {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-text);
}

.mmsc-shop-cats__chip--browse .mmsc-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Phones: Categories, All, New Arrivals and the quick categories (in the
   order set in mmsanidaz_shop_quick_category_slugs()); the remaining
   top-level chips live in the sheet — unless one is the current page. */
@media (max-width: 767px) {
	.mmsc-shop-cats__list > li {
		order: var(--mmsc-chip-order, 0);
	}

	.mmsc-shop-cats__item--more:not(.is-current) {
		display: none;
	}
}

@media (min-width: 768px) {
	.mmsc-shop-cats__item--browse {
		display: none;
	}
}

/* Sub-category row — only rendered on a category that has children (or on
   one of those children). Lighter, smaller chips so it reads as a second
   level under the main row. */

.mmsc-shop-subcats {
	margin-top: var(--mmsc-space-3);
}

.mmsc-shop-subcats .mmsc-shop-subcats__list {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmsc-shop-subcats__list li {
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 1023px) {
	.mmsc-shop-subcats {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.mmsc-shop-subcats .mmsc-shop-subcats__list {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding: 2px 5vw var(--mmsc-space-1);
		-webkit-overflow-scrolling: touch;
	}

	.mmsc-shop-subcats__list::-webkit-scrollbar {
		display: none;
	}

	.mmsc-shop-subcats__list::after {
		content: '';
		flex: 0 0 1px;
	}
}

@media (min-width: 1024px) {
	.mmsc-shop-subcats .mmsc-shop-subcats__list {
		flex-wrap: wrap;
	}
}

.mmsc-shop-subcats__chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--mmsc-space-3);
	border: 1px solid transparent;
	border-radius: var(--mmsc-radius-pill);
	background: rgba(45, 38, 35, 0.05);
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--mmsc-color-text-muted);
	text-decoration: none;
	transition: border-color var(--mmsc-transition-fast), background var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

body .mmsc-shop-subcats__chip:hover,
body .mmsc-shop-subcats__chip:focus-visible {
	color: var(--mmsc-color-text);
}

body .mmsc-shop-subcats__chip.is-active {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-text);
	font-weight: 600;
}

.mmsc-shop-subcats__chip:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Search results: the query is the title, with a way back into the search. */
body .mmsc-shop-head--search .mmsc-shop-head__title {
	overflow-wrap: anywhere;
}

body .mmsc-shop-head__edit {
	display: inline-flex;
	align-items: center;
	gap: var(--mmsc-space-2);
	min-height: 40px;
	margin: var(--mmsc-space-4) 0 0;
	padding: 0 var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-border) !important;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-surface) !important; /* Customizer `body button` background */
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	line-height: 1;
	color: var(--mmsc-color-text) !important;
	cursor: pointer;
	transition: border-color var(--mmsc-transition-fast);
}

body .mmsc-shop-head__edit:hover,
body .mmsc-shop-head__edit:focus-visible {
	border-color: var(--mmsc-color-dark) !important;
}

body .mmsc-shop-head__edit:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Filters / count / Sort bar
------------------------------------------------------------------ */

.mmsc-shop-bar {
	display: flex;
	align-items: center;
	gap: var(--mmsc-space-3);
	margin-top: var(--mmsc-space-5);
	padding: var(--mmsc-space-3) 0;
	border-top: 1px solid var(--mmsc-color-border);
	border-bottom: 1px solid var(--mmsc-color-border);
}

@media (min-width: 768px) {
	.mmsc-shop-bar {
		margin-top: var(--mmsc-space-6);
	}
}

.mmsc-shop-bar .mmsc-shop-bar__filters,
.mmsc-shop-bar__sort .woocommerce-ordering {
	display: inline-flex;
	align-items: center;
	gap: var(--mmsc-space-2);
	min-height: 44px;
	margin: 0;
	padding: 0 var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-surface);
	box-sizing: border-box;
}

.mmsc-shop-bar .mmsc-shop-bar__filters {
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	color: var(--mmsc-color-text);
	cursor: pointer;
	transition: border-color var(--mmsc-transition-fast);
}

.mmsc-shop-bar .mmsc-shop-bar__filters:hover,
.mmsc-shop-bar .mmsc-shop-bar__filters:focus-visible,
.mmsc-shop-bar .mmsc-shop-bar__filters[aria-expanded="true"] {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-text);
}

.mmsc-shop-bar .mmsc-shop-bar__filters:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

.mmsc-shop-bar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-primary);
	color: var(--mmsc-color-surface);
	font-size: 11px;
	font-weight: 600;
	box-sizing: border-box;
}

.mmsc-shop-bar__count {
	flex: 1;
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	color: var(--mmsc-color-text-muted);
}

/* Sort — WooCommerce's own ordering form (auto-submits on change via
   woocommerce.js), restyled into the same pill as Filters. */

.mmsc-shop-bar__sort {
	display: flex;
}

body.mmsc-catalog .mmsc-shop-bar__sort .woocommerce-ordering {
	display: flex;
	position: relative;
	float: none;
	margin: 0;
	padding-right: 0;
}

/* OceanWP's customSelect script hides the real <select> (inline
   opacity:0 / position:absolute / fixed px size) behind a fake
   span.theme-select. The real, native select is used here instead —
   better on mobile (system picker) and the element WooCommerce's
   auto-submit actually listens to — so the fake is removed and the
   inline sizing overridden. */
.mmsc-shop-bar__sort .theme-select {
	display: none !important;
}

.mmsc-shop-bar__sort .woocommerce-ordering label {
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 400;
	white-space: nowrap;
	color: var(--mmsc-color-text-muted);
}

body.mmsc-catalog .mmsc-shop-bar__sort .woocommerce-ordering select.orderby {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: static !important;
	width: auto !important;
	max-width: 100%;
	height: 42px !important;
	min-height: 0;
	margin: 0;
	padding: 0 38px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2623' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 14px 14px;
	box-shadow: none;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm) !important;
	font-weight: 600;
	line-height: 42px;
	color: var(--mmsc-color-text);
	cursor: pointer;
	opacity: 1 !important;
}

body.mmsc-catalog .mmsc-shop-bar__sort .woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 4px;
}

.mmsc-shop-bar__sort .woocommerce-ordering:hover,
.mmsc-shop-bar__sort .woocommerce-ordering:focus-within {
	border-color: var(--mmsc-color-dark);
}

/* Mobile: Filters and Sort become two equal, thumb-sized controls; the
   product count drops to its own line just above the grid. */
@media (max-width: 767px) {
	.mmsc-shop-bar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mmsc-space-2);
		padding: 0;
		border: 0;
	}

	/* Without this the select's longest option ("Price: High to Low")
	   sets the Sort column's minimum width and pushes it off-screen. */
	.mmsc-shop-bar > * {
		min-width: 0;
	}

	.mmsc-shop-bar .mmsc-shop-bar__filters,
	body.mmsc-catalog .mmsc-shop-bar__sort .woocommerce-ordering {
		justify-content: center;
		width: 100%;
		padding: 0 var(--mmsc-space-3);
	}

	.mmsc-shop-bar__count {
		grid-column: 1 / -1;
		order: 3;
		padding-top: var(--mmsc-space-2);
		font-size: 13px;
	}

	/* Label kept for screen readers; a sort glyph labels it visually. */
	.mmsc-shop-bar__sort .woocommerce-ordering label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.mmsc-shop-bar__sort .woocommerce-ordering::before {
		content: '';
		flex: 0 0 18px;
		height: 18px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2623' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M4 7l3-3 3 3M17 20V4M14 17l3 3 3-3'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
	}

	body.mmsc-catalog .mmsc-shop-bar__sort .woocommerce-ordering select.orderby {
		min-width: 0;
		flex: 0 1 auto;
		padding-right: 22px;
		background-position: right 0 center;
		text-overflow: ellipsis;
	}
}

/* Active filters */

.mmsc-shop-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mmsc-space-2);
	margin: var(--mmsc-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.mmsc-shop-active li {
	margin: 0;
}

.mmsc-shop-active__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 var(--mmsc-space-2) 0 var(--mmsc-space-3);
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-border);
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--mmsc-color-text);
	text-decoration: none;
}

.mmsc-shop-active__pill .mmsc-icon {
	width: 14px;
	height: 14px;
}

body .mmsc-shop-active__pill:hover,
body .mmsc-shop-active__pill:focus-visible {
	background: #d3c8bd;
	color: var(--mmsc-color-text);
}

.mmsc-shop-active__clear {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--mmsc-space-2);
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--mmsc-color-sale);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   Product grid — spacing below the toolbar only. The cards themselves
   (grid columns, card layout, Quick Add) are shared with the Homepage:
   see the `body.mmsc-cards` section of product-card.css.
------------------------------------------------------------------ */

body.mmsc-catalog ul.products.oceanwp-row {
	margin-top: var(--mmsc-space-2);
}

@media (min-width: 768px) {
	body.mmsc-catalog ul.products.oceanwp-row {
		margin-top: var(--mmsc-space-6);
	}
}

/* ---------------------------------------------------------------
   Pagination
------------------------------------------------------------------ */

body.mmsc-catalog .woocommerce-pagination {
	margin-top: var(--mmsc-space-7);
	text-align: center;
}

body.mmsc-catalog .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mmsc-space-2);
	margin: 0;
	padding: 0;
	border: 0;
}

body.mmsc-catalog .woocommerce-pagination ul.page-numbers li {
	float: none;
	margin: 0;
	border: 0;
}

body.mmsc-catalog .woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--mmsc-space-2);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-surface);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	line-height: 1;
	color: var(--mmsc-color-text);
	box-sizing: border-box;
}

body.mmsc-catalog .woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
body.mmsc-catalog .woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-text);
}

body.mmsc-catalog .woocommerce-pagination ul.page-numbers li span.current {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

/* ---------------------------------------------------------------
   Continuous loading (inc/shop-feed.php + assets/js/shop-feed.js)
   Once the script takes over, the page links above are hidden (they stay
   in the markup for crawlers / no-JS) and this quiet line sits under the
   grid: a count, "Loading more styles…" only if a batch is late, the
   end of the collection, or a retry. Fixed height — nothing below jumps
   as its text changes.
------------------------------------------------------------------ */

.mmsc-feed {
	display: none;
}

.mmsc-feed-on body.mmsc-catalog .woocommerce-pagination {
	display: none;
}

.mmsc-feed-on .mmsc-feed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mmsc-space-3);
	min-height: 64px;
	margin-top: var(--mmsc-space-6);
	text-align: center;
}

body.mmsc-catalog .mmsc-feed__status {
	display: inline-flex;
	align-items: center;
	gap: var(--mmsc-space-2);
	min-height: 24px;
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	letter-spacing: 0.02em;
	color: var(--mmsc-color-text-muted) !important; /* legacy `p` colour rule */
}

.mmsc-feed[data-state="end"] .mmsc-feed__status::before,
.mmsc-feed[data-state="end"] .mmsc-feed__status::after {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--mmsc-color-border);
}

.mmsc-feed__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 1.5px solid var(--mmsc-color-border);
	border-top-color: var(--mmsc-color-text);
	border-radius: 50%;
	animation: mmsc-feed-spin 800ms linear infinite;
}

.mmsc-feed[data-state="loading"] .mmsc-feed__spinner {
	display: inline-block;
}

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

body.mmsc-catalog .mmsc-feed__retry {
	min-height: 44px;
	margin: 0;
	padding: 0 var(--mmsc-space-5);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-pill);
	background: transparent;
	box-shadow: none;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	color: var(--mmsc-color-text);
	cursor: pointer;
}

body.mmsc-catalog .mmsc-feed__retry[hidden] {
	display: none;
}

body.mmsc-catalog .mmsc-feed__start {
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	color: var(--mmsc-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   Empty state
------------------------------------------------------------------ */

.mmsc-shop-empty {
	margin-top: var(--mmsc-space-5);
	padding: var(--mmsc-space-8) var(--mmsc-space-5);
	border-radius: var(--mmsc-radius-lg);
	background: var(--mmsc-color-surface);
	text-align: center;
}

body .mmsc-shop-empty__title {
	margin: 0 0 var(--mmsc-space-2);
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-xl);
	font-weight: 600;
	color: var(--mmsc-color-text);
}

.mmsc-shop-empty__text {
	margin: 0 auto var(--mmsc-space-5);
	max-width: 420px;
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
}

body .mmsc-shop-empty__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--mmsc-space-6);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mmsc-color-surface);
	transition: background var(--mmsc-transition-fast);
}

body .mmsc-shop-empty__action:hover,
body .mmsc-shop-empty__action:focus-visible {
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface);
}

/* Empty search: a few searches that do return styles. */
.mmsc-shop-empty__suggest {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mmsc-space-2);
	max-width: 520px;
	margin: 0 auto var(--mmsc-space-6);
	padding: 0;
	list-style: none;
}

.mmsc-shop-empty__suggest li {
	margin: 0;
}

body .mmsc-shop-empty__suggest a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-pill);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	color: var(--mmsc-color-text);
	text-decoration: none;
	transition: border-color var(--mmsc-transition-fast);
}

body .mmsc-shop-empty__suggest a:hover,
body .mmsc-shop-empty__suggest a:focus-visible {
	border-color: var(--mmsc-color-dark);
	color: var(--mmsc-color-text);
}

/* ---------------------------------------------------------------
   Filters panel — left side sheet on tablet/desktop, bottom sheet on
   mobile. Same overlay conventions as the Quick Add / Cart Drawer.
------------------------------------------------------------------ */

body.mmsc-filters-open {
	overflow: hidden;
}

/* The floating chat button (Chaty, z-index 99999+) would otherwise sit
   on top of the open panel's actions, especially on the mobile sheet. */
body.mmsc-filters-open .chaty {
	visibility: hidden;
}

.mmsc-filters {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}

.mmsc-filters.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mmsc-filters__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(45, 38, 35, 0.5);
	opacity: 0;
	transition: opacity var(--mmsc-transition-base);
}

.mmsc-filters.is-open .mmsc-filters__backdrop {
	opacity: 1;
}

.mmsc-filters__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 100vw);
	margin: 0;
	background: var(--mmsc-color-surface);
	box-shadow: var(--mmsc-shadow-md);
	transform: translateX(-100%);
	transition: transform var(--mmsc-transition-base);
}

.mmsc-filters.is-open .mmsc-filters__panel {
	transform: none;
}

.mmsc-filters__panel:focus-visible {
	outline: none;
}

@media (max-width: 767px) {
	.mmsc-filters__panel {
		top: auto;
		right: 0;
		width: 100%;
		max-height: 88vh;
		max-height: 88dvh;
		border-radius: var(--mmsc-radius-lg) var(--mmsc-radius-lg) 0 0;
		transform: translateY(100%);
	}
}

.mmsc-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--mmsc-space-4) var(--mmsc-space-5);
	border-bottom: 1px solid var(--mmsc-color-border);
}

body .mmsc-filters__title {
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--mmsc-color-text);
}

.mmsc-filters .mmsc-filters__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-text);
	cursor: pointer;
	transition: background var(--mmsc-transition-fast);
}

.mmsc-filters .mmsc-filters__close:hover,
.mmsc-filters .mmsc-filters__close:focus-visible {
	background: var(--mmsc-color-border);
	color: var(--mmsc-color-text);
}

.mmsc-filters__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--mmsc-space-5);
}

/* A <legend> renders in the fieldset's top border, above its padding —
   so the group's top spacing lives on the legend itself instead. */
.mmsc-filters__group {
	min-width: 0;
	margin: 0;
	padding: 0 0 var(--mmsc-space-5);
	border: 0;
	border-bottom: 1px solid var(--mmsc-color-border);
}

.mmsc-filters__group:last-child {
	border-bottom: 0;
}

.mmsc-filters .mmsc-filters__legend {
	display: block;
	width: 100%;
	margin: 0 0 var(--mmsc-space-2);
	padding: var(--mmsc-space-5) 0 0;
	border: 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmsc-color-text-muted);
}

/* Radio rows (Category, Price) */

.mmsc-filters__list {
	display: flex;
	flex-direction: column;
}

.mmsc-filters__row {
	display: flex;
	align-items: center;
	gap: var(--mmsc-space-3);
	min-height: 44px;
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--mmsc-color-text);
	cursor: pointer;
}

.mmsc-filters__row input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--mmsc-color-text-muted);
	border-radius: 50%;
	background: var(--mmsc-color-surface);
	cursor: pointer;
	transition: border-color var(--mmsc-transition-fast), box-shadow var(--mmsc-transition-fast);
}

.mmsc-filters__row input[type="radio"]:checked {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
	box-shadow: inset 0 0 0 3.5px var(--mmsc-color-surface);
}

.mmsc-filters__row input[type="radio"]:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

.mmsc-filters__row input[type="radio"]:checked ~ .mmsc-filters__row-label {
	font-weight: 600;
}

.mmsc-filters__count {
	margin-left: auto;
	font-size: 13px;
	color: var(--mmsc-color-text-muted);
}

/* Size chips (Age/Size) */

.mmsc-filters__chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mmsc-space-2);
}

.mmsc-filters__chip {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.mmsc-filters__chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.mmsc-filters__chip span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--mmsc-space-2);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	white-space: nowrap;
	color: var(--mmsc-color-text);
	transition: border-color var(--mmsc-transition-fast), background var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

.mmsc-filters__chip:hover span {
	border-color: var(--mmsc-color-primary);
}

.mmsc-filters__chip input:checked + span {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

.mmsc-filters__chip input:focus-visible + span {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Footer actions */

.mmsc-filters__footer {
	display: flex;
	align-items: center;
	gap: var(--mmsc-space-4);
	padding: var(--mmsc-space-4) var(--mmsc-space-5) calc(var(--mmsc-space-4) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--mmsc-color-border);
}

.mmsc-filters__clear {
	flex: 0 0 auto;
	padding: var(--mmsc-space-2) 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	color: var(--mmsc-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mmsc-filters .mmsc-filters__apply {
	flex: 1;
	min-height: 48px;
	margin: 0;
	padding: 0 var(--mmsc-space-5);
	border: 0;
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--mmsc-transition-fast);
}

.mmsc-filters .mmsc-filters__apply:hover,
.mmsc-filters .mmsc-filters__apply:focus-visible {
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface);
}

.mmsc-filters .mmsc-filters__apply:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Categories sheet — shares the Filters panel's shell (backdrop, bottom
   sheet, header, close); only the tree inside is styled here.
------------------------------------------------------------------ */

.mmsc-cat-sheet [hidden] {
	display: none !important;
}

.mmsc-cat-sheet__search {
	padding: var(--mmsc-space-3) var(--mmsc-space-5);
	border-bottom: 1px solid var(--mmsc-color-border);
}

.mmsc-cat-sheet .mmsc-cat-sheet__input {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-bg);
	font-family: var(--mmsc-font-body);
	font-size: 16px; /* no iOS zoom on focus */
	color: var(--mmsc-color-text);
}

.mmsc-cat-sheet .mmsc-cat-sheet__input:focus {
	border-color: var(--mmsc-color-dark);
	outline: none;
}

.mmsc-cat-sheet .mmsc-cat-sheet__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmsc-cat-sheet .mmsc-cat-sheet__item {
	margin: 0;
	padding: 0;
}

.mmsc-cat-sheet__row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--mmsc-color-border);
}

.mmsc-cat-sheet .mmsc-cat-sheet__link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--mmsc-space-3);
	min-width: 0;
	min-height: 52px;
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--mmsc-color-text);
	text-decoration: none;
}

.mmsc-cat-sheet .mmsc-cat-sheet__link:hover,
.mmsc-cat-sheet .mmsc-cat-sheet__link:focus-visible {
	color: var(--mmsc-color-primary);
}

.mmsc-cat-sheet .mmsc-cat-sheet__link.is-current {
	font-weight: 600;
}

.mmsc-cat-sheet__link.is-current .mmsc-cat-sheet__name::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: var(--mmsc-space-2);
	border-radius: 50%;
	background: var(--mmsc-color-primary);
	vertical-align: middle;
}

.mmsc-cat-sheet__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mmsc-cat-sheet__count {
	margin-left: auto;
	font-size: 13px;
	font-weight: 400;
	color: var(--mmsc-color-text-muted);
}

.mmsc-cat-sheet .mmsc-cat-sheet__toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0 calc(-1 * var(--mmsc-space-3)) 0 var(--mmsc-space-1);
	padding: 0;
	border: 0;
	border-radius: var(--mmsc-radius-pill);
	background: transparent;
	color: var(--mmsc-color-text);
	cursor: pointer;
}

.mmsc-cat-sheet .mmsc-cat-sheet__toggle:hover,
.mmsc-cat-sheet .mmsc-cat-sheet__toggle:focus-visible {
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-text);
}

.mmsc-cat-sheet__toggle .mmsc-icon {
	transition: transform var(--mmsc-transition-fast);
}

.mmsc-cat-sheet__toggle[aria-expanded="true"] .mmsc-icon {
	transform: rotate(90deg);
}

/* Nested levels: indented, a size smaller. */
.mmsc-cat-sheet .mmsc-cat-sheet__list--sub {
	padding-left: var(--mmsc-space-4);
}

.mmsc-cat-sheet__list--sub .mmsc-cat-sheet__link {
	min-height: 46px;
	font-size: 14px;
}

.mmsc-cat-sheet__list > .mmsc-cat-sheet__item:last-child > .mmsc-cat-sheet__row {
	border-bottom: 0;
}

.mmsc-cat-sheet__list--sub > .mmsc-cat-sheet__item:last-child > .mmsc-cat-sheet__row {
	border-bottom: 1px solid var(--mmsc-color-border);
}

.mmsc-cat-sheet__empty {
	margin: 0;
	padding: var(--mmsc-space-5) 0;
	font-size: var(--mmsc-text-sm);
	color: var(--mmsc-color-text-muted);
}

.mmsc-cat-sheet .mmsc-filters__body {
	padding-bottom: calc(var(--mmsc-space-4) + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.mmsc-filters__backdrop,
	.mmsc-filters__panel,
	.mmsc-shop-cats__chip,
	.mmsc-shop-subcats__chip,
	.mmsc-cat-sheet__toggle .mmsc-icon {
		transition: none;
	}

	.mmsc-feed__spinner {
		animation-duration: 2400ms;
	}
}