.pcw{
	--pcw-n:8;
	--pcw-cols:8;
	--pcw-rows:1;
	--pcw-gap:16px;
	--pcw-row-gap:20px;
	--pcw-pad-y:14px;
	--pcw-size:110px;
	--pcw-bg:#f0f1f3;
	--pcw-img-scale:1;
	--pcw-img-y:0px;
	--pcw-accent:#009B5D;
	--pcw-text:#23262f;
	--pcw-muted:#767b86;
	width:100%;
	font-family:inherit;
	line-height:1.6;
	color:var(--pcw-text);
}
.pcw,.pcw *,.pcw *::before,.pcw *::after{box-sizing:border-box}

.pcw-wrap{position:relative;min-width:0}

/* ---------- چیدمان اسکرول (یک یا چند ردیف) ---------- */
.pcw-track{
	list-style:none;margin:0;padding:var(--pcw-pad-y) 2px;
	display:grid;
	grid-auto-flow:column;
	grid-template-rows:repeat(var(--pcw-rows),auto);
	grid-auto-columns:calc((100% - (var(--pcw-n) - 1) * var(--pcw-gap)) / var(--pcw-n));
	gap:var(--pcw-row-gap) var(--pcw-gap);
	justify-content:start;
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x proximity;scroll-behavior:smooth;
	overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
	scrollbar-width:none;outline:none;
}
.pcw-track::-webkit-scrollbar{display:none}
.pcw-track.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.pcw-track:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--pcw-accent) 35%,transparent);border-radius:12px}
.pcw--align-center .pcw-track{justify-content:center}
.pcw--align-end .pcw-track{justify-content:end}

/* ---------- چیدمان شبکه ---------- */
.pcw--layout-grid .pcw-track{
	grid-auto-flow:row;grid-template-rows:none;
	grid-template-columns:repeat(var(--pcw-cols),minmax(0,1fr));grid-auto-columns:auto;
	padding:0;overflow:visible;scroll-snap-type:none;
}
.pcw--layout-grid .pcw-nav{display:none}

/* ---------- کاشی ---------- */
.pcw-item{margin:0;padding:0;min-width:0;list-style:none;scroll-snap-align:start}
.pcw .pcw-link{
	display:flex;flex-direction:column;align-items:center;gap:10px;
	text-align:center;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.pcw-media{
	position:relative;display:block;width:min(100%,var(--pcw-size));aspect-ratio:1/1;
	transition:transform .25s ease;
}
.pcw-bg{
	position:absolute;inset:0;display:block;background:var(--pcw-bg);
	border-radius:28%;transition:box-shadow .25s ease;
}
.pcw--shape-circle .pcw-bg{border-radius:50%}
.pcw--shape-blob .pcw-bg{border-radius:58% 42% 52% 48% / 52% 58% 42% 48%}
.pcw--shape-none .pcw-bg{background:transparent!important;box-shadow:none!important}

.pcw-media img{
	position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
	object-fit:contain;
	transform:translateY(var(--pcw-img-y)) scale(var(--pcw-img-scale));
	transition:transform .25s ease;-webkit-user-drag:none;
}
.pcw--fx-zoom .pcw-link:hover .pcw-media img,
.pcw--fx-zoom .pcw-link:focus-visible .pcw-media img{
	transform:translateY(var(--pcw-img-y)) scale(calc(var(--pcw-img-scale) * 1.07));
}
.pcw--fx-lift .pcw-link:hover .pcw-media,
.pcw--fx-lift .pcw-link:focus-visible .pcw-media{transform:translateY(-4px)}
.pcw .pcw-link:focus-visible{outline:none}
.pcw .pcw-link:focus-visible .pcw-bg{outline:3px solid color-mix(in srgb,var(--pcw-accent) 55%,transparent);outline-offset:3px}

.pcw-title{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	max-width:100%;font-size:14px;font-weight:600;line-height:1.8;color:var(--pcw-text);transition:color .15s;
}
.pcw .pcw-link:hover .pcw-title,
.pcw .pcw-link:focus-visible .pcw-title{color:var(--pcw-accent)}
.pcw-count{margin-top:-6px;font-size:12px;color:var(--pcw-muted)}

/* ---------- فلش‌ها ---------- */
.pcw .pcw-nav{
	position:absolute;top:50%;z-index:2;transform:translateY(-50%);
	display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;margin:0;
	border:0;border-radius:50%;background:#fff;color:#23262f;box-shadow:0 4px 14px rgba(15,23,42,.22);
	cursor:pointer;transition:opacity .15s,transform .15s;
}
.pcw .pcw-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.06);color:#23262f}
.pcw .pcw-nav:disabled{opacity:0;pointer-events:none}
.pcw-prev{inset-inline-start:-8px}
.pcw-next{inset-inline-end:-8px}
.pcw--no-arrows .pcw-nav,.pcw.is-static .pcw-nav{display:none}

/* ---------- موبایل ---------- */
@media (max-width:767px){
	.pcw-title{font-size:12px;line-height:1.7}
	.pcw-count{font-size:11px}
	.pcw .pcw-link{gap:8px}
	.pcw:not(.pcw--arrows-m) .pcw-nav{display:none}
}

@media (prefers-reduced-motion:reduce){
	.pcw-track{scroll-behavior:auto}
	.pcw-media,.pcw-media img,.pcw .pcw-nav,.pcw-title{transition:none}
}
