/* ============================================================================
   Arova · חשבון לקוח
   ----------------------------------------------------------------------------
   WooCommerce מגיע עם עמוד חשבון מלא — התחברות, הרשמה, היסטוריית
   הזמנות, כתובות ופרטים. הוא פשוט לא היה מעוצב: העמוד טען רק את
   components.css, ולכן הוצג בסגנון ברירת המחדל של התוסף.

   הקובץ הזה לא מוסיף פונקציונליות. הוא מלביש את מה שכבר קיים.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   שני הטפסים זה לצד זה — התחברות והרשמה
   ---------------------------------------------------------------------------- */

.woocommerce-account .u-columns {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  width: auto;
  float: none;
  padding: var(--space-7);
  background: var(--color-surface-raised);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-md);
}

.woocommerce-account .u-columns h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-line);
}

/* ----------------------------------------------------------------------------
   שדות — אותה שפה בדיוק כמו טופס יצירת הקשר
   ---------------------------------------------------------------------------- */

.woocommerce form .form-row { margin-block-end: var(--space-5); padding: 0; }

.woocommerce form .form-row label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* ⚠ הגדרת השדה עצמה עברה ל-components.css, כלל אחד לכל הטפסים
   באתר. כאן נשארה רק ההצמדה של המחלקות שWooCommerce מייצר. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-address-fields input.input-text,
.woocommerce-EditAccountForm input.input-text {
  width: 100%;
  height: var(--field-height);
  line-height: normal;
  padding: 0 var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-field);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.woocommerce form .form-row textarea { height: auto; padding-block: var(--space-3); }

.woocommerce form .form-row input:hover,
.woocommerce form .form-row select:hover { border-color: var(--color-text-muted); }

/* ⚠ טבעת המיקוד היא box-shadow ולא outline. outline נחתך בפינות
   המעוגלות בחלק מהדפדפנים, והשדה נראה שבור בזמן הקלדה. */
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(203, 171, 146, .30);
  outline: none;
}

/* השדה המוסתר של WooCommerce לחשיפת הסיסמה */
.woocommerce form .password-input { display: block; position: relative; }
.woocommerce form .show-password-input {
  position: absolute;
  inset-inline-end: var(--space-4);
  inset-block-start: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* "זכור אותי" — התיבה הייתה צמודה לטקסט בלי מרווח */
.woocommerce form .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.woocommerce form .woocommerce-form-login__rememberme input { width: 18px; height: 18px; }

.woocommerce-LostPassword {
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
}
.woocommerce-LostPassword a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------------------
   ניווט החשבון — טורים במקום רשימה חשופה
   ---------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: auto;
  float: none;
  margin-block-end: var(--space-6);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-5);
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-btn);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-text);
}

/* הפריט הפעיל מסומן במילוי מלא, כמו צ׳יפ הקטגוריה בקטלוג */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-surface-dark);
  border-color: var(--color-surface-dark);
  color: var(--color-text-invert);
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: auto;
  float: none;
}

/* ----------------------------------------------------------------------------
   טבלת ההזמנות
   ---------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

.woocommerce-account table.shop_table th {
  background: var(--color-surface-alt);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  padding: var(--space-4);
  text-align: start;
}

.woocommerce-account table.shop_table td {
  padding: var(--space-4);
  border-block-start: var(--border-hair) solid var(--color-line);
}

/* ----------------------------------------------------------------------------
   רוחב העמוד
   ----------------------------------------------------------------------------
   עמוד החשבון מרונדר דרך page.php, שמשתמש ב-container--narrow ברוחב
   664px. זה נכון לטקסט רץ, אך צר מכדי להעמיד שני טפסים זה לצד זה —
   ולכן ההתחברות וההרשמה נערמו במקום להופיע במקביל.
   ---------------------------------------------------------------------------- */

/* ⚠ הכלל הקודם היה .woocommerce-account .container — והוא תפס גם את
   מיכל ההאדר וגם את זה של הפוטר, כי שניהם נושאים את אותה מחלקה
   בתוך אותו body. נמדד: בעמודי החשבון הסרגל התכווץ ל-1088 בעוד
   שבכל שאר האתר הוא 1240, וקפץ פנימה ב-152px בכל מעבר.

   הרוחב שייך לאזור התוכן בלבד, ולכן הוא מסומן במחלקה משלו. */
.container--app { max-width: 68rem; }

/* ----------------------------------------------------------------------------
   כפתורים — WooCommerce מייצר .button ולא .btn
   ---------------------------------------------------------------------------- */

.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce form .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-7);
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
  border: var(--border-hair) solid var(--color-surface-dark);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.woocommerce-account .woocommerce .button:hover,
.woocommerce form .button:hover {
  background: var(--clay-800);
  border-color: var(--clay-800);
  color: var(--color-text-invert);
}

/* ----------------------------------------------------------------------------
   הסרת הקינון הכפול
   ----------------------------------------------------------------------------
   WooCommerce עוטף את הטופס בתוך העמודה, ושתי העטיפות קיבלו מסגרת
   ורקע — מה שיצר תיבה בתוך תיבה. המסגרת נשארת על העמודה בלבד.
   ---------------------------------------------------------------------------- */

.woocommerce-account .u-column1 form,
.woocommerce-account .u-column2 form {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* טקסט ההסבר מעל טופס ההרשמה */
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .u-column2 form > p:first-of-type {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}


/* ============================================================================
   עמוד התשלום
   ----------------------------------------------------------------------------
   ⚠ WooCommerce מסמן שדות קצרים במחלקות form-row-first ו-form-row-last
   כדי שיישבו זוגות בשורה. התבנית לא עיצבה אותן, ולכן כל שדה תפס
   שורה שלמה — שם פרטי, שם משפחה, מיקוד ועיר, כל אחד לחוד.
   התוצאה: טופס שדורש גלילה ארוכה גם במחשב.
   ============================================================================ */

/* שדות זוגיים חוזרים לשורה אחת */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last {
  width: 100%;
  float: none;
  margin-inline: 0;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
  display: grid;
  gap: 0 var(--space-5);
  grid-template-columns: 1fr 1fr;
}

/* שדה ברוחב מלא פורש על שתי העמודות */
.woocommerce-checkout .form-row-wide,
.woocommerce-address-fields .form-row-wide,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p:not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p:not(.form-row-first):not(.form-row-last) {
  grid-column: 1 / -1;
}

/* במסך צר הכול חוזר לטור אחד — שני שדות זה לצד זה בטלפון צפוף מדי */
@media (max-width: 620px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ---- פרטי הלקוח מול סיכום ההזמנה ---- */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: auto;
  float: none;
}

/* ריווח אנכי מהודק. גובה השדה עצמו מגיע מ---field-height */
.woocommerce-checkout .form-row,
.woocommerce-account .form-row { margin-block-end: var(--space-4); }

.woocommerce-checkout h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-hair) solid var(--color-line);
}

/* סיכום ההזמנה — נדבק בצד במסך רחב כדי שיישאר גלוי בזמן המילוי */
@media (min-width: 1000px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1.3fr .7fr;
    align-items: start;
  }

  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }

  .woocommerce-checkout form.checkout > h3#order_review_heading,
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
  }

  .woocommerce-checkout form.checkout > h3#order_review_heading { position: static; }
}

.woocommerce-checkout #order_review {
  padding: var(--space-6);
  background: var(--color-surface-raised);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-md);
}

.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #place_order { width: 100%; }


/* ============================================================================
   רוחב טורי ההתחברות וההרשמה
   ----------------------------------------------------------------------------
   ⚠ נמדד: מסלולי הרשת יצאו 476px כל אחד, אך הטורים עצמם רונדרו
   ב-228px — כלומר בערך חצי. הסיבה: WooCommerce קובע רוחב באחוזים
   דרך `.woocommerce .col2-set .col-1`, סלקטור חזק יותר מזה שכתבנו,
   והאחוז חושב מחדש בתוך תא הרשת וחתך אותו שוב.

   כאן הסלקטור מכוון בעוצמה תואמת. זה לא ניקיון סגנוני אלא התנאי
   המינימלי כדי לנצח את גיליון התוסף.
   ============================================================================ */

.woocommerce-account .woocommerce .u-columns .col-1,
.woocommerce-account .woocommerce .u-columns .col-2,
.woocommerce-account .woocommerce .u-column1,
.woocommerce-account .woocommerce .u-column2,
.woocommerce-account .woocommerce .col2-set .col-1,
.woocommerce-account .woocommerce .col2-set .col-2 {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
}

/* .prose מוסיף מרווח בין כל שני אחים — נכון לטקסט רץ, מיותר בתוך
   רשת שכבר מנהלת את המרווחים בעצמה. */
.woocommerce-account .prose > * + * { margin-block-start: 0; }


/* ⚠ .col2-set של WooCommerce נושא ::before ו-::after לניקוי float.
   ברגע שההורה הפך ל-grid, שני הפסאודו-אלמנטים האלה הפכו לפריטי
   רשת בעצמם ותפסו תאים. נמדד: טופס ההרשמה נדחף לשורה השנייה,
   מתחת לקו המסך — בדיוק מה שדרש גלילה כדי למצוא אותו.
   הם שריד של פריסת float ואין להם תפקיד בתוך רשת. */
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after { content: none; display: none; }

/* ============================================================================
   לוח הבקרה של החשבון
   ----------------------------------------------------------------------------
   התבנית המקורית של WooCommerce מדפיסה כאן שלוש פסקאות רצות עם
   קישורים בתוך הטקסט. נמדד: קיר טקסט וכ-600px שטח ריק אחריו.
   ============================================================================ */

.account-dash__greeting {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text);
}

.account-dash__lede {
  max-width: 46ch;                      /* אורך שורה קריא */
  margin-block: var(--space-3) var(--space-7);
  color: var(--color-text-soft);
}

.account-dash__grid {
  display: grid;
  /* מתפרק לבד לפי המקום הפנוי — בלי נקודת שבירה נפרדת.
     min() מונע גלישה כשהמסך צר מהמינימום. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-dash__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-6);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.account-dash__link:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}

.account-dash__icon svg {
  width: 26px;
  height: 26px;
  color: var(--color-accent);
}

.account-dash__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.account-dash__text {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.account-dash__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.account-dash__logout {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}
.account-dash__logout:hover { color: var(--color-text); }

/* המגע מקבל יעד ולא אנימציה — הרמה על מסך מגע נתקעת אחרי הלחיצה */
@media (hover: none) {
  .account-dash__link:hover { transform: none; box-shadow: none; }
}

/* ----------------------------------------------------------------------------
   תיבות סימון — אזור לחיצה
   ----------------------------------------------------------------------------
   ⚠ נמדד ב-375: "זכור אותי" יצא 22px גובה. אצבע צריכה 44px, וגם
   התווית עצמה צריכה להיות לחיצה — לא רק הריבוע.
   ---------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}

/* הכלל הכללי לתיבות סימון נמצא ב-components.css. כאן נשאר רק
   מה שייחודי למסכי החשבון. */
.woocommerce-account input[type="checkbox"],
.woocommerce-form__input-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-surface-dark);
  cursor: pointer;
  flex-shrink: 0;
}

/* WooCommerce מקווקו קישורים בתוך .woocommerce — נכון לטקסט,
   שגוי לכפתור ולפעולה משנית */
.account-dash__foot .btn,
.account-dash__logout,
.account-dash__link { text-decoration: none; }

/* ----------------------------------------------------------------------------
   שדות ההרשמה שנוספו
   ---------------------------------------------------------------------------- */

.arova-field__hint {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

/* שם פרטי ומשפחה זה לצד זה — שני שדות קצרים שממלאים יחד שורה
   אחת, כדי שהטופס לא ייראה ארוך מכפי שהוא */
@media (min-width: 480px) {
  .woocommerce-form-register {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
  }
  /* כל שדה תופס שורה שלמה, פרט לשני שדות השם */
  .woocommerce-form-register > * { grid-column: 1 / -1; }
  .woocommerce-form-register > .arova-field--first_name { grid-column: 1; }
  .woocommerce-form-register > .arova-field--last_name  { grid-column: 2; }
}

/* מד חוזק הסיסמה של WooCommerce מגיע עם צבעים משלו */
.woocommerce-password-strength {
  margin-block-start: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  text-align: start;
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad    { border-color: var(--color-error); color: var(--color-error); }
.woocommerce-password-strength.good,
.woocommerce-password-strength.strong { border-color: var(--color-accent); color: var(--color-text); }

.woocommerce-password-hint {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

/* ============================================================================
   טופס ההרשמה בשני שלבים
   ============================================================================ */

/* ⚠ ההסתרה תלויה ב-is-stepped שהסקריפט מוסיף. בלי JavaScript
   המחלקה לא קיימת, שני השלבים גלויים, והטופס נשלח בפעם אחת. */
.woocommerce-form-register.is-stepped .reg-step.is-hidden { display: none; }
.woocommerce-form-register:not(.is-stepped) .reg-next,
.woocommerce-form-register:not(.is-stepped) .reg-step__recap { display: none; }

.reg-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

.reg-progress__step {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-line-strong);
  transition: background var(--duration-fast) var(--ease-out);
}
.reg-progress__step.is-current { background: var(--color-accent); }

.reg-progress__label { margin-inline-start: var(--space-2); }

/* סיכום השלב הראשון — מראה מה כבר נמסר ומאפשר לתקן בלי לאבד
   את מה שהוקלד */
.reg-step__recap {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
  word-break: break-all;               /* כתובת ארוכה לא תרחיב את הכרטיס */
}

.reg-step__back {
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  text-decoration: underline;
  cursor: pointer;
}
.reg-step__back:hover { color: var(--color-text); }

.reg-error {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-error);
}

.reg-next { width: 100%; }


/* ============================================================================
   שפת הטפסים — אחידה בכל האתר
   ----------------------------------------------------------------------------
   התוויות, המרווחים והשדות הוגדרו עד כה בכל מסך בנפרד, ולכן טופס
   ההתחברות, הקופה ועריכת החשבון נראו כשלושה אתרים שונים.
   ============================================================================ */

.woocommerce form .form-row,
.woocommerce-page form .form-row,
.arova-field {
  display: block;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.arova-field label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* הכוכבית מסמנת חובה. אדום מלא מושך את העין יותר מהתוכן עצמו,
   ובטופס שכמעט כל שדותיו חובה זה רעש ולא מידע. */
.woocommerce .required,
.woocommerce-page .required,
.arova-field .required {
  color: var(--color-text-soft);
  border: 0;
  text-decoration: none;
}

/* תוויות של תיבות סימון הן משפט לצד הריבוע ולא כותרת מעליו */
.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox {
  display: inline-flex;
  margin-block-end: 0;
  font-weight: var(--weight-regular);
}

.account-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.account-form__aside {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}
.account-form__aside a { color: var(--color-text-soft); }
.account-form__aside a:hover { color: var(--color-text); }

.account-card__title {
  margin: 0 0 var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-line);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}

/* ============================================================================
   רשת הטפסים — זוגות במקום עמודה אחת ארוכה
   ----------------------------------------------------------------------------
   ⚠ נמדד בעמוד הכתובות: WooCommerce נותן ל-form-row-first/last רוחב
   באחוזים ומצייף אותם. בתוך המיכל הרחב הם התכווצו ל-227px כל אחד
   והשאירו 237px ריקים לצדם, בעוד כל שאר השדות תפסו שורה שלמה —
   תשע שורות ו-882 פיקסלים.

   כאן הזוגות מוגדרים ברשת מפורשת: שם, עיר ומיקוד, טלפון ואימייל.
   הרוחב באחוזים והציפה מבוטלים, אחרת הם נחתכים בתוך תא הרשת.
   ============================================================================ */

/* ⚠ ארבע עמודות ולא שתיים.
   שתי עמודות מכריחות כל שדה להיות חצי שורה או שורה שלמה, ואין
   ביניהן מידה שלישית. מיקוד בן שש ספרות קיבל תיבה של 484 פיקסלים
   — תיבה שמבטיחה תוכן שלא קיים, ונראית כמו טעות.

   ארבע עמודות מאפשרות לכל שדה לקבל רוחב שמתאר את מה שנכנס בו:
   מיקוד רבע, עיר שלושה רבעים, שם חצי. */
.account-form__grid,
.woocommerce-address-fields__field-wrapper,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-4);
}

/* ברירת המחדל היא שורה שלמה. רק מה שסומן במפורש מזדווג —
   כתובת רחוב שנחתכת לחצי שורה גרועה מכל חיסכון במקום. */
.account-form__grid > .form-row,
.woocommerce-address-fields__field-wrapper > .form-row,
.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
  width: auto;
  float: none;
  padding: 0;
}

.account-form__grid > .form-row-first,
.woocommerce-address-fields__field-wrapper > .form-row-first,
.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: span 2; }

.account-form__grid > .form-row-last,
.woocommerce-address-fields__field-wrapper > .form-row-last,
.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: span 2; }

/* עיר ומיקוד, טלפון ואימייל — שדות קצרים שאין סיבה שיתפסו
   שורה שלמה כל אחד */
/* העיר מוקדמת למיקוד גם בסדר ה-DOM — ראו arova_address_field_order */
#billing_city_field,     #shipping_city_field     { grid-column: span 3; }
#billing_postcode_field, #shipping_postcode_field { grid-column: span 1; }
#billing_phone_field,    #billing_email_field     { grid-column: span 2; }

/* ⚠ WooCommerce מנקה ציפה ב-div.clear. בתוך רשת הוא הופך לתא
   ריק שמזיז את כל מה שאחריו. */
.account-form__grid > .clear,
.woocommerce-address-fields__field-wrapper > .clear,
.woocommerce-billing-fields__field-wrapper > .clear { display: none; }

/* מתחת לרוחב הזה שני שדות באותה שורה נעשים צרים מכדי להקליד בהם */
/* ⚠ הביטול חייב לכלול גם את הכללים לפי id.
   נמדד ב-375: הרשת עברה לעמודה אחת, אבל `#billing_postcode_field`
   נשאר עם השמה מפורשת לעמודה שנייה — סלקטור id גובר על סלקטור
   מחלקה — והיא נוצרה מחדש כעמודה מרומזת. התוצאה הייתה שדות
   בני 126 פיקסלים וגלילה אופקית בטלפון. */
@media (max-width: 720px) {
  .account-form__grid,
  .woocommerce-address-fields__field-wrapper,
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }

  .account-form__grid > .form-row,
  .woocommerce-address-fields__field-wrapper > .form-row,
  .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-shipping-fields__field-wrapper > .form-row,
  #billing_city_field,     #shipping_city_field,
  #billing_postcode_field, #shipping_postcode_field,
  #billing_phone_field,    #billing_email_field { grid-column: 1 / -1; }

  /* המיקוד נשאר צר גם בעמודה אחת — תיבה ברוחב מסך למספר בן
     שש ספרות היא בדיוק מה שנראה לא מקצועי */
  #billing_postcode_field input,
  #shipping_postcode_field input { max-width: 12ch; }
}


/* ----------------------------------------------------------------------------
   מגירת שינוי הסיסמה
   ---------------------------------------------------------------------------- */

.account-details {
  margin-block: var(--space-5);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.account-details__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;                    /* המשולש המובנה מוחלף בחץ משלנו */
}
.account-details__summary::-webkit-details-marker { display: none; }

.account-details__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline-start: auto;
  /* ⚠ גבולות פיזיים ולא לוגיים. חץ מטה מצביע מטה בכל שפה,
     ו-border-inline-end מתהפך ב-RTL — מה שהפך אותו לחץ שמאלה. */
  border-right: 1.5px solid var(--color-text-soft);
  border-bottom: 1.5px solid var(--color-text-soft);
  rotate: 45deg;
  transition: rotate var(--duration-fast) var(--ease-out);
}
.account-details[open] .account-details__summary::after { rotate: -135deg; }

.account-details__note {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

.account-details__body {
  padding: 0 var(--space-5) var(--space-5);
  border-block-start: var(--border-hair) solid var(--color-line);
  padding-block-start: var(--space-5);
}

/* ⚠ WooCommerce קובע רוחב באחוזים דרך `.woocommerce form .form-row-first`
   — סלקטור בן שלושה מחלקות שגובר על זה שלמעלה. נמדד: השדות נשארו
   227px בתוך תא רשת של 484. הסלקטור כאן מכוון בעוצמה תואמת. */
.woocommerce form .account-form__grid > .form-row,
.woocommerce form .woocommerce-address-fields__field-wrapper > .form-row,
.woocommerce form .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce form .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-page form .account-form__grid > .form-row,
.woocommerce-page form .woocommerce-address-fields__field-wrapper > .form-row,
.woocommerce-page form .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-page form .woocommerce-shipping-fields__field-wrapper > .form-row {
  width: auto;
  float: none;
  margin-inline: 0;
}