/* ==========================================================================
   Moshkfam Product Showcase — Frontend v3
   Black / Caterpillar-gold brand palette.
   Compact header with glassmorphism home button, category image cards,
   and server-side autocomplete search.
   Performance-first: minimal GPU effects, no scroll animations.
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */

.mfc-showcase {
	/* Brand colours */
	--c-black:       #0a0a0a;
	--c-dark:        #111111;
	--c-dark-2:      #1a1a1a;
	--c-gold:        #f0b429;      /* Caterpillar / Moshkfam gold */
	--c-gold-dim:    rgba(240,180,41,.14);
	--c-gold-bright: #ffd166;
	--c-gold-text:   #1a0d00;

	/* Text */
	--c-text:        #f0f0f0;
	--c-text-mid:    rgba(240,240,240,.6);
	--c-text-faint:  rgba(240,240,240,.35);

	/* Borders */
	--c-border:      rgba(255,255,255,.08);
	--c-border-mid:  rgba(255,255,255,.14);

	/* Glass */
	--glass-bg:      rgba(10,10,10,.65);
	--glass-border:  rgba(255,255,255,.13);

	/* Radii */
	--radius-card:   14px;
	--radius-pill:   999px;
	--radius-inner:  8px;

	/* Transitions — kept short for snappiness */
	--t-fast:        130ms ease;
	--t-mid:         210ms ease;

	position: relative;
	background: var(--c-black);
	color: var(--c-text);
	font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 64px;
	box-sizing: border-box;
	isolation: isolate; /* keeps the -1 z-index bg layers below contained within this box */
}

.mfc-showcase *,
.mfc-showcase *::before,
.mfc-showcase *::after { box-sizing: border-box; }

/* ── Full-page facility background (photo + dark/gold glass gradient) ─────
   A single decorative pair of pseudo-elements behind every section: the
   photo is desaturated/darkened toward the brand palette via `filter`
   (one-time paint, not animated — no runtime cost), then a gradient
   overlay sits on top for legibility and the gold glow. Negative z-index
   keeps both permanently behind all real content without needing to touch
   the stacking context of every child element. */
.mfc-showcase::before,
.mfc-showcase::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.mfc-showcase::before {
	background-image: url('../images/facility-bg.jpg');
	background-image: image-set(
		url('../images/facility-bg.webp') type('image/webp') 1x,
		url('../images/facility-bg.jpg') type('image/jpeg') 1x
	);
	background-size: cover;
	background-position: center 22%;
	background-repeat: no-repeat;
	filter: sepia(.5) saturate(1.45) brightness(.4) hue-rotate(-8deg);
	opacity: .92;
}

.mfc-showcase::after {
	background:
		linear-gradient(180deg,
			rgba(6,5,2,.90)  0%,
			rgba(10,7,2,.55) 18%,
			rgba(10,8,3,.68) 55%,
			rgba(6,5,2,.94) 100%
		),
		radial-gradient(ellipse 85% 55% at 50% 0%,  rgba(240,180,41,.16) 0%, transparent 62%),
		radial-gradient(ellipse 55% 45% at 100% 15%, rgba(240,180,41,.09) 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 0% 85%,   rgba(240,180,41,.06) 0%, transparent 60%);
}

/* Kill theme pseudo-element injection inside product cards */
.mfc-showcase .mfc-card *::before,
.mfc-showcase .mfc-card *::after {
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
}

.mfc-showcase img { max-width: 100%; display: block; }

/* ── Compact Header ─────────────────────────────────────────────────────── */

.mfc-header {
	position: relative;
	/* NOTE: intentionally NOT `overflow: hidden` — the search autocomplete
	   dropdown (.mfc-search-dropdown) is an absolutely-positioned child that
	   extends below this box. Clipping here was hiding/killing clicks on
	   every suggestion. The header background layers below use inset:0 so
	   they never need clipping to stay contained. */
	overflow: visible;
	padding: 0;
	/* Safety-net: the plugin no longer renders a <header> tag, but some
	   themes/page-builders hide headers via broad selectors such as
	   header, .elementor-location-header, [class*="header"], etc.
	   Force this block visible regardless of such rules. */
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
}

.mfc-header-inner {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Multi-stop gradient background — dark/gold brand palette */
.mfc-header-bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			135deg,
			#0a0a0a 0%,
			#161208 35%,
			#1f1500 60%,
			#0d0d0d 100%
		);
}

/* Subtle gold accent glow — low-opacity, no blur overload */
.mfc-header-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 70% 120% at 50% 100%,
			rgba(240,180,41,.08) 0%,
			transparent 70%
		),
		radial-gradient(
			ellipse 40% 60% at 10% 50%,
			rgba(240,180,41,.04) 0%,
			transparent 65%
		);
	pointer-events: none;
}

/* Single-row inner layout: [Home btn] [Category cards] [Search] */
.mfc-header-inner {
	position: relative;
	/* Higher than .mfc-navbar-sticky (z-index: 30) below it — this box's
	   own stacking context holds the search dropdown, which must be able
	   to render on top of the sticky nav bar when it overlaps it. */
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1340px;
	margin: 0 auto;
	padding: 14px 20px;
}

/* Sides occupy fixed widths; center flexes to fill */
.mfc-header-start-side { flex: 0 0 auto; }
.mfc-header-center      { flex: 1 1 auto; min-width: 0; }
.mfc-header-end-side    { flex: 0 0 auto; }

/* ── Glassmorphism Home Button ──────────────────────────────────────────── */
/*
   Gold-tinted glass: translucent background with golden border,
   professional and Moshkfam-branded. Not too large, not too small.
*/

.mfc-home-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	white-space: nowrap;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;

	/* Glass core */
	background: rgba(240,180,41,.10);
	border: 1px solid rgba(240,180,41,.35);
	color: var(--c-gold-bright);

	/* Single blur only — kept light for performance */
	backdrop-filter: blur(8px) saturate(140%);
	-webkit-backdrop-filter: blur(8px) saturate(140%);

	box-shadow:
		0 1px 0 rgba(255,255,255,.07) inset,
		0 4px 16px rgba(0,0,0,.30);

	transition:
		background  var(--t-fast),
		border-color var(--t-fast),
		color var(--t-fast),
		box-shadow var(--t-fast);
}

.mfc-home-btn-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: .9;
}

.mfc-home-btn:hover {
	background: rgba(240,180,41,.18);
	border-color: rgba(240,180,41,.60);
	color: #fff;
	box-shadow:
		0 1px 0 rgba(255,255,255,.10) inset,
		0 6px 20px rgba(0,0,0,.35),
		0 0 0 1px rgba(240,180,41,.15);
}

/* ── Category Path Cards (inside header) ───────────────────────────────── */

.mfc-path-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	/* Hide scrollbar but allow scroll on mobile */
	scrollbar-width: none;
}
.mfc-path-row::-webkit-scrollbar { display: none; }

.mfc-path-card {
	appearance: none;
	position: relative;
	flex: 1 1 0;
	min-width: 90px;
	max-width: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	border-radius: var(--radius-card);
	border: 1px solid rgba(255,255,255,.10);
	cursor: pointer;
	overflow: hidden;
	text-align: center;
	color: var(--c-text);
	font-family: inherit;
	transition: border-color var(--t-fast), transform var(--t-fast);
	/* Custom background image set via CSS var */
	--card-bg-image: none;
}

/* Background image layer */
.mfc-path-card-bg {
	position: absolute;
	inset: 0;
	background-image: var(--card-bg-image, none);
	background-size: cover;
	background-position: center;
	transition: transform var(--t-mid);
	z-index: 0;
}

/* Glass overlay on top of image */
.mfc-path-card-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			rgba(10,10,10,.55) 0%,
			rgba(10,10,10,.75) 100%
		);
	z-index: 1;
	transition: background var(--t-fast);
}

/* When no image: solid dark surface */
.mfc-path-card:not([style]) .mfc-path-card-overlay,
.mfc-path-card[style*="--card-bg-image: none"] .mfc-path-card-overlay {
	background: rgba(20,18,10,.85);
}

/* Content above overlay */
.mfc-path-card .mfc-path-icon,
.mfc-path-card .mfc-path-label {
	position: relative;
	z-index: 2;
}

.mfc-path-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: var(--c-text-mid);
	transition: color var(--t-fast), background var(--t-fast);
}

.mfc-path-icon svg { width: 15px; height: 15px; }

.mfc-path-label {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--c-text);
}

.mfc-path-card:hover {
	border-color: rgba(240,180,41,.35);
	transform: translateY(-2px);
}

.mfc-path-card:hover .mfc-path-card-bg {
	transform: scale(1.04);
}

.mfc-path-card:hover .mfc-path-card-overlay {
	background:
		linear-gradient(
			to bottom,
			rgba(10,10,10,.45) 0%,
			rgba(10,10,10,.65) 100%
		);
}

.mfc-path-card:hover .mfc-path-icon {
	background: var(--c-gold-dim);
	color: var(--c-gold);
}

.mfc-path-card.is-active {
	border-color: rgba(240,180,41,.55);
}

.mfc-path-card.is-active .mfc-path-icon {
	background: var(--c-gold);
	color: var(--c-gold-text);
}

.mfc-path-card.is-active .mfc-path-card-overlay {
	background:
		linear-gradient(
			to bottom,
			rgba(10,10,8,.50) 0%,
			rgba(20,15,0,.72) 100%
		);
}

/* ── Search Bar (in header, left side) ─────────────────────────────────── */

.mfc-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--radius-pill);
	padding: 9px 14px;
	min-width: 180px;
	max-width: 240px;
	transition: border-color var(--t-fast), background var(--t-fast);
}

.mfc-search-wrap:focus-within {
	border-color: rgba(240,180,41,.40);
	background: rgba(255,255,255,.08);
}

.mfc-search-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--c-text-faint);
}

.mfc-search-input {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	color: var(--c-text);
	font-family: inherit;
	font-size: 13px;
	width: 100%;
	min-width: 0;
}

.mfc-search-input::placeholder { color: var(--c-text-faint); }
.mfc-search-input::-webkit-search-cancel-button { filter: invert(.5); }

/* Autocomplete dropdown */
.mfc-search-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--radius-card);
	overflow: hidden;
	z-index: 50;
	box-shadow: 0 8px 32px rgba(0,0,0,.55);
}

.mfc-search-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	align-items: start;
	column-gap: 10px;
	width: 100%;
	text-align: start;
	appearance: none;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,.06);
	background: transparent;
	padding: 10px 14px;
	cursor: pointer;
	color: var(--c-text);
	font-family: inherit;
	transition: background var(--t-fast);
}
.mfc-search-item:last-child { border-bottom: none; }

.mfc-search-item:hover,
.mfc-search-item:focus {
	background: rgba(240,180,41,.10);
	outline: none;
}

.mfc-search-item-title {
	display: block;
	grid-column: 1;
	grid-row: 1;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.mfc-search-item-short {
	display: block;
	grid-column: 1;
	grid-row: 2;
	font-size: 11px;
	color: var(--c-text-faint);
	line-height: 1.4;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Category badge — shown in the top-right corner of each suggestion */
.mfc-search-item-cat {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: rgba(240,180,41,.15);
	color: var(--c-gold, #f0b429);
	border: 1px solid rgba(240,180,41,.25);
	border-radius: 20px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}
.mfc-search-item-cat svg {
	flex-shrink: 0;
	opacity: .75;
}

.mfc-search-no-result {
	padding: 12px 14px;
	font-size: 12.5px;
	color: var(--c-text-faint);
	text-align: center;
}

/* ── Responsive Header ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.mfc-header-inner {
		flex-wrap: wrap;
		padding: 12px 16px;
		gap: 10px;
	}
	/* Row 1: home + search */
	.mfc-header-start-side { order: 1; }
	.mfc-header-end-side   { order: 2; flex: 1 1 auto; }
	.mfc-header-center     { order: 3; width: 100%; }

	.mfc-search-wrap { max-width: 100%; min-width: 0; }
	.mfc-path-row    { gap: 6px; }
	.mfc-path-card   { min-width: 72px; padding: 8px 6px; }
	.mfc-path-label  { font-size: 10.5px; }
	.mfc-path-icon   { width: 26px; height: 26px; }
}

@media (max-width: 480px) {
	.mfc-home-btn span { display: none; } /* icon only on small screens */
	.mfc-home-btn { padding: 9px 10px; }
	.mfc-path-card { min-width: 64px; max-width: 90px; }
}

/* ── Sticky nav bar ─────────────────────────────────────────────────────── */

.mfc-navbar-sticky {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: 8px 20px;
	background: linear-gradient(180deg, var(--c-black) 65%, transparent 100%);
}

.mfc-navbar {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	max-width: 1340px;
	margin: 0 auto;
	padding: 6px 10px;
	background: var(--c-dark);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
}

@media (max-width: 900px) {
	.mfc-navbar { border-radius: var(--radius-card); justify-content: center; }
}

.mfc-nav-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }

.mfc-nav-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--c-border);
	background: transparent;
	color: var(--c-text-mid);
	cursor: pointer;
	transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
	text-decoration: none;
	flex-shrink: 0;
}

.mfc-nav-icon-btn:hover {
	color: var(--c-gold);
	border-color: rgba(240,180,41,.35);
	background: var(--c-gold-dim);
}

.mfc-nav-categories {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	justify-content: center;
}

.mfc-nav-pill {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--c-text-mid);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
	white-space: nowrap;
}

.mfc-nav-pill:hover {
	color: var(--c-text);
	background: rgba(255,255,255,.06);
}

.mfc-nav-pill.is-active {
	background: var(--c-gold);
	color: var(--c-gold-text);
}

/* ── Body layout ────────────────────────────────────────────────────────── */

.mfc-body {
	max-width: 1340px;
	margin: 0 auto;
	padding: 20px 20px 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.mfc-showcase:has(.mfc-subcats[data-has-content="1"]) .mfc-body {
	grid-template-columns: 190px minmax(0, 1fr);
}

@media (max-width: 860px) {
	.mfc-showcase:has(.mfc-subcats[data-has-content="1"]) .mfc-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Subcategory sidebar ────────────────────────────────────────────────── */

.mfc-subcats { display: none; }

.mfc-subcats[data-has-content="1"] {
	display: block;
	position: sticky;
	top: 70px;
}

@media (max-width: 860px) {
	.mfc-subcats[data-has-content="1"] { position: static; }
}

.mfc-subcats-inner {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--c-dark);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	padding: 10px;
}

@media (max-width: 860px) {
	.mfc-subcats-inner { flex-direction: row; flex-wrap: wrap; }
}

.mfc-subcats-title {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-text-faint);
	margin: 0 0 6px;
	padding: 0 6px;
}

@media (max-width: 860px) { .mfc-subcats-title { display: none; } }

.mfc-subcat-btn {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 7px;
	border: none;
	background: transparent;
	color: var(--c-text-mid);
	font-family: inherit;
	font-size: 12px;
	text-align: start;
	padding: 7px 9px;
	border-radius: var(--radius-inner);
	cursor: pointer;
	transition: color var(--t-fast), background var(--t-fast);
	white-space: nowrap;
}

.mfc-subcat-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .4;
	flex-shrink: 0;
}

.mfc-subcat-btn:hover { background: rgba(255,255,255,.05); color: var(--c-text); }

.mfc-subcat-btn.is-active {
	background: var(--c-gold-dim);
	color: var(--c-gold);
	font-weight: 600;
}

.mfc-subcat-btn.is-active .mfc-subcat-dot { background: var(--c-gold); opacity: 1; }

/* ── Product grid ───────────────────────────────────────────────────────── */

.mfc-grid-wrap { position: relative; min-height: 200px; padding-bottom: 32px; }

.mfc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	transition: opacity 150ms ease;
}

.mfc-grid.is-loading { opacity: .3; pointer-events: none; }

@media (max-width: 1200px) { .mfc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .mfc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  {
	.mfc-grid { grid-template-columns: 1fr; gap: 10px; }
	.mfc-body { padding: 14px 14px 0; }
}

.mfc-showcase:has(.mfc-subcats[data-has-content="1"]) .mfc-grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
	.mfc-showcase:has(.mfc-subcats[data-has-content="1"]) .mfc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* ── Product card ───────────────────────────────────────────────────────── */

.mfc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-dark-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}

.mfc-card:hover {
	border-color: rgba(240,180,41,.28);
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0,0,0,.40), 0 0 0 1px rgba(240,180,41,.07);
}

/* Brief highlight when a search suggestion scrolls to it */
.mfc-card.mfc-card-highlight {
	border-color: var(--c-gold);
	box-shadow: 0 0 0 2px rgba(240,180,41,.30);
}

/* Image shelf */
.mfc-card-media {
	position: relative;
	background:
		radial-gradient(
			ellipse 75% 70% at 50% 30%,
			rgba(255,255,255,.06) 0%,
			rgba(255,255,255,.02) 40%,
			transparent 70%
		),
		#0f0f0f;
	padding: 20px 16px 12px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mfc-card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 5px 14px rgba(0,0,0,.45));
	transition: transform var(--t-mid);
}

.mfc-card:hover .mfc-card-image { transform: scale(1.04); }

/* Card text area */
.mfc-card-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 11px 13px 13px;
	border-top: 1px solid var(--c-border);
	flex: 1;
}

.mfc-card-name {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.45;
	color: var(--c-text);
}

.mfc-card-desc {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--c-text-mid);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mfc-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
}

.mfc-card-tag {
	font-size: 10px;
	font-weight: 600;
	color: var(--c-gold);
	background: var(--c-gold-dim);
	border-radius: 4px;
	padding: 2px 6px;
}

/* Invisible full-card click target */
.mfc-card-hit {
	all: unset;
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.mfc-card-hit:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: -2px;
	border-radius: var(--radius-card);
}

/* ── Load more ──────────────────────────────────────────────────────────── */

.mfc-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.mfc-load-more-wrap.mfc-hidden-by-search { display: none; }

.mfc-load-more {
	appearance: none;
	border: 1px solid var(--c-border-mid);
	background: transparent;
	color: var(--c-text-mid);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 30px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.mfc-load-more:hover:not(:disabled) {
	border-color: var(--c-gold);
	color: var(--c-gold);
	background: var(--c-gold-dim);
}

.mfc-load-more:disabled { opacity: .4; cursor: default; }
.mfc-load-more[hidden]  { display: none; }

/* ── Loader dots ────────────────────────────────────────────────────────── */

.mfc-loader {
	position: absolute;
	top: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	gap: 5px;
	z-index: 5;
}

.mfc-loader.is-visible { display: flex; }

.mfc-loader span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-gold);
	opacity: .3;
	animation: mfc-pulse 800ms infinite ease-in-out;
}

.mfc-loader span:nth-child(2) { animation-delay: 130ms; }
.mfc-loader span:nth-child(3) { animation-delay: 260ms; }

@keyframes mfc-pulse {
	0%, 100% { opacity: .25; }
	50%       { opacity: 1;   }
}

/* ── Modal ──────────────────────────────────────────────────────────────── */

/* The modal is moved to a direct child of <body> at runtime (see
   frontend.js) so its z-index:999999 always competes at the true page
   root — never capped by .mfc-showcase's isolated stacking context.
   Because of that move it can no longer inherit the custom properties
   declared on .mfc-showcase, so the handful it actually uses are
   redeclared here. */
.mfc-modal {
	--c-black:      #0a0a0a;
	--c-dark:       #111111;
	--c-gold:       #f0b429;
	--c-text:       #f0f0f0;
	--c-text-mid:   rgba(240,240,240,.6);
	--c-border:     rgba(255,255,255,.08);
	--c-border-mid: rgba(255,255,255,.14);
	--t-fast:       130ms ease;
	--t-mid:        210ms ease;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--c-text);
	transition: opacity var(--t-mid), visibility var(--t-mid);
}

.mfc-modal,
.mfc-modal *,
.mfc-modal *::before,
.mfc-modal *::after {
	box-sizing: border-box;
}

.mfc-modal.is-open { visibility: visible; opacity: 1; }

.mfc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4,4,4,.88);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.mfc-modal-dialog {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 980px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--c-dark);
	border: 1px solid var(--c-border-mid);
	border-radius: 20px;
	box-shadow: 0 28px 72px rgba(0,0,0,.70);
}

.mfc-modal-close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--c-border);
	background: var(--c-black);
	color: var(--c-text-mid);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--t-fast), border-color var(--t-fast);
}

.mfc-modal-close:hover { color: var(--c-gold); border-color: rgba(240,180,41,.40); }

.mfc-modal-body {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
}

@media (max-width: 720px) { .mfc-modal-body { grid-template-columns: 1fr; } }

.mfc-modal-image {
	background-color: #0f0f0f;
	background-image:
		radial-gradient(ellipse 85% 75% at 50% 38%, rgba(255,255,255,.05) 0%, transparent 68%);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 280px;
	border-radius: 20px 0 0 20px;
}

@media (max-width: 720px) {
	.mfc-modal-image { border-radius: 20px 20px 0 0; min-height: 200px; }
}

[dir='rtl'] .mfc-modal-image { border-radius: 0 20px 20px 0; }

@media (max-width: 720px) {
	[dir='rtl'] .mfc-modal-image { border-radius: 20px 20px 0 0; }
}

.mfc-modal-info { padding: 32px 32px 38px; }

@media (max-width: 720px) { .mfc-modal-info { padding: 22px 20px 26px; } }

.mfc-modal-title {
	font-size: 21px;
	font-weight: 800;
	margin: 0 0 10px;
	letter-spacing: -0.02em;
	line-height: 1.35;
}

.mfc-modal-short {
	font-size: 13.5px;
	color: var(--c-text-mid);
	line-height: 1.75;
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--c-border);
}

.mfc-modal-section { margin-bottom: 16px; }
.mfc-modal-section:last-child { margin-bottom: 0; }

.mfc-modal-section h4 {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--c-gold);
	margin: 0 0 6px;
	font-weight: 700;
}

.mfc-modal-section-content {
	font-size: 13px;
	line-height: 1.8;
	color: var(--c-text);
}

.mfc-modal-section-content p:first-child { margin-top: 0; }
.mfc-modal-section-content:empty { display: none; }
.mfc-modal-section:has(.mfc-modal-section-content:empty) { display: none; }

body.mfc-modal-open { overflow: hidden; }

/* ── RTL mirror ─────────────────────────────────────────────────────────── */

[dir='rtl'] .mfc-nav-back svg { transform: scaleX(-1); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.mfc-showcase *,
	.mfc-modal,
	.mfc-modal * {
		transition-duration: 1ms !important;
		animation-duration:  1ms !important;
	}
}

/* ── Search-result mode — single product view ───────────────────────────── */

/* In search-result mode the grid shows one centred card, not a full grid */
.mfc-search-result-mode .mfc-grid {
	display: flex;
	justify-content: center;
	padding-block: 32px;
}

.mfc-search-result-mode .mfc-grid .mfc-card {
	max-width: 360px;
	width: 100%;
	/* Subtle entrance animation */
	animation: mfc-card-pop .22s cubic-bezier(.22,1,.36,1) both;
}

@keyframes mfc-card-pop {
	from { opacity: 0; transform: translateY(12px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* Subcategory sidebar is irrelevant in single-product view */
.mfc-search-result-mode .mfc-subcats { display: none; }