/*
Theme Name: Magshimim
Theme URI: https://magshimim.co.il
Author: Magshimim
Author URI: https://magshimim.co.il
Description: תבנית וורדפרס מותאמת אישית לאתר "מגשימים" — קייטרינג ומגשי אירוח. מבוססת במדויק על העיצוב הסטטי הקיים של האתר (index.html / menu.html / orders.html / thank-you.html / styles.css / cart.js), ללא שינוי בשמות ה-class וה-id הקיימים.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magshimim
*/

/* ===================================================================
   כל הכללים שלהלן הועתקו במדויק מ-styles.css של הגרסה הסטטית של האתר.
   שום class name או id לא שונה, כדי שה-HTML שפוצל ל-header.php/footer.php/
   front-page.php ימשיך לעבוד מול אותו CSS בדיוק בלי שינוי.
   =================================================================== */

:root{
    --bg: #FFFFFF;
    --bg-soft: #FBF7F2;
    --brown: #663333;
    --brown-deep: #4A2424;
    --brown-soft: #A97C6E;
    --ink: #2E1E1E;
    --ink-dim: #7A6560;
    --line: rgba(102,51,51,0.16);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Assistant', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Heebo', sans-serif; /* was 'Assistant' (and 'Frank Ruhl Libre' before that) */
    font-weight:700; /* Heebo now loaded up to 900 (functions.php) — 700=Bold requested; 800/900 also available to test if wanted */
    letter-spacing:0.03em; /* יחסי לגודל הפונט (em, לא px) — נשאר מאוזן גם בבאנר הגדול וגם בכותרות הפוטר הקטנות. אין צורך לחזור על זה ב-.menu-hero-text h2/.footer-col h3/.thank-you-section h1 — אף אחד מהם לא דורס letter-spacing, אז זה כבר חל עליהם דרך הכלל הזה */
    color:var(--brown-deep);
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 28px;}

  /* ===== NAV ===== */
  nav{
    position:sticky; top:0; z-index:210; /* היה 50 — הועלה מעל .loading-overlay (200) כדי שההדר יישאר גלוי מעליו בזמן מסך הטעינה, בלי תלות בגובה ההדר (עמיד יותר משינוי top על ה-overlay) */
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  /* מבנה הנאב: 3 עמודות Grid (קישורים | לוגו | אייקונים) שמחליף לגמרי
     את כל הטלאים הידניים (margin/padding מכל מיני כיוונים) מהסבבים
     הקודמים. justify-content:space-between כבר לא נחוץ: כל עמודה
     "יודעת" את מקומה דרך grid-template-columns, ו-1fr משני הצדדים
     דוחף כל אשכול קצה עד לקצה הפיזי האמיתי של ה-nav (לא של קונטיינר
     .wrap ממורכז). padding:0 24px הוא רק ריפוד-נשימה קטן ואחיד
     מהקצוות עצמם — אם באמת רוצים 0 מוחלט, קל לאפס גם אותו. */
  .nav-grid{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    height:116px !important; /* was 102px — grown to fit the 105px logo, within the requested 115-118px range */
    padding:0 24px 0 50px !important;
  }
  .logo{font-family:'Frank Ruhl Libre',serif; font-size:21px; font-weight:700; color:var(--brown-deep); letter-spacing:0.5px;}

  /* עמודת הלוגו (אמצע) */
  .nav-logo{display:flex; justify-content:center; align-items:center; height:105px; overflow:hidden;} /* height was 90px — kept in sync with .nav-logo-img below, since overflow:hidden here would otherwise clip the enlarged logo */
  .nav-logo-img{height:105px !important; width:auto !important; display:block !important;} /* was 90px */

  .nav-links{font-size:16px; font-weight:600;} /* font-size היה 14px. display:flex/gap הוסרו מכאן — הדיב הזה עוטף תמיד <ul> יחיד (מ-wp_nav_menu), אז ה-gap האמיתי חי על .nav-links ul למטה, לא כאן */
  .nav-links a{color:var(--ink-dim); transition:color .2s;}
  .nav-links a:hover{color:var(--brown);}

  /* wp_nav_menu() עוטף את הקישורים ב-<ul id="primary-menu" class="menu"><li>,
     בעוד שב-HTML הסטטי המקורי הם היו קישורי <a> שטוחים ישירות בתוך .nav-links.
     האיפוס הבא מנטרל את עיצוב ברירת המחדל של הדפדפן לרשימות (bullets,
     סידור אנכי) ומחזיר את אותה שורה אופקית — בלי לגעת ב-.nav-links a עצמו,
     שכבר מקבל את כל העיצוב הדרוש (צבע/hover/גודל/משקל). */
  .nav-links ul{
    list-style:none;
    display:flex;
    gap:40px; /* היה 32px. הערה: זה תמיד היה ה-gap הנראה בפועל בין הקישורים — .nav-links{gap:40px} מסבבים קודמים היה קוד מת, כי לדיב הזה תמיד יש ילד יחיד (ה-ul), אז ה-gap שלו מעולם לא היה נראה */
    margin:0;
    padding:0;
    align-items:center;
  }
  .nav-links li{margin:0; padding:0;}

  /* ===== NAV ICONS (social + orders) — plain icons, no circle background ===== */
  .nav-icons{display:flex; align-items:center; justify-content:flex-end; gap:18px;} /* justify-content:flex-end (חדש, במקום margin-left) דוחף את כל האשכול לקצה הרחוק (השמאלי) של עמודתו-שלו ב-grid */
  /* עוטף את 3 אייקוני הרשתות החברתיות — נדרש כדי שיהיה אפשר להסתיר את
     כולם יחד מתחת ל-680px (הם עוברים למגירת המובייל במקום). בדסקטופ,
     חוזר בדיוק על אותו flex+gap שהיה קודם ישירות על .nav-icons */
  .nav-social-icons{display:flex; align-items:center; gap:18px;}
  .nav-social-btn, .nav-cart-btn{
    display:flex; align-items:center; justify-content:center;
    transition:opacity .2s, transform .2s;
    flex-shrink:0;
    position:relative;
  }
  .nav-social-btn:hover, .nav-cart-btn:hover{opacity:0.75; transform:translateY(-2px);}
  .nav-social-btn svg{width:27px; height:27px; fill:var(--brown);} /* was 36px (and 22px before that) — matched to .nav-cart-btn svg's 27px so all nav icons read as one consistent set */
  .nav-cart-btn svg{width:27px; height:27px; fill:var(--brown);} /* was 28px — nudged down a notch so it reads clearly smaller than the 36px social icons, per the requested 26-28px range */

  /* תג מספרי על אייקון העגלה בניווט — מוצג רק כשיש פריטים בעגלה */
  .cart-count{
    position:absolute;
    top:-6px;
    inset-inline-end:-8px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:var(--brown);
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:16px;
    text-align:center;
    display:none;
  }
  .cart-count.show{display:block;}

  .nav-orders-link{
    display:flex;
    align-items:center;
    gap:8px;
    transition:opacity .2s;
  }
  .nav-orders-link:hover{opacity:0.75;}
  .nav-orders-link .nav-cart-btn{pointer-events:none;}
  .nav-orders-label{
    font-size:14px;
    font-weight:600;
    color:var(--brown-deep);
    white-space:nowrap;
  }
  @media (max-width:680px){ /* was 480px — מאוחד עם ה-breakpoint הרגיל של "מובייל" בכל שאר האתר, כדי שהתוויות ("ההזמנות שלי"/"החשבון שלי") ייעלמו באותו רוחב שבו כל שאר ההדר עובר לפריסת מובייל, לא בנקודה נפרדת */
    .nav-orders-label{display:none;}
  }

  /* ===== CART HOVER DROPDOWN (nav) ===== */
  .cart-widget{
    position:relative;
  }
  /* הפרדה מוגדלת בין אשכול אייקוני הרשתות החברתיות לבין אשכול
     "החשבון שלי" + העגלה, כדי ששני אלה יישארו קבוצה חזותית אחת.
     שני selectors כי רק אחד מהם בפועל הוא ה-flex child הישיר של .nav-icons
     בכל רגע נתון: .nav-account-link כשהמשתמש לא מחובר (קישור בודד),
     .account-widget כשכן מחובר (עטוף בחלונית ה-hover) */
  .nav-account-link,
  .account-widget{
    margin-right:22px;
  }
  .account-widget{position:relative;}
  /* גשר בלתי-נראה, אותו רעיון כמו ב-.cart-widget */
  .account-widget::after{
    content:"";
    position:absolute;
    top:100%; left:0; right:0;
    height:16px;
  }
  .account-dropdown{
    position:absolute;
    top:calc(100% + 16px);
    left:50%;
    width:200px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 16px 40px rgba(102,51,51,0.18);
    padding:10px;
    text-align:right;
    display:flex;
    flex-direction:column;
    gap:4px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(-50%) translateY(-6px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:60;
  }
  .account-widget:hover .account-dropdown,
  .account-widget:focus-within .account-dropdown,
  .account-dropdown:hover{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .account-dropdown-link{
    display:block;
    padding:10px 12px;
    border-radius:6px;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    transition:background .2s, color .2s;
  }
  .account-dropdown-link:hover{
    background:var(--bg-soft);
    color:var(--brown);
  }
  /* גשר בלתי-נראה בין האייקון לחלונית, כדי שה-hover לא "יינתק" כשהעכבר עובר את הרווח ביניהם */
  .cart-widget::after{
    content:"";
    position:absolute;
    top:100%; left:0; right:0;
    height:16px;
  }
  .cart-dropdown{
    position:absolute;
    top:calc(100% + 16px);
    left:0; /* was left:50% + translateX(-50%) (centered on .cart-widget). .cart-widget sits flush at the true left edge, so a centered 340px-wide panel always had its left half pushed off-screen. Anchoring to the widget's own left edge instead means the panel only ever grows rightward/inward — never past the true edge, regardless of viewport width */
    width:340px;
    max-width:90vw;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 16px 40px rgba(102,51,51,0.18);
    padding:20px;
    text-align:right;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px); /* translateX(-50%) removed along with the centering */
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:60;
  }
  .cart-widget:hover .cart-dropdown,
  .cart-widget:focus-within .cart-dropdown,
  .cart-widget.is-open .cart-dropdown, /* מובייל: נפתח ע"י JS בלחיצה על האייקון (אין hover במגע) — ראו footer.php */
  .cart-dropdown:hover{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .cart-dropdown-empty{
    text-align:center;
    color:var(--ink-dim);
    font-size:14px;
    padding:20px 0;
  }
  .cart-dropdown-items{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:280px;
    overflow-y:auto;
    margin-bottom:14px;
  }
  .cart-dropdown-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:14px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .cart-dropdown-item:last-child{border-bottom:none; padding-bottom:0;}
  .cdi-name{font-weight:600; color:var(--brown-deep);}
  .cdi-meta{font-size:12px; color:var(--ink-dim); margin-top:2px;}
  .cdi-price{font-weight:700; color:var(--brown); white-space:nowrap;}
  .cart-dropdown-total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:700;
    font-size:16px;
    color:var(--brown-deep);
    padding-top:14px;
    border-top:1px solid var(--line);
    margin-bottom:16px;
  }
  .cart-dropdown-actions{display:flex; gap:10px;}
  .cart-dropdown-actions button{
    flex:1;
    padding:10px;
    border-radius:6px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s, opacity .2s;
  }
  .cart-clear-btn{
    background:#fff;
    border:1px solid var(--brown);
    color:var(--brown);
  }
  .cart-clear-btn:hover{background:var(--bg-soft);}
  .cart-checkout-btn{
    background:var(--brown);
    border:none;
    color:#fff;
  }
  .cart-checkout-btn:hover{background:var(--brown-deep);}

  /* ===== CART PAGE (orders.html — full cart list) ===== */
  .cart-page-list{display:flex; flex-direction:column; gap:16px; margin-bottom:24px;}
  .cart-page-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
  }
  .cpi-info{flex:1; min-width:0;}
  .cpi-name{font-weight:600; color:var(--brown-deep); margin-bottom:4px;}
  .cpi-unit{font-size:13px; color:var(--ink-dim);}
  .cpi-qty{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .cpi-qty button{
    width:28px; height:28px;
    border-radius:6px;
    border:1px solid var(--line);
    background:#fff;
    font-size:16px;
    font-weight:700;
    color:var(--brown);
    cursor:pointer;
    transition:background .2s;
  }
  .cpi-qty button:hover{background:var(--bg-soft);}
  .cpi-qty span{min-width:20px; text-align:center; font-weight:600;}
  .cpi-price{font-weight:700; color:var(--brown); min-width:70px; text-align:left; flex-shrink:0;}
  .cpi-remove{
    background:none;
    border:none;
    color:var(--ink-dim);
    font-size:16px;
    cursor:pointer;
    padding:4px 8px;
    transition:color .2s;
  }
  .cpi-remove:hover{color:var(--brown-deep);}
  .cart-page-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    font-weight:700;
    color:var(--brown-deep);
    padding-top:16px;
    border-top:1px solid var(--line);
  }

  .nav-menu-trigger{
    font-weight:700;
    font-size:15px;
    color:var(--brown-deep);
    margin-right:6px;
    padding-bottom:2px;
    border-bottom:1.5px solid transparent;
    transition:border-color .2s, color .2s;
  }
  .nav-menu-trigger:hover{border-color:var(--brown); color:var(--brown);}

  /* כפתור המבורגר — קיים תמיד ב-DOM, מוצג רק מתחת ל-680px (ראה מדיה
     query למטה). 3 קווים אופקיים שהופכים ל-X כש-is-open מתווסף ע"י JS */
  .nav-mobile-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
  }
  .nav-mobile-toggle span{
    display:block;
    width:100%;
    height:2.5px;
    background:var(--brown-deep);
    border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-mobile-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-mobile-toggle.is-open span:nth-child(2){opacity:0;}
  .nav-mobile-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  /* מגירת ניווט למובייל — נפתחת למטה מתחת להדר, עם overlay כהה מאחוריה.
     z-index 220/221: מעל nav (210) ומעל .loading-overlay (200), מתחת
     ל-.shabbat-modal-overlay (300) שאמור לכסות הכל תמיד. */
  .mobile-nav-overlay{
    display:none;
  }
  .mobile-nav-drawer{
    display:none;
  }

  @media (max-width:680px){
    /* לא מסתירים יותר את כל .nav-links (זה היה מסתיר גם את כפתור
       ההמבורגר יחד עם הקישורים) — רק את ה-<ul> של wp_nav_menu */
    .nav-links ul{display:none;}
    .nav-mobile-toggle{display:flex;}

    .mobile-nav-overlay{
      display:block;
      position:fixed; inset:0;
      background:rgba(46,30,30,0.5);
      z-index:220;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .25s ease, visibility .25s ease;
    }
    .mobile-nav-overlay.is-open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    .mobile-nav-drawer{
      display:block;
      position:fixed;
      top:70px; /* היה 116px — תואם לגובה .nav-grid החדש במובייל (ראה למטה). אם זה משתנה שוב בעתיד, לעדכן גם כאן */
      right:0; left:0;
      z-index:221;
      background:#fff;
      max-height:calc(100vh - 70px); /* היה 116px */
      overflow-y:auto;
      box-shadow:0 12px 30px rgba(0,0,0,0.18);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateY(-12px);
      transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    }
    .mobile-nav-drawer.is-open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateY(0);
    }
    .mobile-nav-drawer ul{
      list-style:none;
    }
    .mobile-nav-drawer li{
      border-bottom:1px solid var(--line);
    }
    .mobile-nav-drawer li:last-child{border-bottom:none;}
    .mobile-nav-drawer a{
      display:block;
      padding:18px 24px; /* ריפוד נדיב, נוח למגע */
      font-size:17px;
      font-weight:600;
      color:var(--ink);
    }
    .mobile-nav-drawer a:hover,
    .mobile-nav-drawer a:active{
      background:var(--bg-soft);
      color:var(--brown);
    }
    /* שורת אייקוני הרשתות החברתיות בתחתית המגירה (הועברו לכאן מהשורה
       העליונה של ההדר, שם הם היו תופסים מקום יקר במסך צר) */
    .mobile-nav-social{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:28px;
      padding:20px 24px;
      border-top:1px solid var(--line);
    }
    .mobile-nav-social .nav-social-btn svg{width:24px; height:24px;}

    /* הלוגו במובייל: היה 105px — כ-48% מהגודל המקורי, כדי שיפנה מקום
       לשאר אלמנטי ההדר (עגלה/משתמש/המבורגר) בלי שהכל יידחס לשורה אחת
       צפופה. .nav-logo מעודכן יחד עם .nav-logo-img (overflow:hidden
       חותך לפי הגובה של .nav-logo, אז שניהם חייבים להישאר מסונכרנים —
       בדיוק כמו שקרה בטעות בסבב קודם כשעדכנו רק אחד מהם) */
    .nav-logo{height:50px !important;}
    .nav-logo-img{height:50px !important;}

    /* הגובה הכולל של ההדר מצטמצם בהתאם ללוגו הקטן יותר (היה 116px —
       מותאם ללוגו של 105px). ה-gap החדש נותן ריווח אמיתי בין 3 העמודות
       (המבורגר | לוגו | עגלה+משתמש) — לפני זה ה-1fr/auto/1fr של ה-grid
       היה אמור לספק את זה לבד, אבל בלי gap מפורש זה היה תלוי לגמרי
       ברוחב שנשאר, שבמסך צר כמעט ולא הותיר מרווח בפועל. */
    .nav-grid{
      height:70px !important; /* היה 116px */
      padding:0 14px !important; /* היה 0 24px 0 50px — ה-50px השמאלי היה מיועד למסכים רחבים בלבד */
      gap:10px !important;
    }
    /* אייקוני הרשתות החברתיות עוברים למגירה במקום — לא מוצגים בשורה העליונה */
    .nav-social-icons{display:none;}
    .nav-icons{
      gap:14px; /* היה 18px, אח"כ 10px — הועלה מעט כי נשארו כאן רק 2 אלמנטים (משתמש+עגלה), יש להם עכשיו יותר מקום */
    }
    .nav-account-link,
    .account-widget{
      margin-right:12px; /* היה 22px, אח"כ 10px */
    }
  }

  /* ===== NAV OVERLAY VARIANT — sits transparently on top of the fading
     photo banner on the homepage, instead of a separate white bar ===== */
  .nav-overlay{
    background:transparent !important;
    backdrop-filter:none !important;
    border-bottom:none !important;
    margin-bottom:-116px !important; /* was -102px — kept in sync with .nav-grid's new 116px height */
  }
  .nav-overlay .nav-links a,
  .nav-overlay .nav-orders-label{
    color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,0.45);
  }
  .nav-overlay .nav-links a:hover{color:#f3ece4;}
  .nav-overlay .nav-social-btn svg,
  .nav-overlay .nav-cart-btn svg{
    fill:#fff;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,0.45));
  }

  /* ===== MENU HERO — full-bleed fading gallery, edge to edge ===== */
  .menu-hero{
    position:relative;
    width:100%;
    overflow:hidden;
    aspect-ratio:2.6/1;
    min-height:280px;
  }
  .menu-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1.4s ease;
  }
  .menu-hero img.active{opacity:1;}
  .menu-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(74,36,36,0.12) 0%, rgba(45,22,22,0.58) 100%);
    z-index:2;
  }
  .menu-hero-text{
    position:absolute; inset:0;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    gap:14px;
  }
  .menu-hero-text h2{
    font-family:'Heebo', sans-serif; /* was 'Assistant' (and 'Frank Ruhl Libre' before that) */
    font-size:clamp(30px,5.4vw,58px);
    color:#fff;
    font-weight:700; /* higher specificity than the base h1,h2,h3 rule, so it needs updating separately to stay consistent */
    text-shadow:0 2px 16px rgba(0,0,0,0.45);
  }
  .menu-hero-text p{
    font-size:clamp(15px,2.4vw,20px);
    color:#f3ece4;
    max-width:600px;
    font-weight:400;
    text-shadow:0 1px 10px rgba(0,0,0,0.4);
  }
  .menu-hero-btn{
    margin-top:8px;
    display:inline-block;
    background:#fff;
    color:var(--brown-deep);
    padding:13px 34px;
    border-radius:2px;
    font-weight:700;
    font-size:15px;
    transition:transform .2s, background .2s;
  }
  .menu-hero-btn:hover{transform:translateY(-2px); background:var(--bg-soft);}
  @media (prefers-reduced-motion: reduce){
    .menu-hero img{transition:none;}
  }

  /* ===== REVIEWS ===== */
  .reviews{padding:96px 0;}
  .reviews-head{text-align:center; margin-bottom:56px;}
  .reviews-head .eyebrow{
    font-family:'Heebo', sans-serif;
    font-size:13px;
    letter-spacing:3px;
    color:var(--brown);
    text-transform:uppercase;
    margin-bottom:14px;
    display:inline-block;
  }
  .reviews-head h2{font-size:clamp(28px,4vw,38px);}

  .reviews-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
    gap:24px;
  }
  .review-card{
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:6px;
    padding:28px 24px;
  }
  .review-card .stars{color:var(--brown); font-size:16px; letter-spacing:2px; margin-bottom:14px;}
  .review-card .quote{font-size:15px; color:var(--ink); line-height:1.7; margin-bottom:18px; font-style:italic;}
  .review-card .reviewer{font-weight:700; color:var(--brown-deep); font-size:14px;}

  /* ===== LOADING OVERLAY ===== */
  .loading-overlay{
    position:fixed; inset:0;
    background:#fff;
    z-index:200;
    display:flex;
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:22px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .loading-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .loading-spinner.icon-cycle{
    position:relative;
    width:64px;
    height:64px;
  }
  .cycle-icon{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px; /* עדיין רלוונטי לאייקון 4 (הבייגלה, אימוג'י טקסט) */
    line-height:1;
    opacity:0;
  }
  /* עטיפה אחידה לשלושת האייקונים ה-SVG (1-3): כל אחד עם ה-viewBox
     המקורי שלו, בגודל אחיד 100%/100% מתוך תיבה עם 15% ריפוד מכל צד */
  .cycle-icon-svg{
    padding:15%;
    box-sizing:border-box;
  }
  .cycle-icon-svg svg{
    display:block;
    width:100%;
    height:100%;
  }
  /* דורס את ה-fill המקורי (#000000/#808184) שכתוב על ה-path-ים/ה-svg
     עצמם — CSS מנצח presentation attributes תמיד, גם בלי !important */
  .cycle-icon-svg svg,
  .cycle-icon-svg svg path,
  .cycle-icon-svg svg g{
    fill:var(--brown-deep);
  }

  /* לולאה של 4s (הייתה 2s — הוארכה פי 2), 6 אייקונים (הבייגלה הוסרה)
     ⟶ 100/6≈16.67% לכל אחד (היה 14.29% ל-7). אותו מעבר slide+fade+
     ease-in-out, אותו כיוון עקבי (נכנס מימין, יוצא שמאלה). כל אייקון:
     parked (מחוץ למסגרת, שקוף) → נכנס → נראה → יוצא → reset שקוף בחזרה
     למיקום ההתחלה, מוכן לסיבוב הבא. animation-delay נקבע דינמית ב-JS
     (footer.php) בכל הצגה של המסך. */
  .cycle-icon-1{animation:cycleIcon1 4s ease-in-out infinite;}
  .cycle-icon-2{animation:cycleIcon2 4s ease-in-out infinite;}
  .cycle-icon-3{animation:cycleIcon3 4s ease-in-out infinite;}
  .cycle-icon-4{animation:cycleIcon4 4s ease-in-out infinite;}
  .cycle-icon-5{animation:cycleIcon5 4s ease-in-out infinite;}
  .cycle-icon-6{animation:cycleIcon6 4s ease-in-out infinite;}
  @keyframes cycleIcon1{
    0%      { opacity:0; transform:translateX(12px); }
    2%      { opacity:0; transform:translateX(12px); }
    7%      { opacity:1; transform:translateX(0); }
    10%     { opacity:1; transform:translateX(0); }
    15%     { opacity:0; transform:translateX(-12px); }
    15.2%   { opacity:0; transform:translateX(12px); }
    100%    { opacity:0; transform:translateX(12px); }
  }
  @keyframes cycleIcon2{
    0%, 16.67%  { opacity:0; transform:translateX(12px); }
    18.67%      { opacity:0; transform:translateX(12px); }
    23.67%      { opacity:1; transform:translateX(0); }
    26.67%      { opacity:1; transform:translateX(0); }
    31.67%      { opacity:0; transform:translateX(-12px); }
    31.87%      { opacity:0; transform:translateX(12px); }
    100%        { opacity:0; transform:translateX(12px); }
  }
  @keyframes cycleIcon3{
    0%, 33.33%  { opacity:0; transform:translateX(12px); }
    35.33%      { opacity:0; transform:translateX(12px); }
    40.33%      { opacity:1; transform:translateX(0); }
    43.33%      { opacity:1; transform:translateX(0); }
    48.33%      { opacity:0; transform:translateX(-12px); }
    48.53%      { opacity:0; transform:translateX(12px); }
    100%        { opacity:0; transform:translateX(12px); }
  }
  @keyframes cycleIcon4{
    0%, 50%     { opacity:0; transform:translateX(12px); }
    52%         { opacity:0; transform:translateX(12px); }
    57%         { opacity:1; transform:translateX(0); }
    60%         { opacity:1; transform:translateX(0); }
    65%         { opacity:0; transform:translateX(-12px); }
    65.2%       { opacity:0; transform:translateX(12px); }
    100%        { opacity:0; transform:translateX(12px); }
  }
  @keyframes cycleIcon5{
    0%, 66.67%  { opacity:0; transform:translateX(12px); }
    68.67%      { opacity:0; transform:translateX(12px); }
    73.67%      { opacity:1; transform:translateX(0); }
    76.67%      { opacity:1; transform:translateX(0); }
    81.67%      { opacity:0; transform:translateX(-12px); }
    81.87%      { opacity:0; transform:translateX(12px); }
    100%        { opacity:0; transform:translateX(12px); }
  }
  @keyframes cycleIcon6{
    0%, 83.33%  { opacity:0; transform:translateX(12px); }
    85.33%      { opacity:0; transform:translateX(12px); }
    90.33%      { opacity:1; transform:translateX(0); }
    93.33%      { opacity:1; transform:translateX(0); }
    98.33%      { opacity:0; transform:translateX(-12px); }
    100%        { opacity:0; transform:translateX(12px); }
  }
  .loading-logo{
    width:150px; /* בטווח 140-160px שביקשת */
    height:auto;
    display:block;
  }
  /* prefers-reduced-motion: המשתמש עדיין רואה את כל 6 האייקונים מתחלפים
     (אותו תזמון/duration 4s בדיוק כמו הגרסה הרגילה — .cycle-icon-N{animation:...}
     שהוגדר למעלה נשאר תקף בלי שינוי) — רק בלי תנועת ה-slide האופקית.
     @keyframes עם אותו שם שמוגדר בתוך media query גובר על הגרסה הרגילה
     כשהתנאי מתקיים, בלי לגעת בכלל בהגדרות ה-animation עצמן. */
  @media (prefers-reduced-motion: reduce){
    @keyframes cycleIcon1{
      0%      { opacity:0; }
      2%      { opacity:0; }
      7%      { opacity:1; }
      10%     { opacity:1; }
      15%     { opacity:0; }
      100%    { opacity:0; }
    }
    @keyframes cycleIcon2{
      0%, 16.67%  { opacity:0; }
      18.67%      { opacity:0; }
      23.67%      { opacity:1; }
      26.67%      { opacity:1; }
      31.67%      { opacity:0; }
      100%        { opacity:0; }
    }
    @keyframes cycleIcon3{
      0%, 33.33%  { opacity:0; }
      35.33%      { opacity:0; }
      40.33%      { opacity:1; }
      43.33%      { opacity:1; }
      48.33%      { opacity:0; }
      100%        { opacity:0; }
    }
    @keyframes cycleIcon4{
      0%, 50%     { opacity:0; }
      52%         { opacity:0; }
      57%         { opacity:1; }
      60%         { opacity:1; }
      65%         { opacity:0; }
      100%        { opacity:0; }
    }
    @keyframes cycleIcon5{
      0%, 66.67%  { opacity:0; }
      68.67%      { opacity:0; }
      73.67%      { opacity:1; }
      76.67%      { opacity:1; }
      81.67%      { opacity:0; }
      100%        { opacity:0; }
    }
    @keyframes cycleIcon6{
      0%, 83.33%  { opacity:0; }
      85.33%      { opacity:0; }
      90.33%      { opacity:1; }
      93.33%      { opacity:1; }
      98.33%      { opacity:0; }
      100%        { opacity:0; }
    }
  }

  /* ===== HERO BANNER ===== */
  .hero-banner{
    width:100%;
    display:block;
    line-height:0;
    overflow:hidden;
  }
  .hero-banner img{
    width:100%;
    height:auto;
    display:block;
  }

  /* On narrow screens the banner is very wide/short in its original
     proportions, so at full-width it shrinks the logo too much to read.
     Instead we fix a comfortable height and use object-fit:cover with
     object-position tuned to the logo's actual spot in the artwork,
     so the logo stays large and centered on phones. */
  @media (max-width:768px){
    .hero-banner{
      height:clamp(120px, 34vw, 190px);
    }
    .hero-banner img{
      height:100%;
      width:100%;
      object-fit:cover;
      object-position:45% center;
    }
  }
  .btn{
    padding:14px 32px;
    border-radius:2px;
    font-size:15px;
    font-weight:600;
    transition:transform .2s, background .2s, color .2s, border-color .2s;
    display:inline-block;
  }
  .btn-primary{background:var(--brown); color:#fff;}
  .btn-primary:hover{transform:translateY(-2px); background:var(--brown-deep);}
  .btn-outline{border:1px solid var(--brown-soft); color:var(--brown-deep);}
  .btn-outline:hover{border-color:var(--brown); background:var(--bg-soft);}

  /* ===== MENU PAGE HEADER (menu.html) ===== */
  .page-header{padding:56px 0 24px; text-align:center; border-bottom:1px solid var(--line); background:var(--bg-soft);}
  .page-header .back-home{
    display:inline-block;
    margin-bottom:28px;
    font-size:14px;
    font-weight:600;
    color:var(--brown);
  }
  .page-header .back-home:hover{text-decoration:underline;}
  .page-header .eyebrow{
    font-family:'Heebo', sans-serif;
    font-size:13px;
    letter-spacing:3px;
    color:var(--brown);
    text-transform:uppercase;
    margin-bottom:14px;
    display:block;
  }
  .page-header h1{font-size:clamp(30px,4.5vw,44px);}
  .page-header p{color:var(--ink-dim); margin-top:12px; font-size:16px;}

  /* ===== CATEGORY PILLS WITH ICONS (menu.html) — original icon set ===== */
  .cat-pills{
    position:sticky !important; top:116px !important; z-index:40 !important; /* top was 102px — kept in sync with .nav-grid's new 116px height */
    background:#fff !important;
    border-bottom:1px solid var(--line) !important;
    padding:20px 0 !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  .cat-pills::-webkit-scrollbar{display:none;}
  .cat-pills-row{
    display:flex;
    gap:24px;
    justify-content:space-between;
    width:100%;
    min-width:max-content;
    padding:0 8px;
  }
  .cat-pill-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    cursor:pointer;
    flex-shrink:0;
    padding-bottom:9px;
    border-bottom:2px solid transparent;
    transition:border-color .2s;
  }
  .cat-pill-item svg{
    width:42px; height:42px;
    fill:none;
    stroke:var(--brown);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .2s;
  }
  .cat-pill-item span{
    font-size:13px;
    font-weight:600;
    color:var(--ink-dim);
    white-space:nowrap;
    transition:color .2s;
  }
  .cat-pill-item:hover span{color:var(--brown);}
  .cat-pill-item:hover svg{stroke:var(--brown-deep);}
  .cat-pill-item.active{border-color:var(--brown);}
  .cat-pill-item.active span{color:var(--brown-deep); font-weight:700;}
  .cat-pill-item.active svg{stroke:var(--brown-deep);}

  /* ===== PRODUCT CATALOG ===== */
  .catalog-section{padding:72px 0 20px;}
  .catalog-section h2{font-size:clamp(24px,3.2vw,32px); margin-bottom:6px;}
  .catalog-section .cat-note{color:var(--ink-dim); font-size:14px; margin-bottom:36px;}

  .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:24px;
    margin-bottom:24px;
  }
  .product-card{
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    background:#fff;
    transition:transform .2s, box-shadow .2s;
  }
  .product-card:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(102,51,51,0.1);}
  .product-thumb{
    height:150px;
    background:var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
    color:var(--brown-soft);
    font-size:12px;
    text-align:center;
    padding:10px;
    border-bottom:1px solid var(--line);
  }
  .product-info{padding:16px;}
  .product-info .pname{font-weight:600; font-size:16px; margin-bottom:4px; color:var(--brown-deep);}
  .product-info .punit{font-size:13px; color:var(--ink-dim); margin-bottom:10px;}
  .product-info .prow{display:flex; align-items:center; justify-content:space-between;}
  .product-info .pprice{font-weight:700; color:var(--brown); font-size:15px;}
  .order-btn{
    padding:8px 16px;
    background:var(--brown);
    color:#fff;
    border-radius:3px;
    font-size:13px;
    font-weight:600;
    transition:background .2s;
  }
  .order-btn:hover{background:var(--brown-deep);}
  .order-btn.added{background:var(--brown-deep); cursor:default;}

  .placeholder-flag{
    display:inline-block;
    margin-top:2px;
    font-size:11px;
    color:#a15c3f;
    background:#fbeee6;
    padding:2px 8px;
    border-radius:3px;
  }

  /* ===== FLOATING WHATSAPP =====
     bottom:90px (במקום 20px) — מרים את הכפתור מעל אייקון "הסכמת עוגיות"
     שמוצג בפינה השמאלית-תחתונה ע"י תוסף/פלאגין וורדפרס (לא חלק מה-theme
     הזה בכלל — לא נמצא אצלנו שום קוד cookie-consent, ראו את הדיווח שנשלח
     למשתמש). אין כאן media query נפרד למובייל כי מעולם לא היה כזה —
     הערך הזה חל זהה בדסקטופ ובמובייל, בדיוק כמו שהיה עד עכשיו. */
  .float-whatsapp{
    position:fixed;
    left:20px; bottom:90px;
    z-index:60;
    width:56px; height:56px;
    border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.22);
    transition:transform .2s;
  }
  .float-whatsapp:hover{transform:scale(1.08);}
  .float-whatsapp svg{width:28px; height:28px; fill:#fff;}

  /* ===== ABOUT ===== */
  .about{padding:96px 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .about .wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .about h2{font-size:clamp(26px,3.6vw,36px); margin-bottom:22px;}
  .about p{color:var(--ink-dim); font-size:16px; margin-bottom:16px;}
  .about-mark{
    font-family:'Frank Ruhl Libre', serif;
    font-size:120px;
    color:var(--brown);
    opacity:0.14;
    line-height:1;
    text-align:center;
  }
  @media (max-width:760px){ .about .wrap{grid-template-columns:1fr;} .about-mark{display:none;} }

  /* ===== CONTACT ===== */
  .contact{padding:96px 0 60px; text-align:center;}
  .contact h2{font-size:clamp(28px,4vw,40px); margin-bottom:16px;}
  .contact p.lead{color:var(--ink-dim); margin-bottom:44px; font-size:16px;}

  .contact-grid{
    display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:52px;
  }
  .contact-item{
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:4px;
    padding:24px 28px;
    min-width:210px;
    text-align:center;
    transition:border-color .2s, transform .2s;
  }
  .contact-item:hover{border-color:var(--brown-soft); transform:translateY(-3px);}
  .contact-item .label{font-size:12px; letter-spacing:1.5px; color:var(--brown); text-transform:uppercase; margin-bottom:8px; font-family:'Heebo',sans-serif;}
  .contact-item .value{font-size:17px; font-weight:600; color:var(--brown-deep);}

  .socials{display:flex; justify-content:center; gap:22px;} /* was 18px — widened slightly to match the bigger buttons below */
  .social-btn{
    width:60px; height:60px; /* was 48px — grown along with the icon so the circle still has comfortable padding around it */
    background:var(--brown);
    border:2px solid #fff;
    box-shadow:0 0 0 1px var(--line);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s, transform .2s, box-shadow .2s;
  }
  .social-btn:hover{background:var(--brown-deep); transform:translateY(-3px);}
  .social-btn svg{width:36px; height:36px; fill:#fff;} /* was 20px */

  /* ===== SITE FOOTER (expanded) ===== */
  .site-footer{background:var(--brown-deep); color:#f3ece4; padding:64px 0 0; margin-top:0;}
  .footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1.3fr;
    gap:40px;
    padding-bottom:48px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-col h3{
    color:#fff;
    font-family:'Heebo', sans-serif; /* was 'Assistant' (and 'Frank Ruhl Libre' before that) — real h3, would stay stuck on the old font otherwise (higher specificity than the base h1,h2,h3 rule) */
    font-weight:700;
    font-size:18px;
    margin-bottom:18px;
  }
  .footer-col a{
    display:block;
    color:#d9c9c0;
    font-size:14px;
    margin-bottom:12px;
    transition:color .2s;
  }
  .footer-col a:hover{color:#fff;}
  .footer-contact-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:#d9c9c0;
    font-size:14px;
    margin-bottom:12px;
    transition:color .2s;
  }
  .footer-contact-item:hover{color:#fff;}
  .footer-contact-item svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; flex-shrink:0;}
  .footer-form-note{font-size:13px; color:#d9c9c0; margin-bottom:14px;}
  .footer-form{display:flex; flex-direction:column; gap:10px;}
  .footer-form input, .footer-form textarea{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:3px;
    padding:10px 12px;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    resize:none;
  }
  .footer-form input::placeholder, .footer-form textarea::placeholder{color:rgba(255,255,255,0.5);}
  .footer-form-btn{
    background:#fff;
    color:var(--brown-deep);
    border:none;
    padding:11px 20px;
    border-radius:3px;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:background .2s;
  }
  .footer-form-btn:hover{background:var(--bg-soft);}
  .footer-form-status{font-size:13px; margin-top:4px; min-height:16px;}
  .footer-bottom{text-align:center; padding:24px 0; font-size:13px; color:#d9c9c0;}
  .footer-bottom .fname{color:#fff; font-family:'Frank Ruhl Libre',serif;}
  @media (max-width:760px){
    .footer-grid{grid-template-columns:1fr; gap:32px; text-align:center;}
  }

  footer{
    padding:36px 0; text-align:center;
    color:var(--ink-dim); font-size:13px;
    border-top:1px solid var(--line);
  }
  footer .fname{color:var(--brown); font-family:'Frank Ruhl Libre',serif;}

  /* ===== THANK YOU PAGE ===== */
  .thank-you-section{padding:100px 0 120px; text-align:center; background:var(--bg-soft);}
  .thank-you-icon{
    width:84px; height:84px;
    border-radius:50%;
    background:var(--brown);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 28px;
    animation:popIn .5s cubic-bezier(.2,.9,.3,1.3) both;
  }
  .thank-you-icon svg{width:40px; height:40px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;}
  @keyframes popIn{from{transform:scale(0.5); opacity:0;} to{transform:scale(1); opacity:1;}}
  .thank-you-section h1{font-size:clamp(28px,4.2vw,42px); margin-bottom:14px; font-family:'Heebo', sans-serif; font-weight:700;} /* was 'Assistant' ('David Libre'/'Frank Ruhl Libre' before that) — updated for consistency, even though this page isn't wired into a WP template yet */
  .thank-you-section .ty-sub{color:var(--ink-dim); font-size:17px; max-width:480px; margin:0 auto 40px; line-height:1.8; font-family:'David Libre', serif; font-weight:400;}
  .thank-you-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .btn-whatsapp{
    background:#25D366; color:#fff;
    padding:14px 32px; border-radius:2px;
    font-weight:700; font-size:15px;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s, background .2s;
  }
  .btn-whatsapp:hover{transform:translateY(-2px); background:#1fb955;}
  .btn-whatsapp svg{width:18px; height:18px; fill:#fff;}
  @media (prefers-reduced-motion: reduce){
    .thank-you-icon{animation:none;}
  }

  @media (prefers-reduced-motion: reduce){
    * { animation: none !important; }
  }

  /* ===================================================================
     ===== WOOCOMMERCE — "החשבון שלי" (login / register / dashboard) =====
     גישת "ריסקין קל": לא נגענו בקבצי ה-template של WooCommerce עצמו —
     רק מעצבים מחדש את ה-class-ים הסטנדרטיים שהוא כבר פולט, כדי שיתאימו
     לפלטת האתר (חום/קרם) בלי נטל תחזוקה של template overrides.
     =================================================================== */
  .woocommerce-page-wrap{padding:56px 0;}

  /* עמודי login/register: ברירת מחדל = רק טופס התחברות מוצג, ברוחב מלא.
     טופס הרשמה (.u-column2) מוסתר עד שלוחצים "להרשמה לחץ כאן" — ה-JS
     (footer.php) מוסיף את class="showing-register" על #customer_login
     כדי להחליף ביניהם, ומוסיף fade קטן דרך opacity+transition. */
  .woocommerce-account .u-columns{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    transition:opacity .2s ease;
  }
  .woocommerce-account .u-columns > div{
    flex:1 1 280px;
  }
  #customer_login .u-column2{display:none;}
  #customer_login .u-column1{flex:1 1 100%; max-width:460px; margin:0 auto;}
  #customer_login.showing-register .u-column1{display:none;}
  #customer_login.showing-register .u-column2{display:block; flex:1 1 100%; max-width:460px; margin:0 auto;}
  .woocommerce-account .u-columns h2{
    font-size:clamp(20px,2.6vw,26px);
    margin-bottom:20px;
  }

  /* טפסי login/register/lost-password */
  .woocommerce-form-login,
  .woocommerce-form-register,
  .woocommerce-ResetPassword{
    display:flex;
    flex-direction:column;
    gap:14px;
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:8px;
    padding:28px;
  }
  .woocommerce-form-row{display:flex; flex-direction:column; gap:6px;}
  .woocommerce-form-login label,
  .woocommerce-form-register label,
  .woocommerce-ResetPassword label{
    font-size:13px;
    font-weight:600;
    color:var(--brown-deep);
  }
  .woocommerce-form-login .input-text,
  .woocommerce-form-register .input-text,
  .woocommerce-ResetPassword .input-text,
  .woocommerce-EditAccountForm .input-text,
  .woocommerce-Address .input-text,
  .woocommerce-form select{
    width:100%;
    background:#fff;
    border:1px solid var(--line);
    border-radius:4px;
    padding:11px 12px;
    font-family:inherit;
    font-size:14px;
    color:var(--ink);
  }
  .woocommerce-form-login .input-text:focus,
  .woocommerce-form-register .input-text:focus,
  .woocommerce-ResetPassword .input-text:focus{
    outline:none;
    border-color:var(--brown-soft);
  }
  .woocommerce-form__label-for-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--ink-dim);
    font-weight:400;
  }
  .woocommerce-LostPassword{font-size:13px; margin-top:6px;}
  .woocommerce-LostPassword a{color:var(--brown); text-decoration:underline;}

  /* קישורי המעבר בין טופס ההתחברות לטופס ההרשמה — מוזרקים דרך JS
     (footer.php) כי טוגל אמיתי דורש <a> לחיץ אמיתי, לא רק טקסט CSS::after */
  .account-toggle-note{
    margin-top:4px;
    padding-top:16px;
    border-top:1px dashed var(--line);
    font-size:13px;
    font-weight:600;
    color:var(--ink-dim);
    text-align:center;
  }
  .account-toggle-link{color:var(--brown); text-decoration:underline; cursor:pointer;}
  .account-toggle-link:hover{color:var(--brown-deep);}

  /* מדגיש חזותית את טופס ההרשמה עצמו כדי שירגיש מוזמן וקל להבחנה
     ליד טופס ההתחברות, לא רק "עוד טופס" זהה */
  #customer_login .u-column2 .woocommerce-form-register{
    border-color:var(--brown-soft);
    box-shadow:0 6px 20px rgba(102,51,51,0.1);
  }
  .woocommerce-account .u-columns .u-column2 h2{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .woocommerce-account .u-columns .u-column2 h2::before{
    content:"✦";
    color:var(--brown);
    font-size:15px;
  }

  /* כפתורי WooCommerce (login/register/submit) — אותה שפה חזותית כמו .btn-primary */
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit{
    display:inline-block;
    background:var(--brown);
    color:#fff;
    border:none;
    padding:12px 28px;
    border-radius:2px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s, transform .2s;
    align-self:flex-start;
  }
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover{
    background:var(--brown-deep);
    transform:translateY(-1px);
  }

  /* הודעות מערכת (התחברת בהצלחה / שגיאה / הפניה) */
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info{
    list-style:none;
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-right:4px solid var(--brown);
    border-radius:4px;
    padding:16px 20px;
    margin-bottom:24px;
    font-size:14px;
    color:var(--ink);
  }
  .woocommerce-error{border-right-color:#a94442;}

  /* תפריט הטאבים בדשבורד ("החשבון שלי" אחרי התחברות: הזמנות, כתובות, פרטים, יציאה) */
  .woocommerce-MyAccount-navigation ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 32px;
    padding:0;
    border-bottom:1px solid var(--line);
  }
  .woocommerce-MyAccount-navigation li{margin:0;}
  .woocommerce-MyAccount-navigation li a{
    display:inline-block;
    padding:10px 4px;
    font-size:14px;
    font-weight:600;
    color:var(--ink-dim);
    border-bottom:2px solid transparent;
    transition:color .2s, border-color .2s;
  }
  .woocommerce-MyAccount-navigation li a:hover{color:var(--brown);}
  .woocommerce-MyAccount-navigation li.is-active a{
    color:var(--brown-deep);
    border-color:var(--brown);
  }
  .woocommerce-MyAccount-content{font-size:15px; color:var(--ink);}
  .woocommerce-MyAccount-content table{width:100%; border-collapse:collapse; margin:16px 0;}
  .woocommerce-MyAccount-content th,
  .woocommerce-MyAccount-content td{
    padding:12px;
    border:1px solid var(--line);
    text-align:right;
    font-size:14px;
  }
  .woocommerce-MyAccount-content th{background:var(--bg-soft); color:var(--brown-deep);}

  @media (max-width:640px){
    .woocommerce-account .u-columns{flex-direction:column;}
  }

  /* ===== חסימת שבת ===== */

  /* סרט אזהרה — מוצג רק כש-?preview_shabbat פעיל (מנהל מחובר בלבד),
     כדי שלא יהיה בלבול עם מצב שבת אמיתי */
  .shabbat-preview-banner{
    background:#fff3cd;
    color:#7a5b00;
    border:1px solid #ffe69c;
    border-radius:6px;
    padding:8px 14px;
    font-size:13px;
    font-weight:700;
    text-align:center;
    margin-bottom:16px;
  }

  /* הודעה מעל טופס ה-checkout בזמן שבת */
  .shabbat-notice{
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-right:4px solid var(--brown);
    border-radius:6px;
    padding:16px 20px;
    margin-bottom:24px;
    font-size:15px;
    color:var(--ink);
    line-height:1.7;
  }
  /* מחליף את כפתור "בצע הזמנה" עצמו בזמן שבת */
  .shabbat-checkout-blocked{
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:6px;
    padding:14px 20px;
    text-align:center;
    color:var(--brown-deep);
    font-weight:600;
    font-size:15px;
  }

  /* פופאפ כניסה בזמן שבת — overlay כהה + מודאל ממורכז, fade-in עדין */
  .shabbat-modal-overlay{
    position:fixed; inset:0;
    background:rgba(46,30,30,0.6);
    z-index:300; /* מעל .loading-overlay (200), למקרה של חפיפה */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .shabbat-modal-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .shabbat-modal{
    background:#fff;
    border-radius:12px;
    max-width:440px;
    width:100%;
    padding:32px 28px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    transform:translateY(-10px);
    transition:transform .3s ease;
  }
  .shabbat-modal-overlay.active .shabbat-modal{
    transform:translateY(0);
  }
  .shabbat-modal h2{
    font-size:22px;
    margin-bottom:14px;
  }
  .shabbat-modal p{
    color:var(--ink-dim);
    font-size:15px;
    line-height:1.7;
    margin-bottom:24px;
  }
  @media (prefers-reduced-motion: reduce){
    .shabbat-modal-overlay, .shabbat-modal{transition:none;}
  }