/* catalog.css — סרגל הסינון ושורת הספירה של רשת המוצרים (B17 ב).
   נטען ב-category.html וב-products.html לצד js/catalog.js. עותק אחד,
   מאותה סיבה בדיוק שבגללה הלוגיקה היא קובץ אחד.

   ⚠️ הסרגל מופיע רק כשיש יותר מ-48 מוצרים, כלומר לא בקרניזים (50 —
   גבולי אבל כן), לא בפרקטים ולא בווילונות. המחיר המוכר: הוא נכנס
   לזרימה אחרי שהשאילתה חוזרת. הוא נכנס **במקום** `.state` שמשריין
   70vh ונעלם באותו רגע, ולכן הוא צורך מקום שכבר שוריין ולא מוסיף
   מקום חדש. נמדד על /c/karnizim. */

.cat-bar{padding:14px 0 0}

.cf-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}

.cf-field{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;min-width:0}
.cf-field > span{font-size:0.8125rem;color:var(--stone);font-weight:400}

/* ⚠️ 16px ולא פחות: ב-iOS שדה עם גופן קטן מ-16px גורם לזום אוטומטי
   בלחיצה, והעמוד נשאר מוגדל אחריה. ⚠️ ו-44px גובה — יעד המגע המינימלי,
   ה-TODO הפתוח של המובייל. שדה חדש לא ייפתח קטן מהיעד. */
.cf-bar select,
.cf-bar input[type="search"]{
  font:inherit;font-size:16px;min-height:44px;padding:0 10px;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  border-radius:0;width:100%;max-width:100%;
  /* ⚠️ appearance לא מאופס: החץ המובנה של ה-select הוא מה שמסמן
     שאפשר לפתוח אותו, והחלפתו בחץ משלנו הייתה מוסיפה קוד בלי תועלת. */
}
.cf-bar input[type="search"]{-webkit-appearance:none;appearance:none}

.cf-q{flex:2 1 200px}

.cf-clear{flex:0 0 auto;min-height:44px;align-self:flex-end}

.cat-count{margin:10px 0 0;font-size:0.875rem;color:var(--stone);font-weight:300}

/* ה"טען עוד" — מרכזי, מתחת לרשת, ובמרחק שמפריד אותו מהכרטיס האחרון. */
.cat-more{display:flex;justify-content:center;padding:28px 0 4px}
.cat-more .btn{min-height:44px;display:inline-flex;align-items:center}
.cat-more .btn[disabled]{opacity:.6;cursor:default}

@media(min-width:901px){
  .cat-bar{padding:18px 0 0}
  .cf-field{flex:0 1 190px}
  .cf-q{flex:1 1 240px;max-width:320px}
}