/* =============================================================================
 *  שי סבג — שכבת מושן עתידנית (FX)
 *  Preloader · מעברי עמודים · פס התקדמות · זוהר עכבר · רקע אוורה ·
 *  הטיית כרטיסים (tilt) · כפתורים מגנטיים · חשיפות בגלילה · מוני מספרים
 *  הכול מבוסס transform/opacity (GPU), בטוח במובייל, מכבד reduced-motion.
 * ===========================================================================*/

/* ---------- 0. בסיס ---------- */
:root { --fx-ease: cubic-bezier(.16,.84,.44,1); }

/* כשה-FX פעיל — נמנע גלילה בזמן טעינה */
html.fx-loading, html.fx-loading body { overflow: hidden !important; }

/* ============================================================
 *  1. Preloader — מסך פתיחה ממותג
 * ========================================================== */
.fx-loader {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background:
    radial-gradient(800px 500px at 50% 38%, rgba(225,6,0,.16), transparent 60%),
    #0a0a0a;
  transition: opacity .7s var(--fx-ease), visibility .7s var(--fx-ease);
  /* גיבוי ללא JS: ייעלם אוטומטית אחרי 4ש' */
  animation: fxLoaderFail 0s linear 4s forwards;
}
html.fx-ready .fx-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes fxLoaderFail { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.fx-loader__box { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.fx-loader__ring { position: absolute; inset: 0; border-radius: 50%; }
.fx-loader__ring::before,
.fx-loader__ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
}
.fx-loader__ring::before { border-top-color: var(--red); border-inline-end-color: var(--red); animation: fxSpin 1s linear infinite; }
.fx-loader__ring::after  { border-bottom-color: rgba(255,255,255,.25); inset: 10px; animation: fxSpin 1.6s linear infinite reverse; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

.fx-loader__logo { width: 108px; height: 44px; display: grid; place-items: center; animation: fxPulse 1.6s ease-in-out infinite; }
.fx-loader__logo svg, .fx-loader__logo img { width: 100%; height: 100%; object-fit: contain; }
@keyframes fxPulse { 0%,100%{ transform: scale(1); opacity:.92 } 50%{ transform: scale(1.08); opacity:1 } }

.fx-loader__name {
  position: absolute; inset-block-end: -46px; inset-inline: 0; text-align: center;
  color: #fff; font-weight: 900; letter-spacing: .35em; font-size: .82rem;
  opacity: 0; animation: fxFadeIn .6s ease .25s forwards;
}
.fx-loader__bar { position: absolute; inset-block-end: -70px; inset-inline: 50%; width: 140px; height: 2px; transform: translateX(50%); background: rgba(255,255,255,.12); overflow: hidden; border-radius: 2px; }
.fx-loader__bar::after { content:""; position:absolute; inset-block:0; inset-inline-start:-40%; width:40%; background: linear-gradient(90deg, transparent, var(--red), transparent); animation: fxLoad 1.1s ease-in-out infinite; }
@keyframes fxLoad { to { inset-inline-start: 120%; } }
@keyframes fxFadeIn { to { opacity: 1; } }

/* ============================================================
 *  2. מעבר עמודים — וילון (curtain)
 * ========================================================== */
.fx-curtain {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  transform: translateY(0); visibility: hidden;
}
.fx-curtain span { background: #0a0a0a; transform: scaleY(0); transform-origin: bottom; }
.fx-curtain.in { visibility: visible; }
.fx-curtain.in span { transform: scaleY(1); transition: transform .5s var(--fx-ease); }
.fx-curtain.in span:nth-child(1){ transition-delay: 0s; }
.fx-curtain.in span:nth-child(2){ transition-delay: .06s; }
.fx-curtain.in span:nth-child(3){ transition-delay: .12s; }
.fx-curtain.in span:nth-child(4){ transition-delay: .18s; }
.fx-curtain__line { position: absolute; inset-inline: 0; top: 50%; height: 2px; background: var(--red); box-shadow: 0 0 18px var(--red); transform: scaleX(0); transform-origin: center; }
.fx-curtain.in .fx-curtain__line { transform: scaleX(1); transition: transform .5s var(--fx-ease) .1s; }

/* ============================================================
 *  3. פס התקדמות גלילה
 * ========================================================== */
.fx-progress {
  position: fixed; top: 0; inset-inline: 0; height: 3px; width: 0%;
  z-index: 9998; background: linear-gradient(90deg, var(--red), #ff7a45);
  box-shadow: 0 0 12px var(--red-glow); transition: width .1s linear;
}

/* ============================================================
 *  4. זוהר עכבר (דסקטופ בלבד)
 * ========================================================== */
.fx-cursor {
  position: fixed; top: 0; inset-inline-start: 0; width: 460px; height: 460px;
  border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(225,6,0,.13), transparent 62%);
  mix-blend-mode: screen; transition: opacity .4s ease; will-change: transform;
}
@media (hover: hover) and (pointer: fine) { .fx-cursor.on { opacity: 1; } }

/* ============================================================
 *  5. רקע אוורה — בועות זוהר נעות
 * ========================================================== */
.fx-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .35; will-change: transform;
}
.fx-aurora i:nth-child(1){ width: 480px; height: 480px; top: -120px; inset-inline-end: -80px; background: radial-gradient(circle, rgba(225,6,0,.55), transparent 70%); animation: fxDrift1 22s ease-in-out infinite; }
.fx-aurora i:nth-child(2){ width: 380px; height: 380px; bottom: -100px; inset-inline-start: -60px; background: radial-gradient(circle, rgba(225,6,0,.30), transparent 70%); animation: fxDrift2 28s ease-in-out infinite; }
.fx-aurora i:nth-child(3){ width: 300px; height: 300px; top: 40%; inset-inline-start: 45%; background: radial-gradient(circle, rgba(120,20,255,.16), transparent 70%); animation: fxDrift3 34s ease-in-out infinite; }
@keyframes fxDrift1 { 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(-60px,70px) scale(1.15) } }
@keyframes fxDrift2 { 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(70px,-50px) scale(1.1) } }
@keyframes fxDrift3 { 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(-40px,-60px) scale(1.2) } }

/* ============================================================
 *  6. חשיפות בגלילה (משדרג את .reveal הקיים)
 * ========================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
/* וריאציות כיוון */
.reveal--right { transform: translateX(40px); }
.reveal--left  { transform: translateX(-40px); }
.reveal--zoom  { transform: scale(.92); }
.reveal--right.in, .reveal--left.in, .reveal--zoom.in { transform: none; }
/* השהיית מדרגות (stagger) — נקבע ע"י JS דרך --i */
.reveal[style*="--i"] { transition-delay: calc(var(--i) * .06s); }

/* ============================================================
 *  7. הטיית כרטיסים תלת-ממדית (tilt) + ברק
 * ========================================================== */
.tilt-wrap { perspective: 900px; }
.tilt { transform-style: preserve-3d; transition: transform .25s var(--fx-ease); will-change: transform; }
.tilt__glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.18), transparent 60%);
  transition: opacity .25s ease; border-radius: inherit; mix-blend-mode: screen;
}
.tilt.is-tilting .tilt__glare { opacity: 1; }

/* ============================================================
 *  8. כפתורים מגנטיים + זוהר ניאון
 * ========================================================== */
.btn { will-change: transform; }
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  box-shadow: 0 0 26px 2px var(--red-glow); transition: opacity .3s ease;
}
.btn--primary:hover::after { opacity: 1; }

/* קו זוהר שעובר על כותרות מודגשות */
.fx-shine { background: linear-gradient(100deg, currentColor 30%, #fff 50%, currentColor 70%); -webkit-background-clip: text; background-clip: text; background-size: 200% 100%; animation: fxShine 6s linear infinite; }
@keyframes fxShine { to { background-position: -200% 0; } }

/* כניסת תוכן ראשית אחרי טעינה */
html.fx-ready main { animation: fxMainIn .8s var(--fx-ease) both; }
@keyframes fxMainIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
 *  9. נגישות — כיבוי תנועה מלא
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .fx-loader { animation: none; }
  .fx-aurora, .fx-cursor, .fx-curtain { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-shine { animation: none; }
  html.fx-ready main { animation: none; }
  .tilt { transition: none; }
}

/* כיבוי אפקטים כבדים במובייל/מגע */
@media (hover: none), (pointer: coarse) {
  .fx-cursor { display: none !important; }
}

/* =============================================================================
 *  ⚡ FX PLUS — שדרוג אגרסיבי (v2) "מטורף"
 * ===========================================================================*/

/* ---- הגברת אפקטים קיימים ---- */
.fx-progress { height: 4px; box-shadow: 0 0 18px var(--red), 0 0 6px #fff; }
.fx-cursor { width: 560px; height: 560px; background: radial-gradient(circle, rgba(225,6,0,.20), transparent 60%); }
.fx-aurora i { opacity: .55; filter: blur(80px); }
.fx-aurora i:nth-child(4){ width: 340px; height: 340px; top: 30%; inset-inline-end: 20%; background: radial-gradient(circle, rgba(0,180,255,.20), transparent 70%); animation: fxDrift2 19s ease-in-out infinite; }
.fx-aurora i:nth-child(5){ width: 260px; height: 260px; bottom: 10%; inset-inline-end: 35%; background: radial-gradient(circle, rgba(225,6,0,.40), transparent 70%); animation: fxDrift3 24s ease-in-out infinite; }
.reveal { transform: translateY(46px) scale(.97); }
.reveal.in { transform: none; }

/* ---- וילון מעבר דרמטי יותר (אלכסוני + גליץ') ---- */
.fx-curtain span { background: linear-gradient(180deg, #111, #000); }
.fx-curtain.in span { transition-duration: .42s; }
.fx-curtain__line { height: 3px; box-shadow: 0 0 24px var(--red), 0 0 8px #fff; }

/* =========================================================
 *  רשת חלקיקים (canvas)
 * ======================================================= */
.fx-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6; }

/* =========================================================
 *  סמן מותאם אישית (דסקטופ)
 * ======================================================= */
html.fx-cursor-on, html.fx-cursor-on * { cursor: none !important; }
html.fx-cursor-on input, html.fx-cursor-on textarea, html.fx-cursor-on select,
html.fx-cursor-on [contenteditable] { cursor: text !important; }
.fx-dot, .fx-ring { position: fixed; top: 0; inset-inline-start: 0; z-index: 100001; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; }
.fx-dot  { width: 7px; height: 7px; background: var(--red); box-shadow: 0 0 12px var(--red); }
.fx-ring { width: 38px; height: 38px; border: 1.5px solid rgba(255,255,255,.55); transition: width .2s, height .2s, border-color .2s, background .2s; mix-blend-mode: difference; }
.fx-ring.hot { width: 64px; height: 64px; border-color: var(--red); background: rgba(225,6,0,.12); }
.fx-ring.click { width: 26px; height: 26px; border-color: #fff; }

/* =========================================================
 *  אנימציית הקלדה — סמן מהבהב
 * ======================================================= */
.fx-caret { display: inline-block; width: .07em; min-width: 4px; height: .92em; vertical-align: -.08em; background: var(--red); margin-inline-start: 5px; border-radius: 2px; box-shadow: 0 0 14px var(--red); animation: fxCaret .7s steps(1) infinite; }
@keyframes fxCaret { 50% { opacity: 0; } }
.hero h1 .text-red { text-shadow: 0 0 26px var(--red-glow); }

/* =========================================================
 *  גליץ' לכותרות
 * ======================================================= */
.fx-glitch { position: relative; }
.fx-glitch::before, .fx-glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  clip-path: inset(0 0 0 0); opacity: 0;
}
.fx-glitch:hover::before { opacity: .9; color: #00e5ff; transform: translate(2px,-2px); animation: fxGlitchA .4s steps(2) infinite; }
.fx-glitch:hover::after  { opacity: .9; color: var(--red); transform: translate(-2px,2px); animation: fxGlitchB .4s steps(2) infinite; }
@keyframes fxGlitchA { 0%{clip-path:inset(0 0 70% 0)} 50%{clip-path:inset(40% 0 30% 0)} 100%{clip-path:inset(70% 0 0 0)} }
@keyframes fxGlitchB { 0%{clip-path:inset(70% 0 0 0)} 50%{clip-path:inset(20% 0 50% 0)} 100%{clip-path:inset(0 0 70% 0)} }

/* =========================================================
 *  רשת Tron בהירו + מסגרת HUD
 * ======================================================= */
.fx-tron { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; perspective: 380px; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.fx-tron::before {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 160%;
  background-image: linear-gradient(rgba(225,6,0,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(225,6,0,.35) 1px, transparent 1px);
  background-size: 46px 46px; transform: rotateX(72deg); transform-origin: bottom center;
  animation: fxTron 5s linear infinite;
}
@keyframes fxTron { from { background-position: 0 0; } to { background-position: 0 46px; } }

.hero__visual::before {
  content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none;
  border: 0 solid var(--red);
  background:
    linear-gradient(var(--red),var(--red)) left top/26px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) left top/2px 26px no-repeat,
    linear-gradient(var(--red),var(--red)) right top/26px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) right top/2px 26px no-repeat,
    linear-gradient(var(--red),var(--red)) left bottom/26px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) left bottom/2px 26px no-repeat,
    linear-gradient(var(--red),var(--red)) right bottom/26px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) right bottom/2px 26px no-repeat;
  filter: drop-shadow(0 0 6px var(--red-glow)); animation: fxHud 3s ease-in-out infinite;
}
@keyframes fxHud { 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* =========================================================
 *  גריין קולנועי + סקאנליינס
 * ======================================================= */
.fx-grain { position: fixed; inset: -150%; z-index: 9997; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fxGrain .6s steps(3) infinite; }
@keyframes fxGrain { 0%{transform:translate(0,0)} 33%{transform:translate(-6%,3%)} 66%{transform:translate(4%,-5%)} 100%{transform:translate(0,0)} }
.fx-scan { position: fixed; inset: 0; z-index: 9996; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }

/* =========================================================
 *  אדוות לחיצה (ripple)
 * ======================================================= */
.fx-ripple { position: fixed; z-index: 100000; pointer-events: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--red); transform: translate(-50%,-50%) scale(0); animation: fxRipple .6s ease-out forwards; box-shadow: 0 0 14px var(--red); }
@keyframes fxRipple { to { transform: translate(-50%,-50%) scale(9); opacity: 0; } }

/* ---- זוהר ניאון לכותרות מקטע ---- */
.section-title { text-shadow: 0 0 30px rgba(225,6,0,.18); }

/* ---- נגישות / מובייל ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-particles, .fx-grain, .fx-scan, .fx-tron, .fx-dot, .fx-ring, .fx-caret { display: none !important; }
  .hero__visual::before { animation: none; }
}
@media (hover: none), (pointer: coarse) {
  .fx-particles, .fx-dot, .fx-ring, .fx-grain { display: none !important; }
  html.fx-cursor-on, html.fx-cursor-on * { cursor: auto !important; }
}

/* אוורה קלה יותר במובייל (חיסכון GPU) */
@media (hover: none), (pointer: coarse) {
  .fx-aurora i:nth-child(n+3) { display: none; }
  .fx-aurora i { filter: blur(60px); opacity: .4; }
}

/* =============================================================================
 *  🚀 FX EXTREME (v3) — HUD · power-on · scrollbar · הולוגרמה
 * ===========================================================================*/

/* ---- פס גלילה ניאון מותאם ---- */
* { scrollbar-width: thin; scrollbar-color: var(--red) #0a0a0a; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--red), var(--red-dark)); border-radius: 8px; border: 2px solid #0a0a0a; box-shadow: 0 0 10px var(--red-glow); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ---- טלמטריית HUD בפינות ---- */
.fx-hud { position: fixed; z-index: 9995; pointer-events: none; font-family: "Courier New", monospace; font-size: .68rem; letter-spacing: .12em; color: rgba(255,255,255,.55); text-transform: uppercase; opacity: 0; transition: opacity .8s ease 1.2s; }
html.fx-ready .fx-hud { opacity: 1; }
.fx-hud b { color: var(--red); font-weight: 700; }
.fx-hud--tl { top: 88px; inset-inline-start: 16px; }
.fx-hud--tr { top: 88px; inset-inline-end: 16px; text-align: end; }
.fx-hud--bl { bottom: 14px; inset-inline-start: 16px; }
.fx-hud--br { bottom: 14px; inset-inline-end: 16px; text-align: end; }
.fx-hud .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #19e36a; box-shadow: 0 0 8px #19e36a; margin-inline-start: 5px; animation: fxBlink 1.4s ease-in-out infinite; vertical-align: middle; }
@keyframes fxBlink { 50% { opacity: .25; } }

/* ---- סריקת "הדלקה" חד-פעמית ---- */
.fx-sweep { position: fixed; inset-inline: 0; top: 0; height: 40vh; z-index: 99998; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(225,6,0,.10) 60%, rgba(225,40,30,.85)); 
  box-shadow: 0 0 40px 10px var(--red-glow); animation: fxSweep 1.1s ease-in forwards; }
@keyframes fxSweep { 0%{ transform: translateY(-45vh); opacity: 0; } 15%{ opacity: 1; } 100%{ transform: translateY(140vh); opacity: 0; } }

/* ---- טקסט הולוגרפי ל-eyebrow ---- */
.eyebrow { background: linear-gradient(100deg, var(--red), #ff7a45, #00e5ff, var(--red)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fxHolo 6s linear infinite; }
@keyframes fxHolo { to { background-position: 300% 0; } }

/* ---- זוהר נשימה לכפתור ראשי ---- */
.hero__cta .btn--primary { animation: fxBreathe 2.6s ease-in-out infinite; }
@keyframes fxBreathe { 0%,100%{ box-shadow: 0 8px 30px var(--red-glow); } 50%{ box-shadow: 0 8px 46px var(--red), 0 0 0 1px rgba(225,6,0,.4); } }

/* ---- ערבול טקסט: זוהר קל בזמן פענוח ---- */
.fx-scrambling { color: var(--red) !important; text-shadow: 0 0 14px var(--red-glow); }

/* נגישות / מובייל */
@media (prefers-reduced-motion: reduce) {
  .fx-sweep, .fx-hud { display: none !important; }
  .eyebrow { animation: none; -webkit-text-fill-color: initial; background: none; color: var(--red); }
  .hero__cta .btn--primary { animation: none; }
}
@media (hover: none), (pointer: coarse) { .fx-hud { display: none !important; } }
@media (max-width: 860px) { .fx-hud--tl, .fx-hud--tr { display: none !important; } }

/* =============================================================================
 *  🃏 חשיפת "קלף שנחשף" — מוצרים וקטגוריות
 * ===========================================================================*/
/* מצב מנוחה "רך" — ידידותי ל-IntersectionObserver (שטח הקרנה מלא) */
.product-card.reveal, .cat-card.reveal {
  opacity: 0;
  transform: translateY(22px);
  transform-origin: center bottom;
  transition: none;
  backface-visibility: hidden;
}
/* הפתיחה כקלף — אנימציית rotateX (ציר אופקי → ללא גלישה אופקית) */
.product-card.reveal.in, .cat-card.reveal.in {
  opacity: 1;
  transform: none;
  animation: fxCardFlip .75s var(--fx-ease) backwards;
}
/* שמירה על אפקט המדרגות (stagger) דרך animation-delay */
.product-card.reveal.in[style*="--i"], .cat-card.reveal.in[style*="--i"] { animation-delay: calc(var(--i) * .07s); }
@keyframes fxCardFlip {
  0%   { opacity: 0; transform: perspective(1300px) rotateX(74deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(1300px) rotateX(0deg); }
}
/* ברק קצר בקצה בזמן הפתיחה */
.product-card.reveal::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0; opacity: 0;
}
.product-card.reveal.in::after { animation: fxCardSheen .9s ease .12s 1; }
@keyframes fxCardSheen { 0%{ opacity:0; background-position:120% 0;} 30%{opacity:1;} 100%{ opacity:0; background-position:-30% 0;} }

/* =============================================================================
 *  📡 רחבת רשתות חברתיות צפה (צד המסך)
 * ===========================================================================*/
.fx-social {
  position: fixed; top: 50%; inset-inline-end: 0; transform: translateY(-50%);
  z-index: 9990; display: flex; flex-direction: column; gap: 10px; padding: 12px 9px;
  background: rgba(13,13,13,.55); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-inline-end: none;
  border-radius: 16px 0 0 16px; box-shadow: -6px 0 30px rgba(0,0,0,.5);
}
.fx-social::before {
  content: "FOLLOW"; writing-mode: vertical-rl; text-orientation: mixed;
  font-size: .58rem; letter-spacing: .3em; color: var(--text-muted); font-weight: 800;
  text-align: center; margin-bottom: 2px;
}
.fx-social a {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: var(--text-muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  transition: transform .25s var(--fx-ease), color .2s, background .2s, box-shadow .25s;
}
.fx-social a svg { width: 20px; height: 20px; }
.fx-social a:hover { color: #fff; background: var(--red); transform: translateX(-5px) scale(1.12); box-shadow: -4px 0 22px var(--red-glow); }
.fx-social a::after {
  content: attr(data-tip); position: absolute; inset-inline-end: 54px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: #0a0a0a; color: #fff; font-size: .74rem; font-weight: 700; white-space: nowrap;
  padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.fx-social a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 860px) {
  /* מובייל: גלולת רשתות אופקית בפינה ימנית-תחתונה (הפוך מכפתור הנגישות שמשמאל) */
  .fx-social {
    flex-direction: row; align-items: center; gap: 8px;
    top: auto; bottom: 88px; inset-inline: auto; right: 12px; left: auto; transform: none;
    border: 1px solid var(--border); border-radius: 14px; padding: 7px 9px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5); backdrop-filter: blur(12px);
  }
  .fx-social::before { display: none; }
  .fx-social a { width: 38px; height: 38px; }
  .fx-social a svg { width: 18px; height: 18px; }
  .fx-social a::after { display: none; }
  .fx-social a:hover { transform: translateY(-4px) scale(1.1); }
}
@media (max-width: 380px) {
  /* מסכים צרים מאוד — מעט קטן יותר כדי לא להצטופף */
  .fx-social { gap: 6px; padding: 6px 7px; }
  .fx-social a { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card.reveal, .cat-card.reveal { transition: opacity .3s ease; transform: none; opacity: 1; }
  .product-card.reveal.in, .cat-card.reveal.in { animation: none; }
  .product-card.reveal.in::after { animation: none; }
}