/* فونیکا - گرید دسته‌بندی - استایل فرانت (بدون وابستگی به فونت/آیکون خارجی) */
.pk-cats{
	font-family:inherit;
	width:100%;
	box-sizing:border-box;
}
.pk-cats *{
	box-sizing:border-box;
}
.pk-cats__grid{
	display:grid;
	grid-template-columns:repeat(var(--pk-cols,7),1fr);
	gap:var(--pk-gap,16px);
	max-width:1280px;
	margin:auto;
	padding:16px;
}

/* --- کارت پایه (مشترک بین قالب‌ها) --- */
.pk-cat{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	max-width:var(--pk-card-w,110px);
	min-height:var(--pk-card-h,150px);
	margin:0 auto;
	padding:16px 10px;
	border-radius:var(--pk-radius,18px);
	background:var(--tint);
	color:#1f2937;
	text-decoration:none;
	text-align:center;
	border:1px solid rgba(0,0,0,.05);
	transition:.25s ease;
}
.pk-cat:hover{
	transform:translateY(-5px);
	box-shadow:0 12px 28px rgba(0,0,0,.10);
	color:#1f2937;
}
.pk-cat__icon{
	width:44px;
	height:44px;
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--accent);
	color:#fff;
	overflow:hidden;
}
.pk-cat__icon svg{ width:20px; height:20px; }
.pk-cat__icon img{ width:100%; height:100%; object-fit:cover; }
.pk-cat__label{
	font-size:13px;
	font-weight:700;
	line-height:1.5;
}

/* ================= قالب ۱: کلاسیک (گرید ساده) ================= */
.pk-tpl-classic .pk-cat{ }

/* ================= قالب ۲: دایره‌ای بزرگ ================= */
.pk-tpl-circle .pk-cat{
	border-radius:50%;
	aspect-ratio:1/1;
	max-width:calc(var(--pk-card-w,110px) * .9);
	min-height:0;
	padding:10px;
}
.pk-tpl-circle .pk-cat__icon{ width:52%; height:52%; }
.pk-tpl-circle .pk-cat__label{ font-size:12px; }

/* ================= قالب ۳: کارت افقی (آیکون راست، متن چپ) ================= */
.pk-tpl-horizontal .pk-cats__grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.pk-tpl-horizontal .pk-cat{
	flex-direction:row;
	justify-content:flex-start;
	text-align:right;
	max-width:none;
	min-height:64px;
	padding:10px 16px;
}
.pk-tpl-horizontal .pk-cat__label{ font-size:14px; }

/* ================= قالب ۴: مدرن (گرادینت) ================= */
.pk-tpl-modern .pk-cat{
	background:linear-gradient(145deg,var(--tint),#fff);
	border:none;
	box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.pk-tpl-modern .pk-cat__icon{
	background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));
}

/* ================= قالب ۵: مینیمال خطی (بدون پس‌زمینه رنگی، فقط قاب) ================= */
.pk-tpl-outline .pk-cat{
	background:#fff;
	border:1.5px solid var(--accent);
}
.pk-tpl-outline .pk-cat__icon{
	background:#fff;
	color:var(--accent);
	border:1.5px solid var(--accent);
}

/* ================= قالب ۶: چیپ / کپسولی کوچک ================= */
.pk-tpl-chip .pk-cats__grid{ grid-template-columns:repeat(auto-fit,minmax(150px,max-content)); justify-content:center; }
.pk-tpl-chip .pk-cat{
	flex-direction:row;
	border-radius:999px;
	min-height:0;
	max-width:none;
	width:auto;
	padding:6px 18px 6px 6px;
	gap:8px;
}
.pk-tpl-chip .pk-cat__icon{ width:34px; height:34px; }
.pk-tpl-chip .pk-cat__label{ font-size:13px; }

/* ================= قالب ۷: نشان (آیکون روی لبه بالای کارت) ================= */
.pk-tpl-badge .pk-cat{ position:relative; padding-top:30px; background:var(--tint); }
.pk-tpl-badge .pk-cat__icon{
	position:absolute; top:-16px; right:50%; transform:translateX(50%);
	box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* ================= قالب ۸: سایه پررنگ (پاپ هنگام هاور) ================= */
.pk-tpl-shadow-pop .pk-cat{
	background:#fff;
	border:none;
	box-shadow:0 10px 26px rgba(0,0,0,.09);
}
.pk-tpl-shadow-pop .pk-cat:hover{
	transform:translateY(-8px) scale(1.035);
	box-shadow:0 22px 38px rgba(0,0,0,.16);
}

/* ================= قالب ۹: متن مینیمال (بدون پس‌زمینه، فقط رنگ) ================= */
.pk-tpl-minimal-text .pk-cats__grid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.pk-tpl-minimal-text .pk-cat{
	flex-direction:row;
	justify-content:flex-start;
	background:transparent;
	border:none;
	max-width:none;
	min-height:0;
	padding:6px 4px;
	gap:8px;
}
.pk-tpl-minimal-text .pk-cat:hover{ box-shadow:none; transform:translateX(-2px); }
.pk-tpl-minimal-text .pk-cat__icon{ background:transparent; color:var(--accent); width:30px; height:30px; }
.pk-tpl-minimal-text .pk-cat__icon svg{ width:24px; height:24px; }
.pk-tpl-minimal-text .pk-cat__label{ color:var(--accent); }

/* ================= قالب ۱۰: بنر (ردیف تمام‌عرض با نوار رنگی) ================= */
.pk-tpl-banner .pk-cats__grid{ grid-template-columns:1fr; max-width:720px; }
.pk-tpl-banner .pk-cat{
	flex-direction:row;
	justify-content:flex-start;
	max-width:none;
	min-height:0;
	border-radius:10px;
	border-right:5px solid var(--accent);
	padding:12px 18px;
}

/* ================= استایل کارت: gradient_fade (فید رنگی داخل کارت) ================= */
.pk-style-gradient_fade .pk-cat{
	background:linear-gradient(160deg, var(--tint) 0%, color-mix(in srgb,var(--accent) 22%,var(--tint)) 100%);
}
.pk-style-gradient_fade .pk-cat__icon{
	background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));
}

/* ================= استایل کارت: glass (شیشه‌ای مات) ================= */
.pk-style-glass .pk-cat{
	background:color-mix(in srgb,var(--tint) 55%, transparent);
	backdrop-filter:blur(6px);
	border:1px solid color-mix(in srgb,var(--accent) 35%, transparent);
}

/* ================= استایل کارت: outline_soft (قاب نقطه‌چین ملایم) ================= */
.pk-style-outline_soft .pk-cat{
	background:color-mix(in srgb, var(--tint) 45%, #fff);
	border:1.5px dashed var(--accent);
}

/* ================= استایل کارت: shadow (سایه‌دار روی زمینه سفید) ================= */
.pk-style-shadow .pk-cat{
	background:#fff;
	border:none;
	box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* ================= استایل کارت: duotone (آیکون دورنگ) ================= */
.pk-style-duotone .pk-cat__icon{
	background:var(--tint);
	color:var(--accent);
}

/* ================= استایل کارت: bottom_accent (نوار رنگی پایین کارت) ================= */
.pk-style-bottom_accent .pk-cat{
	background:#fff;
	border:none;
	border-bottom:4px solid var(--accent);
	border-radius:12px 12px 4px 4px;
	box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* =====================================================
   انیمیشن هاور آیکون
   ===================================================== */
.pk-icon-anim-scale .pk-cat:hover .pk-cat__icon{ transform:scale(1.15); transition:transform .25s ease; }
.pk-icon-anim-spin .pk-cat:hover .pk-cat__icon{ transform:rotate(18deg) scale(1.08); transition:transform .3s ease; }
.pk-icon-anim-bounce .pk-cat:hover .pk-cat__icon{ animation:pk-bounce .6s ease; }
.pk-icon-anim-pulse .pk-cat:hover .pk-cat__icon{ animation:pk-pulse 1s ease infinite; }
.pk-icon-anim-shake .pk-cat:hover .pk-cat__icon{ animation:pk-shake .4s ease; }
.pk-cat__icon{ transition:transform .25s ease; }

@keyframes pk-bounce{
	0%,100%{ transform:translateY(0); }
	30%{ transform:translateY(-8px); }
	60%{ transform:translateY(0); }
	80%{ transform:translateY(-3px); }
}
@keyframes pk-pulse{
	0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%, transparent); }
	50%{ box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 0%, transparent); }
}
@keyframes pk-shake{
	0%,100%{ transform:translateX(0); }
	25%{ transform:translateX(-3px) rotate(-4deg); }
	75%{ transform:translateX(3px) rotate(4deg); }
}

/* =====================================================
   انیمیشن ظاهرشدن کارت‌ها هنگام اسکرول (توسط frontend.js کلاس pk-in اضافه می‌شود)
   ===================================================== */
.pk-reveal{ opacity:1; }
[data-reveal="fade-up"] .pk-reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
[data-reveal="fade-up"] .pk-reveal.pk-in{ opacity:1; transform:translateY(0); }

[data-reveal="fade-in"] .pk-reveal{ opacity:0; transition:opacity .5s ease; }
[data-reveal="fade-in"] .pk-reveal.pk-in{ opacity:1; }

[data-reveal="zoom-in"] .pk-reveal{ opacity:0; transform:scale(.85); transition:opacity .45s ease, transform .45s ease; }
[data-reveal="zoom-in"] .pk-reveal.pk-in{ opacity:1; transform:scale(1); }

[data-reveal="pop"] .pk-reveal{ opacity:0; transform:scale(.6); transition:opacity .35s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1); }
[data-reveal="pop"] .pk-reveal.pk-in{ opacity:1; transform:scale(1); }

/* =====================================================
   حالت موبایل: پیش‌فرض ریسپانسیو (Grid)
   ===================================================== */
@media (max-width:768px){
	.pk-mobile-grid .pk-cats__grid{ grid-template-columns:repeat(4,1fr); gap:12px; }
	.pk-mobile-grid .pk-cat{ min-height:calc(var(--pk-card-h,150px) * .85); padding:14px 8px; max-width:none; }
}
@media (max-width:480px){
	.pk-mobile-grid .pk-cats__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* =====================================================
   حالت موبایل: اسکرول افقی (کارت‌ها کنار هم، بدون شکستن خط)
   ===================================================== */
@media (max-width:768px){
	.pk-mobile-scroll .pk-cats__grid{
		display:flex;
		grid-template-columns:none;
		overflow-x:auto;
		overflow-y:hidden;
		flex-wrap:nowrap;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		padding:14px 12px 18px;
		gap:12px;
		scrollbar-width:none;
	}
	.pk-mobile-scroll .pk-cats__grid::-webkit-scrollbar{ display:none; }
	.pk-mobile-scroll .pk-cat{
		flex:0 0 auto;
		width:var(--pk-card-w,110px);
		max-width:none;
		scroll-snap-align:start;
	}
	.pk-mobile-scroll.pk-tpl-horizontal .pk-cat{ width:220px; }
}

/* =====================================================
   حالت موبایل: ۲ ستون ثابت
   ===================================================== */
@media (max-width:768px){
	.pk-mobile-grid2 .pk-cats__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
	.pk-mobile-grid2 .pk-cat{ max-width:none; }
}