/* בלק צ'רי — עמוד חבילות אירוח (packages)
   יושר לפיגמה 20.7.26 · מקורות מדידה (figma-extract/2026-07-20/raw/nodes-18.json, nodes-03.json):
   דסקטופ Deals 660:19201 (1440×2872) · מובייל M_Deals 661:24635 (413×3470) · פופאפ 660:19800
   כל המידות נמדדו מ-node-JSON, לא מהעין. */

/* ── Hero (661:25230 דסקטופ 1440×400 · 660:19460 מובייל 413×300) ── */
.pk-hero { position: relative; min-block-size: clamp(300px, 28vw, 400px); display: grid; place-items: center; overflow: hidden; }
.pk-hero-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* 661:25231 — שכבת כהות אחידה #010101 באטימות 0.6 (היה גרדיאנט .45→.55; קונטרסט חלש לטקסט לבן) */
.pk-hero-overlay { position: absolute; inset: 0; background: rgba(1, 1, 1, .6); }
/* 661:25232 — רוחב טקסט הסאבטייטל בפועל 935 → ‏935+padding 40 = 980 (היה 940 → שבר ל-3 שורות) */
.pk-hero-content { position: relative; text-align: center; color: var(--bc-white); padding-inline: 20px; max-inline-size: 980px; }
/* 661:25237 — Heebo 400 / 72 / lh 90 (מובייל 660:19464 — 48 / lh 90); בפיגמה אין effects על ה-h1 */
.pk-hero-content h1 {
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  margin-block-end: 0;
}
/* 661:25236 — Heebo 400 / 24 / lh 39 (מובייל 660:19466 — 18 / lh intrinsic); צל 661:25235: ‏0,4,3@.07 + ‏0,2,2@.06 */
.pk-hero-content p {
  font-size: var(--fs-hero-sub);
  line-height: 1.625;
  margin: 0;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .07)) drop-shadow(0 2px 2px rgba(0, 0, 0, .06));
}

/* ── פס-החבילות: רקע לבן רציף (660:19201 fill #ffffff) על גוף-האתר הקרם ──
   Frame 160 padding-block 72 · Frame 201 gap 72 בין הסקשנים · Frame 198 gap 32 בין כותרת לגריד */
#halavi, #basari { background: var(--bc-white); padding-block-start: 72px; }
/* 660:19537 Frame 160 — gap 48 בין בלוק-החבילות לבלוק "אירועים מיוחדים" */
#basari { padding-block-end: 48px; }
#halavi .section-title, #basari .section-title {
  /* 706:2485 — Heebo 500 / 48 / lh 48 / #3b0f1a (מובייל 706:2540 — 32 / lh 48).
     lineHeightPx בפיגמה הוא 48 בשני הרוחבים → גובה-שורה קבוע באורך, לא ביחס.
     היה --lh-tight (1.35) בירושה מ-base.css: 64.8px בדסקטופ ו-43.2px במובייל. */
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 48px;
  font-weight: var(--fw-medium);
  color: var(--bc-primary);
  margin-block-end: 32px;   /* 660:19201 Frame 198 — gap 32 בין הכותרת לגריד */
}

/* ── שורת חבילות · 660:19469 "Frame 29" — layoutMode **HORIZONTAL**, gap 24,
      1344 = 3 כרטיסים ×432 + 2 מרווחים. כלומר בפיגמה זו **שורה אחת פר-קטגוריה**,
      לא רשת נגללת-מטה.
      עד 26.7 היה כאן ‎repeat(3, 1fr)‎: עם 9 חבילות חלביות ו-6 בשריות זה התקפל
      ל-3 ו-2 שורות — "חבילות כרשימה" (דיווח שילה). עכשיו זו שורה נגללת אופקית
      שמציגה 3 כרטיסים בדיוק, ונקודות-הניווט (bindDots ב-packages.js) עובדות
      בכל רוחב כי הן נגזרות מ-scrollWidth/clientWidth. */
.pk-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);   /* 3 כרטיסים + 2 מרווחי 24 */
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* התמונה גולשת מעבר לקצה הכרטיס ב-hover (scale 1.045); בלי הריפוד היא נחתכת
     ע"י ה-overflow של הפס. */
  padding-block-end: 4px;
}
.pk-grid::-webkit-scrollbar { display: none; }
.pk-grid > * { scroll-snap-align: start; min-inline-size: 0; }
/* מצב "בקרוב" הוא פריט יחיד — לא חלק מהקרוסלה */
.pk-grid .pk-soon { inline-size: 100%; }

/* כרטיס 660:19486 — 432×565, בלי רדיוס-כרטיס ובלי צל; gap 4 בין התמונה לפאנל */
.pk-card {
  display: flex; flex-direction: column; gap: 4px;
  min-inline-size: 0;
  background: transparent;
  transition: transform .22s ease;
}
.pk-card:hover { transform: translateY(-3px); }

/* 660:19487 — 432×363 (יחס 1.19), פינות עליונות 8px בלבד, edge-to-edge */
.pk-media {
  position: relative; overflow: hidden;
  aspect-ratio: 432 / 363;
  background: var(--bc-cream-warm);
  border-start-start-radius: var(--radius-8);
  border-start-end-radius: var(--radius-8);
}
.pk-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; }
.pk-card:hover .pk-media img { transform: scale(1.045); }

/* 660:19489 Background — 432×198, fill #f9f5ed, padding 24, space-between */
.pk-body {
  flex: 1; display: flex; flex-direction: column;
  background: var(--bc-cream);
  padding: 24px;
}
/* 660:19492 — Heebo 500 / 20 / lh 28 */
.pk-name { font-size: var(--fs-20); font-weight: var(--fw-medium); line-height: 1.4; margin: 0 0 8px; color: var(--bc-ink); }
/* 660:19494 — Heebo 400 / 14 / lh 22.75 (162.5%) / #47393b */
.pk-desc {
  color: var(--bc-ink-soft); font-size: var(--fs-sm); line-height: 1.625; margin: 0;
  /* 30.7 — אותו תיקון כמו .pc-desc בתפריט (menu.css): שבירת-שורה שהוקלדה בקטלוג לא
     תתקפל לרווח. הכרטיס תמיד מקבל <p> (גם תיאור ריק — packages.js splitDesc), ה-:empty
     מסתיר אותו כמו קודם כשאין תיאור. */
  white-space: pre-line;
}
.pk-desc:empty { display: none; }
/* שורת-הסייג (30.7, אותו דפוס כמו .pc-desc-note בתפריט) — הכל אחרי ה-Enter האחרון,
   מוצגת תמיד במלואה. בלי clamp על .pk-desc אין כאן בעיית-חיתוך לפתור, אבל העקביות
   מול הכרטיס בתפריט וההפרדה החזותית מהתיאור עצמו נשמרות. */
.pk-desc-note { color: var(--bc-ink-soft); font-size: var(--fs-sm); line-height: 1.625; margin: 2px 0 0; }
.pk-desc-note:empty { display: none; }
/* badge קיבולת — תוספת חיה מהדאטה שאינה בפיגמה; החלטת-מוצר: להשאיר (FIGMA-CONFORMANCE §Deals).
   4.8.26 (בקשת שילה): יושב בתחתית צמוד למחיר ולא אחרי התיאור — כך אינו זז כשהתיאור מתארך. */
.pk-price-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* 660:19490 Container pad-bottom 16 + 660:19495 Margin pad-top 16 = ‏32 בין התיאור לשורת המחיר */
.pk-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-block-start: auto; padding-block-start: 32px;
}
/* 660:19501 — Heebo 700 / 18 / lh 28 */
.pk-price { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.55; color: var(--bc-ink); }
.pk-incvat { font-weight: var(--fw-regular); font-size: .67em; color: var(--bc-ink-soft); }
/* 660:19650 Button — 149×36 FIXED (הגובה דורס את ה-padding המוצהר 12 → אנכי אפקטיבי 8), r54, Heebo 400 / 16 */
.pk-foot .btn {
  padding: 8px 24px; font-size: var(--fs-md); font-weight: var(--fw-regular);
  line-height: 1.25; border-radius: var(--radius-hero); flex: none;
}

/* ── מצב "בקרוב" (עד שכל החבילות מליטל יעלו) ── */
.pk-soon {
  grid-column: 1 / -1;
  background: var(--bc-cream); border-radius: var(--radius-card);
  padding: clamp(2.2rem, 5vw, 3.5rem) 20px; text-align: center;
  border: 1px solid var(--bc-gold-soft);
}
.pk-soon-icon {
  display: grid; place-items: center; inline-size: 64px; block-size: 64px;
  margin: 0 auto 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--bc-rose); color: var(--bc-primary);
}
.pk-soon-icon i { font-size: 28px; line-height: 1; }
.pk-soon h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--bc-primary); margin-block-end: .4em; }
.pk-soon p { color: var(--bc-ink-soft); max-inline-size: 46ch; margin: 0 auto 1.3rem; }

/* ── אירועים מיוחדים ושירותי בר (660:19572 Frame 62, fill #ffffff) ── */
.pk-services { background: var(--bc-white); margin-block-start: 0; padding-block-end: 72px; }
/* פס-הקרם שלפני הפוטר (3.8.26): ה-margin של הפוטר יושב מחוץ ל-main ונצבע ברקע
   ה-body (קרם) בעוד .pk-services לבן. המרווח עובר לסקשן עצמו — אותה דרך שננקטה
   בגלריה/צור-קשר/הסיפור. המרחק הכולל נשמר (72+72). ≤960 המרווח 0 ממילא. */
.site-footer { margin-block-start: 0; }
@media (min-width: 961px) { .pk-services { padding-block-end: calc(72px + var(--space-section)); } }
/* 660:19573 Section — padding-block-start 72 + קו-הפרדה עליון #d6c2c4 @20% */
.pk-services .container {
  border-block-start: 1px solid rgba(214, 194, 196, .2);
  padding-block-start: 72px;
}
/* 660:19575 — Heebo 400 / 36 / lh 40 / #1a1a1a, יישור לימין (היה 48/500) */
.pk-services-title {
  font-size: var(--fs-36); font-weight: var(--fw-regular); line-height: 1.12;
  color: var(--bc-ink); margin-block-end: 32px; text-align: start;
}
/* 660:19576 Container — 4 עמודות 312px, gap 32 בתוך 1344 */
.pk-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
/* 660:19577 Background — 312×152, r12, fill #f0e7dd, stroke #d6c3a3 1px, padding 24/24/48/24
   הערה: הבריף ביקש var(--bc-gold); הערך המדוד בפיגמה הוא #d6c3a3 = --bc-gold-soft — ניצמד למדידה. */
.pk-service {
  min-inline-size: 0;
  background: var(--bc-cream-warm);
  border: 1px solid var(--bc-gold-soft);
  border-radius: var(--radius-card);
  padding: 24px 24px 48px;
}
/* 660:19579 Frame 63 — gap 8, האייקון בקצה הימני (RTL) */
.pk-service-head { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; }
.pk-service-head i { font-size: 16px; line-height: 1; color: var(--bc-ink); flex: none; }
/* 660:19580 — Heebo 600 / 20 / lh 28 */
.pk-service h3 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: 1.4; margin: 0; color: var(--bc-ink); }
/* 660:19583 — 14 / lh 20 / #47393b */
.pk-service p { color: var(--bc-ink-soft); font-size: var(--fs-sm); line-height: 1.43; margin: 0; }
/* 660:19791 — 14 / #47393b, ממורכז, 32px מתחת לכרטיסים.
   הנוסח שלנו "כוללים" (ולא "אינם כוללים" שבפיגמה) — הכרעת 12.7: תצוגה ללקוח כולל מע"מ. */
.pk-vat-note { text-align: center; color: var(--bc-ink-soft); font-size: var(--fs-sm); margin-block-start: 32px; }

/* ── פופאפ חבילה (deal preview 660:19800) ── */
/* 660:20107 — overlay #1a1c1b @0.60, blur 4 */
.pk-layer {
  position: fixed; inset: 0; z-index: 100; background: rgba(26, 28, 27, .6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px;
}
.pk-layer[hidden] { display: none; }
/* 660:20108 — ‏1152 כולל, עמודת תמונה 436 (ימין), משטח #faf9f7 (Modal Surface) */
.pk-modal {
  position: relative; display: grid; grid-template-columns: minmax(320px, 436px) minmax(0, 1fr);
  /* minmax(0,1fr) לשורה — בלעדיו שורת-הגריד נמתחת לגובה-התוכן, הגוף לא מקבל
     גובה כלוא, ה-overflow-y שלו לעולם לא נדלק, והפוטר עם "הוספה להזמנה" נחתך
     מתחת ל-92vh בלי דרך לגלול (דווח שילה 29.7, שוחזר בגובה-חלון 740). */
  grid-template-rows: minmax(0, 1fr);
  inline-size: min(1152px, 100%); max-block-size: 92vh; overflow: hidden;
  background: var(--bc-paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}
.pk-modal.no-image { grid-template-columns: minmax(0, 1fr); inline-size: min(720px, 100%); }
.pk-modal-media { background: var(--bc-cream-warm); }
.pk-modal.no-image .pk-modal-media { display: none; }
.pk-modal-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* 660:20114 — inline 40 · bottom 32 · שורת ה-X מעל 72h (מובייל 661:26037 — ‏32/16/24 ב-media)
   ⚠ padding-block-end **0**, לא 32 (31.7, דיווח שילה — "פס ההוספה מכסה את התוכן"):
   הפס התחתון (.pk-modal-foot) הוא sticky *בתוך* הגוף הזה, וה-32px של פוטר-הגוף
   נועד לְפַנות ל-margin-block-end שלילי של הפס — התבנית הרגילה ל"פס דביק שחודר
   דרך הריפוד". אומת חי (Playwright, 31.7): במקום שיטתי הפס תמיד עוצר 32px
   *לפני* התחתית האמיתית של אזור-הגלילה (בגובה-חלון נמוך, 740px) — הפער תמיד
   שווה בדיוק לריפוד הזה, בכל ערך margin שלילי שניסינו. כלומר ה-sticky כאן לא
   "בולע" את ריפוד ההורה בפועל (למרות ה-margin השלילי) — הפתרון שעבד: לאפס את
   ריפוד-ההורה ולתת לפס עצמו (padding-block-end 32/24 — למטה) לייצר את המרווח
   הפנימי מתחת לכפתור. ר' גם ההערה ליד .pk-modal-foot. */
.pk-modal-body {
  display: flex; flex-direction: column;
  padding: 72px 40px 0; overflow-y: auto;
}
/* 660:20112 — אייקון 16×16 #464747, מרכז ההקשה ~36 מהפינה (14+20=34) */
.pk-close { /* מרכז האייקון 34 מהפינה; האופסט = 34 פחות חצי מגודל הכפתור */
  position: absolute; z-index: 2;
  inset-block-start: calc(34px - var(--bc-close-size) / 2);
  inset-inline-end: calc(34px - var(--bc-close-size) / 2);
  inline-size: var(--bc-close-size); block-size: var(--bc-close-size);
  color: #464747;
}
.pk-close svg { inline-size: var(--bc-close-icon); block-size: var(--bc-close-icon); }
/* 660:20120 — Heebo 400 / 60 / lh 1.0 (מובייל 661:26042 — 600 / 24 / lh 35.3); רצפת ה-clamp = ערך המובייל */
.pk-modal-title { font-size: clamp(1.5rem, 4.2vw, 3.75rem); font-weight: var(--fw-regular); line-height: 1; color: var(--bc-primary); text-align: start; margin-block: 0 16px; }
/* 660:20319 — gap 16 · 660:20116 מרווחי הערימה: כותרת→צ'יפים 16, צ'יפים→תת-כותרת 24, תת-כותרת→רשימה 24, רשימה→מחיר 24 */
.pk-modal-tags { display: flex; flex-wrap: wrap; gap: 16px; margin-block-end: 24px; }
/* 660:20320/21 — מסגרת+טקסט #c08497, r4, טקסט 16 (מובייל 14) */
.pk-pill {
  border: 1px solid var(--bc-rose); border-radius: var(--radius-img);
  padding: .35em 1.1em; font-size: var(--fs-md); color: var(--bc-rose-text); background: var(--bc-white);
}
/* white-space:pre-line (29.7, בקשת טליה): אותו תיקון כמו .pp-desc בתפריט —
   שומר על ירידות-שורה שהוקלדו בעורך הקטלוג. */
.pk-modal-desc { color: var(--bc-ink-soft); margin: 0 0 1.2rem; max-inline-size: 56ch; white-space: pre-line; }
/* 660:20400 — Heebo 400 / 20 / lh 28 (מובייל 661:26124 — 16) */
.pk-modal-sub { font-size: var(--fs-20); font-weight: var(--fw-regular); color: var(--bc-ink); margin-block-end: 24px; }
/* 660:20401 — gap שורות 14 / עמודות 24 · 660:20403 — gap אייקון→טקסט 12 */
.pk-contents { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
/* 660:20405 — Heebo 400 / 16 / 24 / #444444 · אייקון וי 660:20407 — 19×19 #c08497 */
.pk-contents li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-md); color: var(--bc-ink-mute); }
.pk-contents li svg { inline-size: 19px; block-size: 19px; color: var(--bc-rose); flex-shrink: 0; margin-block-start: .15em; }
/* 660:20479 — דסקטופ 30 · מובייל 18 (661:26044), Heebo 700 #3b0f1a */
.pk-modal-price { font-size: clamp(1.125rem, 2.1vw, 1.875rem); font-weight: var(--fw-bold); color: var(--bc-primary); margin-block-end: 1rem; }
/* 660:20138 — קו עליון #ead7da, padding-top 32, gap 32 (מובייל 24/24 — 661:26065).
   דביק גם בדסקטופ (אותו דפוס כמו במובייל 661:26534): כשהמסך נמוך מהתוכן, הגוף
   נגלל והפס עם הכפתור נשאר גלוי תמיד — בלעדיו אי-אפשר להזמין במסכים נמוכים.
   ⚠ 31.7 — margin-block-end שלילי הוסר: ריפוד-ההורה (.pk-modal-body) כבר 0
   בציר האנכי (ר' ההערה שם), ולכן אין יותר מה "לבלוע". margin-inline השלילי
   נשאר — הוא רק מרחיב את הפס לרוחב-מלא (ציר-אינליין, גיאומטריה פשוטה, לא
   נוגע בחישוב ה-sticky) והוא נבדק ועובד כמצופה. padding-block-end 32 כאן
   הוא עכשיו המרווח הפנימי היחיד מתחת לכפתור — לא "משחזר ריפוד שבוטל". */
.pk-modal-foot {
  margin-block-start: auto; padding-block-start: 32px;
  border-block-start: 1px solid #ead7da;
  display: flex; align-items: center; justify-content: flex-start; gap: 32px;
  position: sticky; inset-block-end: 0; z-index: 1;
  background: var(--bc-paper);
  margin-inline: -40px;
  padding-inline: 40px; padding-block-end: 32px;
}
/* I660:20140;496:285 — Heebo 400 / 18 / lh 20 (כפתור 307×48) */
.pk-modal-foot .btn { min-inline-size: 260px; font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: 1.25; }
/* 660:20141 — 157×48, fill #f4f3f1, r2, stroke #d6c2c4 @20% */
.pk-qty {
  display: inline-flex; align-items: center; direction: ltr; /* כמו בעיצוב: מינוס משמאל, פלוס מימין */
  background: #f4f3f1; border: 1px solid rgba(214, 194, 196, .2);
  border-radius: var(--radius-hair); block-size: 48px;
}
.pk-qty button {
  inline-size: 46px; block-size: 100%; display: grid; place-items: center;
  border-radius: var(--radius-8); color: var(--bc-ink); font-size: 1.25rem; transition: background .15s;
}
.pk-qty button:hover:not(:disabled) { background: rgba(59, 15, 26, .08); }
/* 660:20144 — בכמות 1 המינוס מושבת ויזואלית (אטימות 0.4); ה-disabled נקבע ב-packages.js */
.pk-qty button:disabled { opacity: .4; cursor: default; }
/* 660:20146 — Heebo 600 / 18 */
.pk-qty output { min-inline-size: 2.2ch; text-align: center; font-weight: var(--fw-semibold); font-size: var(--fs-lg); }

/* ── נקודות-ניווט לקרוסלת המובייל · 706:2543 / 706:2567 ──
   עיגולים 6×6, itemSpacing 8, ממורכזים; לא-פעיל #c08497, פעיל #5a1e2d.
   אותן מידות בדיוק כמו הנקודות של עמוד הבית במובייל (home.css) — הדפוס משוכפל
   כאן ולא מיובא, כי home.css אינו נטען בעמוד הזה. הבנייה/סנכרון ב-packages.js. */
.pk-dots { display: flex; justify-content: center; gap: 8px; margin-block-start: 24px; }
.pk-dots:empty { display: none; }                 /* דסקטופ: אין עמודי-גלילה → ריק → נעלם */
.pk-dot {
  inline-size: 6px; block-size: 6px; border-radius: 50%; padding: 0;
  background: var(--bc-rose); cursor: pointer;
  transition: background .2s ease;
}
.pk-dot.active { background: var(--bc-primary-deep); }
.pk-dot:focus-visible { outline: 2px solid var(--bc-primary); outline-offset: 3px; }

/* ── רספונסיב (M_Deals 661:24635 — Frame 29 padding 48/16/32/16, gap 48) ── */
@media (max-width: 960px) {
  /* 660:19461+660:19462 — padding-inline 16+16=32 · סאבטייטל lh intrinsic ≈1.47 (660:19466) */
  .pk-hero-content { padding-inline: 32px; }
  /* 660:19464 — ‏48 / lineHeightPx 90 (=1.875, כמו store 712:3041); בלי זה תת-הכותרת
     ישבה 29px גבוה מהפיגמה (נמדד 29.7) */
  .pk-hero-content h1 { line-height: 1.875; }
  .pk-hero-content p { line-height: 1.47; }
  #halavi, #basari { padding-block-start: 48px; }
  #basari { padding-block-end: 32px; }
  /* 706:2542 — ‏24 אחרי נקודות-הקרוסלה (Frame 202/203 pad-bottom 24) */
  .pk-dots { margin-block-end: 24px; }
  /* ── באג "פס הקרם" (דיווח שילה 29.7) ──
     .pk-dots הוא הצאצא האחרון של #halavi (דרך .container), ול-#halavi אין
     padding-block-end משלו (בניגוד ל-#basari, שכבר יש לו אחד — עבור בלוק
     "אירועים מיוחדים" — ולכן לא נחשף שם לאותו באג). margin-block-end של
     הצאצא-האחרון קרס החוצה מהמקטע (margin collapsing) ונפל אל מחוץ לרקע
     הלבן, וחשף שם את רקע ה-body הקרם בין שני מקטעים שאמורים להיות לבנים
     רציפים. הפתרון: הופכים את אותם 24px מ-margin (שקורס) ל-padding על
     #halavi עצמו (שלא קורס), ומאפסים את ה-margin רק עבור נקודות-החלבי כדי
     לא לכפול את הרווח. #basari לא נגע — הבעיה לא קיימת שם מלכתחילה. */
  #halavi { padding-block-end: 24px; }
  #halavi .pk-dots { margin-block-end: 0; }
  /* 706:2542 / 706:2551 — gap 24 בין הכותרת לכרטיס (בדסקטופ 32) */
  #halavi .section-title, #basari .section-title { margin-block-end: 24px; }

  /* ── קרוסלת חבילות · M_Deals 706:2542 ──
     בפיגמה המובייל מציג כרטיס אחד בכל פעם + 3 נקודות ניווט (706:2543) — לא עמודה
     מוערמת. הדפוס זהה לקרוסלות עמוד הבית (home.css .car-track): גריד זרימת-עמודות
     עם scroll-snap, בלי סרגל-גלילה. מרווח 16 = --car-gap שנמדד בפיגמה (496:773).
     הכרטיס תופס 100% מרוחב-התוכן (706:2572 — 381 בתוך 413 עם padding 16). */
  /* ‏26.7: הבסיס כבר קרוסלה אופקית (B9) — נשארו כאן רק ההבדלים האמיתיים למובייל:
     כרטיס אחד מלא במקום שלושה, מרווח 16 במקום 24, ו-overscroll שלא יגרור את העמוד.
     ‏29.7 — הכרעת שילה: הצצה של כרטיס-שכן משני הצדדים (24–32px), בסטייה מהפיגמה
     (706:2572 מגדיר כרטיס-מלא 381 בתוך 413 — בלי הצצה). בלי ההצצה אין רמז חזותי
     שיש עוד חבילות לגלול אליהן (דיווח שילה). אותו דפוס כמו קרוסלות דף-הבית
     (home.css .car-track): bleed מלא-רוחב עם margin-inline שלילי שמבטל את ריפוד
     ה-container (16px), ואז padding-inline שמגדיר את ההצצה עצמה. כאן בפיקסלים
     קבועים ולא ב-vw (כמו home.css) — כרטיס-חבילה גדול/דומיננטי יותר מכרטיס-מוצר,
     וההצצה הקבועה שומרת עליו דומיננטי גם ברוחבים שונים. */
  .pk-grid {
    /* 29.7 לילה — כיול: 28px נתן בפועל רק 12px סליל-נראה בטעינה (חוט-שערה, דיווח
       שילה) כי ה-gap שבין הכרטיסים "בולע" חלק מהריפוד. הכרטיס הראשון נצמד לתחילת
       ה-track, וקצה הכרטיס השכן מתחיל רק אחרי gap — לכן:
       ‏**סליל נראה = padding-inline (--pk-peek) − gap**, לא padding-inline לבדו.
       יעד 28–36px סליל ⇒ peek = סליל + gap = 32 + 16 = 48px (אומת חי ב-393px).
       כרטיס נותר דומיננטי: 393 − 2×48 = 297px = 75.6% מרוחב-המסך (דרישה ≥73%). */
    --pk-peek: 48px;
    /* 100% ולא calc(100vw - ...): ל-100vw יש פער-סקרולבר ידוע (הוא כולל את רוחב
       פס-הגלילה האנכי, שגוזל עד ~15-17px מרוחב-התוכן האמיתי) — נמדד ישירות:
       clientWidth בפועל 378 מול 100vw שנתן 393 באותו מסך. 100% פותר את זה כי
       הוא נגזר מתיבת-התוכן האמיתית של ה-track (רוחבו פחות ה-padding-inline
       שלו), בלי תלות ברוחב-החלון הנומינלי. */
    grid-auto-columns: 100%;
    gap: 16px;
    margin-inline: -16px;
    padding-inline: var(--pk-peek);
    overscroll-behavior-x: contain;
  }
  /* היה scroll-snap-align:start (בירושה מהכלל הבסיסי) — עם הצצה משני הצדדים
     הכרטיס הפעיל צריך להיות ממורכז, לא צמוד לקצה, אחרת ההצצה לא סימטרית. */
  .pk-grid > * { scroll-snap-align: center; }
  /* 661:25305 — התמונה במובייל 387×363 (בדסקטופ 432×363) */
  .pk-media { aspect-ratio: 387 / 363; }
  /* 661:25307 — פאנל-הטקסט במובייל 221px (במקום 198) */
  .pk-body { padding: 24px; }
  /* 661:25821/25822 — Frame 62 pad-bottom 32 · Section pad-top 32 */
  .pk-services { padding-block-end: 32px; }
  .pk-services .container { padding-block-start: 32px; }
  /* 661:25825 — טור אחד ב-413, gap 24 בין הכרטיסים */
  .pk-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  /* 661:25824/25827/25832 — במובייל הכותרת, ראשי-הכרטיסים והתיאורים ממורכזים (בדסקטופ ימין) */
  .pk-services-title { text-align: center; }
  .pk-service-head { justify-content: center; }
  .pk-service p { text-align: center; }

  /* ── פופאפ במובייל — מסך מלא (M_Deal_preview_full 661:26035) ── */
  .pk-layer { padding: 0; }
  .pk-modal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    block-size: 100vh; block-size: 100dvh;
    max-block-size: 100vh; max-block-size: 100dvh;
    border-radius: 0;
  }
  .pk-modal.no-image { grid-template-rows: minmax(0, 1fr); }
  /* 661:26036 — תמונה עליונה 393×270 */
  .pk-modal-media { block-size: 270px; }
  .pk-modal-media img { block-size: 270px; }
  /* 661:26037 — T32 R16 B24 L16 · ⚠ B **0** לא 24 — אותו תיקון-31.7 של הגרסה
     הדסקטופית (ר' ההערה המלאה ליד .pk-modal-body הבסיסי): ה-24 עברו להיות
     padding-block-end של .pk-modal-foot עצמו, למטה. */
  .pk-modal-body { padding: 32px 16px 0; }
  /* 661:26079 — ‏X לבן על התמונה העליונה; בלי תמונה — נשאר כהה */
  .pk-close { color: #fff; }
  .pk-modal.no-image .pk-close { color: #464747; }
  /* 661:26042 — Heebo 600 / 24 / lh 35.3 */
  .pk-modal-title { font-weight: var(--fw-semibold); line-height: 1.47; }
  /* 661:26113 / 661:26124 — צ'יפ 14, "מה בחבילה?" 16 */
  .pk-pill { font-size: var(--fs-sm); }
  .pk-modal-sub { font-size: var(--fs-md); }
  .pk-contents { grid-template-columns: minmax(0, 1fr); }
  /* 661:26534 Frame 168 — פס פעולה דביק בתחתית ה-viewport: רקע #faf9f7, קו עליון #ead7da,
     שורה אחת (661:26066): כמות מימין (ראשונה ב-DOM) + כפתור משמאלה, gap 24
     ⚠ 31.7 — margin-block-end שלילי הוסר, אותה סיבה בדיוק כמו בגרסה הדסקטופית:
     ריפוד-ההורה כבר 0, אז אין מה לבטל; padding:24px 16px כאן הוא המרווח הפנימי
     בפועל (לא "שחזור" של ריפוד שבוטל). margin-inline נשאר לבד — מרחיב לרוחב-מלא. */
  .pk-modal-foot {
    position: sticky; inset-block-end: 0; z-index: 1;
    background: var(--bc-paper);
    margin-inline: -16px;
    padding: 24px 16px; gap: 24px;
  }
  .pk-modal-foot .btn { min-inline-size: 0; max-inline-size: none; flex: 1 1 auto; }
  .pk-qty { flex: none; }
}
@media (max-width: 560px) {
  .pk-services-grid { grid-template-columns: minmax(0, 1fr); }
  /* בכרטיס צר — המחיר והכפתור עלולים לגלוש; מותר להישבר לשתי שורות */
  .pk-foot { flex-wrap: wrap; gap: 12px; }
}

/* ── דסקטופ ≥961 — רשימה מלאה, לא רצועה נגללת (הכרעת שילה 3.8.26) ──
   ההיסטוריה חשובה כאן כי ההכרעה נהפכה פעמיים: עד 26.7 היה ‎repeat(3, 1fr)‎;
   שילה דיווח אז ש-9 חבילות חלביות מתקפלות ל-3 שורות ו"נראות כרשימה", והבסיס
   הפך לשורה אחת נגללת אופקית. ‏3.8: הגלילה הצידית מסתירה חבילות מלקוח שאינו
   גולל — ולכן הרשימה המלאה חוזרת, בדסקטופ בלבד. הקרוסלה (עם ההצצה והנקודות)
   נשארת כלשונה ב-‎@media (max-width: 960px)‎.
   ⚠ ‏BCCarousel נשאר מחובר לאותו track ואין צורך לנתקו: הוא בודק ב-build() אם
   הרצועה נגללת אופקית בכלל, ואם לא — אינו משכפל לולאה ואינו מצייר נקודות.
   ‏.pk-dots מוסתר כאן בנוסף, כדי שלא יהבהב בין הציור הראשון למדידה. */
@media (min-width: 961px) {
  .pk-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .pk-grid > * { scroll-snap-align: none; }
  .pk-dots { display: none; }
  /* מצב "בקרוב" הוא פריט יחיד שאמור להימתח על כל הרוחב. ב-grid-auto-flow:column
     ה-inline-size:100% של הכלל הבסיסי הספיק; ברשת-עמודות הוא תופס עמודה אחת
     מתוך שלוש, ולכן צריך פריסה מפורשת על כל הטווח. */
  .pk-grid .pk-soon { grid-column: 1 / -1; }
}

/* ── מסך רחב ≥1600px — 4 חבילות בשורה ── */
@media (min-width: 1600px) {
  .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── משמר [hidden] · 28.7 ──
   התכונה hidden היא display:none של **גיליון-הדפדפן**, וכל כלל-מחלקה בגיליון-האתר
   גובר עליה. כל אלמנט כאן מצהיר display במחלקה שלו ומתחלף ב-JS דרך .hidden —
   כלומר בלי השורה הזאת הוא **נראה תמיד**. זה היה השורש לדיווח שילה 28.7:
   מסך "ההזמנה התקבלה!" הוצג בזמן שהלקוח עדיין ממלא את הטופס.
   ⚠ במכוון לא נעשה כלל גלובלי [hidden]{display:none!important}: הוא היה מבטל את
   ‎.cat-nav .cat-sub[hidden]{display:contents}‎ ומעלים את הקטגוריות במובייל. */
.pk-modal-tags[hidden],
.pk-contents[hidden] { display: none; }

/* ── הצמדת שבירות-שורה לפיגמה (29.7.26) — ראו audit/2026-07-29-linebreaks/solve-widths.mjs ──────── */
/* 660:19583 / 660:19597 — טקסטי שירותי-הבר: בפיגמה שבירה ידנית (\n) אחרי "טבעיים" /
   אחרי "קפה"; ‏220 משחזר את שתיהן בכל נקודות-השבירה (טווחים [204–232]/[204–238]) */
.pk-service p { max-inline-size: 220px; margin-inline: auto; }