/* כותרת לדף קטגוריה – מיבבה */
.mbch-on .woocommerce-breadcrumb { display: none !important; }

.mbch-head {
	--mbch-accent: var(--wd-primary-color, #a38167);
	direction: rtl;
	padding: 6px 0 0;
	margin-bottom: 14px;
	font-family: var(--wd-title-font, inherit);
}
.mbch-back {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: .02em;
	color: var(--mbch-accent);
}
.mbch-back a { color: inherit; text-decoration: none; }
.mbch-back a:hover { text-decoration: underline; }
.mbch-chev { font-size: 15px; line-height: 1; }
.mbch-sep { opacity: .5; }

.mbch-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
}
.mbch-head h1.mbch-h1 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .03em;
	text-transform: none;
	color: var(--wd-title-color, #242424);
}
.mbch-count { font-size: 11.5px; color: #9a9a9a; white-space: nowrap; }

/* פריסה "במרכז" (ברירת מחדל) */
.mbch-head.is-center { text-align: center; }
.mbch-head.is-center .mbch-back { justify-content: center; }
.mbch-head.is-center .mbch-title { flex-direction: column; align-items: center; gap: 0; margin-top: 2px; }
.mbch-head.is-center .mbch-chips a:first-child { margin-inline-start: auto; }
.mbch-head.is-center .mbch-chips a:last-child { margin-inline-end: auto; }

.mbch-chips {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	margin: 12px 0 0;
	padding: 0 0 4px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mbch-chips::-webkit-scrollbar { display: none; }
.mbch-chips a {
	flex: 0 0 auto;
	font-size: 12.5px;
	line-height: 1.3;
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid var(--mbch-accent);
	background: #fff;
	color: var(--mbch-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.mbch-chips a:hover { background: #faf6f2; color: var(--mbch-accent); }
.mbch-chips a.is-on,
.mbch-chips a.is-on:hover {
	background: var(--mbch-accent);
	border-color: var(--mbch-accent);
	color: #fff;
}
/* בשורת הכפתורים – רק השם (כמו בהדמיה); המספרים נשארים ברשימה של הפס הדביק */
.mbch-chips small { display: none; }

@media (min-width: 768px) {
	.mbch-head { padding-top: 10px; }
	.mbch-chips { gap: 8px; }
	.mbch-chips a { font-size: 13px; padding: 7px 15px; }
	.mbch-head h1.mbch-h1 { font-size: 30px; }
	.mbch-head.is-side h1.mbch-h1 { font-size: 32px; }
}

/* "סינון לפי מחיר/מידה" – היו H1, עכשיו div באותו מראה (כמו הכלל ".tax-product_cat h1" של האתר) */
.tax-product_cat .widget-title.mbch-wt { font-size: 27px; font-weight: 800; line-height: 1.4; margin-bottom: .5rem; }
@media only screen and (max-width: 600px) {
	.tax-product_cat .widget-title.mbch-wt { font-size: 21px; }
}

/* מצב בדיקה – רק מנהלים רואים */
.mbch-test {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #fff4d6;
	color: #8a6100 !important;
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: 0;
	text-decoration: none !important;
}

/* ---------- הפס הדביק בגלילה ----------
   הגובה מלמעלה (top) נקבע ב-sticky.js: מתחת להדר הדביק של האתר ולסרגל הניהול כשהם קבועים.
   שכבה (z-index) אחת מתחת להדר של WoodMart (390): הפס נכנס ויוצא מתחת להדר ואף פעם לא מכסה אותו. */
.mbch-sticky {
	--mbch-accent: var(--wd-primary-color, #a38167);
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 389;
	box-sizing: border-box;
	min-height: 52px;
	padding: 6px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	direction: rtl;
	font-family: var(--wd-title-font, inherit);
	background: #fff; /* בלי טשטוש של מה שמאחור – בטלפון הוא מצייר מחדש כל פריים בגלילה וגורם לגלילה לגמגם */
	border-bottom: 1px solid #efe6df;
	box-shadow: 0 4px 14px rgba(60, 40, 20, .06);
	transform: translateY(-100%);
	visibility: hidden; /* מוסתר באמת – גם כשסרגל הניהול נגלל למעלה בטלפון */
	transition: transform .25s ease, visibility 0s linear .25s;
	pointer-events: none;
}
.mbch-sticky.on { transform: none; visibility: visible; pointer-events: auto; transition: transform .25s ease, visibility 0s; }
/* שורת הכפתורים בפס (אפשרות ב') – אותו מראה כמו הכפתורים בראש הדף: מסגרת חומה דקה, הפעיל מלא בחום */
.mbch-sticky.has-row { padding-inline: 15px; }
/* שורת הכפתורים "נתפסת" למעלה: הפס מופיע במקום השורה בלי להחליק (ההחלקה רק לפס עם שם הקטגוריה) */
.mbch-sticky.has-row,
.mbch-sticky.has-row.on { transition: none; }
.mbch-sb-row {
	display: flex;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	padding: 2px 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
.mbch-sb-row::-webkit-scrollbar { display: none; }
.mbch-sticky .mbch-sb-row a {
	flex: 0 0 auto;
	font-size: 12.5px;
	line-height: 1.3;
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid var(--mbch-accent);
	background: #fff;
	color: var(--mbch-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.mbch-sticky .mbch-sb-row a.is-on { background: var(--mbch-accent); color: #fff; }
.mbch-sb-row small { display: none; }

/* בדף בלי כפתורים: שם הקטגוריה + מספר הפריטים */
.mbch-sb-cat { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 15px; font-weight: 500; color: #242424; }
.mbch-sb-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbch-sb-cat small { color: #a5a5a5; font-size: 12px; font-weight: 400; }

/* "סינון" ו"מיון" – עיגולים במסגרת דקה. התבנית צובעת כל כפתור (רקע אפור, פינות ישרות, ריפוד) – לכן !important */
.mbch-tools button.mbch-sb-filter,
.mbch-sort {
	appearance: none !important; -webkit-appearance: none !important;
	flex: 0 0 auto;
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important;
	margin: 0 !important; padding: 0 !important;
	border: 1px solid var(--mbch-accent) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--mbch-accent) !important;
	box-shadow: none !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.mbch-tools button.mbch-sb-filter:hover,
.mbch-tools button.mbch-sb-filter:active,
.mbch-sort:hover,
.mbch-sort:focus-within { background: var(--mbch-accent) !important; color: #fff !important; }
.mbch-tools svg { display: block; width: 18px; height: 18px; pointer-events: none; }
@media (min-width: 768px) {
	.mbch-sticky { padding: 0 max(15px, calc((100% - 1222px) / 2)); }
	.mbch-sticky .mbch-sb-row a { font-size: 13px; }
}
/* כפתור הסינון הצף של התבנית (משפך בצד המסך) – מיותר כשיש את הפס: בראש הדף יש "הצגת סינון", ובגלילה "סינון" בפס.
   התבנית מציגה אותו עם כלל חזק יותר (.wd-show-on-scroll.wd-shown), ולכן כאן display:none !important. */
body.mbch-sb-ready .wd-sidebar-opener { display: none !important; }


/* השורה של הרמה שמעל (למשל "הקולקציה החדשה": הכל · אקססוריז · [בנות] · בנים) – כמו לשוניות, עם קו תחתון
   מתחת למסומן, כדי שיהיה ברור איפה נמצאים ואיך חוזרים. הכפתורים של הדף עצמו (.mbch-chips) מתחתיה. */
.mbch-up {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	margin: 14px 0 0;
	padding: 0 4px;
	border-bottom: 1px solid #efe7df;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mbch-up::-webkit-scrollbar { display: none; }
.mbch-up a {
	flex: 0 0 auto;
	position: relative;
	padding: 6px 2px 9px;
	font-size: 13px;
	line-height: 1.3;
	color: #8c7b6e;
	text-decoration: none;
	white-space: nowrap;
}
.mbch-up a:hover { color: var(--mbch-accent); }
.mbch-up a.is-on { color: var(--mbch-accent); font-weight: 600; }
.mbch-up a.is-on::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: var(--mbch-accent);
	border-radius: 2px;
}
.mbch-up small { display: none; }
.mbch-up + .mbch-chips { margin-top: 12px; }
.mbch-head.is-center .mbch-up a:first-child { margin-inline-start: auto; }
.mbch-head.is-center .mbch-up a:last-child { margin-inline-end: auto; }


/* ---------- השורה בראש הדף: הכפתורים + "סינון" + "מיון" (אותה שורה שנדבקת בגלילה) ---------- */
.mbch-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.mbch-sort { position: relative; overflow: hidden; }
.mbch-sort[hidden] { display: none !important; }
/* הרשימה של המיון שקופה מעל העיגול – לחיצה פותחת את בחירת המיון של הטלפון */
.mbch-sort select {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	opacity: 0; cursor: pointer;
	font-size: 16px; /* בלי זום אוטומטי באייפון */
	-webkit-appearance: none; appearance: none;
}
.mbch-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mbch-up + .mbch-bar { margin-top: 10px; }
.mbch-bar .mbch-chips { flex: 1 1 auto; min-width: 0; margin: 0; padding: 2px 0; }
.mbch-bar-gap { flex: 1 1 auto; }
/* בתוך השורה הכפתורים מתחילים מימין (כמו בפס הדביק), לא במרכז – כדי שהמעבר לפס יהיה חלק */
.mbch-head.is-center .mbch-bar .mbch-chips a:first-child,
.mbch-head.is-center .mbch-bar .mbch-chips a:last-child { margin-inline: 0; }

/* המיון והסינון הישנים של התבנית ("הצגת סינון", החצים, הקו מתחתם) – יש את העיגולים בשורה.
   נשארים בדף (מוסתרים) כי העיגולים מפעילים אותם. */
body.mbch-on .shop-loop-head { display: none !important; }

/* דהייה בקצה של שורה שנגללת הצידה (sticky.js מוסיף את המחלקות לפי הצד שיש בו עוד כפתורים) */
.mbch-fade-l { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px); mask-image: linear-gradient(to right, transparent 0, #000 32px); }
.mbch-fade-r { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px); mask-image: linear-gradient(to left, transparent 0, #000 32px); }
.mbch-fade-l.mbch-fade-r {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

/* בלי שורת הניווט (ברירת המחדל מ-1.11.2026): קצת אוויר מעל הכותרת במקום השורה */
.mbch-head.no-crumb { padding-top: 12px; }
.mbch-head.no-crumb .mbch-title { margin-top: 0; }
@media (min-width: 769px) { .mbch-head.no-crumb { padding-top: 18px; } }

/* בטלפון: השורה הדביקה נבלעת מתחת להדר בגלילה למטה וצצה בגלילה למעלה – בהחלקה רכה (sticky.js מוסיף mbch-slide) */
.mbch-sticky.has-row.mbch-slide { transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .5s; }
.mbch-sticky.has-row.mbch-slide.on { transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s; }