/* ==========================================================================
   NiloKala - فاز ۲: فروشگاه و صفحه محصول
   ========================================================================== */

/* ----------------------------- مسیر ناوبری ----------------------------- */

/* بردکرامب حذف شد از این‌جا و به main.css منتقل شد - چون این فایل (shop.css) فقط در صفحات
   ووکامرس بارگذاری می‌شود، اما بردکرامب باید در سراسر سایت (از جمله وبلاگ) کار کند. */

/* کارت محصول اکنون در main.css است (سراسری، چون در صفحه اصلی هم استفاده می‌شود) */

/* ----------------------------- چیدمان فروشگاه ----------------------------- */

.nk-shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 28px;
	padding-top: 20px;
	padding-bottom: 50px;
	align-items: start;
}

.nk-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;
	border: 1.5px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text-primary);
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 16px;
}
.nk-filter-toggle .nk-icon { width: 18px; height: 18px; }

.nk-shop-sidebar { position: sticky; top: 90px; }
.nk-shop-sidebar-header { display: none; }
.nk-shop-widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.nk-shop-widget-title { font-size: 15px; margin: 0 0 12px; }
.nk-sidebar-hint { font-size: 13px; color: var(--color-text-secondary); }

/* ویجت‌های لیست محصول ووکامرس (بازدید شما، پسندیده‌شده، نظرات مشتریان) */
.product_list_widget { list-style: none; margin: 0; padding: 0; }
.product_list_widget li {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-border);
}
.product_list_widget li:last-child { border-bottom: none; padding-bottom: 0; }
.product_list_widget li > a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex: 1 0 100%;
	color: var(--color-text-primary);
	text-decoration: none;
}
.product_list_widget img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: var(--color-background);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}
.product_list_widget .product-title { font-size: 13px; line-height: 1.6; }
/* ستاره و نام نظردهنده هرکدام در خط مستقل خودشان، هرگز روی متن عنوان نمی‌افتند */
.product_list_widget .star-rating { display: inline-flex; margin: 4px 0 2px; flex: 0 0 auto; }
.product_list_widget .reviewer { display: block; font-size: 12px; color: var(--color-text-secondary); flex: 1 0 100%; }
.product_list_widget .amount { font-size: 13px; font-weight: 700; color: var(--color-primary); }
.product_list_widget del,
/* راه‌حل فراگیر و قطعی: خود ظرف .price (که ووکامرس همه‌جا استفاده می‌کند) ستونی می‌شود
   تا هرچه داخلش باشد (del/ins یا هر چیز دیگر) همیشه زیر هم بچیند - مستقل از این‌که کجای سایت باشد */
.price,
span.price {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.price del,
.price ins,
span.price del,
span.price ins {
	text-decoration: none;
}
.price del,
span.price del {
	color: var(--color-text-secondary, #6B6B68);
	font-weight: 400;
	font-size: 0.85em;
	text-decoration: line-through;
}

/* برچسب «شروع قیمت از:» (کد سفارشی خودِ کارفرما برای محصولات متغیر با قیمت‌های مختلف) -
   چون این HTML به‌جای بسته‌بندی در span.price استاندارد ووکامرس، مستقیم و بدون آن کلاس
   خروجی داده می‌شود، تا امروز هیچ سایز/رنگ مشخصی نداشت و در هر بخش سایت متفاوت (و گاهی
   بی‌قواره/بزرگ) دیده می‌شد. این قانون مستقل از هر ظرف والدی، همیشه یکدست نگهش می‌دارد. */
.start-price-label {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--color-text-secondary, #6B6B68);
	margin-inline-end: 4px;
}

/* برچسب «ناموجود» + «قیمت سیستمی» (همان کد سفارشی کارفرما، شاخه‌ی محصول ناموجود) -
   این دو کلاس (price.out-of-stock و nk-system-price) تا امروز هیچ‌جای قالب استایل
   نداشتند؛ بدون این قانون، اندازه‌شان به فونت والدِ اتفاقی هرجایی که نمایش داده می‌شدند
   وابسته بود - دقیقاً همان چیزی که باعث می‌شد گاهی خیلی بزرگ/بی‌قواره دیده شود (رفع باگ). */
.price.out-of-stock {
	display: inline-block;
	font-size: 0.9em;
	font-weight: 700;
	color: var(--color-error);
}
.nk-system-price {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--color-text-secondary, #6B6B68);
	margin-inline-start: 4px;
}

.nk-shop-widget del { display: block; }
.product_list_widget ins,
.nk-shop-widget ins { display: block; text-decoration: none; }
.product_list_widget del .amount { color: var(--color-text-secondary); font-weight: 400; font-size: 12px; }

/* اسلایدر فیلتر قیمت ووکامرس - فقط رنگ‌بندی (بر پایه‌ی توکن‌های طراحی)، بدون هیچ منطق
   یا Hack اضافه‌ای؛ کاملاً روی رفتار پیش‌فرض و بومی خودِ jQuery UI/ووکامرس سوار است. */
.price_slider { margin-bottom: 16px; }
.price_slider_wrapper .ui-slider {
	position: relative;
	height: 4px;
	background: var(--color-border);
	border-radius: var(--radius-pill);
	margin: 20px 4px 16px;
}
.price_slider_wrapper .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--color-primary);
	border-radius: var(--radius-pill);
}
.price_slider_wrapper .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	margin-left: -8px;
	background: var(--color-primary);
	border: 2px solid var(--color-surface);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	outline: none;
}
.price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}
.price_slider_amount .button {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border: none;
	border-radius: var(--radius-sm);
	padding: 6px 14px;
	font-size: 12px;
	cursor: pointer;
	flex: 1 1 100%;
	order: 3;
}
/* اینپوت‌های اصلیِ min_price/max_price طبق طراحیِ خودِ ووکامرس همیشه مخفی (display:none
   اینلاین) می‌مانند و صرفاً حامل مقدار برای Submit فرم هستند؛ نمایشِ واقعی به کاربر از
   طریقِ همان price_label بالا انجام می‌شود - پس این دو فیلد نیازی به استایلِ ظاهری ندارند. */

/* ==========================================================================
   پشتیبانی جامع از ابزارک «فیلتر بر اساس قیمت» نسخه‌ی بلوکی جدید ووکامرس
   (Woo Blocks Price Filter) - ساختار HTML و نام کلاس‌هایش نسبت به ابزارک کلاسیک بالا
   کاملاً متفاوت است. تمام قوانین این بخش عمداً به سایدبار/کشوی فروشگاه محدود شده‌اند
   (.nk-shop-sidebar) تا اثر جانبی روی بقیه‌ی صفحه نداشته باشند.

   توجه مهم: نسخه‌ی قبلی این بخش با استایل‌دهی به یک کلاس بسیار عمومی (.text) و همچنین
   اجبار پس‌زمینه‌ی تیره روی هر عنصری که فقط بخشی از نامش با «wc-block-product-filter»
   مطابقت داشت، باعث دو مشکل جدی شد: (۱) بهم‌ریختن جایگاه دستگیره‌های میله‌ی اسلایدر
   (چون «.text» احتمالاً با بخشی از ساختار داخلی خودِ اسلایدر مشترک است)، و (۲) سیاه‌شدن
   کل صفحه‌ی فروشگاه در حالت شب (چون آن سلکتور عمومی احتمالاً به یک المان پوششی بسیار
   بزرگ‌تر از خودِ ابزارک قیمت اصابت کرده بود). به همین دلیل این‌جا فقط خودِ فیلدهای عددی
   (input) استایل می‌گیرند - نه هیچ عنصر پوششی دیگری - تا خطر این‌جور اثرات جانبی از بین برود.
   ========================================================================== */

.nk-shop-sidebar [class*="price-slider"] input,
.nk-shop-sidebar [class*="filter-price"] input {
	box-sizing: border-box !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 45% !important;
	font-size: 12px !important;
	white-space: normal !important;
	padding: 6px 4px !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-sm);
	background: transparent;
	text-align: center;
	color: var(--color-text-secondary);
}

/* خوانایی این دو فیلد عددی در حالت شب - فقط خودشان، نه هیچ عنصر پوششی دیگری */
:root[data-theme="dark"] .nk-shop-sidebar [class*="price-slider"] input,
:root[data-theme="dark"] .nk-shop-sidebar [class*="filter-price"] input {
	background: var(--color-surface) !important;
	color: var(--color-text-primary) !important;
	border-color: var(--color-border) !important;
}
:root[data-theme="dark"] .nk-shop-sidebar [class*="price-slider"] input[type="range"]::-webkit-slider-runnable-track,
:root[data-theme="dark"] .nk-shop-sidebar [class*="price-slider"] input[type="range"]::-moz-range-track {
	background: var(--color-border) !important;
}
:root[data-theme="dark"] .nk-shop-sidebar [class*="price-slider"] input[type="range"]::-webkit-slider-thumb,
:root[data-theme="dark"] .nk-shop-sidebar [class*="price-slider"] input[type="range"]::-moz-range-thumb {
	background: var(--color-primary) !important;
	border-color: var(--color-surface) !important;
}
/* دکمه‌ی «بستن» و آیکون × کشوی فیلتر موبایل - همچنان محدود به سایدبار فروشگاه */
:root[data-theme="dark"] .nk-shop-sidebar-header button,
:root[data-theme="dark"] .nk-shop-sidebar-header svg {
	color: var(--color-text-primary) !important;
	fill: var(--color-text-primary) !important;
}
/* پس‌زمینه‌ی خودِ کشوی فروشگاه در موبایل، در حالت شب (این المان خودِ ما است، نه حدسی) */
:root[data-theme="dark"] .nk-shop-sidebar {
	background: var(--color-surface) !important;
	color: var(--color-text-primary) !important;
}

.nk-shop-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.nk-shop-header h1 { margin: 0; }
.nk-shop-toolbar { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--color-text-secondary); }
.nk-shop-toolbar select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 6px 10px 6px 30px;
	background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 8px center;
	background-size: 14px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: var(--color-text-primary);
}

.nk-shop-main ul.products {
	display: grid;
	grid-template-columns: repeat(var(--nk-shop-columns, 3), 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nk-shop-main ul.products li.product { margin: 0; }

.nk-term-description { background: var(--color-background); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 20px; font-size: 14px; color: var(--color-text-secondary); }

.woocommerce-pagination { margin-top: 32px; text-align: center; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span.current {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: var(--radius-sm);
	border: 1px solid var(--color-border); color: var(--color-text-primary); font-size: 13px;
}
.woocommerce-pagination span.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.woocommerce-pagination a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ----------------------------- صفحه تک‌محصول ----------------------------- */

.nk-single-product-wrap { padding-bottom: 50px; overflow-x: hidden; max-width: 100%; }

/* عرض ستون گالری به‌صورت درصدی از عرض کل صفحه (نه پیکسل ثابت) تا در مانیتورهای مختلف
   (کوچک یا بزرگ) همیشه نسبت متعادلی داشته باشد - دقیقاً همان روشی که قالب‌های حرفه‌ای
   استفاده می‌کنند. ۴۵٪ عددی است که مطابق اندازه‌گیری واقعی کارفرما روی مانیتور ۳۴ سانتی
   متناسب تشخیص داده شد؛ حداقل ۲۸۰px هم تضمین می‌کند در صفحه‌های متوسط خیلی کوچک نشود. */
.woocommerce div.product { display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: 40px; min-width: 0; max-width: 100%; overflow-x: hidden; position: relative; }
.woocommerce div.product div.images {
	margin: 0;
	min-width: 0;
	width: 100%;
	overflow: hidden;
}
.woocommerce div.product .summary { grid-column: 2; min-width: 0; max-width: 100%; overflow-wrap: break-word; }

/* برچسب «حراج!» ووکامرس - خارج از جریان Grid (چون یک عنصر مستقل کنار گالری است، نه داخلش) */
.woocommerce div.product > .onsale {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	background: var(--color-error);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 16px;
	border-radius: var(--radius-pill);
	margin: 0;
}

/* گالری تصاویر محصول - نسخه اختصاصی سبک (بدون FlexSlider) - فقط CSS خالص و درصدی + Zoom/Lightbox بومی ووکامرس */
.woocommerce-product-gallery { position: relative; min-width: 0; }

.woocommerce-product-gallery__wrapper {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-background);
	width: 100%;
	aspect-ratio: 1;
}
/* توجه: عمداً هیچ max-height این‌جا گذاشته نشده. قبلاً یک سقف ارتفاع (۶۰vh) فقط برای دسکتاپ
   داشتیم تا از بزرگ‌شدن بیش‌ازحد عکس روی مانیتورهای بزرگ جلوگیری شود، اما تست واقعی نشان داد
   همان سقف - در هر جایی که فعال بود، چه موبایل و چه دسکتاپ - باعث برش خوردن تصویر مربعی از
   بالا/پایین می‌شد (چون aspect-ratio:1 دیگر نمی‌توانست واقعاً مربع بماند). با توجه به اینکه
   عرض ستون گالری از قبل با ۴۰٪ از عرض کانتینر (حداکثر ~۴۹۶px از ۱۲۴۰px) محدود شده، نیازی به
   محدودیت جداگانه‌ی ارتفاع نیست - این محدودیت عرض به‌تنهایی از بزرگ‌شدن بیش‌ازحد جلوگیری
   می‌کند، بدون ایجاد برش‌خوردگی در هیچ اندازه‌ی صفحه‌ای. */
.woocommerce-product-gallery__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}
.woocommerce-product-gallery__image.nk-gallery-active { opacity: 1; visibility: visible; z-index: 1; }
.woocommerce-product-gallery__image a { display: block; height: 100%; }
.woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	/* عمداً contain، نه cover: خیلی از عکس‌های محصولات (به‌خصوص محصولات قدیمی‌تر) مربعی
	   نیستند (مثلاً ۸۰۰×۶۰۰ یا ۷۷۳×۸۰۰). با cover بخشی از عکس برای پرکردن کامل قاب مربعی
	   بریده می‌شد؛ با contain، کل عکس همیشه و بدون هیچ برشی دیده می‌شود (فقط اگر عکس مربعی
	   نباشد، کمی فضای خالی/حاشیه در دو طرف می‌ماند - این خیلی بهتر از گم‌شدن بخشی از عکس است). */
	object-fit: contain;
	cursor: zoom-in;
	display: block;
}

/* بزرگ‌نمایی هنگام hover فقط روی دستگاه‌هایی با ماوس واقعی (نه لمسی) - جای‌گزین سبک jquery.zoom حذف‌شده */
@media (hover: hover) and (pointer: fine) {
	.woocommerce-product-gallery__image img { transition: transform 0.3s ease; }
	.woocommerce-product-gallery__image img:hover { transform: scale(1.12); }
}

/* راست‌چین‌کردن متن زیرنویس در حالت بزرگ‌نمایی گالری (PhotoSwipe) - چون پیش‌فرض چپ‌چین است */
.pswp__caption__center { text-align: right; }

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	background: var(--color-surface);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
}

/* ردیف بندانگشتی اختصاصی - همیشه یک ردیف افقی با اسکرول، هرگز چند طبقه */
.nk-gallery-thumbs-wrap { position: relative; margin-top: 10px; }
.nk-gallery-thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-behavior: smooth;
	gap: 10px;
	margin: 0;
	padding: 2px;
	list-style: none;
	scrollbar-width: none;
}
.nk-gallery-thumbs::-webkit-scrollbar { display: none; }
.nk-gallery-thumbs button {
	flex: 0 0 72px;
	width: 72px;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	opacity: 0.65;
	cursor: pointer;
	background: none;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.nk-gallery-thumbs button.is-active,
.nk-gallery-thumbs button:hover { opacity: 1; border-color: var(--color-primary); }
.nk-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* دکمه‌های فلش برای پیمایش نوار بندانگشتی (فقط وقتی تعداد تصاویر بیشتر از گنجایش نوار باشد با جاوااسکریپت نمایش داده می‌شوند) */
.nk-thumb-arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	box-shadow: var(--shadow-sm);
	color: var(--color-text-primary);
}
.nk-thumb-arrow.is-visible { display: flex; }
.nk-thumb-arrow:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.nk-thumb-arrow svg { width: 16px; height: 16px; }
.nk-thumb-arrow--prev { right: 6px; }
.nk-thumb-arrow--next { left: 6px; }

.woocommerce div.product .product_title { font-size: 24px; margin-bottom: 8px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-primary); font-size: 22px; font-weight: 700; }
.woocommerce div.product p.price del {
	display: block;
	color: var(--color-text-secondary);
	font-size: 15px;
	font-weight: 400;
	margin: 0 0 2px;
}
.woocommerce div.product p.price ins { display: block; text-decoration: none; }

.woocommerce div.product .single_add_to_cart_button {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border-radius: var(--radius-sm);
	padding: 13px 32px;
	font-weight: 700;
	border: none;
}
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--btn-primary-bg-hover); }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 20px 0; }
.woocommerce div.product .quantity input { padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-align: center; }

/* دکمه‌های +/- تعداد (.nk-qty-enhanced / .nk-qty-btn) از این‌جا به main.css منتقل شد -
   چون آیکون سبد خرید (و دراورش، با همین دکمه‌ها برای هر قلم) در همه‌ی صفحات سایت هست،
   نه فقط صفحات فروشگاهی که shop.css در آن‌ها لود می‌شود. */

/* هر بخش فرم (انتخاب ویژگی، قیمت متغیر) تمام‌عرض و در خط خودش؛ فقط تعداد+دکمه کنار هم */
.woocommerce div.product form.cart > table.variations,
.woocommerce div.product form.cart > .woocommerce-variation,
.woocommerce div.product form.cart > .single_variation_wrap { flex: 1 0 100%; }

/* جدول انتخاب ویژگی‌ها (سایز/وزن و...) - فاصله‌گذاری صحیح بین برچسب، select و لینک پاک‌کردن انتخاب */
.woocommerce div.product table.variations { width: 100%; margin-bottom: 4px; }
.woocommerce div.product table.variations tr { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.woocommerce div.product table.variations td.label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.woocommerce div.product table.variations td.value { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.woocommerce div.product table.variations select {
	flex: 0 1 auto;
	width: auto;
	max-width: 260px;
	/* رفع مورد ۲۸: در برخی مرورگرهای اندرویدی (Chrome/Mi روی گوشی‌های شیائومی، نه فایرفاکس)
	   خودِ select حتی با appearance:none یک عرضِ ذاتیِ حداقلی از مرورگر می‌گیرد که با
	   محاسبه‌ی flex-shrink همخوانی ندارد و باعث می‌شود این المنت از چهارچوبِ فلکسِ والد
	   بیرون بزند و به لبه‌ی راستِ صفحه بچسبد؛ min-width:0 این رفتارِ پیش‌فرضِ مرورگر برای
	   المنت‌های فرم داخلِ فلکس‌باکس را خنثی می‌کند (یک باگِ شناخته‌شده و مستقل از قالبِ ما).
	   margin-inline-end هم یک حاشیه‌ی امنِ اضافه برای اطمینان بیشتر است. */
	min-width: 0;
	margin-inline-end: 2px;
	padding: 9px 12px 9px 34px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 10px center;
	background-size: 16px;
	color: var(--color-text-primary);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.woocommerce div.product .reset_variations { font-size: 12px; color: var(--color-text-secondary); margin-right: 4px; }

/* ردیف تعداد + دکمه افزودن به سبد (برای محصول متغیر) */
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	flex: 1 0 100%;
}
.woocommerce div.product .single_variation_wrap { margin-bottom: 4px; }

/* امتیازدهی در فرم ثبت نظر - تبدیل متن «X of 5 stars» به ستاره با CSS خالص */
.comment-form-rating { margin-bottom: 20px; }

/* بخش‌های محتوای سفارشی قابل‌ویرایش از Customizer (معادل تنظیمات فلتسام) */
.nk-before-add-to-cart,
.nk-after-add-to-cart {
	max-width: 100%;
	flex-basis: 100%;
	width: 100%;
	overflow-wrap: break-word;
	font-size: 14px;
}
.nk-before-add-to-cart { margin-bottom: 12px; }
.nk-after-add-to-cart { margin-top: 12px; }
.nk-before-add-to-cart img,
.nk-after-add-to-cart img,
.nk-extra-tab-content img,
.nk-shop-header-content img,
.nk-thankyou-content img { max-width: 100% !important; height: auto !important; }
.nk-shop-header-content { margin-bottom: 24px; max-width: 100%; overflow-wrap: break-word; }
.nk-thankyou-content { margin-top: 20px; max-width: 100%; overflow-wrap: break-word; }

/* فیلدهای عمومی input/textarea فرم دیدگاه (نام/ایمیل/متن نظر) حالا به‌صورت مشترک و
   یک‌بار برای همیشه در main.css تعریف شده‌اند (#respond ...) تا فرم دیدگاه وبلاگ و
   فرم نظر محصول ووکامرس دقیقاً یک ظاهر یکسان داشته باشند - نگاه کنید به انتهای main.css.
   این‌جا فقط چیزی که واقعاً مخصوص ووکامرس است (ستاره‌های امتیاز) می‌ماند. */
.woocommerce-Tabs-panel--reviews #respond p { max-width: 100%; }
.comment-form-rating label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.comment-form-rating .stars {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.comment-form-rating .stars a {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 22px;
	font-size: 0;
	color: var(--color-border);
	text-decoration: none;
}
.comment-form-rating .stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	font-size: 20px;
	line-height: 22px;
	font-family: sans-serif;
	color: inherit;
}
.comment-form-rating .stars a.nk-fill,
.comment-form-rating .stars a.active {
	color: var(--color-warning);
}
.comment-form-rating .stars a.selected { color: var(--color-warning); }

.woocommerce-review-link { margin-right: 8px; }

/* تب «توضیحات تکمیلی» (جدول ویژگی‌های محصول) - قبلاً بدون هیچ استایلی بود و با
   ظاهر خامِ مرورگر نمایش داده می‌شد. */
table.shop_attributes {
	/* رفعِ باگِ فضای خالیِ سمت چپ: یک قانونِ قدیمی‌تر در main.css (مخصوصِ جدول‌های
	   عریضِ دلخواهِ داخلِ متنِ توضیحاتِ محصول - برای اسکرولِ افقیِ آن‌ها) هر <table>
	   داخلِ .woocommerce-Tabs-panel را display:block + overflow-x:auto +
	   white-space:nowrap می‌کند. چون آن قانون فقط روی همین سه ویژگی است (نه روی
	   width)، حتی با width:100% اینجا، خودِ جدول به‌خاطرِ display:block دیگر مثلِ
	   یک جدولِ واقعی کشیده نمی‌شد و به‌اندازه‌ی محتوایش (باریک) می‌ماند. این سه خط
	   این سه ویژگی را مخصوصِ همین جدول (نه بقیه‌ی جدول‌های احتمالیِ داخلِ توضیحات)
	   به حالتِ عادی برمی‌گرداند. */
	display: table;
	overflow-x: visible;
	white-space: normal;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}
table.shop_attributes th,
table.shop_attributes td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
	text-align: right;
}
table.shop_attributes tr:last-child th,
table.shop_attributes tr:last-child td { border-bottom: none; }
table.shop_attributes th {
	width: 230px;
	font-weight: 700;
	color: var(--color-text-secondary);
}
table.shop_attributes td p { margin: 0; }
/* رنگِ هر سطر تا انتهای همان سطر (هر دو ستون هم‌رنگ) - نه فقط ستونِ عنوان؛ همان
   جلوه‌ی «لباس راه‌راه» که درخواست شده بود، به‌جای رنگِ جداگانه‌ی هر ستون. */
table.shop_attributes tr:nth-child(even) th,
table.shop_attributes tr:nth-child(even) td { background: var(--color-background); }

.woocommerce-tabs { margin-top: 5px; padding-top: 20px; border-top: 1px solid var(--color-border); grid-column: 1 / -1; min-width: 0; overflow-x: hidden; }
.woocommerce-tabs ul.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); list-style: none; padding: 0; margin: 0 0 20px; }
/* کادر مشترکِ محتوایِ هر سه تب (توضیحات / توضیحات تکمیلی / نظرات) - قاب+پس‌زمینه‌ی
   یکسان تا این سه بخش یکپارچه دیده شوند؛ رنگِ پس‌زمینه از تنظیمات ظاهری قالب قابل‌تغییر
   است (نکته‌ی مهم: در حالت شب این رنگ ثابت تیره می‌شود، مثل رنگ‌های هدر/منو/فوتر -
   همان محدودیتِ شناخته‌شده‌ی این سه رنگ که قبلاً هم گزارش شده بود). */
.woocommerce-Tabs-panel {
	padding: 15px;
	background: var(--nk-tabs-panel-bg, var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
}
/* ووکامرس به‌صورت پیش‌فرض بالای هر پنل یک <h2> با همان نام تب چاپ می‌کند (مثلاً
   «توضیحات»/«توضیحات تکمیلی») - چون همین نام از قبل روی خودِ تبِ فعال دیده
   می‌شود، تکراری است. با :first-child فقط همین عنوانِ خودکارِ ووکامرس مخفی
   می‌شود، نه هر h2ای که فروشنده مثلاً داخل متنِ توضیحاتِ محصول بنویسد. */
.woocommerce-Tabs-panel > h2:first-child { display: none; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text-secondary);
	white-space: nowrap;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	transition: color 0.15s ease, background 0.15s ease;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--color-primary); background: var(--color-surface); }
.woocommerce-tabs ul.tabs li.active a { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); background: var(--color-surface); }

/* اطلاعات محصول (شناسه/دسته/برچسب) - هرکدام روی ردیف مجزای خودش، دقیقاً مثل فلتسام،
   به‌جای این‌که همه پشت سر هم و به‌صورت یک بند متن پیوسته نشان داده شوند */
.product_meta { display: flex !important; flex-direction: column !important; gap: 6px; font-size: 13px; color: var(--color-text-secondary); margin-top: 16px; }
.product_meta > span { display: block !important; padding-top: 6px; }
/* مورد ۱۴: یک خط کم‌رنگ برای تفکیک شناسه محصول/دسته/برچسب (بین ردیف‌ها، نه قبل از اولی) */
.product_meta > span + span { border-top: 1px dashed var(--color-border); }

@media (max-width: 768px) {
	/* در موبایل، تب‌ها به‌جای یک ردیف فشرده‌ی افقی (که می‌شکند و شلوغ می‌شود)، هرکدام روی
	   ردیف مجزای تمام‌عرض خودشان قرار می‌گیرند - سبک فلتسام (گزارش تست: تب «توضیحات تکمیلی»
	   دوخط می‌شد). !important چون این‌جا با یک قانون دیگر (که برنده می‌شد) رقابت وجود داشت. */
	.woocommerce-tabs ul.tabs { flex-direction: column !important; gap: 0 !important; border-bottom: none !important; margin-bottom: 16px; }
	.woocommerce-tabs ul.tabs li { border-bottom: 1px solid var(--color-border); width: 100%; }
	.woocommerce-tabs ul.tabs li a { padding: 11px 14px !important; font-size: 13.5px; white-space: normal !important; text-align: right; border-radius: 0; }
	.woocommerce-tabs ul.tabs li.active a { border-bottom: none; border-right: 3px solid var(--color-primary); padding-right: 12px; background: var(--color-surface); }

	.woocommerce-Tabs-panel { padding: 10px; }
	table.shop_attributes th { width: 45%; }
}

/* ستاره امتیاز هر دیدگاه (زیر صفحه محصول) - خط مستقل، بدون همپوشانی با متن دیدگاه */
#reviews .comment-text .star-rating,
.commentlist .star-rating { display: inline-flex; margin: 4px 0 8px; flex: 0 0 auto; }
#reviews .meta { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; }
#reviews .commentlist,
.commentlist {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: nk-comment-counter;
}
#reviews .commentlist > li,
.commentlist > li {
	counter-increment: nk-comment-counter;
	position: relative;
	padding-inline-start: 28px;
	padding-bottom: 16px;
}
/* خط‌چین کم‌رنگ بین هر دیدگاه، برای خوانایی بهتر (نه قبل از دیدگاه اول) */
#reviews .commentlist > li + li,
.commentlist > li + li {
	margin-top: 16px;
	border-top: 1px dashed var(--color-border);
	padding-top: 16px;
}
#reviews .commentlist > li::before,
.commentlist > li::before {
	content: counter(nk-comment-counter) ".";
	position: absolute;
	inset-inline-start: 0;
	top: 2px;
	font-size: 13px;
	color: var(--color-text-secondary);
}
#reviews .comment-reply-link,
.comment-reply-link { margin-right: 10px; }

.related.products, .upsells.products { grid-column: 1 / -1; margin-top: 50px; }
.related.products > h2, .upsells.products > h2 { margin-bottom: 20px; }
.related.products ul.products, .upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
}
/* مورد ۹: تعداد ستون از تنظیمات قالب می‌آید - ووکامرس عددِ 'columns' که در functions.php
   تزریق کردیم را به‌صورت کلاسِ columns-N روی همین <ul> چاپ می‌کند. فقط از ۱۰۲۵px به
   بالا فعال است، چون در تبلت/موبایل (سه Media Query پایین‌تر) این المنت همیشه باید
   حداکثر ۲ ستون بماند - آن قوانین Specificity کمتری دارند و بدونِ این محدودسازی،
   این‌جا (اگر بازه‌ها هم‌پوشانی داشتند) اشتباهاً برنده می‌شدند. */
@media (min-width: 1025px) {
	.related.products ul.products.columns-1, .upsells.products ul.products.columns-1 { grid-template-columns: repeat(1, 1fr); }
	.related.products ul.products.columns-2, .upsells.products ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
	.related.products ul.products.columns-3, .upsells.products ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.related.products ul.products.columns-4, .upsells.products ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.related.products ul.products.columns-5, .upsells.products ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
	.related.products ul.products.columns-6, .upsells.products ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
	.related.products ul.products.columns-7, .upsells.products ul.products.columns-7 { grid-template-columns: repeat(7, 1fr); }
	.related.products ul.products.columns-8, .upsells.products ul.products.columns-8 { grid-template-columns: repeat(8, 1fr); }
}

/* ----------------------------- نوار خرید ثابت موبایل ----------------------------- */

.nk-sticky-cart {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
	padding: 10px 16px;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	z-index: 250;
	transform: translateY(100%);
	transition: transform 0.25s ease;
}
.nk-sticky-cart.is-visible { transform: translateY(0); }
.nk-sticky-cart-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nk-sticky-cart-info img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.nk-sticky-cart-title { font-size: 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.nk-sticky-cart-price { font-size: 13px; font-weight: 700; color: var(--color-primary); margin: 0; }
/* مرورگر به‌صورت پیش‌فرض تگ <ins> را زیرخط‌دار نمایش می‌دهد (شبیه لینک) - این‌جا خنثی می‌شود (باگ گزارش‌شده در عکس ۶۳) */
.nk-sticky-cart-price ins { text-decoration: none; }
.nk-sticky-cart-price del { text-decoration: line-through; font-weight: 400; font-size: 11px; color: var(--color-text-secondary); margin-left: 4px; }
/* دکمه‌ی بستن فقط در دسکتاپ فعال است (مورد کارفرما) - در موبایل مخفی می‌ماند */
.nk-sticky-cart-close { display: none; }

/* مورد ۱۰: همان نوارِ خرید ثابت، در دسکتاپ هم فعال می‌شود - اما نه به‌شکلِ نوارِ
   تمام‌عرضِ چسبیده‌به‌لبه‌ی موبایل، بلکه یک کپسولِ شناور با فاصله از پایینِ صفحه
   (طبق درخواست: ۷۰-۸۰٪ عرضِ نمایشگر، وسط‌چین) - رنگ/فونت/شعاعِ گوشه از همان
   Design Token های قالب می‌آیند، سیستمِ رنگیِ جدایی ندارد. */
@media (min-width: 769px) {
	.nk-sticky-cart {
		display: flex;
		position: fixed;
		right: auto;
		left: 50%;
		bottom: 24px;
		width: 75%;
		max-width: 860px;
		/* رفع باگ: بوردر قبلی از همان رنگ خنثیِ کارت‌ها (--color-border) بود و روی
		   پس‌زمینه‌ی روشن تقریباً دیده نمی‌شد؛ حالا از رنگ برند (لایه‌ی توکن، نه Hardcoded)
		   استفاده می‌شود تا این باکس شناور به‌وضوح از بقیه‌ی صفحه جدا دیده شود. */
		border: 1px solid var(--color-primary);
		border-radius: var(--radius-lg, var(--radius-md));
		box-shadow: var(--shadow-lg);
		padding: 14px 56px 14px 24px;
		transform: translate(-50%, calc(100% + 40px));
	}
	.nk-sticky-cart.is-visible { transform: translate(-50%, 0); }
	.nk-sticky-cart-info img { width: 56px; height: 56px; }
	.nk-sticky-cart-title { font-size: 14px; max-width: 320px; }
	.nk-sticky-cart-price { font-size: 15px; }
	.nk-sticky-cart #nk-sticky-cart-btn { padding: 11px 28px; font-size: 14px; }
	.nk-single-product-wrap { padding-bottom: 110px; }

	/* دکمه‌ی بستن: کنار تصویر محصول (سمت راست باکس در چیدمان RTL)، وسط‌چین عمودی */
	.nk-sticky-cart-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%);
		width: 28px;
		height: 28px;
		padding: 0;
		border: none;
		background: transparent;
		color: var(--color-text-secondary);
		cursor: pointer;
		border-radius: var(--radius-sm);
		transition: background 0.15s ease, color 0.15s ease;
	}
	.nk-sticky-cart-close:hover { background: var(--nk-primary-bg); color: var(--color-primary); }
	.nk-sticky-cart-close .nk-icon { width: 16px; height: 16px; }
}

/* ----------------------------- واکنش‌گرا ----------------------------- */

@media (max-width: 1024px) {
	.nk-shop-main ul.products, .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {

	.nk-shop-layout { grid-template-columns: 1fr; padding-top: 12px; }
	.nk-filter-toggle { display: flex; width: 80%; margin: 0 auto 16px; justify-content: center; }

	.nk-shop-sidebar {
		position: fixed;
		top: 0;
		right: -300px;
		width: 300px;
		height: 100%;
		background: var(--color-surface);
		z-index: 999;
		transition: right 0.25s ease;
		overflow-y: auto;
		padding: 20px;
	}
	.nk-shop-sidebar.is-open { right: 0; }
	.nk-shop-sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
	.nk-shop-sidebar-header button { background: none; border: none; font-size: 24px; cursor: pointer; }

	.nk-shop-main ul.products, .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product .summary { grid-column: 1; }

	.nk-sticky-cart { display: flex; }
	.nk-sticky-cart #nk-sticky-cart-btn { padding: 8px 16px; font-size: 12px; }
	.nk-single-product-wrap { padding-bottom: 90px; }

	/* نوار «نمایش X-Y از Z نتیجه» + مرتب‌سازی - تمام‌عرض و باز، نه فشرده */
	.nk-shop-header { flex-direction: column; align-items: flex-start; }
	.nk-shop-header h1 { width: 100%; text-align: center; }
	.nk-shop-toolbar {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.nk-shop-toolbar .woocommerce-result-count { margin: 0; }
	.nk-shop-toolbar select.orderby { width: 80%; margin: 0 auto; }

	/* دکمه‌های فرم محصول متغیر/تعداد در موبایل کوچک‌تر */
	.woocommerce div.product .single_add_to_cart_button { padding: 10px 20px; font-size: 13px; }
	.woocommerce div.product table.variations select { max-width: none; font-size: 13px; }
}

@media (max-width: 480px) {
	.nk-shop-main ul.products, .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }

	/* نام متغیر (مثلاً «سایز») و باکس انتخابش - فقط در عرض واقعاً کم (موبایل) به‌جای کنار
	   هم (که فشرده و نامرتب می‌شود)، هرکدام روی ردیف مجزای خودشان قرار می‌گیرند. روی تبلت
	   و بزرگ‌تر، همچنان کنار هم (که شیک‌تر است) باقی می‌مانند. */
	.woocommerce div.product table.variations tr { flex-direction: column; align-items: flex-start; gap: 6px; }
	.woocommerce div.product table.variations td.value { width: 100%; }
}

/* ==========================================================================
   نوار مراحل خرید (سبد خرید → پرداخت → تکمیل سفارش)
   - مشترک بین cart.php و checkout (functions.php: nilokala_checkout_steps)
   - این‌جاست (نه cart-page.css/checkout.css) چون هر دو صفحه به آن نیاز دارند و
   shop.css از قبل روی هر دو (و همچنین صفحه‌ی حساب کاربری) بارگذاری می‌شود.
   ========================================================================== */
.nk-checkout-steps {
	display: flex;
	list-style: none;
	margin: 0 auto 56px;
	padding: 0;
	width: 100%;
	max-width: 860px; /* طبق درخواست کارفرما: با وجود عریض‌ترشدن کل صفحه (cart/checkout)،
	   این نوار همان عرض قبلی خودش را حفظ کند، نه این‌که تمام‌عرض بشود */
}
.nk-checkout-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-text-secondary);
	font-size: 14px;
	font-weight: 600;
	flex: 1;
}
.nk-checkout-steps li:last-child { flex: 0 0 auto; }
.nk-checkout-steps li:not(:last-child)::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-border);
	margin: 0 12px;
}
.nk-checkout-steps-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-border);
	color: var(--color-text-secondary);
	font-size: 12px;
}
.nk-checkout-steps li.is-active { color: var(--color-text-primary); }
.nk-checkout-steps li.is-active .nk-checkout-steps-num {
	background: var(--color-primary);
	color: #fff;
}
@media (max-width: 768px) {
	/* روی موبایل عرض صفحه کم است و به نظر کارفرما این نوار آن‌جا شلوغ/بی‌مورد است */
	.nk-checkout-steps { display: none; }
}

/* عنوان‌های «سبد خرید»/«تسویه‌حساب» بالای صفحه - در دسکتاپ/تبلت با نوار مراحل بالا
   تکراری‌اند (رجوع به‌page.php)؛ در موبایل (بدون آن نوار) دوباره نشان داده می‌شوند. */
.nk-cart-page-title,
.nk-checkout-page-title { display: none; }
@media (max-width: 768px) {
	.nk-cart-page-title,
	.nk-checkout-page-title {
		display: block;
		text-align: center;
		padding-bottom: 15px;
	}
}

/* مورد ۲۶: فقط در موبایل، دکمه‌های +/- تعداد در صفحه‌ی تکی محصول و مودالِ نمایشِ سریع
   حدود ۲۵٪ بزرگ‌تر شوند تا لمس‌کردن راحت‌تر باشد؛ اندازه‌ی خودِ کادرِ عدد بدون تغییر
   می‌ماند. دو زمینه با اندازه‌ی پایه‌ی متفاوت دارند (نمایشِ سریع قبلاً به‌خاطر جلوگیری
   از اسکرول افقی در مودالِ باریک، کوچک‌تر شده بود - رجوع به phase3.css)، پس درصدِ
   افزایش را نسبت به همان اندازه‌ی پایه‌ی هرکدام جداگانه اعمال می‌کنیم، نه یک عددِ ثابتِ
   مشترک، تا افزایشِ نمایشِ سریع دوباره باعثِ برگشتِ باگِ اسکرولِ افقی نشود. */
@media (max-width: 768px) {
	.summary.entry-summary form.cart .nk-qty-btn {
		width: 32.5px; /* پایه ۲۶px × ۱.۲۵ */
		font-size: 19px; /* پایه ۱۵px × ۱.۲۵ */
	}
}
@media (max-width: 768px) {
	.nk-qv-summary form.cart .nk-qty-btn { width: 25px !important; font-size: 19px !important; }
}

/* ==========================================================================
   استایل عمومی فیلدهای فرم ووکامرس (.form-row) - مشترک بین Checkout و
   My Account (ویرایش آدرس/جزئیات حساب هم از همین مارک‌آپ استفاده می‌کنند)
   ========================================================================== */
.form-row { margin: 0 0 16px; }
.form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-text-primary);
}
.form-row .required { color: var(--color-error); text-decoration: none; }
.form-row .optional { color: var(--color-text-secondary); font-weight: 400; }

.form-row input.input-text,
.form-row select,
.form-row textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text-primary);
	font-size: 14px;
	font-family: inherit;
}
.form-row input.input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
	border-color: var(--color-primary);
	outline: none;
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-row-first,
.form-row-last { flex: 1 1 240px; }
.form-row-wide { flex-basis: 100%; }

/* ==========================================================================
   جدول‌های استاندارد ووکامرس (.shop_table) - فقط برای صفحه‌ی حساب کاربری.
   رفع باگ: قبلاً این قانون‌ها با سلکتور عمومی .woocommerce نوشته شده بودند که
   به‌خاطر عنصرهای اضافه (table، a) مشخصیتِ خام‌شان به‌طور ناخواسته از قانون‌های
   دقیق‌تر (نیتاً) در cart-page.css/checkout.css بالاتر رفت و بی‌سروصدا رویشان
   برنده می‌شد (باعث حذفِ استایل دکمه‌ی «اقدام به پرداخت» و اضافه‌شدنِ خط‌های
   خاکستری ناخواسته به ردیف جمع‌کل شد). محدودکردن به .woocommerce-account (کلاسی
   که وردپرس/ووکامرس فقط در صفحه‌ی حساب کاربری به body می‌دهد) این تداخل را کاملاً
   از ریشه غیرممکن می‌کند - چون آن صفحات اصلاً این کلاس را ندارند.
   ========================================================================== */
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 12px 10px;
	text-align: start;
	border-bottom: 1px solid var(--color-border);
}
.woocommerce-account table.shop_table thead th {
	font-weight: 700;
	color: var(--color-text-primary);
	border-bottom: 2px solid var(--color-border);
}
.woocommerce-account table.shop_table tbody td { color: var(--color-text-secondary); }

/* دکمه‌های صفحه‌ی حساب کاربری («جزئیات»، «ذخیره‌ی تغییرات»، «ویرایش آدرس»، «عضویت» و...).
   رفع باگ: نسخه‌ی قبلی این‌جا یک اسکین جدا (outline/دورخط، توپرشدن فقط روی هاور) فقط
   برای .woocommerce-account تعریف کرده بود که چون از نظر Specificity روی قانون
   سراسری «.woocommerce .button» در main.css (همان استایل دکمه‌ی «افزودن به سبد خرید»/
   «اقدام به پرداخت» در کل سایت) برنده می‌شد، ظاهر دکمه‌های این بخش را از بقیه‌ی سایت
   متفاوت می‌کرد - یعنی دقیقاً همان سیستم رنگی/دکمه‌ی موازی که منشور فنی (بند ۳) منع
   کرده. راه‌حل: این اسکین جدا حذف شد؛ دکمه‌های حساب کاربری هم مثل همه‌جای دیگر سایت از
   همان قانون واحد main.css پیروی می‌کنند (که به همین دلیل هم مشکل نبودِ حالت هاور روی
   دکمه‌ی «نمایش» را حل کرد: آن باگ ناشی از تداخل Specificity بین قانون هاور و قانون
   ".button.view" در همین اسکینِ حذف‌شده بود). فقط دکمه‌ی «لغو» (اقدامی مخرب/برگشت‌ناپذیر)
   builds off همان توکن قرمزِ موجود در سیستم (--color-error) نگه داشته شده. */
.woocommerce-account a.button.cancel { background: var(--color-error); border-color: var(--color-error); color: #fff; }