/*!
 * Ardal — استایل ویجت‌های فروشگاه
 * همه رنگ‌ها از متغیرهای --ard-* می‌آیند که صفحه تنظیمات تولیدشان می‌کند.
 */

/* ============================================================
   پایه
   ============================================================ */

.elementor-widget-ardal-topbar,
.elementor-widget-ardal-header,
.elementor-widget-ardal-nav,
.elementor-widget-ardal-mega-menu,
.elementor-widget-ardal-hero,
.elementor-widget-ardal-deal,
.elementor-widget-ardal-services,
.elementor-widget-ardal-categories,
.elementor-widget-ardal-products,
.elementor-widget-ardal-sale-festival,
.elementor-widget-ardal-banners,
.elementor-widget-ardal-bestsellers,
.elementor-widget-ardal-brands,
.elementor-widget-ardal-reviews,
.elementor-widget-ardal-posts,
.elementor-widget-ardal-newsletter,
.elementor-widget-ardal-footer,
.elementor-widget-ardal-mobile-nav,
.elementor-widget-ardal-product-breadcrumb,
.elementor-widget-ardal-product-gallery,
.elementor-widget-ardal-product-info,
.elementor-widget-ardal-product-buybox,
.elementor-widget-ardal-product-tabs,
.elementor-widget-ardal-product-sticky-bar {
	direction: rtl;
	font-family: var(--ard-font);
	color: var(--ard-text);
	text-align: right;
}

[class*="elementor-widget-ardal-"] *,
[class*="elementor-widget-ardal-"] *::before,
[class*="elementor-widget-ardal-"] *::after {
	box-sizing: border-box;
}

/* هیچ بخشی نباید صفحه را از عرض دستگاه پهن‌تر کند. */
[class*="elementor-widget-ardal-"] {
	max-inline-size: 100%;
	overflow-wrap: break-word;
}

/* ریست‌ها داخل :where() پیچیده شده‌اند تا specificity صفر داشته باشند.
   بدون این، سلکتور `[class*=...] button` با وزن (0,1,1) از کلاس خود کامپوننت
   (0,1,0) بالاتر می‌رفت و زمینه و رنگ دکمه‌ها و لینک‌ها را خنثی می‌کرد. */
:where([class*="elementor-widget-ardal-"] a) {
	color: inherit;
	text-decoration: none;
}

:where([class*="elementor-widget-ardal-"] ul),
:where([class*="elementor-widget-ardal-"] ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where([class*="elementor-widget-ardal-"] h2),
:where([class*="elementor-widget-ardal-"] h3),
:where([class*="elementor-widget-ardal-"] p),
:where([class*="elementor-widget-ardal-"] figure),
:where([class*="elementor-widget-ardal-"] blockquote) {
	margin: 0;
}

:where([class*="elementor-widget-ardal-"] img) {
	max-width: 100%;
	display: block;
}

:where([class*="elementor-widget-ardal-"] button) {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

.ard-wrap {
	max-width: var(--ard-container);
	margin-inline: auto;
	width: 100%;
}

/* جای‌گاه تصویر — همان الگوی راه‌راه دیزاین */
.ard-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 8px;
	font: 600 10px/1.6 ui-monospace, Menlo, monospace;
	color: var(--ard-muted);
	text-align: center;
	background: repeating-linear-gradient(45deg, var(--ard-surface) 0 9px, var(--ard-base) 9px 18px);
}

.ard-empty {
	padding: 22px;
	border: 1px dashed var(--ard-tint-blue-border);
	border-radius: var(--ard-radius);
	background: var(--ard-tint-blue);
	color: var(--ard-text-soft);
	font-size: 13px;
	text-align: center;
}

.ard-i {
	flex: none;
}

/* فقط برای صفحه‌خوان — به کلاس قالب تکیه نمی‌کنیم چون ممکن است تعریف نشده باشد. */
.ard-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* واحد پول: متن «تومان» یا نماد SVG. اندازه نسبت به قلمِ قیمت است تا در هر
   ویجت با اندازهٔ قیمت همان‌جا هماهنگ بماند. */
.ard-currency {
	font-weight: 500;
}

.ard-currency--text {
	font-size: .68em;
	color: var(--ard-text-soft);
}

/* استایل روی خود تگ SVG است، نه فقط رَپِر ویجت‌ها، چون همین نماد داخل
   span نماد واحد پولِ خود ووکامرس هم قرار می‌گیرد.
   نماد دوطبقه است و از رقم‌ها بلندتر؛ middle آن را نسبت به عدد وسط نگه می‌دارد. */
.ard-toman {
	display: inline-block;
	block-size: var(--ard-toman-size, 1.7em);
	inline-size: auto;
	vertical-align: middle;
	color: var(--ard-toman);
}

.ard-currency--icon {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.ard-currency--icon .ard-toman {
	display: block;
	vertical-align: baseline;
}

/* داخل قیمت ووکامرس، span نماد نباید فاصله یا اندازهٔ قلمِ خودش را تحمیل کند. */
.woocommerce-Price-currencySymbol:has( > .ard-toman) {
	font-size: inherit;
	line-height: 1;
}

/* در قیمت خط‌خورده، نماد هم باید مثل خود عدد کم‌رنگ دیده شود، نه پررنگ. */
del .ard-toman {
	color: inherit;
	opacity: .8;
}

.ard-stars {
	color: var(--ard-star);
	font-size: 11.5px;
	letter-spacing: 1.5px;
	white-space: nowrap;
}

/* ستارهٔ نیمه: در RTL شروعِ بصری سمت راست است، پس پُرشدن از راست است.
   رنگ باید صریح باشد نه currentColor، چون color اینجا transparent است و
   گرادیان هم همان را می‌گرفت و نیمهٔ پر نامرئی می‌شد. */
.ard-stars__half {
	background: linear-gradient(to left, var(--ard-star) 50%, var(--ard-border) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ard-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 8px;
	border-radius: calc(var(--ard-radius-sm) / 1.6);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--ard-base);
	white-space: nowrap;
}

.ard-badge--sale {
	background: var(--ard-sale);
}

.ard-badge--rank {
	background: var(--ard-primary-dark);
}

.ard-progress {
	block-size: 6px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--ard-primary-dark) 10%, var(--ard-surface));
	overflow: hidden;
}

.ard-progress > span {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ard-accent), var(--ard-accent-dark));
}

/* دکمه‌های عمومی */
.ard-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: calc(var(--ard-radius-sm) + 4px);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.ard-btn--accent {
	background: var(--ard-accent);
	color: var(--ard-accent-ink);
}

.ard-btn--accent:hover {
	background: var(--ard-accent-hover);
}

.ard-btn--primary {
	background: var(--ard-primary);
	color: var(--ard-base);
}

.ard-btn--primary:hover {
	background: var(--ard-primary-hover);
}

.ard-btn--ghost {
	border: 1.5px solid rgba(255, 255, 255, .5);
	color: var(--ard-base);
	font-weight: 700;
}

.ard-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
}

/* ============================================================
   عنوان بخش
   ============================================================ */

.ard-shead {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 18px;
}

.ard-shead--center {
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.ard-shead__rule {
	inline-size: 5px;
	block-size: 22px;
	flex: none;
	border-radius: 3px;
}

.ard-shead__rule--accent {
	background: var(--ard-accent);
}

.ard-shead__rule--primary {
	background: var(--ard-primary);
}

.ard-shead__title {
	font-size: 20px;
	font-weight: 900;
	line-height: 1.5;
	color: var(--ard-text);
}

.ard-shead--center .ard-shead__title {
	font-size: 24px;
}

.ard-shead__sub {
	margin-block-start: 6px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ard-text-soft);
}

.ard-shead__more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-inline-start: auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ard-primary);
	white-space: nowrap;
}

.ard-shead__more:hover {
	color: var(--ard-primary-hover);
}

/* ============================================================
   نوار اعلان بالا
   ============================================================ */

.ard-topbar {
	font-size: 12.5px;
	line-height: 1.6;
}

.ard-topbar--dark {
	background: var(--ard-primary-dark);
	color: var(--ard-on-dark);
}

.ard-topbar--light {
	background: color-mix(in srgb, var(--ard-surface) 70%, var(--ard-base));
	color: var(--ard-text-soft);
	border-block-end: 1px solid var(--ard-border-soft);
}

.ard-topbar__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-block-size: 34px;
	padding-inline: 16px;
}

.ard-topbar--dark .ard-topbar__inner {
	justify-content: center;
}

.ard-topbar--light .ard-topbar__inner {
	justify-content: space-between;
	min-block-size: 36px;
}

.ard-topbar__list {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.ard-topbar--dark .ard-topbar__list {
	gap: 12px;
	justify-content: center;
}

.ard-topbar__sep {
	opacity: .4;
}

.ard-topbar__hl {
	font-weight: 700;
	color: var(--ard-accent-deep);
	white-space: nowrap;
}

a.ard-topbar__item:hover {
	text-decoration: underline;
}

/* ============================================================
   هدر
   ============================================================ */

.ard-header {
	background: var(--ard-base);
	border-block-end: 1px solid var(--ard-border-soft);
}

.ard-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px;
}

.ard-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	inline-size: 26px;
	block-size: 26px;
	flex: none;
	padding: 0;
}

.ard-header__burger span {
	display: block;
	block-size: 2px;
	border-radius: 2px;
	background: var(--ard-text-body);
}

.ard-header__burger span:last-child {
	inline-size: 16px;
}

.ard-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.ard-header__logo img {
	inline-size: 52px;
	block-size: 52px;
	object-fit: contain;
}

.ard-header__brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.25;
}

.ard-header__name {
	font-size: 19px;
	font-weight: 900;
	color: var(--ard-primary-dark);
}

.ard-header__tagline {
	font-size: 11px;
	font-weight: 400;
	color: var(--ard-text-soft);
}

.ard-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	min-inline-size: 0;
	block-size: 46px;
	padding-inline: 14px;
	border: 1px solid color-mix(in srgb, var(--ard-border) 70%, var(--ard-muted));
	border-radius: calc(var(--ard-radius-sm) + 5px);
	background: var(--ard-surface);
	color: var(--ard-muted);
	transition: border-color .2s, background .2s;
}

.ard-search:focus-within {
	border-color: var(--ard-tint-blue-border);
	background: var(--ard-base);
}

.ard-search__input {
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: transparent;
	outline: none;
	font: inherit;
	font-size: 13.5px;
	color: var(--ard-text);
}

.ard-search__input::placeholder {
	color: var(--ard-muted);
}

.ard-search__btn {
	flex: none;
	padding: 7px 16px;
	border-radius: calc(var(--ard-radius-sm) / 1.4);
	background: var(--ard-primary);
	color: var(--ard-base);
	font-size: 12.5px;
	font-weight: 700;
	transition: background .2s;
}

.ard-search__btn:hover {
	background: var(--ard-primary-hover);
}

.ard-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	font-size: 13px;
	color: var(--ard-text-body);
}

.ard-header__account {
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.ard-header__account:hover {
	color: var(--ard-primary);
}

.ard-header__cart {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--ard-tint-green-border);
	border-radius: calc(var(--ard-radius-sm) + 1px);
	background: var(--ard-tint-green);
	color: var(--ard-accent-deep);
	font-weight: 700;
	white-space: nowrap;
	transition: background .2s;
}

.ard-header__cart:hover {
	background: color-mix(in srgb, var(--ard-tint-green) 80%, var(--ard-accent));
}

.ard-header__cart-count {
	min-inline-size: 20px;
	padding: 1px 6px;
	border-radius: 11px;
	background: var(--ard-accent);
	color: var(--ard-accent-ink);
	font-size: 11.5px;
	font-weight: 900;
	text-align: center;
}

/* ============================================================
   منو
   ============================================================ */

.ard-nav--bar {
	background: var(--ard-base);
	border-block-end: 1px solid var(--ard-border-soft);
}

.ard-nav__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	min-block-size: 50px;
	padding-inline: 16px;
	font-size: 13.5px;
	color: var(--ard-text-body);
}

.ard-nav__mega {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 9px 16px;
	border-radius: calc(var(--ard-radius-sm) / 1.25);
	background: var(--ard-primary);
	color: var(--ard-base);
	font-weight: 700;
	transition: background .2s;
}

.ard-nav__mega:hover {
	background: var(--ard-primary-hover);
}

.ard-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	min-inline-size: 0;
}

.ard-nav__item {
	white-space: nowrap;
	transition: color .2s;
}

.ard-nav__item:hover {
	color: var(--ard-primary);
}

.ard-nav__item--current {
	font-weight: 700;
	color: var(--ard-primary-dark);
}

.ard-nav--plain .ard-nav__item--current {
	color: var(--ard-primary);
	border-block-end: 2.5px solid var(--ard-accent);
	padding-block-end: 4px;
}

.ard-nav__item--sale {
	font-weight: 700;
	color: var(--ard-sale);
}

.ard-nav--plain .ard-nav__inner {
	font-size: 14px;
	font-weight: 600;
	min-block-size: auto;
	padding-block: 8px;
}

/* ============================================================
   هیرو
   ============================================================ */

.ard-hero {
	position: relative;
	border-radius: var(--ard-radius-xl);
	overflow: hidden;
}

.ard-hero--gradient {
	background: var(--ard-hero-gradient);
	color: var(--ard-base);
}

.ard-hero--gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 12px, transparent 12px 24px);
	pointer-events: none;
}

.ard-hero--soft {
	background: linear-gradient(200deg,
		color-mix(in srgb, var(--ard-tint-blue) 75%, var(--ard-base)) 0%,
		var(--ard-tint-blue) 45%,
		color-mix(in srgb, var(--ard-tint-green) 80%, var(--ard-base)) 100%);
	color: var(--ard-text);
}

.ard-hero__stage {
	position: relative;
	display: grid;
}

.ard-hero__slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 32px 44px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}

.ard-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/*
 * تصویر سمت راست.
 *
 * با کلاس انجام می‌شود نه با استایل المنتور، چون قانون تک‌ستونی موبایل پایین
 * همین فایل داخل مدیا کوئری است و استایل ویجت — که وزنش بیشتر است — آن را
 * می‌شکست و تصویر در موبایل کنار متن می‌ماند.
 */
.ard-hero--media-start .ard-hero__slide {
	flex-direction: row-reverse;
}

.ard-hero--media-start .ard-hero__dots[class] {
	right: auto;
	left: 44px;
}

.ard-hero__copy {
	position: relative;
	flex: 1;
	min-inline-size: 0;
}

.ard-hero__tag {
	display: inline-block;
	margin-block-end: 16px;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--ard-accent);
	color: var(--ard-accent-ink);
	font-size: 12px;
	font-weight: 800;
}

.ard-hero--soft .ard-hero__tag {
	background: var(--ard-base);
	border: 1px solid var(--ard-tint-green-border);
	color: var(--ard-accent-deep);
}

.ard-hero__title {
	margin-block-end: 12px;
	font-size: 40px;
	font-weight: 900;
	line-height: 1.3;
	text-wrap: pretty;
}

.ard-hero--gradient .ard-hero__title {
	color: var(--ard-base);
}

.ard-hero--soft .ard-hero__title {
	font-size: 44px;
	color: var(--ard-primary-dark);
}

.ard-hero__sub {
	max-inline-size: 440px;
	margin-block-end: 24px;
	font-size: 15.5px;
	line-height: 1.9;
}

.ard-hero--gradient .ard-hero__sub {
	color: var(--ard-on-dark);
}

.ard-hero--soft .ard-hero__sub {
	color: var(--ard-text-soft);
	line-height: 2;
}

.ard-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ard-hero--soft .ard-btn--accent {
	background: var(--ard-primary);
	color: var(--ard-base);
}

.ard-hero--soft .ard-btn--accent:hover {
	background: var(--ard-primary-hover);
}

.ard-hero--soft .ard-btn--ghost {
	border-color: var(--ard-tint-blue-border);
	color: var(--ard-primary-dark);
}

.ard-hero--soft .ard-btn--ghost:hover {
	background: var(--ard-tint-blue);
}

.ard-hero__media {
	position: relative;
	flex: none;
	inline-size: 430px;
	max-inline-size: 45%;
	block-size: 330px;
	border-radius: var(--ard-radius-lg);
	overflow: hidden;
}

.ard-hero--gradient .ard-hero__media .ard-ph {
	color: var(--ard-on-dark);
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 9px, rgba(255, 255, 255, .06) 9px 18px);
}

.ard-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-hero__dots[class] {
	position: absolute;
	bottom: 18px;
	right: 44px;
	display: flex;
	gap: 8px;
	z-index: 2;
}

/* [class] برای بالاتر ماندن از استایل سراسری دکمهٔ قالب — توضیحش پایین‌تر
   کنار نقطه‌های دسته‌بندی آمده. */
.ard-hero__dot[class] {
	inline-size: 8px;
	block-size: 8px;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: rgba(255, 255, 255, .45);
	font: inherit;
	transition: inline-size .3s, background .3s;
}

.ard-hero__dot.is-active[class] {
	inline-size: 28px;
	background: var(--ard-accent);
}

.ard-hero--soft .ard-hero__dot[class] {
	background: color-mix(in srgb, var(--ard-primary) 25%, var(--ard-base));
}

.ard-hero--soft .ard-hero__dot.is-active[class] {
	background: var(--ard-primary);
}

.ard-hero__arrow[class] {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	color: var(--ard-base);
	font: inherit;
	line-height: 1;
	backdrop-filter: blur(4px);
	transition: background .2s;
}

.ard-hero__arrow[class]:hover {
	background: rgba(255, 255, 255, .38);
}

.ard-hero--soft .ard-hero__arrow[class] {
	background: var(--ard-base);
	color: var(--ard-primary-dark);
	box-shadow: 0 4px 14px rgba(var(--ard-primary-dark-rgb), .12);
}

.ard-hero__arrow--prev[class] {
	right: 14px;
}

.ard-hero__arrow--next[class] {
	left: 14px;
}

/* ============================================================
   پیشنهاد ویژه
   ============================================================ */

.ard-deal {
	--ard-deal-pad: 14px;
}

.ard-deal--card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--ard-deal-pad);
	border: 1.5px solid var(--ard-tint-green-border);
	border-radius: var(--ard-radius-xl);
	background: linear-gradient(180deg, color-mix(in srgb, var(--ard-tint-green) 55%, var(--ard-base)), var(--ard-base));
}

/* هم‌ارتفاع با ستون کناری (مثلاً اسلایدر): کروسل فضای باقی‌مانده را می‌گیرد
   و تصویر داخل اسلاید کشیده می‌شود، پس باکس هیچ‌وقت از ستون بلندتر نمی‌شود. */
.ard-deal--stretch {
	block-size: 100%;
}

/* زنجیرهٔ ارتفاع از ستون تا خود باکس. با فلکس انجام می‌شود نه درصد، چون wrapperهای
   المنتور ارتفاع auto دارند و درصد روی آن‌ها resolve نمی‌شود.
   کلاس host همیشه روی wrapper هست؛ تا وقتی ard-deal--stretch نباشد این قواعد
   ارتفاعی را تغییر نمی‌دهند و باکس ارتفاع طبیعی خودش را نگه می‌دارد. */
.ard-deal-host {
	display: flex;
	flex-direction: column;
}

.ard-deal-host > .elementor-widget-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-block-size: 0;
}

.ard-deal-host .ard-deal--stretch {
	flex: 1;
	min-block-size: 0;
}

.ard-deal--bar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--ard-deal-pad) calc(var(--ard-deal-pad) + 8px);
	border-radius: var(--ard-radius-xl);
	background: var(--ard-base);
	box-shadow: 0 12px 34px rgba(var(--ard-primary-dark-rgb), .12);
}

.ard-deal__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.ard-deal__label {
	font-size: 14.5px;
	font-weight: 900;
	color: var(--ard-accent-deep);
}

.ard-deal--bar .ard-deal__label {
	color: var(--ard-text);
}

.ard-deal__meta {
	font-size: 11px;
	color: var(--ard-text-soft);
}

.ard-deal__nav {
	display: flex;
	gap: 5px;
	margin-inline-start: auto;
}

.ard-deal__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	padding: 0;
	border: 1px solid var(--ard-tint-green-border);
	border-radius: 50%;
	background: var(--ard-base);
	color: var(--ard-accent-deep);
	transition: background .2s, border-color .2s;
}

.ard-deal__arrow:hover {
	background: var(--ard-tint-green);
	border-color: var(--ard-accent);
}

.ard-deal--bar .ard-deal__arrow {
	border-color: var(--ard-border);
	color: var(--ard-primary);
}

/* کروسل */
.ard-deal__carousel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-block-size: 0;
}

.ard-deal__viewport {
	--ard-per: 1;
	--ard-gap: 12px;

	display: flex;
	gap: var(--ard-gap);
	flex: 1;
	min-block-size: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.ard-deal__viewport::-webkit-scrollbar {
	display: none;
}

.ard-deal__item {
	flex: 0 0 calc((100% - (var(--ard-per) - 1) * var(--ard-gap)) / var(--ard-per));
	min-inline-size: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ard-deal--bar .ard-deal__item {
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.ard-deal__media {
	--ard-deal-media: 110px;

	position: relative;
	flex: 1 1 auto;
	min-block-size: var(--ard-deal-media);
	border-radius: var(--ard-radius-sm);
	overflow: hidden;
}

.ard-deal--bar .ard-deal__media {
	flex: none;
	inline-size: 92px;
	block-size: 92px;
	min-block-size: 0;
}

.ard-deal__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-deal--card .ard-deal__media .ard-ph {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg,
		color-mix(in srgb, var(--ard-tint-green) 85%, var(--ard-base)) 0 9px,
		var(--ard-base) 9px 18px);
}

.ard-deal__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: none;
}

.ard-deal--bar .ard-deal__info {
	flex: 1;
	min-inline-size: 0;
}

.ard-deal__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ard-text);
}

.ard-deal__title a:hover {
	color: var(--ard-primary);
}

.ard-deal__prices {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.ard-deal__old {
	font-size: 11.5px;
	color: var(--ard-muted);
}

.ard-deal__price {
	margin-inline-start: auto;
	font-size: 15px;
	font-weight: 900;
	color: var(--ard-primary-dark);
	white-space: nowrap;
}


.ard-deal__stock {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: none;
}

.ard-deal__stock-text {
	font-size: 10.5px;
	color: var(--ard-text-soft);
}

/* نقطه‌های کروسل */
.ard-deal__dots[class] {
	display: flex;
	justify-content: center;
	gap: 5px;
	flex: none;
}

.ard-deal__dots[class]:empty {
	display: none;
}

.ard-deal__dot[class] {
	inline-size: 6px;
	block-size: 6px;
	padding: 0;
	border-radius: 4px;
	background: color-mix(in srgb, var(--ard-accent-deep) 25%, var(--ard-base));
	transition: inline-size .25s, background .25s;
}

.ard-deal__dot[class].is-active {
	inline-size: 18px;
	background: var(--ard-accent-dark);
}

.ard-deal__clock {
	flex: none;
}

/* در حالت نوار افقی شمارنده نباید تمام عرض را بگیرد. */
.ard-deal--bar .ard-deal__clock {
	align-self: flex-start;
}

.ard-deal--bar .ard-deal__clock .ard-clock__cell {
	flex: none;
	min-inline-size: 62px;
}

/* شمارنده */
.ard-clock {
	display: flex;
	gap: 8px;
}

.ard-clock__cell {
	flex: 1;
	min-inline-size: 54px;
	padding: 8px 6px;
	border-radius: var(--ard-radius-sm);
	background: var(--ard-primary-dark);
	color: var(--ard-base);
	text-align: center;
}

.ard-clock__num {
	display: block;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ard-clock__label {
	display: block;
	margin-block-start: 2px;
	font-size: 10px;
	white-space: nowrap;
	color: color-mix(in srgb, var(--ard-on-dark) 85%, var(--ard-primary-light));
}

.ard-deal--bar .ard-clock__cell {
	background: color-mix(in srgb, var(--ard-surface) 75%, var(--ard-base));
	border: 1px solid var(--ard-border);
	color: var(--ard-primary-dark);
}

.ard-deal--bar .ard-clock__label {
	color: var(--ard-muted);
}

.ard-clock--onDark .ard-clock__cell {
	background: rgba(255, 255, 255, .14);
}

/* ============================================================
   خدمات
   ============================================================ */

.ard-services {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.ard-services--strip {
	gap: 0;
	border: 1px solid var(--ard-border-soft);
	border-radius: var(--ard-radius-xl);
	overflow: hidden;
}

.ard-service__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	block-size: 100%;
	padding: 14px 16px;
	border: 1px solid var(--ard-border);
	border-radius: var(--ard-radius-lg);
	transition: border-color .2s, background .2s;
}

.ard-services--strip .ard-service__inner {
	flex-direction: column;
	gap: 8px;
	padding: 20px 14px;
	border: 0;
	border-radius: 0;
	border-inline-start: 1px solid color-mix(in srgb, var(--ard-border-soft) 70%, var(--ard-base));
	text-align: center;
}

.ard-services--strip .ard-service:first-child .ard-service__inner {
	border-inline-start: 0;
}

a.ard-service__inner:hover {
	border-color: var(--ard-tint-blue-border);
	background: color-mix(in srgb, var(--ard-tint-blue) 45%, var(--ard-base));
}

.ard-service__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--ard-tint-blue-border);
	background: var(--ard-tint-blue);
	color: var(--ard-primary);
}

.ard-service--green .ard-service__icon {
	border-color: var(--ard-tint-green-border);
	background: var(--ard-tint-green);
	color: var(--ard-accent-dark);
}

.ard-services--strip .ard-service__icon {
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	background: var(--ard-tint-green);
	color: var(--ard-accent-dark);
}

.ard-service__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
}

.ard-service__title {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-service__sub {
	font-size: 11.5px;
	color: var(--ard-text-soft);
}

/* ============================================================
   دسته‌بندی‌ها
   ============================================================ */

.ard-cats {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 16px 12px;
}

/*
 * کشیدن با ماوس.
 *
 * کلاس را خود جاوااسکریپت می‌گذارد، پس اگر اسکریپت بالا نیامده باشد شکل
 * اشاره‌گر هم وعدهٔ الکی نمی‌دهد.
 */
.ard-drag {
	cursor: grab;
}

.ard-drag.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

/* حالت اسلایدر — همان کروسل «پیشنهاد ویژه»، با کلاس‌های خودش. */
.ard-cats-slider {
	position: relative;
}

.ard-cats--slider {
	--ard-per: 6;
	--ard-gap: 12px;

	display: flex;
	gap: var(--ard-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.ard-cats--slider::-webkit-scrollbar {
	display: none;
}

.ard-cats--slider > .ard-cat {
	flex: 0 0 calc((100% - (var(--ard-per) - 1) * var(--ard-gap)) / var(--ard-per));
	min-inline-size: 0;
	scroll-snap-align: start;
}

.ard-cats__dots[class] {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-block-start: 12px;
}

.ard-cats__dots[class]:empty {
	display: none;
}

/*
 * چرا [class] روی دکمه‌های اردال.
 *
 * قالب‌ها و «استایل سراسری» المنتور همهٔ دکمه‌های صفحه را یک‌جا رنگ می‌کنند:
 *
 *     .elementor-kit-7 button, … { background-color: …; border: …; padding: … }
 *
 * وزن آن (۰,۱,۱) است و از یک کلاسِ تنها (۰,۱,۰) بالاتر؛ پس زمینه و حاشیه و
 * پدینگِ نقطه‌ها و فلش‌های ما را می‌بلعید. `[class]` روی هر عنصرِ کلاس‌دار
 * می‌گیرد، پس چیزی از تطبیق کم نمی‌کند و فقط وزن را به (۰,۲,۰) می‌برد.
 * !important عمداً استفاده نشده تا سفارشی‌سازی کاربر ممکن بماند.
 */
.ard-cats__dot[class] {
	inline-size: 7px;
	block-size: 7px;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: color-mix(in srgb, var(--ard-primary) 25%, var(--ard-base));
	font: inherit;
	transition: inline-size .25s, background .25s;
}

.ard-cats__dot.is-active[class] {
	inline-size: 20px;
	background: var(--ard-primary);
}

/*
 * فلش‌ها بیرون از خود اسلایدر می‌نشینند چون کروسل مشترک، دکمه‌ها را در والدِ
 * ریشه‌اش می‌گردد؛ اینجا هم همان قرارداد رعایت شده.
 */
.ard-cats__arrow[class] {
	position: absolute;
	top: calc(var(--ard-cat-ring, 126px) / 2);
	translate: 0 -50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	padding: 0;
	border: 1px solid var(--ard-border);
	border-radius: 50%;
	background: var(--ard-base);
	color: var(--ard-primary-dark);
	font: inherit;
	box-shadow: 0 4px 14px rgba(var(--ard-primary-dark-rgb), .10);
	transition: background .2s, border-color .2s, color .2s;
}

.ard-cats__arrow[class]:hover {
	background: var(--ard-tint-blue);
	border-color: var(--ard-tint-blue-border);
}

.ard-cats__arrow--prev[class] {
	right: -6px;
}

.ard-cats__arrow--next[class] {
	left: -6px;
}

.ard-cat__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-align: center;
}

/*
 * حلقه: همه‌چیزش از متغیر می‌آید.
 *
 * قبلاً رنگ و حاشیه مستقیم روی .ard-cat__ring و با nth-child نوشته می‌شد؛
 * آن قانون‌ها از کنترل‌های المنتور اختصاصی‌ترند و هر تنظیمی را می‌بلعیدند.
 * حالا سبک‌ها فقط متغیر را مقداردهی می‌کنند و کنترل‌ها همان متغیر را روی
 * ریشه بازنویسی می‌کنند.
 */
/*
 * پیش‌فرض‌ها روی خودِ فهرست تعریف می‌شوند، نه روی حلقه.
 *
 * متغیری که روی همان عنصر تعریف شده باشد بر مقدارِ به‌ارث‌رسیده می‌چربد؛ اگر
 * این‌ها روی .ard-cat__ring می‌ماندند، سبک‌ها (که روی <ul> می‌نشینند) هیچ‌وقت
 * به حلقه نمی‌رسیدند و رنگ‌ها اصلاً دیده نمی‌شدند.
 */
.ard-cats {
	--ard-cat-ring-radius: 50%;
	--ard-cat-ring-bw: 0px;
	--ard-cat-ring-line: transparent;
	--ard-cat-ring-bg: transparent;
	--ard-cat-ring-pad: 0px;
}

.ard-cat__ring {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 126px;
	block-size: 126px;
	max-inline-size: 100%;
	padding: var(--ard-cat-ring-pad);
	border: var(--ard-cat-ring-bw) solid var(--ard-cat-ring-line);
	border-radius: var(--ard-cat-ring-radius);
	background: var(--ard-cat-ring-bg);
	overflow: hidden;
	transition: border-color .25s, transform .25s;
}

.ard-cats--tint {
	--ard-cat-ring-bw: 2px;
	--ard-cat-ring-line: var(--ard-tint-blue-border);
	--ard-cat-ring-bg: var(--ard-tint-blue);
	--ard-cat-ring-line-alt: var(--ard-tint-green-border);
	--ard-cat-ring-bg-alt: var(--ard-tint-green);
}

/*
 * رنگ‌بندی یک‌درمیان.
 *
 * روی خودِ .ard-cat می‌نشیند نه روی حلقه، تا فقط «مقدار متغیر» را عوض کند؛
 * این‌طور کنترلی که رنگِ یک‌درمیان را تغییر می‌دهد هم کار می‌کند.
 */
.ard-cats--alt .ard-cat:nth-child(2n) {
	--ard-cat-ring-line: var(--ard-cat-ring-line-alt, var(--ard-tint-green-border));
	--ard-cat-ring-bg: var(--ard-cat-ring-bg-alt, var(--ard-tint-green));
}

.ard-cats--tint .ard-cat__inner:hover .ard-cat__ring {
	border-color: var(--ard-cat-ring-line-hover, var(--ard-accent));
}

/* برداشتن زمینه و حاشیه، یک‌جا. */
.ard-cats-plain-yes .ard-cat__ring {
	--ard-cat-ring-bw: 0px;
	--ard-cat-ring-line: transparent;
	--ard-cat-ring-bg: transparent;
	--ard-cat-ring-pad: 0px;
}

.ard-cats-plain-yes .ard-cat__inner:hover .ard-cat__ring {
	border-color: transparent;
}

/*
 * دیسک داخلی هم باید بی‌زمینه شود.
 *
 * در سبک گرادیانی، حلقه فقط قابِ رنگی است و زمینهٔ سفیدِ پشتِ تصویر مال
 * .ard-cat__disc است. پاک‌کردنِ فقط حلقه، آن دایرهٔ سفید را سر جایش
 * می‌گذاشت و کاربر همچنان «زمینه» می‌دید.
 *
 * تصویر هم دیگر لازم نیست کوچک‌تر از دیسک بماند: آن ۹۲٪ برای این بود که
 * حلقهٔ گرادیانی از پشتش پیدا باشد.
 */
.ard-cats-plain-yes .ard-cat__disc[class] {
	background: transparent;
}

.ard-cats-plain-yes .ard-cat__disc[class] img {
	inline-size: 100%;
	block-size: 100%;
}

.ard-cats--gradient {
	--ard-cat-ring-pad: 5px;
	--ard-cat-ring-bg: linear-gradient(140deg, var(--ard-primary), var(--ard-primary-light));
}

.ard-cats--gradient .ard-cat[style*="--ard-cat-i:1"] {
	--ard-cat-ring-bg: linear-gradient(140deg, var(--ard-accent), var(--ard-accent-dark));
}

.ard-cats--gradient .ard-cat[style*="--ard-cat-i:2"] {
	--ard-cat-ring-bg: linear-gradient(140deg, var(--ard-primary-light), color-mix(in srgb, var(--ard-primary-light) 45%, var(--ard-base)));
}

.ard-cats--gradient .ard-cat__inner:hover .ard-cat__ring {
	transform: translateY(-4px);
}

.ard-cat__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	overflow: hidden;
}

.ard-cats--gradient .ard-cat__disc {
	background: var(--ard-base);
}

.ard-cat__disc img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-cats--gradient .ard-cat__disc img {
	inline-size: 92%;
	block-size: 92%;
	border-radius: 50%;
	object-fit: cover;
}

.ard-cat__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--ard-text);
}

.ard-cats--gradient .ard-cat__title {
	font-size: 13.5px;
	font-weight: 800;
}

.ard-cat__count {
	font-size: 11px;
	color: var(--ard-muted);
}

/* ============================================================
   کارت محصول و شبکه
   ============================================================ */

.ard-pgrid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

/*
 * همهٔ ردیف‌ها هم‌ارتفاع می‌شوند، نه فقط کارت‌های یک ردیف. بدون این، هر ردیف
 * به قد بلندترین کارتِ خودش درمی‌آمد و کارتی که امتیاز یا قیمتِ قبل نداشت،
 * ردیفش کوتاه‌تر از بقیه می‌افتاد.
 */
.ard-pgrid--even {
	grid-auto-rows: 1fr;
}

.ard-pgrid__cell {
	min-inline-size: 0;
}

.ard-pgrid__cell.is-hidden {
	display: none;
}

.ard-pcard {
	--ard-fab: 46px;

	/*
	 * سقف خط عنوان. روی خودِ کارت تعریف می‌شود نه روی عنوان: کنترل المنتور هم
	 * همین‌جا می‌نویسد و اگر پیش‌فرض روی عنصر پایین‌تری بود، مقدارِ ارث‌رسیده
	 * را می‌پوشاند و تنظیم بی‌اثر می‌شد.
	 */
	--ard-pcard-lines: 2;

	position: relative;
	block-size: 100%;
	border-radius: var(--ard-radius);
	transition: box-shadow .25s, transform .25s;
}

/*
 * کارت ناموجود — همان قاعدهٔ کارت آرشیو.
 *
 * grayscale روی کل کارت می‌نشیند تا نشان تخفیف و دکمهٔ سبز هم خاموش شوند؛
 * تخفیفِ چیزی که نمی‌شود خرید، فقط کاربر را سر کار می‌گذارد.
 */
.ard-pcard--oos {
	filter: grayscale(0.85);
	opacity: 0.72;
}

.ard-pcard--oos:hover {
	filter: grayscale(0.6);
	opacity: 0.85;
}

.ard-pcard--oos .ard-pcard__fab,
.ard-pcard--oos .ard-pcard__btn {
	pointer-events: none;
}

.ard-pcard__box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	block-size: 100%;
	transition: border-color .25s;
}

.ard-pcard--framed .ard-pcard__box {
	padding: 12px;
	border: 1px solid var(--ard-border);
	border-radius: var(--ard-radius);
	background: var(--ard-base);
}

/* گوشهٔ پایین-چپ برای دکمهٔ گرد بریده می‌شود.
   SVG فقط به‌اندازهٔ --ard-notch در همان گوشه پین شده و دو لایهٔ مستطیلی بقیهٔ
   کارت را پوشش می‌دهند؛ این‌طور شکل بریدگی مستقل از ابعاد کارت ثابت می‌ماند. */
/* --ard-notch روی خود کارت تعریف می‌شود تا هم ماسک جعبه و هم موقعیت دکمهٔ گرد
   از یک عدد پیروی کنند. مرکز حفره در SVG روی ۱۵٪ ضلع است. */
.ard-pcard--notch {
	--ard-notch: 190px;

	/* سایهٔ بیرونی روی خودِ عنصر ماسک‌شده کار نمی‌کند: ترتیب رندر
	   filter → clip → mask است، پس ماسک سایه را می‌بُرد. سایه هم اگر روی
	   article به‌صورت box-shadow بیاید مستطیل می‌ماند و بریدگی را نادیده
	   می‌گیرد. drop-shadow روی والد بعد از ماسکِ فرزند اعمال می‌شود و کانال
	   آلفای واقعی — یعنی همان خط برش — را دنبال می‌کند.
	   مقدار شفافِ حالت عادی برای این است که ترنزیشن پرش نکند. */
	filter: drop-shadow(0 0 0 rgba(var(--ard-primary-dark-rgb), 0));
	transition: filter .25s, transform .25s;
}

.ard-pcard--notch .ard-pcard__box {
	--ard-notch-svg: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M0%2C0H100A0%2C0%200%2C0%2C1%20100%2C0V100A0%2C0%200%2C0%2C1%20100%2C100H45A15%2C15%200%2C0%2C1%2030%2C85V85A15%2C15%200%2C0%2C0%2015%2C70H15A15%2C15%200%2C0%2C1%200%2C55V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E');

	-webkit-mask:
		var(--ard-notch-svg) 0 100% / var(--ard-notch) var(--ard-notch) no-repeat,
		linear-gradient(#000 0 0) 100% 100% / max(0px, 100% - var(--ard-notch)) var(--ard-notch) no-repeat,
		linear-gradient(#000 0 0) 0 0 / 100% max(0px, 100% - var(--ard-notch)) no-repeat;
	mask:
		var(--ard-notch-svg) 0 100% / var(--ard-notch) var(--ard-notch) no-repeat,
		linear-gradient(#000 0 0) 100% 100% / max(0px, 100% - var(--ard-notch)) var(--ard-notch) no-repeat,
		linear-gradient(#000 0 0) 0 0 / 100% max(0px, 100% - var(--ard-notch)) no-repeat;
}

.ard-pcard--framed.ard-pcard:not(.ard-pcard--notch):hover {
	box-shadow: 0 12px 30px rgba(var(--ard-primary-dark-rgb), .16);
	transform: translateY(-3px);
}

.ard-pcard--notch:hover {
	transform: translateY(-3px);
	filter:
		drop-shadow(0 10px 14px rgba(var(--ard-primary-dark-rgb), .16))
		drop-shadow(0 2px 4px rgba(var(--ard-primary-dark-rgb), .08));
}

.ard-pcard--framed.ard-pcard:hover .ard-pcard__box {
	border-color: var(--ard-tint-blue-border);
}

.ard-pcard--plain.ard-pcard:hover {
	transform: translateY(-3px);
}

.ard-pcard__media {
	position: relative;
	block-size: var(--ard-card-img-h, 168px);
	border-radius: var(--ard-radius-sm);
	overflow: hidden;
}

.ard-pcard--plain .ard-pcard__media {
	block-size: 190px;
	border-radius: var(--ard-radius-xl);
	background: var(--ard-surface-alt);
}

.ard-pcard__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-pcard--plain .ard-pcard__media .ard-badge--sale {
	background: var(--ard-base);
	color: var(--ard-sale);
	border-radius: 20px;
	font-weight: 900;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.ard-pcard__title {
	/*
	 * بدون ارتفاع رزرو.
	 *
	 * قبلاً به اندازهٔ سقفِ خط (پیش‌فرض دو خط) جا می‌گرفت تا قیمت‌ها هم‌تراز
	 * بمانند؛ ولی این کار را از قبل `margin-block-start: auto`ِ بلوک قیمت و
	 * ردیف‌های هم‌ارتفاع گرید انجام می‌دهند. نتیجهٔ آن رزرو فقط این بود که
	 * کارتِ «توپ» همان‌قدر بلند شود که کارتِ یک عنوان دوخطی.
	 */
	font-size: 13px;
	font-weight: 700;
	line-height: 1.75;
	color: var(--ard-text);
}

/*
 * کوتاه‌کردن روی همین span است نه روی عنوان یا لینک: در حالت «کل کارت لینک»
 * لینکِ عنوان یک لایهٔ ::after روی کل کارت می‌کشد و overflow روی لینک آن را
 * می‌بُرد. این span خواهرِ آن لایه است، پس چیزی را نمی‌برد.
 */
.ard-pcard__title-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ard-pcard-lines, 2);
	line-clamp: var(--ard-pcard-lines, 2);
	overflow: hidden;
	overflow-wrap: anywhere;
}

/*
 * لینک عنوان رنگ و خطش را از کارت می‌گیرد، نه از پوسته.
 *
 * قبلاً روی پوسته‌هایی که a را آبیِ زیرخط‌دار می‌کنند، عنوان کارت هم همان شکل
 * را می‌گرفت. فقط حالت hover تعریف شده بود، یعنی وضعیت عادی دست پوسته بود.
 */
.ard-pcard__title a {
	color: inherit;
	text-decoration: none;
}

.ard-pcard__title a:hover {
	color: var(--ard-primary);
	text-decoration: none;
}

/* «کل کارت لینک»: به‌جای پیچیدن کارت در تگ a (که با دکمهٔ داخلش a تودرتو و
   نامعتبر می‌شد)، لینکِ عنوان با یک لایهٔ نامرئی روی کل کارت کشیده می‌شود.
   دکمه‌ها با z-index بالاتر روی همین لایه می‌نشینند تا کلیکشان جدا بماند. */
.ard-pcard--boxlink .ard-pcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* دکمهٔ گرد از قبل absolute است؛ فقط باید بالای لایه بنشیند. */
.ard-pcard--boxlink .ard-pcard__fab {
	z-index: 2;
}

/* دکمهٔ متنی در جریان عادی است، پس برای z-index به position نیاز دارد. */
.ard-pcard--boxlink .ard-pcard__btn {
	position: relative;
	z-index: 2;
}

.ard-pcard--boxlink .ard-pcard__box {
	cursor: pointer;
}

.ard-pcard__rate {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--ard-muted);
}

/*
 * سطر امتیازِ خالی اصلاً جا نمی‌گیرد.
 *
 * رزرو فقط وقتی معنا دارد که در همان شبکه کارتِ امتیازداری هم باشد؛ آن را
 * ویجت تصمیم می‌گیرد و اگر لازم نبود این سطر را اصلاً چاپ نمی‌کند. این قانون
 * تورِ ایمنی است برای کارت‌هایی که از مسیر دیگری ساخته می‌شوند.
 */
.ard-pcard__rate:empty {
	display: none;
}

.ard-pcard__prices {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	margin-block-start: auto;
	padding-block-end: 6px;
}

/* جای خالیِ قیمتِ قبل؛ نه دیده می‌شود نه صفحه‌خوان می‌خواندش. */
.ard-pcard__old--empty {
	visibility: hidden;
}

.ard-pcard--plain .ard-pcard__prices {
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.ard-pcard__old {
	font-size: 11.5px;
	color: var(--ard-muted);
}

.ard-pcard__price {
	font-size: 15.5px;
	font-weight: 900;
	color: var(--ard-primary-dark);
	white-space: nowrap;
}


.ard-pcard__btn {
	display: block;
	padding: 10px 0;
	border: 1.5px solid var(--ard-tint-green-border);
	border-radius: var(--ard-radius-pill);
	color: var(--ard-accent-deep);
	font-size: 13px;
	font-weight: 800;
	text-align: center;
	transition: background .2s, border-color .2s;
}

.ard-pcard__btn:hover {
	background: var(--ard-tint-green);
	border-color: var(--ard-accent);
}

.ard-pcard__fab {
	position: absolute;
	bottom: -6px;
	left: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--ard-fab);
	block-size: var(--ard-fab);
	border-radius: 50%;
	background: var(--ard-accent);
	color: var(--ard-accent-ink);
	font-size: calc(var(--ard-fab) / 2.1);
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 6px 16px rgba(var(--ard-accent-dark-rgb), .4);
	transition: transform .2s, background .2s;
}

.ard-pcard__fab:hover {
	transform: scale(1.08);
	background: var(--ard-accent-hover);
}

/* مرکز حفره روی ۱۵٪ ضلع بریدگی است؛ دکمه دقیقاً همان‌جا می‌نشیند. */
.ard-pcard--notch .ard-pcard__fab {
	left: calc(var(--ard-notch) * .15 - var(--ard-fab) / 2);
	bottom: calc(var(--ard-notch) * .15 - var(--ard-fab) / 2);
}

/* کارت تکی (ویجت حلقه): بدون شبکه، کل عرض ستون را می‌گیرد. */
.ard-pcard-solo {
	display: block;
	block-size: 100%;
}

.ard-pcard-solo .ard-pcard {
	block-size: 100%;
}

/* تب‌های فیلتر */
.ard-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-end: 18px;
	padding-block-end: 12px;
	border-block-end: 1px solid var(--ard-border-soft);
	font-size: 13px;
}

.ard-tabs__btn {
	padding: 7px 14px;
	border-radius: calc(var(--ard-radius-sm) / 1.4);
	color: var(--ard-text-soft);
	transition: background .2s, color .2s;
}

.ard-tabs__btn:hover {
	color: var(--ard-primary);
}

.ard-tabs__btn.is-active {
	background: var(--ard-primary);
	color: var(--ard-base);
	font-weight: 700;
}

/* ============================================================
   جشنواره حراج
   ============================================================ */

.ard-fest--boxed {
	position: relative;
	border-radius: calc(var(--ard-radius-xl) + 2px);
	background: var(--ard-primary-dark);
	overflow: hidden;
}

.ard-fest--wide {
	position: relative;
	background: linear-gradient(90deg, var(--ard-primary-dark), var(--ard-primary) 60%, var(--ard-primary-light));
	overflow: hidden;
}

.ard-fest::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px);
	pointer-events: none;
}

.ard-fest__inner {
	position: relative;
	padding: 24px 28px;
}

.ard-fest--wide .ard-fest__inner {
	max-inline-size: var(--ard-container);
	margin-inline: auto;
	padding: 30px 40px;
}

.ard-fest__head {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-block-end: 18px;
}

.ard-fest__eyebrow {
	display: block;
	margin-block-end: 6px;
	font-size: 13px;
	color: color-mix(in srgb, var(--ard-on-dark) 80%, var(--ard-primary-light));
}

.ard-fest__title {
	font-size: 22px;
	font-weight: 900;
	color: var(--ard-base);
}

.ard-fest--wide .ard-fest__title {
	font-size: 28px;
}

.ard-fest__badge {
	flex: none;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--ard-accent);
	color: var(--ard-accent-ink);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.ard-fest__timer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
}

.ard-fest__timer-label {
	font-size: 12.5px;
	color: color-mix(in srgb, var(--ard-on-dark) 80%, var(--ard-primary-light));
	white-space: nowrap;
}

.ard-fest--wide .ard-clock__cell {
	background: var(--ard-base);
	color: var(--ard-primary-dark);
}

.ard-fest--wide .ard-clock__label {
	color: var(--ard-text-soft);
}

.ard-fest__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.ard-fest__card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border-radius: var(--ard-radius-lg);
	background: var(--ard-base);
}

.ard-fest--wide .ard-fest__card {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 14px;
	border-radius: var(--ard-radius-xl);
}

.ard-fest__media {
	position: relative;
	flex: none;
	inline-size: 92px;
	block-size: 92px;
	border-radius: var(--ard-radius-sm);
	overflow: hidden;
}

.ard-fest--wide .ard-fest__media {
	inline-size: auto;
	block-size: 130px;
}

.ard-fest__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-fest__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-inline-size: 0;
}

.ard-fest__name {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ard-text);
}

.ard-fest--wide .ard-fest__name {
	min-block-size: 44px;
	font-size: 13px;
}

.ard-fest__name a:hover {
	color: var(--ard-primary);
}

.ard-fest__prices {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ard-fest--wide .ard-fest__prices {
	justify-content: space-between;
}

.ard-fest__prices .ard-badge {
	position: static;
}

.ard-fest__prices del {
	font-size: 11px;
	color: var(--ard-muted);
}

.ard-fest__price {
	font-size: 14.5px;
	font-weight: 900;
	color: var(--ard-primary-dark);
	white-space: nowrap;
}


.ard-fest .ard-empty {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .25);
	color: var(--ard-on-dark);
}

/* ============================================================
   بنرها
   ============================================================ */

.ard-banners {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ard-banner {
	display: flex;
	align-items: center;
	gap: 20px;
	grid-column: span var(--ard-banner-span, 1);
	padding: 22px 26px;
	border: 1px solid var(--ard-tint-blue-border);
	border-radius: var(--ard-radius-xl);
	background: linear-gradient(120deg, var(--ard-tint-blue), color-mix(in srgb, var(--ard-tint-blue) 30%, var(--ard-base)));
}

.ard-banner--green {
	border-color: var(--ard-tint-green-border);
	background: linear-gradient(120deg, color-mix(in srgb, var(--ard-tint-green) 80%, var(--ard-base)), color-mix(in srgb, var(--ard-tint-green) 25%, var(--ard-base)));
}

.ard-banner--neutral {
	border-color: var(--ard-border);
	background: var(--ard-surface);
}

.ard-banner__copy {
	flex: 1;
	min-inline-size: 0;
}

.ard-banner__eyebrow {
	display: block;
	margin-block-end: 8px;
	font-size: 12.5px;
	color: var(--ard-text-soft);
}

.ard-banner__title {
	margin-block-end: 8px;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.5;
	color: var(--ard-primary-dark);
}

.ard-banner--green .ard-banner__title {
	color: var(--ard-accent-deep);
}

.ard-banner__text {
	margin-block-end: 14px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--ard-text-soft);
}

.ard-banner__btn {
	display: inline-block;
	padding: 9px 18px;
	border-radius: calc(var(--ard-radius-sm) / 1.25);
	background: var(--ard-primary);
	color: var(--ard-base);
	font-size: 12.5px;
	font-weight: 700;
	transition: background .2s;
}

.ard-banner__btn:hover {
	background: var(--ard-primary-hover);
}

.ard-banner--green .ard-banner__btn {
	background: var(--ard-accent-dark);
}

.ard-banner--green .ard-banner__btn:hover {
	background: var(--ard-accent-deep);
}

.ard-banner__media {
	flex: none;
	inline-size: 180px;
	block-size: 126px;
	border-radius: var(--ard-radius-sm);
	overflow: hidden;
}

.ard-banner__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-banner--blue .ard-banner__media .ard-ph {
	background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ard-tint-blue) 70%, var(--ard-primary-light)) 0 9px, var(--ard-tint-blue) 9px 18px);
	color: var(--ard-text-soft);
}

.ard-banner--green .ard-banner__media .ard-ph {
	background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ard-tint-green) 60%, var(--ard-accent)) 0 9px, var(--ard-tint-green) 9px 18px);
	color: var(--ard-text-soft);
}

/* ============================================================
   پرفروش‌ترین‌ها
   ============================================================ */

.ard-best {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.ard-best--scroll {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-block-end: 4px;
}

.ard-best--scroll .ard-best__card {
	flex: none;
	inline-size: 152px;
	scroll-snap-align: start;
}

.ard-best__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 11px;
	border-radius: var(--ard-radius);
	transition: background .2s, border-color .2s, box-shadow .2s;
}

.ard-best--framed .ard-best__card {
	border: 1px solid var(--ard-border);
	background: var(--ard-base);
}

.ard-best--framed .ard-best__card:hover {
	border-color: var(--ard-tint-green-border);
	box-shadow: 0 8px 20px rgba(var(--ard-primary-dark-rgb), .1);
}

.ard-best--soft .ard-best__card {
	gap: 9px;
	padding: 14px;
	border-radius: var(--ard-radius-xl);
	background: var(--ard-surface-alt);
}

.ard-best--soft .ard-best__card:hover {
	background: var(--ard-tint-green);
}

.ard-best__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.ard-best__rank {
	padding: 3px 9px;
	border-radius: 20px;
	background: var(--ard-tint-blue);
	color: var(--ard-primary);
	font-size: 11px;
	font-weight: 900;
}

.ard-best__media {
	position: relative;
	block-size: 132px;
	border-radius: var(--ard-radius-sm);
	overflow: hidden;
}

.ard-best--soft .ard-best__media {
	background: var(--ard-base);
}

.ard-best--soft .ard-best__media .ard-ph {
	background: var(--ard-base);
}

.ard-best__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-best__title {
	min-block-size: 42px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ard-text);
}

.ard-best__title a:hover {
	color: var(--ard-primary);
}

.ard-best__price {
	margin-block-start: auto;
	font-size: 14px;
	font-weight: 900;
	color: var(--ard-primary-dark);
}


/* ============================================================
   برندها
   ============================================================ */

.ard-brands__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-block-end: 16px;
}

.ard-brands__title {
	font-size: 16px;
	font-weight: 900;
	color: var(--ard-text);
	white-space: nowrap;
}

.ard-brands__line {
	flex: 1;
	block-size: 1px;
	background: var(--ard-border-soft);
}

.ard-brands__more {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ard-primary);
	white-space: nowrap;
}

.ard-brands__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 12px;
}

.ard-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 72px;
	padding: 10px;
	transition: border-color .2s, background .2s, color .2s;
}

.ard-brands--box .ard-brand {
	border: 1px solid var(--ard-border-soft);
	border-radius: var(--ard-radius-sm);
}

.ard-brands--box a.ard-brand:hover {
	border-color: var(--ard-tint-blue-border);
	color: var(--ard-primary);
}

.ard-brands--pill .ard-brand {
	border-radius: 40px;
	background: var(--ard-surface-alt);
}

.ard-brands--pill a.ard-brand:hover {
	background: var(--ard-tint-blue);
	color: var(--ard-primary);
}

.ard-brand img {
	max-block-size: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .75;
	transition: filter .2s, opacity .2s;
}

a.ard-brand:hover img {
	filter: none;
	opacity: 1;
}

.ard-brand__name {
	font: 600 11px ui-monospace, Menlo, monospace;
	color: color-mix(in srgb, var(--ard-muted) 80%, var(--ard-base));
}

/* ============================================================
   نظرها
   ============================================================ */

.ard-reviews {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 12px;
}

.ard-review {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ard-reviews--row .ard-review {
	padding: 14px;
	border: 1px solid var(--ard-border);
	border-radius: var(--ard-radius-lg);
	background: var(--ard-base);
}

.ard-reviews--stack .ard-review {
	padding: 20px;
	border-radius: var(--ard-radius-xl);
	background: var(--ard-surface-alt);
}

.ard-reviews--stack .ard-stars {
	font-size: 13px;
	letter-spacing: 2px;
}

.ard-review__person {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ard-reviews--stack .ard-review__person {
	align-items: center;
}

.ard-review__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	border: 1px solid var(--ard-tint-blue-border);
	border-radius: 50%;
	background: var(--ard-tint-blue);
	overflow: hidden;
}

.ard-review__avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-review__meta {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-inline-size: 0;
}

.ard-review__name-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ard-review__name {
	font-size: 13px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-review__note {
	font-size: 11px;
	color: var(--ard-muted);
}

.ard-review__text {
	font-size: 12.5px;
	line-height: 2;
	color: var(--ard-text-soft);
}

.ard-reviews--stack .ard-review__text {
	font-size: 13px;
	line-height: 2.1;
	color: var(--ard-text-body);
}

/* ============================================================
   وبلاگ
   ============================================================ */

.ard-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.ard-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ard-posts--card .ard-post {
	border: 1px solid var(--ard-border);
	border-radius: var(--ard-radius-lg);
	background: var(--ard-base);
	transition: box-shadow .2s, border-color .2s;
}

.ard-posts--card .ard-post:hover {
	border-color: var(--ard-tint-blue-border);
	box-shadow: 0 8px 20px rgba(var(--ard-primary-dark-rgb), .08);
}

.ard-posts--row .ard-post {
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.ard-post__media {
	position: relative;
	block-size: 104px;
	overflow: hidden;
}

.ard-posts--card .ard-post__media {
	inline-size: 100%;
}

.ard-posts--row .ard-post__media {
	flex: none;
	inline-size: 132px;
	border-radius: var(--ard-radius);
}

.ard-post__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ard-post__body {
	flex: 1;
	min-inline-size: 0;
}

.ard-posts--card .ard-post__body {
	padding: 12px;
}

.ard-post__title {
	margin-block-end: 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--ard-text);
}

.ard-posts--row .ard-post__title {
	font-size: 13.5px;
	font-weight: 800;
}

.ard-post__title a:hover {
	color: var(--ard-primary);
}

.ard-post__meta {
	font-size: 11px;
	color: var(--ard-muted);
}

/* ============================================================
   خبرنامه
   ============================================================ */

.ard-news--soft {
	padding: 28px 40px;
	border-block-start: 1px solid var(--ard-border-soft);
	background: var(--ard-surface-alt);
}

.ard-news--dark {
	padding: 30px;
	border-radius: calc(var(--ard-radius-xl) + 6px);
	background: var(--ard-primary-dark);
	color: var(--ard-on-dark);
}

.ard-news__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-inline-size: var(--ard-container);
	margin-inline: auto;
}

.ard-news__copy {
	flex: 1;
	min-inline-size: 0;
}

.ard-news__title {
	margin-block-end: 6px;
	font-size: 18px;
	font-weight: 900;
	color: var(--ard-text);
}

.ard-news--dark .ard-news__title {
	font-size: 20px;
	color: var(--ard-base);
}

.ard-news__sub {
	font-size: 12.5px;
	color: var(--ard-text-soft);
}

.ard-news--dark .ard-news__sub {
	font-size: 13px;
	color: color-mix(in srgb, var(--ard-on-dark) 80%, var(--ard-primary-light));
}

.ard-news__form {
	display: flex;
	gap: 10px;
	flex: none;
}

.ard-news__input {
	inline-size: 300px;
	max-inline-size: 100%;
	block-size: 46px;
	padding-inline: 14px;
	border: 1px solid color-mix(in srgb, var(--ard-border) 60%, var(--ard-muted));
	border-radius: calc(var(--ard-radius-sm) + 4px);
	background: var(--ard-base);
	font: inherit;
	font-size: 13px;
	color: var(--ard-text);
	outline: none;
	transition: border-color .2s;
}

.ard-news--dark .ard-news__input {
	inline-size: 320px;
	block-size: 50px;
	border: 0;
	border-radius: 25px;
}

.ard-news__input:focus {
	border-color: var(--ard-primary);
}

.ard-news__input::placeholder {
	color: var(--ard-muted);
}

.ard-news__btn {
	flex: none;
	block-size: 46px;
	padding-inline: 26px;
	border-radius: calc(var(--ard-radius-sm) + 4px);
	background: var(--ard-primary);
	color: var(--ard-base);
	font-size: 13.5px;
	font-weight: 800;
	transition: background .2s;
}

.ard-news__btn:hover {
	background: var(--ard-primary-hover);
}

.ard-news--dark .ard-news__btn {
	block-size: 50px;
	padding-inline: 30px;
	border-radius: 25px;
	background: var(--ard-accent);
	color: var(--ard-accent-ink);
	font-size: 14px;
	font-weight: 900;
}

.ard-news--dark .ard-news__btn:hover {
	background: var(--ard-accent-hover);
}

.ard-news__note {
	max-inline-size: var(--ard-container);
	margin: 10px auto 0;
	font-size: 11.5px;
	color: var(--ard-muted);
}

/* ============================================================
   فوتر
   ============================================================ */

.ard-footer--dark {
	padding: 30px 40px 18px;
	background: var(--ard-primary-dark);
	color: var(--ard-on-dark);
}

.ard-footer--light {
	margin-block-start: 20px;
	padding: 30px 40px 20px;
	border-block-start: 1px solid var(--ard-border-soft);
	color: var(--ard-text-soft);
}

.ard-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 26px;
	max-inline-size: var(--ard-container);
	margin-inline: auto;
	padding-block-end: 22px;
}

.ard-footer--dark .ard-footer__grid {
	border-block-end: 1px solid rgba(255, 255, 255, .12);
}

.ard-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 12px;
}

.ard-footer__brand img {
	inline-size: 44px;
	block-size: 44px;
	object-fit: contain;
}

.ard-footer--dark .ard-footer__brand img {
	padding: 3px;
	border-radius: 50%;
	background: var(--ard-base);
}

.ard-footer__name {
	font-size: 17px;
	font-weight: 900;
}

.ard-footer--dark .ard-footer__name {
	color: var(--ard-base);
}

.ard-footer--light .ard-footer__name {
	color: var(--ard-primary-dark);
}

.ard-footer__about {
	font-size: 12.5px;
	line-height: 2;
}

.ard-footer__coltitle {
	margin-block-end: 12px;
	font-size: 14px;
	font-weight: 800;
}

.ard-footer--dark .ard-footer__coltitle {
	color: var(--ard-base);
}

.ard-footer--light .ard-footer__coltitle {
	color: var(--ard-text);
}

.ard-footer__links {
	font-size: 12.5px;
	line-height: 2.2;
}

.ard-footer__links a:hover {
	color: var(--ard-accent);
	text-decoration: underline;
}

.ard-footer--light .ard-footer__links a:hover {
	color: var(--ard-primary);
}

.ard-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ard-footer__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 72px;
	block-size: 72px;
	border-radius: var(--ard-radius-sm);
	overflow: hidden;
}

.ard-footer--dark .ard-footer__badge {
	background: rgba(255, 255, 255, .1);
}

.ard-footer--light .ard-footer__badge {
	border: 1px solid var(--ard-border);
}

.ard-footer__badge img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.ard-footer--dark .ard-footer__badge .ard-ph {
	background: none;
	color: var(--ard-on-dark);
}

.ard-footer__bottom {
	max-inline-size: var(--ard-container);
	margin-inline: auto;
	padding-block-start: 14px;
	font-size: 11.5px;
}

.ard-footer--dark .ard-footer__bottom {
	color: color-mix(in srgb, var(--ard-on-dark) 75%, var(--ard-primary));
}

.ard-footer--light .ard-footer__bottom {
	margin-block-start: 6px;
	border-block-start: 1px solid var(--ard-border-soft);
	color: var(--ard-muted);
}

/* ============================================================
   نوار پایین موبایل
   ============================================================ */

.ard-mnav {
	display: none;
	grid-template-columns: repeat(var(--ard-mnav-cols, 4), minmax(0, 1fr));
	align-items: center;
	width: calc(100% - 24px);
	margin-inline: auto;
	padding: 11px 8px calc(11px + env(safe-area-inset-bottom, 0px));
	border: 1px solid rgba(25, 30, 45, .04);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 8px 28px rgba(30, 35, 50, .13);
}

.ard-mnav--fixed {
	position: fixed;
	inset-inline-start: 50%;
	inset-block-end: 14px;
	z-index: 999;
	transform: translateX(-50%);
}

.ard-mnav--normal {
	position: relative;
}

.ard-mnav__item {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 2px;
	border-radius: 12px;
	color: var(--ard-muted);
	font-size: 10.5px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: color .2s;
}

.ard-mnav__item:hover,
.ard-mnav__item:focus-visible {
	color: var(--ard-primary);
	text-decoration: none;
}

.ard-mnav__item.is-active {
	color: var(--ard-primary);
	font-weight: 800;
}

.ard-mnav__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ard-mnav__icon > svg,
.ard-mnav__icon > i {
	flex: 0 0 auto;
}

.ard-mnav__label {
	max-width: 100%;
	white-space: nowrap;
}

.ard-mnav__badge {
	position: absolute;
	top: -6px;
	left: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 17px;
	block-size: 17px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--ard-sale);
	color: var(--ard-base);
	font-size: 9.5px;
	font-weight: 800;
}

/* ============================================================
   فهرست دسته‌بندی نوشته‌ها
   ============================================================ */

.ard-pcats {
	padding: 14px 16px;
	border: 1px solid #e5e5e9;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 3px 12px rgba(30, 35, 50, .06);
}

.ard-pcats__heading {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ard-pcats__title-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: #55555b;
	line-height: 1;
}

.ard-pcats__title-icon > svg {
	width: 20px;
	height: 20px;
}

.ard-pcats__title {
	margin: 0;
	color: #24242a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.ard-pcats__divider {
	margin-block: 12px;
	border: 0;
	border-block-start: 1px solid #d7d7da;
}

.ard-pcats__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ard-pcats__children {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0 16px 0 0;
	border-inline-start: 1px solid #ededf0;
	list-style: none;
}

.ard-pcats__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.ard-pcats__link {
	display: flex;
	min-height: 32px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	border-radius: 8px;
	color: #29292f;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.ard-pcats__link:hover,
.ard-pcats__link:focus-visible {
	color: #f20d5b;
	text-decoration: none;
}

.ard-pcats__link.is-current .ard-pcats__name {
	color: #f20d5b;
	font-weight: 700;
}

.ard-pcats__label {
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ard-pcats__arrow {
	flex: 0 0 auto;
	color: #44444a;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.ard-pcats__name {
	min-width: 0;
	color: #29292f;
	line-height: 1.5;
}

.ard-pcats__count {
	display: inline-flex;
	flex: 0 0 auto;
	min-width: 38px;
	min-height: 17px;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: 20px;
	background: #f20d5b;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
}

.ard-pcats__empty {
	margin: 0;
	color: #73737a;
	font-size: 13px;
}

/* ============================================================
   تب‌های نوشته پیشنهادی
   ============================================================ */

.ard-post-tabs {
	padding: 20px;
	border: 1px solid #e0e2eb;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(30, 35, 50, .05);
}

.ard-post-tabs__nav {
	display: flex;
	align-items: stretch;
	border-block-end: 1px solid #dedee3;
}

.ard-post-tabs__button {
	position: relative;
	display: inline-flex;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 8px 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #35353b;
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease;
}

.ard-post-tabs__button + .ard-post-tabs__button {
	border-inline-start: 1px solid #dedee3;
}

.ard-post-tabs__button:hover,
.ard-post-tabs__button:focus-visible {
	color: #f20d5b;
}

.ard-post-tabs__button.is-active {
	color: #f20d5b;
}

.ard-post-tabs__button.is-active::after {
	position: absolute;
	inset-inline: 14px;
	inset-block-end: -1px;
	height: 2px;
	border-radius: 2px;
	background-color: #55555b;
	content: "";
}

.ard-post-tabs__label {
	min-width: 0;
	white-space: nowrap;
}

.ard-post-tabs__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: #3b3b41;
	line-height: 1;
}

.ard-post-tabs__icon > svg {
	width: 24px;
	height: 24px;
}

.ard-post-tabs__panels {
	padding-block-start: 22px;
}

.ard-post-tabs__panel[hidden] {
	display: none !important;
}

.ard-post-tabs__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ard-post-tabs__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.ard-post-tabs__link {
	display: flex;
	min-width: 0;
	align-items: stretch;
	gap: 16px;
	color: #35353b;
	text-decoration: none;
}

.ard-post-tabs__link:hover,
.ard-post-tabs__link:focus-visible {
	color: #f20d5b;
	text-decoration: none;
}

.ard-post-tabs__media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 112px;
	height: 112px;
	overflow: hidden;
	border-radius: 28px;
	background: #f5eef1;
}

.ard-post-tabs__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ard-post-tabs__media .ard-ph {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: #8d8186;
	font-size: 12px;
}

.ard-post-tabs__body {
	min-width: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding-block: 2px;
}

.ard-post-tabs__title {
	display: -webkit-box;
	max-height: 4.5em;
	overflow: hidden;
	color: #35353b;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ard-post-tabs__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #35353b;
	font-size: 17px;
	line-height: 1.4;
}

.ard-post-tabs__meta .ard-i {
	flex: 0 0 auto;
	color: #35353b;
}

.ard-post-tabs__empty {
	margin: 0;
	padding: 16px 0;
	color: #73737a;
	font-size: 14px;
}

@media (max-width: 540px) {
	.ard-post-tabs {
		padding: 14px;
	}

	.ard-post-tabs__link {
		gap: 12px;
	}

	.ard-post-tabs__title {
		font-size: 18px;
	}

	.ard-post-tabs__meta {
		font-size: 14px;
	}
}

/* ============================================================
   فهرست آخرین مقالات
   ============================================================ */

.ard-latest-posts {
	padding: 20px;
	border: 1px solid #e0e2eb;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(30, 35, 50, .05);
}

.ard-latest-posts__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #34343a;
}

.ard-latest-posts__heading-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: #34343a;
	line-height: 1;
}

.ard-latest-posts__heading-icon > svg {
	width: 24px;
	height: 24px;
}

.ard-latest-posts__heading-text {
	margin: 0;
	color: inherit;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
}

.ard-latest-posts__divider {
	position: relative;
	margin-block: 18px;
	border: 0;
	border-block-start: 1px solid #d4d4d8;
}

.ard-latest-posts__divider::after {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: -1px;
	width: 100px;
	height: 2px;
	border-radius: 2px;
	background: #55555b;
	content: "";
}

.ard-latest-posts__list {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ard-latest-posts__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.ard-latest-posts__link {
	display: flex;
	min-width: 0;
	align-items: stretch;
	gap: 16px;
	color: #34343a;
	text-decoration: none;
}

.ard-latest-posts__link:hover,
.ard-latest-posts__link:focus-visible {
	color: #f20d5b;
	text-decoration: none;
}

.ard-latest-posts__media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 160px;
	height: 180px;
	overflow: hidden;
	border-radius: 28px;
	background: #f5eef1;
}

.ard-latest-posts__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ard-latest-posts__media .ard-ph {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: #8d8186;
	font-size: 12px;
}

.ard-latest-posts__body {
	min-width: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding-block: 8px;
}

.ard-latest-posts__title {
	display: -webkit-box;
	max-height: 4.8em;
	overflow: hidden;
	color: #34343a;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ard-latest-posts__date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #34343a;
	font-size: 18px;
	line-height: 1.4;
}

.ard-latest-posts__date-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: #34343a;
}

.ard-latest-posts__date-icon .ard-i {
	width: 100%;
	height: 100%;
}

.ard-latest-posts__empty {
	margin: 0;
	padding-block: 16px;
	color: #73737a;
	font-size: 14px;
}

@media (max-width: 540px) {
	.ard-latest-posts {
		padding: 14px;
	}

	.ard-latest-posts__heading-text {
		font-size: 20px;
	}

	.ard-latest-posts__link {
		gap: 12px;
	}

	.ard-latest-posts__title {
		font-size: 18px;
	}

	.ard-latest-posts__date {
		font-size: 14px;
	}
}

/* ============================================================
   ریسپانسیو
   ============================================================ */

@media (max-width: 1200px) {
	.ard-hero__title {
		font-size: 34px;
	}

	.ard-hero--soft .ard-hero__title {
		font-size: 36px;
	}
}

@media (max-width: 1024px) {
	.ard-header__inner,
	.ard-nav__inner,
	.ard-topbar__inner {
		padding-inline: 16px;
	}

	.ard-header__account span {
		display: none;
	}

	.ard-news--soft,
	.ard-footer--dark,
	.ard-footer--light {
		padding-inline: 20px;
	}

	.ard-fest--wide .ard-fest__inner {
		padding-inline: 20px;
	}
}

@media (max-width: 860px) {
	/* پیش‌فرض‌های موبایل. المنتور با کنترل «تعداد ستون» این‌ها را
	   با ویژگی اختصاصی‌تر بازنویسی می‌کند، پس اینجا فقط نقش تور ایمنی دارند. */
	.ard-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ard-cats:not(.ard-cats--scroll):not(.ard-cats--slider) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ard-pgrid,
	.ard-best:not(.ard-best--scroll) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ard-brands__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ard-fest__grid,
	.ard-banners,
	.ard-posts {
		grid-template-columns: minmax(0, 1fr);
	}

	.ard-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.ard-banner {
		grid-column: span 1;
	}

	.ard-header__burger {
		display: flex;
	}

	.ard-header__inner {
		flex-wrap: wrap;
		gap: 10px 12px;
		padding: 12px 16px;
	}

	.ard-header__logo img {
		inline-size: 38px !important;
		block-size: 38px !important;
	}

	.ard-header__name {
		font-size: 16px;
	}

	.ard-header__tagline {
		display: none;
	}

	.ard-search {
		order: 5;
		flex-basis: 100%;
		block-size: 44px;
	}

	.ard-search__btn {
		display: none;
	}

	.ard-header__actions {
		margin-inline-start: auto;
		gap: 8px;
	}

	.ard-header__cart-text {
		display: none;
	}

	.ard-header__cart {
		padding: 8px 10px;
	}

	.ard-nav__inner {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.ard-nav__inner::-webkit-scrollbar {
		display: none;
	}

	.ard-nav__list {
		flex-wrap: nowrap;
	}

	/* منوی بسته روی موبایل تا وقتی هدر بازش کند */
	.ard-nav.is-collapsed .ard-nav__inner {
		display: none;
	}

	.ard-hero__slide {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px 18px 34px;
	}

	.ard-hero__title {
		font-size: 23px;
	}

	.ard-hero--soft .ard-hero__title {
		font-size: 26px;
	}

	.ard-hero__sub {
		font-size: 12.5px;
		margin-block-end: 16px;
	}

	/* در موبایل همیشه تک‌ستونی، حتی وقتی «تصویر سمت راست» انتخاب شده. */
	.ard-hero--media-start .ard-hero__slide {
		flex-direction: column;
	}

	.ard-hero__media {
		order: -1;
		inline-size: 100%;
		max-inline-size: 100%;
		block-size: 180px;
	}

	.ard-hero__dots[class] {
		right: 18px;
		bottom: 14px;
	}

	.ard-hero--media-start .ard-hero__dots[class] {
		left: 18px;
	}

	.ard-hero__arrow[class] {
		display: none;
	}

	.ard-deal--bar .ard-deal__item {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ard-fest__head {
		gap: 10px;
	}

	.ard-fest__timer {
		inline-size: 100%;
		margin-inline-start: 0;
		flex-wrap: wrap;
	}

	.ard-fest__inner,
	.ard-fest--wide .ard-fest__inner {
		padding: 18px;
	}

	.ard-banner {
		padding: 18px;
		gap: 14px;
	}

	.ard-banner__title {
		font-size: 16px;
	}

	.ard-banner__media {
		inline-size: 96px;
		block-size: 88px;
	}

	.ard-news__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.ard-news__form {
		inline-size: 100%;
	}

	.ard-news__input,
	.ard-news--dark .ard-news__input {
		inline-size: auto;
		flex: 1;
		min-inline-size: 0;
	}

	.ard-shead__title {
		font-size: 16px;
	}

	.ard-shead--center .ard-shead__title {
		font-size: 19px;
	}

	.ard-cats--scroll:not(.ard-cats--slider) {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ard-cats--scroll::-webkit-scrollbar {
		display: none;
	}

	.ard-cats--scroll:not(.ard-cats--slider) .ard-cat {
		flex: none;
		scroll-snap-align: start;
	}

	/* در موبایل فلش‌ها جا نمی‌شوند؛ کشیدن با انگشت کار خودش را می‌کند. */
	.ard-cats__arrow[class] {
		display: none;
	}

	/* دایره باید دایره بماند حتی وقتی ستون از قطر تنظیم‌شده باریک‌تر است. */
	.ard-cat__ring {
		inline-size: 74px;
		block-size: 74px;
		aspect-ratio: 1;
	}

	/*
	 * فقط مقدار متغیر؛ padding مستقیم، «برداشتن زمینه و حاشیه» و کنترل
	 * «فاصله داخلی حلقه» را در موبایل بی‌اثر می‌کرد.
	 */
	.ard-cats--gradient {
		--ard-cat-ring-pad: 4px;
	}

	.ard-cat__title {
		font-size: 11.5px;
	}

	.ard-pcard__title {
		font-size: 12px;
	}

	.ard-pcard {
		--ard-fab: 38px;
	}

	.ard-pcard__fab {
		bottom: -5px;
		left: -5px;
	}

	.ard-pcard--framed .ard-pcard__box {
		padding: 10px;
	}

	.ard-pcard--notch {
		--ard-notch: 160px;
	}

	.ard-footer__badge {
		inline-size: 60px;
		block-size: 60px;
	}
}

@media (max-width: 600px) {
	.ard-service__inner {
		gap: 10px;
		padding: 10px 12px;
	}

	.ard-service__icon {
		inline-size: 32px;
		block-size: 32px;
	}

	.ard-service__title {
		font-size: 12px;
	}

	.ard-service__sub {
		font-size: 10px;
	}

	.ard-topbar--light .ard-topbar__inner {
		flex-direction: column;
		gap: 4px;
		padding-block: 8px;
		text-align: center;
	}

	.ard-topbar__hl {
		white-space: normal;
	}

	.ard-clock__cell {
		min-inline-size: 0;
		padding: 7px 4px;
	}

	.ard-clock__num {
		font-size: 16px;
	}

	.ard-clock__label {
		font-size: 9px;
	}

	.ard-fest__card {
		flex-direction: row;
	}

	.ard-fest--wide .ard-fest__card {
		flex-direction: column;
	}
}

/* نوار پایین فقط زیر نقطه شکست مشخص‌شده */
@media (prefers-reduced-motion: reduce) {
	[class*="elementor-widget-ardal-"] * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ============================================================
   ویجت مسیر صفحه محصول (Breadcrumb)
   ============================================================ */

.ard-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--ard-text-soft);
	padding: 12px 0;
	margin: 0;
}

.ard-breadcrumb__sep {
	font-size: 12px;
	color: var(--ard-muted);
	user-select: none;
}

.ard-breadcrumb__item {
	color: var(--ard-text-soft);
	text-decoration: none;
	transition: color 0.2s;
}

a.ard-breadcrumb__item:hover {
	color: var(--ard-primary);
}

.ard-breadcrumb__item--current {
	color: var(--ard-text);
	font-weight: 600;
}

/* ============================================================
   ویجت بخش اصلی صفحه محصول (Hero / Gallery / BuyBox)
   ============================================================ */


.ard-prod-hero {
	width: 100%;
	margin: 0 0 24px;
}

.ard-prod-hero__layout {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: flex-start;
}

.ard-prod-hero__col--gallery {
	flex: 1 1 400px;
	min-width: 290px;
	max-width: 470px;
}

.ard-prod-hero__col--info {
	flex: 2 1 360px;
	min-width: 290px;
}

.ard-prod-hero__col--buybox {
	flex: 1 1 300px;
	min-width: 280px;
}

/* گالری تصویر محصول */
.ard-prod-gallery {
	width: 100%;
}

.ard-prod-gallery__main {
	position: relative;
	border: 1px solid var(--ard-border);
	border-radius: 18px;
	/* از متغیر می‌خواند تا کنترل ویجت بتواند راه‌راه، رنگ ساده یا هیچ بگذارد.
	   متغیر روی ریشهٔ ویجت نوشته می‌شود تا بندانگشتی‌ها هم به آن برسند. */
	background: var(--ard-frame-bg, repeating-linear-gradient(45deg,
		var(--ard-frame-line, var(--ard-surface)) 0 var(--ard-frame-size, 10px),
		var(--ard-frame-base, var(--ard-base)) var(--ard-frame-size, 10px) calc(var(--ard-frame-size, 10px) * 2)));
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* ترک اسلایدر: اسکرول افقی با snap، پس کشیدن انگشت بومی کار می‌کند. */
.ard-prod-gallery__track {
	display: flex;
	inline-size: 100%;
	block-size: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.ard-prod-gallery__track::-webkit-scrollbar {
	display: none;
}

.ard-prod-gallery__slide {
	flex: 0 0 100%;
	inline-size: 100%;
	block-size: 100%;
	min-inline-size: 0;
	margin: 0;
	padding: 16px;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * تصویر کادر را پر می‌کند تا در ستون‌های عریض ریز نماند؛ object-fit نسبت
 * تصویر را حفظ می‌کند پس کشیدگی رخ نمی‌دهد.
 *
 * چرا با نام اسلاید و نه تنها با کلاس خودش: روی صفحهٔ محصول، قالب/افزونه‌های
 * دیگر قانونی با وزن دو کلاس روی تصویرها دارند و `block-size: 100%`ِ تک‌کلاسی
 * را می‌بردند. نتیجه‌اش این بود که تصویر به‌جای پر کردن قاب، با نسبت ذاتی خودش
 * کشیده می‌شد و از کادر بیرون می‌زد — و چون کادرِ تصویر دقیقاً نسبت خودش را
 * داشت، cover و contain هیچ فرقی نمی‌کردند.
 */
.ard-prod-gallery__slide .ard-prod-gallery__active-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* ذره‌بین: عدسی گردی که همان نقطهٔ زیر نشانگر را بزرگ‌شده نشان می‌دهد. */
.ard-prod-gallery__lens {
	position: absolute;
	inline-size: 180px;
	block-size: 180px;
	border-radius: 50%;
	border: 2px solid var(--ard-base);
	box-shadow: 0 10px 28px rgba(var(--ard-primary-dark-rgb), .28);
	background-repeat: no-repeat;
	background-color: var(--ard-base);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s;
	/* بالای تصویر ولی زیر دکمه‌ها (۲) و فلش‌ها (۳)، وگرنه عدسی روی آن‌ها
	   می‌افتاد و عملاً غیرقابل‌استفاده‌شان می‌کرد. */
	z-index: 1;
}

.ard-prod-gallery__lens.is-on {
	opacity: 1;
	visibility: visible;
}

/* فلش‌های اسلایدر — در RTL «قبلی» سمت راست است. */
.ard-prod-gallery__arrow[class] {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 1px solid var(--ard-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--ard-base) 88%, transparent);
	color: var(--ard-primary-dark);
	cursor: pointer;
	transition: background .2s, border-color .2s;
	backdrop-filter: blur(4px);
}

.ard-prod-gallery__arrow[class]:hover {
	background: var(--ard-base);
	border-color: var(--ard-tint-blue-border);
}

.ard-prod-gallery__arrow--prev[class] {
	right: 12px;
}

.ard-prod-gallery__arrow--next[class] {
	left: 12px;
}

.ard-prod-gallery[data-single="yes"] .ard-prod-gallery__arrow[class] {
	display: none;
}

/* نقطه‌های اسلایدر */
.ard-prod-gallery__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-block-start: 10px;
}

.ard-prod-gallery__dot {
	inline-size: 7px;
	block-size: 7px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: color-mix(in srgb, var(--ard-primary-dark) 22%, var(--ard-base));
	cursor: pointer;
	transition: inline-size .25s, background .25s;
}

.ard-prod-gallery__dot.is-active {
	inline-size: 20px;
	background: var(--ard-accent);
}

.ard-prod-gallery__placeholder {
	color: var(--ard-muted);
	font: 600 12px ui-monospace, monospace;
	text-align: center;
}

.ard-prod-gallery__badges {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
	z-index: 2;
}

.ard-prod-gallery__badge--guarantee {
	background: var(--ard-accent) !important;
	color: var(--ard-accent-ink) !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	border-radius: 8px !important;
	padding: 5px 10px !important;
}

.ard-prod-gallery__actions {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 2;
}

.ard-prod-gallery__btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ard-base);
	border: 1px solid color-mix(in srgb, var(--ard-border) 70%, var(--ard-muted));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ard-text-soft);
	font-size: 15px;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, transform 0.2s;
	padding: 0;
}

.ard-prod-gallery__btn:hover {
	border-color: var(--ard-primary, var(--ard-primary));
	color: var(--ard-primary, var(--ard-primary));
	transform: scale(1.08);
}

.ard-prod-gallery__btn[data-ard-wishlist]:hover {
	border-color: var(--ard-sale);
	color: var(--ard-sale);
}

/* وضعیت «افزوده شده» باید بدون هاور هم دیده شود. */
.ard-prod-gallery__btn.is-active {
	border-color: var(--ard-primary);
	background: var(--ard-tint-blue);
	color: var(--ard-primary);
}

.ard-prod-gallery__btn--wishlist.is-active {
	border-color: var(--ard-sale);
	background: var(--ard-sale-soft);
	color: var(--ard-sale);
}

.ard-prod-gallery__btn--wishlist.is-active .ard-i {
	fill: currentColor;
}

.ard-prod-gallery__btn-link {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ard-primary);
	text-align: center;
	line-height: 1.6;
}

/* زمینهٔ راهنما هم باید از پالت بیاید، نه رنگ ثابت. */
.ard-prod-gallery__zoom-hint {
	background: rgba(var(--ard-primary-dark-rgb), .9);
}

.ard-prod-gallery__zoom-hint {
	position: absolute;
	bottom: 14px;
	left: 14px;
	background: rgba(var(--ard-primary-dark-rgb), .9);
	color: var(--ard-on-dark);
	font-size: 11px;
	padding: 6px 11px;
	border-radius: 8px;
	pointer-events: none;
	backdrop-filter: blur(4px);
}

/* نوار بندانگشتی هم مثل تصویر اصلی اسلایدر است: تِرَک افقیِ scroll-snap با
   فلش‌های کناری. قبلاً grid بود و با تصاویر زیاد فشرده یا چندردیفه می‌شد. */
.ard-prod-gallery__thumbs-wrap {
	position: relative;
	margin-top: 12px;
}

.ard-prod-gallery__thumbs {
	--ard-thumbs: 5;
	--ard-thumb-gap: 10px;

	display: flex;
	gap: var(--ard-thumb-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.ard-prod-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.ard-prod-gallery__thumbs > .ard-prod-gallery__thumb {
	/* هر بندانگشتی دقیقاً یک n اُمِ عرضِ نما، با احتساب فاصله‌ها. */
	flex: 0 0 calc((100% - (var(--ard-thumbs) - 1) * var(--ard-thumb-gap)) / var(--ard-thumbs));
	scroll-snap-align: start;
}

/* سوییچ ویجت: بندانگشتی‌ها همان پس‌زمینهٔ کادر اصلی را بگیرند — همان متغیرِ
   مشترکی که کنترل «پس‌زمینه» روی ریشهٔ ویجت می‌نویسد. */
.ard-thumb-bg-yes .ard-prod-gallery__thumb {
	background: var(--ard-frame-bg, repeating-linear-gradient(45deg,
		var(--ard-frame-line, var(--ard-surface)) 0 var(--ard-frame-size, 10px),
		var(--ard-frame-base, var(--ard-base)) var(--ard-frame-size, 10px) calc(var(--ard-frame-size, 10px) * 2)));
}

.ard-thumb-bg-yes .ard-prod-gallery__thumb img {
	background: var(--ard-frame-base, var(--ard-base));
}

/* جای‌گزینِ «تصویر ندارد» پس‌زمینهٔ راه‌راهِ خودش را دارد و روی پس‌زمینهٔ
   انتخابی کاربر می‌افتاد؛ داخل گالری از همان متغیر مشترک پیروی کند. */
.ard-prod-gallery .ard-ph {
	background: var(--ard-frame-bg, repeating-linear-gradient(45deg,
		var(--ard-frame-line, var(--ard-surface)) 0 var(--ard-frame-size, 10px),
		var(--ard-frame-base, var(--ard-base)) var(--ard-frame-size, 10px) calc(var(--ard-frame-size, 10px) * 2)));
}

.ard-prod-gallery__thumb-arrow[class] {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	padding: 0;
	border: 1px solid var(--ard-border);
	border-radius: 50%;
	background: var(--ard-base);
	color: var(--ard-text-soft);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(var(--ard-primary-dark-rgb), .12);
	transition: color .2s, border-color .2s, opacity .2s;
}

.ard-prod-gallery__thumb-arrow[class]:hover {
	color: var(--ard-primary);
	border-color: var(--ard-primary);
}

/* در RTL «قبلی» سمت راست است. */
.ard-prod-gallery__thumb-arrow--prev[class] {
	right: -6px;
}

.ard-prod-gallery__thumb-arrow--next[class] {
	left: -6px;
}

.ard-prod-gallery__thumb-arrow[class][hidden] {
	display: none;
}

.ard-prod-gallery__thumb {
	box-sizing: border-box;
	min-inline-size: 0;
	height: 88px;
	border-radius: 12px;
	border: 2px solid var(--ard-border);
	background: repeating-linear-gradient(45deg, var(--ard-surface) 0 8px, var(--ard-base) 8px 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ard-muted);
	font: 600 9.5px ui-monospace, monospace;
	cursor: pointer;
	padding: 4px;
	transition: border-color 0.2s, transform 0.2s;
	overflow: hidden;
}

.ard-prod-gallery__thumb:hover {
	border-color: var(--ard-accent, var(--ard-accent));
}

.ard-prod-gallery__thumb.is-active {
	border-color: var(--ard-accent, var(--ard-accent));
	box-shadow: 0 0 0 1px var(--ard-accent, var(--ard-accent));
}

.ard-prod-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* نوار تصاویر کوچک عمودی، کنار تصویر اصلی و با پیمایش مستقل. */
.ard-prod-gallery[data-thumbs-position="vertical"] {
	display: grid;
	grid-template-columns: var(--ard-thumb-rail-width, 112px) minmax(0, 1fr);
	grid-template-rows: auto;
	align-items: stretch;
	gap: 12px;
}

.ard-prod-gallery[data-thumbs-position="vertical"] .ard-prod-gallery__main {
	grid-column: 2;
	grid-row: 1;
	min-inline-size: 0;
}

.ard-prod-gallery[data-thumbs-position="vertical"] .ard-prod-gallery__thumbs-wrap {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-block-size: 0;
	margin: 0;
}

.ard-prod-gallery[data-thumbs-position="vertical"] .ard-prod-gallery__thumbs {
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
	block-size: 100%;
	max-block-size: calc(var(--ard-thumbs, 3) * var(--ard-vertical-thumb-height, 88px) + (var(--ard-thumbs, 3) - 1) * 8px);
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y proximity;
	overscroll-behavior-y: contain;
}

.ard-prod-gallery[data-thumbs-position="vertical"] .ard-prod-gallery__thumbs > .ard-prod-gallery__thumb {
	flex: 0 0 var(--ard-vertical-thumb-height, 88px);
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 0;
	block-size: var(--ard-vertical-thumb-height, 88px);
}

.ard-prod-gallery[data-thumbs-position="vertical"] .ard-prod-gallery__thumb-arrow[class] {
	position: static;
	translate: none;
	flex: 0 0 32px;
	inline-size: 32px;
	block-size: 32px;
	align-self: center;
}

.ard-prod-gallery__thumb--video {
	background: var(--ard-tint-blue);
	color: var(--ard-primary, var(--ard-primary));
	font-weight: 700;
}

/* ستون اطلاعات محصول */
.ard-prod-hero__title {
	font-size: clamp(19px, 1.8vw, 24px);
	font-weight: 900;
	color: var(--ard-text);
	line-height: 1.55;
	margin: 0 0 6px;
}

.ard-prod-hero__subtitle {
	font-size: 13px;
	color: var(--ard-muted);
	direction: ltr;
	text-align: right;
	margin-bottom: 0;
}

.ard-prod-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--ard-border);
	border-radius: 14px;
	padding: 10px 14px;
	transition: border-color 0.2s;
}

.ard-prod-brand:hover {
	border-color: var(--ard-tint-blue-border);
}

.ard-prod-brand__logo {
	width: 70px;
	height: 36px;
	flex: none;
	border-radius: 8px;
	background: repeating-linear-gradient(45deg, var(--ard-surface) 0 8px, var(--ard-base) 8px 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ard-muted);
	font: 600 8.5px ui-monospace, monospace;
	overflow: hidden;
}

.ard-prod-brand__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ard-prod-brand__name {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-prod-brand__link {
	font-size: 11px;
	color: var(--ard-primary, var(--ard-primary)) !important;
	font-weight: 700;
	margin-top: 3px;
	display: block;
}

.ard-prod-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 12.5px;
	/* تُنِ خاکستری دیزاین بین text-soft و muted است؛ به‌جای هاردکدکردن، از
	   ترکیب همان دو توکن پالت ساخته می‌شود تا با تغییر پالت هم بخواند. */
	color: color-mix(in srgb, var(--ard-text-soft) 55%, var(--ard-muted));
}

/* بخش‌ها حالا ویجت مستقل‌اند و فاصله‌شان را المنتور تعیین می‌کند، پس خط
   جداکننده اختیاری شد و با سوییچ خود ویجت روشن می‌شود. */
.ard-meta-divider-yes .ard-prod-meta {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ard-border-soft);
}

.ard-prod-meta__rate {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ard-prod-meta__stars {
	color: var(--ard-star);
	letter-spacing: 1.5px;
}

.ard-prod-meta__score {
	font-weight: 800;
	color: var(--ard-text);
}

.ard-prod-meta__item--link {
	color: var(--ard-primary, var(--ard-primary));
	font-weight: 700;
	cursor: pointer;
}

.ard-prod-meta__item--stock {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ard-accent-deep);
	font-weight: 700;
}

.ard-prod-meta__stock-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ard-accent, var(--ard-accent));
	display: inline-block;
}

/* تغییرات رنگ و سایز */
.ard-prod-variants {
	margin-top: 0;
}

.ard-prod-variants__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ard-prod-variants__label {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-prod-variants__selected {
	font-size: 13px;
	color: var(--ard-text-soft);
}

.ard-prod-variants__guide {
	margin-right: auto;
	font-size: 12.5px;
	color: var(--ard-primary, var(--ard-primary)) !important;
	font-weight: 700;
}

.ard-prod-colors {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ard-prod-color {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1.5px solid var(--ard-pc-ring-normal, color-mix(in srgb, var(--ard-border) 70%, var(--ard-muted)));
	background: var(--ard-pc-bg-normal, var(--ard-base));
	border-radius: 11px;
	padding: 9px 14px;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ard-pc-ink-normal, var(--ard-text));
	transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
	font-family: inherit;
}

.ard-prod-color:hover {
	border-color: var(--ard-pc-ring-hover, var(--ard-accent));
	background: var(--ard-pc-bg-hover, var(--ard-pc-bg-normal, var(--ard-base)));
	color: var(--ard-pc-ink-hover, var(--ard-pc-ink-normal, var(--ard-text)));
	transform: scale(var(--ard-pc-scale-hover, 1));
}

.ard-prod-color.is-active {
	border-color: var(--ard-pc-ring-active, var(--ard-accent));
	background: var(--ard-pc-bg-active, color-mix(in srgb, var(--ard-tint-green) 55%, var(--ard-base)));
	color: var(--ard-pc-ink-active, var(--ard-pc-ink-normal, var(--ard-text)));
	transform: scale(var(--ard-pc-scale-active, 1));
}

/*
 * رنگِ ناموجود: خط‌خورده و کم‌رنگ، ولی همچنان دیده می‌شود.
 *
 * برداشتنش از فهرست این توهم را می‌سازد که فروشگاه این رنگ را اصلاً ندارد؛
 * دیدنِ خط‌خورده‌اش اطلاعات بیشتری به کاربر می‌دهد و انتظار «شاید بعداً بیاید»
 * را هم درست می‌کند.
 */
/*
 * «با انتخاب فعلی نمی‌خواند» با «اصلاً نیست» فرق دارد: اولی کلیک‌شدنی است و
 * با زدنش آن یکی ویژگی خودش جابه‌جا می‌شود، پس اشاره‌گرش هم باید امیدوار
 * باشد نه ممنوع.
 */
.ard-prod-color.is-conflict,
.ard-prod-size.is-conflict {
	cursor: pointer;
	opacity: .85;
}

.ard-prod-color.is-disabled {
	opacity: var(--ard-pc-disabled, 1);
	border-color: var(--ard-border-soft);
	background: var(--ard-surface-alt);
	color: color-mix(in srgb, var(--ard-muted) 55%, var(--ard-base));
	cursor: not-allowed;
}

.ard-prod-color.is-disabled .ard-prod-color__name {
	text-decoration: line-through;
}

.ard-prod-color.is-disabled .ard-prod-color__swatch {
	position: relative;
	opacity: .45;
}

/* خطِ مورب روی نمونهٔ رنگ: برای کسی که خط‌خوردگیِ متن را نمی‌بیند هم روشن است. */
.ard-prod-color.is-disabled .ard-prod-color__swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		var(--ard-muted) calc(50% - 1px),
		var(--ard-muted) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	border-radius: inherit;
}

.ard-prod-color__swatch {
	width: var(--ard-pc-size, 18px);
	height: var(--ard-pc-size, 18px);
	border-radius: 50%;
	background: var(--swatch-color, var(--ard-text));
	border: var(--ard-pc-sw-bw, 1px) solid var(--ard-pc-sw-bc, rgba(0, 0, 0, 0.12));
	box-sizing: border-box;
	display: inline-block;
	flex: none;
	transition: box-shadow 0.2s;
}

/* تولتیپ فقط در حالت‌های دایره‌ای و مربعی نشان داده می‌شود؛ کاشی نامش را دارد. */
.ard-prod-color__tip {
	display: none;
}

/* ---------------------------------------------------------------- دایره‌ای و مربعی */

.ard-pcolor--dot .ard-prod-color,
.ard-pcolor--square .ard-prod-color {
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
}

.ard-pcolor--square .ard-prod-color {
	border-radius: 10px;
}

.ard-pcolor--dot .ard-prod-color:hover,
.ard-pcolor--dot .ard-prod-color.is-active,
.ard-pcolor--square .ard-prod-color:hover,
.ard-pcolor--square .ard-prod-color.is-active {
	background: none;
}

.ard-pcolor--dot .ard-prod-color__swatch,
.ard-pcolor--square .ard-prod-color__swatch {
	width: var(--ard-pc-size, 32px);
	height: var(--ard-pc-size, 32px);
	border-color: var(--ard-pc-sw-bc, rgba(0, 0, 0, 0.06));
	box-shadow: 0 0 0 var(--ard-pc-ring-gap, 3px) var(--ard-pc-ring-gap-c, var(--ard-base, #fff)), 0 0 0 calc(var(--ard-pc-ring-gap, 3px) + var(--ard-pc-ring-w, 2px)) var(--ard-pc-ring-normal, transparent);
}

.ard-pcolor--square .ard-prod-color__swatch {
	border-radius: 8px;
}

.ard-pcolor--dot .ard-prod-color__name,
.ard-pcolor--square .ard-prod-color__name {
	display: none !important;
}

.ard-pcolor--dot .ard-prod-color:hover .ard-prod-color__swatch,
.ard-pcolor--square .ard-prod-color:hover .ard-prod-color__swatch {
	box-shadow: 0 0 0 var(--ard-pc-ring-gap, 3px) var(--ard-pc-ring-gap-c, var(--ard-base, #fff)), 0 0 0 calc(var(--ard-pc-ring-gap, 3px) + var(--ard-pc-ring-w, 2px)) var(--ard-pc-ring-hover, color-mix(in srgb, var(--ard-text) 25%, transparent));
}

.ard-pcolor--dot .ard-prod-color.is-active .ard-prod-color__swatch,
.ard-pcolor--square .ard-prod-color.is-active .ard-prod-color__swatch {
	box-shadow: 0 0 0 var(--ard-pc-ring-gap, 3px) var(--ard-pc-ring-gap-c, var(--ard-base, #fff)), 0 0 0 calc(var(--ard-pc-ring-gap, 3px) + var(--ard-pc-ring-w, 2px)) var(--ard-pc-ring-active, var(--ard-text, #2f2f33));
}

.ard-pcolor--dot .ard-prod-color.is-disabled,
.ard-pcolor--square .ard-prod-color.is-disabled {
	background: none;
	opacity: var(--ard-pc-disabled, .55);
}

.ard-pcolor--dot .ard-prod-color:focus-visible,
.ard-pcolor--square .ard-prod-color:focus-visible {
	outline: 2px solid var(--ard-primary, #0b62ce);
	outline-offset: 5px;
}

/* ---------------------------------------------------------------- تولتیپ */

.ard-pcolor--dot:not(.ard-pcolor-tip--none) .ard-prod-color__tip,
.ard-pcolor--square:not(.ard-pcolor-tip--none) .ard-prod-color__tip {
	position: absolute;
	bottom: calc(100% + var(--ard-pc-tip-off, 10px));
	left: 50%;
	z-index: 20;
	display: block;
	padding: 6px 10px;
	border-radius: var(--ard-pc-tip-r, 6px);
	background: var(--ard-pc-tip-bg, #2f2f33);
	color: var(--ard-pc-tip-ink, #fff);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity .18s, transform .18s, visibility 0s linear .18s;
}

.ard-pcolor-arrow-yes .ard-prod-color__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: var(--ard-pc-tip-bg, #2f2f33);
}

.ard-pcolor--dot:not(.ard-pcolor-tip--none) .ard-prod-color:hover .ard-prod-color__tip,
.ard-pcolor--dot:not(.ard-pcolor-tip--none) .ard-prod-color:focus-visible .ard-prod-color__tip,
.ard-pcolor--square:not(.ard-pcolor-tip--none) .ard-prod-color:hover .ard-prod-color__tip,
.ard-pcolor--square:not(.ard-pcolor-tip--none) .ard-prod-color:focus-visible .ard-prod-color__tip,
.ard-pcolor-tip--active.ard-pcolor--dot .ard-prod-color.is-active .ard-prod-color__tip,
.ard-pcolor-tip--active.ard-pcolor--square .ard-prod-color.is-active .ard-prod-color__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .18s, transform .18s, visibility 0s;
}

/* وقتی ماوس روی رنگ دیگری است، تولتیپ رنگ انتخاب‌شده کنار می‌رود. */
.ard-pcolor-tip--active .ard-prod-colors:hover .ard-prod-color.is-active:not(:hover) .ard-prod-color__tip {
	opacity: 0;
	visibility: hidden;
}

/* جای تولتیپ همیشه‌پیدا بالای ردیف رنگ‌ها */
.ard-pcolor-tip--active.ard-pcolor--dot .ard-prod-colors,
.ard-pcolor-tip--active.ard-pcolor--square .ard-prod-colors {
	padding-top: var(--ard-pc-tip-space, 40px);
}

.ard-prod-sizes {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.ard-prod-size {
	box-sizing: border-box;
	min-width: 56px;
	text-align: center;
	border: 1.5px solid color-mix(in srgb, var(--ard-border) 70%, var(--ard-muted));
	background: var(--ard-base);
	color: var(--ard-text);
	border-radius: 10px;
	padding: 10px 0;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
	font-family: inherit;
}

.ard-prod-size:hover:not(.is-disabled) {
	border-color: var(--ard-primary, var(--ard-primary));
}

.ard-prod-size.is-active {
	border-color: var(--ard-primary, var(--ard-primary));
	background: var(--ard-primary, var(--ard-primary));
	color: var(--ard-base);
}

.ard-prod-size.is-disabled {
	border-color: var(--ard-border-soft);
	background: var(--ard-surface-alt);
	color: color-mix(in srgb, var(--ard-muted) 55%, var(--ard-base));
	text-decoration: line-through;
	cursor: not-allowed;
}

.ard-prod-quick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px 26px;
}

.ard-specs-divider-yes .ard-prod-quick {
	padding-top: 18px;
	border-top: 1px solid var(--ard-border-soft);
}

.ard-prod-quick__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.ard-prod-quick__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ard-accent, var(--ard-accent));
	flex: none;
}

.ard-prod-quick__key {
	color: var(--ard-text-soft);
	min-width: 82px;
}

.ard-prod-quick__val {
	color: var(--ard-text);
	font-weight: 700;
}

/* ستون باکس خرید */
.ard-prod-buybox {
	border: 1.5px solid var(--ard-tint-green-border);
	border-radius: 18px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ard-tint-green) 55%, var(--ard-base)), var(--ard-base));
	padding: 18px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

/*
 * فرم استاندارد ووکامرس دور تعداد و دکمه پیچیده شده.
 *
 * `display: contents` یعنی خودِ فرم جعبه‌ای نمی‌سازد و بچه‌هایش همان‌جایی
 * می‌نشینند که قبلاً بودند — پس چیدمان و فاصله‌ها دست‌نخورده می‌مانند.
 * margin هم صفر می‌شود چون قالب‌ها معمولاً به form.cart مارجین می‌دهند.
 */
.ard-prod-buybox__form {
	display: contents;
	margin: 0;
}

/* ظرفِ استاندارد دکمه هم نباید جعبهٔ تازه‌ای بسازد. */
.ard-prod-buybox .woocommerce-variation-add-to-cart {
	display: contents;
}

/* دکمه حالا <button> است نه <a>؛ ریست لازم دارد تا مثل قبل دیده شود. */
.ard-prod-buybox__btn {
	inline-size: 100%;
	border: 0;
	font-family: inherit;
}

.ard-prod-buybox__price-row {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
}

.ard-prod-buybox__badge {
	background: var(--ard-danger, var(--ard-sale));
	color: var(--ard-base);
	font-size: 12px;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: 7px;
}

.ard-prod-buybox__old {
	font-size: 13px;
	color: var(--ard-muted);
	text-decoration: line-through;
}

.ard-prod-buybox__price-main {
	font-size: 26px;
	font-weight: 900;
	color: var(--ard-primary, var(--ard-primary-dark));
	margin-bottom: 14px;
}

.ard-prod-buybox__unit {
	font-size: 12px;
	font-weight: 500;
}

.ard-prod-countdown {
	display: flex;
	gap: 7px;
	margin-bottom: 12px;
}

.ard-prod-countdown__box {
	flex: 1;
	text-align: center;
	background: var(--ard-primary, var(--ard-primary-dark));
	color: var(--ard-base);
	border-radius: 10px;
	padding: 7px 0;
}

.ard-prod-countdown__val {
	font-size: 18px;
	font-weight: 900;
	font-family: ui-monospace, monospace;
	line-height: 1.2;
}

.ard-prod-countdown__lbl {
	font-size: 9.5px;
	color: color-mix(in srgb, var(--ard-on-dark) 85%, var(--ard-primary-light));
	margin-top: 2px;
}

.ard-prod-stock {
	margin-bottom: 16px;
}

.ard-prod-stock__track {
	height: 6px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--ard-primary-dark) 10%, var(--ard-surface));
	overflow: hidden;
	margin-bottom: 6px;
}

.ard-prod-stock__fill {
	height: 100%;
	background: var(--ard-accent, var(--ard-accent));
	border-radius: 4px;
	transition: width 0.4s ease;
}

.ard-prod-stock__note {
	font-size: 10.5px;
	color: var(--ard-text-soft);
}

.ard-prod-qty {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ard-prod-qty__label {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-prod-qty__stepper {
	margin-right: auto;
	display: flex;
	align-items: center;
	background: var(--ard-base);
	border: 1px solid color-mix(in srgb, var(--ard-border) 70%, var(--ard-muted));
	border-radius: 10px;
	overflow: hidden;
}

.ard-prod-qty__btn {
	width: 36px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ard-text-soft);
	font-size: 18px;
	cursor: pointer;
	border: 0;
	background: transparent;
	transition: background 0.2s;
	font-family: inherit;
}

.ard-prod-qty__btn:hover {
	background: var(--ard-surface);
}

.ard-prod-qty__val {
	width: 44px;
	text-align: center;
	font-size: 15px;
	font-weight: 900;
	color: var(--ard-text);
}

.ard-prod-buybox__btn {
	display: block;
	background: var(--ard-accent, var(--ard-accent)) !important;
	color: var(--ard-accent-ink) !important;
	text-align: center;
	font-size: 15px;
	font-weight: 900;
	padding: 15px 0;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(95, 163, 21, 0.35);
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
	text-decoration: none;
}

/*
 * دکمهٔ ناموجود.
 *
 * !important لازم است چون خودِ دکمه رنگ سبزش را با !important می‌گیرد (برای
 * غلبه بر استایل دکمهٔ ووکامرس و قالب)؛ بدون آن، «ناموجود» هم سبزِ سرحال
 * دیده می‌شد. این حالت هم از سمت سرور می‌آید (محصول ساده ناموجود) و هم از
 * جاوااسکریپت (واریاسیونی که موجود نیست).
 */
.ard-prod-buybox__btn.is-disabled {
	background: var(--ard-surface) !important;
	color: var(--ard-muted) !important;
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}

.ard-prod-buybox__btn.is-disabled:hover {
	background: var(--ard-surface) !important;
	transform: none;
}

/* کل باکس خرید هم وقتی ترکیب انتخابی موجود نیست، کمی عقب می‌نشیند. */
.ard-prod-buybox.is-out .ard-prod-buybox__price-main,
.ard-prod-buybox.is-out .ard-prod-buybox__price-row {
	opacity: .55;
}

.ard-prod-buybox__btn:hover {
	background: var(--ard-accent-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(95, 163, 21, 0.45);
}

.ard-prod-buybox__wishlist-link {
	display: block;
	text-align: center;
	font-size: 11.5px;
	color: var(--ard-primary, var(--ard-primary)) !important;
	font-weight: 700;
	margin-top: 12px;
}

.ard-prod-guards {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ard-border-soft);
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ard-prod-guard {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	color: var(--ard-text-body);
}

.ard-prod-guard__icon {
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	background: var(--ard-tint-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ard-primary, var(--ard-primary));
	font-size: 11px;
	font-weight: 900;
}

/* ============================================================
   ویجت تب‌های محصول (Product Tabs)
   ============================================================ */

.ard-ptabs {
	width: 100%;
	margin: 32px 0 24px;
}

.ard-ptabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-bottom: 1px solid var(--ard-border-soft);
}

/* ---- حالت «همه بخش‌ها زیر هم» ---- */

/* در این حالت نوار عنوان‌ها ناوبری است، پس در فضای کم به‌جای شکستن به خط
   بعد، یک خط با اسکرول افقی می‌ماند تا چسبانی‌اش ارتفاع نگیرد. */
.ard-ptabs--sections .ard-ptabs__nav {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--ard-base);
}

.ard-ptabs--sections .ard-ptabs__nav::-webkit-scrollbar {
	display: none;
}

.ard-ptabs--sections .ard-ptabs__btn {
	flex: 0 0 auto;
	text-decoration: none;
}

.ard-ptabs--sticky-nav .ard-ptabs__nav {
	position: sticky;
	top: var(--ard-ptabs-offset, 0px);
	z-index: 5;
}

.ard-ptabs--sections .ard-ptabs__panel {
	padding-block: 26px;
	scroll-margin-top: calc(var(--ard-ptabs-offset, 0px) + 72px);
}

.ard-ptabs--sections .ard-ptabs__panel + .ard-ptabs__panel {
	border-top: 1px solid var(--ard-border-soft);
}

.ard-ptabs__panel-title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-ptabs__btn {
	padding: 13px 22px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ard-text-soft);
	border: 0;
	background: transparent;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	margin-bottom: -1px;
	transition: color 0.2s, border-color 0.2s;
	font-family: inherit;
}

.ard-ptabs__btn:hover {
	color: var(--ard-primary, var(--ard-primary-dark));
}

.ard-ptabs__btn.is-active {
	font-weight: 900;
	color: var(--ard-primary, var(--ard-primary-dark));
	border-bottom-color: var(--ard-accent, var(--ard-accent));
}

.ard-ptabs__panels {
	padding: 24px 0 4px;
}

.ard-ptabs__panel {
	display: none;
}

.ard-ptabs__panel.is-active {
	display: block;
	animation: ardFadeIn 0.3s ease;
}

@keyframes ardFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* تب مشخصات فنی */
.ard-ptabs-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 28px;
}

.ard-ptabs-specs__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 13px 14px;
	border-radius: 10px;
	font-size: 13px;
	background: var(--ard-base);
}

.ard-ptabs-specs__item--even {
	background: var(--ard-surface-alt);
}

.ard-ptabs-specs__key {
	width: 150px;
	flex: none;
	color: var(--ard-text-soft);
}

.ard-ptabs-specs__val {
	color: var(--ard-text);
	font-weight: 700;
}

/* تب توضیحات */
.ard-ptabs-desc {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.ard-ptabs-desc__text {
	flex: 2 1 340px;
	min-width: 290px;
	font-size: 14px;
	line-height: 2.1;
	color: var(--ard-text-body);
}

.ard-ptabs-desc__title {
	font-size: 16px;
	font-weight: 900;
	color: var(--ard-text);
	margin: 0 0 10px;
}

.ard-ptabs-desc__body p {
	margin: 0 0 14px;
}

.ard-ptabs-desc__media {
	flex: 1 1 300px;
	min-width: 270px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ard-ptabs-desc__img-box {
	height: 220px;
	border-radius: 14px;
	background: repeating-linear-gradient(45deg, var(--ard-surface) 0 10px, var(--ard-base) 10px 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ard-muted);
	font: 600 11px ui-monospace, monospace;
	overflow: hidden;
}

.ard-ptabs-desc__img-box--sm {
	height: 150px;
}

.ard-ptabs-desc__img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* تب نظرات */
.ard-ptabs-reviews {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.ard-ptabs-reviews__summary {
	flex: 1 1 260px;
	min-width: 250px;
	border: 1px solid var(--ard-border);
	border-radius: 16px;
	padding: 18px;
}

.ard-ptabs-reviews__score-wrap {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 6px;
}

.ard-ptabs-reviews__score {
	font-size: 38px;
	font-weight: 900;
	color: var(--ard-primary, var(--ard-primary-dark));
	line-height: 1;
}

/* دو عدد در یک خط با «·» در راست‌چین به هم می‌چسبیدند و «از ۵ · ۲ نظر» شبیه
   «از ۲۰۵ نظر» خوانده می‌شد؛ حالا هر کدام خط خودش را دارد. */
.ard-ptabs-reviews__note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	color: var(--ard-text-soft);
	padding-bottom: 6px;
}

.ard-ptabs-reviews__reviews {
	font-size: 11.5px;
	color: var(--ard-muted);
}

.ard-ptabs-reviews__stars {
	color: var(--ard-star);
	letter-spacing: 2px;
	font-size: 15px;
	margin-bottom: 16px;
}

.ard-ptabs-reviews__bars {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ard-ptabs-reviews__bar-row {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	color: var(--ard-text-soft);
}

.ard-ptabs-reviews__bar-label {
	width: 26px;
}

.ard-ptabs-reviews__bar-track {
	flex: 1;
	height: 7px;
	border-radius: 4px;
	background: var(--ard-border-soft);
	overflow: hidden;
	display: block;
}

.ard-ptabs-reviews__bar-fill {
	display: block;
	height: 100%;
	background: var(--ard-accent, var(--ard-accent));
	border-radius: 4px;
}

.ard-ptabs-reviews__bar-count {
	width: 24px;
	text-align: left;
}

.ard-ptabs-reviews__btn {
	display: block;
	width: 100%;
	margin-top: 18px;
	background: var(--ard-primary, var(--ard-primary));
	color: var(--ard-base);
	text-align: center;
	font-size: 13px;
	font-weight: 800;
	padding: 12px 0;
	border-radius: 11px;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: opacity 0.2s;
}

.ard-ptabs-reviews__btn:hover {
	opacity: 0.9;
}

.ard-ptabs-reviews__list {
	flex: 2 1 330px;
	min-width: 290px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ard-review-card {
	border: 1px solid var(--ard-border);
	border-radius: 16px;
	padding: 16px 18px;
}

.ard-review-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.ard-review-card__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ard-tint-blue);
	border: 1px solid var(--ard-tint-blue-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 900;
	color: var(--ard-primary, var(--ard-primary));
}

.ard-review-card__author {
	font-size: 13px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-review-card__stars {
	color: var(--ard-star);
	letter-spacing: 1.5px;
	font-size: 12px;
}

.ard-review-card__date {
	margin-right: auto;
	font-size: 11px;
	color: var(--ard-muted);
}

.ard-review-card__body {
	font-size: 13.5px;
	line-height: 2;
	color: var(--ard-text-body);
}

.ard-review-card__footer {
	display: flex;
	gap: 16px;
	margin-top: 12px;
	font-size: 11.5px;
	color: var(--ard-text-soft);
}

.ard-review-card__vote {
	background: transparent;
	border: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
}

.ard-review-card__vote:hover {
	color: var(--ard-primary, var(--ard-primary));
}

/* تب پرسش و پاسخ */
/* WooCommerce review form inside the product-tabs widget. */
.ard-ptabs-review-form {
	margin-top: 8px;
	padding: 20px;
	border: 1px solid var(--ard-border);
	border-radius: 16px;
	background: var(--ard-surface-alt);
}

.ard-ptabs-review-form .comment-reply-title {
	display: block;
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 900;
	color: var(--ard-text);
}

.ard-ptabs-review-form .comment-form-author,
.ard-ptabs-review-form .comment-form-email,
.ard-ptabs-review-form .comment-form-rating,
.ard-ptabs-review-form .comment-form-comment {
	margin: 0 0 13px;
}

.ard-ptabs-review-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ard-text-body);
}

.ard-ptabs-review-form input,
.ard-ptabs-review-form select,
.ard-ptabs-review-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	border: 1px solid var(--ard-border);
	border-radius: 9px;
	padding: 10px 12px;
	background: var(--ard-base);
	color: var(--ard-text);
	font: inherit;
}

.ard-ptabs-review-form textarea {
	resize: vertical;
	min-height: 120px;
}

.ard-ptabs-review-form input:focus,
.ard-ptabs-review-form select:focus,
.ard-ptabs-review-form textarea:focus {
	border-color: var(--ard-primary);
	outline: 2px solid color-mix(in srgb, var(--ard-primary) 18%, transparent);
	outline-offset: 1px;
}

.ard-ptabs-review-form .form-submit {
	margin: 18px 0 0;
}

.ard-ptabs-review-form .submit {
	border: 0;
	border-radius: 10px;
	padding: 11px 22px;
	background: var(--ard-primary);
	color: var(--ard-base);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
}

.ard-ptabs-reviews__verification {
	margin: 8px 0 0;
	padding: 13px;
	border-radius: 10px;
	background: var(--ard-tint-blue);
	color: var(--ard-text-body);
	font-size: 12px;
}

.ard-ptabs-qna {
	max-width: 860px;
}

.ard-ptabs-qna__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ard-qna-card {
	border: 1px solid var(--ard-border);
	border-radius: 16px;
	padding: 16px 18px;
}

.ard-qna-card__question {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ard-text);
}

.ard-qna-card__badge {
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 900;
}

.ard-qna-card__badge--q {
	background: var(--ard-tint-green);
	color: var(--ard-accent-deep);
}

.ard-qna-card__badge--a {
	background: var(--ard-tint-blue);
	color: var(--ard-primary, var(--ard-primary));
}

.ard-qna-card__answer {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--ard-border);
	font-size: 13px;
	line-height: 2;
	color: var(--ard-text-body);
}

/* ============================================================
   ویجت نوار چسبان خرید پایین صفحه (Sticky Bar)
   ============================================================ */

/* `sticky` اینجا کار نمی‌کرد: عنصر فقط نسبت به بلوک دربرگیرنده‌اش می‌چسبد و
   کانتینر ویجت المنتور کوتاه است، پس نوار عملاً همان‌جا می‌ماند. `fixed` نسبت
   به viewport است. جاوااسکریپت هم رَپِر ویجت را به body منتقل می‌کند تا
   ترنسفورمِ هر جد (انیمیشن‌های المنتور) بلوک دربرگیرنده نسازد. */
.ard-prod-sticky-bar {
	position: fixed;
	bottom: 0;
	inset-inline: 0;
	z-index: 99;
	background: var(--ard-base);
	border-top: 1px solid color-mix(in srgb, var(--ard-border) 70%, var(--ard-muted));
	box-shadow: 0 -8px 24px rgba(var(--ard-primary-dark-rgb), .08);
	padding: 14px clamp(14px, 2.5vw, 40px);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.ard-prod-sticky-bar--scroll {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

.ard-prod-sticky-bar--scroll.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.ard-prod-sticky-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	max-width: 1440px;
	margin: 0 auto;
}

.ard-prod-sticky-bar__media {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 12px;
	background: repeating-linear-gradient(45deg, var(--ard-surface) 0 8px, var(--ard-base) 8px 16px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ard-prod-sticky-bar__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ard-prod-sticky-bar__placeholder {
	width: 100%;
	height: 100%;
}

.ard-prod-sticky-bar__info {
	flex: 1 1 200px;
	min-width: 0;
}

.ard-prod-sticky-bar__title {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ard-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ard-prod-sticky-bar__variant {
	font-size: 11.5px;
	color: var(--ard-text-soft);
	margin-top: 3px;
}

.ard-prod-sticky-bar__action-group {
	margin-right: auto;
	display: flex;
	align-items: center;
	gap: 20px;
}

.ard-prod-sticky-bar__prices {
	text-align: left;
}

.ard-prod-sticky-bar__old {
	font-size: 11.5px;
	color: var(--ard-muted);
	text-decoration: line-through;
	display: block;
}

.ard-prod-sticky-bar__price {
	font-size: 19px;
	font-weight: 900;
	color: var(--ard-primary, var(--ard-primary-dark));
	white-space: nowrap;
}

.ard-prod-sticky-bar__unit {
	font-size: 11px;
	font-weight: 500;
}

.ard-prod-sticky-bar__btn {
	background: var(--ard-accent, var(--ard-accent)) !important;
	color: var(--ard-accent-ink) !important;
	font-size: 14.5px;
	font-weight: 900;
	padding: 14px 34px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s;
	text-decoration: none;
	display: inline-block;
	white-space: nowrap;
}

.ard-prod-sticky-bar__btn:hover {
	background: var(--ard-accent-hover) !important;
}


/* ============================================================
   ریسپانسیو صفحه محصول
   نقطه‌شکست‌ها همان‌هایی است که بقیه افزونه استفاده می‌کند.
   کنترل‌های ریسپانسیو المنتور با ویژگی اختصاصی‌تر این‌ها را
   بازنویسی می‌کنند؛ این‌ها فقط تور ایمنی چیدمان‌اند.
   ============================================================ */

@media (max-width: 1200px) {
	/* باکس خرید به زیر می‌رود و گالری و اطلاعات کنار هم می‌مانند. */
	.ard-prod-hero__col--buybox {
		flex-basis: 100%;
		max-inline-size: none;
	}
}

@media (max-width: 1024px) {
	.ard-prod-hero__layout {
		gap: 20px;
	}

	.ard-prod-hero__col--gallery {
		max-inline-size: 380px;
	}

	.ard-ptabs-desc,
	.ard-ptabs-reviews {
		gap: 22px;
	}
}

@media (max-width: 860px) {
	/* تک‌ستونی: هیچ min-width سختی نباید باعث سرریز افقی شود. */
	.ard-prod-hero__layout {
		gap: 18px;
	}

	.ard-prod-hero__col--gallery,
	.ard-prod-hero__col--info,
	.ard-prod-hero__col--buybox {
		flex: 1 1 100%;
		min-inline-size: 0;
		max-inline-size: none;
	}

	.ard-prod-quick,
	.ard-ptabs-specs {
		grid-template-columns: minmax(0, 1fr);
	}

	/* هر آیتم دو‌سطری: عنوان بولد بالا، مقدار پایین */
	.ard-prod-quick__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		padding: 10px 0;
		border-bottom: 1px solid var(--ard-border-soft);
	}

	.ard-prod-quick__item:last-child {
		border-bottom: 0;
	}

	.ard-prod-quick__dot {
		display: none;
	}

	.ard-prod-quick__key {
		min-width: 0;
		font-weight: 700;
		font-size: 13px;
		color: var(--ard-text);
	}

	.ard-prod-quick__val {
		font-weight: 400;
		font-size: 13px;
		color: var(--ard-text-soft);
	}

	.ard-ptabs-desc__text,
	.ard-ptabs-desc__media,
	.ard-ptabs-reviews__summary,
	.ard-ptabs-reviews__list {
		flex: 1 1 100%;
		min-inline-size: 0;
	}

	/* نوار تب‌ها در یک خط با اسکرول، تا عنوان‌ها شکسته نشوند. */
	.ard-ptabs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ard-ptabs__nav::-webkit-scrollbar {
		display: none;
	}

	.ard-ptabs__btn {
		white-space: nowrap;
	}

	.ard-prod-meta {
		gap: 8px 12px;
		font-size: 12px;
	}

	.ard-prod-hero__title {
		font-size: 19px;
	}

	.ard-prod-buybox__price-main {
		font-size: 22px;
	}

	/* نوار چسبان: در موبایل فقط قیمت و دکمه لازم است. */
	.ard-prod-sticky-bar__inner {
		gap: 10px 12px;
	}

	.ard-prod-sticky-bar__media {
		display: none;
	}

	.ard-prod-sticky-bar__info {
		flex: 1 1 100%;
		min-inline-size: 0;
	}

	.ard-prod-sticky-bar__title {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.ard-prod-sticky-bar__action-group {
		inline-size: 100%;
		justify-content: space-between;
	}

	.ard-prod-sticky-bar__btn {
		flex: 1;
		text-align: center;
	}
}

@media (max-width: 600px) {
	/* فقط فاصله؛ تعداد بندانگشتی‌ها کنترل ریسپانسیو خودِ ویجت است و اینجا
	   بازنویسی‌اش نمی‌کنیم. */
	.ard-prod-gallery__thumbs {
		--ard-thumb-gap: 8px;
	}

	.ard-prod-gallery__thumb {
		height: 62px;
	}

	.ard-prod-gallery__zoom-hint {
		display: none;
	}

	.ard-prod-sizes {
		gap: 7px;
	}

	.ard-prod-colors {
		flex-wrap: wrap;
		gap: 8px;
	}

	.ard-ptabs-reviews__summary {
		padding: 14px;
	}

	.ard-review-card__header {
		flex-wrap: wrap;
		gap: 6px 10px;
	}

	.ard-review-card__date {
		margin-inline-start: 0;
	}

	.ard-prod-guards {
		gap: 9px;
	}
}

/* هیچ بخشی از صفحه محصول نباید صفحه را پهن‌تر از دستگاه کند. */
[class*="elementor-widget-ardal-product-"] {
	max-inline-size: 100%;
	overflow-wrap: break-word;
}

/* ============================================================
   لایت‌باکس تصویر محصول
   ============================================================ */

.ard-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 48px);
	background: rgba(var(--ard-primary-dark-rgb), .92);
	backdrop-filter: blur(6px);
	direction: rtl;
}

.ard-lightbox.is-open {
	display: flex;
}

.ard-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
}

.ard-lightbox__img {
	max-inline-size: 100%;
	max-block-size: 100%;
	border-radius: var(--ard-radius);
	background: var(--ard-base);
	object-fit: contain;
	/* کشیدن انگشت افقی برای تعویض تصویر آزاد بماند. */
	touch-action: pan-y;
}

.ard-lightbox__close,
.ard-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	/* پس‌زمینهٔ تیره تا دکمه روی تصویرهای روشن هم خوانا بماند. */
	background: rgba(var(--ard-primary-dark-rgb), .55);
	color: var(--ard-base);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s;
}

.ard-lightbox__close:hover,
.ard-lightbox__nav:hover {
	background: rgba(var(--ard-primary-dark-rgb), .8);
}

.ard-lightbox__close {
	top: 16px;
	left: 16px;
}

.ard-lightbox__nav {
	top: 50%;
	translate: 0 -50%;
}

/* در RTL «قبلی» سمت راست می‌نشیند. */
.ard-lightbox__nav--prev {
	right: 16px;
}

.ard-lightbox__nav--next {
	left: 16px;
}

/* شِوران با ضلع‌های فیزیکی ساخته می‌شود؛ داخل کانتینر RTL نگاشتِ منطقی
   جهت را برعکس می‌کرد و پیکان به بالا می‌افتاد. */
.ard-lightbox__nav::before {
	content: "";
	inline-size: 12px;
	block-size: 12px;
	border-left: 2px solid currentColor;
	border-top: 2px solid currentColor;
}

/* «قبلی» سمت راست است و باید به راست اشاره کند. */
.ard-lightbox__nav--prev::before {
	rotate: 135deg;
	margin-left: 5px;
}

.ard-lightbox__nav--next::before {
	rotate: -45deg;
	margin-right: 5px;
}

.ard-prod-gallery[data-single="yes"] ~ .ard-lightbox .ard-lightbox__nav {
	display: none;
}

@media (max-width: 600px) {
	.ard-lightbox__close,
	.ard-lightbox__nav {
		inline-size: 38px;
		block-size: 38px;
	}

	.ard-lightbox__nav--prev {
		right: 8px;
	}

	.ard-lightbox__nav--next {
		left: 8px;
	}
}

/* روی دستگاه لمسی، تصویر با کلیک باز می‌شود پس نشانگر باید گویا باشد. */
.ard-prod-gallery[data-lightbox="yes"] .ard-prod-gallery__slide {
	cursor: zoom-in;
}

/* ============================================================
   تاریخ به‌روزرسانی قیمت
   ============================================================ */

.ard-price-date {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12.5px;
	color: color-mix(in srgb, var(--ard-text-soft) 55%, var(--ard-muted));
	line-height: 1.7;
}

.ard-price-date--boxed {
	padding: 9px 14px;
	border: 1px solid var(--ard-border-soft);
	border-radius: calc(var(--ard-radius) * 0.75);
	background: var(--ard-surface);
}

.ard-price-date__icon {
	display: inline-flex;
	flex: none;
	color: var(--ard-primary);
}

.ard-price-date__value {
	font-weight: 800;
	color: var(--ard-text);
}

/* ============================================================
   توست — جای پیام‌های ووکامرس
   ============================================================ */

/*
 * فیلتر ژله‌ای فقط باید تعریف شود، نه دیده. صفر در صفر با visibility:hidden
 * کافی است و برخلاف display:none، فیلتر همچنان قابل ارجاع می‌ماند.
 */
.ard-toasts__filter {
	position: absolute;
	inline-size: 0;
	block-size: 0;
	visibility: hidden;
}

.ard-toasts {
	position: fixed;
	z-index: 100020;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	display: flex;
	flex-direction: column-reverse;
	gap: 6px;
	max-inline-size: min(380px, calc(100vw - 32px));
	/* خودِ ظرف کلیک نمی‌گیرد تا صفحه زیرش قابل استفاده بماند. */
	pointer-events: none;
	/*
	 * ژله‌ای شدن: توست‌های نزدیک به هم با بلور + کنتراست به هم می‌چسبند و
	 * موقع رفتن مثل قطره از هم جدا می‌شوند. گذارِ خود توست‌ها این حرکت را
	 * می‌سازد؛ فیلتر فقط لبه‌ها را می‌دوزد.
	 */
	filter: url(#ard-gooey);
}

.ard-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	background: var(--ard-primary-dark);
	color: var(--ard-base);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(14px) scale(.86);
	transition: opacity .28s ease, transform .38s cubic-bezier(.22, 1.2, .36, 1);
}

.ard-toast.is-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.ard-toast.is-out {
	opacity: 0;
	transform: translateY(-6px) scale(.8);
}

.ard-toast--success {
	background: var(--ard-accent-deep);
}

.ard-toast--error {
	background: var(--ard-sale);
}

.ard-toast--info {
	background: var(--ard-primary-dark);
}

.ard-toast__icon {
	display: flex;
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
}

.ard-toast__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

.ard-toast__text {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.ard-toast__close {
	flex: 0 0 auto;
	padding: 0 2px;
	background: none;
	border: 0;
	color: inherit;
	font-size: 19px;
	line-height: 1;
	opacity: .7;
	cursor: pointer;
}

.ard-toast__close:hover {
	opacity: 1;
}

/* دکمهٔ لینک داخل توست، مثل «ورود به حساب» یا «مشاهدهٔ فهرست». */
.ard-toast__action {
	flex: 0 0 auto;
	padding: 5px 11px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .18);
	color: inherit;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s;
}

.ard-toast__action:hover {
	background: rgba(255, 255, 255, .3);
	color: inherit;
}

/* تپش قلب وقتی محصول به علاقه‌مندی اضافه می‌شود؛ روی همهٔ دکمه‌های قلب. */
@keyframes ard-wish-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.28); }
	70% { transform: scale(.92); }
	100% { transform: scale(1); }
}

[data-ard-wishlist].is-pop svg {
	animation: ard-wish-pop .45s ease;
}

[data-ard-wishlist].is-busy {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	[data-ard-wishlist].is-pop svg {
		animation: none;
	}
}

@media (max-width: 600px) {
	.ard-toasts {
		inset-block-end: 16px;
		inset-inline: 16px;
		max-inline-size: none;
	}
}

/*
 * بدون انیمیشن: فیلتر ژله‌ای هم کنار می‌رود. آن افکت از حرکت معنا می‌گیرد و
 * بدون حرکت فقط لبه‌ها را مبهم می‌کند.
 */
@media (prefers-reduced-motion: reduce) {
	.ard-toasts {
		filter: none;
	}

	.ard-toast {
		transition: opacity .01ms;
		transform: none;
	}

	.ard-toast.is-in,
	.ard-toast.is-out {
		transform: none;
	}
}

/* ============================================================
   جدول واریاسیون‌ها
   ============================================================ */

.ard-vtable {
	--ard-vt-head: var(--ard-surface);
	--ard-vt-head-ink: var(--ard-text);
	--ard-vt-line: var(--ard-border);
	--ard-vt-zebra: var(--ard-surface-alt);
	--ard-vt-price: var(--ard-primary-dark);
	--ard-vt-radius: var(--ard-radius);
	--ard-vt-pad: 12px;
}

.ard-vtable__title {
	margin-block-end: 12px;
	font-size: 16px;
	font-weight: 800;
	color: var(--ard-text);
}

/* جدول چندستونه در موبایل جا نمی‌شود؛ خودش اسکرول می‌خورد نه کل صفحه. */
.ard-vtable__scroll {
	overflow-x: auto;
	border: 1px solid var(--ard-vt-line);
	border-radius: var(--ard-vt-radius);
	-webkit-overflow-scrolling: touch;
}

.ard-vtable__table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	text-align: start;
}

.ard-vtable__table th,
.ard-vtable__table td {
	padding: var(--ard-vt-pad);
	border-block-end: 1px solid var(--ard-vt-line);
	text-align: start;
	white-space: nowrap;
}

.ard-vtable__table th {
	background: var(--ard-vt-head);
	color: var(--ard-vt-head-ink);
	font-weight: 800;
}

.ard-vtable__table tbody tr:nth-child(2n) {
	background: var(--ard-vt-zebra);
}

.ard-vtable__table tbody tr:last-child td {
	border-block-end: 0;
}

.ard-vtable__price {
	color: var(--ard-vt-price);
	font-weight: 800;
}

.ard-vtable__old {
	margin-inline-end: 6px;
	color: var(--ard-muted);
	font-size: 11.5px;
	font-weight: 500;
}

.ard-vtable__off {
	display: inline-block;
	margin-inline-end: 6px;
	padding: 1px 6px;
	border-radius: 20px;
	background: var(--ard-sale);
	color: var(--ard-base);
	font-size: 11px;
	font-weight: 800;
}

.ard-vtable__tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--ard-tint-green);
	color: var(--ard-accent-deep);
	font-size: 11.5px;
	font-weight: 700;
}

.ard-vtable__tag.is-out {
	background: var(--ard-sale-soft);
	color: var(--ard-sale);
}

/* ردیف ناموجود کم‌رنگ می‌شود، ولی خوانا می‌ماند. */
.ard-vtable__row.is-out td {
	color: var(--ard-muted);
}

.ard-vtable__row.is-out .ard-vtable__now {
	text-decoration: line-through;
}

.ard-vtable__empty {
	padding: 14px;
	border: 1px dashed var(--ard-border);
	border-radius: var(--ard-radius);
	color: var(--ard-text-soft);
	font-size: 13px;
	text-align: center;
}

/*
 * موبایل: جدول به کارت تبدیل می‌شود.
 *
 * حتی با اسکرول افقی، جدول پنج‌ستونه روی ۳۹۰ پیکسل خواندنی نیست؛ هر ردیف
 * یک کارت می‌شود و نام ستون از data-label کنار مقدار می‌نشیند.
 */
@media (max-width: 600px) {
	.ard-vtable__scroll {
		overflow-x: visible;
		border: 0;
	}

	.ard-vtable__table thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.ard-vtable__table tbody tr {
		display: block;
		margin-block-end: 10px;
		border: 1px solid var(--ard-vt-line);
		border-radius: var(--ard-vt-radius);
		background: var(--ard-base);
	}

	.ard-vtable__table tbody tr:nth-child(2n) {
		background: var(--ard-vt-zebra);
	}

	.ard-vtable__table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		white-space: normal;
	}

	.ard-vtable__table td::before {
		content: attr(data-label);
		color: var(--ard-text-soft);
		font-size: 12px;
		font-weight: 700;
	}
}

/* ==========================================================================
   برچسب‌های نوشته (ard-ptags)
   ========================================================================== */

.ard-ptags {
	/*
	 * رنگ‌ها متغیرند تا کنترل‌های المنتور فقط یک متغیر را روی ریشه بنویسند و
	 * حالت هاور هم بدون نوشتن قانون دوم از آن‌ها بیاید.
	 */
	--ard-ptag-bg: var(--ard-soft, #f3f4f6);
	--ard-ptag-ink: var(--ard-ink, #1f2937);
	--ard-ptag-line: transparent;
	--ard-ptag-bg-hover: var(--ard-primary, #0f766e);
	--ard-ptag-ink-hover: #fff;
	--ard-ptag-radius: 999px;
}

.ard-ptags__title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ard-ink, #1f2937);
}

.ard-ptags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ard-ptags__item {
	display: flex;
}

.ard-ptags__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--ard-ptag-line);
	border-radius: var(--ard-ptag-radius);
	background: var(--ard-ptag-bg);
	color: var(--ard-ptag-ink);
	font-size: 12.5px;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

a.ard-ptags__chip:hover,
a.ard-ptags__chip:focus-visible {
	border-color: var(--ard-ptag-bg-hover);
	background: var(--ard-ptag-bg-hover);
	color: var(--ard-ptag-ink-hover);
}

/* شمارنده در هاور هم باید خوانا بماند، پس رنگش را از خود چیپ می‌گیرد. */
.ard-ptags__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 14%, transparent);
	font-size: 11px;
	font-weight: 700;
}

.ard-ptags__empty {
	margin: 0;
	font-size: 12.5px;
	color: var(--ard-muted, #6b7280);
}

/* ==========================================================================
   شمارش معکوس مستقل (ard-cdown)
   ========================================================================== */

.ard-cdown {
	--ard-cdown-bg: transparent;
	--ard-cdown-radius: var(--ard-radius-lg, 16px);
	--ard-cdown-pad: 0px;
	--ard-cdown-title: var(--ard-ink, #1f2937);
	--ard-cdown-sub: var(--ard-muted, #6b7280);

	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var(--ard-cdown-pad);
	border-radius: var(--ard-cdown-radius);
	background: var(--ard-cdown-bg);
}

.ard-cdown__head {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ard-cdown-title);
}

.ard-cdown__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.ard-cdown__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.7;
	color: inherit;
}

.ard-cdown__sub {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--ard-cdown-sub);
}

.ard-cdown__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ard-cdown__clock {
	display: flex;
}

/*
 * خانه‌ها به اندازهٔ محتوایشان‌اند، نه کش‌آمده.
 *
 * `.ard-clock__cell` پایه `flex: 1` دارد چون در «پیشنهاد ویژه» عرض باکس را
 * پر می‌کند؛ اینجا شمارنده وسط‌چین است و کشیدنِ خانه‌ها تراز را خراب می‌کند.
 */
.ard-cdown .ard-clock__cell {
	flex: 0 0 auto;
}

.ard-cdown__sep {
	align-self: center;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	color: var(--ard-cdown-title);
	opacity: .5;
}

/*
 * وقتی هیچ خانه‌ای برچسب ندارد، فاصلهٔ عمودی اضافه هم لازم نیست.
 *
 * شرط روی خودِ شمارنده است نه تک‌تک خانه‌ها: حالا که هر برچسب جداگانه
 * پاک‌شدنی است، اگر قانون روی خانه می‌نشست، خانهٔ بی‌برچسب پدینگ دیگری
 * می‌گرفت و ردیف ناهموار می‌شد.
 */
.ard-cdown .ard-clock:not(:has(.ard-clock__label)) .ard-clock__cell {
	padding-block: 10px;
}

/*
 * خانه‌ای که برچسبش پاک شده، عددش وسط بماند نه چسبیده به بالا — وگرنه کنارِ
 * خانه‌های برچسب‌دار که هم‌ارتفاع کشیده می‌شوند، بالا می‌ایستد.
 */
.ard-cdown .ard-clock__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ard-cdown__product {
	max-inline-size: 260px;
}

.ard-cdown__msg {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--ard-radius-sm, 10px);
	background: var(--ard-soft, #f3f4f6);
	font-size: 13px;
	line-height: 1.9;
	color: var(--ard-muted, #6b7280);
	text-align: center;
}

.ard-cdown--done .ard-cdown__clock {
	display: none;
}

/* ==========================================================================
   ماتریس واریاسیون‌ها (ard-mtx)
   ========================================================================== */

.ard-mtx {
	--ard-mtx-head-bg: var(--ard-soft, #f3f4f6);
	--ard-mtx-head-ink: var(--ard-ink, #1f2937);
	--ard-mtx-line: var(--ard-border, #e5e7eb);
	--ard-mtx-in: #16a34a;
	--ard-mtx-out: #dc2626;
	--ard-mtx-none: #9ca3af;
	--ard-mtx-price: var(--ard-ink, #1f2937);
	--ard-mtx-radius: var(--ard-radius-lg, 14px);
	--ard-mtx-pad: 10px;

	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ard-mtx__title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--ard-ink, #1f2937);
}

.ard-mtx__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ard-mtx__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: var(--ard-muted, #6b7280);
}

.ard-mtx__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ard-mtx__legend-item.is-in    { color: var(--ard-mtx-in); }
.ard-mtx__legend-item.is-out   { color: var(--ard-mtx-out); }
.ard-mtx__legend-item.is-none  { color: var(--ard-mtx-none); }

.ard-mtx__filters[class] {
	display: inline-flex;
	gap: 4px;
	padding: 3px;
	border-radius: 999px;
	background: var(--ard-soft, #f3f4f6);
}

.ard-mtx__filter[class] {
	padding: 5px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ard-muted, #6b7280);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.ard-mtx__filter[class].is-active {
	background: var(--ard-base, #fff);
	color: var(--ard-ink, #1f2937);
	font-weight: 700;
}

/* جدول روی موبایل باریک‌تر از ستون‌هایش می‌شود؛ اسکرول افقی جای شکستنش. */
.ard-mtx__scroll {
	overflow-x: auto;
	border: 1px solid var(--ard-mtx-line);
	border-radius: var(--ard-mtx-radius);
}

.ard-mtx__table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	text-align: center;
}

.ard-mtx__table th,
.ard-mtx__table td {
	padding: var(--ard-mtx-pad);
	border-inline-start: 1px solid var(--ard-mtx-line);
	border-block-start: 1px solid var(--ard-mtx-line);
}

.ard-mtx__table thead th,
.ard-mtx__table tr > *:first-child {
	border-block-start: 0;
}

.ard-mtx__table tr > *:last-child {
	border-inline-start: 0;
}

.ard-mtx__table thead th {
	background: var(--ard-mtx-head-bg);
	color: var(--ard-mtx-head-ink);
	font-weight: 800;
	white-space: nowrap;
}

.ard-mtx__row-head,
.ard-mtx__name {
	text-align: start;
	white-space: nowrap;
}

.ard-mtx__name {
	background: color-mix(in srgb, var(--ard-mtx-head-bg) 45%, transparent);
	font-weight: 700;
	color: var(--ard-ink, #1f2937);
}

.ard-mtx__box {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.ard-mtx__icon {
	flex: 0 0 auto;
}

.ard-mtx__cell.is-in    { color: var(--ard-mtx-in); }
.ard-mtx__cell.is-out   { color: var(--ard-mtx-out); }
.ard-mtx__cell.is-none  { color: var(--ard-mtx-none); }

.ard-mtx__cell.is-none .ard-mtx__box {
	opacity: .65;
}

.ard-mtx__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.6;
}

.ard-mtx__state {
	font-size: 11px;
}

.ard-mtx__price {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ard-mtx-price);
	white-space: nowrap;
}

.ard-mtx__price .ard-toman {
	inline-size: 1em;
	block-size: 1em;
}

.ard-mtx__none,
.ard-mtx__empty {
	margin: 0;
	padding: 16px;
	font-size: 12.5px;
	color: var(--ard-muted, #6b7280);
	text-align: center;
}

.ard-mtx__note {
	margin: 0;
	font-size: 12px;
	line-height: 1.9;
	color: var(--ard-muted, #6b7280);
}

/* ردیفی که فیلتر کنارش گذاشته. */
.ard-mtx__row[hidden] {
	display: none;
}

/*
 * موبایل: هر ردیف یک کارت.
 *
 * ستون‌های یک ماتریس روی صفحهٔ باریک جا نمی‌شوند و اسکرول افقی هم خواندن
 * «کدام سایزِ این رنگ» را سخت می‌کند؛ پس هر خانه برچسب ستون خودش را از
 * data-label می‌گیرد و زیر هم می‌نشیند.
 */
@media (max-width: 600px) {
	.ard-mtx__scroll {
		overflow-x: visible;
		border: 0;
	}

	.ard-mtx__table,
	.ard-mtx__table tbody,
	.ard-mtx__row,
	.ard-mtx__table td,
	.ard-mtx__table th {
		display: block;
		inline-size: auto;
	}

	.ard-mtx__table thead {
		display: none;
	}

	.ard-mtx__row {
		margin-block-end: 10px;
		border: 1px solid var(--ard-mtx-line);
		border-radius: var(--ard-mtx-radius);
		overflow: hidden;
	}

	.ard-mtx__table td,
	.ard-mtx__table th {
		border-inline-start: 0;
	}

	.ard-mtx__name {
		border-block-start: 0;
		font-size: 13px;
	}

	.ard-mtx__cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		text-align: start;
	}

	.ard-mtx__cell::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--ard-ink, #1f2937);
	}

	.ard-mtx__box {
		flex-direction: row;
		align-items: center;
		gap: 6px;
	}

	.ard-mtx__text {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
}

/* ==========================================================================
   کارت محصول — سبک «دکمه آشکارشونده» (ard-pcard--reveal)

   اندازه‌ها از خودِ دیزاین درآمده‌اند: پدینگ کارت ۱۲، پنل تصویر با گردی ۱۴،
   دکمه ۴۸ بلند با گردی ۱۰، و نشان درصد که بالای قیمتِ خط‌خورده می‌نشیند.
   ========================================================================== */

.ard-pcard--reveal {
	--ard-reveal-pad: 12px;
	--ard-reveal-card-bg: var(--ard-base, #fff);
	--ard-reveal-media-bg: #f8f8f8;
	--ard-reveal-media-radius: 14px;

	--ard-reveal-btn-bg: #f11763;
	--ard-reveal-btn-ink: #fff;
	--ard-reveal-btn-bg-hover: var(--ard-reveal-btn-bg);
	--ard-reveal-btn-ink-hover: var(--ard-reveal-btn-ink);
	--ard-reveal-btn-radius: 10px;
	--ard-reveal-btn-gap: 4px;
	--ard-reveal-icon-size: 19px;
	--ard-reveal-icon-gap: 8px;

	--ard-reveal-off-bg: #e31336;
	--ard-reveal-off-ink: #fff;
	--ard-reveal-off-radius: 8px;
	--ard-reveal-old-ink: var(--ard-muted, #8a8a8c);
	--ard-reveal-price-ink: #2f2f33;

	/*
	 * ارتفاع ناحیهٔ پایین.
	 *
	 * دکمه دقیقاً همین‌قدر است تا وقتی بالا می‌آید، ردیف قیمت را کامل بپوشاند.
	 * اگر از روی محتوا حساب می‌شد، کارتِ بی‌تخفیف ناحیهٔ کوتاه‌تری داشت و دکمه
	 * نصفه می‌ماند.
	 */
	--ard-reveal-foot: 48px;
}

.ard-pcard--reveal .ard-pcard__box {
	gap: 8px;
	padding: var(--ard-reveal-pad);
	border: 1px solid var(--ard-border);
	border-radius: var(--ard-radius-xl, 18px);
	background: var(--ard-reveal-card-bg);
}

.ard-pcard--reveal.ard-pcard:hover .ard-pcard__box {
	border-color: color-mix(in srgb, var(--ard-reveal-btn-bg) 30%, var(--ard-border));
}

.ard-pcard--reveal .ard-pcard__media {
	block-size: var(--ard-card-img-h, 199px);
	border-radius: var(--ard-reveal-media-radius);
	background: var(--ard-reveal-media-bg);
	overflow: hidden;
}

/*
 * تصویر به نسبت خودش.
 *
 * ارتفاع از محتوا می‌آید و object-fit کنار می‌رود، پس عکس تمام پهنای کارت را
 * می‌گیرد و قدش را نسبت اصلی خودِ فایل تعیین می‌کند — هیچ بخشی بریده نمی‌شود.
 * در عوض کارت‌هایی که عکس‌شان نسبت‌های متفاوت دارد هم‌قد نمی‌مانند؛ همین است
 * که این حالت پیش‌فرض نیست.
 */
.ard-reveal-media-natural .ard-pcard--reveal .ard-pcard__media {
	block-size: auto;
}

.ard-reveal-media-natural .ard-pcard--reveal .ard-pcard__media img {
	block-size: auto;
	object-fit: fill;
}

.ard-pcard--reveal .ard-pcard__title {
	/* در دیزاین، عنوان راست‌چین است و تا سه خط بالا می‌آید. */
	text-align: start;
}

/* ---------------------------------------- ناحیهٔ پایین: قیمت و دکمه */

/*
 * پیش‌فرض، حالتِ بدون هاور است: دکمه همیشه هست و زیر قیمت می‌نشیند.
 *
 * این‌طور مرورگری که (hover: hover) را نمی‌فهمد هم دکمهٔ قابل استفاده دارد؛
 * اگر برعکس می‌نوشتیم، آنجا دکمه برای همیشه پنهان می‌ماند.
 */
.ard-pcard--reveal .ard-pcard__foot {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block-start: auto;
}

.ard-pcard--reveal .ard-pcard__prices {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 2px 8px;
	margin-block-start: 0;
	padding-block-end: 0;
	/*
	 * آیتم‌های فلکس پیش‌فرض min-width: auto دارند و زیر عرضِ محتوایشان کوچک
	 * نمی‌شوند؛ قیمت هم nowrap است. بدون این، «قیمت + قیمت قبل + درصد» یک
	 * کفِ عرض می‌ساختند که کارت را از ستونش بیرون می‌زد.
	 */
	min-inline-size: 0;
	flex-wrap: wrap;
}

/*
 * ترتیب دیداری، مطابق دیزاین: گروه «درصد + قیمت قبل» در آغاز خط (راست) و
 * قیمت در پایان آن (چپ). مارک‌آپ عمداً عوض نشده تا بقیهٔ سبک‌ها دست‌نخورده
 * بمانند؛ فقط order جابه‌جا می‌شود.
 */
.ard-pcard--reveal .ard-pcard__offbox { order: 0; }
.ard-pcard--reveal .ard-pcard__old    { order: 0; }
.ard-pcard--reveal .ard-pcard__off    { order: 1; }
.ard-pcard--reveal .ard-pcard__price  { order: 2; margin-inline-start: auto; }

/* برعکسش، برای کسی که قیمت را سمت شروع می‌خواهد. */
.ard-reveal-price-start .ard-pcard--reveal .ard-pcard__price  { order: 0; margin-inline-start: 0; }
.ard-reveal-price-start .ard-pcard--reveal .ard-pcard__offbox { order: 1; margin-inline-start: auto; }
.ard-reveal-price-start .ard-pcard--reveal .ard-pcard__old    { order: 1; margin-inline-start: auto; }
.ard-reveal-price-start .ard-pcard--reveal .ard-pcard__off    { order: 2; }

.ard-pcard--reveal .ard-pcard__price {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	font-size: 14.5px;
	color: var(--ard-reveal-price-ink);
}

/*
 * نماد باریک تومان.
 *
 * ارتفاعش با قد عدد تنظیم می‌شود نه با پهنا؛ viewBox نسبتش را نگه می‌دارد
 * (۹ در ۲۲) پس پهنا خودش درمی‌آید و خط قیمت باز نمی‌شود.
 */
.ard-pcard--reveal .ard-toman--slim {
	block-size: var(--ard-reveal-toman-h, 1.45em);
	inline-size: auto;
}

/*
 * ستونِ «درصد روی قیمتِ قبل».
 *
 * هر دو راست‌چین‌اند تا لبهٔ پایانی‌شان روی هم بیفتد، همان‌طور که در دیزاین
 * نشان و قیمت خط‌خورده از یک خط شروع می‌شوند.
 */
.ard-pcard--reveal .ard-pcard__offbox {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	/*
	 * flex-start یعنی لبهٔ آغازِ خط — در فارسی سمت راست. با flex-end هر دو به
	 * چپِ ستون می‌چسبیدند و نشان از لبهٔ کارت فاصله می‌گرفت.
	 */
	align-items: flex-start;
	gap: 3px;
}

.ard-pcard--reveal .ard-pcard__offbox .ard-pcard__old,
.ard-pcard--reveal .ard-pcard__offbox .ard-pcard__off {
	order: 0;
	margin: 0;
}

.ard-pcard--reveal .ard-pcard__old {
	flex: 0 1 auto;
	min-inline-size: 0;
	font-size: 11px;
	color: var(--ard-reveal-old-ink);
	text-decoration: line-through;
	white-space: nowrap;
}

.ard-pcard__off {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 1px 6px;
	border-radius: var(--ard-reveal-off-radius, 999px);
	background: var(--ard-reveal-off-bg, var(--ard-sale, #e31336));
	color: var(--ard-reveal-off-ink, #fff);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.32;
	white-space: nowrap;
}

/* ---------------------------------------- دکمه */

.ard-pcard--reveal .ard-pcard__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ard-reveal-icon-gap);
	padding: 0;
	block-size: var(--ard-reveal-foot);
	border: 0;
	border-radius: var(--ard-reveal-btn-radius);
	background: var(--ard-reveal-btn-bg);
	color: var(--ard-reveal-btn-ink);
	font-size: 13.5px;
	font-weight: 800;
	/* دکمه است، نه پیوندِ متنی؛ خطِ زیرِ پوسته نباید رویش بیفتد. */
	text-decoration: none;
}

.ard-pcard--reveal .ard-pcard__btn:hover,
.ard-pcard--reveal .ard-pcard__btn:focus-visible {
	background: var(--ard-reveal-btn-bg-hover);
	color: var(--ard-reveal-btn-ink-hover);
	text-decoration: none;
}

.ard-pcard--reveal .ard-pcard__btn-icon {
	flex: 0 0 auto;
	inline-size: var(--ard-reveal-icon-size);
	block-size: var(--ard-reveal-icon-size);
}

/* فونت‌آیکونِ انتخابی کاربر اندازه‌اش از همان متغیر بیاید. */
.ard-pcard--reveal .ard-pcard__btn i.ard-pcard__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ard-reveal-icon-size);
	line-height: 1;
}

/* آیکون پس از متن، وقتی کاربر خواست. */
.ard-reveal-icon-end-yes .ard-pcard--reveal .ard-pcard__btn-icon {
	order: 2;
}

/*
 * آشکارشدن فقط جایی که هاور واقعاً وجود دارد.
 *
 * با (hover: hover) به‌جای یک بریک‌پوینت عرضی، تبلتِ لمسیِ عریض هم دکمهٔ
 * همیشگی می‌گیرد و پنجرهٔ باریکِ دسکتاپ هاورش را از دست نمی‌دهد.
 */
@media (hover: hover) and (pointer: fine) {
	.ard-pcard--reveal .ard-pcard__foot {
		display: block;
		block-size: var(--ard-reveal-foot);
		/*
		 * دکمه از بیرونِ همین قاب بالا می‌آید؛ بدون بریدن، پیش از هاور زیر
		 * کارت دیده می‌شد و ارتفاع کارت را هم زیاد می‌کرد.
		 */
		overflow: hidden;
	}

	.ard-pcard--reveal .ard-pcard__prices {
		flex-wrap: nowrap;
		block-size: 100%;
	}

	/* نوار یک‌خطی است، پس اینجا قیمتِ قبل کوتاه می‌شود نه اینکه بشکند. */
	.ard-pcard--reveal .ard-pcard__old {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ard-pcard--reveal .ard-pcard__btn {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		transform: translateY(105%);
		transition: transform .28s cubic-bezier(.2, .8, .3, 1);
	}

	.ard-pcard--reveal:hover .ard-pcard__btn,
	.ard-pcard--reveal:focus-within .ard-pcard__btn {
		transform: none;
	}

	/* قیمت زیر دکمه محو می‌شود تا لبه‌هایش از پشت پیدا نباشد. */
	.ard-pcard--reveal .ard-pcard__prices {
		transition: opacity .2s ease;
	}

	.ard-pcard--reveal:hover .ard-pcard__prices,
	.ard-pcard--reveal:focus-within .ard-pcard__prices {
		opacity: 0;
	}
}

/* فاصلهٔ دکمه از پایین کارت، در هر دو حالت. */
.ard-pcard--reveal .ard-pcard__box {
	padding-block-end: calc(var(--ard-reveal-pad) + var(--ard-reveal-btn-gap));
}

@media (prefers-reduced-motion: reduce) {
	.ard-pcard--reveal .ard-pcard__btn,
	.ard-pcard--reveal .ard-pcard__prices {
		transition: none;
	}
}

/* متنی که فقط صفحه‌خوان باید ببیند. */
.ard-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.ard-comments {
	position: relative;
	direction: rtl;
	color: #f5f5f8;
	background-image: var(--ard-comments-bg, none);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
.ard-comments__header { display: flex; align-items: center; gap: 12px; min-height: 54px; }
.ard-comments__header-icon, .ard-comments__form-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.ard-comments__header-icon .ard-i, .ard-comments__form-icon .ard-i { width: 26px; height: 26px; }
.ard-comments__heading { margin: 0; font-size: 25px; line-height: 1.4; }
.ard-comments__count { display: inline-flex; min-width: 28px; height: 28px; padding: 0 8px; align-items: center; justify-content: center; border-radius: 20px; background: #f20d5b; color: #fff; font-size: 13px; }
.ard-comments__rule { height: 1px; margin: 18px 0 30px; background: rgba(220,221,229,.75); }
.ard-comments__rule::after { display: block; width: 100px; height: 2px; margin-inline-start: auto; background: #f20d5b; content: ''; }
.ard-comments__list, .ard-comments__children { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.ard-comments__item { min-width: 0; }
.ard-comments__card { display: grid; grid-template-columns: minmax(150px, 22%) minmax(0, 1fr); align-items: stretch; gap: 12px; min-height: 150px; padding: 18px; color: #34343a; background-color: #fff; background-image: var(--ard-comments-surface, none); background-position: center; background-size: cover; -webkit-mask-image: var(--ard-comments-mask, none); mask-image: var(--ard-comments-mask, none); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ard-comments__identity { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; background-image: var(--ard-comments-surface, none); background-position: center; background-size: cover; -webkit-mask-image: var(--ard-comments-mask, none); mask-image: var(--ard-comments-mask, none); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ard-comments__avatar { display: inline-flex; flex: 0 0 auto; overflow: hidden; width: 64px; height: 64px; border-radius: 50%; }
.ard-comments__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ard-comments__author { font-size: 18px; line-height: 1.5; }
.ard-comments__author-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ard-comments__verified { color: #26834b; font-size: 12px; }
.ard-comments__rating-display { margin-bottom: 8px; color: #f20d5b; font-size: 20px; letter-spacing: 2px; }
.ard-comments__rating { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.ard-comments__rating legend { margin-bottom: 8px; font-size: 15px; }
.ard-comments__rating-stars { display: flex; width: max-content; flex-direction: row; gap: 4px; }
.ard-comments__rating-stars label { display: inline-flex; cursor: pointer; }
.ard-comments__rating-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ard-comments__rating-stars span { color: #aaaab2; font-size: 30px; line-height: 1; transition: color .15s ease; }
.ard-comments__rating-stars input:checked + span, .ard-comments__rating-stars label:has(input:checked) span, .ard-comments__rating-stars label:has(input:checked) ~ label span, .ard-comments__rating-stars label:hover span { color: #f20d5b; }
.ard-comments__rating-stars input:focus-visible + span { outline: 2px solid #f20d5b; outline-offset: 3px; }
.ard-comments__body { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 4px 8px; }
.ard-comments__text { color: #77777e; font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.ard-comments__text > :first-child { margin-top: 0; }
.ard-comments__text > :last-child { margin-bottom: 0; }
.ard-comments__actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ard-comments__meta, .ard-comments__reply { display: inline-flex; align-items: center; gap: 6px; color: #77777e; font-size: 14px; }
.ard-comments__meta > span { font-size: 22px; line-height: 1; }
.ard-comments__reply, .ard-comments__reaction, .ard-comments__share { border: 0; padding: 4px; background: transparent; cursor: pointer; }
.ard-comments__reply:hover, .ard-comments__share:hover, .ard-comments__reaction.is-active { color: #f20d5b; }
.ard-comments__reactions { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.ard-comments__reaction { display: inline-flex; align-items: center; gap: 4px; color: #3c3c43; }
.ard-comments__reaction svg, .ard-comments__share svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ard-comments__reaction[data-reaction="dislike"] svg { transform: rotate(180deg); }
.ard-comments__reaction b { font-size: 12px; font-weight: 500; }
.ard-comments__share { display: inline-flex; color: #3c3c43; }
.ard-comments__share.is-copied { color: #f20d5b; }
.ard-comments__children { margin-top: 18px; margin-inline-start: clamp(12px, 5vw, 70px); padding-inline-start: 18px; border-inline-start: 2px solid rgba(242,13,91,.25); }
.ard-comments__empty, .ard-comments__closed { margin: 0 0 24px; color: #b8b8c1; }
.ard-comments__form-wrap { margin-top: 32px; padding: clamp(18px, 3vw, 36px); color: #34343a; background-color: #f1f2f8; background-image: var(--ard-comments-surface, none); background-position: center; background-size: cover; -webkit-mask-image: var(--ard-comments-mask, none); mask-image: var(--ard-comments-mask, none); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ard-comments__form-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ard-comments__form-title { margin: 0; font-size: 22px; }
.ard-comments__replying { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(242,13,91,.09); color: #34343a; }
.ard-comments__replying[hidden] { display: none; }
.ard-comments__replying button { border: 0; background: transparent; color: #f20d5b; cursor: pointer; }
.ard-comments__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-bottom: 16px; }
.ard-comments__form label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ard-comments__form label > span { font-size: 15px; }
.ard-comments__form input, .ard-comments__form textarea { box-sizing: border-box; width: 100%; min-height: 54px; border: 1px solid rgba(70,70,80,.08); border-radius: 14px; padding: 14px 16px; color: #34343a; background: #fff; font: inherit; }
.ard-comments__form textarea { min-height: 130px; resize: vertical; }
.ard-comments__form input::placeholder, .ard-comments__form textarea::placeholder { color: #a5a5ac; }
.ard-comments__message { margin-bottom: 22px; }
.ard-comments__honeypot { position: absolute !important; inset-inline-start: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.ard-comments__form-footer { display: flex; align-items: center; gap: 18px; }
.ard-comments__submit { display: inline-flex; min-width: 180px; min-height: 56px; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 16px; padding: 12px 24px; color: #fff; background: #f20d5b; font: inherit; cursor: pointer; transition: opacity .2s ease; }
.ard-comments__submit:hover { opacity: .88; }
.ard-comments__submit:disabled { opacity: .55; cursor: wait; }
.ard-comments__submit span { font-size: 24px; }
.ard-comments__status { font-size: 14px; }
@media (max-width: 767px) {
	.ard-comments__card { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
	.ard-comments__identity { order: 0; }
	.ard-comments__body { order: 1; }
	.ard-comments__fields { grid-template-columns: 1fr; gap: 12px; }
	.ard-comments__heading { font-size: 21px; }
	.ard-comments__text { font-size: 15px; }
	.ard-comments__rating-display { font-size: 18px; }
}

/* ================================================================
   ویجت قیمت محصول
   ================================================================ */

.ard-price {
	display: flex;
	flex-wrap: wrap;
	align-items: var(--ard-price-align, center);
	justify-content: var(--ard-price-justify, flex-start);
	gap: var(--ard-price-gap, 16px);
	direction: rtl;
	transition: opacity .2s;
}

.ard-price__deal {
	display: flex;
	flex-direction: var(--ard-price-deal-dir, column);
	align-items: var(--ard-price-deal-align, center);
	gap: var(--ard-price-deal-gap, 4px);
}

.ard-price__deal[hidden] {
	display: none;
}

.ard-price__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 10px;
	border-radius: var(--ard-price-badge-r, 999px);
	background: var(--ard-price-badge-bg, var(--ard-danger, var(--ard-sale, #ef4056)));
	color: var(--ard-price-badge-ink, #fff);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.7;
	white-space: nowrap;
	/* قالب نشان («-{p}%») همان‌طور که تایپ شده دیده شود، نه برعکس. */
	direction: ltr;
	unicode-bidi: isolate;
}

.ard-price__old-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ard-price-old-ink, var(--ard-muted, #9aa7b4));
}

.ard-price__old {
	color: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: line-through;
	text-decoration-color: var(--ard-price-old-line, currentColor);
	text-decoration-thickness: var(--ard-price-old-line-w, 1px);
	white-space: nowrap;
}

.ard-price__now {
	display: inline-flex;
	align-items: var(--ard-price-unit-align, center);
	gap: var(--ard-price-unit-gap, 6px);
	color: var(--ard-price-ink, var(--ard-text, #20303f));
}

.ard-price__num {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.ard-price__unit {
	display: inline-flex;
	flex: none;
	align-items: center;
	color: var(--ard-price-unit-ink, currentColor);
	line-height: 1;
	transform: translateY(var(--ard-price-unit-y, 0));
}

.ard-price__unit svg,
.ard-price__unit img {
	display: block;
	inline-size: auto;
	max-inline-size: none;
	block-size: var(--ard-price-unit-h, 26px);
}

.ard-price__unit--vertical svg {
	block-size: var(--ard-price-unit-h, 30px);
}

.ard-price__unit--icon svg {
	fill: currentColor;
}

.ard-price__unit--icon i {
	font-size: var(--ard-price-unit-h, 26px);
}

.ard-price__unit--text {
	font-size: var(--ard-price-unit-h, 13px);
	font-weight: 500;
}

/* واحدِ کوچک کنار قیمت قبل */
.ard-price__old-wrap .ard-price__unit {
	color: inherit;
	transform: none;
}

.ard-price__old-wrap .ard-price__unit svg,
.ard-price__old-wrap .ard-price__unit img {
	block-size: 1.35em;
}

.ard-price__old-wrap .ard-price__unit i,
.ard-price__old-wrap .ard-price__unit--text {
	font-size: .85em;
}

.ard-price-dealfirst-yes .ard-price__deal,
.ard-price--stack .ard-price__deal {
	order: 0;
}

.ard-price--side:not(.ard-price-dealfirst-yes) .ard-price__deal,
.ard-price--below .ard-price__deal {
	order: 2;
}

.ard-price--stack .ard-price,
.ard-price--below .ard-price {
	flex-direction: column;
	align-items: var(--ard-price-justify, flex-start);
	gap: var(--ard-price-gap, 6px);
}

.ard-price--stack .ard-price__deal,
.ard-price--below .ard-price__deal {
	flex-direction: var(--ard-price-deal-dir, row);
}

.ard-price-dimout-yes .ard-price.is-out {
	opacity: .5;
}

/* ================================================================
   آمار کوتاه محصول: امتیاز و تعداد نظرات
   ================================================================ */

.ard-pstat-wrap {
	display: flex;
}

.ard-pstat {
	display: inline-flex;
	align-items: center;
	gap: var(--ard-pstat-gap, 6px);
	border: 0 solid var(--ard-pstat-line, transparent);
	background: var(--ard-pstat-bg, transparent);
	color: var(--ard-pstat-ink, var(--ard-text-soft, #5d6b7a));
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s, background-color .2s, border-color .2s;
}

.ard-pstat__icon {
	display: inline-flex;
	flex: none;
	color: var(--ard-pstat-icon, currentColor);
	transition: color .2s;
}

.ard-pstat__icon svg {
	display: block;
	inline-size: var(--ard-pstat-icon-size, 20px);
	block-size: var(--ard-pstat-icon-size, 20px);
}

.ard-pstat__icon i {
	font-size: var(--ard-pstat-icon-size, 20px);
}

.ard-pstat__stars {
	display: inline-flex;
	font-size: 14px;
	line-height: 1;
}

a.ard-pstat:hover,
a.ard-pstat:focus-visible {
	border-color: var(--ard-pstat-line-hover, var(--ard-pstat-line, transparent));
	background: var(--ard-pstat-bg-hover, var(--ard-pstat-bg, transparent));
	color: var(--ard-pstat-ink-hover, var(--ard-primary, #0b62ce));
}

a.ard-pstat:hover .ard-pstat__icon,
a.ard-pstat:focus-visible .ard-pstat__icon {
	color: var(--ard-pstat-icon-hover, var(--ard-pstat-icon, currentColor));
}

.ard-pstat.is-empty .ard-pstat__num {
	opacity: .7;
}

.ard-pstat__stars .ard-stars {
	font-size: inherit;
}

/* ================================================================
   ویژگی‌های کلیدی محصول (کارتی)
   ================================================================ */

.ard-pfeat {
	--ard-pfeat-cols: 4;
	--ard-pfeat-gap: 12px;
	--ard-pfeat-radius: 16px;
	--ard-pfeat-inner-gap: 18px;
	--ard-pfeat-head-gap: 16px;
}

.ard-pfeat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: var(--ard-pfeat-head-gap);
}

.ard-pfeat__title[class] {
	margin: 0;
	color: var(--ard-text, #20303f);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
}

.ard-pfeat__more {
	color: var(--ard-primary, #0b62ce);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.ard-pfeat__grid {
	display: grid;
	grid-template-columns: repeat(var(--ard-pfeat-cols), minmax(0, 1fr));
	gap: var(--ard-pfeat-gap);
	margin: 0;
	padding: 0;
}

.ard-pfeat__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ard-pfeat-inner-gap);
	min-inline-size: 0;
	padding: 12px 16px 14px;
	border: 1px solid var(--ard-pfeat-line, rgba(255, 255, 255, .9));
	border-radius: var(--ard-pfeat-radius);
	background: var(--ard-pfeat-bg, linear-gradient(200deg, #f7f8fb 0%, #eef0f6 100%));
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ard-pfeat__key {
	margin: 0;
	color: var(--ard-muted, #8a94a3);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

.ard-pfeat__value {
	margin: 0;
	color: var(--ard-text, #20303f);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

.ard-pfeat-oneline-yes .ard-pfeat__key,
.ard-pfeat-oneline-yes .ard-pfeat__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.ard-pfeat__item {
		padding: 14px 18px 16px;
	}
}

/* سطر/جدول سلکت ووکامرس که ویجت رنگ یا سایز اردال جایش را گرفته */
form.variations_form .ard-wc-hidden {
	display: none !important;
}