/* حالت Canvas: صفحه کاملا مستقل از قالب. پس‌زمینه گرادیان نرم مثل پورتال ws-cis و هدر ساده و یک‌دست. */
body.wsw-canvas {
	margin: 0; padding: 16px; direction: rtl; min-height: 100vh; min-height: 100dvh;
	background-color: #eef4ff;
	background-image: radial-gradient(circle at top right, rgba(96, 165, 250, .2), transparent 32%), radial-gradient(circle at bottom left, rgba(129, 140, 248, .18), transparent 30%), linear-gradient(135deg, #f8fbff, #eef4ff);
}
/* پس‌زمینه ثابت با لایه جدا (background-attachment:fixed روی موبایل اسکرول را لگ می‌کند) */
body.wsw-canvas::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: inherit; background-attachment: scroll; }
body.wsw-canvas.wsw-dark-body { background-color: #0d1117; background-image: radial-gradient(circle at top right, rgba(47, 134, 255, .12), transparent 32%), radial-gradient(circle at bottom left, rgba(99, 102, 241, .1), transparent 30%); }
.wsw-canvas__footer { text-align: center; padding: 24px 16px 96px; color: #64748b; font-size: 13px; }

/* صفحه حساب کاربری سایدبار و لوگوی خودش را دارد؛ هدر ساده Canvas تکراری است. */
body.wsw-page-account .wsw-canvas__header { display: none; }
body.wsw-page-account .wsw-shop { max-width: 1360px; }

/* لینک‌های «پرش به محتوا» که قالب‌ها چاپ می‌کنند: فقط برای صفحه‌خوان (بدون ظاهر) */
body.wsw-canvas .skip-link, body.wsw-canvas a[class*="skip"], body.wsw-canvas a.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* هدر ساده و یک‌دست: نوار تخت با خط پایین، بدون گرادیان و برچسب‌های پررنگ */
.wsw-canvas__header { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; margin: -16px -16px 16px; background: var(--wsw-surface, #fff); border-bottom: 1px solid var(--wsw-border, #e2e8f0); }
.wsw-canvas__bar { display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 8px 16px; min-height: 58px; }
.wsw-canvas__logo { display: inline-flex; align-items: center; color: var(--wsw-ink, #0f172a); text-decoration: none; font-weight: 800; font-size: 18px; }
.wsw-canvas__logo img { max-height: 38px; width: auto; display: block; }
.wsw-canvas__secure { display: inline-flex; align-items: center; gap: 5px; color: var(--wsw-success, #059669); font-size: 12.5px; font-weight: 700; }
.wsw-canvas__nav { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.wsw-canvas__navlink { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; color: var(--wsw-ink, #0f172a); font-size: 13px; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .wsw-canvas__navlink:hover { background: var(--wsw-border-soft, #f1f5f9); } }
.wsw-canvas__navlink svg { color: var(--wsw-muted, #64748b); }
.wsw-canvas__ico { position: relative; display: inline-flex; }
.wsw-canvas__badge { position: absolute; top: -7px; inset-inline-start: -8px; min-width: 17px; padding: 0 4px; border-radius: 99px; background: var(--wsw-danger, #e11d48); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 17px; text-align: center; }
.wsw-canvas__side { display: inline-flex; align-items: center; gap: 8px; }
.wsw-canvas__phone { color: var(--wsw-muted, #64748b); font-size: 13px; text-decoration: none; }
.wsw-canvas__side .wsw-iconbtn { width: 34px; height: 34px; border: 0; background: transparent; }
@media (hover: hover) { .wsw-canvas__side .wsw-iconbtn:hover { background: var(--wsw-border-soft, #f1f5f9); color: var(--wsw-primary, #2f86ff); } }
body.wsw-canvas.wsw-dark-body .wsw-canvas__header { background: #161b24; border-color: #262c38; }
body.wsw-canvas.wsw-dark-body .wsw-canvas__logo, body.wsw-canvas.wsw-dark-body .wsw-canvas__navlink { color: #e4e6ea; }
@media (hover: hover) { body.wsw-canvas.wsw-dark-body .wsw-canvas__navlink:hover, body.wsw-canvas.wsw-dark-body .wsw-canvas__side .wsw-iconbtn:hover { background: #1c212b; } }
body.wsw-canvas.wsw-dark-body .wsw-canvas__footer, body.wsw-canvas.wsw-dark-body .wsw-canvas__phone { color: #a0a6ad; }

@media (max-width: 900px) {
	body.wsw-canvas { padding: 0; }
	.wsw-canvas__header { margin: 0 0 10px; }
	.wsw-canvas__bar { gap: 8px; padding: 6px 12px; min-height: 54px; }
	.wsw-canvas__navlink span:not(.wsw-canvas__ico) { display: none; }
	.wsw-canvas__navlink { padding: 8px; }
	.wsw-canvas__phone, .wsw-canvas__secure span { display: none; }
	.wsw-canvas__secure { margin-inline-start: 4px; }
}

/* انتقال نرم بین صفحه‌های Canvas: هدر ثابت می‌ماند و فقط محتوا محو می‌شود (مرورگرهای ناپشتیبان عادی ناوبری می‌کنند) */
@view-transition { navigation: auto; }
body.wsw-canvas .wsw-canvas__header { view-transition-name: wsw-header; }
::view-transition-old(root) { animation: .08s ease both wsw-vt-out; }
::view-transition-new(root) { animation: .14s ease-out both wsw-vt-in; }
@keyframes wsw-vt-out { to { opacity: 0; } }
@keyframes wsw-vt-in { from { opacity: .0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* موبایل: هدر همیشه چسبیده و بدون blur (blur روی عنصر چسبیده/ثابت اسکرول را سنگین می‌کند) */
@media (max-width: 900px) {
	body.wsw-canvas, body.wsw-canvas.wsw-fx-body { background-image: none; }
	body.wsw-canvas::before { background: linear-gradient(135deg, #f8fbff, #eef4ff); }
	body.wsw-canvas.wsw-dark-body::before { background: #0d1117; }
	body.wsw-canvas .wsw-canvas__header { top: 0; padding-top: env(safe-area-inset-top); z-index: 1000; box-shadow: 0 1px 8px rgba(15, 23, 42, .06); -webkit-backdrop-filter: none; backdrop-filter: none; }
}