/*
Theme Name:   Zamanpardaz Child
Theme URI:    https://zamanpardaz.com/
Description:  قالب فرزند هلو المنتور — قالب دست‌نویس نوشته‌ها
Author:       Amir Ghamsari
Author URI:   https://www.newseo.ir
Template:     hello-elementor
Version:      1.0.0
Text Domain:  zamanpardaz-child
*/

/*
 * استایل‌های این قالب. تا پیش از این درون‌خطی در سورس هر صفحه چاپ می‌شدند؛
 * حالا یک فایل‌اند که مرورگر یک بار می‌گیرد و برای بقیه‌ی صفحات از کش می‌خواند.
 *
 * توجه: این فایل با هندل خودش صف می‌شود، نه با get_stylesheet_uri() — آن تابع
 * عمداً به style.css قالب والد فیلتر شده، چون قالب زمان‌پرداز استایل اصلی سایت
 * را از همان مسیر صدا می‌زند.
 */

/* -------------------------------------------------------------------------
 * ۱ — رنگ‌های سازمانی
 *
 * هلو المنتور برای لینک‌ها #c36 می‌گذارد؛ سرخابی‌ای که به هیچ بخشی از این برند
 * تعلق ندارد. با اسکن سه صفحه دنبال رنگ‌های آن طیف پیدا شد، نه با خواندن
 * استایل‌ها: rgb(204,51,102) روی skip-link، ذره‌بین گالری، لینک اسلایدر و هر
 * لینکی که المنتور خودش رنگش نداده بود.
 *
 * گزینشگر عمداً a خالی است. هرچه المنتور استایل می‌دهد قاعده‌ی خودش و اولویت
 * بسیار بالاتری دارد، پس این دقیقاً به همان لینک‌هایی می‌رسد که به پیش‌فرض قالب
 * افتاده بودند و به هیچ چیز دیگر.
 * ---------------------------------------------------------------------- */

a { color: #1b3a9f; }
a:hover,
a:focus { color: #e55039; }

.woocommerce-product-gallery__trigger { color: #1b3a9f; }

/* -------------------------------------------------------------------------
 * ۲ — ستون تصاویر محصول
 *
 * ووکامرس بندانگشتی‌ها را position:absolute داخل گالری‌ای می‌چیند که فقط به
 * اندازه‌ی تصویر اصلی بلند است. هر بندانگشتی ۹۰ پیکسل است، پس چهارتا جا می‌شود
 * و پنجمی از پایین بیرون می‌زند و روی سکشن مشخصات فنی می‌افتد.
 *
 * سقف ارتفاع و دکمه‌ی فلش، نه اسکرول تنها: نوار اسکرول روی ستونی ۹۰ پیکسلی
 * عملاً نامرئی است و بازدیدکننده چهار تصویر می‌دید بدون هیچ نشانه‌ای از بقیه.
 * ---------------------------------------------------------------------- */

.woocommerce-product-gallery .flex-control-thumbs {
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }

.nsb-thumb-more {
	position: absolute;
	right: 0;
	height: 26px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	border: 1px solid #e2e5ea;
	border-radius: 13px;
	transition: background .15s, border-color .15s;
	z-index: 2;
}

/*
 * هر سه حالت با هم. دکمه در حالت عادی خاکستری بود و به‌محض کلیک سرخابی می‌شد،
 * چون هیچ قاعده‌ای برای :active نداشت و استایل دکمه‌ی قالب زیرش می‌نشست —
 * چیزی که فقط با کلیک‌کردن دیده می‌شود، نه با نگاه‌کردن به صفحه.
 */
.woocommerce-product-gallery .nsb-thumb-more:hover,
.woocommerce-product-gallery .nsb-thumb-more:focus,
.woocommerce-product-gallery .nsb-thumb-more:active {
	background: #e55039;
	border-color: #e55039;
	outline: none;
}

.nsb-thumb-more i {
	display: block;
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border-right: 2px solid #5f6774;
	border-bottom: 2px solid #5f6774;
	transform: rotate(45deg);
	transition: border-color .15s;
}

.nsb-thumb-more.is-up i {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.woocommerce-product-gallery .nsb-thumb-more:hover i,
.woocommerce-product-gallery .nsb-thumb-more:focus i,
.woocommerce-product-gallery .nsb-thumb-more:active i { border-color: #fff; }

/* -------------------------------------------------------------------------
 * ۳ — باکس «انتخاب گیت مناسب»
 *
 * فقط روی یک صفحه چاپ می‌شود، ولی استایلش اینجاست: یک فایل کش‌شده بهتر از
 * دو کیلوبایت درون‌خطی در سورس است، و بقیه‌ی صفحات هزینه‌ای بابتش نمی‌دهند
 * چون همین فایل را برای بخش‌های ۱ و ۲ هم لازم دارند.
 *
 * محل درج یک elementor-widget-wrap است که flex است؛ بدون min-width:0 آیتم
 * فلکس آزاد است از والدش بیرون بزند و همین ردیف کارت‌ها باکس را در ستون ۳۸۰
 * پیکسلی به ۱۰۳۷ پیکسل رساند و بریده شد.
 * ---------------------------------------------------------------------- */

.zpg__t {
	font-size: 26px;
	line-height: 1.6;
	margin: 0 0 14px;
	color: #1b3a9f;
}

.zpg {
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 16px;
	padding: 18px 20px 20px;
	margin: 0 0 18px;
	flex: 1 1 100%;
	min-width: 0;
	max-width: 100%;
}

.zpg__wrap,
.zpg__body { min-width: 0; max-width: 100%; }

.zpg__hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 13px;
	flex-wrap: wrap;
}

.zpg__hd h2 {
	font-size: 17px;
	margin: 0;
	padding: 0;
	color: #1b3a9f;
	line-height: 1.6;
}

.zpg__all {
	color: #e55039;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.zpg__r {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.zpg__tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.zpg__tabs label {
	border: 1px solid #e6eaef;
	border-radius: 9px;
	padding: 8px 16px;
	font-size: 13.5px;
	color: #7c8794;
	cursor: pointer;
	user-select: none;
}

.zpg__tabs label span {
	font-size: 11.5px;
	opacity: .72;
	margin-right: 5px;
}

#zpg-a:checked ~ .zpg__tabs label[for="zpg-a"],
#zpg-0:checked ~ .zpg__tabs label[for="zpg-0"],
#zpg-1:checked ~ .zpg__tabs label[for="zpg-1"] {
	background: #1b3a9f;
	border-color: #1b3a9f;
	color: #fff;
	font-weight: 700;
}

.zpg__wrap { position: relative; }

.zpg__body {
	display: flex;
	gap: 11px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px;
}

.zpg__body::-webkit-scrollbar { display: none; }

.zpg__p { display: contents; }

#zpg-0:checked ~ .zpg__wrap .zpg__p1,
#zpg-1:checked ~ .zpg__wrap .zpg__p0 { display: none; }

.zpg__c {
	flex: 0 0 200px;
	border: 1px solid #e9edf2;
	border-radius: 13px;
	padding: 11px;
	background: #fff;
	position: relative;
	display: block;
	text-decoration: none;
	color: #22303f;
}

.zpg__c:hover { border-color: #c9d3e6; }

.zpg__c img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	margin: 0 0 9px;
	border-radius: 8px;
}

/* عنوان کارت h2 است، پس اندازه و فاصله‌ی پیش‌فرض هدینگ باید صفر شود. */
.zpg__nm {
	font-size: 12.5px;
	line-height: 1.7;
	min-height: 42px;
	color: #22303f;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.zpg__pr {
	font-size: 13px;
	color: #1b3a9f;
	font-weight: 700;
	margin-top: 6px;
}

.zpg__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #dfe4ec;
	box-shadow: 0 2px 8px rgba(20, 35, 70, .12);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.zpg__nav:hover,
.zpg__nav:focus,
.zpg__nav:active {
	background: #e55039;
	border-color: #e55039;
	outline: none;
}

.zpg__nav i {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #1b3a9f;
	border-bottom: 2px solid #1b3a9f;
}

.zpg__nav:hover i,
.zpg__nav:focus i,
.zpg__nav:active i { border-color: #fff; }

.zpg__nav--prev { left: -6px; }
.zpg__nav--prev i { transform: rotate(135deg); margin-left: 3px; }

.zpg__nav--next { right: -6px; }
.zpg__nav--next i { transform: rotate(-45deg); margin-right: 3px; }

@media (max-width: 600px) {
	.zpg { padding: 15px 14px 16px; }
	.zpg__c { flex: 0 0 158px; }
	.zpg__t { font-size: 21px; }
}

/* -------------------------------------------------------------------------
 * ۴ — نوار پایین موبایل
 *
 * نوار قبلی جعبه‌های آبی روشن با آیکن نارنجی بود که به هیچ جای دیگر سایت
 * نمی‌خورد، و دو اشکال واقعی هم داشت که با آزمون A/B جدا شد (صفحه یک بار با
 * همین فایل و یک بار با بلاک‌کردنش رندر شد و نوار در هر دو یکسان خراب بود،
 * یعنی از پیش از کار ما بوده):
 *
 *   ۱. برچسب «سبد خرید» دو خطی می‌شد و آن دکمه ۹۱ پیکسل ارتفاع می‌گرفت در
 *      برابر ۷۱ پیکسلِ دو تای دیگر.
 *   ۲. ویجت شناور «تماس با ما» با bottom:20px دقیقاً روی دکمه‌ی «فروشگاه»
 *      می‌نشست — اندازه‌گیری‌شده: ویجت x۳۳۲ تا ۳۹۲، دکمه x۲۸۶ تا ۴۰۲.
 *
 * طرح تازه: زمینه‌ی سفید هم‌خانواده‌ی کارت‌های سایت، و «سبد خرید» به‌عنوان تنها
 * کنش اصلی با نارنجی سازمانی پر شده. قاعده‌ی «هر صفحه یک کنش اصلی».
 *
 * چیزهایی که عمدی‌اند و نباید ساده شوند:
 *
 *   - `display:grid` روی کانتینر. پیش‌فرض المنتور فلکس با wrap است و سه ستون
 *     ۱۳۶ پیکسلی به‌علاوه‌ی فاصله از ۳۹۶ پیکسل عرض بیشتر می‌شد، پس «تماس» به
 *     خط دوم می‌افتاد. با گرید سه‌ستونه هرگز نمی‌شکند.
 *   - `min-height:52px` — بالاتر از حداقل ۴۸ پیکسلی هدف لمسی.
 *   - `env(safe-area-inset-bottom)` — روی آیفون بدون دکمه، نوار زیر نوار ژست
 *     خانه نمی‌رود.
 *   - حالت فشرده با روشنایی عوض می‌شود نه با جابه‌جایی، تا لمس پرش چیدمان
 *     نسازد.
 *   - `!important`ها لازم‌اند: المنتور برای همین سکشن قاعده‌ی اختصاصی با
 *     اولویت بالاتر چاپ می‌کند. آزموده شده، نه فرض‌شده.
 *
 * فقط زیر ۷۶۸ پیکسل، چون این نوار روی دسکتاپ اصلاً نمایش داده نمی‌شود.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	.elementor-element-556ce70 {
		background: #fff !important;
		box-shadow: 0 -1px 0 #e9edf2, 0 -8px 24px rgba(20, 35, 70, .06) !important;
		padding: 2px 0 calc(2px + env(safe-area-inset-bottom)) !important;
	}

	.elementor-element-556ce70 .elementor-container {
		/*
		 * هر دکمه دقیقاً ۳۰٪ عرض صفحه. ده درصد باقی‌مانده با space-evenly بین
		 * چهار فاصله پخش می‌شود، پس دکمه‌ها هم هم‌عرض‌اند هم از لبه‌ها فاصله
		 * دارند. پیش از این ستون‌ها ۱fr بودند ولی خودِ دکمه به‌اندازه‌ی متنش
		 * جمع می‌شد، برای همین سه پهنای متفاوت داشتیم: ۱۰۵، ۱۱۲، ۹۵.
		 */
		display: grid !important;
		grid-template-columns: repeat(3, 30%) !important;
		justify-content: space-evenly !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-element-556ce70 .elementor-column {
		width: auto !important;
		max-width: none !important;
	}

	.elementor-element-556ce70 .elementor-widget-wrap { padding: 0 !important; }
	.elementor-element-556ce70 .elementor-widget { width: 100% !important; }

	.elementor-element-556ce70 .jet-button__instance {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px !important;
		min-height: 0 !important;
		width: 100% !important;
		padding: 2px 4px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: #f5f7fb !important;
		box-shadow: none !important;
		color: #1b3a9f !important;
		transition: background .15s, filter .15s !important;
	}

	.elementor-element-556ce70 .jet-button__plane,
	.elementor-element-556ce70 .jet-button__state-normal { background: transparent !important; }

	.elementor-element-556ce70 .jet-button__label {
		margin: 0 !important;
		font-size: 15.5px !important;
		font-weight: 500 !important;
		line-height: 1.25 !important;
		white-space: nowrap !important;
		color: #1b3a9f !important;
	}

	/*
	 * اندازه روی خودِ span بسته می‌شود، نه فقط روی svg: المنتور برای این آیکن
	 * width و height ثابت ۲۵ پیکسل چاپ می‌کند و svg داخلش گیر می‌کرد —
	 * اندازه‌گیری‌شده، نه حدس.
	 */
	.elementor-element-556ce70 .jet-button__icon {
		margin: 0 !important;
		width: 34px !important;
		height: 34px !important;
		font-size: 34px !important;
		line-height: 1 !important;
	}

	.elementor-element-556ce70 .jet-button__icon svg {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
	}

	/*
	 * محتوای دکمه داخل لایه‌ی state است نه مستقیم داخل instance، پس ارتفاع از
	 * آنجا می‌آید و چیدمان ستونی هم باید همان‌جا اعمال شود.
	 */
	.elementor-element-556ce70 .jet-button__state {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px !important;
		padding: 2px 4px !important;
	}

	/* سبد خرید: تنها کنش اصلی این نوار. */
	.elementor-element-556ce70 .elementor-column:nth-child(2) .jet-button__instance {
		background: #e55039 !important;
	}

	.elementor-element-556ce70 .elementor-column:nth-child(2) .jet-button__label {
		color: #fff !important;
	}

	.elementor-element-556ce70 .elementor-column:nth-child(2) .jet-button__icon svg * {
		fill: #fff !important;
	}

	.elementor-element-556ce70 .jet-button__instance:active { filter: brightness(.95); }

	/* ویجت شناور بالاتر از نوار، وگرنه روی دکمه‌ی سوم می‌نشیند. */
	.arcu-widget { bottom: 128px !important; }
}

/* -------------------------------------------------------------------------
 * ۵ — جهش ارتفاع گالری محصول
 *
 * بزرگ‌ترین جابه‌جایی چیدمانِ صفحه‌ی محصول از همین گالری بود: ارتفاعش وسط
 * بارگذاری از ۵۳۰ به ۸۱۴۶ پیکسل می‌پرید و همه‌چیزِ پایین صفحه را هل می‌داد.
 * CLS موبایل ۰٫۳۴۵ و دسکتاپ ۰٫۲۷۲ — هر دو چند برابر حد ۰٫۱ گوگل.
 *
 * علتش با پایشِ ارتفاع هر ویجت پیدا شد نه از رکورد جابه‌جایی، و برخلاف
 * انتظار، جهش *بعد* از ساخته‌شدن flex-viewport رخ می‌دهد نه پیش از آن: چند
 * لحظه هفت اسلاید روی هم چیده‌اند تا فلکس‌اسلایدر ردیفشان کند. پس «جا رزرو
 * کن پیش از راه‌افتادن اسلایدر» هیچ اثری نداشت؛ کاری که باید کرد بستن سقف
 * همان کادر است تا اسلایدهای روی‌هم بیرونش را هل ندهند.
 *
 * سقف بر حسب cqw است نه پیکسل، یعنی سهمی از پهنای خود گالری. عدد ثابت روی
 * همان محصولی که با آن تنظیم شده جواب می‌دهد و بس: ۵۶۰ پیکسل CLS را ۰٫۰۷۳
 * کرد و ۱۲۰۰ پیکسل ۰٫۳۰۰. تصویر محصول‌های این فروشگاه مربع است (دقیقاً ۱۰۰٪
 * پهنا)، پس ۱۶۰٪ شصت درصد فضای اضافه دارد و تا نسبت ۸:۵ پرتره هم چیزی را
 * نمی‌برد.
 *
 * overflow روی خود کادر اسلاید است، نه روی .woocommerce-product-gallery —
 * ستون بندانگشتی‌ها و دکمه‌ی فلشِ بخش ۲ داخل همان گالری absolute هستند و
 * بریده می‌شدند.
 *
 * سنجش: موبایل ۰٫۳۴۵ → ۰٫۰۷۸ و دسکتاپ ۰٫۲۷۲ → ۰٫۰۴۴، با اسلایدر، لایت‌باکس
 * و هر هفت بندانگشتی سرجایشان.
 * ---------------------------------------------------------------------- */

.woocommerce-product-gallery { container-type: inline-size; }

.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery > .flex-viewport {
	max-height: 160cqw !important;
	overflow: hidden !important;
}

/*
 * و حالا که ارتفاع مهار شده، گالری را از همان اول نشان بده.
 *
 * ووکامرس گالری را با opacity:0 می‌فرستد و جاوااسکریپت بعد از راه‌اندازی
 * اسلایدر شفافش می‌کند. روی این صفحه یعنی تصویر محصول در ۳۰۸۸ms کامل دانلود
 * شده و تا ۱۲۱۶۹ms نامرئی مانده — نُه ثانیه بازدیدکننده جای تصویر محصول یک
 * کادر خالی می‌بیند و LCP همان‌جا گیر می‌کند.
 *
 * این یک خط پیش از قاعده‌ی بالا خطرناک بود: گالریِ راه‌نیفتاده یعنی هفت اسلاید
 * روی هم. با سقف ارتفاع، آنچه دیده می‌شود همان تصویر اول است.
 *
 * سنجش: LCP از ۱۲٫۶ ثانیه به ۸٫۲ ثانیه، و در عکسِ ثانیه‌ی سوم صفحه کامل است.
 */

.woocommerce-product-gallery { opacity: 1 !important; }