/* NDIGIT v2 · SKIN: הקטלוג כמו שהגיע, דף לבן אחד בסדר מעורב. "מה בכל זאת מחבר ביניהם?" ממיין לפי צבע התווית,
   והצבע שכבר היה מודפס על כל אריזה עולה מתחת למוצר. משם ממשיכים לחמשת הצבעים */
.sk-cat { margin-top: 40px; }
.sk-sort { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 16px; padding: 0 20px 0 16px; border: 1px solid var(--lime); border-radius: 99px; background: rgba(200,245,66,.08); color: var(--bone); font: 700 16px/1.2 var(--text); cursor: pointer; transition: background .25s, color .25s; }
.sk-sort i { position: relative; width: 26px; height: 12px; flex: none; border-radius: 99px; background: linear-gradient(90deg, #2E6DAB 0 20%, #8B74B6 20% 40%, #BD2166 40% 60%, #E08E4A 60% 80%, #4AB9B5 80%); }
.sk-sort .sk-sort-b { display: none; }
.sk-sort[aria-pressed="true"] { border-color: #4a4c42; background: none; color: var(--soft); }
.sk-sort[aria-pressed="true"] .sk-sort-a { display: none; } .sk-sort[aria-pressed="true"] .sk-sort-b { display: inline; }
@media (hover: hover) and (pointer: fine) { .sk-sort:hover { background: var(--lime); color: #0b0b0a; } .sk-sort[aria-pressed="true"]:hover { background: none; color: var(--bone); border-color: #6d6f63; } }
.sk-sort:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sk-sort.nudge { animation: sk-nudge 1.4s ease 2; }
@keyframes sk-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,245,66,.5); } 60% { box-shadow: 0 0 0 10px rgba(200,245,66,0); } }

/* דף הקטלוג: משטח לבן אחד, בלי כרטיסים, קווי הפרדה דקים כמו בדף מוצרים */
.sk-sheet.cat { margin: 0; gap: 0; padding: 0; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 40px 90px -50px #000; }
.sk-sheet.cat li { position: relative; padding: 18px 12px 22px; border-radius: 0; background: #fff; box-shadow: inset -1px 0 0 #ecebe6; transition: background-color .6s; }
.sk-sheet.cat li:last-child { box-shadow: none; }
.sk-sheet.cat img { mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sk-sheet.cat span { display: block; min-height: 0; margin-top: 12px; padding: 0; text-align: center; font: 500 12.5px/1.35 var(--text); color: #6e6b63; }
.sk-sheet.cat span b { display: block; font: 700 12px/1.2 var(--text); letter-spacing: .02em; color: #2a2926; transition: color .5s; }
/* הפס בצבע הסדרה: מתחת לכל מוצר, עולה רק אחרי המיון. שכנים מאותה סדרה מתחברים לפס אחד */
.sk-sheet.cat li::after { content: ""; position: absolute; right: 0; left: 0; bottom: 0; height: 8px; background: var(--s); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sk-cat.sorted .sk-sheet li { background: color-mix(in srgb, var(--s) 9%, #fff); }
.sk-cat.sorted .sk-sheet li::after { transform: none; transition-delay: calc(var(--i, 0) * 60ms + .35s); }
.sk-cat.sorted .sk-sheet span b { color: color-mix(in srgb, var(--s) 80%, #000); }
@media (hover: hover) and (pointer: fine) { .sk-sheet.cat li:hover img { transform: translateY(-6px) scale(1.04); } }

/* ---------- 03 · הבאנר ברוחב מלא, כמו הגריד שמתחתיו ---------- */
.cs-c3 .wide { width: 100%; }
/* הזום של הגלילה נשאר בתוך המסגרת, כדי שהבאנר לא יחרוג מהגריד */
.wide-im { overflow: hidden; border-radius: 18px; }
.wide-im img { border-radius: 0; }

/* ---------- 03 · הקומפוזיציות: פס בצבע הסדרה בכל כרטיס ---------- */
.comp li { position: relative; }
.comp li::before { content: ""; position: absolute; top: 10px; right: 10px; z-index: 1; width: 12px; height: 12px; border-radius: 4px; background: var(--s); box-shadow: 0 0 0 3px rgba(11,11,10,.55); }
.comp span b { color: var(--s); filter: brightness(1.35); }

@media (max-width: 899px) {
  .sk-cat { margin-top: 28px; }
  .sk-sort { width: 100%; justify-content: center; margin-bottom: 12px; font-size: 15px; }
  .sk-sheet.cat { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 14px; }
  .sk-sheet.cat li { padding: 12px 6px 16px; box-shadow: inset -1px 0 0 #ecebe6, inset 0 -1px 0 #ecebe6; }
  .sk-sheet.cat li:nth-child(4n) { box-shadow: inset 0 -1px 0 #ecebe6; }
  .sk-sheet.cat li:nth-child(n+5) { box-shadow: inset -1px 0 0 #ecebe6; }
  .sk-sheet.cat li:last-child { box-shadow: none; }
  /* במובייל רק שם הסדרה, בשורה אחת. שם המוצר נשאר בטקסט החלופי */
  .sk-sheet.cat span { margin-top: 8px; font-size: 0; line-height: 0; }
  .sk-sheet.cat span b { font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sk-sheet.cat li::after { height: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sk-sheet.cat li, .sk-sheet.cat li::after, .sk-sheet.cat img { transition: none; } .sk-sort.nudge { animation: none; } }