.phs{
	--phs-ar-d:16/5;
	--phs-ar-t:16/9;
	--phs-ar-m:4/3;
	--phs-sw:100%;
	--phs-gap:12px;
	--phs-radius:16px;
	--phs-dot:rgba(255,255,255,.6);
	--phs-dot-active:#fff;
	--phs-dot-size:8px;
	--phs-dot-bottom:14px;
	--phs-nav-offset:16px;
	position:relative;
	width:100%;
	overflow:hidden;
	font-family:inherit;
}
.phs,.phs *,.phs *::before,.phs *::after{box-sizing:border-box}

/* ---------- ردیف اسلایدها: روی هم قرار می‌گیرند و با transform جابه‌جا می‌شوند ---------- */
.phs-track{
	position:relative;width:100%;
	touch-action:pan-y;cursor:grab;
	user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
	-webkit-tap-highlight-color:transparent;outline:none;
}
.phs-track.is-drag{cursor:grabbing}
.phs-track:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}

/* همه اسلایدها دقیقاً وسط قرار می‌گیرند و عرضشان با --phs-sw تعیین می‌شود (کمتر از ۱۰۰٪ = دیده شدن اسلایدهای کناری) */
.phs-slide{
	position:absolute;top:0;bottom:0;left:50%;
	width:var(--phs-sw);margin-left:calc(var(--phs-sw) / -2);
	will-change:transform;backface-visibility:hidden;
}
/* اولین اسلاید داخل جریان صفحه است و ارتفاع کل اسلایدر را می‌سازد (هرگز صفر نمی‌شود) */
.phs-slide:first-child{
	position:relative;top:auto;bottom:auto;left:auto;
	margin-left:auto;margin-right:auto;
}
/* قبل از اجرای جاوااسکریپت فقط اسلاید اول دیده می‌شود */
.phs-slide:not(:first-child){visibility:hidden}

.phs .phs-link{
	display:block;width:100%;aspect-ratio:var(--phs-ar-d);
	border-radius:var(--phs-radius);overflow:hidden;background:#eef0f2;
	color:inherit;text-decoration:none;
	-webkit-user-drag:none;user-drag:none;
}
.phs-slide:not(:first-child) .phs-link{height:100%;aspect-ratio:auto}
.phs-media{display:block;width:100%;height:100%}
.phs-media img{
	display:block;width:100%;height:100%;max-width:none;
	object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none;
}

/* نسبت ابعاد هر دستگاه (جلوگیری از پریدن صفحه هنگام بارگذاری) */
@media (max-width:1024px){
	.phs .phs-link{aspect-ratio:var(--phs-ar-t)}
	.phs-slide:not(:first-child) .phs-link{aspect-ratio:auto}
}
@media (max-width:767px){
	.phs .phs-link{aspect-ratio:var(--phs-ar-m)}
	.phs-slide:not(:first-child) .phs-link{aspect-ratio:auto}
}

/* ---------- فلش‌ها (دسکتاپ، هنگام هاور) ---------- */
.phs .phs-nav{
	position:absolute;top:50%;z-index:3;transform:translateY(-50%);
	display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;margin:0;
	border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#23262f;
	box-shadow:0 4px 16px rgba(15,23,42,.22);cursor:pointer;
	opacity:0;transition:opacity .2s ease,transform .15s ease;
}
.phs-prev{inset-inline-start:var(--phs-nav-offset)}
.phs-next{inset-inline-end:var(--phs-nav-offset)}
@media (hover:hover) and (pointer:fine){
	.phs:hover .phs-nav,.phs:focus-within .phs-nav{opacity:1}
	.phs .phs-nav:hover{transform:translateY(-50%) scale(1.06);color:#23262f}
}
.phs .phs-nav:focus-visible{opacity:1;outline:3px solid rgba(255,255,255,.9);outline-offset:2px}
.phs--no-arrows .phs-nav,.phs--single .phs-nav{display:none}

/* در دستگاه‌های لمسی فلش لازم نیست (با کشیدن حرکت می‌کند) */
@media (hover:none){
	.phs .phs-nav{display:none}
}

/* ---------- نقطه‌ها ---------- */
.phs-dots{
	position:absolute;inset-inline:0;bottom:var(--phs-dot-bottom);z-index:3;
	display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none;
}
.phs .phs-dot{
	pointer-events:auto;flex:0 0 auto;width:var(--phs-dot-size);height:var(--phs-dot-size);
	padding:0;margin:0;border:0;border-radius:999px;background:var(--phs-dot);box-shadow:0 0 0 1px rgba(0,0,0,.08);
	cursor:pointer;transition:width .25s ease,background-color .25s ease;
}
.phs .phs-dot.is-active{width:calc(var(--phs-dot-size) * 3);background:var(--phs-dot-active)}
.phs .phs-dot:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:2px}
.phs--single .phs-dots{display:none}

@media (prefers-reduced-motion:reduce){
	.phs .phs-nav,.phs .phs-dot{transition:none}
}