/*
	Theme Name: Hello Elementor Child - MigX
	Template: hello-elementor
	Description: Custom header/footer + design tokens for ghataatmobile.com, built on top of Hello Elementor.
	Version: 3.1.8
	Text Domain: hello-elementor-child
*/

/* 'VazirFN' = Vazirmatn (SIL Open Font License, github.com/rastikerdar/
   vazirmatn), self-hosted as ONE variable font file covering every
   weight 100-900, subset to the Persian + Latin characters the site's
   content actually uses (~69 KB; every character in product/page/
   category text is covered -- checked against the database). It replaces four separate static files
   (~80 KB each) that used to be pulled from the Persian Elementor
   plugin; that plugin's own font.css (25 font families, none used by
   any content here) is no longer loaded on the front end -- see
   functions.php. 'VazirMatn' is declared too, on the same file, in case
   an Elementor widget ever picks that family by name. 'Yekan Bakh' stays
   first in --mgx-font and takes over automatically once its licensed
   files are uploaded (see fonts/README.txt). */
@font-face {
	font-family: 'VazirFN';
	src: url('fonts/Vazirmatn-wght-fa.woff2') format('woff2-variations'), url('fonts/Vazirmatn-wght-fa.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'VazirMatn';
	src: url('fonts/Vazirmatn-wght-fa.woff2') format('woff2-variations'), url('fonts/Vazirmatn-wght-fa.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--mgx-bg: #F8F9FA;
	--mgx-surface: #FFFFFF;
	--mgx-ink: #1E252B;
	--mgx-ink-2: #2A333B;
	--mgx-muted: #5A6578;
	--mgx-amber: #F5B301;
	--mgx-teal: #0D9488;
	--mgx-teal-dark: #0B7A70;
	--mgx-line: #E4E7EA;
	--mgx-font: 'Yekan Bakh', 'VazirFN', Tahoma, sans-serif;
}

body {
	background: var(--mgx-bg);
	font-family: var(--mgx-font);
}

/* homepage-only: soft color blobs behind the glass cards -- a flat
   background gives translucent/blurred cards nothing to show through,
   so this is what makes the glass effect actually read as glass. */
body.home,
body.blog {
	background:
		radial-gradient(circle at 12% 18%, rgba(13,148,136,.12), transparent 42%),
		radial-gradient(circle at 88% 8%, rgba(245,179,1,.14), transparent 38%),
		radial-gradient(circle at 25% 75%, rgba(245,179,1,.08), transparent 45%),
		radial-gradient(circle at 90% 85%, rgba(13,148,136,.10), transparent 42%),
		var(--mgx-bg);
	background-attachment: fixed;
}

/* The theme's own page-header/title ("خانه") was rendering above the
   Elementor-built homepage content -- the homepage is a full page
   design, so its own title heading is redundant/ugly, not useful
   content. */
body.home .page-header {
	display: none;
}

/* Elementor-built pages (like the new homepage) don't inherit `body`'s
   font -- Elementor's own kit CSS sets these four custom properties
   directly on body.elementor-kit-13 to "Roboto"/"Roboto Slab" (Latin
   fonts, wrong script entirely for Persian text) and every widget that
   uses "Global Fonts" reads its font-family from them. Overriding the
   same variables here, after Elementor's kit CSS, makes Elementor
   content match the rest of the site without touching every widget's
   individual typography settings by hand. */
body.elementor-kit-13 {
	--e-global-typography-primary-font-family: var(--mgx-font);
	--e-global-typography-secondary-font-family: var(--mgx-font);
	--e-global-typography-text-font-family: var(--mgx-font);
	--e-global-typography-accent-font-family: var(--mgx-font);
}

/* -----------------------------------------------------------------
   Header
   ----------------------------------------------------------------- */

.mgx-header {
	background: var(--mgx-ink);
	color: #fff;
	position: relative;
	z-index: 100;
}

.mgx-header a {
	color: #fff;
	text-decoration: none;
}

.mgx-header__bar {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.mgx-header__logo {
	font-size: 1.4rem;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.mgx-header__logo img {
	/* explicit height + width:auto (not just max-height) so the image's
	   own aspect ratio always governs its width -- without this it was
	   getting stretched wide/flat by a competing width rule elsewhere
	   in the cascade. */
	height: 56px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

.mgx-header__search {
	flex: 1;
	max-width: 640px;
	margin: 0 auto;
}

.mgx-header__search form {
	display: flex;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease;
}

.mgx-header__search form:focus-within {
	border-color: var(--mgx-amber);
}

/* :not(.psx-search__input) -- this rule was written for the plain
   fallback <form> (only used if the Persian Search X plugin is off).
   The plugin's own input is ALSO type="search" and sits inside this
   same .mgx-header__search wrapper, so this rule's higher specificity
   (attribute selector) was winning over the plugin's own
   .psx-search__input rule, forcing a dark ink color on a transparent
   background -- invisible against the dark overlay behind it, and
   made the plugin's own color settings look like they had no effect
   on the typed text. */
.mgx-header__search input[type="search"]:not(.psx-search__input) {
	flex: 1;
	border: 0;
	padding: 11px 14px;
	font-family: var(--mgx-font);
	font-size: .95rem;
	color: var(--mgx-ink);
	background: transparent;
	outline: none;
}

/* Belt-and-suspenders: guarantee a visible input regardless of what the
   plugin's own color settings are ever set to. */
.mgx-header__search .psx-search__input {
	background: #fff !important;
	color: var(--mgx-ink) !important;
}

.mgx-header__search button {
	border: 0;
	background: var(--mgx-ink);
	color: #fff;
	padding: 0 18px;
	cursor: pointer;
	font-family: var(--mgx-font);
}

.mgx-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.mgx-header__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: .72rem;
	position: relative;
}

.mgx-header__action .mgx-icon {
	width: 22px;
	height: 22px;
}

.mgx-header__cart-count {
	position: absolute;
	top: -6px;
	inset-inline-end: -10px;
	background: var(--mgx-teal);
	color: #fff;
	font-size: .65rem;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* nav row */
.mgx-nav {
	background: var(--mgx-ink-2);
	border-top: 1px solid rgba(255,255,255,.08);
}

.mgx-nav__bar {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	/* no overflow-x/scroll here: this bar is desktop-only (hidden on
	   mobile below) and setting overflow-x alone also forces overflow-y
	   to "auto" per the CSS spec, which was silently clipping the
	   absolutely-positioned .mgx-mega dropdown -- hover never showed it. */
}

.mgx-nav__bar a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px;
	font-size: .88rem;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}

.mgx-nav__bar a:hover,
.mgx-nav__bar a:focus-visible {
	border-color: var(--mgx-amber);
	color: var(--mgx-amber);
}

.mgx-nav-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: .85;
}

.mgx-header__burger {
	display: none;
	background: none;
	border: 0;
	color: #fff;
	font-size: 1.4rem;
	cursor: pointer;
}

/* -----------------------------------------------------------------
   Desktop mega-menu (hover dropdown showing subcategories)
   ----------------------------------------------------------------- */

.mgx-nav__item {
	position: relative;
	display: inline-flex;
}

.mgx-mega {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 640px;
	max-width: min(1100px, 92vw);
	background: var(--mgx-surface);
	color: var(--mgx-ink);
	font-family: var(--mgx-font);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 18px 40px rgba(0,0,0,.18);
	padding: 16px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 200;
}

.mgx-nav__item.has-dropdown:hover .mgx-mega,
.mgx-nav__item.has-dropdown:focus-within .mgx-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mgx-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px 20px;
}

.mgx-mega__grid a {
	display: block;
	padding: 7px 4px;
	color: var(--mgx-ink);
	text-decoration: none;
	font-size: .87rem;
	border-bottom: 1px dashed var(--mgx-line);
	transition: color .15s ease, transform .15s ease;
}

.mgx-mega__grid a:hover {
	color: var(--mgx-teal);
	transform: scale(1.04);
}

/* three-level mega-menu: one column per brand/type, each listing its
   own models/subcategories underneath */
.mgx-mega__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px 24px;
	max-height: 70vh;
	overflow-y: auto;
}

.mgx-mega__col-title {
	display: block;
	font-family: var(--mgx-font);
	font-weight: 700;
	font-size: .8rem;
	line-height: 1.3;
	color: var(--mgx-ink) !important;
	text-decoration: none;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 2px solid var(--mgx-amber);
	transition: color .15s ease;
}

.mgx-mega__col-title:hover {
	color: var(--mgx-teal) !important;
}

.mgx-mega__col-items {
	display: flex;
	flex-direction: column;
}

.mgx-mega__col-items a {
	padding: 3px 2px;
	font-family: var(--mgx-font);
	font-size: .74rem;
	line-height: 1.5;
	color: var(--mgx-muted) !important;
	text-decoration: none;
	transition: color .15s ease, transform .15s ease;
	transform-origin: right center;
}

.mgx-mega__col-items a:hover {
	color: var(--mgx-teal) !important;
	transform: scale(1.06);
}

@media (max-width: 1100px) {
	.mgx-mega__columns { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
	.mgx-mega__columns { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------------
   Mobile off-canvas category drawer
   ----------------------------------------------------------------- */

.mgx-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}

.mgx-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mgx-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10,14,18,.55);
	opacity: 0;
	transition: opacity .2s ease;
}

.mgx-drawer.is-open .mgx-drawer__backdrop {
	opacity: 1;
}

.mgx-drawer__panel {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	height: 100%;
	width: min(92vw, 420px);
	background: var(--mgx-surface);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .25s ease;
}

[dir="rtl"] .mgx-drawer__panel {
	transform: translateX(-100%);
}

.mgx-drawer.is-open .mgx-drawer__panel {
	transform: translateX(0);
}

.mgx-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	font-weight: 700;
	border-bottom: 1px solid var(--mgx-line);
}

.mgx-drawer__head button {
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--mgx-muted);
}

.mgx-drawer__body {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.mgx-drawer__top {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 40%;
	background: var(--mgx-bg);
	overflow-y: auto;
	border-inline-end: 1px solid var(--mgx-line);
}

.mgx-drawer__top a {
	display: block;
	padding: 14px 10px;
	font-size: .85rem;
	color: var(--mgx-ink);
	border-bottom: 1px solid var(--mgx-line);
}

.mgx-drawer__top a.is-active {
	background: var(--mgx-surface);
	color: var(--mgx-teal);
	font-weight: 700;
	border-inline-start: 3px solid var(--mgx-teal);
}

.mgx-drawer__children {
	flex: 1;
	overflow-y: auto;
	padding: 8px 14px;
}

.mgx-drawer__pane {
	display: none;
	flex-direction: column;
}

.mgx-drawer__pane.is-active {
	display: flex;
}

.mgx-drawer__pane a {
	padding: 12px 4px;
	font-size: .85rem;
	color: var(--mgx-ink);
	border-bottom: 1px solid var(--mgx-line);
}

.mgx-drawer__foot {
	display: flex;
	border-top: 1px solid var(--mgx-line);
}

.mgx-drawer__foot a {
	flex: 1;
	text-align: center;
	padding: 14px 8px;
	font-size: .82rem;
	color: var(--mgx-teal);
	font-weight: 600;
}

body.mgx-no-scroll {
	overflow: hidden;
}

/* -----------------------------------------------------------------
   Glass floating bottom nav (site-wide) -- one connected pill
   containing all items, like an iOS "Dynamic Island" switcher.
   ----------------------------------------------------------------- */

.mgx-bottomnav {
	/* mobile-only: this bar duplicates the desktop header's own account/
	   cart/search actions, so it only makes sense as a thumb-reachable
	   shortcut on small screens. */
	display: none;
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 900;
	align-items: stretch;
	gap: 2px;
	padding: 6px;
	/* solid, not translucent -- a semi-transparent bg here depends on
	   backdrop-filter support to read as "dark glass"; without it (older
	   in-app webviews, some Android browsers) it can fall back to a
	   washed-out near-white bar, which is what was reported. A solid
	   color always renders the same regardless of blur support. */
	background: var(--mgx-ink);
	border-radius: 22px;
	box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
	max-width: calc(100vw - 20px);
}

.mgx-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: rgba(255,255,255,.72);
	border-radius: 16px;
	padding: 9px 18px 8px;
	font-size: .8rem;
	white-space: nowrap;
	transition: color .2s ease, background .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}

.mgx-bottomnav__item:hover,
.mgx-bottomnav__item:focus-visible {
	color: #fff;
}

.mgx-bottomnav__item.is-current {
	background: var(--mgx-teal);
	color: #fff;
	transform: translateY(-2px);
}

.mgx-bottomnav__icon svg {
	width: 21px;
	height: 21px;
	display: block;
}

@media (max-width: 640px) {
	body {
		padding-bottom: 78px; /* keeps page content clear of the fixed glass bottom nav */
	}
	.mgx-bottomnav {
		display: flex;
		bottom: 12px;
		gap: 0;
		padding: 5px;
		width: calc(100vw - 20px);
		justify-content: space-between;
	}
	.mgx-bottomnav__item {
		flex: 1;
		padding: 8px 4px 7px;
	}
}

/* -----------------------------------------------------------------
   Footer
   ----------------------------------------------------------------- */

.mgx-footer {
	background: var(--mgx-ink);
	color: rgba(255,255,255,.78);
	margin-top: 48px;
	font-size: .9rem;
}

.mgx-footer a {
	color: rgba(255,255,255,.78);
	text-decoration: none;
}

.mgx-footer a:hover {
	color: var(--mgx-amber);
}

.mgx-footer__grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 20px 32px;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
}

@media (max-width: 900px) {
	.mgx-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.mgx-footer__grid { grid-template-columns: 1fr; }
	.mgx-header__bar { flex-wrap: wrap; }
	.mgx-header__search { order: 3; max-width: none; flex-basis: 100%; }
	/* Categories live in the off-canvas drawer on mobile, not this bar. */
	.mgx-nav { display: none; }
	.mgx-header__burger { display: block; }
}

.mgx-footer__col h3 {
	color: #fff;
	font-size: .95rem;
	margin: 0 0 16px;
	font-weight: 700;
}

.mgx-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mgx-footer__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.mgx-footer__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(245,179,1,.12);
	color: var(--mgx-amber);
	border: 1px solid rgba(245,179,1,.35);
	border-radius: 6px;
	padding: 4px 10px;
	font-size: .75rem;
}

.mgx-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding: 16px 20px;
	text-align: center;
	font-size: .8rem;
	color: rgba(255,255,255,.5);
}

/* -----------------------------------------------------------------
   My Account page (WooCommerce's own markup, restyled -- no template
   overrides needed: .woocommerce-MyAccount-navigation / -content, the
   --dashboard/orders/downloads/edit-address/edit-account/customer-logout
   nav-link suffixes, and orders-table__row--status-{slug} are all
   stable WooCommerce core class names).
   ----------------------------------------------------------------- */

.woocommerce-account {
	background: var(--mgx-bg);
	padding: 32px 0 60px;
}

/* !important + the body.woocommerce-account prefix: WooCommerce's own
   core CSS (woocommerce-layout.css) sets float+percentage widths on
   these same two elements with equal-or-higher effective specificity,
   which was winning over a plain grid rule and squeezing the content
   column down to almost nothing. */
body.woocommerce-account .woocommerce {
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	display: grid !important;
	grid-template-columns: 260px 1fr !important;
	gap: 24px !important;
	align-items: start !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
}

.woocommerce-MyAccount-navigation {
	background: var(--mgx-surface);
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(20,25,30,.06);
	padding: 14px;
	position: sticky;
	top: 20px;
}

.woocommerce-MyAccount-navigation a {
	text-decoration: none;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	color: var(--mgx-muted);
	font-size: .9rem;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-MyAccount-navigation-link a::before {
	content: '';
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .7;
}

.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--mgx-bg);
	color: var(--mgx-ink);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--mgx-amber);
	color: var(--mgx-ink);
}

.woocommerce-MyAccount-navigation-link.is-active a::before {
	opacity: 1;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6578' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6578' stroke-width='1.8'%3E%3Cpath d='M3.5 8.5L12 4l8.5 4.5V16L12 20.5 3.5 16z'/%3E%3Cpath d='M3.5 8.5L12 13l8.5-4.5M12 13v7.5'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--downloads a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6578' stroke-width='1.8'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6578' stroke-width='1.8'%3E%3Cpath d='M12 21s7-6.1 7-11.5A7 7 0 105 9.5C5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6578' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6578' stroke-width='1.8'%3E%3Cpath d='M15 4H7a2 2 0 00-2 2v12a2 2 0 002 2h8' stroke-linecap='round'/%3E%3Cpath d='M10 12h11m0 0l-3.5-3.5M21 12l-3.5 3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #c0392b;
}

/* sidebar profile header + date strip + quick links (injected via
   woocommerce_account_navigation hook in functions.php, printed right
   before WooCommerce's own <ul>, all inside the same sticky nav card)
   -- plain block stacking, no flex/order on the parent: the elements
   already come out in source order (navhead, then datestrip, then
   quicklinks, then the <ul>), so ordering doesn't need any help, and
   `order` risks fighting the parent's own layout if a selector ever
   stops matching (this happened once already -- see git history). */
.mgx-acc-navhead {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 18px 8px 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--mgx-line);
}

.mgx-acc-avatar {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--mgx-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.3rem;
}

.mgx-acc-names {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.mgx-acc-username {
	font-weight: 700;
	font-size: .92rem;
	color: var(--mgx-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.mgx-acc-displayname {
	font-size: .76rem;
	color: var(--mgx-muted);
}

.mgx-acc-datestrip {
	display: flex;
	list-style: none;
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--mgx-line);
}

.mgx-acc-date {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 2px;
	border-radius: 10px;
	font-size: .72rem;
	color: var(--mgx-muted);
	font-variant-numeric: tabular-nums;
}

.mgx-acc-date span:first-child {
	font-weight: 700;
	font-size: .82rem;
}

.mgx-acc-date.is-current {
	background: var(--mgx-amber);
	color: var(--mgx-ink);
}

.mgx-acc-quicklinks {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.mgx-acc-quicklinks a {
	flex: 1;
	text-align: center;
	padding: 8px 6px;
	border-radius: 10px;
	background: var(--mgx-bg);
	color: var(--mgx-ink);
	font-size: .78rem;
	font-weight: 600;
}

.mgx-acc-quicklinks a:hover {
	background: var(--mgx-teal);
	color: #fff;
}

.woocommerce-MyAccount-content {
	background: var(--mgx-surface);
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(20,25,30,.06);
	padding: 28px;
	min-height: 320px;
}

.woocommerce-MyAccount-content mark {
	background: none;
	color: var(--mgx-teal);
	font-weight: 700;
}

.woocommerce-MyAccount-content a:not(.button) {
	color: var(--mgx-teal);
	text-decoration: none;
}

/* dashboard: order-status stat cards (woocommerce_account_dashboard hook) */
.mgx-dash-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 20px 0;
}

.mgx-dash-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--mgx-surface);
	border-radius: 14px;
	padding: 18px 10px 16px;
	text-align: center;
	box-shadow: 0 1px 0 rgba(20,25,30,.04) inset;
	border-top: 3px solid var(--mgx-line);
}

.mgx-dash-stat__icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mgx-bg);
	color: var(--mgx-muted);
}

.mgx-dash-stat__icon svg {
	width: 18px;
	height: 18px;
}

.mgx-dash-stat strong {
	font-size: 1.4rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--mgx-ink);
}

.mgx-dash-stat__label {
	font-size: .74rem;
	color: var(--mgx-muted);
	line-height: 1.4;
}

.mgx-dash-stat--completed,
.mgx-dash-stat--processing {
	border-top-color: var(--mgx-teal);
}

.mgx-dash-stat--completed .mgx-dash-stat__icon,
.mgx-dash-stat--processing .mgx-dash-stat__icon {
	background: rgba(13,148,136,.12);
	color: var(--mgx-teal-dark);
}

.mgx-dash-stat--pending,
.mgx-dash-stat--on-hold {
	border-top-color: var(--mgx-amber);
}

.mgx-dash-stat--pending .mgx-dash-stat__icon,
.mgx-dash-stat--on-hold .mgx-dash-stat__icon {
	background: rgba(245,179,1,.15);
	color: #8a6100;
}

.mgx-dash-stat--cancelled {
	border-top-color: #b32d2e;
}

.mgx-dash-stat--cancelled .mgx-dash-stat__icon {
	background: rgba(178,45,46,.12);
	color: #b32d2e;
}

/* dashboard: personal-info + recent-orders cards */
.mgx-dash-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}

.mgx-dash-card {
	background: var(--mgx-bg);
	border-radius: 14px;
	padding: 18px;
}

.mgx-dash-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.mgx-dash-card__head h3 {
	margin: 0;
	font-size: .95rem;
	color: var(--mgx-ink);
}

.mgx-dash-card__head a {
	font-size: .78rem;
	color: var(--mgx-teal);
	text-decoration: none;
	font-weight: 600;
}

.mgx-dash-info {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mgx-dash-info > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--mgx-line);
}

.mgx-dash-info dt {
	flex-shrink: 0;
	font-size: .8rem;
	color: var(--mgx-muted);
}

/* min-width: 0 + overflow-wrap: an unbreakable value (email, address)
   otherwise refuses to shrink below its own content width as a flex
   item -- that's what was pushing the whole my-account page wider than
   the mobile viewport and forcing a horizontal scrollbar. */
.mgx-dash-info dd {
	min-width: 0;
	overflow-wrap: anywhere;
	margin: 0;
	font-size: .84rem;
	font-weight: 600;
	color: var(--mgx-ink);
	text-align: left;
}

.mgx-dash-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mgx-dash-orders li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	background: var(--mgx-surface);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: .8rem;
}

.mgx-dash-orders__id {
	font-weight: 700;
	color: var(--mgx-ink);
}

.mgx-dash-orders__date,
.mgx-dash-orders__total {
	color: var(--mgx-muted);
	font-variant-numeric: tabular-nums;
}

.mgx-dash-orders__total {
	margin-inline-start: auto;
}

.mgx-dash-orders a {
	color: var(--mgx-teal);
	text-decoration: none;
	font-weight: 600;
}

.mgx-dash-empty {
	color: var(--mgx-muted);
	font-size: .85rem;
}

.mgx-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	background: var(--mgx-line);
	color: var(--mgx-muted);
}

.mgx-badge--completed,
.mgx-badge--processing {
	background: rgba(13,148,136,.12);
	color: var(--mgx-teal-dark);
}

.mgx-badge--on-hold,
.mgx-badge--pending {
	background: rgba(245,179,1,.15);
	color: #8a6100;
}

.mgx-badge--cancelled,
.mgx-badge--failed,
.mgx-badge--refunded {
	background: rgba(178,45,46,.12);
	color: #b32d2e;
}

/* orders table */
table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.woocommerce-orders-table__header {
	text-align: right;
	font-size: .78rem;
	color: var(--mgx-muted);
	font-weight: 700;
	padding: 10px 10px;
	border-bottom: 2px solid var(--mgx-line);
}

.woocommerce-orders-table__cell {
	padding: 14px 10px;
	font-size: .87rem;
	border-bottom: 1px solid var(--mgx-line);
	font-variant-numeric: tabular-nums;
}

.woocommerce-orders-table__cell-order-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	background: var(--mgx-line);
	color: var(--mgx-muted);
}

tr[class*="woocommerce-orders-table__row--status-completed"] .woocommerce-orders-table__cell-order-status,
tr[class*="woocommerce-orders-table__row--status-processing"] .woocommerce-orders-table__cell-order-status {
	background: rgba(13,148,136,.12);
	color: var(--mgx-teal-dark);
}
tr[class*="woocommerce-orders-table__row--status-on-hold"] .woocommerce-orders-table__cell-order-status,
tr[class*="woocommerce-orders-table__row--status-pending"] .woocommerce-orders-table__cell-order-status {
	background: rgba(245,179,1,.15);
	color: #8a6100;
}
tr[class*="woocommerce-orders-table__row--status-cancelled"] .woocommerce-orders-table__cell-order-status,
tr[class*="woocommerce-orders-table__row--status-failed"] .woocommerce-orders-table__cell-order-status,
tr[class*="woocommerce-orders-table__row--status-refunded"] .woocommerce-orders-table__cell-order-status {
	background: rgba(178,45,46,.12);
	color: #b32d2e;
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
	display: inline-block;
	margin: 2px;
	padding: 6px 14px !important;
	font-size: .78rem !important;
	border-radius: 8px !important;
}

/* login / register forms */
.woocommerce-form-login,
.woocommerce-form-register {
	background: var(--mgx-surface);
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(20,25,30,.06);
	padding: 28px;
	max-width: 420px;
	margin: 0 auto;
}

.woocommerce-form-row input.input-text {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--mgx-line);
	border-radius: 8px;
	font-family: var(--mgx-font);
}

.woocommerce-form-row input.input-text:focus {
	outline: none;
	border-color: var(--mgx-teal);
}

.woocommerce ul.woocommerce-error,
.woocommerce ul.woocommerce-message,
.woocommerce ul.woocommerce-info {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--mgx-bg);
	border-inline-start: 4px solid var(--mgx-teal);
	font-size: .87rem;
}

.woocommerce ul.woocommerce-error {
	border-inline-start-color: #b32d2e;
}

/* responsive: sidebar becomes a horizontal scroll strip above content */
@media (max-width: 860px) {
	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr !important;
		padding: 0 14px !important;
	}
	.woocommerce-MyAccount-navigation {
		position: static;
		padding: 8px;
	}
	.woocommerce-MyAccount-navigation > ul {
		flex-direction: row;
		overflow-x: auto;
	}
	.woocommerce-MyAccount-navigation-link a {
		flex-direction: column;
		gap: 6px;
		font-size: .74rem;
		padding: 10px 12px;
		white-space: nowrap;
	}
	table.woocommerce-orders-table,
	table.woocommerce-orders-table thead,
	table.woocommerce-orders-table tbody,
	table.woocommerce-orders-table tr {
		display: block;
		width: 100%;
	}
	table.woocommerce-orders-table thead {
		display: none;
	}
	table.woocommerce-orders-table tr {
		border: 1px solid var(--mgx-line);
		border-radius: 12px;
		padding: 10px 14px;
		margin-bottom: 12px;
	}
	.woocommerce-orders-table__cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px dashed var(--mgx-line);
	}
	.woocommerce-orders-table__cell::before {
		content: attr(data-title);
		font-size: .74rem;
		color: var(--mgx-muted);
		font-weight: 600;
	}
	.woocommerce-orders-table__cell:last-child {
		border-bottom: 0;
	}

	.mgx-acc-navhead {
		padding: 8px 6px 14px;
	}

	.mgx-acc-quicklinks {
		flex-wrap: wrap;
	}

	.mgx-dash-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.mgx-dash-grid {
		grid-template-columns: 1fr;
	}

	.mgx-dash-orders li {
		font-size: .78rem;
	}

	.mgx-dash-orders__total {
		margin-inline-start: 0;
	}
}

/* -----------------------------------------------------------------
   Homepage sections (Elementor "خانه" page) -- consolidated here
   instead of duplicated inline <style> blocks per-widget, so every
   section heading shares one size/weight/color no matter which
   section it's in.
   ----------------------------------------------------------------- */

/* hero image slider -- coverflow effect: the active slide sits front
   and center, the two neighbours are pushed back in Z, rotated toward
   the viewer and scaled down (own implementation, real product photos,
   not a copy of any reference site's slider code). */
.mgx-hero {
	position: relative;
	width: 100%;
	height: clamp(240px, 34vw, 480px);
	overflow: hidden;
}
.mgx-hero__track {
	position: relative; width: 100%; height: 100%;
	perspective: 1400px;
}
.mgx-hero__slide {
	position: absolute; top: 0; bottom: 0; left: 50%; width: 66%; margin-left: -33%;
	/* image comes from the slide's inline --mgx-bg / --mgx-bg-sm (a 960px
	   wide copy for phones, where the slide is ~350 CSS px wide) */
	background-image: var(--mgx-bg);
	background-size: cover; background-position: center;
	border-radius: 20px; overflow: hidden; display: block;
	transform: translateZ(-320px) scale(.55);
	opacity: 0;
	filter: brightness(.55);
	box-shadow: none;
	z-index: 1;
	pointer-events: none;
}
/* transitions only once the slider is initialised (.is-ready is added by
   its script after the first frame) -- otherwise the side slides animate
   in from the parked state on page load, which delayed the LCP paint */
.mgx-hero.is-ready .mgx-hero__slide {
	transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease, filter .5s ease, box-shadow .5s ease;
}
.mgx-hero__slide.is-active {
	transform: translateZ(0) scale(1);
	opacity: 1;
	filter: brightness(1);
	box-shadow: 0 30px 60px rgba(0,0,0,.35);
	z-index: 3;
	pointer-events: auto;
}
.mgx-hero__slide.is-prev {
	transform: translateX(-46%) translateZ(-180px) rotateY(38deg) scale(.8);
	opacity: .8;
	filter: brightness(.65);
	box-shadow: 0 20px 40px rgba(0,0,0,.25);
	z-index: 2;
	pointer-events: auto;
}
.mgx-hero__slide.is-next {
	transform: translateX(46%) translateZ(-180px) rotateY(-38deg) scale(.8);
	opacity: .8;
	filter: brightness(.65);
	box-shadow: 0 20px 40px rgba(0,0,0,.25);
	z-index: 2;
	pointer-events: auto;
}
/* prev/next slides show only their own CTA on hover, not the parked
   (invisible) ones behind them -- avoids a dead click target. */
.mgx-hero__slide:not(.is-active) .mgx-hero__cta { display: none; }
.mgx-hero__scrim {
	position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 45%;
	background: linear-gradient(to top, rgba(14,18,22,.55), transparent);
}
.mgx-hero__cta {
	position: absolute; bottom: 22px; inset-inline-end: 28px;
	background: var(--mgx-teal); color: #fff; font-size: .88rem; font-weight: 700;
	padding: 10px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
	box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: background .15s ease, transform .15s ease;
}
.mgx-hero__slide:hover .mgx-hero__cta { background: #08665d; transform: translateY(-2px); }
.mgx-hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); cursor: pointer;
	background: rgba(255,255,255,.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff; font-size: 1.1rem;
	display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.mgx-hero__arrow:hover { background: rgba(255,255,255,.6); }
.mgx-hero__arrow--prev { inset-inline-start: 16px; }
.mgx-hero__arrow--next { inset-inline-end: 16px; }
.mgx-hero__dots {
	position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 3;
	display: flex; gap: 2px;
}
/* 24x24 tap target (WCAG 2.5.8) with the visible dot drawn by ::before,
   so the dots look exactly as before but are easy to hit on a phone */
.mgx-hero__dot {
	position: relative; width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; padding: 0;
}
.mgx-hero__dot::before {
	content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%;
	background: rgba(255,255,255,.5); transform: translate(-50%, -50%); transition: background .15s ease, width .15s ease;
}
.mgx-hero__dot.is-active { width: 30px; }
.mgx-hero__dot.is-active::before { background: var(--mgx-amber); width: 22px; border-radius: 5px; }
@media (max-width: 640px) {
	.mgx-hero__cta { font-size: .76rem; padding: 8px 14px; bottom: 14px; inset-inline-end: 14px; }
	.mgx-hero__arrow { width: 32px; height: 32px; font-size: .95rem; }
	/* narrow screens: the full coverflow needs width the viewport
	   doesn't have, so the active slide takes almost the whole strip
	   and the neighbours become thin, barely-rotated edges instead of
	   competing for the same space. */
	.mgx-hero__slide { width: 84%; margin-left: -42%; background-image: var(--mgx-bg-sm, var(--mgx-bg)); }
	/* phones: the CTA pill spans almost the whole slide, so the dots move
	   into their own strip under the slides instead of sitting on it */
	.mgx-hero__slide { bottom: 28px; }
	.mgx-hero__dots { bottom: 0; }
	.mgx-hero__dot::before { background: rgba(30,37,43,.25); }
	.mgx-hero__slide.is-prev { transform: translateX(-52%) translateZ(-160px) rotateY(30deg) scale(.72); }
	.mgx-hero__slide.is-next { transform: translateX(52%) translateZ(-160px) rotateY(-30deg) scale(.72); }
}

/* "درباره‌ی برند" box -- its own layout (not the reference's plain
   text block): a card with the logo's amber/gold as its accent border,
   two feature columns with check-badges instead of a wall of text. */
.mgx-about {
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	border-inline-start: 5px solid var(--mgx-amber);
	border-radius: 20px;
	padding: 32px 30px;
	box-shadow: 0 10px 34px rgba(20,25,30,.08);
}
.mgx-about__title {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--mgx-ink);
	margin: 0 0 12px;
}
.mgx-about__lead {
	color: var(--mgx-muted);
	font-size: .92rem;
	line-height: 2;
	margin: 0 0 24px;
	max-width: 760px;
}
.mgx-about__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.mgx-about__col h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mgx-ink);
	margin: 0 0 12px;
}
.mgx-about__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mgx-about__col li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .86rem;
	color: var(--mgx-muted);
	line-height: 1.7;
}
.mgx-about__check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(245,179,1,.15);
	color: var(--mgx-amber);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .68rem;
	margin-top: 2px;
}
@media (max-width: 780px) {
	.mgx-about__cols { grid-template-columns: 1fr; }
}

/* 5-icon trust strip -- light amber/orange background (per the logo's
   own color), sits right above the site footer. */
.elementor-element-trust5strip1 {
	margin: 0 !important;
	padding: 0 !important;
}
.mgx-trust5 {
	background: #FFF6E0;
	border-radius: 0;
	padding: 28px 20px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	width: 100%;
}
.mgx-trust5__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
.mgx-trust5__item span.mgx-trust5__icon {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(20,25,30,.08);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mgx-trust5__item img { width: 40px; height: 40px; object-fit: contain; }
.mgx-trust5__item span.mgx-trust5__label { font-size: .82rem; font-weight: 600; color: var(--mgx-ink); }
@media (max-width: 780px) {
	.mgx-trust5 { grid-template-columns: repeat(2, 1fr); }
}

/* every real heading tag site-wide gets the site's own font, no matter
   which plugin/widget rendered it (Elementor's own headings otherwise
   fall back to its global "Roboto" kit font) */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mgx-font) !important;
}

/* every Elementor heading widget used as a plain section title
   (اهرو خودش جدا استایل داره چون typography صریح ست شده و این قانون
   رو override می‌کنه) */
.elementor-widget-heading .elementor-heading-title {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: var(--mgx-ink) !important;
	text-align: right !important;
}

/* Elementor's icon-box widget falls back to its own placeholder lorem
   ipsum text whenever "description" is empty (setting it to an actual
   empty string in the saved data didn't stop it -- Elementor still
   substitutes its control default), so it's hidden outright here
   instead. Scoped to the front page since that's the only place these
   icon-box widgets are used without a real description. */
body.home .elementor-icon-box-description {
	display: none;
}

/* shared header-bar: title (right) + optional prev/next arrows (left) --
   used by "قطعات پیشنهادی" / "ابزار پیشنهادی" / "جدیدترین محصولات" /
   "پیشنهاد شگفت‌انگیز" so they all read as the same family of section. */
.mgx-sec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.mgx-sec__head h2 {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--mgx-ink);
	margin: 0;
}

.mgx-sec__nav {
	display: flex;
	gap: 8px;
}

.mgx-sec__nav button {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--mgx-line);
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mgx-ink);
	font-size: 1rem;
	transition: background .15s ease, color .15s ease;
}

.mgx-sec__nav button:hover {
	background: var(--mgx-teal);
	color: #fff;
	border-color: var(--mgx-teal);
}

/* shared frosted-glass container for rows that don't have their own
   per-item card (icon-circle rows, etc.) -- gives them the same glass
   "box" language as the product/brand cards. */
.mgx-glassbox {
	background: rgba(255,255,255,.5);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 20px;
	padding: 24px 26px;
	box-shadow: 0 10px 34px rgba(20,25,30,.07);
}

/* "قطعات پیشنهادی" / "ابزار پیشنهادی" icon-circle rows */
.mgx-sp__row {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 14px;
}

.mgx-sp__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	padding: 6px;
	border-radius: 12px;
	transition: transform .2s ease;
}

.mgx-sp__card:hover {
	transform: translateY(-4px);
}

.mgx-sp__circle {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: rgba(13, 148, 136, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}

.mgx-sp__card:hover .mgx-sp__circle {
	background: rgba(13, 148, 136, .16);
}

.mgx-sp__circle img {
	max-width: 62%;
	max-height: 62%;
	object-fit: contain;
}

.mgx-sp__label {
	font-size: .8rem;
	color: var(--mgx-ink);
	text-align: center;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.mgx-sp__row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
	.mgx-sp__row { grid-template-columns: repeat(2, 1fr); }
}

/* brand logo marquee */
.mgx-bm { overflow: hidden; position: relative; padding: 8px 0; }
.mgx-bm::before, .mgx-bm::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.mgx-bm::before { inset-inline-start: 0; background: linear-gradient(to left, transparent, var(--mgx-bg)); }
.mgx-bm::after { inset-inline-end: 0; background: linear-gradient(to right, transparent, var(--mgx-bg)); }
.mgx-bm__track {
	display: flex; align-items: stretch; gap: 18px; width: max-content;
	animation: mgx-bm-scroll 32s linear infinite;
}
.mgx-bm:hover .mgx-bm__track { animation-play-state: paused; }
@keyframes mgx-bm-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}
.mgx-bm__card {
	flex: 0 0 auto; width: 190px; height: 150px; border-radius: 16px;
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: 0 8px 24px rgba(20,25,30,.07);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mgx-bm__card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(20,25,30,.12); background: rgba(255,255,255,.75); }
.mgx-bm__imgwrap { height: 64px; display: flex; align-items: center; justify-content: center; }
.mgx-bm__imgwrap img { max-height: 64px; max-width: 130px; object-fit: contain; }
.mgx-bm__label { font-size: .78rem; color: var(--mgx-muted); text-align: center; padding: 0 10px; }
@media (prefers-reduced-motion: reduce) { .mgx-bm__track { animation: none; } }

/* product card rows ("پیشنهاد شگفت‌انگیز" / "جدیدترین محصولات") --
   fancier than a plain WooCommerce loop card: image, badge, clamped
   title, price block, hover lift. */
.mgx-pc__track {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
	padding-bottom: 6px; -ms-overflow-style: none; scrollbar-width: none;
}
.mgx-pc__track::-webkit-scrollbar { display: none; }
.mgx-pc__card {
	flex: 0 0 auto; width: 200px; scroll-snap-align: start; border-radius: 16px;
	padding: 16px; text-decoration: none; position: relative;
	display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: 0 8px 28px rgba(20,25,30,.08);
}
.mgx-pc__card:hover { box-shadow: 0 14px 32px rgba(20,25,30,.14); transform: translateY(-4px); background: rgba(255,255,255,.72); }
.mgx-pc__badge {
	position: absolute; top: 12px; inset-inline-start: 12px; font-size: .72rem; font-weight: 700;
	padding: 3px 9px; border-radius: 999px; color: var(--mgx-ink);
}
.mgx-pc__badge--sale { background: var(--mgx-amber); }
.mgx-pc__badge--new { background: var(--mgx-teal); color: #fff; }
.mgx-pc__imgwrap { height: 130px; display: flex; align-items: center; justify-content: center; }
.mgx-pc__imgwrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mgx-pc__name {
	font-size: .82rem; color: var(--mgx-ink); line-height: 1.5; height: 2.4em; overflow: hidden;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mgx-pc__prices { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mgx-pc__sale { font-weight: 700; color: var(--mgx-teal-dark); font-size: .9rem; }
.mgx-pc__regular { font-size: .76rem; color: var(--mgx-muted); text-decoration: line-through; }
.mgx-pc__more {
	flex: 0 0 auto; width: 200px; scroll-snap-align: start; border-radius: 16px;
	background: rgba(30,37,43,.72);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,.12);
	color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	text-decoration: none; font-weight: 700; font-size: .9rem; text-align: center; padding: 16px;
	transition: background .2s ease, transform .2s ease;
}
.mgx-pc__more:hover { background: rgba(13,148,136,.85); transform: translateY(-4px); }
.mgx-pc__more span:first-child { font-size: 1.8rem; }

/* header variant used when a section needs a "مشاهده همه" link
   alongside the prev/next arrows (blog section) */
.mgx-sec__head-right {
	display: flex;
	align-items: center;
	gap: 14px;
}
.mgx-sec__viewall {
	font-size: .82rem;
	font-weight: 600;
	color: var(--mgx-teal-dark);
	text-decoration: none;
}
.mgx-sec__viewall:hover { text-decoration: underline; }

/* blog cards reuse .mgx-pc__card's glass shell, wider + taller for a
   real image + excerpt + date */
.mgx-blog__card { width: 240px; }
.mgx-blog__card .mgx-pc__imgwrap { height: 130px; border-radius: 10px; overflow: hidden; }
.mgx-blog__card .mgx-pc__imgwrap img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }
.mgx-blog__excerpt {
	/* height was 2.4em -- too short for its own 2 clamped lines at
	   line-height 1.6 (needs 3.2em), so the second line was clipped
	   and visually collided with the date row right below it */
	font-size: .76rem; color: var(--mgx-muted); line-height: 1.6; height: 3.2em; overflow: hidden;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	margin-bottom: 4px;
}
.mgx-blog__date {
	font-size: .72rem; color: var(--mgx-muted); font-variant-numeric: tabular-nums;
	margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--mgx-line);
}

/* -----------------------------------------------------------------
   WooCommerce's own admin-only "your store is in Coming Soon mode"
   reminder banner (fixed to the bottom of every page, visible only to
   logged-in admins/store managers -- customers never see it). Its
   default white background/border look out of place against this
   theme, and it's purely an internal reminder, so it's hidden.
   ----------------------------------------------------------------- */

#coming-soon-footer-banner {
	display: none !important;
}

/* -----------------------------------------------------------------
   CTA / buy-button color (used site-wide by WooCommerce buttons)
   ----------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
	background: var(--mgx-teal) !important;
	color: #fff !important;
	border-radius: 6px !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--mgx-teal-dark) !important;
}

/* -----------------------------------------------------------------
   Blog listing (home.php): 3-column card grid + sidebar + pagination.
   ----------------------------------------------------------------- */

.mgx-blog-layout {
	max-width: 1200px;
	margin: 0 auto;
	padding: 36px 20px 70px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 30px;
	align-items: start;
}
@media (max-width: 900px) {
	.mgx-blog-layout { grid-template-columns: 1fr; }
}

.mgx-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 900px) {
	.mgx-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.mgx-blog-grid { grid-template-columns: 1fr; }
}

.mgx-blogcard {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: 0 8px 28px rgba(20,25,30,.08);
	transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.mgx-blogcard:hover {
	box-shadow: 0 14px 32px rgba(20,25,30,.14);
	transform: translateY(-4px);
	background: rgba(255,255,255,.72);
}
.mgx-blogcard__badge {
	position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2;
	background: var(--mgx-teal); color: #fff; font-size: .74rem; font-weight: 700;
	padding: 4px 12px; border-radius: 999px;
}
.mgx-blogcard__imgwrap {
	display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mgx-line);
}
.mgx-blogcard__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgx-blogcard__body { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.mgx-blogcard__title {
	font-size: .98rem; font-weight: 700; color: var(--mgx-ink); line-height: 1.6;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mgx-blogcard__excerpt {
	font-size: .82rem; color: var(--mgx-muted); line-height: 1.7;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mgx-blogcard__date {
	font-size: .74rem; color: var(--mgx-muted); font-variant-numeric: tabular-nums;
	margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--mgx-line);
}

.mgx-blog-empty { color: var(--mgx-muted); padding: 40px 0; text-align: center; }

/* pagination (WordPress's own the_posts_pagination() markup) */
.mgx-blog-pagination { margin-top: 34px; display: flex; justify-content: center; }
.mgx-blog-pagination .page-numbers {
	display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 0;
}
.mgx-blog-pagination .page-numbers li { display: inline-flex; }
.mgx-blog-pagination a.page-numbers,
.mgx-blog-pagination span.page-numbers {
	min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.7);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	color: var(--mgx-ink); font-size: .84rem; text-decoration: none; font-variant-numeric: tabular-nums;
	transition: background .15s ease, color .15s ease;
}
.mgx-blog-pagination a.page-numbers:hover { background: var(--mgx-teal); color: #fff; }
.mgx-blog-pagination span.page-numbers.current { background: var(--mgx-ink); color: #fff; border-color: var(--mgx-ink); }

/* sidebar */
.mgx-blog-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.mgx-blog-sidebar__widget {
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 8px 24px rgba(20,25,30,.06);
}
.mgx-blog-sidebar__title { font-size: 1rem; font-weight: 800; color: var(--mgx-ink); margin: 0 0 14px; }
.mgx-blog-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mgx-blog-sidebar__list a {
	color: var(--mgx-muted); text-decoration: none; font-size: .86rem; line-height: 1.6;
	display: flex; justify-content: space-between; gap: 8px;
}
.mgx-blog-sidebar__list a:hover { color: var(--mgx-teal-dark); }
.mgx-blog-sidebar .search-form { display: flex; gap: 8px; }
.mgx-blog-sidebar .search-form .search-field {
	flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mgx-line);
	font-family: var(--mgx-font); font-size: .85rem;
}
.mgx-blog-sidebar .search-form .search-submit {
	padding: 0 16px; border: none; border-radius: 10px; background: var(--mgx-teal); color: #fff;
	font-family: var(--mgx-font); font-weight: 700; cursor: pointer;
}
.mgx-blog-sidebar .search-form .search-submit:hover { background: var(--mgx-teal-dark); }

/* -----------------------------------------------------------------
   Shop archive + single product page.
   ----------------------------------------------------------------- */

/* breadcrumb was sitting flush against the header with zero spacing */
.woocommerce-breadcrumb {
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 18px 20px 4px !important;
	font-size: .84rem;
	color: var(--mgx-muted);
}
.woocommerce-breadcrumb a { color: var(--mgx-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--mgx-teal-dark); }

/* shop-loop product cards */
/* WooCommerce's own core CSS puts a clearfix (content:" "; display:table;)
   on ul.products::before/::after for its default float-based layout.
   Under display:grid that clearfix stops being invisible -- it becomes
   a real, empty grid item sitting in the very first cell, pushing every
   actual product over by one and leaving column 1 looking blank. */
ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}
ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px !important; margin: 0 !important; padding: 0 20px; max-width: 1200px; margin-inline: auto !important; }
@media (max-width: 992px) { ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { ul.products { grid-template-columns: repeat(2, 1fr) !important; } }

/* Archive header (category title) and the result-count/sorting row --
   WooCommerce's own core CSS gives these zero horizontal padding
   (only ul.products got that above), so on this theme's full-bleed
   .site-main (see the max-width:none rule further down) they were
   sitting flush against the browser edges instead of lining up with
   the product grid beneath them. */
.woocommerce-products-header,
.woocommerce-result-count,
.woocommerce-ordering {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}
.woocommerce-products-header { padding-top: 20px; }

/* Same gap on the "Additional information" attributes table: core CSS
   zeroes out <td> padding and only restores it vertically on the
   inner <p> (padding: 8px 0), leaving every value flush against the
   cell's left/right edge. */
.woocommerce table.shop_attributes td {
	padding-inline: 12px;
}
.woocommerce table.shop_attributes td p {
	padding-inline: 0;
}

/* related products / upsells default to exactly 4 items, so the 992px
   3-column breakpoint above left the 4th one stranded alone on its own
   near-empty row -- these two skip straight from 4 columns to 2. */
.related.products ul.products,
.up-sells.products ul.products,
.woocommerce-upsells.products ul.products {
	grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 640px) {
	.related.products ul.products,
	.up-sells.products ul.products,
	.woocommerce-upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

ul.products li.product {
	position: relative;
	background: rgba(255,255,255,.6);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 16px;
	padding: 14px 14px 60px !important;
	box-shadow: 0 8px 24px rgba(20,25,30,.06);
	transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
ul.products li.product:hover {
	box-shadow: 0 14px 30px rgba(20,25,30,.12);
	transform: translateY(-4px);
	background: rgba(255,255,255,.78);
}
ul.products li.product img { border-radius: 10px; }
ul.products li.product .woocommerce-loop-product__title {
	font-size: .88rem; font-weight: 700; color: var(--mgx-ink); margin: 10px 0 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
ul.products li.product .price { margin: 0; font-size: .9rem; color: var(--mgx-teal-dark); font-weight: 700; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .price del { color: var(--mgx-muted); font-size: .78rem; opacity: .8; }

/* price bottom-right, add-to-cart bottom-left, same row -- positioned
   absolutely so it works regardless of WooCommerce's own DOM nesting
   (the price lives inside the thumbnail/title link, the button is a
   separate sibling after it; both anchor to the card corners instead
   of needing to be reordered in the markup). */
ul.products li.product .price {
	position: absolute; bottom: 16px; inset-inline-end: 16px;
}
ul.products li.product a.add_to_cart_button,
ul.products li.product a.button.product_type_variable,
ul.products li.product a.button.product_type_grouped {
	position: absolute; bottom: 12px; inset-inline-start: 14px;
	width: 40px; height: 40px; padding: 0 !important; margin: 0 !important;
	border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--mgx-bg) !important; border: 1px solid var(--mgx-line);
	font-size: 0 !important; line-height: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E252B' stroke-width='1.8'%3E%3Cpath d='M3 4h2l2.4 12.4a2 2 0 002 1.6h8.2a2 2 0 002-1.6L21 8H6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: center !important; background-size: 18px !important;
	transition: background-color .15s ease, transform .15s ease;
}
ul.products li.product a.add_to_cart_button:hover {
	background-color: var(--mgx-teal) !important;
	transform: scale(1.08);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Cpath d='M3 4h2l2.4 12.4a2 2 0 002 1.6h8.2a2 2 0 002-1.6L21 8H6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3C/svg%3E") !important;
}
/* products with no price yet fall back to a plain "بیشتر بخوانید" link
   (not a real add-to-cart button) -- leave that one exactly as-is */
ul.products li.product a.button.product_type_simple:not(.add_to_cart_button) {
	position: absolute; bottom: 14px; inset-inline-start: 14px; inset-inline-end: 14px;
	font-size: .76rem !important; text-align: center; padding: 8px !important;
	background: var(--mgx-ink) !important; color: #fff !important; border-radius: 8px !important;
}

/* Single product page (gallery/summary/tabs/attributes/reviews) was
   styled here and reverted at the site owner's request -- it's back to
   the theme/WooCommerce default and is being redesigned by them
   directly instead. Everything above (breadcrumb spacing, the shop-loop
   product grid + cart-icon buttons, Persian digit prices) is unrelated
   and stays. */

/* -----------------------------------------------------------------
   Side Cart Woocommerce plugin (xoo-wsc): its own CSS ships a hardcoded
   font-family that never reached our font -- forced back to the site
   font here. The plugin's button/label text itself is set from its own
   settings (wp-admin > Side Cart Settings > Texts), not translatable
   strings, so it was changed there directly rather than in CSS.
   ----------------------------------------------------------------- */
.xoo-wsc-container,
.xoo-wsc-container * {
	font-family: var(--mgx-font) !important;
}
/* ...except the plugin's own icon font (basket/close/trash icons are
   glyphs in this font, not real text) -- the blanket rule above was
   overriding it since both rules use !important at the same
   specificity and this stylesheet loads after the plugin's, so ours
   was winning the tie and turning every icon glyph blank. Matching the
   plugin's own selector exactly (adding the .xoo-wsc-container prefix)
   makes this more specific, so it wins regardless of load order. */
.xoo-wsc-container [class^="xoo-wsc-icon-"],
.xoo-wsc-container [class*=" xoo-wsc-icon-"] {
	font-family: 'Woo-Side-Cart' !important;
}

/* Hidden until functions.php's mgx-has-items class says the cart
   actually has something in it (see the wp_footer script). */
.xoo-wsc-basket {
	display: none !important;
}
.xoo-wsc-basket.mgx-has-items {
	display: flex !important;
}

/* On mobile the floating basket button was sitting at the same height
   as the glass bottom-nav bar, overlapping it -- pushed up above it. */
@media (max-width: 640px) {
	.xoo-wsc-basket {
		bottom: 92px !important;
	}
}

/* -----------------------------------------------------------------
   Single product page -- inspired by the reference site's layout
   (prominent buy box, bullet-point feature list, trust badges) but
   deliberately not a copy of it: our own card language, colors, and a
   2-column layout (gallery + content) instead of its 3-column one.

   IMPORTANT if this is ever touched again: WooCommerce nests the tabs,
   upsells and related-products sections as siblings of .images/.summary
   inside this same div.product -- turning div.product itself into a
   grid previously dragged those into the 2-column row too. The
   grid-column:1/-1 rule below is what keeps them full-width; don't
   remove it without keeping something equivalent.

   Also: Hello Elementor's own theme.css caps .site-main at 500/600/
   800/1140px depending on viewport width, on any page not built in
   Elementor (a rule meant for narrow, readable blog-post text) --
   product/shop pages aren't Elementor-built, so that rule was
   silently squeezing this whole 2-column layout into a strip as
   narrow as 800px on common laptop widths, well before any of the
   CSS below even got a chance to size anything. Overridden here. */
body.woocommerce-page .site-main,
body.single-product .site-main {
	max-width: none !important;
}

.woocommerce div.product {
	max-width: 1200px; margin: 0 auto !important; padding: 10px 20px 50px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
}
@media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr; } }

.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .woocommerce-upsells.products,
.woocommerce div.product > .related.products,
.woocommerce div.product > .up-sells.products {
	grid-column: 1 / -1;
}
.woocommerce div.product > .related.products,
.woocommerce div.product > .up-sells.products,
.woocommerce div.product > .woocommerce-upsells.products {
	margin-top: 44px;
}
.woocommerce div.product > .related.products h2,
.woocommerce div.product > .up-sells.products h2,
.woocommerce div.product > .woocommerce-upsells.products h2 {
	font-size: 1.3rem; font-weight: 800; color: var(--mgx-ink); margin: 0 0 20px;
}

/* gallery: sticky so it never leaves a blank gap under a short image
   next to much longer buy-box/content on the other side. */
.woocommerce div.product div.images {
	/* WooCommerce's own core CSS (woocommerce.css) sets float:left and,
	   critically, width:48% on this exact selector at the exact same
	   specificity as this rule. Turning the parent into a grid neutralizes
	   the float automatically, but width:48% is still a valid, respected
	   value on a grid item -- it was never overridden here before, so the
	   box was shrinking to 48% of its own (already half-width) grid
	   column instead of filling it, which is what left that huge gap.
	   Forced to 100% + !important so it can't be silently reintroduced
	   by core WooCommerce CSS loading in a different order again. */
	width: 100% !important; float: none !important;
	display: flex; align-items: center; justify-content: center;
	position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px);
}
.woocommerce div.product div.images img {
	width: auto; max-width: 100%; max-height: 520px; height: auto;
	object-fit: contain; margin: 0 auto; border-radius: 14px;
}

.woocommerce div.product div.summary {
	/* same root cause as div.images above: WooCommerce's core CSS sets
	   float:right; width:48% on this exact selector too. */
	width: 100% !important; float: none !important;
	display: flex; flex-direction: column;
}
.woocommerce div.product .product_title {
	font-size: 1.3rem; font-weight: 800; color: var(--mgx-ink); margin: 0 0 6px; order: 1;
}

/* "سایر محصولات این دسته" -- links to the product's own real category
   archive, printed via functions.php right after the title. */
.mgx-cat-link { order: 2; margin-bottom: 18px; }
.mgx-cat-link a {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--mgx-bg); border: 1px solid var(--mgx-line); color: var(--mgx-ink);
	font-size: .82rem; font-weight: 600; padding: 8px 14px; border-radius: 10px; text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.mgx-cat-link a:hover { background: #fff; border-color: var(--mgx-teal); color: var(--mgx-teal-dark); }

/* buy box: price + quantity + add-to-cart, pulled up right under the
   title/category link (moved there via functions.php hook priorities)
   and wrapped in its own card so it reads as the primary action. */
.mgx-buybox {
	order: 3;
	background: #fff; border: 1px solid var(--mgx-line); border-radius: 16px;
	padding: 20px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(20,25,30,.06);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.35rem; font-weight: 800; color: var(--mgx-teal-dark); display: block; margin: 0 0 14px;
}
.woocommerce div.product p.price del { font-size: 1rem; color: var(--mgx-muted); font-weight: 400; margin-inline-end: 8px; }
.woocommerce div.product form.cart {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 !important;
}
.woocommerce div.product form.cart .quantity input {
	width: 64px; height: 46px; text-align: center; border: 1px solid var(--mgx-line); border-radius: 10px;
	font-family: var(--mgx-font);
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1; background: var(--mgx-teal) !important; color: #fff !important; border-radius: 10px !important;
	padding: 13px 20px !important; font-weight: 700 !important; font-size: .92rem !important; border: none !important;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--mgx-teal-dark) !important; }

/* trust badges under the buy box */
.mgx-trust-mini { order: 4; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.mgx-trust-mini span {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(13,148,136,.08); color: var(--mgx-teal-dark);
	font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
}

/* feature list -- the migration's <br>-separated short description
   turned into real bullets instead of one run-on paragraph. */
.woocommerce div.product .woocommerce-product-details__short-description { order: 5; }
.mgx-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mgx-feature-list li {
	position: relative; padding-inline-start: 22px; font-size: .9rem; color: var(--mgx-ink); line-height: 1.7;
}
.mgx-feature-list li::before {
	content: ''; position: absolute; inset-inline-start: 0; top: 7px; width: 8px; height: 8px;
	border-radius: 50%; background: var(--mgx-amber);
}

.mgx-specs { order: 6; }
.woocommerce div.product .product_meta { order: 7; margin-top: 20px; font-size: .82rem; color: var(--mgx-muted); }
.woocommerce div.product .product_meta a { color: var(--mgx-teal-dark); }

/* Product spec list -- printed by the woocommerce_single_product_summary
   hook in functions.php, reading each product's real pa_* attributes
   since WooCommerce's own "Additional information" tab was otherwise
   the only place they showed up. */
.mgx-specs {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--mgx-line);
}
.mgx-specs__title {
	font-size: .95rem;
	font-weight: 800;
	color: var(--mgx-ink);
	margin: 0 0 10px;
}
.mgx-specs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mgx-specs__list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: .86rem;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--mgx-line);
}
.mgx-specs__label { color: var(--mgx-muted); flex-shrink: 0; }
.mgx-specs__value { color: var(--mgx-ink); font-weight: 600; text-align: left; }

/* -----------------------------------------------------------------
   Contact page (/contact/) -- form (real submit via functions.php's
   admin-post handler, wp_mail()) + real contact info / map sidebar.
   ----------------------------------------------------------------- */
.mgx-contact {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 70px;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 30px;
	align-items: start;
}
@media (max-width: 860px) {
	.mgx-contact { grid-template-columns: 1fr; }
}

.mgx-contact__card {
	background: #fff;
	border: 1px solid var(--mgx-line);
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 8px 24px rgba(20,25,30,.05);
}

.mgx-contact__title {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--mgx-ink);
	margin: 0 0 22px;
}

.mgx-contact-form__row { margin-bottom: 18px; }
.mgx-contact-form__row label {
	display: block;
	font-size: .86rem;
	font-weight: 600;
	color: var(--mgx-ink);
	margin-bottom: 8px;
}
.mgx-contact-form__row input,
.mgx-contact-form__row textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mgx-line);
	border-radius: 10px;
	font-family: var(--mgx-font);
	font-size: .92rem;
	background: var(--mgx-bg);
}
.mgx-contact-form__row input:focus,
.mgx-contact-form__row textarea:focus {
	outline: none;
	border-color: var(--mgx-teal);
	background: #fff;
}
.mgx-contact-form__row textarea { resize: vertical; min-height: 150px; }

.mgx-contact-form__submit {
	background: var(--mgx-teal);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px 30px;
	font-weight: 700;
	font-size: .92rem;
	cursor: pointer;
	transition: background .15s ease;
}
.mgx-contact-form__submit:hover { background: var(--mgx-teal-dark); }

.mgx-contact__notice {
	border-radius: 10px;
	padding: 14px 16px;
	font-size: .88rem;
	margin-bottom: 20px;
}
.mgx-contact__notice--success { background: rgba(13,148,136,.1); color: var(--mgx-teal-dark); }
.mgx-contact__notice--error { background: rgba(178,45,46,.1); color: #b32d2e; }

.mgx-contact-info { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.mgx-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	background: var(--mgx-bg);
	border-radius: 14px;
}
.mgx-contact-info__icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(13,148,136,.1);
	color: var(--mgx-teal-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mgx-contact-info__icon svg { width: 20px; height: 20px; }
.mgx-contact-info__label { font-size: .78rem; color: var(--mgx-muted); margin: 0 0 4px; }
.mgx-contact-info__value { font-size: .9rem; font-weight: 700; color: var(--mgx-ink); line-height: 1.6; }
.mgx-contact-info__value a { color: inherit; text-decoration: none; }

.mgx-contact__map {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--mgx-line);
}
.mgx-contact__map iframe { width: 100%; height: 220px; display: block; border: 0; }

/* -----------------------------------------------------------------
   Category (product_cat) archive -- banner, filter dropdowns, model
   carousel and sort bar (markup: "MGX: category page layout" block in
   functions.php). Colours follow the owner's reference layout for this
   page specifically (blue banner/cards, red current-sort), not the
   site-wide teal accent.
   ----------------------------------------------------------------- */
.tax-product_cat {
	--mgx-cat-blue: #4579e2;
	--mgx-cat-blue-dark: #3461c1;
	--mgx-cat-amber: #ffbb00;
	--mgx-cat-red: #e53935;
}
.tax-product_cat .woocommerce-products-header { display: none; }
/* Hello Elementor gives .site-main 10px side padding on small screens;
   on category pages every section below carries its own gutter, and
   that padding kept the banner from running edge to edge on phones. */
.tax-product_cat .site-main { padding-inline: 0 !important; }

/* banner */
.mgx-catbanner {
	position: relative;
	/* soft orange drawn from the logo's amber; dark ink text on it (white
	   on a light orange doesn't hold enough contrast) */
	background: linear-gradient(135deg, #ffe2b3 0%, #ffc47a 45%, #ffa04d 100%);
	color: var(--mgx-ink);
	padding: 26px 0 0;
	margin: 0 0 34px;
	overflow: hidden;
}
.mgx-catbanner__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 78px;
	box-sizing: border-box;
}
.mgx-catbanner__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: .82rem;
	color: rgba(30,37,43,.62);
	margin-bottom: 26px;
}
.mgx-catbanner__crumbs a { color: rgba(30,37,43,.62); text-decoration: none; }
.mgx-catbanner__crumbs a:hover { color: var(--mgx-ink); }
.mgx-catbanner__crumbs [aria-current] { color: rgba(30,37,43,.85); }
.mgx-catbanner__title {
	margin: 0;
	min-width: 220px;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--mgx-ink);
}
.mgx-catbanner__waves {
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	width: 100%;
	height: 64px;
	display: block;
}
.mgx-catbanner__wave use { animation: mgx-wave 22s cubic-bezier(.55,.5,.45,.5) infinite; }
.mgx-catbanner__wave--1 use { fill: #f5b301; animation-delay: -2s; animation-duration: 9s; }
.mgx-catbanner__wave--2 use { fill: #ffb45e; animation-delay: -3s; animation-duration: 12s; }
.mgx-catbanner__wave--3 use { fill: #ff9444; animation-delay: -4s; animation-duration: 15s; }
.mgx-catbanner__wave--4 use { fill: var(--mgx-bg); animation-delay: -5s; animation-duration: 22s; }
@keyframes mgx-wave {
	from { transform: translate3d(-90px, 0, 0); }
	to   { transform: translate3d(85px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.mgx-catbanner__wave use { animation: none; }
}

/* filter dropdowns */
.mgx-catf {
	max-width: 1200px;
	margin: 0 auto 22px;
	padding: 0 20px 22px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--mgx-line);
}
.mgx-catf.is-loading { opacity: .6; pointer-events: none; }
.mgx-catf__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.mgx-catf__dd { position: relative; }
.mgx-catf__btn {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 18px;
	background: #fff;
	border: 2px solid #dfe3ea;
	border-radius: 3px;
	color: var(--mgx-ink);
	font-family: var(--mgx-font);
	font-size: .92rem;
	cursor: pointer;
	text-align: start;
	transition: border-color .15s ease;
}
.mgx-catf__btn:hover,
.mgx-catf__dd.is-open .mgx-catf__btn { border-color: #b9c3d3; }
.mgx-catf__btn:focus-visible { outline: 2px solid var(--mgx-cat-blue); outline-offset: 2px; }
.mgx-catf__btn svg { width: 18px; height: 18px; flex-shrink: 0; color: #8a93a3; transition: transform .15s ease; }
.mgx-catf__dd.is-open .mgx-catf__btn svg { transform: rotate(180deg); }
.mgx-catf__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-inline-start: 6px;
	border-radius: 999px;
	background: var(--mgx-cat-blue);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
}
.mgx-catf__panel {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline: 0;
	z-index: 60;
	background: #fff;
	border: 1px solid #dfe3ea;
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(20,30,60,.14);
	padding: 10px;
}
.mgx-catf__qs {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #dfe3ea;
	border-radius: 6px;
	padding: 9px 12px;
	margin-bottom: 8px;
	font-family: var(--mgx-font);
	font-size: .85rem;
	outline: none;
}
.mgx-catf__qs:focus { border-color: var(--mgx-cat-blue); }
.mgx-catf__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 290px;
	overflow-y: auto;
}
.mgx-catf__list label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 6px;
	cursor: pointer;
	font-size: .86rem;
	color: var(--mgx-ink);
}
.mgx-catf__list label:hover { background: #f3f6fb; }
.mgx-catf__list input { width: 16px; height: 16px; accent-color: var(--mgx-cat-blue); flex-shrink: 0; margin: 0; }
.mgx-catf__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mgx-catf__count {
	font-size: .72rem;
	color: var(--mgx-muted);
	background: #f1f3f6;
	border-radius: 999px;
	padding: 2px 8px;
	font-variant-numeric: tabular-nums;
}
.mgx-catf__clear {
	display: inline-block;
	margin-top: 12px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--mgx-cat-red);
	text-decoration: none;
}
.mgx-catf__clear:hover { text-decoration: underline; }

/* model search + carousel */
.mgx-subcats {
	max-width: 1200px;
	margin: 0 auto 26px;
	padding: 0 20px;
	box-sizing: border-box;
}
.mgx-subcats .mgx-subcats__search {
	width: 100%;
	box-sizing: border-box;
	height: 54px;
	padding: 0 18px;
	margin-bottom: 22px;
	/* !important: Hello Elementor's reset styles [type=search] with its own
	   border/background at equal specificity, which flattened this
	   gradient border into a plain dark one. */
	border: 2px solid transparent !important;
	border-radius: 3px !important;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(90deg, #7be38f, #2c9a78 55%, #7be38f) border-box !important;
	font-family: var(--mgx-font);
	font-size: .98rem;
	color: var(--mgx-ink);
	outline: none;
	box-shadow: 0 2px 8px rgba(20,30,60,.05);
}
.mgx-subcats .mgx-subcats__search::placeholder { color: var(--mgx-ink); font-weight: 800; opacity: 1; }
.mgx-subcats .mgx-subcats__search:focus::placeholder { color: #9aa3b2; font-weight: 400; }
.mgx-subcats__row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 4px 2px 14px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	/* Edge fades only on the side(s) where more cards are hidden -- JS in
	   mgx_subcat_cards() toggles .is-scrolled (right/start edge) and
	   .is-end (left/end edge) from the scroll position. "to left" means
	   the gradient starts at the right edge, i.e. the RTL start. */
	--mgx-fade-start: 0px;
	--mgx-fade-end: 90px;
	-webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--mgx-fade-start), #000 calc(100% - var(--mgx-fade-end)), transparent 100%);
	mask-image: linear-gradient(to left, transparent 0, #000 var(--mgx-fade-start), #000 calc(100% - var(--mgx-fade-end)), transparent 100%);
	transition: --mgx-fade-start .25s ease, --mgx-fade-end .25s ease;
}
.mgx-subcats__row.is-scrolled { --mgx-fade-start: 90px; }
.mgx-subcats__row.is-end { --mgx-fade-end: 0px; }
@property --mgx-fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mgx-fade-end { syntax: '<length>'; inherits: false; initial-value: 90px; }
.mgx-subcats__row::-webkit-scrollbar { display: none; }
.mgx-subcats__row.is-dragging { cursor: grabbing; }
.mgx-subcats__row.is-dragging .mgx-subcats__card { pointer-events: none; }
.mgx-subcats__card {
	flex: 0 0 182px;
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(40,70,140,.12);
	transition: transform .18s ease, box-shadow .18s ease;
	user-select: none;
}
.mgx-subcats__card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(40,70,140,.2); }
.mgx-subcats__img {
	height: 182px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e3e8f0;
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
}
.mgx-subcats__img img { max-height: 150px; max-width: 150px; width: auto; height: auto; object-fit: contain; pointer-events: none; }
.mgx-subcats__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 8px 10px;
	background: linear-gradient(180deg, #5b8ff2 0%, #3e70dd 100%);
	color: #fff;
	font-size: .88rem;
	text-align: center;
	direction: ltr;
	line-height: 1.35;
}
.mgx-subcats__none { color: var(--mgx-muted); font-size: .88rem; margin: 0 0 10px; }

/* sort bar */
.mgx-sortbar {
	max-width: 1160px;
	margin: 0 auto 22px;
	padding: 10px 14px 10px 18px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(20,30,60,.05);
}
.mgx-sortbar__sort,
.mgx-sortbar__pager { display: flex; align-items: center; }
.mgx-sortbar__sort {
	flex: 1;
	min-width: 0;
	gap: 40px;
	padding: 4px 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.mgx-sortbar__sort::-webkit-scrollbar { display: none; }
.mgx-sortbar__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	color: var(--mgx-ink);
	white-space: nowrap;
	margin-inline-end: -16px;
}
.mgx-sortbar__label svg { width: 22px; height: 22px; }
.mgx-sortbar__sort a {
	white-space: nowrap;
	font-size: .92rem;
	color: var(--mgx-ink);
	text-decoration: none;
}
.mgx-sortbar__sort a:hover { color: var(--mgx-cat-blue); }
.mgx-sortbar__sort a.is-current { color: var(--mgx-cat-red); }
.mgx-sortbar__pager {
	gap: 8px;
	flex-shrink: 0;
}
.mgx-sortbar__step {
	width: 50px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d6dbe4;
	border-radius: 6px;
	color: var(--mgx-ink);
	font-size: 1.3rem;
	text-decoration: none;
	background: #fff;
}
.mgx-sortbar__step:hover { border-color: var(--mgx-cat-blue); color: var(--mgx-cat-blue); }
.mgx-sortbar__count {
	min-width: 64px;
	height: 44px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: #2f6fe0;
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}

.mgx-cat-content {
	clear: both;
	max-width: 1200px;
	margin: 32px auto 0;
	box-sizing: border-box;
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	line-height: 2;
}

@media (max-width: 860px) {
	.mgx-catf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mgx-catf__btn { height: 46px; padding: 0 12px; font-size: .84rem; }
}
@media (max-width: 640px) {
	.mgx-catbanner { padding-top: 18px; margin-bottom: 24px; }
	.mgx-catbanner__inner { padding: 0 16px 60px; }
	.mgx-catbanner__crumbs { margin-bottom: 16px; }
	.mgx-catbanner__waves { height: 44px; }
	.mgx-catf, .mgx-subcats { padding-inline: 16px; }
	.mgx-subcats .mgx-subcats__search { height: 48px; font-size: .88rem; }
	.mgx-subcats__row { gap: 12px; --mgx-fade-end: 44px; }
	.mgx-subcats__row.is-scrolled { --mgx-fade-start: 44px; }
	.mgx-subcats__row.is-end { --mgx-fade-end: 0px; }
	.mgx-subcats__card { flex-basis: 138px; }
	.mgx-subcats__img { height: 138px; }
	.mgx-subcats__img img { max-height: 112px; max-width: 112px; }
	.mgx-subcats__label { min-height: 48px; font-size: .78rem; }
	.mgx-sortbar { flex-direction: column; align-items: stretch; gap: 10px; margin-inline: 16px; padding: 12px 14px; }
	.mgx-sortbar__sort { flex-wrap: wrap; gap: 10px 22px; overflow: visible; }
	.mgx-sortbar__label { margin-inline-end: -6px; }
	.mgx-sortbar__pager { justify-content: flex-end; }
	.mgx-cat-content { margin-inline: 16px; }
	.tax-product_cat ul.products { padding-inline: 16px; }
}

/* -----------------------------------------------------------------
   Shop / category bottom pagination -- separate rounded boxes to match
   the top sort bar's pager. !important: WooCommerce's own core CSS
   fuses these into one bordered strip (shared borders, float, a grey
   current state) at equal specificity and may load after this file.
   ----------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
	max-width: 1200px;
	margin: 38px auto 14px;
	padding: 0 20px;
	box-sizing: border-box;
	text-align: center;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	white-space: normal !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	float: none !important;
	border: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	display: block;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	box-sizing: border-box;
	min-width: 46px;
	height: 46px;
	padding: 0 12px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid #d6dbe4 !important;
	border-radius: 8px;
	background: #fff !important;
	color: var(--mgx-ink) !important;
	font-family: var(--mgx-font);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1 !important;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	border-color: #2f6fe0 !important;
	color: #2f6fe0 !important;
	box-shadow: 0 4px 12px rgba(47,111,224,.14);
	outline: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
	background: #2f6fe0 !important;
	border-color: #2f6fe0 !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(47,111,224,.28);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots {
	min-width: 0;
	padding: 0 2px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--mgx-muted) !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .prev,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .next {
	font-size: 1.35rem;
	font-weight: 400;
}
@media (max-width: 640px) {
	.woocommerce nav.woocommerce-pagination { padding: 0 16px; margin-top: 28px; }
	.woocommerce nav.woocommerce-pagination ul.page-numbers { gap: 6px; }
	.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers { min-width: 38px; height: 38px; padding: 0 8px !important; font-size: .88rem; border-radius: 7px; }
	/* one row on phones: hide numbered pages except the first/last page
	   and the current page's immediate neighbours (arrows and dots stay) */
	.woocommerce nav.woocommerce-pagination ul.page-numbers li:has(> a.page-numbers:not(.prev):not(.next)) { display: none; }
	.woocommerce nav.woocommerce-pagination ul.page-numbers li:has(> .current) + li,
	.woocommerce nav.woocommerce-pagination ul.page-numbers li:has(+ li > .current),
	.woocommerce nav.woocommerce-pagination ul.page-numbers li:first-child,
	.woocommerce nav.woocommerce-pagination ul.page-numbers li:has(> .prev) + li,
	.woocommerce nav.woocommerce-pagination ul.page-numbers li:has(+ li > .next),
	.woocommerce nav.woocommerce-pagination ul.page-numbers li:last-child { display: block !important; } /* !important: the hide rule above out-specifies these via its :not() chain */
}

/* -----------------------------------------------------------------
   Contrast fixes (WCAG AA 4.5:1 for small text) -- white on the base
   teal #0D9488 is only 3.74:1; the darker teal #0B7A70 is 5.21:1.
   The search box's rotating placeholder #9aa0a6 was 2.64:1 -> #6b7280
   (4.83:1).
   ----------------------------------------------------------------- */
.mgx-hero__cta,
.mgx-pc__badge--new { background: var(--mgx-teal-dark); }
.mgx-header__search .psx-search__rotator { color: #6b7280; }