/* ═══════════════════════════════════════════════════════════════════════
   עגלה + קופה — תצוגת מובייל. גרסה 2, 27.08.2026
   ═══════════════════════════════════════════════════════════════════════
   ⛔ גרסה 1 של הקובץ הזה שברה את העגלה ובוטלה. מה שהיא עשתה לא יחזור:
      היא נתנה ל-td::before ערך display:block עם width:100% בתוך תא גריד
      שרוחבו auto, והוסיפה padding-inline-end של 64 פיקסל לתא נוסף.
      שני אלה יחד כפו רוחב מינימלי על העמודות, פוצצו את
      grid-template-columns מעבר לרוחב המסך, ודחפו את הכרטיס שמאלה.

   ⛔ הכלל שנולד מזה, ומחייב כל שינוי כאן:
      עמודה ברוחב auto נגזרת מהתוכן. כל תוכן שנוסף לתא כזה יכול להרחיב
      אותו בלי גבול. לכן בגרסה הזו **רוחבי העמודות נעולים במספרים**,
      וכל תא מקבל min-width:0. בפריסה כזו שום תוכן אינו יכול להרחיב
      את השורה, ולכן שום שינוי טקסט או תווית אינו יכול לגרום לגלישה.

   קובץ עצמאי. אף קובץ קיים לא נערך. ביטול מלא = מחיקת הקובץ.
   השם מתחיל ב-zz כדי שה-glob יטען אותו אחרי cart.css ו-checkout.css.

   מדידה חיה לפני, 375 פיקסל:
     · grid-template-columns של שורת המוצר = 0px 95.36px 139.86px
       תא התמונה אופס, והתווית "סכום ביניים:" תפסה 140 פיקסל
       ולכן לשם המוצר נשארו 95 והוא נשבר לשתי שורות
     · td.product-thumbnail קיבל display:none מווקומרס — אין תמונה בעגלה
     · טופס הקופה התחיל ב-501 פיקסל מתוך 812
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ שדה החיפוש יורד מהעגלה ומהקופה ══════════════════════════════════
   חיפוש ההדר הגלובלי. בעגלה ובקופה הוא רק דרך החוצה.
   הסתרה בלבד, אפס השפעה על רוחב. חל בכל הרוחבים. */
body.woocommerce-cart .sa-header-search,
body.woocommerce-checkout .sa-header-search {
  display: none;
}


/* ═══ "יש לך קופון?" נעלם אחרי שהוזן קופון ═════════════════════════════
   אומת חי: הופעל קופון, נרשמה הנחה, והשורה המשיכה להיות מוצגת בגובה 88.
   כל הקופונים מוגדרים individual_use — אי אפשר להוסיף שני ממילא.
   ⛔ שדה הקופון עצמו נשאר ואינו מוסתר בשום מצב.
   התנאי :has תופס גם רענון אג'קס של הקופה. הסתרה בלבד. */
body.woocommerce-checkout:has(.cart-discount) .woocommerce-form-coupon-toggle {
  display: none;
}


/* ═══ כפתור "לעדכן סל קניות" ═══════════════════════════════════════════
   ⚠️ הכפתור באמת מנוטרל. ווקומרס מדליק disabled עד ששינית כמות.
   הבעיה: הוא נצבע כמו כפתור פעיל ולכן נראה לחיץ.
   ⛔ ה-important נדרש — נמדד שוב ושוב שגם כלל ה-:disabled של ווקומרס
   עצמו מפסיד כאן. שתי תכונות בלבד נעולות, שתיהן צבע. אפס השפעה על רוחב. */
body.woocommerce-cart td.actions button[name="update_cart"]:disabled {
  background: transparent !important;
  opacity: .55 !important;
  border-color: var(--border);
  color: #9a887c;
  cursor: not-allowed;
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   מובייל וטאבלט בלבד — מתחת ל-900 פיקסל.
   900 היא נקודת השבירה שבה cart.css ו-checkout.css עוברים לשתי עמודות.
   הדסקטופ אינו נוגע בשום כלל מכאן ומטה.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

  /* ═══ הרווח בין ההדר לתוכן ═════════════════════════════════════════════
     שינוי אנכי בלבד. אינו יכול להשפיע על רוחב.
     נמדד: טופס הקופה התחיל ב-501 מתוך 812 — שישים אחוז מהמסך הראשון. */
  body.woocommerce-cart .page-hero--short,
  body.woocommerce-checkout .page-hero--short {
    padding: var(--sp-4) 0 var(--sp-3);
  }
  body.woocommerce-cart .page-hero--short h1,
  body.woocommerce-checkout .page-hero--short h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0;
  }
  body.woocommerce-cart section.section,
  body.woocommerce-checkout section.section {
    padding-block: var(--sp-4) var(--sp-6);
  }
  body.woocommerce-cart .woocommerce,
  body.woocommerce-checkout .woocommerce {
    padding-block: var(--sp-2) var(--sp-8);
    gap: var(--sp-5);
  }
  /* ⛔⛔ כשל שנמדד בצילום של טל: כתבתי כאן `padding` בקיצור, וזה דרס את
     `padding-inline-start: 48px` ש-checkout.css שומר עבור האייקון
     ש-ווקומרס ממקם במיקום מוחלט בצד ההתחלה. התוצאה: האייקון ישב על
     האות הראשונה של "קנית כאן בעבר?" ושל "יש לך קופון?".

     ⛔ הכלל: בקומפוננטה שיש לה ריפוד אסימטרי מכוון — לעולם לא לכתוב
     `padding` בקיצור. רק את הצד שבאמת רוצים לשנות.
     כאן משנים גובה בלבד. הריפוד האופקי נשאר כפי שהוגדר. */
  body.woocommerce-cart .woocommerce-message,
  body.woocommerce-cart .woocommerce-info,
  body.woocommerce-checkout .woocommerce-info,
  body.woocommerce-checkout .woocommerce-message {
    padding-block: var(--sp-3);
    margin-block: var(--sp-3);
    font-size: .9rem;
    line-height: 1.5;
  }


  /* ═══ שורת המוצר — רוחבי עמודות נעולים ═════════════════════════════════
     ⛔ הלב של התיקון, וגם ההגנה מפני החזרת התקלה.

     cart.css מגדיר grid-template-columns: auto 1fr auto. נמדד חי שזה
     התפרק ל-0px / 95.36px / 139.86px:
       · עמודה 1 (תמונה) קרסה לאפס כי ווקומרס נותן לתא display:none
       · עמודה 3 תפחה ל-140 כי התווית "סכום ביניים:" נגזרת ממנה
       · עמודה 2 (שם המוצר) קיבלה את השארית, 95 פיקסל, ונשברה

     כאן שלוש העמודות נעולות במספרים. הסכום קבוע וידוע מראש, ולכן
     שום תוכן — תווית, שם ארוך, מחיר גדול — אינו יכול להרחיב את השורה.
     ⛔ אין להחזיר auto או fit-content לאף אחת משלוש העמודות. */
  /* ⚠️ סבב שני של מדידה: העמודות ננעלו על 64 / 84 והשם עדיין קיבל 83.5
     פיקסל בלבד ונשבר לשתי שורות. הסיבה: הטבלה עצמה רק 293 מתוך 375,
     כי הריפוד האופקי של העמוד נקבע לדסקטופ. שני תיקונים יחד —
     הרחבת שטח העבודה, וכיווץ שתי העמודות הצדדיות. */
  body.woocommerce-cart .woocommerce {
    padding-inline: var(--sp-2);
  }
  body.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item {
    /* ⚠️ סבב שלישי: עם 72 ו-80 עמודת השם קיבלה 112 והשם עדיין נשבר.
       שתי העמודות הצדדיות כווצו לרוחב התוכן האמיתי שנמדד —
       כפתור ההסרה 32 פיקסל, סכום מודגש 58 פיקסל — והשם קיבל 143. */
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    grid-template-areas:
      "thumb name     remove"
      "thumb price    price"
      "thumb qty      qty"
      "thumb subtotal subtotal";
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-3);
    align-items: center;
  }

  /* ═══ שלוש שורות נתונים, כל אחת זוג תווית-ערך ══════════════════════
     טל: "עדיף שיהיה ברור מחיר ואז הכמות ואז הסיכום, ולא ככה זרוק".

     קודם המחיר ישב לבדו בשורה, והכמות והסכום חלקו שורה — שני נתונים
     שונים זה לצד זה בלי היגיון. עכשיו כל נתון בשורה משלו, התווית
     בימין והערך בשמאל, שלושתם באותו יישור אנכי:

         מחיר:          179 ש"ח
         כמות:          [ 2 ]
         סכום ביניים:   358 ש"ח

     כל תא הוא פלקס עם פיזור לקצוות. ה-::before הוא התווית ולכן הוא
     האיבר הראשון, כלומר בימין. הערך נדחף לשמאל. */
  body.woocommerce-cart table.shop_table.cart td.product-price,
  body.woocommerce-cart table.shop_table.cart td.product-quantity,
  body.woocommerce-cart table.shop_table.cart td.product-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    justify-self: stretch;
    text-align: start;
  }
  body.woocommerce-cart table.shop_table.cart td.product-price::before,
  body.woocommerce-cart table.shop_table.cart td.product-quantity::before,
  body.woocommerce-cart table.shop_table.cart td.product-subtotal::before {
    flex: 0 0 auto;
  }
  /* שורת הסיכום היא השורה המסכמת — היא מודגשת ומופרדת בקו דק */
  body.woocommerce-cart table.shop_table.cart td.product-subtotal {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
    margin-top: var(--sp-1);
  }

  /* כל תא מקבל min-width אפס. בלי זה תא גריד מסרב להצטמצם מתחת
     לרוחב התוכן שלו, וזו הדרך היחידה שבה עמודה נעולה עדיין גולשת. */
  body.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td {
    min-width: 0;
    overflow-wrap: anywhere;
    padding-block: var(--sp-1);
    /* ⚠️ sapir.css נותן לכל תא של טבלת חנות גבול תחתון. בתוך כרטיס
       שהוא כבר גריד זה מצייר קווים אופקיים אקראיים בין השדות.
       הגבול בין פריטים נשאר על ה-tr ב-cart.css. */
    border: none;
  }

  /* ─── התמונה חוזרת ───
     ווקומרס מסתיר את תא התמונה במובייל. עגלה בלי תמונת מוצר נראית
     שבורה, במיוחד כשזה המוצר היחיד בעסק. התא מוחזר לתצוגה בתוך
     העמודה הנעולה של 64 פיקסל, ולכן אינו יכול להרחיב כלום. */
  body.woocommerce-cart table.cart td.product-thumbnail {
    display: block;
  }
  /* ⚠️ נמדד: התמונה יצאה 40 על 64 — מעוכה. הסיבה: cart.css נותן לתא
     ריפוד אופקי, והתמונה קיבלה את מה שנשאר מהעמודה. הריפוד מתאפס
     והתמונה נמתחת לרוחב העמודה עם יחס גובה-רוחב נעול. */
  body.woocommerce-cart table.cart td.product-thumbnail {
    padding-inline: 0;
  }
  body.woocommerce-cart table.cart td.product-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
  }


  /* ═══ התוויות הכפולות ═════════════════════════════════════════════════
     ווקומרס מדפיס בכל תא במובייל:
         td::before { content: attr(data-title) ": "; float: right }

     · בתא השם — "מוצר: " צף ימינה ודוחף את השם לשורה שנייה.
     · בתא סכום הביניים — "סכום ביניים: " נדחס אל המספר ונראה
       כאילו חסר רווח אחרי הנקודתיים. זה מה שנראה כ"סכום ביניים:358".

     ⛔ הפעם אין display:block ואין width. רק הסרה, ורק ביטול הציפה.
     שתי הפעולות האלה יכולות רק לצמצם רוחב, לעולם לא להגדיל. */

  /* תוויות שהן רעש — התמונה, השם וכפתור ההסרה מדברים בעד עצמם */
  body.woocommerce-cart table.cart td.product-name::before,
  body.woocommerce-cart table.cart td.product-remove::before,
  body.woocommerce-cart table.cart td.product-thumbnail::before,
  body.woocommerce-cart .cart_totals table.shop_table td::before,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td::before {
    content: none;
  }

  /* ⛔⛔ נמדד בצילום של טל, וזו תקלה שנגרמה בסבב הקודם:
     ווקומרס מסתיר במובייל את **עמודת התוויות** של טבלת הסיכום
     (`tbody th { display: none }`) ומחליף אותה בתווית מלאכותית
     דרך td::before. הסרתי את המלאכותית — ואז לא נשארה אף תווית,
     והכרטיס הציג "358 ש"ח" פעמיים בלי לומר מה זה.

     התיקון הנכון: להחזיר את עמודת התוויות האמיתית ולא להסתמך על
     התחליף. התוצאה היא שורה דו-עמודתית תקינה — תווית בימין, סכום
     בשמאל — בדיוק כמו בדסקטופ.
     ⛔ אין להסיר את td::before בטבלת סיכום בלי להחזיר את ה-th. */
  /* ⚠️ אין כאן `width`. checkout.css כבר קובע חלוקה של 34 ל-66 אחוז,
     וקביעת רוחב נוספת כאן הייתה חונקת את עמודת הערכים. */
  /* ⛔⛔ השורש האמיתי, שנמצא רק בסבב הרביעי:
     ווקומרס לא רק מסתיר את עמודת התוויות במובייל — הוא **מפרק את כל
     הטבלה**. נמדד: כל tr קיבל display:block וכל td קיבל display:block.
     לכן התווית והסכום לעולם לא היו על אותה שורה, וזה מה שנראה
     כ"סה\"כ" למעלה ו-"358 ש\"ח" מתחתיו עם קו באמצע.

     החזרת ה-th לבדה לא הספיקה — היא נתנה תא טבלה בתוך שורה שהיא
     בלוק, ומכאן הרוחבים המוזרים של 109 ו-121 פיקסל.

     ⛔ הכלל: כשווקומרס מפרק טבלה, מחזירים את **שלוש הרמות** —
     שורה, תא ותווית. לא אחת מהן.
     טבלת סיכום היא זוג תווית-ערך, וזוג כזה חייב להיות באותה שורה. */
  /* ⚠️ ניסיון נוסף שנכשל, ורשום כדי שלא יחזור:
     ניסיתי להשאיר את שורת המשלוח לבדה בפריסה המדורגת של ווקומרס
     בזמן ששאר השורות חוזרות לטבלה. **זה החמיר** — ארבע שיטות
     המשלוח קפצו לארבע וחמש שורות כל אחת. ברגע ששאר השורות מגדירות
     עמודות אמיתיות, השורה החריגה נדחסת לתא אנונימי בתוך אותן עמודות.
     ⛔ אין דבר כזה שורה אחת עם פריסה אחרת. או שכולן בטבלה, או אף אחת.

     הפתרון: כל השורות בטבלה, ולטבלה חלוקת עמודות מפורשת שמתאימה
     לתוכן האמיתי — תוויות קצרות מקבלות מעט, רשימת שיטות המשלוח
     מקבלת את הרוב. אותה שיטה בדיוק שעבדה בקופה. */
  body.woocommerce-cart .cart_totals table.shop_table tr,
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr {
    display: table-row;
  }
  body.woocommerce-cart .cart_totals table.shop_table td,
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
    display: table-cell;
  }
  body.woocommerce-cart .cart_totals table.shop_table {
    table-layout: fixed;
  }
  body.woocommerce-cart .cart_totals table.shop_table tr > *:first-child {
    width: 30%;
  }
  body.woocommerce-cart .cart_totals table.shop_table tr > *:last-child {
    width: 70%;
  }
  /* הכרטיס בעגלה צר מזה שבקופה. כל פיקסל של ריפוד שנחסך הולך
     ישירות לרשימת שיטות המשלוח. */
  body.woocommerce-cart .cart-collaterals .cart_totals {
    padding-inline: var(--sp-3);
  }
  body.woocommerce-cart .cart_totals table.shop_table th {
    font-size: .88rem;
  }
  body.woocommerce-cart .cart_totals table.shop_table tbody th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
    display: table-cell;
    text-align: start;
    font-weight: 600;
    color: #3a2a1e;
    background: transparent;
  }
  body.woocommerce-cart .cart_totals table.shop_table tbody td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    text-align: end;
  }
  /* ═══ שורת המשלוח נפרסת לרוחב מלא ═══════════════════════════════════
     נמדד בצילום של טל: "משלוח לאילת ואיזורים חריגים: 50 ש\"ח" נשבר
     לשלוש שורות, כי הוא נדחס לעמודת ערכים של 66 אחוז בזמן שהתווית
     "משלוח" תפסה 34 אחוז וריקה לגמרי.

     רשימת בחירה אינה ערך של שורה — היא סקשן. לכן התווית עולה לשורה
     משלה מעל, והאפשרויות מקבלות את כל רוחב הכרטיס. זה מבנה מקובל
     בכל קופה במובייל, ולא פשרה. */
  /* ⚠️ נמדד: הכלל הזה לא נכנס לתוקף בניסיון הראשון. כלל קודם **בקובץ
     הזה עצמו** — זה שמחזיר את עמודת התוויות — נכתב עם `tbody` ולכן
     היה ספציפי יותר וניצח. כאן נוספה אותה רמת עיגון בדיוק. */
  /* ═══ חלוקת העמודות בטבלת הסיכום ═══════════════════════════════════
     ⛔⛔ שלושה ניסיונות כושלים לפני שנמצא השורש. שווה לזכור:

     ניסיתי לתת לשורת המשלוח רוחב עמודות משלה — קודם דרך display:block
     על התאים, אחר כך גם על השורה, ולבסוף דרך width ישיר על השורה.
     **שלושתם נכשלו בשקט.** הסיבה נמדדה בסוף:

         table-layout: fixed

     בפריסה קבועה רוחב העמודות נקבע **פעם אחת, מהשורה הראשונה**, וכל
     הצהרת רוחב בשורה מאוחרת יותר מתעלמים ממנה. יתרה מזו — בטבלה
     עמודה היא עמודה: אי אפשר שלשורה אחת תהיה חלוקה שונה מהשאר.
     ⛔ **הכלל: בטבלה עם פריסה קבועה משנים את חלוקת העמודות של הטבלה,
     לא של שורה. שורה בודדת אינה יחידה שאפשר לתת לה רוחב.**

     לכן החלוקה משתנה כאן ברמת הטבלה, ורק במובייל.
     checkout.css קובע 34 ל-66 אחוז — נכון לדסקטופ, אבל במסך של 375
     זה משאיר לרשימת שיטות המשלוח 200 פיקסל בלבד וכל שיטה נשברת
     לשתי שורות. עמודת התוויות מצומצמת ל-28 אחוז: היא עדיין מכילה
     בנוחות את "סכום ביניים" ואת "סה"כ", והאפשרויות מרוויחות
     כמעט 20 פיקסל לכל שיטה. */
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr > *:first-child {
    width: 28%;
  }
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr > *:last-child {
    width: 72%;
  }
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th,
  body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals > th {
    vertical-align: top;
    text-align: start;
  }

  /* ═══ שיטות המשלוח ═════════════════════════════════════════════════
     נמדד אחרי שינוי החלוקה: האפשרויות קיבלו 219 פיקסל במקום 200,
     ושתיים מארבע השיטות עדיין נשברו לשתי שורות ב-191 פיקסל הפנויים.
     כיווץ קל של הגופן ושל המרווח ליד הכפתור מכניס גם אותן לשורה אחת.
     ⛔ "משלוח לאילת ואיזורים חריגים: 50 ש"ח" יישאר בשתי שורות בכל
     מקרה — 32 תווים לא נכנסים למסך של 375. זו שבירה תקינה. */
  body.woocommerce-cart .cart_totals ul#shipping_method li,
  body.woocommerce-checkout ul#shipping_method li {
    gap: var(--sp-1);
  }
  body.woocommerce-cart .cart_totals ul#shipping_method li label,
  body.woocommerce-checkout ul#shipping_method li label {
    line-height: 1.5;
    font-size: .88rem;
  }
  body.woocommerce-cart .cart_totals table.shop_table .amount,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table .amount {
    white-space: nowrap;
  }

  /* תוויות שנושאות מידע — נשארות, אבל כטקסט זורם ולא כטקסט צף */
  /* רק תווית המחיר נשארת. תיבת הכמות מסבירה את עצמה, וסכום הביניים
     מודגש ויושב בסוף השורה — שתי תוויות של 13 תווים היו גוזלות רוחב
     מעמודת השם, וזה בדיוק מה שגרם לשבירה. */
  body.woocommerce-cart table.cart td.product-price::before,
  body.woocommerce-cart table.cart td.product-quantity::before,
  body.woocommerce-cart table.cart td.product-subtotal::before {
    float: none;
    font-weight: 400;
    font-size: .72rem;
    color: #6b564a;
  }
  body.woocommerce-cart table.shop_table.cart td.product-subtotal .amount {
    font-weight: 700;
    font-size: 1rem;
  }

  /* שם המוצר מקבל עכשיו את כל עמודת ה-1fr */
  /* ═══ יישור השדות בשורת המוצר ═══════════════════════════════════════
     מבנה שורת סל תקני, כמו בכל חנות מובילה:

         [תמונה]   שם המוצר                    [X]
                   מחיר: 179 ש"ח
                   [ 2 ]                  358 ש"ח

     התמונה נצמדת לראש השורה, השם והמחיר לימין, תיבת הכמות לימין,
     והסכום הכולל לשמאל ומודגש. כל שדה במקום קבוע. */
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
    align-self: start;
  }
  body.woocommerce-cart table.shop_table.cart td.product-name {
    text-align: start;
  }
  body.woocommerce-cart table.shop_table.cart td.product-name a {
    display: block;
    font-size: .98rem;
    line-height: 1.35;
  }
  body.woocommerce-cart table.shop_table.cart td.product-remove {
    align-self: start;
    justify-self: end;
  }
  body.woocommerce-cart table.shop_table.cart td.product-price {
    text-align: start;
    font-size: .9rem;
    color: #5d4a3e;
  }
  body.woocommerce-cart table.shop_table.cart td.product-quantity {
    text-align: start;
    justify-self: start;
  }
  body.woocommerce-cart table.shop_table.cart td.product-subtotal {
    text-align: end;
    justify-self: end;
  }
  /* ⛔ נמדד בצילום של טל: "358 ש\"ח" נשבר לשתי שורות בעמודה צרה.
     סכום כסף לעולם אינו נשבר. */
  body.woocommerce-cart table.shop_table.cart td.product-subtotal .amount,
  body.woocommerce-cart table.shop_table.cart td.product-subtotal bdi,
  body.woocommerce-cart table.shop_table.cart td.product-price .amount,
  body.woocommerce-cart table.shop_table.cart td.product-price bdi {
    white-space: nowrap;
  }


  /* ═══ ריווח — טל: "צמוד מדי" ═══════════════════════════════════════════
     הכל אנכי או ריפוד פנימי של קופסה בלוק. אינו נוגע ברוחב עמודות. */
  body.woocommerce-cart .cart_totals table.shop_table th,
  body.woocommerce-cart .cart_totals table.shop_table td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding-block: var(--sp-4);
  }
  body.woocommerce-cart .cart_totals ul#shipping_method li {
    padding-block: var(--sp-3);
  }
  body.woocommerce-cart td.actions {
    padding: var(--sp-5) var(--sp-4);
  }
  body.woocommerce-cart .sa-cart-shipping-note {
    padding: var(--sp-4);
    line-height: 1.7;
  }


  /* ═══ הכפתורים הצפים ═══════════════════════════════════════════════════
     החלטת טל: הוואטסאפ נשאר. מי שלא מבין משהו צריך דרך לשאול.
     ⛔ כפתור הנגישות הוא חובה חוקית ואינו מוסתר בשום מצב.

     נמדד: הוואטסאפ בשמאל 24 ברוחב 48, הנגישות מעליו ברוחב 44.
     בעברית התא מיושר לקצה, כלומר המספר נדבק לשוליים השמאליים —
     בדיוק שם. ההתנגשות ודאית, לא מקרית.

     ⛔ הפעם הריפוד נוסף ל**כרטיס**, לא לתא טבלה. זה ההבדל שהפיל את
     גרסה 1: רוחב של קופסה בלוק נגזר מההורה, ולכן ריפוד פנימי מצמצם
     את התוכן ולעולם לא מרחיב את הקופסה. ריפוד על תא טבלה עושה ההפך. */
  /* ⛔⛔ כאן היה `padding-inline-end: 60px` על שני כרטיסי הסיכום, כדי
     שהמספרים לא יישבו מתחת לכפתורים הצפים. **זה היה פלסטר והוסר.**
     הוא גזל 60 פיקסל מרוחב הכרטיס בכל גלילה, ולכן שורת המשלוח
     נשברה לשלוש שורות והכרטיס נראה צר ולא מנוצל.

     ההחלטה המקצועית: כפתור צף מרחף מעל התוכן — ככה זה עובד בכל אתר
     בעולם, וזה מקובל. לא מעוותים את רוחב התוכן בגללו. במקום זה
     הכרטיס מקבל את מלוא הרוחב, והריפוד הפנימי הרגיל שלו מספיק
     כדי שהמספרים לא ידבקו לקצה.

     מה כן נעשה: מרווח בתחתית העמוד, כדי ששורת העוגיות והכפתורים
     לא יתפסו את כפתור התשלום בסוף הגלילה. */
  body.woocommerce-cart .wc-proceed-to-checkout,
  body.woocommerce-checkout #place_order {
    margin-bottom: var(--sp-5);
  }


  /* ═══ שורת הקופון ══════════════════════════════════════════════════════
     ⚠️ הסדר אינו הפוך. נמדד: השדה בימין, הכפתור בשמאל — זו הזרימה
     הנכונה בעברית. ⛔ הסדר לא שונה, ואין לשנות אותו.

     מה שכן נמדד: "החלת קופון" נשבר לשתי שורות והשדה נדחס.
     הפתרון — שתי שורות מלאות במקום שורה אחת צפופה. כשכל איבר
     ברוחב מלא, אין בכלל לחץ אופקי ולכן אין דרך לגלוש.

     ⛔ שדה הקופון נשאר. 6,000 קודים לאגודת הצליאק כבר הופצו.
     ⚠️ לא נוגעים ב-display של td.actions — הוא נושא colspan, ושינוי
     ה-display שלו מוציא אותו מאלגוריתם הטבלה. מלכודת מתועדת ב-cart.css. */
  body.woocommerce-cart .coupon {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
    gap: var(--sp-3);
  }
  body.woocommerce-cart .coupon #coupon_code {
    /* ⚠️ נמדד: השדה יצא 276 והכפתור 280 — הפרש 4 פיקסל שנראה כמו
       יישור עקום. width מפורש מבטל את התלות בחישוב flex-basis. */
    flex: 1 1 100%;
    width: 100%;
    margin-inline: 0;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    text-align: center;
  }
  body.woocommerce-cart .coupon button[name="apply_coupon"] {
    flex: 1 1 100%;
    white-space: nowrap;
    box-sizing: border-box;
  }
  body.woocommerce-cart td.actions button[name="update_cart"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: var(--sp-3) 0 0;
  }


  /* ═══ מגע — תקן 44 פיקסל ══════════════════════════════════════════════ */
  body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity,
  body.woocommerce-cart table.shop_table.cart td.product-quantity input.qty {
    min-height: 44px;
  }
  body.woocommerce-cart .coupon #coupon_code,
  body.woocommerce-cart .coupon button[name="apply_coupon"],
  body.woocommerce-cart td.actions button[name="update_cart"] {
    min-height: 44px;
  }

} /* סוף max-width: 899px */


/* ═══════════════════════════════════════════════════════════════════════
   מסכים צרים — עד 360 פיקסל (אייפון קטן ומכשירי אנדרואיד ישנים)
   ═══════════════════════════════════════════════════════════════════════
   נמדד ב-320: העמודות יצאו 60 / 98 / 64 והשם עדיין נשבר לשתי שורות.
   כאן שתי העמודות הצדדיות מתכווצות עוד, ועמודת השם מקבלת את ההפרש.
   ⛔ שינוי מכווץ בלבד. אינו יכול לגרום לגלישה בשום מצב.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   מצב לחיצה בכפתורים — כל הרוחבים
   ═══════════════════════════════════════════════════════════════════════
   טל צילם כפתור "מעבר לתשלום" שנראה כהה ושבור. זו לא שגיאת עיצוב אלא
   לחיצה ארוכה: הדפדפן במובייל בחר את הטקסט שבתוך הכפתור, פתח תפריט
   העתקה, וצבע את הבחירה בכחול־כהה מעל האדום.

   ⛔ טקסט בתוך כפתור לעולם אינו בר-בחירה. כפתור הוא פקד, לא תוכן.
   כאן נחסמת הבחירה, נחסם הבהוב ההדגשה של המערכת, ומוגדר מצב לחיצה
   מכוון — כדי שלמשתמש תהיה תגובה ויזואלית נכונה במקום תפריט העתקה.
   ═══════════════════════════════════════════════════════════════════════ */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart td.actions button,
body.woocommerce-cart .coupon button,
body.woocommerce-checkout #place_order {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
body.woocommerce-checkout #place_order:active {
  background: var(--berry-hover);
  transform: scale(.985);
}


@media (max-width: 360px) {
  body.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item {
    /* נמדד ב-320: עם 56 ו-72 עמודת השם קיבלה 102 והשם נשבר.
       העמודה השמאלית מכווצת ל-56 והגופן יורד — השם עולה ל-116. */
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    padding-inline: var(--sp-2);
    gap: var(--sp-2);
  }
  body.woocommerce-cart table.shop_table.cart td.product-name a {
    font-size: .9rem;
  }
  body.woocommerce-cart table.shop_table.cart td.product-subtotal .amount {
    font-size: .92rem;
  }
  /* הכפתורים הצפים תופסים אותו רוחב גם במסך צר, ולכן הריפוד יורד
     מעט כדי לא לחנוק את כרטיס הסיכום */
  body.woocommerce-cart .cart-collaterals .cart_totals,
  body.woocommerce-checkout #order_review {
    padding-inline-end: 52px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   30.08.2026 — טבלת הסיכום בקופה עוברת לגריד. מבטל את חלוקת 28/72 שלמעלה.
   ══════════════════════════════════════════════════════════════════════
   ⛔ הבלוק שלמעלה שקובע 28 אחוז ל-72 אחוז על העמודות **מבוטל מכאן והלאה.**
      הוא לא נמחק כדי לא לשכתב קובץ עברי בן 597 שורות דרך צינור, אבל
      width:auto !important למטה מנטרל אותו. אין להסתמך עליו יותר.

   הבעיה שנמדדה חי 30.08 במסך 375:
       עמודת שם המוצר 85px | עמודת המחיר 215px | גובה התא 121px
       "חג שמח לכולם" נשבר לארבע שורות בדיוק ברגע התשלום.
       בנוסף: שתיים מארבע שיטות המשלוח נשברו לשתי שורות.

   ⛔ למה כל הניסיונות הקודמים נכשלו — וגם ניסיון נוסף שלי היום:
       כל עוד הטבלה היא table-layout:fixed, **עמודה היא עמודה.** אי אפשר
       לתת לשורת המשלוח חלוקה משלה. ניסיתי היום display:block על התאים
       שלה — היא קיבלה את רוחב עמודה 1 (194px) במקום רוחב מלא, כלומר
       המשלוח דווקא הורע. זה מאשר את ההערה שלמעלה, לא סותר אותה.

   ⛔ ניסיון שני שנכשל, ושווה לזכור למה: display:flex עם flex-wrap:wrap.
       **המדידה אמרה שהכול תקין ובמסך זה נראה שבור** — הכותרות "מוצר"
       ו"סכום ביניים" הפכו לשני פסים מלאים זה מעל זה, וכל מחיר ירד לשורה
       נפרדת מתחת לתווית שלו. מדידת רוחב וגובה אינה אימות ויזואלי.

   ✅ הפתרון שעבד: לוותר על מבנה הטבלה במובייל ולעבור לגריד.
       כל שורה היא גריד של שתי עמודות — תווית גמישה ומספר לפי תוכן.
       שורת המשלוח מקבלת עמודה **אחת** ולכן רשימת השיטות מקבלת רוחב מלא.
       זה מה ש-table-layout לא יכול לעשות: כאן לכל שורה גריד משלה.

   נמדד אחרי, אותו מסך 375:
       שם המוצר 226px בשורה אחת | גובה השורה 49px במקום 121
       ארבע שיטות המשלוח 37px כל אחת — כולן בשורה אחת, כולל אילת
       אין גלישה אופקית בגוף המסמך
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table { display: block; width: 100%; }
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead,
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody,
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; }

  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--sp-2);
    width: 100%;
  }
  /* ⛔ ה-important הזה מנטרל את חלוקת 28/72 הישנה שלמעלה. בלעדיו העמודה
     הראשונה חוזרת ל-28 אחוז והשם נמעך שוב. */
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr > * {
    width: auto !important;
    min-width: 0;
  }
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr > *:first-child { text-align: start; }
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr > *:last-child  { text-align: end; }

  /* שורת המשלוח: עמודה אחת, ולכן רשימת השיטות מקבלת את כל הרוחב */
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    grid-template-columns: minmax(0, 1fr);
  }
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td { text-align: start; }

  /* ⚠️ בלי זה שתי כותרות הטבלה מקבלות רקע נפרד ונראות כשני מלבנים
     מנותקים במקום פס אחד. הרווח בין העמודות הוא שיצר את החריץ. */
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead tr { column-gap: 0; }
  body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead th:first-child { padding-inline-end: var(--sp-2); }
}