/* ============================================================
   نمایش محصولات پناه — استایل پایه (v3.0)
   شامل: گرید، کارت، هاور درخشش، نمایش سریع، قالب‌ها
   ============================================================ */

.panah-sample-products-root {
	--pp-bg: #f7f7fb;
	--pp-card: #fff;
	--pp-text: #0f172a;
	--pp-muted: #64748b;
	--pp-accent: #4f46e5;
	--pp-price: #e11d48;
	--pp-radius: 16px;
	--pp-shadow: 0 8px 32px -10px rgba(15, 23, 42, .18);
	--pp-font: 'Vazirmatn', system-ui, sans-serif;
}

.panah-sample-products-root,
.panah-sample-products-root * { box-sizing: border-box; font-family: var(--pp-font); }

.panah-sample-products-root {
	background: var(--pp-bg);
	color: var(--pp-text);
	direction: rtl;
	padding: 28px 16px;
	border-radius: calc(var(--pp-radius) + 8px);
	margin: 24px 0;
}

/* ── سرتیتر ── */
.pp-header { margin-bottom: 24px; }
.pp-title-wrap { display: flex; align-items: center; gap: 12px; }
.pp-accent-bar { width: 6px; height: 36px; border-radius: 999px; background: var(--pp-accent); flex-shrink: 0; }
.pp-title { font-size: clamp(20px, 4vw, 28px); font-weight: 900; margin: 0; line-height: 1.3; }
.pp-subtitle { font-size: 13px; color: var(--pp-muted); margin: 4px 0 0; }

/* ── نوار فیلتر/مرتب‌سازی ── */
.pp-filters {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	margin: 0 0 20px; padding: 8px;
	background: rgba(0,0,0,.04); border-radius: 14px;
}
.pp-sort-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-filter {
	flex: 0 0 auto; cursor: pointer;
	background: transparent; border: none;
	padding: 9px 16px; border-radius: 10px;
	font-family: inherit; font-size: 13px; font-weight: 700;
	color: var(--pp-muted); transition: all .2s ease;
}
.pp-filter:hover { color: var(--pp-text); background: rgba(0,0,0,.04); }
.pp-filter.is-active {
	background: var(--pp-card); color: var(--pp-accent);
	box-shadow: 0 2px 8px -2px rgba(0,0,0,.12);
}
.pp-cat-filter-wrap {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 0 4px 0 0; color: var(--pp-muted);
	font-size: 12px; font-weight: 800;
	margin-inline-start: auto; flex: 0 0 auto;
}
.pp-category-filter {
	min-width: 160px; height: 38px;
	border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
	background: var(--pp-card); color: var(--pp-text);
	font-family: inherit; font-size: 13px; font-weight: 700;
	padding: 0 12px; outline: none;
}
.pp-category-filter:focus { border-color: var(--pp-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-accent) 18%, transparent); }
.panah-tpl-dark .pp-filters { background: rgba(255,255,255,.06); }
.panah-tpl-dark .pp-filter:hover { background: rgba(255,255,255,.08); }
.panah-tpl-glass .pp-filters { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.panah-tpl-glass .pp-filter { color: rgba(255,255,255,.8); }
.panah-tpl-glass .pp-filter.is-active { background: rgba(255,255,255,.25); color: #fff; }
.panah-tpl-glass .pp-cat-filter-wrap { color: rgba(255,255,255,.8); }
.panah-tpl-glass .pp-category-filter { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.24); }
@media (max-width:680px) {
	.pp-filters { gap: 8px; padding: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
	.pp-sort-filters { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }
	.pp-filter { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
	.pp-cat-filter-wrap { flex: 0 0 auto; white-space: nowrap; }
	.pp-category-filter { min-width: 145px; height: 34px; font-size: 12px; }
}

/* ── گرید ── */
.pp-grid { display: grid; gap: 20px; }
.pp-cols-1 { grid-template-columns: 1fr; }
.pp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pp-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pp-cols-5 { grid-template-columns: repeat(5, 1fr); }
.pp-cols-6 { grid-template-columns: repeat(6, 1fr); }
.pp-cols-7 { grid-template-columns: repeat(7, 1fr); }
.pp-cols-8 { grid-template-columns: repeat(8, 1fr); }
.pp-cols-9 { grid-template-columns: repeat(9, 1fr); }
.pp-cols-10 { grid-template-columns: repeat(10, 1fr); }

@media (max-width:1400px) { .pp-cols-10,.pp-cols-9,.pp-cols-8,.pp-cols-7 { grid-template-columns: repeat(6,1fr); } }
@media (max-width:1100px) { .pp-cols-10,.pp-cols-9,.pp-cols-8,.pp-cols-7,.pp-cols-6 { grid-template-columns: repeat(4,1fr); } }
@media (max-width:900px) { .pp-cols-10,.pp-cols-9,.pp-cols-8,.pp-cols-7,.pp-cols-6,.pp-cols-5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:680px) {
	.pp-cols-10,.pp-cols-9,.pp-cols-8,.pp-cols-7,.pp-cols-6,.pp-cols-5,.pp-cols-4,.pp-cols-3 { grid-template-columns: repeat(2,1fr); }
	.pp-grid { gap: 12px; }
}
@media (max-width:420px) { .pp-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ── کارت ── */
.pp-card {
	background: var(--pp-card);
	border-radius: var(--pp-radius);
	border: 1px solid rgba(0,0,0,.07);
	box-shadow: var(--pp-shadow);
	display: flex; flex-direction: column;
	overflow: hidden; position: relative;
	content-visibility: auto; contain-intrinsic-size: 360px;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.pp-card:hover { transform: translateY(-4px); border-color: var(--pp-accent); box-shadow: 0 16px 40px -12px rgba(0,0,0,.22); }
.pp-card.pp-hidden { display: none !important; }

.pp-load-wrap { display: flex; justify-content: center; margin-top: 22px; }
.pp-load-more {
	border: none; border-radius: 12px; cursor: pointer;
	background: var(--pp-accent); color: #fff;
	font-family: inherit; font-size: 14px; font-weight: 900;
	padding: 12px 30px; box-shadow: 0 8px 22px -10px var(--pp-accent);
	transition: transform .2s ease, filter .2s ease;
}
.pp-load-more:hover { transform: translateY(-2px); filter: brightness(.94); }

/* ── نشان‌ها ── */
.pp-badges { position: absolute; top: 10px; right: 10px; z-index: 12; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pp-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; padding: 5px 9px; border-radius: 999px; line-height: 1; }
.pp-badge svg { width: 11px; height: 11px; }
.pp-badge-hot { background: linear-gradient(to left,#f43f5e,#ef4444); color: #fff; animation: pp-glow 2.2s ease-in-out infinite; }
.pp-badge-new { background: linear-gradient(to left,#10b981,#14b8a6); color: #fff; }
.pp-badge-off { background: #fbbf24; color: #451a03; border-radius: 7px; }
@keyframes pp-glow { 0%,100% { box-shadow: 0 4px 14px -4px rgba(239,68,68,.5); } 50% { box-shadow: 0 8px 20px -4px rgba(239,68,68,.85); } }

/* ── علاقه‌مندی ── */
.pp-wish {
	position: absolute; top: 10px; left: 10px; z-index: 12;
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255,255,255,.88); border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: var(--pp-muted); padding: 0;
	transition: background .2s, color .2s, transform .2s;
}
.pp-wish svg { width: 16px; height: 16px; }
.pp-wish:hover { background: #fff; color: #f43f5e; transform: scale(1.1); }
.pp-wish.liked { background: #f43f5e; color: #fff; transform: scale(1.1); }
.pp-wish.liked .pp-heart-svg { fill: currentColor; }

/* ── تصویر + درخشش هاور ── */
.pp-img-wrap { position: relative; aspect-ratio: 1/1; background: linear-gradient(135deg,#f8fafc,#f1f5f9); overflow: hidden; }
.pp-img-link { display: block; width: 100%; height: 100%; }
.pp-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.pp-card:hover .pp-img-wrap img { transform: scale(1.07); }

.pp-img-wrap::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
	transform: translateX(-100%);
}
.pp-card:hover .pp-img-wrap::after { animation: pp-shimmer 1s ease-out; }
@keyframes pp-shimmer { to { transform: translateX(100%); } }

.pp-unavailable { position: absolute; inset: 0; z-index: 8; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.pp-unavailable span { background: #fff; color: #1e293b; font-weight: 800; font-size: 13px; padding: 7px 18px; border-radius: 999px; }

/* ── دکمه نمایش سریع روی تصویر ── */
.pp-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; width: 100%; padding: 10px; transform: translateY(110%); transition: transform .3s ease; }
.pp-card:hover .pp-actions { transform: translateY(0); }
.pp-btn-view {
	display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 46px;
	border: 1px solid rgba(0,0,0,.08); border-radius: 12px; cursor: pointer;
	background: rgba(255,255,255,.98); color: #334155; font-size: 13px; font-weight: 800;
	box-shadow: 0 4px 16px rgba(0,0,0,.15); transition: all .2s;
}
.pp-btn-view svg { width: 18px; height: 18px; }
.pp-btn-view:hover { background: var(--pp-accent); color: #fff; transform: translateY(-2px); }

@media (max-width:480px) {
	.pp-actions { padding: 8px; }
	.pp-btn-view { height: 42px; font-size: 12px; }
}

/* ── بدنه کارت ── */
.pp-body { display: flex; flex-direction: column; flex: 1; padding: 14px; gap: 6px; }
.pp-cat { font-size: 10px; font-weight: 700; color: var(--pp-accent); text-transform: uppercase; letter-spacing: .04em; }
.pp-name { font-size: 14px; font-weight: 800; margin: 0; line-height: 1.6; min-height: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-name a { color: inherit; text-decoration: none !important; }
.pp-name a:hover { color: var(--pp-accent); }

.pp-rating { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pp-muted); }
.pp-stars { color: #f59e0b; display: inline-flex; }
.pp-stars svg { width: 14px; height: 14px; }
.pp-rating strong { color: var(--pp-text); }

.pp-price-wrap { margin-top: auto; padding-top: 6px; line-height: 1.4; }
.pp-old { color: var(--pp-muted); font-size: 11px; opacity: .7; display: block; }
.pp-price-row { display: flex; align-items: baseline; gap: 4px; }
.pp-price { font-size: 17px; font-weight: 900; color: var(--pp-text); }
.pp-price.is-sale { color: var(--pp-price); }
.pp-unit { font-size: 11px; color: var(--pp-muted); font-weight: 600; }

.pp-btn-bottom {
	display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px;
	background: var(--pp-accent); color: #fff !important; font-size: 13px; font-weight: 800;
	border-radius: calc(var(--pp-radius) - 4px); text-decoration: none !important;
	box-shadow: 0 6px 16px -6px var(--pp-accent); transition: filter .2s, transform .15s;
}
.pp-btn-bottom:hover { filter: brightness(.92); transform: translateY(-1px); }
.pp-btn-bottom.is-disabled { background: #94a3b8; box-shadow: none; cursor: not-allowed; pointer-events: none; }
.pp-btn-bottom svg { width: 15px; height: 15px; }

.panah-sample-products-root a:focus-visible,
.panah-sample-products-root button:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.panah-sample-products-root *,
	.panah-sample-products-root *::before,
	.panah-sample-products-root *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   قالب‌ها
   ============================================================ */
.panah-tpl-classic { background: #f5f1eb; --pp-radius: 6px; }
.panah-tpl-classic .pp-card { border: 1px solid #d6cfc2; box-shadow: none; border-radius: 6px; }
.panah-tpl-classic .pp-card:hover { box-shadow: 0 4px 14px rgba(120,100,70,.18); transform: none; }
.panah-tpl-classic .pp-accent-bar { background: #92400e; border-radius: 0; }
.panah-tpl-classic .pp-btn-bottom, .panah-tpl-classic .pp-btn-view { border-radius: 4px; }
.panah-tpl-classic .pp-badge { border-radius: 4px; }

.panah-tpl-dark { background: #0f172a; --pp-bg: #0f172a; --pp-card: #1e293b; --pp-text: #f1f5f9; --pp-muted: #94a3b8; }
.panah-tpl-dark .pp-card { background: #1e293b; border-color: rgba(148,163,184,.12); }
.panah-tpl-dark .pp-img-wrap { background: #0f172a; }
.panah-tpl-dark .pp-wish { background: rgba(15,23,42,.8); color: #f1f5f9; }
.panah-tpl-dark .pp-btn-view { background: #0f172a; color: #f1f5f9; }

.panah-tpl-minimal { background: #fff; --pp-radius: 2px; padding: 16px 0; }
.panah-tpl-minimal .pp-card { border: none; border-bottom: 2px solid #e5e5e5; box-shadow: none; border-radius: 0; }
.panah-tpl-minimal .pp-card:hover { border-bottom-color: var(--pp-accent); transform: none; }
.panah-tpl-minimal .pp-accent-bar { background: #171717; border-radius: 0; }
.panah-tpl-minimal .pp-btn-bottom, .panah-tpl-minimal .pp-btn-view { border-radius: 0; }
.panah-tpl-minimal .pp-img-wrap::after { display: none; }

.panah-tpl-colorful { background: linear-gradient(135deg,#fef3c7 0%,#fce7f3 50%,#ddd6fe 100%); }
.panah-tpl-colorful .pp-card {
	background: #fff; border: 2px solid transparent;
	background-image: linear-gradient(#fff,#fff), linear-gradient(135deg,#ec4899,#8b5cf6,#06b6d4);
	background-origin: border-box; background-clip: padding-box, border-box;
	box-shadow: 0 8px 28px -8px rgba(236,72,153,.28);
}
.panah-tpl-colorful .pp-accent-bar { background: linear-gradient(to bottom,#ec4899,#8b5cf6); }
.panah-tpl-colorful .pp-btn-bottom { background: linear-gradient(to left,#ec4899,#8b5cf6); }
.panah-tpl-colorful .pp-title { background: linear-gradient(to left,#ec4899,#8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }

.panah-tpl-glass { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); --pp-bg: transparent; --pp-text: #fff; --pp-muted: rgba(255,255,255,.75); --pp-accent: rgba(255,255,255,.9); }
.panah-tpl-glass .pp-card { background: rgba(255,255,255,.15); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.panah-tpl-glass .pp-name a, .panah-tpl-glass .pp-price, .panah-tpl-glass .pp-title { color: #fff; }
.panah-tpl-glass .pp-price.is-sale { color: #fde047; }
.panah-tpl-glass .pp-wish, .panah-tpl-glass .pp-btn-bottom, .panah-tpl-glass .pp-btn-view { background: rgba(255,255,255,.25); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }