/* ========================================================================= listing.css — רשימות מוצרים ותיקונים (14/9/2026) 1) שורת "43 מוצרים · מיון" (inc/sortbar.php + assets/sortbar.js) 2) כפתור "תיאום בוואטסאפ" בכרטיס תיקון — בנייד הוא נשבר ל-2-3 שורות בתוך גלולה עגולה (150×67px באנדרואיד). עכשיו שורה אחת, אותה פינה כמו "לפרטים ומחיר". ספציפיות: html .bpx-on ... גוברת על barphone.css/refresh.css (0,4,2) ועל ".bpx-on .bpx-landing a:not(.bpx-btn)". ========================================================================= */ /* ---------- שורת המיון ---------- */ .bpx-sortbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; clear: both; margin: 4px 0 18px; padding: 8px 8px 8px 16px; background: #fff; border: 1px solid var(--bp-line-soft, var(--bp-line)); border-radius: 14px; } html .bpx-on .bpx-sortbar .bpx-sortbar-count { float: none; margin: 0; padding: 0 6px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--bp-body); } .bpx-sortbar-count strong { color: var(--bp-ink); font-weight: 800; } .bpx-sortbar-range { color: var(--bp-body); } .bpx-sortbar--count { padding: 10px 16px; } .bpx-sort-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } html .bpx-on .bpx-sortbar a.bpx-sort-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 14px; margin: 0; border: 1.5px solid var(--pal-line-2, var(--bp-line)); border-radius: 999px; background: #fff; color: var(--bp-ink); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; } html .bpx-on .bpx-sortbar a.bpx-sort-chip:hover, html .bpx-on .bpx-sortbar a.bpx-sort-chip:focus-visible { border-color: var(--bp-primary); color: var(--bp-primary-d); text-decoration: none; } html .bpx-on .bpx-sortbar a.bpx-sort-chip[aria-current="true"], html .bpx-on .bpx-sortbar a.bpx-sort-chip[aria-current="true"]:hover { background: var(--bp-primary); border-color: var(--bp-primary); color: #fff; } .bpx-sort-form { display: none; margin: 0; } .bpx-sort-select { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--pal-line-2, var(--bp-line)); border-radius: 12px; background: #fff; cursor: pointer; } .bpx-sort-select-lbl { font-size: 14px; font-weight: 600; color: var(--bp-body); white-space: nowrap; } html .bpx-on .bpx-sort-select select { -webkit-appearance: none; appearance: none; min-height: 40px; margin: 0; padding: 0 0 0 22px; border: 0; background: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 0 center; background-size: 16px; color: var(--bp-ink); font-size: 16px; font-weight: 700; font-family: inherit; line-height: 1.2; box-shadow: none; outline: 0; cursor: pointer; } .bpx-sort-select:focus-within { border-color: var(--bp-primary); box-shadow: 0 0 0 3px rgba(91, 33, 182, .14); } .bpx-sort-go { margin-inline-start: 8px; } /* טלפון: תיבת בחירה אחת במקום 5 כפתורים (בטאבלט הכפתורים נכנסים בשורה) */ @media (max-width: 719px) { .bpx-sort-chips { display: none; } .bpx-sort-form { display: block; } .bpx-sortbar { flex-wrap: nowrap; padding: 6px 6px 6px 14px; } html .bpx-on .bpx-sortbar .bpx-sortbar-count { font-size: 14px; } } @media (max-width: 380px) { .bpx-sortbar-range { display: none; } .bpx-sort-select { padding: 0 10px; } .bpx-sort-select-lbl { display: none; } } /* בזמן החלפת הרשימה */ ul.products.bpx-sort-loading { opacity: .45; pointer-events: none; transition: opacity .15s; } @media (prefers-reduced-motion: reduce) { ul.products.bpx-sort-loading { transition: none; } } /* ---------- כרטיס תיקון: "תיאום בוואטסאפ" ---------- */ html .bpx-on ul.products li.product a.bpx-loop-wa { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; white-space: nowrap; line-height: 1.2; font-size: 14px; } html .bpx-on ul.products li.product a.bpx-loop-wa > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { html .bpx-on ul.products li.product a.bpx-loop-wa { padding: 7px 6px; gap: 5px; font-size: 13px; } html .bpx-on ul.products li.product a.bpx-loop-wa .bpx-i { width: 15px; height: 15px; } } @media (max-width: 360px) { html .bpx-on ul.products li.product a.bpx-loop-wa { font-size: 12.5px; padding-inline: 4px; } } /* ---------- כפתורי כרטיס נוספים שנשברו לשתי שורות בנייד ---------- "בחירת מספר לטעינה" (topup.php) ו"אזל — לפרטים" (stock.php) גבהו פי 1.5 מ"הוספה לסל" שלידם. refresh.css קובע לכפתורי כרטיס font-size/line-height עם !important, ולכן גם כאן !important — בספציפיות גבוהה יותר (0,5,4). */ @media (max-width: 640px) { html .bpx-on ul.products li.product a.button.bpx-oos-btn, html .bpx-on ul.products li.product a.button.bpx-topup-loopbtn { white-space: nowrap !important; font-size: 14px !important; line-height: 1.2 !important; padding-left: 6px !important; padding-right: 6px !important; } } /* טלפון צר: "בחירת מספר" בלבד; המילה "לטעינה" נשארת לקוראי מסך */ @media (max-width: 400px) { html .bpx-on ul.products li.product a.button.bpx-topup-loopbtn .bpx-lbl-tail { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } } /* ---------- כותרת במחשב: "צור קשר" ---------- הוא