/* =========================================================================
   Mahsoolat — Design System (main.css)
   RTL-first | logical properties | tokens | components
   هدف: سبک، سریع، تمیز، اعتمادساز، فروش‌محور.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) Design Tokens
   ---------------------------------------------------------------------- */
:root {
	/* رنگ برند — پترول مدرن (اعتماد/تکنولوژی) + کهربایی (اکشن/فروش) */
	--brand: #0d6e8c;          /* Petrol — رنگ اصلی برند */
	--brand-700: #0a5468;      /* تیره‌تر برای هاور/هدر */
	--brand-900: #073a49;      /* بسیار تیره */
	--brand-100: #e6f2f6;      /* پس‌زمینه ملایم برند */
	--brand-50:  #f2f9fb;

	--accent: #ff7a1a;         /* کهربایی — دکمه‌های اصلی CTA */
	--accent-600: #ec6a08;
	--accent-100: #fff0e3;

	--sale: #e23744;           /* قرمز تخفیف */
	--sale-100: #fdecee;
	--success: #16a34a;        /* سبز موجودی */
	--success-100: #e7f6ee;
	--warning: #d9920b;

	/* خنثی‌ها */
	--ink: #14181d;            /* متن اصلی */
	--ink-2: #3a434d;          /* متن ثانویه */
	--muted: #6b7682;          /* متن کم‌رنگ */
	--line: #e7ebef;           /* خطوط/بوردر */
	--line-2: #f0f3f6;
	--surface: #ffffff;        /* کارت/سطح */
	--bg: #f5f7f9;             /* پس‌زمینه صفحه */
	--bg-2: #eef2f5;

	/* تایپوگرافی */
	--font: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
	--fs-12: .75rem;
	--fs-13: .8125rem;
	--fs-14: .875rem;
	--fs-15: .9375rem;
	--fs-16: 1rem;
	--fs-18: 1.125rem;
	--fs-20: 1.25rem;
	--fs-24: 1.5rem;
	--fs-30: 1.875rem;
	--fs-36: 2.25rem;
	--lh: 1.7;                 /* فارسی به ارتفاع خط بیشتری نیاز دارد */

	/* فاصله‌ها (۴pt scale) */
	--s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
	--s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem;   --s-10: 2.5rem;
	--s-12: 3rem;   --s-16: 4rem;

	/* شعاع گوشه */
	--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

	/* سایه‌ها (نرم، حرفه‌ای) */
	--sh-1: 0 1px 2px rgba(16,24,32,.06), 0 1px 1px rgba(16,24,32,.04);
	--sh-2: 0 4px 14px rgba(16,24,32,.08);
	--sh-3: 0 10px 30px rgba(16,24,32,.12);

	/* چیدمان */
	--container: 1280px;
	--header-h: 132px;         /* ارتفاع کل هدر دسکتاپ */
	--z-header: 100; --z-drawer: 200; --z-modal: 300; --z-sticky: 90;
	--sidebar-sticky-top: calc(var(--header-h) + var(--s-4));

	--ease: cubic-bezier(.2,.7,.3,1);
}

/* -------------------------------------------------------------------------
   2) Reset / Base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
	font-family: var(--font);
	font-size: var(--fs-15);
	line-height: var(--lh);
	color: var(--ink);
	background: var(--bg);
	direction: rtl;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "ss01";
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--line-2); } /* جلوگیری از پرش رنگ تا بارگذاری */

a { color: inherit; text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { line-height: 1.35; font-weight: 700; color: var(--ink); }
h1 { font-size: var(--fs-24); }
h2 { font-size: var(--fs-20); }

button { font: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* اعداد لاتین داخل متن فارسی با همان فونت رندر شوند */
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* -------------------------------------------------------------------------
   3) Layout helpers
   ---------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }
.section { padding-block: var(--s-10); }
.section--tight { padding-block: var(--s-6); }

.grid { display: grid; gap: var(--s-4); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }

.archive-head {
	margin-block-end: var(--s-5);
	background: linear-gradient(180deg, #fff, #f7fafb);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-5);
}
.archive-head--media {
	display: grid;
	grid-template-columns: 152px minmax(0, 1fr);
	align-items: start;
	gap: var(--s-5);
}
.archive-head__media { grid-column: 1; grid-row: 1; }
.archive-head__content { grid-column: 2; min-width: 0; }
.archive-head--category { align-items: start; }
.archive-head--category .archive-head__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.archive-head--category .archive-head__media { grid-row: 1 / span 2; }
.archive-head h1 { font-size: var(--fs-24); margin-block-end: var(--s-2); line-height: 1.5; }
.archive-head__desc { color: var(--ink-2); font-size: var(--fs-14); line-height: 2; max-width: 86ch; }
.archive-head__desc--clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.archive-head__more { color: var(--brand); font-size: var(--fs-13); font-weight: 600; cursor: pointer; }
.archive-head__media {
	inline-size: 152px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(16,24,32,.05);
}
.archive-head__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: var(--s-3);
}
.archive-head__links {
	grid-column: 2;
	grid-row: 2;
	display: grid;
	grid-template-columns: minmax(116px, max-content) minmax(0, 1fr);
	gap: var(--s-3);
	align-items: start;
	margin-block-start: var(--s-3);
}
.archive-head__pill,
.archive-head__related {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s-3);
}
.archive-head__pill {
	display: grid;
	gap: 2px;
	color: var(--ink);
}
.archive-head__pill span,
.archive-head__related > span {
	color: var(--muted);
	font-size: var(--fs-12);
	font-weight: 700;
}
.archive-head__pill strong {
	color: var(--brand-700);
	font-size: var(--fs-14);
	white-space: nowrap;
}
.archive-head__related {
	display: grid;
	gap: var(--s-2);
}
.archive-head__related div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.archive-head__related a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	border-radius: var(--r-sm);
	background: var(--brand-50);
	color: var(--brand-700);
	padding: 3px 9px;
	font-size: var(--fs-12);
	font-weight: 800;
}

.section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-5); }
.section__title { font-size: var(--fs-20); position: relative; padding-inline-start: var(--s-3); }
.section__title::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block: 6px auto;
	width: 4px; height: 22px; background: var(--accent); border-radius: var(--r-pill);
}
.section__more { display: inline-flex; align-items: center; gap: 2px; color: var(--brand); font-size: var(--fs-14); font-weight: 500; }
.section__more .icon { transform: scaleX(-1); }

.category-seo-text {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: var(--s-6); margin-block-start: var(--s-8);
	line-height: 2; color: var(--ink-2); font-size: var(--fs-14);
}
.category-seo-text h2 { font-size: var(--fs-18); margin-block: var(--s-4) var(--s-2); }
.category-seo-text h3 { font-size: var(--fs-16); margin-block: var(--s-4) var(--s-2); }
.category-seo-text p + p { margin-block-start: var(--s-3); }
.category-seo-text ul,
.category-seo-text ol { list-style: revert; padding-inline-start: var(--s-6); margin-block: var(--s-3); }
.category-seo-text li + li { margin-block-start: var(--s-1); }
.category-seo-text--flush { margin-block-start: 0; }
.category-seo-text .seo-highlight {
	color: var(--brand-700);
	background: var(--brand-50);
	border-radius: 6px;
	padding: 0 4px;
	font-weight: 800;
}
.category-seo-text .seo-list {
	display: grid;
	gap: var(--s-2);
	list-style: none;
	padding: 0;
}
.category-seo-text .seo-list li {
	position: relative;
	padding-inline-start: var(--s-5);
}
.category-seo-text .seo-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .8em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-100);
}
.category-seo-text .seo-note {
	margin-block-start: var(--s-5);
	padding: var(--s-4);
	border-radius: var(--r-md);
	border: 1px solid var(--brand-100);
	background: var(--brand-50);
	color: var(--ink-2);
}
.category-seo-text .seo-note strong { color: var(--brand-700); }
.section__title--spaced { margin-block: var(--s-6) var(--s-4); }

.page-links,
.nav-links,
.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.page-links,
.navigation.pagination,
.woocommerce-pagination { margin-block-start: var(--s-6); }
.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent;
	overflow: visible;
}
.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0 !important;
	overflow: visible;
}
.page-links a,
.page-links span,
.nav-links a,
.nav-links span,
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 46px;
	min-height: 46px;
	padding: 0 var(--s-3);
	border: 1px solid var(--line) !important;
	border-radius: 999px;
	background: #fff; color: var(--ink-2); font-weight: 800; font-size: var(--fs-14);
	box-shadow: 0 6px 18px rgba(16,24,32,.04);
	line-height: 1;
	transition: .15s var(--ease);
}
.page-links a:hover,
.nav-links a:hover,
.woocommerce-pagination .page-numbers a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--accent) !important; color: var(--accent); transform: translateY(-1px); }
.nav-links .current,
.page-links .current,
.woocommerce-pagination .page-numbers .current,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: 0 10px 22px rgba(255,122,26,.22); }

/* -------------------------------------------------------------------------
   4) Buttons
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
	font-weight: 700; font-size: var(--fs-15); line-height: 1;
	transition: transform .08s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
	white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(255,122,26,.28); }
.btn--primary:hover { background: var(--accent-600); color: #fff; }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-700); color: #fff; }
.btn--ghost { background: var(--brand-100); color: var(--brand-700); }
.btn--ghost:hover { background: #d8ecf2; }
.btn--outline { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--block { width: 100%; }
.btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--fs-16); }
.btn--disabled { background: var(--bg-2); color: var(--muted); cursor: not-allowed; box-shadow: none; }

/* -------------------------------------------------------------------------
   5) Badges
   ---------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); font-weight: 700; padding: 3px 8px; border-radius: var(--r-sm); line-height: 1.4; }
.badge--sale { background: var(--sale); color: #fff; }
.badge--sale small { font-size: 9px; font-weight: 500; opacity: .9; }
.badge--oos { background: #e9edf0; color: var(--muted); }
.badge--new { background: var(--success-100); color: var(--success); }
.badge--brand { background: var(--brand-100); color: var(--brand-700); }

/* -------------------------------------------------------------------------
   6) Breadcrumbs
   ---------------------------------------------------------------------- */
.breadcrumbs { padding-block: var(--s-3); font-size: var(--fs-13); color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-1); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs__sep { display: inline-flex; color: var(--line); }
.breadcrumbs__sep .icon { transform: scaleX(-1); }
.breadcrumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; }

/* -------------------------------------------------------------------------
   7) Header (Desktop)
   ---------------------------------------------------------------------- */
.site-header { background: var(--surface); position: sticky; inset-block-start: 0; z-index: var(--z-header); box-shadow: var(--sh-1); }

.header-top { border-block-end: 1px solid var(--line-2); font-size: var(--fs-12); color: var(--muted); }
.header-top .container { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.header-top__links { display: flex; gap: var(--s-4); }
.header-top__links a:hover { color: var(--brand); }
.header-top__phone { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; line-height: 1; }
.header-top__phone .icon { flex: 0 0 auto; }
.header-top__phone span { display: inline-block; line-height: 1; }

.header-main .container { display: flex; align-items: center; gap: var(--s-5); height: 76px; }
.brand-logo { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); direction: rtl; }
.brand-logo img { height: 42px; width: auto; }
.site-header .brand-logo img { transform-origin: center; animation: brandLogoSignal 3.8s var(--ease) infinite; }
@keyframes brandLogoSignal {
	0%, 72%, 100% { transform: translateY(0) scale(1); filter: none; }
	18% { transform: translateY(-1px) scale(1.035); filter: drop-shadow(0 4px 8px rgba(13,110,140,.16)); }
	34% { transform: translateY(0) scale(.995); filter: none; }
}
.brand-logo__text { display: grid; gap: 1px; line-height: 1.25; }
.brand-logo__type { font-weight: 900; font-size: var(--fs-18); color: var(--brand); letter-spacing: 0; white-space: nowrap; }
.brand-logo__text small { color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }

/* Search */
.header-search { flex: 1 1 auto; max-width: 620px; }
.search-form { position: relative; display: flex; }
.search-form input[type="search"] {
	width: 100%; height: 50px; border: 1.5px solid var(--line); border-radius: var(--r-md);
	padding-inline: var(--s-4) 52px; background: var(--bg); font-size: var(--fs-14);
	transition: border-color .15s var(--ease), background .15s var(--ease);
}
.search-form input:focus { border-color: var(--brand); background: #fff; outline: none; }
.search-form button {
	position: absolute; inset-inline-end: 5px; inset-block: 5px; width: 42px;
	display: grid; place-items: center; color: #fff; background: var(--brand);
	border-radius: var(--r-sm);
}
.search-form button:hover { background: var(--brand-700); }

/* Header actions */
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.header-action { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--ink-2); }
.header-action:hover { background: var(--bg); color: var(--brand); }
.header-action__label { font-size: var(--fs-13); }
.header-action small { display: block; font-size: 11px; color: var(--muted); }
.header-action strong { font-size: var(--fs-13); font-weight: 700; }
.header-cart { position: relative; }
.header-cart__count {
	position: absolute; inset-block-start: -4px; inset-inline-start: -4px;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
	background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
	display: grid; place-items: center;
}

/* -------------------------------------------------------------------------
   8) Primary nav + Mega menu
   ---------------------------------------------------------------------- */
.header-nav { border-block-start: 1px solid var(--line-2); }
.header-nav .container { display: flex; align-items: center; gap: var(--s-4); height: 52px; }

.cats-btn { display: inline-flex; align-items: center; gap: var(--s-2); background: transparent; color: var(--brand); padding: var(--s-2) 0; border-radius: 0; font-weight: 800; font-size: var(--fs-14); }
.cats-btn:hover { color: var(--brand-700); }
.cats-btn .icon { color: currentColor; }

.menu { display: flex; align-items: center; gap: var(--s-1); }
.menu > li > a { display: inline-flex; align-items: center; gap: 4px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-14); font-weight: 500; color: var(--ink-2); }
.menu > li > a:hover { background: var(--bg); color: var(--brand); }
.menu > li.current-menu-item > a,
.menu > li.current-menu-parent > a,
.menu > li.current-menu-ancestor > a,
.menu > li.current_page_item > a,
.menu > li.current_page_parent > a,
.menu > li.current_page_ancestor > a,
.menu > li.current-product-parent > a,
.menu > li.current-product-ancestor > a {
	background: var(--brand-50); color: var(--brand); font-weight: 800;
	box-shadow: inset 0 -2px 0 var(--brand);
}
.menu .menu-item-has-children { position: relative; }

/* Mega panel */
.mega {
	position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 8px);
	min-width: 720px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--sh-3); padding: var(--s-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s var(--ease); z-index: var(--z-header);
}
.menu-item-has-children:hover > .mega,
.menu-item-has-children:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* دراپ‌داون استاندارد wp_nav_menu (ul.sub-menu) — همان زبان بصری مگاپنل */
.menu .sub-menu {
	position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 8px);
	min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--sh-3); padding: var(--s-2);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s var(--ease);
	z-index: var(--z-header);
}
.menu .menu-item-has-children:hover > .sub-menu,
.menu .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu .sub-menu li a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-13); color: var(--ink-2); white-space: nowrap; }
.menu .sub-menu li a:hover { background: var(--bg); color: var(--brand); }
.menu > .menu-item-has-children > a::after {
	content: ""; width: 7px; height: 7px; flex: 0 0 auto;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg); margin-block-start: -3px;
}

.mega__col h4 { font-size: var(--fs-14); color: var(--brand); margin-block-end: var(--s-3); padding-block-end: var(--s-2); border-block-end: 1px solid var(--line-2); }
.mega__col a { display: block; padding: var(--s-1) 0; font-size: var(--fs-13); color: var(--ink-2); }
.mega__col a:hover { color: var(--brand); padding-inline-start: var(--s-1); }

/* -------------------------------------------------------------------------
   9) Trust bar
   ---------------------------------------------------------------------- */
.trust--bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.trust__item { display: flex; align-items: center; gap: var(--s-3); }
.trust__icon { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; background: var(--brand-100); color: var(--brand); border-radius: var(--r-md); }
.trust__text { display: flex; flex-direction: column; }
.trust__text strong { font-size: var(--fs-14); }
.trust__text small { font-size: var(--fs-12); color: var(--muted); }

/* -------------------------------------------------------------------------
   10) Hero
   ---------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-4); margin-block: var(--s-5); }
.hero__main { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(120deg, var(--brand) 0%, var(--brand-700) 100%); min-height: 360px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); padding: var(--s-10); color: #fff; }
.hero__main::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.14), transparent 40%); pointer-events: none; }
.hero__content { position: relative; z-index: 1; max-width: 460px; }
.hero__content h1 { color: #fff; font-size: var(--fs-30); line-height: 1.4; margin-block-end: var(--s-3); }
.hero__content p { color: rgba(255,255,255,.9); margin-block-end: var(--s-5); font-size: var(--fs-16); }
.hero-scene { --hero-sketch-baseline: 58px; position: relative; z-index: 1; flex: 0 0 390px; min-height: 300px; color: rgba(255,255,255,.7); direction: ltr; }
.hero-scene__ground { position: absolute; left: 2px; bottom: calc(var(--hero-sketch-baseline) - 15px); z-index: 0; width: 374px; height: 32px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(4, 43, 59, .34), rgba(4, 43, 59, .16) 48%, transparent 72%); }
.tehran-clock {
	--hour-deg: 45deg; --minute-deg: 180deg; --second-deg: 270deg;
	position: absolute; left: 50%; top: 8px; z-index: 2; width: 124px; height: 124px; transform: translateX(-50%);
	border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%;
	background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 7px rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.12);
}
.tehran-clock::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,.24); border-radius: 50%; }
.tehran-clock__mark { position: absolute; background: rgba(255,255,255,.72); border-radius: var(--r-pill); }
.tehran-clock__mark--12,
.tehran-clock__mark--6 { left: 50%; width: 2px; height: 9px; transform: translateX(-50%); }
.tehran-clock__mark--12 { top: 10px; }
.tehran-clock__mark--6 { bottom: 10px; }
.tehran-clock__mark--3,
.tehran-clock__mark--9 { top: 50%; width: 9px; height: 2px; transform: translateY(-50%); }
.tehran-clock__mark--3 { right: 10px; }
.tehran-clock__mark--9 { left: 10px; }
.tehran-clock__hand { position: absolute; left: 50%; bottom: 50%; border-radius: var(--r-pill); transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--hand-deg)); }
.tehran-clock__hand--hour { --hand-deg: var(--hour-deg); width: 4px; height: 30px; background: #fff; }
.tehran-clock__hand--minute { --hand-deg: var(--minute-deg); width: 3px; height: 40px; background: rgba(255,255,255,.86); }
.tehran-clock__hand--second { --hand-deg: var(--second-deg); width: 1.5px; height: 44px; background: var(--accent); }
.tehran-clock__pin { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; transform: translate(-50%, -50%); }
.tehran-clock__label,
.tehran-clock__time { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.92); line-height: 1; white-space: nowrap; }
.tehran-clock__label { top: 35px; font-size: 11px; font-weight: 800; }
.tehran-clock__time { top: 72px; direction: ltr; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.hero-sketch {
	position: absolute; bottom: var(--hero-sketch-baseline); z-index: 1; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
	filter: drop-shadow(0 12px 20px rgba(0,0,0,.08));
}
.hero-sketch--kettle { left: 8px; width: 92px; height: auto; color: rgba(255,255,255,.52); }
.hero-sketch--fan { left: 98px; width: 80px; height: auto; color: rgba(255,255,255,.5); }
.hero-sketch--tv { left: 180px; width: 110px; height: auto; color: rgba(255,255,255,.72); }
.hero-sketch--fridge { left: 310px; width: 58px; height: auto; color: rgba(255,255,255,.44); }
.hero-sketch__signal { stroke: var(--accent); stroke-width: 5; stroke-dasharray: 64; animation: heroSignal 2.8s ease-in-out infinite; }
.hero-sketch__signal--short { animation-delay: .45s; opacity: .75; }
.hero-sketch__brand { fill: rgba(255,255,255,.82); stroke: none; font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; direction: ltr; unicode-bidi: bidi-override; opacity: .45; animation: heroBrandPulse 4.2s ease-in-out infinite; }
.hero-sketch__spin { animation: heroSketchSpin 5s linear infinite; transform-box: fill-box; transform-origin: center; }
.hero-sketch__steam { stroke-dasharray: 22 12; animation: heroSteam 2.6s ease-in-out infinite; }
.hero-sketch__pulse { fill: var(--accent); stroke: none; transform-box: fill-box; transform-origin: center; animation: heroSketchPulse 2.4s ease-in-out infinite; }
@keyframes heroSignal {
	0%, 100% { stroke-dashoffset: 0; opacity: .45; }
	50% { stroke-dashoffset: -32; opacity: 1; }
}
@keyframes heroBrandPulse {
	0%, 100% { opacity: .35; }
	50% { opacity: .85; }
}
@keyframes heroSketchSpin {
	to { transform: rotate(360deg); }
}
@keyframes heroSteam {
	0%, 100% { stroke-dashoffset: 0; opacity: .35; }
	50% { stroke-dashoffset: -24; opacity: .85; }
}
@keyframes heroSketchPulse {
	0%, 100% { transform: scale(.82); opacity: .5; }
	50% { transform: scale(1.18); opacity: 1; }
}
.hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-4); }
.hero__card { border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: var(--s-4); min-height: 172px; isolation: isolate; }
.hero__card--deals { background: linear-gradient(135deg, #fff, var(--accent-100)); }
.hero__card--season { background: linear-gradient(135deg, #fff, var(--brand-100)); }
.hero__card::before { content: ""; position: absolute; inset-inline-start: -24px; inset-block-start: -22px; inline-size: 132px; block-size: 132px; border-radius: 38px; background: rgba(255,255,255,.54); transform: rotate(-14deg); z-index: -1; }
.hero__card > .icon { position: absolute; inset-inline-start: var(--s-4); inset-block-start: var(--s-4); color: rgba(13,110,140,.16); stroke-width: 1.35; }
.hero__card--deals > .icon { color: rgba(255,122,26,.18); }
.hero__card div { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   11) Category circles / tiles
   ---------------------------------------------------------------------- */
.cats-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--s-3); }
.cat-carousel { position: relative; }
.cat-carousel .cats-grid--scroll {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(132px, 156px);
	align-items: stretch;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: var(--s-8);
	scroll-snap-type: x mandatory;
	padding: 2px var(--s-8) var(--s-2);
	scrollbar-width: none;
}
.cat-carousel .cats-grid--scroll::-webkit-scrollbar { display: none; }
.cat-tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--s-2); text-align: center; padding: var(--s-3); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: .15s var(--ease); box-sizing: border-box; }
.cat-carousel .cats-grid--scroll > .cat-tile,
.cats-grid--scroll .cat-tile { min-height: 170px; height: 170px !important; max-height: 170px; scroll-snap-align: start; }
.cat-tile:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.cat-tile__img {
	width: 78px;
	height: 78px;
	border-radius: 22px;
	object-fit: contain;
	background:
		radial-gradient(circle at 50% 50%, var(--brand-50) 0 58%, transparent 59%),
		linear-gradient(145deg, #fff, var(--bg));
	border: 1px solid var(--line);
	padding: 10px;
	box-shadow: 0 10px 22px rgba(16,24,32,.05);
}
.cat-tile__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-block-size: 3.2em;
	max-block-size: 3.2em;
	overflow: hidden;
	font-size: var(--fs-13);
	font-weight: 500;
	line-height: 1.6;
	color: var(--ink-2);
}
.cat-carousel__btn {
	position: absolute; inset-block-start: 50%; z-index: 3;
	width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 50%;
	background: #fff; color: var(--brand); box-shadow: var(--sh-2);
	transform: translateY(-50%); transition: .15s var(--ease);
}
.cat-carousel__btn:hover { color: var(--brand-700); border-color: var(--brand); }
.cat-carousel__btn--prev { left: 0; }
.cat-carousel__btn--next { right: 0; }
.cat-carousel__btn--prev .icon { transform: rotate(180deg); }

/* -------------------------------------------------------------------------
   12) Blog / buying guide
   ---------------------------------------------------------------------- */
.blog-layout {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--s-6); align-items: start; padding-block: var(--s-5);
}
.blog-layout__main { min-width: 0; }
.blog-sidebar {
	position: sticky !important;
	top: var(--sidebar-sticky-top);
	inset-block-start: var(--sidebar-sticky-top);
	align-self: start;
	display: grid;
	gap: var(--s-4);
	min-width: 0;
	height: max-content;
	max-block-size: none;
	overflow: visible;
}
.blog-widget { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.blog-widget__title { font-size: var(--fs-16); margin-block-end: var(--s-4); }
.blog-widget__links { display: grid; gap: var(--s-3); }
.blog-widget__links a { display: grid; gap: 2px; padding-block-end: var(--s-3); border-block-end: 1px solid var(--line-2); }
.blog-widget__links a:last-child { padding-block-end: 0; border-block-end: 0; }
.blog-widget__links span { font-size: var(--fs-14); font-weight: 600; line-height: 1.7; }
.blog-widget__links small { font-size: var(--fs-12); color: var(--muted); }
.blog-widget__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.blog-widget__chips a {
	display: inline-flex; align-items: center; gap: var(--s-2);
	padding: 6px 10px; border-radius: var(--r-pill);
	background: var(--bg); color: var(--ink-2); font-size: var(--fs-13);
}
.blog-widget__chips a:hover { background: var(--brand-100); color: var(--brand-700); }
.blog-widget__chips span { color: var(--muted); font-size: var(--fs-12); }
.blog-widget--cta { background: var(--brand-50); border-color: var(--brand-100); }
.blog-widget--cta p { color: var(--ink-2); font-size: var(--fs-14); line-height: 1.9; margin-block-end: var(--s-4); }

.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.post-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-grid--related { margin-block-start: var(--s-4); }

.post-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	overflow: hidden; display: flex; flex-direction: column; min-width: 0; height: 100%;
	transition: box-shadow .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.post-card:hover { border-color: #d7dee4; box-shadow: var(--sh-2); transform: translateY(-2px); }
.post-card__media { aspect-ratio: 16 / 10; background: var(--brand-50); overflow: hidden; display: grid; place-items: center; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__placeholder { color: var(--brand-700); font-weight: 800; font-size: var(--fs-14); }
.post-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 auto; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--fs-12); }
.post-card__cat { color: var(--brand); font-weight: 700; }
.post-card__title { font-size: var(--fs-18); line-height: 1.65; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card--compact .post-card__title { font-size: var(--fs-15); }
.post-card__excerpt { color: var(--ink-2); font-size: var(--fs-14); line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__more { margin-block-start: auto; padding-block-start: var(--s-2); }

.single-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--fs-13); }
.single-post__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--line); margin-inline-end: var(--s-2); vertical-align: middle; }
.single-post__meta a { color: var(--brand); font-weight: 700; }
.single-post__content { margin-block-start: 0; }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }
.post-tags a { background: var(--brand-100); color: var(--brand-700); border-radius: var(--r-pill); padding: 5px 10px; font-size: var(--fs-12); font-weight: 700; }
.related-posts { margin-block-start: var(--s-8); }
.blog-empty { padding-block: var(--s-12); text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--r-lg); }

.archive-head--blog h1 { font-size: clamp(var(--fs-24), 2.2vw, var(--fs-30)); }
.blog-widget { box-shadow: 0 8px 24px rgba(16,24,32,.04); }
.blog-widget__title { position: relative; padding-inline-start: var(--s-3); }
.blog-widget__title::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .45em .45em; width: 3px; border-radius: var(--r-pill); background: var(--accent); }
.blog-widget__links--compact a { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); }
.blog-widget__links--compact small { white-space: nowrap; }
.blog-product-strip { margin-block-start: var(--s-8); padding-block-start: var(--s-6); border-block-start: 1px solid var(--line); }
.blog-product-strip .section__head { margin-block-end: var(--s-4); }
.blog-product-strip .product-row--blog { grid-auto-columns: minmax(172px, 210px); }
.single-post__media {
	border-radius: var(--r-lg);
	overflow: hidden;
	margin-block-end: var(--s-6);
	border: 1px solid var(--line);
	background:
		radial-gradient(circle at 50% 50%, var(--brand-50) 0 48%, transparent 49%),
		linear-gradient(145deg, #fff, var(--bg));
	padding: var(--s-5);
	display: grid;
	place-items: center;
}
.single-post__media img { width: 100%; max-height: 360px; object-fit: contain; background: transparent; }
.comments-area { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); margin-block-start: var(--s-6); box-shadow: 0 8px 24px rgba(16,24,32,.04); }
.comments-title,
.comment-reply-title { display: block; font-size: var(--fs-18); font-weight: 800; margin-block-end: var(--s-4); color: var(--ink); }
.comment-list { display: grid; gap: var(--s-3); list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.comment-list .children { list-style: none; margin-block-start: var(--s-3); margin-inline-start: var(--s-5); padding: 0; }
.comment-body { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.comment-meta { display: grid; gap: var(--s-1); margin-block-end: var(--s-3); color: var(--muted); font-size: var(--fs-12); }
.comment-author { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); font-size: var(--fs-14); font-weight: 700; }
.comment-author img { width: 42px; height: 42px; border-radius: 50%; }
.comment-content { color: var(--ink-2); line-height: 1.9; font-size: var(--fs-14); }
.reply { margin-block-start: var(--s-3); }
.comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.comment-form p { margin: 0; }
.comment-form label { display: block; margin-block-end: var(--s-2); color: var(--ink-2); font-size: var(--fs-13); font-weight: 700; }
.comment-form-comment,
.comment-notes,
.comment-form-cookies-consent,
.comment-form .form-submit { grid-column: 1 / -1; }
.comment-notes { color: var(--muted); font-size: var(--fs-13); line-height: 1.9; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-13); }
.comment-form-cookies-consent input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.comment-form-cookies-consent label { margin: 0; font-weight: 600; }
.comment-form .form-submit { display: flex; justify-content: flex-start; }
.comments-closed { color: var(--muted); font-size: var(--fs-14); }


/* -------------------------------------------------------------------------
   13) Product card
   ---------------------------------------------------------------------- */
.product-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3); display: flex; flex-direction: column; transition: box-shadow .15s var(--ease), border-color .15s var(--ease); height: 100%; min-width: 0; }
.product-card:hover { box-shadow: var(--sh-2); border-color: #d7dee4; }
.product-card__media { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-2); transition: transform .25s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__badges { position: absolute; inset-block-start: var(--s-2); inset-inline-end: var(--s-2); display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.product-card__fav { position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--muted); z-index: 2; }
.product-card__fav:hover { color: var(--sale); }
.product-card__brand { font-size: var(--fs-12); color: var(--muted); margin-block-start: var(--s-3); }
.product-card__title { font-size: var(--fs-14); font-weight: 500; line-height: 1.6; color: var(--ink); margin-block: 2px var(--s-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.product-card__title:hover { color: var(--brand); }
.product-card__rating { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); color: var(--warning); margin-block-end: var(--s-2); }
.product-card__rating .icon { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.product-card__foot { margin-block-start: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-2); padding-block-start: var(--s-3); border-block-start: 1px solid var(--line-2); min-width: 0; }
.price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-card__price { max-width: 100%; overflow: hidden; }
.price ins { text-decoration: none; }
.price__old { font-size: var(--fs-12); color: var(--muted); text-decoration: line-through; line-height: 1.4; }
.price__now { font-size: var(--fs-16); font-weight: 800; color: var(--ink); line-height: 1.35; overflow-wrap: normal; word-break: keep-all; }
.product-card__price .price__old,
.product-card__price .price__now,
.product-card__price .woocommerce-Price-amount,
.product-card__price .woocommerce-Price-amount bdi {
	display: inline-flex;
	align-items: baseline;
	gap: .25em;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.product-card__price .woocommerce-Price-currencySymbol { flex: 0 0 auto; white-space: nowrap; }
.price__now .currency,
.price__now .woocommerce-Price-currencySymbol { font-size: var(--fs-12); font-weight: 500; color: var(--muted); margin-inline-start: 2px; }
.price--oos { color: var(--muted); font-size: var(--fs-13); font-weight: 500; }
.price--supply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: fit-content;
	max-inline-size: 100%;
	min-block-size: 34px;
	padding: 5px 10px;
	border: 1px solid var(--brand-100);
	border-radius: var(--r-sm);
	background: var(--brand-50);
	color: var(--brand-700);
	font-size: var(--fs-12);
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
}
.product-card__atc { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--brand-100); color: var(--brand); display: grid; place-items: center; justify-self: end; flex: 0 0 auto; transition: .15s var(--ease); }
.product-card__atc:hover { background: var(--brand); color: #fff; }
.product-card__foot .added_to_cart { grid-column: 1 / -1; }

/* اسلایدر افقی محصولات */
.product-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--s-2); scrollbar-width: thin; }
.product-row > * { scroll-snap-align: start; }
@media (min-width: 1024px) { .product-row { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; overflow: visible; } }
.home-products .product-row {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: clamp(210px, 22vw, 244px);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scroll-padding-inline: var(--s-1);
	padding-block-end: var(--s-3);
}
@media (min-width: 1024px) {
	.home-products .product-row {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(210px, 18vw, 248px);
		overflow-x: auto;
	}
}

/* -------------------------------------------------------------------------
   13) Banners (small utility)
   ---------------------------------------------------------------------- */
.mini-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.mini-banner { border-radius: var(--r-lg); overflow: hidden; position: relative; min-height: 150px; display: flex; align-items: center; padding: var(--s-5); color: #fff; background: var(--brand-700); }
.mini-banner--kitchen { background: linear-gradient(120deg, #0d6e8c, #0a5468); }
.mini-banner--av { background: linear-gradient(120deg, #1f3a45, #0f1a1f); }
.mini-banner--sale { background: linear-gradient(120deg, #ec6a08, #c2540a); }
.mini-banner h3 { color: #fff; font-size: var(--fs-18); margin-block-end: var(--s-2); }
.mini-banner__desc { color: #cfe6ee; }
.mini-banner--av .mini-banner__desc { color: #cdd9de; }
.mini-banner--sale .mini-banner__desc { color: #ffe6d2; }
.mini-banner .btn { margin-block-start: var(--s-3); }

/* -------------------------------------------------------------------------
   14) Brands strip
   ---------------------------------------------------------------------- */
.brands { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s-3); }
.brand-tile { aspect-ratio: 16/9; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); filter: grayscale(1); opacity: .8; transition: .15s var(--ease); }
.brand-tile:hover { filter: none; opacity: 1; border-color: var(--brand); }
.brands--category-strip {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(128px, 154px);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--s-2);
	scrollbar-width: thin;
}
.brand-tile--category {
	aspect-ratio: 1 / 1;
	gap: var(--s-2);
	padding: var(--s-3);
	filter: none;
	opacity: 1;
	text-align: center;
}
.brand-tile--category img {
	width: min(84px, 72%);
	height: min(84px, 72%);
	object-fit: contain;
	border-radius: 22px;
	border: 1px solid var(--line);
	background:
		radial-gradient(circle at 50% 50%, var(--brand-50) 0 58%, transparent 59%),
		linear-gradient(145deg, #fff, var(--bg));
	padding: 10px;
	box-shadow: 0 10px 22px rgba(16,24,32,.05);
}
.brands--category-strip .brand-tile { scroll-snap-align: start; }
.brand-tile--category span {
	color: var(--text);
	font-size: var(--fs-13);
	font-weight: 800;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   15) FAQ (accordion)
   ---------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); width: 100%; max-width: none; margin-inline: 0; align-items: start; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); font-weight: 700; font-size: var(--fs-15); text-align: start; }
.faq__q .icon { transition: transform .2s var(--ease); flex: 0 0 auto; color: var(--brand); }
.faq__item[open] .faq__q .icon { transform: rotate(90deg); }
.faq__a { padding: 0 var(--s-4) var(--s-4); color: var(--ink-2); font-size: var(--fs-14); line-height: 1.9; }

/* -------------------------------------------------------------------------
   16) Footer
   ---------------------------------------------------------------------- */
.site-footer { background: #0f1a1f; color: #c7d2d8; margin-block-start: var(--s-12); }
.footer-trust { border-block-end: 1px solid rgba(255,255,255,.08); }
.footer-trust .trust--bar { background: transparent; border: 0; padding-block: var(--s-8); }
.footer-trust .trust__icon { background: rgba(255,255,255,.06); color: #fff; }
.footer-trust .trust__text strong { color: #fff; }
.footer-trust .trust__text small { color: #8da3ab; }

.footer-main { padding-block: var(--s-10); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); }
.footer-col h4 { color: #fff; font-size: var(--fs-15); margin-block-end: var(--s-4); }
.footer-col a { display: block; padding-block: 5px; font-size: var(--fs-13); color: #a9bcc3; }
.footer-col a:hover { color: #fff; }
.footer-about p { font-size: var(--fs-13); line-height: 2; color: #a9bcc3; margin-block-end: var(--s-4); }
.footer-contact li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-13); padding-block: 5px; }
.footer-socials { display: flex; gap: var(--s-2); margin-block-start: var(--s-4); }
.footer-socials a { width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(255,255,255,.06); display: grid; place-items: center; color: #fff; }
.footer-socials a:hover { background: var(--brand); }
.footer-badges { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.footer-badge { background: #fff; border-radius: var(--r-sm); padding: var(--s-2); height: 76px; display: grid; place-items: center; }
.footer-bottom { border-block-start: 1px solid rgba(255,255,255,.08); padding-block: var(--s-5); font-size: var(--fs-12); color: #8da3ab; }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); }
.footer-copyright { text-align: start; }
.footer-logo { margin-block-end: var(--s-4); }
.footer-logo__type { color: #fff; }
.footer-designer { display: inline-flex; align-items: center; gap: var(--s-1); color: #8da3ab; opacity: .72; font-size: 11px; white-space: nowrap; transition: opacity .15s var(--ease), color .15s var(--ease); }
a.footer-designer:hover { color: #fff; opacity: 1; }
.footer-designer .icon { color: var(--accent); }

.not-found { max-width: 640px; margin-inline: auto; padding-block: var(--s-12); text-align: center; }
.not-found__code { font-size: 5rem; font-weight: 800; color: var(--brand); line-height: 1; }
.not-found h1 { margin-block: var(--s-4) var(--s-3); }
.not-found p { margin-block-end: var(--s-6); }
.not-found__search { max-width: 480px; margin-inline: auto; margin-block-end: var(--s-6); }
.not-found__links { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

/* -------------------------------------------------------------------------
   17) Forms
   ---------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-block-end: var(--s-4); }
.field label { font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); }
.input, input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], select, textarea {
	width: 100%; height: 48px; border: 1.5px solid var(--line); border-radius: var(--r-md);
	padding-inline: var(--s-3); background: #fff; transition: border-color .15s var(--ease);
}
textarea { height: auto; min-height: 120px; padding-block: var(--s-3); }
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; }

.contact-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-block: var(--s-5); }
.contact-info-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); display: grid; gap: var(--s-1); }
.contact-info-card strong { color: var(--ink); font-size: var(--fs-14); }
.contact-info-card span { color: var(--ink-2); font-size: var(--fs-14); overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   18) Utilities
   ---------------------------------------------------------------------- */
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-0 { margin-block-start: 0; } .mt-4 { margin-block-start: var(--s-4); } .mt-6 { margin-block-start: var(--s-6); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-block-start: -60px; inset-inline-start: var(--s-4); background: var(--brand); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); z-index: var(--z-modal); transition: inset-block-start .15s; }
.skip-link:focus { inset-block-start: var(--s-3); color: #fff; }

/* مخفی‌سازی المان‌های مخصوص موبایل در دسکتاپ */
.only-mobile { display: none; }

/* -------------------------------------------------------------------------
   19) Responsive — Tablet/Mobile (mobile-first override below large)
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cols-4, .cols-5, .cols-6 { grid-template-columns: repeat(3, 1fr); }
	.cols-3 { grid-template-columns: repeat(2, 1fr); }
	.blog-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-4); }
	.post-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cats-grid { grid-template-columns: repeat(5, 1fr); }
	.brands { grid-template-columns: repeat(5, 1fr); }
	.footer-main { grid-template-columns: 1fr 1fr; }
	.hero { grid-template-columns: 1fr; }
	.hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.hero-scene { flex-basis: 320px; min-height: 270px; transform: scale(.92); transform-origin: left center; }
}

@media (max-width: 768px) {
	:root { --header-h: 108px; }
	body { padding-block-end: 64px; } /* فضای bottom-nav */

	.only-mobile { display: revert; }
	.only-desktop { display: none !important; }

	/* هدر موبایل: فقط برند + جستجو + سبد، بدون مگامنو */
	.header-top, .header-nav { display: none; }
	.header-main .container {
		direction: ltr;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"mobile-actions brand"
			"search search";
		align-items: center;
		column-gap: var(--s-3);
		row-gap: var(--s-2);
		width: 100%;
		max-width: none;
		height: auto;
		min-height: 110px;
		margin: 0;
		padding: var(--s-3) var(--s-4);
	}
	.header-action,
	.header-actions { direction: rtl; }
	.header-mobile-actions {
		grid-area: mobile-actions;
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		direction: rtl;
	}
	.brand-logo { grid-area: brand; justify-self: end; margin: 0; }
	.brand-logo img { height: 34px; }
	.brand-logo__type { font-size: var(--fs-14); }
	.brand-logo__text small { font-size: 9px; }
	.header-search { grid-area: search; max-width: none; width: 100%; }
	.header-action { min-width: 44px; min-height: 44px; justify-content: center; padding: var(--s-2); }
	.search-form input { height: 44px; }
	.hero__main { min-height: 310px; padding: var(--s-6); }
	.hero__content { max-width: none; }
	.hero-scene { display: none; }

	.trust--bar { grid-template-columns: 1fr 1fr; gap: var(--s-3); padding: var(--s-4); }
	.cols-2, .cols-3, .cols-4, .cols-5, .cols-6 { grid-template-columns: 1fr; }
	.blog-layout { grid-template-columns: 1fr; padding-block: var(--s-4); }
	.blog-sidebar { position: static; }
	.post-grid,
	.post-grid--home,
	.post-grid--related { grid-template-columns: 1fr; }
	.post-card__title { font-size: var(--fs-16); }
	.archive-head { padding: var(--s-4); }
	.archive-head--media { grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s-3); align-items: start; }
	.archive-head--category .archive-head__content { justify-content: flex-start; }
	.archive-head__content { grid-column: 1; grid-row: 1; }
	.archive-head__media { grid-column: 2; grid-row: 1; inline-size: 96px; justify-self: end; align-self: start; border-radius: 18px; }
	.archive-head__media img { padding: var(--s-2); }
	.archive-head__links { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr; margin-block-start: var(--s-2); }
	.archive-head__pill,
	.archive-head__related { padding: var(--s-3); }
	.archive-head__related div { gap: var(--s-2); }
	.category-seo-text { padding: var(--s-4); }
	.comment-form { grid-template-columns: 1fr; }
	.comments-area { padding: var(--s-4); }
	.single-post__media { padding: var(--s-4); }
	.single-post__media img { max-height: 260px; }
	.faq { grid-template-columns: 1fr; }
	.cats-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
	.cat-tile__img { width: 64px; height: 64px; border-radius: 18px; padding: 8px; }
	.mini-banners { grid-template-columns: 1fr; }
	.brands { grid-template-columns: repeat(3, 1fr); }
	.footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
	.footer-about { grid-column: 1 / -1; }
	.footer-col h4 { font-size: var(--fs-13); margin-block-end: var(--s-2); }
	.footer-col a { font-size: var(--fs-12); line-height: 1.7; }
	.footer-trust .trust--bar { grid-template-columns: 1fr 1fr; }
	.contact-info-grid { grid-template-columns: 1fr; }
	.section { padding-block: var(--s-6); }
	.hero__content h1 { font-size: var(--fs-24); }
	.hero__main { min-height: 240px; padding: var(--s-6); }
}

@media (max-width: 480px) {
	.cats-grid { grid-template-columns: repeat(3, 1fr); }
	.product-card { padding: var(--s-2); border-radius: 18px; }
	.product-card__media { border-radius: 14px; }
	.product-card__fav { width: 30px; height: 30px; }
	.product-card__title { font-size: var(--fs-13); min-height: 3.1em; }
	.product-card__foot {
		grid-template-columns: minmax(0, 1fr) 42px;
		align-items: center;
		gap: var(--s-2);
		padding-block-start: var(--s-2);
	}
	.product-card__atc { width: 42px; height: 42px; border-radius: 14px; }
	.product-card__price { overflow: visible; }
	.product-card__price .num { direction: rtl; unicode-bidi: plaintext; }
	.product-card__price .price__old,
	.product-card__price .price__now,
	.product-card__price .woocommerce-Price-amount,
	.product-card__price .woocommerce-Price-amount bdi {
		max-width: none;
		overflow: visible;
		text-overflow: clip;
		gap: .15em;
	}
	.price__old { font-size: 11px; }
	.price__now { font-size: clamp(13px, 3.8vw, 15px); line-height: 1.35; }
	.product-card__price .woocommerce-Price-currencySymbol { font-size: var(--fs-11); }
}

/* -------------------------------------------------------------------------
   20) Mobile drawer (categories) + Bottom nav + Bottom sheet
   ---------------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(10,20,25,.5); opacity: 0; transition: opacity .2s var(--ease); }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(86vw, 360px); background: #fff; transform: translateX(100%); transition: transform .25s var(--ease); display: flex; flex-direction: column; }
.drawer.is-open { visibility: visible; }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4); border-block-end: 1px solid var(--line); }
.drawer__body { overflow-y: auto; padding: var(--s-2); }
.drawer__body a { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-14); }
.drawer__body a:hover { background: var(--bg); }

.bottom-nav { display: none; }
@media (max-width: 768px) {
	.bottom-nav {
		display: grid; grid-template-columns: repeat(5, 1fr);
		position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-sticky);
		background: #fff; border-block-start: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(16,24,32,.06);
		padding-block-end: env(safe-area-inset-bottom, 0);
	}
	.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2); font-size: 11px; color: var(--muted); position: relative; }
	.bottom-nav a.is-active { color: var(--brand); }
	.bottom-nav a .icon { width: 22px; height: 22px; }
	.bottom-nav a.is-active .icon { stroke-width: 1.45; opacity: .95; }
	.bottom-nav a.is-active .icon--category { stroke-width: 1.3; }
	.bottom-nav .count { position: absolute; inset-block-start: 2px; inset-inline-start: 50%; margin-inline-start: 4px; background: var(--accent); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: var(--r-pill); display: grid; place-items: center; }
}

/* Bottom sheet (فیلتر موبایل) */
.sheet { position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; }
.sheet__overlay { position: absolute; inset: 0; background: rgba(10,20,25,.5); opacity: 0; transition: .2s var(--ease); }
.sheet__panel { position: absolute; inset-inline: 0; inset-block-end: 0; background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 85vh; transform: translateY(100%); transition: transform .25s var(--ease); display: flex; flex-direction: column; }
.sheet.is-open { visibility: visible; }
.sheet.is-open .sheet__overlay { opacity: 1; }
.sheet.is-open .sheet__panel { transform: translateY(0); }
.sheet__handle { width: 44px; height: 5px; background: var(--line); border-radius: var(--r-pill); margin: var(--s-3) auto; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-4) var(--s-3); border-block-end: 1px solid var(--line); }
.sheet__body { overflow-y: auto; padding: var(--s-4); }
.sheet__foot { padding: var(--s-4); border-block-start: 1px solid var(--line); display: flex; gap: var(--s-3); }

/* Sticky add-to-cart (موبایل، صفحه محصول) */
.sticky-atc { position: fixed; inset-block-end: 64px; inset-inline: 0; z-index: var(--z-sticky); background: #fff; border-block-start: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(16,24,32,.08); padding: var(--s-3) var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.sticky-atc__info { display: flex; flex-direction: column; flex: 1 1 auto; }
.sticky-atc__title { font-size: var(--fs-12); color: var(--muted); }
.sticky-atc__price { font-weight: 800; font-size: var(--fs-15); }
.sticky-atc__btn { flex: 0 0 auto; }
@media (min-width: 769px) { .sticky-atc { display: none !important; } }

/* -------------------------------------------------------------------------
   21) Reduced motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}