/* ==========================================================================
   Aasthara Product Grid
   Palette: pearl glass, deep wine (#6d1e1f), soft gold accent
   Type: Cormorant Garamond (display) + Manrope (ui)
   ========================================================================== */
.mpg-wrap button:hover {
  background-color: inherit !important;
  color: black !important;
}
.mpg-wrap button:active, 
.mpg-wrap button:focus, 
.mpg-wrap button:focus-visible, 
.mpg-wrap button:visited {
  background-color: inherit !important;
  color: black !important;
  outline: none !important;
  box-shadow: none !important;
}

/* The auto-rendered shop/category/tag archive instances of this plugin
   set data-hide-theme-search="1" on .mpg-wrap; mpg-script.js mirrors
   that onto <html> as this class. Shortcode placements elsewhere on
   the site do NOT set that flag, so the theme's own header search
   stays visible there. */
html.mpg-hide-theme-search .arpSearchBtn {
	display: none !important;
}

/* Scroll lock while the filter drawer is open — a class instead of an
   inline style so it can't collide with any inline overflow value the
   theme's own scripts may set on <html>. */
html.mpg-scroll-lock {
	overflow: hidden;
}

.mpg-wrap {
	--mpg-bg-1: #faf6f1;
	--mpg-bg-2: #f2e9df;
	--mpg-card: linear-gradient(160deg, #fffdfb 0%, #f7efe4 100%);
	--mpg-card-hi: rgba(255, 255, 255, 0.6);
	--mpg-line: rgba(109, 30, 31, 0.16);
	--mpg-line-strong: rgba(109, 30, 31, 0.38);
	--mpg-gold: #c9a15a;
	--mpg-gold-soft: #a97a35;
	--mpg-brand: #6d1e1f;
	--mpg-brand-soft: #8a2e2f;
	--mpg-ink: #241514;
	--mpg-muted: #7d6f68;
	--mpg-jewel: #3f8f6f;
	--mpg-danger: #c9433f;
	--mpg-discount: #d9463f;
	--mpg-radius-lg: 20px;
	--mpg-radius-md: 14px;
	--mpg-radius-sm: 9px;
	--mpg-shadow: 0 14px 36px rgba(109, 30, 31, 0.14);
	--mpg-font-display: "Cormorant Garamond", "Times New Roman", serif;
	--mpg-font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	position: relative;
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(14px, 3vw, 32px) 48px;
	font-family: var(--mpg-font-ui);
	color: var(--mpg-ink);
	background: var(--mpg-bg-1);
	-webkit-font-smoothing: antialiased;
}
/* The 108px offset only makes sense for the plugin's own auto-rendered
   shop/category/tag archive instance (it clears that template's fixed
   header). data-hide-theme-search="1" is set only on that instance —
   never on shortcode placements elsewhere — so gate the offset on it
   instead of applying it to every .mpg-wrap on the site. */
.mpg-wrap[data-hide-theme-search="1"] {
	margin-top: 108px !important;
}
.mpg-wrap *,
.mpg-wrap *::before,
.mpg-wrap *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Toolbar
   ------------------------------------------------------------------ */
.mpg-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 0 20px;
	flex-wrap: wrap;
}

.mpg-filter-btn,
.mpg-clear-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mpg-font-ui);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.02em;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
	line-height: 1;
}
.mpg-filter-btn {
	padding: 12px 20px;
	background: linear-gradient(160deg, #ffffff, #f4ebe0);
	border: 1px solid var(--mpg-line-strong);
	color: var(--mpg-brand);
	box-shadow: var(--mpg-shadow);
}
.mpg-filter-btn:hover {
	border-color: var(--mpg-brand);
	transform: translateY(-1px);
}
.mpg-filter-btn:active {
	transform: translateY(0);
}
.mpg-filter-count {
	font-style: normal;
	background: var(--mpg-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}
.mpg-clear-btn {
	padding: 11px 16px;
	background: transparent;
	border: 1px dashed var(--mpg-line-strong);
	color: var(--mpg-muted);
}
.mpg-clear-btn:hover {
	color: var(--mpg-brand);
	border-color: var(--mpg-brand);
}
.mpg-result-count {
	margin-left: auto;
	font-size: 13px;
	color: var(--mpg-muted);
	letter-spacing: 0.01em;
}
/* The "X products found" count is only wanted on the plugin's own
   auto-rendered shop/category/tag page — data-hide-theme-search="1"
   marks that instance (see the margin-top rule above). Shortcode
   placements on any other page hide it. */
.mpg-wrap:not([data-hide-theme-search="1"]) .mpg-result-count {
	display: none !important;
}

/* ---------------------------------------------------------------------
   Search — shown on desktop/tablet/etc. only. Visibility is toggled by
   JS via the .mpg-search-enabled class using real device detection
   (user-agent based), not a viewport-width media query, so it stays
   hidden by default here to avoid a flash on phones.
   ------------------------------------------------------------------ */
.mpg-search {
	display: none;
	align-items: center;
	gap: 6px;
	flex: 1 1 260px;
	max-width: 480px;
	padding: 4px 4px 4px 18px;
	background: linear-gradient(160deg, #ffffff, #f4ebe0);
	border: 1px solid var(--mpg-line-strong);
	border-radius: 999px;
	box-shadow: var(--mpg-shadow);
}
.mpg-wrap.mpg-search-enabled .mpg-search {
	display: flex;
}
.mpg-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--mpg-font-ui);
	font-size: 13.5px;
	color: var(--mpg-ink);
	padding: 8px 0;
	border: solid 1px white !important;
	border-top-right-radius: 18px !important;
	border-bottom-right-radius: 18px !important;
}
.mpg-search-input::placeholder {
	color: var(--mpg-muted);
}
.mpg-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 999px;
	background: var(--mpg-brand);
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.mpg-search-btn:hover {
	transform: translateY(-1px);
	background: var(--mpg-brand) !important;
}
.mpg-search-btn.is-clear {
	background: transparent;
	color: var(--mpg-muted);
	border: 1px dashed var(--mpg-line-strong);
}
.mpg-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------------
   Grid
   ------------------------------------------------------------------ */
.mpg-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	transition: opacity 0.25s ease;
}
.mpg-grid[data-state="loading"] {
	opacity: 0.55;
}

/* Mobile: the wrap breaks out of whatever padded parent container the
   theme places it in and spans the true viewport width, so the two
   product columns get as much room as possible. overflow-x:hidden is
   the safety net that stops this full-bleed trick from ever creating
   a horizontal scrollbar.
   This breakout is only safe when the grid owns the whole page (the
   auto-rendered shop/category/tag instance, flagged the same way as
   above via data-hide-theme-search="1"). Applying the negative margins
   to a shortcode dropped alongside other page content — e.g. next to
   an our-collection-arp grid — pulls the .mpg-wrap out of that shared
   layout and reflows/overlaps its siblings, so it's scoped here too. */
@media (max-width: 780px) {
	.mpg-wrap[data-hide-theme-search="1"] {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 10px;
		padding-right: 10px;
		overflow-x: hidden;
		margin-top: auto !important;
	}
}

@media (min-width: 640px) {
	.mpg-grid {
		gap: 18px;
	}
	
}
@media (min-width: 780px) {
	.mpg-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}
@media (min-width: 1180px) {
	.mpg-wrap[data-columns="4"] .mpg-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.mpg-wrap[data-columns="3"] .mpg-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mpg-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: var(--mpg-muted);
	font-size: 15px;
}

/* ---------------------------------------------------------------------
   Card — pearl glass on a warm off-white base, wine-red border, never
   see-through to the page background.
   ------------------------------------------------------------------ */
.mpg-card {
	position: relative;
	border-radius: var(--mpg-radius-lg);
	background: var(--mpg-card);
	border: 1.5px solid var(--mpg-brand);
	box-shadow: var(--mpg-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: mpgCardIn 0.4s ease both;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}
.mpg-card:hover {
	transform: translateY(-2px) scale(1.025);
	box-shadow: 0 20px 46px rgba(109, 30, 31, 0.22);
	z-index: 3;
}
@keyframes mpgCardIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* "Explore More Products" filler — home page only. Dropped into an
   otherwise-empty slot at the end of an incomplete last row. It's a
   compact pill button (same gradient/shape as the add-to-cart button)
   centered in its grid cell, not a full-size card, with a continuous
   left-to-right shine sweep to draw the eye. */
.mpg-explore-more {
	position: relative;
	align-self: center;
	justify-self: center;
	width: auto;
	max-width: 100%;
	min-height: 0;
	border: none;
	border-radius: 999px;
	background: linear-gradient(160deg, #853b3c, #6d1e1f);
	box-shadow: 0 6px 16px rgba(201, 161, 90, 0.28);
	text-decoration: none !important;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.mpg-explore-more:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(201, 161, 90, 0.35);
}
.mpg-explore-more-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	color: #fff;
	white-space: nowrap;
}
.mpg-explore-more-label {
	font-family: var(--mpg-font-ui);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.02em;
}
.mpg-explore-more-inner svg {
	color: #fff;
	flex-shrink: 0;
}
/* Continuous left-to-right shine sweep. */
.mpg-explore-more::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
	animation: mpgExploreShine 2.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mpgExploreShine {
	0% {
		left: -60%;
	}
	55% {
		left: 130%;
	}
	100% {
		left: 130%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mpg-explore-more::after {
		animation: none;
	}
}

.mpg-card-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--mpg-bg-2);
}
.mpg-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mpg-card:hover .mpg-card-media img {
	transform: scale(1.05);
}
.mpg-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 9, 7, 0) 55%, rgba(10, 9, 7, 0.55) 100%);
	pointer-events: none;
}

/* Diagonal light sweep across the product photo on hover — a small
   premium touch that reads as "polished glass" rather than a gimmick. */
.mpg-card-shine {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.35) 50%,
		rgba(255, 255, 255, 0) 60%
	);
	background-size: 250% 250%;
	background-position: 130% 130%;
	transition: background-position 0.7s ease;
}
.mpg-card:hover .mpg-card-shine {
	background-position: -30% -30%;
}

.mpg-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: rgba(20, 18, 14, 0.55);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(232, 205, 147, 0.35);
	color: #f0d9ad;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 999px;
}

.mpg-rating-pill {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(20, 18, 14, 0.55);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(232, 205, 147, 0.35);
	color: #f0d9ad;
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 9px;
	border-radius: 999px;
	letter-spacing: 0.01em;
}

.mpg-card-body {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(250, 244, 235, 0.6));
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-top: 1px solid rgba(109, 30, 31, 0.12);
}

.mpg-card-title,
.mpg-card-title:link,
.mpg-card-title:visited,
.mpg-card-title:hover,
.mpg-card-title:active,
.mpg-card-title:focus {
	font-family: var(--mpg-font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	color: var(--mpg-ink);
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mpg-card-title:hover {
	color: var(--mpg-gold-soft);
}
.mpg-review-count {
	font-size: 11px;
	font-weight: 500;
	color: var(--mpg-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mpg-card-foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

/* Original & discounted price now sit side by side in a single row on
   every screen size, instead of stacking vertically. font-size uses
   clamp() so large price numbers shrink to fit instead of pushing all
   the way to the card's right edge; the small right padding keeps a
   visible gutter even when the numbers are wide. */
.mpg-card-price {
	font-family: var(--mpg-font-display);
	font-size: clamp(14px, 4.6vw, 21px);
	font-weight: 600;
	color: var(--mpg-ink);
	letter-spacing: 0.01em;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	padding-right: 8px;
	box-sizing: border-box;
	overflow: hidden;
	line-height: 1.15;
}
.mpg-card-price .price {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}
.mpg-card-price ins {
	text-decoration: none;
	display: inline;
	flex-shrink: 0;
}
.mpg-card-price del {
	opacity: 0.55;
	font-size: 0.6em;
	display: inline;
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Discount badge now sits on top of the product image, top-left. If a
   custom .mpg-badge is also present, drop it just below that badge so
   the two don't overlap. */
.mpg-card-discount {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-family: var(--mpg-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--mpg-discount);
	padding: 5px 9px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(217, 70, 63, 0.35);
}
.mpg-badge + .mpg-card-discount {
	top: 44px;
}

.mpg-add-btn {
	position: relative;
	appearance: none;
	border: none;
	cursor: pointer;
	font-family: var(--mpg-font-ui);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: white;
	background: linear-gradient(160deg, #853b3c, #6d1e1f);
	padding: 10px 24px;
	border-radius: 999px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	flex-shrink: 0;
	width: 100%;
	align-self: stretch;
	margin-top: 2px;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 16px rgba(201, 161, 90, 0.28);
	overflow: hidden;
}
.mpg-add-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(201, 161, 90, 0.35);
	color: white !important;
}
.mpg-add-btn:active {
	transform: translateY(0) scale(0.97);
	color: white !important;
}
.mpg-add-btn--link {
	background: transparent;
	border: 1px solid var(--mpg-line-strong);
	color: var(--mpg-gold-soft);
	box-shadow: none;
}
.mpg-add-btn--disabled {
	background: transparent;
	border: 1px solid var(--mpg-line);
	color: var(--mpg-muted);
	cursor: not-allowed;
	box-shadow: none;
}
.mpg-add-btn.is-loading .mpg-add-label {
	opacity: 0.5;
}
.mpg-add-btn.is-done {
	background: linear-gradient(160deg, #8fd0b4, var(--mpg-jewel));
	color: #0d1a15;
}

/* flying pulse ring when item added */
.mpg-add-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--mpg-gold-soft);
	opacity: 0;
	transform: scale(1);
}
.mpg-add-btn.is-pop::after {
	animation: mpgPop 0.55s ease-out;
}
@keyframes mpgPop {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.6);
	}
}

/* Small phones: tighten the card body so the price block and the Add
   button never fight each other for space (previously caused the Add
   button to be clipped by the card's overflow:hidden). */
@media (max-width: 380px) {
	.mpg-card-body {
		padding: 11px 11px 13px;
		gap: 8px;
	}
	.mpg-card-price {
		font-size: clamp(13px, 5vw, 16px);
	}
	.mpg-card-title {
		font-size: 13px;
	}
	.mpg-add-btn {
		padding: 9px 20px;
		font-size: 11.5px;
	}
}

/* ---------------------------------------------------------------------
   Skeleton loading state
   ------------------------------------------------------------------ */
.mpg-card--skeleton {
	pointer-events: none;
	border-color: var(--mpg-line);
}
.mpg-skel-img,
.mpg-skel-line {
	background: linear-gradient(100deg, #ede2d4 20%, #faf4ec 40%, #ede2d4 60%);
	background-size: 200% 100%;
	animation: mpgShimmer 1.4s ease-in-out infinite;
}
.mpg-skel-img {
	aspect-ratio: 1/1;
}
.mpg-skel-line {
	height: 12px;
	margin: 14px 14px 0;
	border-radius: 6px;
	width: 80%;
}
.mpg-skel-line--short {
	width: 40%;
	margin-bottom: 14px;
}
@keyframes mpgShimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ---------------------------------------------------------------------
   Overlay + drawer
   ------------------------------------------------------------------ */
.mpg-overlay {
	position: fixed;
	inset: 0;
	background: rgba(36, 12, 12, 0.42);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 9998;
}
.mpg-wrap.is-drawer-open .mpg-overlay {
	opacity: 1;
	visibility: visible;
}

.mpg-drawer {
	position: fixed;
	z-index: 9999;
	background: linear-gradient(175deg, #fffdfb 0%, #f6ede1 100%);
	border: 1px solid var(--mpg-line);
	color: var(--mpg-ink);
	box-shadow: 0 20px 55px rgba(109, 30, 31, 0.22);
	display: flex;
	flex-direction: column;
	font-family: var(--mpg-font-ui);
}

/* Mobile: bottom half-sheet */
.mpg-drawer {
	left: 0;
	right: 0;
	bottom: 0;
	height: 82vh;
	max-height: 82vh;
	border-radius: 22px 22px 0 0;
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mpg-wrap.is-drawer-open .mpg-drawer {
	transform: translateY(0);
}
.mpg-drawer-handle {
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: var(--mpg-line-strong);
	margin: 10px auto 2px;
	flex-shrink: 0;
}

/* Desktop: left slide-in panel */
@media (min-width: 900px) {
	.mpg-drawer {
		left: 0;
		right: auto;
		top: 0;
		bottom: 0;
		width: 360px;
		height: auto;
		max-height: none;
		border-radius: 0 18px 18px 0;
		transform: translateX(-100%);
	}
	.mpg-wrap.is-drawer-open .mpg-drawer {
		transform: translateX(0);
	}
	.mpg-drawer-handle {
		display: none;
	}
}

.mpg-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--mpg-line);
	flex-shrink: 0;
}
.mpg-drawer-head h3 {
	font-family: var(--mpg-font-display);
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: var(--mpg-brand);
}
.mpg-drawer-close {
	width: auto;
	height: 32px;
	border-radius: 999px;
	border: 1px solid var(--mpg-line);
	background: transparent;
	color: var(--mpg-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mpg-drawer-close:hover {
	border-color: var(--mpg-brand);
	color: var(--mpg-brand);
}

.mpg-drawer-body {
	overflow-y: auto;
	padding: 6px 20px 20px;
	flex: 1;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--mpg-brand) transparent;
}
.mpg-drawer-body::-webkit-scrollbar {
	width: 8px;
}
.mpg-drawer-body::-webkit-scrollbar-track {
	background: transparent;
}
.mpg-drawer-body::-webkit-scrollbar-thumb {
	background-color: var(--mpg-brand);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}

/* Facets — collapsible, closed by default */
.mpg-facet {
	border-bottom: 1px solid var(--mpg-line);
}
.mpg-facet-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: none;
	cursor: pointer;
	padding: 16px 2px;
	color: var(--mpg-ink);
	font-family: var(--mpg-font-ui);
	font-weight: 600;
	font-size: 14.5px;
	box-shadow: none;
}
.mpg-facet-toggle svg {
	transition: transform 0.25s ease;
	color: var(--mpg-gold);
	flex-shrink: 0;
}
.mpg-facet.is-open .mpg-facet-toggle svg {
	transform: rotate(180deg);
}
/* Collapsible facet panels use a 0fr/1fr grid-row trick instead of
   max-height: it collapses to a true, pixel-perfect zero (no sliver of
   the next checkbox peeking through) and needs no fixed height guess. */
.mpg-facet-panel {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.3s ease;
}
.mpg-facet.is-open .mpg-facet-panel {
	grid-template-rows: 1fr;
}
.mpg-facet-panel-inner {
	overflow: hidden;
	visibility: hidden;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 2px 14px;
	min-height: 0;
}
.mpg-facet.is-open .mpg-facet-panel-inner {
	overflow-y: auto;
	visibility: visible;
	max-height: 320px;
	scrollbar-width: thin;
	scrollbar-color: var(--mpg-brand) transparent;
}
.mpg-facet-panel-inner::-webkit-scrollbar {
	width: 6px;
}
.mpg-facet-panel-inner::-webkit-scrollbar-track {
	background: transparent;
}
.mpg-facet-panel-inner::-webkit-scrollbar-thumb {
	background-color: var(--mpg-brand);
	border-radius: 999px;
}

.mpg-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 9px;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--mpg-muted);
	transition: background 0.15s ease, color 0.15s ease;
}
.mpg-check:hover {
	background: rgba(109, 30, 31, 0.06);
	color: var(--mpg-ink);
}
.mpg-check input {
	appearance: none;
	width: 17px;
	height: 17px;
	border-radius: 5px;
	border: 1.5px solid var(--mpg-line-strong);
	background: #fff;
	flex-shrink: 0;
	position: relative;
	cursor: pointer;
}
.mpg-check input[type="radio"] {
	border-radius: 999px;
}
.mpg-check input:checked {
	background: var(--mpg-brand);
	border-color: var(--mpg-brand);
}
/* Centered with an absolutely-positioned flex box rather than a
   top/left + transform hack, so the glyph sits dead-center regardless
   of font metrics. */
.mpg-check input[type="checkbox"]:checked::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 11px;
	font-weight: 900;
	color: #fff;
}
.mpg-check input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #fff;
}
.mpg-stars {
	color: var(--mpg-gold);
	letter-spacing: 1px;
	font-size: 13px;
}
.mpg-facet-sub {
	color: var(--mpg-muted);
	font-size: 12px;
}

/* Price range slider */
.mpg-price-range {
	padding: 10px 4px 4px;
}
.mpg-price-slider {
	position: relative;
	height: 32px;
}
.mpg-price-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 999px;
	background: rgba(109, 30, 31, 0.12);
	transform: translateY(-50%);
}
.mpg-price-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mpg-brand), var(--mpg-gold));
	transform: translateY(-50%);
}
.mpg-price-handle {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--mpg-brand);
	box-shadow: 0 2px 6px rgba(109, 30, 31, 0.3);
	transform: translate(-50%, -50%);
	cursor: grab;
	touch-action: none;
}
.mpg-price-handle:active {
	cursor: grabbing;
}
.mpg-price-inputs {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 13px;
	color: var(--mpg-ink);
	font-weight: 600;
}

.mpg-drawer-foot {
	display: flex;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--mpg-line);
	flex-shrink: 0;
	background: #fbf5ee;
}
.mpg-btn-reset,
.mpg-btn-apply {
	flex: 1;
	padding: 13px 14px;
	border-radius: 999px;
	font-family: var(--mpg-font-ui);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.02em;
	cursor: pointer;
	border: 1px solid var(--mpg-line-strong);
}
.mpg-btn-reset {
	background: transparent;
	color: var(--mpg-muted);
}
.mpg-btn-reset:hover {
	color: var(--mpg-ink);
	border-color: var(--mpg-ink);
}
.mpg-btn-apply {
	background: linear-gradient(160deg, var(--mpg-brand-soft), var(--mpg-brand));
	color: #fff;
	border: none;
}
.mpg-btn-apply:hover {
	filter: brightness(1.06);
}

/* ---------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------ */
.mpg-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 34px;
	flex-wrap: wrap;
}
.mpg-page-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid var(--mpg-line);
	background: #fff;
	color: var(--mpg-muted);
	font-family: var(--mpg-font-ui);
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.mpg-page-btn:hover:not(:disabled):not(.is-active) {
	border-color: var(--mpg-gold);
	color: var(--mpg-gold-soft);
}
.mpg-page-btn.is-active {
	background: linear-gradient(160deg, var(--mpg-brand-soft), var(--mpg-brand));
	color: #fff;
	border-color: transparent;
}
.mpg-page-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.mpg-page-dots {
	color: var(--mpg-muted);
	padding: 0 4px;
	font-size: 13px;
}

/* ---------------------------------------------------------------------
   Toast (cart confirmation)
   ------------------------------------------------------------------ */
.mpg-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 20px);
	background: linear-gradient(160deg, #ffffff, #f6ede1);
	border: 1px solid var(--mpg-line-strong);
	color: var(--mpg-ink) !important;
	padding: 13px 22px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	box-shadow: var(--mpg-shadow);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	height: auto;
	max-height: 50px;
}
.mpg-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
.mpg-toast svg {
	color: var(--mpg-jewel);
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mpg-wrap * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Dynamic facet availability: options that would return zero products
   given the visitor's other active filters are greyed out and disabled,
   instead of being hidden, so the option is still visible but not
   selectable. */
.mpg-check.is-unavailable {
	opacity: 0.4;
	cursor: not-allowed;
}
.mpg-check.is-unavailable input {
	cursor: not-allowed;
}