/* ============================================================================
   Hayaanshufiya — מסחר
   ============================================================================

   לוחות Shop, Cart, Checkout, CheckoutMobile ו‑Thanks, מוחלים על המרקאפ
   של ווקומרס.

   מיפוי ולא override של תבניות. ווקומרס מרנדרת עשרות קובצי תבנית, וכל
   אחד מהם שנעתיק לכאן קופא בגרסה שממנה הועתק ומתפוצץ בעדכון הבא. שמות
   המחלקות שלה, לעומת זאת, יציבים כבר שנים: ‎.shop_table, ‎.cart_totals,
   ‎.woocommerce-Price-amount, ‎.form-row, ‎.button. אותה שיטה שכבר בשימוש
   ב‑hub-overrides.css וב‑insights-overrides.css — למחוק את ההגדרה,
   לשמור את השימוש.

   הכול דרך ‎--color-*, שהם השכבה הסמנטית ולכן מתהפכים למצב כהה מעצמם.
   פרימיטיב כאן היה נשאר תקוע — זו הטעות שנתפסה בלוח הבקרה.

   תלוי ב‑tokens.css, שנטען גלובלית מ‑mu-plugins/hayaan-design-system.php.
   ========================================================================= */

/* ── מצב כהה: אין ──────────────────────────────────────────────────────
   בקנבס יש ‎Cart, Checkout, CheckoutMobile ו‑Thanks — ואין להם וריאנט
   כהה. זה לא פער בבדיקה אלא החלטה שלא נלקחה: המסחר פשוט לא עוצב לכהה.

   לכן הוא מקובע לבהיר במפורש, כמו השכבה העריכותית. החלופה גרועה יותר
   ומוכרת מהסשן הזה: ‎commerce.css קורא ‎--color-*, שמתהפכים ב‑:root.dark,
   בעוד אסטרה צובעת את ‎body ואת המכולות בלבן קשיח — כלומר משתמש שבחר
   כהה במסך אחר היה מקבל בצ׳קאאוט טקסט בהיר על רקע לבן. היפוך חצי הוא
   הכשל הגרוע ביותר, לא הפתרון.

   ‎**הוכרע ב‑2026-09-10 בידי בעל האתר: המסחר נשאר בהיר.** אין לוחות
   כהים לצייר, וזו אינה השהיה — זו התשובה. אם התשובה תשתנה, מחיקת המפה
   הזאת מספיקה: כל שאר הקובץ כבר קורא ‎--color-*. */
body.woocommerce-page {
  --color-bg:             var(--sand-100);
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: var(--sand-200);
  --color-text:           var(--sand-950);
  --color-text-muted:     var(--sand-700);
  --color-text-faint:     var(--sand-600);
  --color-border:         var(--sand-300);
  --color-border-soft:    var(--sand-200);
  --color-border-strong:  var(--sand-400);
  --color-primary-subtle: var(--orange-100);
  --color-success-bg:     var(--green-100);
  --color-danger-bg:      var(--red-100);
}

.woocommerce-page,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
  /* ── מחויב לאור, ולמה ────────────────────────────────────────────────
     בקנבס יש Shop, Cart, Checkout, CheckoutMobile, Thanks, Account
     ו‑AccountMobile — ואף אחד מהם אינו וריאנט כהה. אין ‎CartDark ואין
     ‎CheckoutDark, בדיוק כמו שאין ‎HomeDark או ‎ContactDark.

     בלי הקיבוע הזה נוצר היפוך למחצה: הטוקנים הסמנטיים מתהפכים, אבל
     עמודי ווקומרס יושבים בתוך המרקאפ של אסטרה שצובע את המכולות שלו לבן
     ואינו מתהפך. נמדד בחנות — כותרת ‎#F5F0EB על רקע ‎#FFFFFF, כלומר
     1.13:1, וספירת התוצאות אותו דבר.

     אותה הכרעה שכבר התקבלה לשכבה העריכותית ב‑components.css: להצמיד
     את השכבה הסמנטית לערכים הבהירים בתוך ההיקף הזה, במקום להשאיר
     ערבוב. פרימיטיבים ‏(--sand-*, --orange-*, --green-*)‎ אינם מתהפכים
     ולכן הם הבחירה הנכונה כאן. */
  --color-bg: var(--sand-100);
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: var(--sand-200);
  --color-text: var(--sand-950);
  --color-text-muted: var(--sand-700);
  --color-text-faint: var(--sand-600);
  --color-border: var(--sand-300);
  --color-border-soft: var(--sand-200);
  --color-border-strong: var(--sand-400);
  --color-primary: var(--orange-600);
  --color-primary-hover: var(--orange-700);
  --color-primary-deep: var(--orange-800);
  --color-primary-subtle: var(--orange-100);
  --color-on-primary: var(--sand-950);
  --color-focus: var(--orange-600);
  --color-success: var(--green-600);   --color-success-bg: var(--green-100);  --color-success-ink: var(--green-900);
  --color-warning: var(--amber-600);   --color-warning-bg: var(--amber-100);  --color-warning-ink: var(--amber-900);
  --color-danger: var(--red-600);      --color-danger-bg: var(--red-100);     --color-danger-ink: var(--red-900);
  --color-info: var(--blue-600);       --color-info-bg: var(--blue-100);      --color-info-ink: var(--blue-900);

  background: var(--color-bg);
  color: var(--color-text);
}

/* פירורי הלחם מגיעים ב‑#777, שהוא 4.48:1 על לבן — מחמיץ בשתי מאיות.
   ‎sand-700 הוא 7.11:1 על משטח לבן.

   בלי ‎.woocommerce לפניו: ה‑<nav> הזה אינו בתוך ‎.woocommerce אלא אח
   שלו בתוך ‎.ast-woocommerce-container, ולכן סלקטור צאצא לא תפס אותו
   והכלל של ווקומרס ‎(.woocommerce-js .woocommerce-breadcrumb) ניצח. */
/* ‎body ו‑nav בשם האלמנט: ‎.woocommerce-js .woocommerce-breadcrumb הוא
   ‎(0,2,0) בדיוק כמו ‎.woocommerce-page .woocommerce-breadcrumb, וסדר
   הטעינה של ווקומרס מנצח. ‎(0,2,2) מכריע בלי ‎!important. */
body.woocommerce-page nav.woocommerce-breadcrumb,
body.woocommerce-page nav.woocommerce-breadcrumb a,
body.woocommerce-page .woocommerce-result-count { color: var(--color-text-muted); }

/* ── מטרות מגע ─────────────────────────────────────────────────────────
   שלושה פקדים של אסטרה בכרטיס המוצר ובסרגל המיון נופלים מתחת ל‑44px:
   ‎.orderby ‏(40)‎, ‎.ast-on-card-button ‏(32×32)‎ ו‑.ast-loop-product__link
   ‏(29 גובה)‎. הכרית היא אותו מנגנון שכבר בשימוש ב‑.ghost-btn,
   ב‑.field-action, ב‑.btn--sm וב‑a.remove. */
.woocommerce-page select.orderby { min-height: 44px; }
/* לכפתור הזה גודל אמיתי ולא כרית: הוא כפתור עגול על תמונת המוצר, ואין
   סיבה שיהיה 32 כשהרצפה היא 44. */
.woocommerce-page .ast-on-card-button {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce-page .ast-loop-product__link { position: relative; }
.woocommerce-page .ast-loop-product__link::after { content: ''; position: absolute; inset: -8px 0; }

/* אסטרה צובעת ‎h1..h6 בשם האלמנט, וזה גובר על הורשה. אותו תיקון שכבר
   קיים ל‑.hay ול‑#hayaanshufiya-insights-root. */
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce h4, .woocommerce h5, .woocommerce h6,
.woocommerce label, .woocommerce legend { color: inherit; }

/* ── מחיר ──────────────────────────────────────────────────────────────
   ‎--color-primary-deep ולא ‎--color-primary: כתום בעוצמה מלאה אינו נושא
   טקסט. זה הכלל שכבר תוקן בהאב, בתובנות ובתרגולים. */
.woocommerce .woocommerce-Price-amount,
.woocommerce .price,
.woocommerce .price .amount,
.woocommerce ul.products li.product .price {
  color: var(--color-primary-deep) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.woocommerce .price del,
.woocommerce .price del .amount { color: var(--color-text-muted); font-weight: 500; }
.woocommerce .price ins { text-decoration: none; }

/* ── כרטיס מוצר ────────────────────────────────────────────────────────
   הלוח מצייר את המסלולים ככרטיסים, לא כרשת חנות. */
.woocommerce ul.products li.product {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl, 1.25rem);
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--color-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}
.woocommerce ul.products li.product a img { border-radius: var(--radius-lg, .75rem); }
.woocommerce span.onsale {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 9999px;
  font-weight: 700;
}

/* ── כפתורים ───────────────────────────────────────────────────────────
   דיו כהה על כתום, לעולם לא לבן. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 0;
  border-radius: var(--radius-md, .75rem);
  min-height: var(--btn-height, 3rem);
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-1);
}

/* ── למה ‎!important כאן ────────────────────────────────────────────────
   אסטרה מגדירה את הכפתורים בגיליון מוטבע עם רשימת סלקטורים ארוכה, ובתוכה
   ענפים שמתאימים לאותו כפתור בסגוליות שווה לזו שכאן — והיא נטענת אחרי.
   נמדד ישירות: כיבוי הגיליון המוטבע של אסטרה החזיר את הכפתור לכתום,
   כיבוי הגיליון הזה לא שינה כלום. כלומר הכלל תקין ופשוט מפסיד.

   זו אותה סיטואציה שבה כבר נעשה שימוש ב‑hub-overrides.css
   וב‑insights-overrides.css: גיליון של צד שלישי שאי אפשר לערוך, ומיפוי
   שחייב לנצח אותו. ‎!important רק על המאפיינים שבאמת מתנגשים. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce ul.products li.product .button {
  background-color: var(--color-primary) !important;
  background-image: none !important;
  color: var(--color-on-primary) !important;
  border-color: transparent !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: var(--color-primary-hover) !important;
  color: var(--color-on-primary) !important;
}
/* המשני נשאר משני גם מול אסטרה. */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}
/* המשני — מסגרת ולא מילוי, כמו ‎.btn--quiet בסולם. */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.woocommerce .button:disabled,
.woocommerce .button[disabled] { opacity: .55; }

/* ── שדות ──────────────────────────────────────────────────────────────
   אותה גיאומטריה של ‎.field ב‑components.css, כדי ששני הטפסים באתר —
   ההתחברות והתשלום — לא ייראו כשני מוצרים. */
.woocommerce form .form-row label,
.woocommerce-account .woocommerce-form__label,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-Input--text,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: var(--field-height, 3rem);
  padding: 0 14px;
  border-radius: var(--radius-md, .75rem);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 15px;
  font-family: inherit;
}
.woocommerce form .form-row textarea { padding: 14px; min-height: 110px; resize: vertical; }
/* אסטרה מעצבת ‎input ו‑textarea בשם האלמנט בגיליון המוטבע שלה, ומנצחת
   מאותה סיבה. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-Input--text {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder { color: var(--color-text-faint); opacity: 1; }
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--color-danger); }
.woocommerce .required { color: var(--color-danger); }
.woocommerce form .form-row .description,
.woocommerce .woocommerce-input-wrapper .description {
  font-size: 13px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  padding: 4px 0 0;
}

/* ── טבלאות: העגלה, סיכום ההזמנה, פרטי ההזמנה ─────────────────────────── */
.woocommerce table.shop_table {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl, 1.25rem);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--color-surface);
}
.woocommerce table.shop_table th {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 16px;
  border: 0;
}
.woocommerce table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  background: var(--color-surface-sunken);
  font-weight: 700;
  border-top: 1px solid var(--color-border);
}
.woocommerce table.shop_table .product-name a { color: var(--color-text); font-weight: 700; }
.woocommerce table.shop_table .product-name a:hover { color: var(--color-primary-deep); }
.woocommerce a.remove {
  color: var(--color-danger);
  background: transparent;
  font-weight: 700;
  width: 24px; height: 24px; line-height: 24px;
  position: relative;
}
/* ‎24 + 10 + 10 = 44. אותה כרית שכבר בשימוש ב‑.ghost-btn וב‑.btn--sm. */
.woocommerce a.remove::after { content: ''; position: absolute; inset: -10px; }
.woocommerce a.remove:hover { background: var(--color-danger-bg); color: var(--color-danger); }

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
}
.woocommerce .cart_totals table.shop_table { background: var(--color-surface); }
.woocommerce .order-total .amount { color: var(--color-primary-deep); font-size: 20px; }

/* כמות — פקד קטן שנופל מתחת לרצפת המגע בברירת המחדל. */
.woocommerce .quantity input.qty {
  min-height: var(--field-height, 3rem);
  min-width: 64px;
  text-align: center;
  border-radius: var(--radius-md, .75rem);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── קופון ─────────────────────────────────────────────────────────────── */
.woocommerce .coupon input.input-text { max-width: 220px; }
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 14px; }

/* ── הודעות ───────────────────────────────────────────────────────────── */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  border-radius: var(--radius-lg, 1rem);
  border: 0;
  border-top: 0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message { background: var(--color-success-bg); color: var(--color-success-ink); }
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info { background: var(--color-info-bg); color: var(--color-info-ink); }
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error { background: var(--color-danger-bg); color: var(--color-danger-ink); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { display: none; }
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-error a { color: inherit; text-decoration: underline; }

/* ── החשבון ────────────────────────────────────────────────────────────
   לוח Account: ניווט צדדי, וכרטיס לכל מקטע. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md, .75rem);
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-weight: 700;
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl, 1.25rem);
  padding: 26px;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl, 1.25rem);
  padding: 26px;
}

/* ── עמוד התודה ────────────────────────────────────────────────────────── */
.woocommerce .woocommerce-order .woocommerce-thankyou-order-received {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
}
.woocommerce ul.woocommerce-thankyou-order-details {
  list-style: none;
  margin: 0 0 22px;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl, 1.25rem);
}
.woocommerce ul.woocommerce-thankyou-order-details li {
  border: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  text-transform: none;
}
.woocommerce ul.woocommerce-thankyou-order-details li strong {
  display: block;
  font-size: 17px;
  color: var(--color-text);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   העגלה — Cart.dc.html
   ═══════════════════════════════════════════════════════════════════════

   הלוח מצייר שתי עמודות: רשימת הפריטים ב‑1.5fr וכרטיס הסיכום ב‑1fr,
   ‎align-items:start כדי שהסיכום לא יימתח לגובה הרשימה.

   ווקומרס נותן בדיוק את שני הבלוקים האלה — ‎.woocommerce-cart-form
   ו‑.cart-collaterals — ולכן אין צורך לדרוס תבנית: הטבלה הופכת לשורות
   ב‑display:block, וההורה הופך לגריד. שדרוג של ווקומרס לא ישבור את זה,
   בניגוד לעותק מוקפא של cart.php.
   ══════════════════════════════════════════════════════════════════════ */

/* ‎.icon ו‑.icon-tile מוגדרים ב‑components.css תחת ‎.hay, ועמודי ווקומרס
   אינם עטופים בו — הם המרקאפ של ווקומרס עצמו. בלי ההגדרות האלה ה‑<svg>
   מרונדר בגודל ברירת המחדל של הדפדפן (300×150) וחץ קטן הופך לצורה שחורה
   ענקית באמצע הכרטיס. הצבע מגיע מ‑currentColor, כמו בספרייט. */
body.woocommerce-page .icon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
body.woocommerce-page .icon--sm { width: 18px; height: 18px; }
body.woocommerce-page .icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-md, .75rem);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

body.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
}

/* הכותרת והתראות פורשות על שתי העמודות. */
body.woocommerce-cart .hay-cart-head,
body.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.hay-cart-title { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0; }
.hay-cart-sub { font-size: 14px; color: var(--color-text-muted); margin: 4px 0 0; }

/* ── כרטיס הפריטים ─────────────────────────────────────────────────── */

body.woocommerce-cart .woocommerce-cart-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

body.woocommerce-cart table.shop_table.cart,
body.woocommerce-cart table.shop_table.cart tbody {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}
/* הכותרות של הטבלה — "תמונה ממוזערת", "מוצר", "מחיר" — אינן בלוח:
   כל שורה מסבירה את עצמה. */
body.woocommerce-cart table.shop_table.cart thead { display: none; }

body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-soft);
}
body.woocommerce-cart tr.woocommerce-cart-form__cart-item > td {
  display: block;
  border: 0;
  padding: 0;
  background: none;
}

/* ‎order מסדר מחדש בלי לגעת במרקאפ: בלוח התמונה בהתחלה, השם באמצע,
   המחיר לפניו, וההסרה בסוף — בעוד ווקומרס פולט את ההסרה ראשונה. */
body.woocommerce-cart td.product-thumbnail { order: 1; flex: none; }
body.woocommerce-cart td.product-name      { order: 2; flex: 1; min-width: 0; }
body.woocommerce-cart td.product-quantity  { order: 3; flex: none; }
body.woocommerce-cart td.product-subtotal  { order: 4; flex: none; }
body.woocommerce-cart td.product-price     { display: none; }
body.woocommerce-cart td.product-remove    { order: 5; flex: none; }

/* התמונה כאריח, בגודל של ‎.icon-tile בלוח. */
body.woocommerce-cart td.product-thumbnail img {
  width: 44px; height: 44px;
  border-radius: var(--radius-md, .75rem);
  object-fit: cover;
  display: block;
}
/* מוצר בלי תמונה משאיר תא ריק ברוחב 0 והשורה מתכווצת. */
body.woocommerce-cart td.product-thumbnail:empty {
  width: 44px; height: 44px;
  border-radius: var(--radius-md, .75rem);
  background: var(--color-primary-subtle);
}

/* ‎min-height 44 ולא רק גופן: זהו קישור למוצר, ובגובה השורה הטבעי שלו
   (19px) הוא נופל מתחת לרצפת מטרת המגע. ‎inline-flex ממרכז את הכיתוב
   בתוך הגובה הגדול יותר בלי להזיז את השורה. */
body.woocommerce-cart td.product-name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
body.woocommerce-cart td.product-name a:hover { text-decoration: none; }
body.woocommerce-cart td.product-subtotal .woocommerce-Price-amount {
  font-size: 16px;
  font-weight: 700;
}

/* שדה הכמות נשאר — ראו ההערה ב‑class-cart.php. */
body.woocommerce-cart td.product-quantity .qty {
  width: 68px;
  min-height: 44px;
  text-align: center;
}

/* כפתור ההסרה: ‎.ghost-btn של הלוח. ווקומרס פולט <a> עם × כטקסט. */
body.woocommerce-cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md, .75rem);
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted) !important;
  background: none !important;
  text-decoration: none;
}
body.woocommerce-cart td.product-remove a.remove:hover {
  color: var(--color-danger) !important;
  background: var(--color-surface-sunken) !important;
}

/* שורת הפעולות — הקופון וכפתור העדכון. */
body.woocommerce-cart tr:has(> td.actions) { display: block; }
body.woocommerce-cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  border: 0;
  padding: 16px 0 0;
}
body.woocommerce-cart td.actions .coupon {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 260px;
}

/* ‎.coupon-error-notice הוא ההודעה שווקומרס מזריק כשקוד קופון נדחה, והוא
   יורש את דיו הגוף — כלומר שגיאה שנראית בדיוק כמו טקסט רגיל. הוא גם
   נדחס ל‑135px כפריט flex ליד השדה. שורה משלו, בצבע הסכנה. */
body.woocommerce-cart .coupon .coupon-error-notice {
  flex: 1 0 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-danger);
}
body.woocommerce-cart td.actions .coupon input.input-text {
  flex: 1;
  min-height: 44px;
}

.hay-cart-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-deep);
  text-decoration: none;
  align-self: flex-start;
}

/* ── כרטיס הסיכום ──────────────────────────────────────────────────── */

body.woocommerce-cart .cart-collaterals {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100% !important;
  float: none !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100% !important;
  float: none !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.woocommerce-cart .cart_totals > h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table tbody {
  display: block; width: 100%; border: 0; margin: 0;
}
body.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
}
body.woocommerce-cart .cart_totals table.shop_table tr.order-total {
  padding: 14px 0 0;
  border-top: 1px solid var(--color-border);
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
  display: block; border: 0; padding: 0; background: none;
}
body.woocommerce-cart .cart_totals tr.cart-subtotal th { font-size: 14px; font-weight: 500; }
body.woocommerce-cart .cart_totals tr.cart-subtotal td { font-size: 15px; font-weight: 700; }
body.woocommerce-cart .cart_totals tr.order-total th   { font-size: 16px; font-weight: 700; }
body.woocommerce-cart .cart_totals tr.order-total td,
body.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount {
  font-size: 22px; font-weight: 700;
}
body.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
body.woocommerce-cart a.checkout-button { width: 100%; }

.hay-digital-note {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  padding: 24px;
}
.hay-note-icon {
  background: var(--color-success-bg);
  color: var(--color-success-ink);
  flex: none;
}

/* ── העגלה בנייד ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  body.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart-collaterals .cart_totals,
  .hay-digital-note { padding: 18px; border-radius: 20px; }
  .hay-cart-title { font-size: 24px; }
  /* בשורה צרה המחיר והכמות יורדים לשורה שנייה במקום להצטופף. */
  body.woocommerce-cart tr.woocommerce-cart-form__cart-item { flex-wrap: wrap; }
  body.woocommerce-cart td.product-name { flex: 1 1 60%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   הצ׳קאאוט — Checkout.dc.html / CheckoutMobile.dc.html
   ═══════════════════════════════════════════════════════════════════════

   ה‑DOM של ווקומרס נשאר כפי שהוא. בנתיב תשלום חי, דריסת form-checkout.php
   או הזזת ‎#payment ב‑JavaScript הן סיכון אמיתי מול רווח ויזואלי —
   ‎update_order_review מחליף את תוכן ‎#order_review בכל שינוי בשדות, וכל
   הזזה הייתה צריכה לרוץ מחדש אחרי כל תגובת AJAX.

   סטייה מודעת אחת: הלוח מציב את כרטיס התשלום בעמודה הראשונה, מתחת
   לפרטי החיוב. בווקומרס ‎#payment הוא ילד של ‎#order_review, ולכן הוא
   נשאר בעמודה השנייה מתחת לסיכום. כל שאר שפת העיצוב — הכרטיסים,
   המרווחים, הטיפוגרפיה, בוררי אמצעי התשלום — זהה ללוח.
   ══════════════════════════════════════════════════════════════════════ */

body.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
}

/* ‎grid-row: 1 / span 2 — עמודת הפרטים משתרעת על שתי השורות של עמודת
   הסיכום, כך שהיא מתחילה בראש ואינה נגררת אחרי גובה הכותרת. */
/* ‎width:100% ו‑float:none על שלושתם: ווקומרס ואסטרה נותנים ל‑.col2-set
   ול‑#order_review רוחב באחוזים וריחוף — פריסה מלפני הגריד. פריט גריד
   עם ‎width:55% מקבל את התא במלואו אך מצייר רק חצי ממנו, והתוצאה היא
   שלוש עמודות צרות שצפות בתוך שתי עמודות רחבות.

   הסלקטור ארוך בכוונה. אסטרה פולטת ‎<style> מוטבע מהמתאים־אישית עם
   ‎.woocommerce-page.woocommerce-checkout form #customer_details.col2-set
   בתוך ‎@media (min-width: 922px) — סגוליות (1,3,1), גבוהה מ‑
   ‎body.woocommerce-checkout #customer_details שהוא (1,1,1). לכן הצורה
   כאן היא (1,4,2): אותה שרשרת ועוד מחלקה ואלמנט. */
/* ‎!important, ולא סגוליות גבוהה יותר.
   ניסיון קודם העלה את הסלקטור ל‑(1,4,2) מול (1,3,1) של אסטרה — והוא עדיין
   הפסיד, מפני שהכלל של אסטרה יושב בתוך ‎@media (min-width: 922px) ב‑<style>
   מוטבע שנדפס אחרי הגיליונות שלנו. מרוץ סגוליות מול גיליון של צד שלישי
   הוא מרוץ שאי אפשר לנצח בו פעם אחת ולתמיד: כל עדכון של אסטרה יכול
   להוסיף עוד מחלקה. זה בדיוק המקרה ש‑!important קיים בשבילו, וזה הדפוס
   שכבר נקבע ב‑hub-overrides ו‑insights-overrides.

   בלי זה: ‎float:right ו‑width:55% נשארים פעילים על פריטי גריד, ושתי
   העמודות מצטמצמות ל‑377px ול‑196px בתוך תאים של 686 ו‑490 — הצ׳קאאוט
   נראה כמו שלושה כרטיסים צרים שצפים אחד בתוך השני. */
body.woocommerce-checkout form.checkout > #customer_details,
body.woocommerce-checkout form.checkout > #order_review_heading,
body.woocommerce-checkout form.checkout > #order_review {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
body.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
body.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }

/* רצועת "יש לך קופון?" יושבת מעל הטופס ולא בתוכו, ולכן היא אינה פריט
   גריד. ווקומרס נותן לה מראה של הודעת מערכת בכחול; כאן היא כרטיס. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout form.checkout_coupon {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  padding: 18px 24px;
  margin: 0 0 24px;
  color: var(--color-text);
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }

/* ‎.hay-bar — רצועת הכותרת המשותפת בעמודי ווקומרס. ‎.hay לבדו מקבל
   ‎min-height:100vh מ‑page.css, וזו רק כותרת. */
.hay.hay-bar { min-height: 0; display: block; }

body.woocommerce-checkout .hay-cart-head,
body.woocommerce-checkout .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* col2-set של ווקומרס הוא ריחוף דו־טורי; כאן הוא עמודה אחת. */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  width: 100%; float: none;
}
body.woocommerce-checkout #customer_details .col-2:empty { display: none; }

/* ── כרטיס פרטי החיוב ──────────────────────────────────────────────── */

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  padding: 24px;
  margin: 0 0 24px;
}
/* כשהערות להזמנה כבויות ואין שדות אחרים באזור, לא להשאיר כרטיס ריק. */
body.woocommerce-checkout .woocommerce-additional-fields:not(:has(*)) { display: none; }
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: 16px; font-weight: 700; line-height: 1.4;
  margin: 0 0 16px;
}
/* שדות משלוח הוסרו — המוצר דיגיטלי. הבלוק נשאר במרקאפ וריק. */
body.woocommerce-checkout .woocommerce-shipping-fields { display: none; }

/* שם פרטי ושם משפחה זה לצד זה — הלוח, שורה ראשונה בטופס. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  width: 100%;
  float: none;
}
body.woocommerce-checkout #billing_first_name_field { grid-column: 1 !important; }
body.woocommerce-checkout #billing_last_name_field  { grid-column: 2 !important; }

body.woocommerce-checkout .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}
/* ווקומרס צובע את הכוכבית ‎color:red — ‎#FF0000 טהור, שנמדד 4.0:1 על
   לבן ונופל מתחת ל‑AA. הכלל שלו נושא ‎!important, ולכן גם התיקון. */
body.woocommerce-checkout .form-row .required,
body.woocommerce-checkout abbr.required {
  color: var(--color-danger) !important;
  text-decoration: none !important;
  border: 0;
}

/* ‎40px הוא גובה השדה של ווקומרס — ארבעה פיקסלים מתחת לרצפת מטרת המגע.
   חל על כל שדות הצ׳קאאוט וגם על שדה הקופון. */
body.woocommerce-page .input-text,
body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page select,
body.woocommerce-page textarea {
  min-height: 44px;
}
body.woocommerce-page textarea { min-height: 72px; }

/* ‎"לחצו כאן כדי להזין את קוד הקופון" הוא קישור בגובה שורה. */
body.woocommerce-page a.showcoupon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── עמודת הסיכום ──────────────────────────────────────────────────── */

/* הכותרת והטבלה הן כרטיס אחד: העליונה נושאת את הפינות העליונות והתחתונה
   את התחתונות, בלי מרווח ביניהן (row-gap: 0 על הגריד). */
body.woocommerce-checkout #order_review_heading {
  margin: 0;
  font-size: 16px; font-weight: 700; line-height: 1.4;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 24px 24px 0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border-soft);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: var(--shadow-2);
  background: var(--color-surface);
  padding: 16px 24px 24px;
  margin: 0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead { display: none; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot { display: block; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  display: block; border: 0; padding: 0; background: none;
}
body.woocommerce-checkout tr.cart_item {
  border-bottom: 1px solid var(--color-border-soft);
  padding: 14px 0;
}
body.woocommerce-checkout tr.cart_item td.product-name { font-size: 15px; font-weight: 600; }
body.woocommerce-checkout tr.cart_item .product-quantity {
  color: var(--color-text-muted);
  font-weight: 400;
}
body.woocommerce-checkout tfoot tr.order-total {
  border-top: 1px solid var(--color-border);
  padding: 14px 0 0;
}
body.woocommerce-checkout tfoot tr.order-total th { font-size: 16px; font-weight: 700; }
body.woocommerce-checkout tfoot tr.order-total .woocommerce-Price-amount {
  font-size: 22px; font-weight: 700;
}

/* ── כרטיס התשלום ──────────────────────────────────────────────────── */

body.woocommerce-checkout #payment {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  padding: 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* בורר אמצעי תשלום — הלוח: מסגרת 2px, נבחר בכתום עם רקע עדין. */
body.woocommerce-checkout ul.payment_methods li {
  margin: 0;
  padding: 0;
  border-radius: 14px;
  border: 2px solid var(--color-border-soft);
  background: var(--color-surface);
}
body.woocommerce-checkout ul.payment_methods li:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}
body.woocommerce-checkout ul.payment_methods li label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 44px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
body.woocommerce-checkout ul.payment_methods li input[type="radio"] {
  width: 20px; height: 20px; flex: none;
  accent-color: var(--color-primary);
  margin: 0;
}
body.woocommerce-checkout ul.payment_methods li img { max-height: 28px; width: auto; }
body.woocommerce-checkout .payment_box {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  padding: 0 16px 14px;
  margin: 0;
}
body.woocommerce-checkout .payment_box::before { display: none; }

body.woocommerce-checkout .form-row.place-order { margin: 0; padding: 0; }
body.woocommerce-checkout #place_order { width: 100%; }
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}

/* ── הצ׳קאאוט בנייד ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* ‎CheckoutMobile מציב את הסיכום ראשון, לפני הטופס: במסך צר המשתמש
     צריך לראות מה הוא קונה לפני שהוא ממלא חמישה שדות. */
  body.woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  body.woocommerce-checkout #order_review_heading { grid-column: 1; grid-row: 1; }
  body.woocommerce-checkout #order_review         { grid-column: 1; grid-row: 2; }
  body.woocommerce-checkout #customer_details     { grid-column: 1; grid-row: 3; margin-top: 24px; }
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  body.woocommerce-checkout #billing_first_name_field,
  body.woocommerce-checkout #billing_last_name_field { grid-column: 1 !important; }
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-additional-fields,
  body.woocommerce-checkout #payment { padding: 18px; border-radius: 20px; }
  body.woocommerce-checkout #order_review_heading { padding: 18px 18px 0; border-radius: 20px 20px 0 0; }
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
    padding: 12px 18px 18px; border-radius: 0 0 20px 20px;
  }
}

/* ── נייד ───────────────────────────────────────────────────────────────
   לוח CheckoutMobile: הכול לרוחב מלא, וסיכום ההזמנה מתחת לטופס. */
@media (max-width: 768px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }
  .woocommerce .coupon input.input-text { max-width: none; }
  .woocommerce table.shop_table th { display: none; }
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button { width: 100%; }
  .woocommerce .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
}