.ss-panel {
  --ss-c1: #93c5fd;
  --ss-c2: #c4b5fd;
  position: relative;
  border-radius: 20px;
  padding: 3px;
  height: 100%;
  background: linear-gradient(135deg, var(--ss-c1), var(--ss-c2));
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--ss-c1) 38%, transparent),
    0 4px 12px rgba(15, 23, 42, 0.07);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease;
  animation: ssIn 0.5s ease both;
}
.ss-panel:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--ss-c1) 48%, transparent),
    0 8px 18px rgba(15, 23, 42, 0.1);
}
@keyframes ssIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ss-panel[data-tone="0"] { --ss-c1:#7dd3fc; --ss-c2:#a5b4fc; }
.ss-panel[data-tone="1"] { --ss-c1:#6ee7b7; --ss-c2:#99f6e4; }
.ss-panel[data-tone="2"] { --ss-c1:#f9a8d4; --ss-c2:#c4b5fd; }
.ss-panel[data-tone="3"] { --ss-c1:#fcd34d; --ss-c2:#fdba74; }
.ss-panel[data-tone="4"] { --ss-c1:#67e8f9; --ss-c2:#5eead4; }
.ss-panel[data-tone="5"] { --ss-c1:#c4b5fd; --ss-c2:#f0abfc; }
.ss-panel[data-tone="6"] { --ss-c1:#86efac; --ss-c2:#bef264; }
.ss-panel[data-tone="7"] { --ss-c1:#fda4af; --ss-c2:#fbcfe8; }
.ss-panel[data-tone="8"] { --ss-c1:#93c5fd; --ss-c2:#7dd3fc; }
.ss-panel[data-tone="9"] { --ss-c1:#fde68a; --ss-c2:#fca5a5; }

.ss-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--ss-c1), var(--ss-c2), #fff, var(--ss-c1));
  background-size: 300% 300%;
  animation: ssShift 8s ease-in-out infinite;
  z-index: 0;
}
@keyframes ssShift {
  0%   { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50%  { background-position: 100% 50%; filter: hue-rotate(20deg); }
  100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}

.ss-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 17px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  text-decoration: none !important;
  color: inherit;
}
.ss-banner {
  height: 100px;
  object-fit: cover;
  width: 100%;
  display: block;
  background: linear-gradient(135deg, var(--ss-c1), var(--ss-c2));
}
.ss-body {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  background: #fff;
}
.ss-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  text-align: center;
}
.ss-id {
  align-self: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #334155;
  background: color-mix(in srgb, var(--ss-c1) 30%, #fff);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.ss-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
.ss-stat {
  text-align: center;
  border-radius: 12px;
  padding: 0.4rem 0.2rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: background .25s, transform .25s;
}
.ss-panel:hover .ss-stat {
  background: color-mix(in srgb, var(--ss-c1) 20%, #fff);
  transform: translateY(-2px);
}
.ss-stat-val {
  display: block;
  font-weight: 800;
  font-size: 0.9rem;
  color: #0f172a;
}
.ss-stat-lbl {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  margin-top: 2px;
}
.ss-badge-row {
  position: absolute;
  top: 10px;
  inset-inline: 10px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.ss-verified {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-discount {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(239,68,68,.35);
}
.ss-share {
  margin-top: 0.35rem;
  pointer-events: auto;
}
.ss-share > * { max-width: 100%; }

/* ===== پنل بک‌گراند کل صفحه لیست فروشگاه‌ها ===== */
.ss-page-stage {
  --ss-a: #e0f2fe;
  --ss-b: #f0f9ff;
  position: relative;
  border-radius: 28px;
  padding: 1.25rem 1rem 1.75rem;
  margin: 0.5rem auto 1.5rem;
  max-width: 1400px;
  background: linear-gradient(145deg, var(--ss-a) 0%, var(--ss-b) 55%, #fff 130%);
  box-shadow:
    0 20px 50px rgba(14, 165, 233, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.7);
  transition: background 1.4s ease, box-shadow 1.4s ease, border-color 1.4s ease;
  overflow: hidden;
}
.ss-page-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ss-a) 80%, white) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--ss-b) 70%, white) 0%, transparent 45%);
  opacity: 0.9;
  transition: opacity 1.4s ease;
}
.ss-page-stage > * {
  position: relative;
  z-index: 1;
}

/* پالت خیلی روشن و جذاب */
.ss-page-stage[data-glow="0"] { --ss-a:#e0f2fe; --ss-b:#dbeafe; } /* آبی یخی */
.ss-page-stage[data-glow="1"] { --ss-a:#ecfdf5; --ss-b:#d1fae5; } /* سبز نعنایی */
.ss-page-stage[data-glow="2"] { --ss-a:#fdf4ff; --ss-b:#f5d0fe; } /* یاسی */
.ss-page-stage[data-glow="3"] { --ss-a:#fff7ed; --ss-b:#ffedd5; } /* هلویی */
.ss-page-stage[data-glow="4"] { --ss-a:#f0fdfa; --ss-b:#ccfbf1; } /* فیروزه‌ای */
.ss-page-stage[data-glow="5"] { --ss-a:#fefce8; --ss-b:#fef08a; } /* لیمویی خیلی روشن */
.ss-page-stage[data-glow="6"] { --ss-a:#fdf2f8; --ss-b:#fce7f3; } /* صورتی */
.ss-page-stage[data-glow="7"] { --ss-a:#eef2ff; --ss-b:#e0e7ff; } /* ایندیگو روشن */
.ss-page-stage[data-glow="8"] { --ss-a:#f0fdf4; --ss-b:#dcfce7; } /* سبز روشن */
.ss-page-stage[data-glow="9"] { --ss-a:#fff1f2; --ss-b:#ffe4e6; } /* رز */

/* فیلتر/سایدبار روی شیشه مات */
.ss-page-stage .card,
.ss-page-stage .filter-box,
.ss-page-stage aside .card {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.65) !important;
}

/* ===== پنل فروشگاه‌ها = هم‌عرض و هم‌سبک صفحه اصلی ===== */
.ss-page-stage,
#shops.ss-page-stage,
.ss-root.ss-page-stage {
  position: relative !important;
  max-width: 1600px !important;          /* مثل #main-panel */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0.75rem !important;
  margin-bottom: 1.5rem !important;
  padding: 1.5rem 1.25rem 2rem !important;
  border-radius: 2rem !important;

  /* کارت زیرین سفید — رنگ کارت عوض نمی‌شود */
  background: #ffffff !important;
  border: none !important;

  /* سایه رنگی برجسته (متغیر با --ss-glow) */
  --ss-glow: rgba(147, 197, 253, 0.55);
  box-shadow:
    0 0 25px var(--ss-glow),
    0 0 50px color-mix(in srgb, var(--ss-glow) 50%, transparent),
    0 20px 40px rgba(15, 23, 42, 0.06) !important;

  transition: box-shadow 1.4s ease !important;
  overflow: visible !important; /* بک‌لایت بیرون بزند */
  z-index: 1;
}

/* لایه بک‌لایت پشت کارت سفید (مثل .backlight صفحه اصلی) */
.ss-page-stage::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -36px !important;
  left: -36px !important;
  right: -36px !important;
  bottom: -36px !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: var(--ss-glow) !important;
  filter: blur(55px) !important;
  opacity: 0.65 !important;
  transition: background 1.4s ease, opacity 1.4s ease !important;
  animation: none !important;
}

/* پالت فقط برای سایه / بک‌لایت — نه پس‌زمینه کارت */
.ss-page-stage[data-glow="0"] { --ss-glow: rgba(125, 211, 252, 0.55); } /* sky */
.ss-page-stage[data-glow="1"] { --ss-glow: rgba(167, 243, 208, 0.55); } /* mint */
.ss-page-stage[data-glow="2"] { --ss-glow: rgba(233, 213, 255, 0.55); } /* lilac */
.ss-page-stage[data-glow="3"] { --ss-glow: rgba(253, 230, 138, 0.50); } /* soft gold */
.ss-page-stage[data-glow="4"] { --ss-glow: rgba(103, 232, 249, 0.50); } /* cyan */
.ss-page-stage[data-glow="5"] { --ss-glow: rgba(251, 207, 232, 0.55); } /* pink */
.ss-page-stage[data-glow="6"] { --ss-glow: rgba(191, 219, 254, 0.55); } /* blue */
.ss-page-stage[data-glow="7"] { --ss-glow: rgba(187, 247, 208, 0.50); } /* green */
.ss-page-stage[data-glow="8"] { --ss-glow: rgba(196, 181, 253, 0.55); } /* violet */
.ss-page-stage[data-glow="9"] { --ss-glow: rgba(254, 215, 170, 0.50); } /* peach */

/* فیلتر و باکس‌ها روی کارت سفید شفاف نمانند اجباری */
.ss-page-stage .card,
.ss-page-stage aside .card {
  background: #fff !important;
  backdrop-filter: none;
}

/* ===== صفحه تکی فروشگاه (مثل /shops و صفحه اصلی) ===== */
.shop-page-stage {
  position: relative !important;
  max-width: 1600px !important;
  width: 100% !important;
  margin: 0.75rem auto 1.5rem !important;
  padding: 1.5rem 1.25rem 2rem !important;
  border-radius: 2rem !important;
  background: #ffffff !important;
  border: none !important;
  --ss-glow: rgba(147, 197, 253, 0.55);
  box-shadow:
    0 0 25px var(--ss-glow),
    0 0 50px color-mix(in srgb, var(--ss-glow) 50%, transparent),
    0 20px 40px rgba(15, 23, 42, 0.06) !important;
  transition: box-shadow 1.4s ease !important;
  overflow: visible !important;
  z-index: 1;
}
.shop-page-stage::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -36px; left: -36px; right: -36px; bottom: -36px;
  border-radius: 50% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: var(--ss-glow) !important;
  filter: blur(55px) !important;
  opacity: 0.65 !important;
  transition: background 1.4s ease, opacity 1.4s ease !important;
}
.shop-page-stage[data-glow="0"] { --ss-glow: rgba(125, 211, 252, 0.55); }
.shop-page-stage[data-glow="1"] { --ss-glow: rgba(167, 243, 208, 0.55); }
.shop-page-stage[data-glow="2"] { --ss-glow: rgba(233, 213, 255, 0.55); }
.shop-page-stage[data-glow="3"] { --ss-glow: rgba(253, 230, 138, 0.50); }
.shop-page-stage[data-glow="4"] { --ss-glow: rgba(103, 232, 249, 0.50); }
.shop-page-stage[data-glow="5"] { --ss-glow: rgba(251, 207, 232, 0.55); }
.shop-page-stage[data-glow="6"] { --ss-glow: rgba(191, 219, 254, 0.55); }
.shop-page-stage[data-glow="7"] { --ss-glow: rgba(187, 247, 208, 0.50); }
.shop-page-stage[data-glow="8"] { --ss-glow: rgba(196, 181, 253, 0.55); }
.shop-page-stage[data-glow="9"] { --ss-glow: rgba(254, 215, 170, 0.50); }

/* محتوای داخل پنل بالای بک‌لایت */
.shop-page-stage > * { position: relative; z-index: 1; }


/* products page stage sync */
.shop-page-stage.pc-stage,
.pc-stage.shop-page-stage {
  max-width: 1600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #ffffff !important;
  border-radius: 2rem !important;
  padding: 1.5rem 1.25rem 2rem !important;
  --ss-glow: rgba(147, 197, 253, 0.55);
  box-shadow:
    0 0 25px var(--ss-glow),
    0 0 50px color-mix(in srgb, var(--ss-glow) 50%, transparent),
    0 20px 40px rgba(15, 23, 42, 0.06) !important;
  overflow: visible !important;
}

/* =========================================================
   پنل سفید + سایه رنگی جمع‌وجور (برجسته، نه پس‌زمینه صفحه)
   ========================================================= */
.ss-page-stage,
.shop-page-stage,
.pc-stage.shop-page-stage,
.shop-page-stage.pc-stage {
  background: #ffffff !important;
  background-image: none !important;
  max-width: 1600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 1.75rem !important;
  padding: 1.35rem 1.15rem 1.75rem !important;

  /* سایه نزدیک به لبه — حالت کارت برجسته */
  --ss-glow: rgba(96, 165, 250, 0.45);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.06),
    0 12px 28px var(--ss-glow),
    0 0 0 1px rgba(15, 23, 42, 0.04) !important;

  overflow: visible !important;
  isolation: isolate;
  z-index: 1;
}

/* بک‌لایت فقط لبه — کوچک و نزدیک */
.ss-page-stage::before,
.shop-page-stage::before,
.pc-stage.shop-page-stage::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  /* فاصله کم از لبه پنل */
  top: -12px !important;
  left: -12px !important;
  right: -12px !important;
  bottom: -12px !important;
  border-radius: 2rem !important;   /* نه 50% دایره بزرگ */
  z-index: -1 !important;
  pointer-events: none !important;
  background: var(--ss-glow) !important;
  filter: blur(18px) !important;     /* قبلاً 55px بود → خیلی پخش */
  opacity: 0.55 !important;
  transition: background 1.2s ease, opacity 1.2s ease !important;
}

/* پالت سایه (کارت سفید می‌ماند) */
.ss-page-stage[data-glow="0"], .shop-page-stage[data-glow="0"] { --ss-glow: rgba(96, 165, 250, 0.42); }
.ss-page-stage[data-glow="1"], .shop-page-stage[data-glow="1"] { --ss-glow: rgba(52, 211, 153, 0.40); }
.ss-page-stage[data-glow="2"], .shop-page-stage[data-glow="2"] { --ss-glow: rgba(192, 132, 252, 0.40); }
.ss-page-stage[data-glow="3"], .shop-page-stage[data-glow="3"] { --ss-glow: rgba(251, 191, 36, 0.38); }
.ss-page-stage[data-glow="4"], .shop-page-stage[data-glow="4"] { --ss-glow: rgba(34, 211, 238, 0.40); }
.ss-page-stage[data-glow="5"], .shop-page-stage[data-glow="5"] { --ss-glow: rgba(244, 114, 182, 0.38); }
.ss-page-stage[data-glow="6"], .shop-page-stage[data-glow="6"] { --ss-glow: rgba(129, 140, 248, 0.42); }
.ss-page-stage[data-glow="7"], .shop-page-stage[data-glow="7"] { --ss-glow: rgba(74, 222, 128, 0.38); }
.ss-page-stage[data-glow="8"], .shop-page-stage[data-glow="8"] { --ss-glow: rgba(167, 139, 250, 0.40); }
.ss-page-stage[data-glow="9"], .shop-page-stage[data-glow="9"] { --ss-glow: rgba(251, 146, 60, 0.36); }

/* اگر pc-stage قبلاً پس‌زمینه آبی داشت، خنثی شود */
.pc-stage {
  background: #ffffff !important;
}
.pc-stage::before {
  /* اگر pc-stage بدون shop-page-stage هم استفاده شود */
  border-radius: 2rem !important;
  filter: blur(18px) !important;
  top: -12px !important;
  left: -12px !important;
  right: -12px !important;
  bottom: -12px !important;
}

/* ===== هم‌سبک صفحه اصلی: wrapper + backlight جدا ===== */
.sr-stage-wrap {
  position: relative;
  max-width: 1600px;
  width: 100%;
  margin: 0.75rem auto 1.5rem;
  padding: 0;
  z-index: 1;
}
.sr-stage-wrap > .sr-backlight {
  position: absolute;
  top: -18px;
  left: -18px;
  right: -18px;
  bottom: -18px;
  border-radius: 2rem;
  z-index: 0;
  pointer-events: none;
  filter: blur(22px);
  opacity: 0.55;
  transition: background 1.2s ease;
  background: rgba(96, 165, 250, 0.45);
}
.sr-stage-wrap > .sr-panel {
  position: relative;
  z-index: 1;
  background: #ffffff !important;
  border-radius: 1.75rem;
  padding: 1.35rem 1.15rem 1.75rem;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* خاموش کردن ::beforeهای قبلی که سایه را پخش می‌کردند */
.ss-page-stage::before,
.shop-page-stage::before,
.pc-stage::before,
.pc-stage.shop-page-stage::before {
  display: none !important;
  content: none !important;
  filter: none !important;
  opacity: 0 !important;
}
.ss-page-stage,
.shop-page-stage,
.pc-stage.shop-page-stage {
  background: transparent !important;
  box-shadow: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}