/* prime — الموسم الشتوي
   الشكل الشتوي كله تحت html.winter (بيتحط من season.js لما الأدمن يفعّل الموسم
   والزائر على «شتوي»). من غيره الملف ده ملوش أي أثر غير شكل زرار الموسم.
   التصميم نفسه ما بيتغيّرش: بس تلج فوق كلمة PRIME، تلج خفيف نازل، ولمسات تلجية. */

/* ───────── اختيار الكولكشن (شتوي/صيفي) جنب عنوان المنتجات ───────── */
.season-seg {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 999px; gap: 0;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.season-seg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 92px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 800;
  transition: color .25s;
}
.season-seg button svg { display: block; flex: none; }
.season-seg button.on { color: #2f6ea8; }
html.theme-dark .season-seg button.on { color: #cfe7fd; }
.season-seg.is-summer button.on { color: #8a6412; }
html.theme-dark .season-seg.is-summer button.on { color: #f1d27a; }
.season-seg button:focus-visible { outline: 2px solid #7fb2e0; outline-offset: 1px; }
/* الخلفية المتزحلقة تحت الاختيار */
.season-seg-thumb {
  position: absolute; top: 4px; bottom: 4px; right: 4px; width: calc(50% - 4px);
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, #eef6fe, #d9eafa);
  box-shadow: 0 2px 10px -4px rgba(63,127,189,.55), inset 0 0 0 1px rgba(127,178,224,.55);
  transition: right .32s cubic-bezier(.3,.8,.3,1), background .3s, box-shadow .3s;
}
html.theme-dark .season-seg-thumb {
  background: linear-gradient(180deg, rgba(169,212,251,.22), rgba(169,212,251,.1));
  box-shadow: 0 0 18px -6px rgba(169,212,251,.6), inset 0 0 0 1px rgba(169,212,251,.35);
}
.season-seg.is-summer .season-seg-thumb {
  right: 50%;
  background: linear-gradient(180deg, #fff6dc, #f6e3a8);
  box-shadow: 0 2px 10px -4px rgba(212,175,55,.6), inset 0 0 0 1px rgba(212,175,55,.5);
}
html.theme-dark .season-seg.is-summer .season-seg-thumb {
  background: linear-gradient(180deg, rgba(232,198,106,.22), rgba(232,198,106,.1));
  box-shadow: 0 0 18px -6px rgba(232,198,106,.55), inset 0 0 0 1px rgba(232,198,106,.35);
}
@media (max-width: 520px) {
  .season-seg button { min-width: 80px; height: 36px; padding: 0 12px; font-size: 13px; }
}

/* ───────── التلج النازل ───────── */
.season-snow {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 15; /* فوق المحتوى وتحت الهيدر والسلة والنوافذ */
}

/* ───────── كولكشن فاضي ───────── */
.season-empty { display: grid; justify-items: center; gap: 10px; padding: 8px 0; }
.season-empty-ic { color: #5e9ad0; }
html.theme-dark .season-empty-ic { color: #a9d4fb; }
.season-empty b { font-size: 19px; font-weight: 900; }
.season-empty p { margin: 0; color: var(--muted); max-width: 38ch; line-height: 1.8; }
.season-empty .btn { width: auto; padding: 10px 22px; margin-top: 4px; }

/* ═══════════════ الشكل الشتوي ═══════════════ */
html.winter {
  --wx: #3f7fbd;            /* أزرق تلجي (فاتح) */
  --wx2: #6aa6d9;
  --ph-hair: rgba(86, 140, 196, .32);
}
html.winter.theme-dark {
  --wx: #a9d4fb;            /* أزرق تلجي (غامق) */
  --wx2: #cfe7fd;
  --ph-hair: rgba(170, 214, 255, .26);
}

/* ── تلج فوق كلمة PRIME: اللوجو + الكلمة الكبيرة في الهيرو ──
   التلج نفسه بيترسم في season-fx.js على canvas (.sn-cap) فوق الحروف بالظبط. */
html.winter .logo.sn-word { position: relative; cursor: pointer; }
/* الحروف بقت عناصر منفصلة، فالصفحة الـRTL كانت هتقلب ترتيبها (EMIRP) — بنثبّتها LTR */
.sn-word { direction: ltr; unicode-bidi: isolate; }
.sn-l { white-space: pre; }
.phx-ghost .sn-l { display: inline-block; }   /* عشان كل حرف يتهز لوحده */
.sn-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.sn-cap { position: absolute; pointer-events: none; max-width: none; }
/* الكتل والبودرة اللي بتقع: فوق كل حاجة ومابتمسكش الماوس */
.sn-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; }

/* ── لمسات تلجية بدل الدهبي في الخطوط والتوهج (الأزرار والأسعار تفضل دهبي) ── */
html.winter .phx-hero::after {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wx2) 22%, transparent), transparent 72%);
}
html.winter .phx-ghost { -webkit-text-stroke-color: rgba(86, 140, 196, .5); }
html.winter.theme-dark .phx-ghost { -webkit-text-stroke-color: rgba(190, 225, 255, .42); }
html.winter .phx-kicker { color: var(--wx); }
html.winter .phx-rule { background: linear-gradient(90deg, var(--wx), transparent) !important; }
html.winter .phx-rule::before { color: var(--wx); }
html.winter .icon-btn:hover { border-color: var(--wx2) !important; box-shadow: 0 0 16px -7px var(--wx2) !important; }
html.winter .sf-type.on, html.winter .sf-cat.on { border-color: var(--wx2); }

/* مع تقليل الحركة: التلج النازل بيتشال من الجافاسكريبت، والتلج الثابت على الكلمة بيفضل */
@media (prefers-reduced-motion: reduce) {
  .season-seg-thumb, .season-seg button { transition: none; }
}