/**
 * آرشیوِ محصولات — فقط چیزهایی که اسلایدر لازم ندارد.
 *
 * خودِ کارت از slider.css استایل می‌گیرد چون همان مارک‌آپ است. اینجا
 * سه چیز اضافه می‌شود که در بافتِ اسلایدر موضوعیت نداشتند:
 *
 *   ۱. متغیرهای رنگ. slider.css به var(--nb-accent) و var(--nb-ok)
 *      تکیه دارد و آنها را ویجت المنتور از پنل می‌ریزد. در آرشیو ویجتی
 *      در کار نیست، پس اینجا از توکن‌های سراسری پر می‌شوند.
 *   ۲. خنثی‌کردنِ استایلِ آرشیوِ خودِ ووکامرس و قالب.
 *   ۳. شبکه‌ی ستون‌ها.
 */

.woocommerce ul.products {
	--nb-accent: var(--nb-primary, #720eec);
	--nb-ok: var(--nb-status-completed, #22c55e);

	display: grid;
	grid-template-columns: repeat(var(--nb-loop-cols, 4), minmax(0, 1fr));

	/**
	 * همه‌ی ردیف‌ها هم‌ارتفاع.
	 *
	 * بدون این، شبکه هر ردیف را جدا اندازه می‌گیرد و ردیفی که یک
	 * محصولِ تخفیف‌دار دارد به‌اندازه‌ی خطِ قیمتِ قدیم بلندتر می‌شود
	 * (اندازه‌گیری شد: ۳۶۸ در برابر ۳۵۹). چون .nb-ps__foot با
	 * margin-top:auto ته کارت می‌چسبد، با هم‌ارتفاع‌کردنِ ردیف‌ها
	 * دکمه‌های خرید در کلِ صفحه روی یک خط می‌افتند.
	 */
	grid-auto-rows: 1fr;

	gap: var(--nb-gap, 16px);
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

/* ووکامرس عرض و شناوری را روی li می‌نویسد و در شبکه به‌هم می‌ریزد */
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	padding: var(--nb-loop-pad, 0);
}

.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
	content: none;
}

/* برچسبِ حراجِ پیش‌فرضِ ووکامرس؛ برچسبِ خودمان روی تصویر است */
.woocommerce ul.products li.product > .onsale {
	display: none;
}

/* گوشه‌های تصویر — در اسلایدر ظرفِ بیرونی این را می‌داد */
.woocommerce ul.products li.product .nb-ps__media {
	border-radius: var(--nb-radius, 16px);
}

/* عنوان و قیمتِ پیش‌فرض اگر جایی از قلم افتاد، دیده نشود */
.woocommerce ul.products li.product > .woocommerce-loop-product__title,
.woocommerce ul.products li.product > .price,
.woocommerce ul.products li.product > .button:not(.nb-ps__cart),
.woocommerce ul.products li.product > .added_to_cart {
	display: none;
}

/**
 * تصویر دومِ هاور.
 *
 * در اسلایدر یک قاعده‌ی ساده کافی بود. در آرشیو، قالب روی تصویرهای
 * محصول opacity می‌نویسد (انیمیشنِ ظاهرشدن) و آن قاعده را می‌برد —
 * نتیجه‌اش این بود که هر دو تصویر با هم نیمه‌پیدا روی هم می‌افتادند.
 * وزنِ اینها بالاتر است تا برنده شوند.
 */
.woocommerce ul.products li.product .nb-ps__alt {
	opacity: 0;
}

.woocommerce ul.products li.product .nb-ps__main {
	opacity: 1;
}

/* همان قاعده‌ی بالا: تعویضِ تصویر فقط جایی که اشاره‌گر واقعی هست.
   روی لمسی، اولین ضربه :hover را روشن می‌کرد و ورود به محصول یک
   ضربه‌ی اضافه می‌خواست. */
@media (hover: hover) and (pointer: fine) {

	.woocommerce ul.products li.product:hover .nb-ps__media--swap .nb-ps__alt {
		opacity: 1;
	}

	.woocommerce ul.products li.product:hover .nb-ps__media--swap .nb-ps__main {
		opacity: 0;
	}
}

/* رنگِ عنوان در اسلایدر از پنل المنتور می‌آمد؛ اینجا از توکن‌ها */
.woocommerce ul.products li.product .nb-ps__title {
	color: var(--nb-fg, #e7e9ee);
	font-size: var(--nb-loop-title-size, 15px);
	font-weight: 500;
}

.woocommerce ul.products li.product .nb-ps__title:hover {
	color: var(--nb-accent);
}

.woocommerce ul.products li.product .nb-ps__price {
	color: var(--nb-fg, #e7e9ee);
}

@media (max-width: 1024px) {

	.woocommerce ul.products {
		--nb-loop-cols: 3;
	}
}

@media (max-width: 767px) {

	.woocommerce ul.products {
		--nb-loop-cols: 2;
	}
}

@media (max-width: 400px) {

	.woocommerce ul.products {
		--nb-loop-cols: 1;
	}
}