/* ==========================================================
   imra.css — כל השינויים שנוספו על קובץ העיצוב המקורי.

   הקובץ הזה נפרד בכוונה מ-index.html: כשמגיעה גרסת עיצוב
   חדשה, מספיק לוודא שהשורה הבאה קיימת ב-<head> שלה
   וכל התיקונים ישרדו:

     <link rel="stylesheet" href="imra.css">
   ========================================================== */

/* ============================================================
   גופן Heebo — מאוחסן אצלנו, לא דרך גוגל.
   גופן משתנה: כל המשקלים 100–900 מקובץ אחד.
   ============================================================ */
@font-face{
  font-family:'Heebo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Heebo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/heebo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Heebo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/heebo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   1. תפריט עליון — פרוס לרוחב, שני הכפתורים צמודים בקצה
   ============================================================ */
/* התפריט כבר מיושר לקצה תמונת ההירו (שניהם מתחילים באותו מקום).
   מה שהיה צפוף זה הלינקים עצמם — עכשיו המרווח ביניהם גדל לפי רוחב המסך. */
.topbar .wrap.nav{gap:clamp(18px,2.4vw,40px)}
.navlinks{gap:clamp(16px,2.1vw,36px)}
/* הבאג המקורי: margin auto חל על שני הכפתורים ודחף אותם זה מזה.
   עכשיו רק הראשון נדחף לקצה, והשני נצמד אליו. */
.navlinks .btn{margin-inline-start:0}
.navlinks .btn:first-of-type{margin-inline-start:auto}
/* ה-gap של הפלקס חל גם בין שני הכפתורים. מבטלים אותו ביניהם בלבד
   כדי שיישבו צמודים, ומשאירים 10px נשימה. */
.navlinks .nav-workshop + .nav-order{
  margin-inline-start:calc(10px - clamp(16px,2.1vw,36px));
}

/* ============================================================
   3. סכומים בזהב במקום ורוד
   ============================================================ */
#order .order-price,
.order-price,
.price{color:var(--gold)!important}

/* ============================================================
   7. כותרות המעגלים — שתי שורות, השם בוורוד
   ============================================================ */
.circle-tab-kicker{
  display:block;
  line-height:1.3;
  margin-bottom:7px;
}
/* התכלת של הערכה הוא #609cb4 (נדגם מהאיורים), אך על רקע קרם הוא נותן
   2.8:1 בלבד — קשה לקריאה בטקסט קטן. גם --teal-deep נדרס בהמשך הקובץ
   לגוון בהיר (#5aa4ae, 2.6:1), ולכן נקבע כאן גוון מפורש: אותה משפחה,
   עמוק יותר, 4.8:1. */
.circle-num{
  display:block;
  color:#3a7486;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
}
.circle-name{
  display:block;
  color:var(--fuchsia);
  font-size:13.5px;
  font-weight:600;
  margin-top:1px;
}

/* ============================================================
   5. גלויות מתהפכות — hover בדסקטופ, לחיצה במובייל
   ============================================================ */
.postcard-hint{display:none!important}
@media (hover:hover) and (pointer:fine){
  .postcard-flip:not(.is-flipped):hover .postcard-inner{
    transform:rotateY(180deg);
  }
}
/* כותרות הפאנלים של המעגלים — אותו פיצול כמו במעגל עצמו */
.circle-panel-title{
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.25;
}
.circle-panel-title .circle-num{font-size:19px}
.circle-panel-title .circle-name{font-size:15px;font-weight:600}

/* ============================================================
   6. "איך משתמשים" — אקורדיון במובייל
   הלשוניות והפאנלים המקוריים נשארים לדסקטופ.
   הסקריפט מעביר את הפאנלים פיזית בין שני המבנים, בלי שכפול תוכן.
   ============================================================ */
/* בדסקטופ השורה שקופה לחלוטין לפריסה, והכפתור מוסתר —
   הפאנלים מתנהגים בדיוק כפי שהתנהגו לפני השינוי. */
.use-acc-row{display:contents}
.use-acc-btn{display:none}

.use-acc-chev{
  color:var(--gold);
  font-size:12px;
  flex:none;
  transition:transform .25s ease;
}

@media (max-width:760px){
  .use-tabs{display:none!important}

  .use-panels{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .use-acc-row{
    display:block;
    background:var(--paper);
    border:1px solid var(--line-soft);
    border-radius:13px;
    overflow:hidden;
  }

  .use-acc-btn{
    width:100%;
    appearance:none;
    background:transparent;
    border:0;
    font:inherit;
    color:var(--ink);
    text-align:start;
    padding:13px 15px;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
  }

  .use-acc-row.is-open .use-acc-btn{background:var(--teal-soft)}
  .use-acc-row.is-open .use-acc-chev{transform:rotate(180deg)}

  /* גובר גם על תכונת hidden שהסקריפט של הלשוניות מציב */
  .use-acc-row .use-panel{display:none!important}
  .use-acc-row.is-open .use-panel{display:block!important;padding:0 15px 15px}

  .use-acc-row .use-panel > h3{
    font-size:16px;
    margin:4px 0 10px;
    color:var(--teal-deep);
  }
  .use-acc-row .use-list{
    padding-right:19px;
    gap:9px;
    font-size:13.5px;
    line-height:1.65;
  }
}

/* כותרת קטנה בתוך מסגרת ארבע הגלויות, מעל הערת התצוגה הזמנית */
.postcard-showcase-head{
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}

/* ============================================================
   11ה. "אודות" — קיפול הטקסט הארוך במובייל עם "קרא עוד"
   ============================================================ */
.story-more{display:none}

@media (max-width:760px){
  .long-story{
    position:relative;
    max-height:270px;
    overflow:hidden;
  }
  /* דהייה לרקע האמיתי של המקטע (--paper) כדי שהחיתוך לא ייראה חד */
  .long-story::after{
    content:"";
    position:absolute;
    inset-inline:0;
    bottom:0;
    height:76px;
    background:linear-gradient(to bottom,rgba(255,253,248,0),rgba(255,253,248,.96));
    pointer-events:none;
  }
  .long-story.is-expanded{max-height:none}
  .long-story.is-expanded::after{display:none}

  .story-more{
    display:inline-flex;
    align-items:center;
    gap:7px;
    appearance:none;
    background:transparent;
    border:1px solid rgba(171,143,56,.6);
    border-radius:999px;
    color:var(--gold);
    font:inherit;
    font-size:14.5px;
    font-weight:600;
    min-height:44px;
    padding:0 20px;
    margin-top:12px;
    cursor:pointer;
  }
  .story-more::after{
    content:"▾";
    font-size:11px;
    transition:transform .25s ease;
  }
  .story-more[aria-expanded="true"]::after{transform:rotate(180deg)}
}

/* ============================================================
   11. התאמות מובייל
   ============================================================ */
@media (max-width:760px){
  /* 11א+11ב — טקסט קריא במעגלים */
  .circle-bullets li{font-size:13.5px!important;line-height:1.5}
  .circle-num{font-size:13px}
  .circle-name{font-size:12.5px}
}

/* בטלפונים צרים העיגול יורד ל-142px, והתוכן גלש מעבר לצורה העגולה.
   כאן מכווצים את השורות בדיוק כמה שצריך כדי שהכל יישב בפנים. */
@media (max-width:430px){
  .circle-bullets li{font-size:12px!important;line-height:1.35!important}
  .circle-bullets{margin:0!important}
  .circle-num{font-size:12px}
  .circle-name{font-size:12px}
  .circle-tab-kicker{margin-bottom:5px}

  /* 11ג — יעדי מגע בתפריט */
  .navlinks a:not(.btn){
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  /* 11ד — יעדי מגע בתחתית העמוד */
  footer a{
    display:inline-block;
    min-height:34px;
    padding-block:7px;
  }
  .legal a{min-height:38px;padding-block:9px}

  /* 11ו — כיתובי תמונות */
  .kit-photo-caption,
  .photo-placeholder{font-size:13.5px}
}

/* === כפתורי ההזמנה (מחוברים למורנינג) — נוסף אחרי העיצוב המקורי === */
.order-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  position:relative;
  z-index:1;
}
.order-actions-title{
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  text-align:center;
  margin-bottom:2px;
}
.order-consent{
  margin:2px 0 0;
  text-align:center;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.6;
}
.order-consent a{
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
}
.order-consent a:hover{color:var(--gold)}

.legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--gold)}
.legal-draft{display:inline-block;margin-top:6px;opacity:.75}
.order-box .order-cta-alt{
  background:transparent!important;
  background-image:none!important;
  border-color:rgba(171,143,56,.7)!important;
  color:var(--ink)!important;
  box-shadow:none!important;
  min-height:52px;
  font-size:15.5px;
}
.order-box .order-cta-alt:hover{
  background:rgba(255,255,255,.6)!important;
  border-color:var(--gold)!important;
  color:var(--ink)!important;
}
@media (max-width:760px){
  .order-actions{width:100%}
  .order-box .btn{padding-inline:22px;font-size:15.5px;text-align:center}
}

/* ==========================================================
   רקע נייר אחיד לכל האתר
   האריח: textures/paper.webp — 800x800, ממוסגר במראה כך
   שהוא מתחבר לעצמו בלי תפרים (הפרש בתפר: 1.3 מתוך 255).
   מחליף את הטקסטורה הישנה, את כל הגרדיאנטים ואת גווני
   הצבע שהיו לכל מקטע.
   ========================================================== */

:root{
  --paper-texture:url("textures/paper.webp");
  --paper:#fafafa;
  --cream:#fafafa;
}

html,
body{
  background:#fafafa url("textures/paper.webp") repeat top right;
  background-size:800px 800px;
}

/* המקטעים נעשים שקופים כדי שנייר אחד ימשיך דרך כל העמוד,
   בלי תפרים בין מקטע למקטע */
.hero,
.strip,
.wash-blue,
.wash-rose,
.wash-sand,
.quote-strip{
  background-image:none!important;
  background-color:transparent!important;
}

/* סרגל הניווט — נייר במקום קרם, עם טשטוש שנשאר */
.topbar{
  background:rgba(250,250,250,.9);
}

/* הכרטיסים והפאנלים נשארים כשכבה עדינה מעל הנייר,
   רק בגוון ניטרלי במקום קרם חמים */
.card,
.use-panel,
.postcard-showcase,
details,
details.returns-policy{
  background-color:rgba(255,255,255,.72)!important;
  background-image:none!important;
}

.circle-tab{
  background-color:rgba(255,255,255,.8)!important;
  background-image:none!important;
}

/* המשך: ניטרול הגרדיאנטים שנותרו על מסגרות ותיבות.
   המסגרות המקווקוות נשארות — הן מסמנות איפה ייכנסו הצילומים. */
.photo-placeholder,
.photo-placeholder.large,
.hero-photo-placeholder,
.use-photo-placeholder,
.inside-still-placeholder,
.video-placeholder,
.promo-video-placeholder,
.kit-photo-stage,
.postcard-placeholder-face{
  background-image:none!important;
  background-color:rgba(255,255,255,.45)!important;
}

.postcard-face{
  background-color:#fff!important;
}
.postcard-face.postcard-front-1,
.postcard-face.postcard-front-2,
.postcard-face.postcard-front-3,
.postcard-face.postcard-front-4{
  background-image:var(--card1,none);
}

/* תיבת ההזמנה — נייר במקום החול */
.order-box{
  background-image:none!important;
  background-color:rgba(255,255,255,.55)!important;
}

/* שכבות תכולת הערכה — לבן ניטרלי במקום התכלת */
.kit-photo-layer{
  background-color:rgba(255,255,255,.9)!important;
}
.kit-photo-base{
  background-color:rgba(255,255,255,.35)!important;
}

/* #order .order-box מגדיר background-image עם !important וסלקטור
   ספציפי יותר. נדרש סלקטור באותה רמה כדי לגבור עליו. */
#order .order-box,
#order .order-box.reveal{
  background-image:none!important;
  background-color:rgba(255,255,255,.55)!important;
}

/* ==========================================================
   לוגו, ציפור, גופן שיבולת ומסגרות זהב
   ========================================================== */

/* הגופן של גילי שחר — משמש אך ורק במשפט אחד באתר */
@font-face{
  font-family:'Shibolet';
  src:url('fonts/shibolet.woff2') format('woff2'),
      url('fonts/shibolet.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.saying-shibolet{
  font-family:'Shibolet',"Heebo","Segoe UI",Arial,sans-serif!important;
  font-size:1.28em!important;
  line-height:1.5!important;
  letter-spacing:.01em;
}

.font-credit{
  display:inline-block;
  margin-top:5px;
  font-size:11.5px;
  opacity:.7;
}

/* ---------- הלוגו ---------- */
.brand{
  display:inline-flex;
  align-items:center;
  line-height:0;
}
/* התמונה כוללת עכשיו גם את הציפור (יחס 1000x682, לא רק את הטקסט 700x386),
   ולכן הגובה גדל מעט כדי שגובה האותיות עצמן יישאר דומה לקודם. */
.brand-logo{
  height:39px;
  width:auto;
  display:block;
}

.hero-logo-img{
  height:1.18em;
  width:auto;
  display:block;
}
.hero-logo-line{
  align-items:center;
}

@media (max-width:760px){
  .brand-logo{height:33px}
}

/* ---------- הציפור, עם רקע שקוף ---------- */
.bird-sep,
.bird-mark,
.order-bird{
  background-image:url('img/bird.webp')!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:transparent!important;
}

/* ---------- כל המסגרות הוורודות -> קו זהב דק ואחיד ---------- */
.photo-placeholder,
.photo-placeholder.large,
.hero-photo-placeholder,
.use-photo-placeholder,
.inside-still-placeholder,
.kit-photo-base,
.postcard-placeholder-face{
  border:1px solid rgba(171,143,56,.45)!important;
}

.eyebrow,
.number{
  border-color:rgba(171,143,56,.45)!important;
  outline-color:rgba(171,143,56,.45)!important;
}

/* "גלויות יפות וחכמות" — בלי בולד */
.hero-product-line{
  font-weight:400!important;
}

/* מסגרות ורודות שנותרו */
.postcard-showcase,
.postcard-face,
.postcard-face.postcard-front,
.postcard-face.postcard-back,
.kit-photo-stage,
.promo-video-placeholder,
.video-placeholder{
  border-color:rgba(171,143,56,.45)!important;
}

/* הנחיה זמנית: דף התשלום של מורנינג לא אוסף כתובת למשלוח */
.order-note{
  margin:-3px 0 2px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
  background:rgba(171,143,56,.10);
  border:1px solid rgba(171,143,56,.35);
  border-radius:10px;
  padding:7px 12px;
}
.order-note strong{color:var(--ink);font-weight:700}

/* ==========================================================
   תיקוני כיוון, גופן וצבע
   ========================================================== */

/* הציפור מצוירת פונה שמאלה. בכל שלושת המקומות היא יושבת
   משמאל לטקסט, ולכן היפוך אופקי מפנה אותה אל המילה. */
.bird-sep,
.bird-mark,
.order-bird{
  transform:scaleX(-1);
}

/* הציטוט בסטריפ — הוחזר לפונט הרגיל של האתר (לא שיבולת) */
.quote-text{
  font-family:"Heebo","Segoe UI",Arial,sans-serif!important;
  line-height:1.75!important;
}

/* "גלויות יפות וחכמות" — חזרה לצבע ולפונט של "לחוויה אישית..." (רק הגודל נשאר כשהיה) */
.hero-product-line{
  color:var(--muted)!important;
  font-family:"Heebo","Segoe UI",Arial,sans-serif!important;
  font-weight:400!important;
}

/* תוכן כהה בגוון חום ולא בשחור טהור */
.postcard-flip,
.postcard-inner,
.postcard-face,
.postcard-face strong,
.postcard-face small{
  color:var(--ink);
}

/* ציפור הסטריפ לא קיבלה את ההיפוך מהכלל הכללי — סלקטור ספציפי יותר */
.quote-frame .bird-mark,
.quote-strip .bird-mark{
  transform:scaleX(-1)!important;
}

/* כפתורים שנוצרו בסקריפט יורשים שחור מברירת המחדל של הדפדפן */
.use-acc-btn,
.story-more,
.use-acc-btn span,
.story-more span{
  color:var(--ink)!important;
}

/* ==========================================================
   כל דרגות החום -> הגוון מתוך "לחוויה אישית, משפחתית וקבוצתית"
   ========================================================== */
:root{
  --ink:#7a7168;
  --ink-soft:#7a7168;
  --muted:#7a7168;
}

/* הציטוט בסטריפ: בולד, אבל בגודל המקורי (לא מוגדל) */
.quote-text{
  font-weight:700!important;
}

/* המקור — נשאר בגוונו, במשקל דק */
.quote-src{
  font-weight:300!important;
}

/* ==========================================================
   הגלויות בתצוגה — צילומים אמיתיים
   זוגי = איור (קדמי), אי-זוגי = טקסט (אחורי)
   ========================================================== */
.postcard-front-1{background-image:url('img/cards/card1-front.webp')!important}
.postcard-back-1 {background-image:url('img/cards/card1-back.webp')!important}
.postcard-front-2{background-image:url('img/cards/card2-front.webp')!important}
.postcard-back-2 {background-image:url('img/cards/card2-back.webp')!important}
.postcard-front-3{background-image:url('img/cards/card3-front.webp')!important}
.postcard-back-3 {background-image:url('img/cards/card3-back.webp')!important}
.postcard-front-4{background-image:url('img/cards/card4-front.webp')!important}
.postcard-back-4 {background-image:url('img/cards/card4-back.webp')!important}

.postcard-front-1,.postcard-back-1,
.postcard-front-2,.postcard-back-2,
.postcard-front-3,.postcard-back-3,
.postcard-front-4,.postcard-back-4{
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:#fff!important;
}

/* צילום אמיתי במקום מסגרת שמורה, במקטע "אודות" */
.story-photo{
  display:block;
  width:100%;
  height:auto;
  border-radius:22px;
  border:1px solid rgba(171,143,56,.45);
  box-shadow:var(--shadow-soft);
  object-fit:cover;
}

/* ==========================================================
   הירו במובייל — התמונה יורדת מתחת לכל גוש הטקסט:
   כותרת, שורות המשנה, המחיר וההזמנה — ואז התמונה והסרטון.

   ברירת המחדל של האתר נותנת ל-.hero-art את order:-1, שמקפיץ
   אותה לראש. כאן מבטלים את זה, וסדר ה-DOM חוזר לשלוט:
   hero-copy ואחריו hero-art.
   ========================================================== */
@media (max-width:760px){
  .hero-grid{
    gap:30px!important;
    text-align:center;
  }
  .hero .hero-art{order:0!important}
}
/* ==========================================================
   "על הגלויות" במובייל — שלושה תיקונים
   ========================================================== */
@media (max-width:760px){

  /* 1. הכותרת נחתכה כי הוגדר עליה nowrap. מאפשרים שבירת שורה. */
  .about-title-main{
    white-space:normal!important;
    font-size:26px!important;
    line-height:1.3!important;
    text-wrap:balance;
  }

  /* 3. הפאנל של המעגל נפתח מחוץ למסך כשהמעגל בעמודה השמאלית.
        במקום להסתמך על סקריפט שמזיז אותו, הפריט הפתוח פשוט
        תופס את כל רוחב הגריד והפאנל חוזר לזרימה רגילה. */
  .circle-item:has(> .circle-panel:not([hidden])){
    grid-column:1 / -1;
  }
  .circle-item:has(> .circle-panel:not([hidden])) .circle-tab{
    margin-inline:auto;
  }
  .circle-panel{
    position:static!important;
    transform:none!important;
    width:auto!important;
    max-width:100%!important;
    margin-top:12px;
    inset:auto!important;
  }
}

/* 2. עוגני התפריט נחתו מתחת לסרגל הדביק.
      scroll-padding מרווח את יעד הגלילה בגובה הסרגל. */
html{scroll-padding-top:96px}
@media (max-width:760px){
  html{scroll-padding-top:184px}
}

/* "מה בערכה" במובייל — הסתרת צילום התכולה.
   שש שכבות מסומנות על תמונה אחת לא עובדות ברוחב טלפון
   (התווית "מעמד עץ" קיבלה 50px). הרשימה שמתחת מסבירה
   ממילא כל פריט, ולכן היא נושאת את המקטע לבדה.
   יתרון נוסף: כשייכנס הצילום האמיתי, הוא לא יורד כלל בנייד. */
@media (max-width:760px){
  .inside-media{display:none!important}
}

/* ==========================================================
   היררכיית כפתורים
   זהב מלא = הזמנת ערכה (הפעולה המרכזית).
   מסגרת בלבד = סדנאות וליווי, שנסגרים בשיחה.

   ההבחנה לפי היעד ולא לפי מחלקה: כפתורי הוואטסאפ הם תמיד
   סדנאות/ליווי, ולכן גם כפתור חדש שיתווסף יקבל את הסגנון הנכון.
   ========================================================== */
a.btn[href*="wa.me"]{
  background:transparent!important;
  background-image:none!important;
  border:1px solid var(--gold)!important;
  color:var(--gold)!important;
  box-shadow:none!important;
}
a.btn[href*="wa.me"]:hover{
  background:var(--gold)!important;
  background-image:none!important;
  border-color:var(--gold)!important;
  color:#fff!important;
}

/* ==========================================================
   תיקונים: איחוד צבע ההירו, מיקום הציפור, קריאות "מה כוללת"
   ========================================================== */

/* "מפגש עכשווי..." — אותו חום ואותו משקל גופן כמו "לחוויה אישית..." */
.hero-copy .tagline{
  color:var(--muted)!important;
  font-weight:400!important;
}

/* הציפור כבר לא רכיב נפרד — הלוגו (img/logo-with-bird.webp) כולל אותה
   בתוכו, בדיוק ביחס המקורי בין הטקסט לציפור. אין יותר צורך במיקום ידני. */

/* "מה כוללת הערכה" — רקע לבן מלא לקריאות על הנייר המרוקם */
.kit-accordion{
  background:#fff;
  border-top:none!important;
  border-radius:18px;
  padding:18px 20px;
  box-shadow:var(--shadow-soft);
}

/* ==========================================================
   ההירו: הלוגו + "גלויות יפות וחכמות" נשארים כזוג ממורכז
   (לוגו-טאבו מכוון), ואילו שאר הכותרות באתר מיושרות לימין
   ומתחילות כולן באותה נקודה.
   ========================================================== */
.hero-title,
.hero-product-line{
  text-align:center!important;
}
.hero-logo-line{
  justify-content:center!important;
}
.hero-copy{
  text-align:right;
}
.hero-copy .desc{
  margin-inline:0!important;
}
.price-row,
.hero-cta-row{
  justify-content:flex-start!important;
}

/* לוגו "אִמְרָה" בהירו — גדול יותר מהמשפט שאחריו.
   התמונה כוללת גם את הציפור (כ-35% מהגובה), אז צריך תיבה
   גבוהה משמעותית כדי שהאותיות עצמן ייצאו גדולות מהטקסט. */
.hero-logo-img{
  height:2em!important;
}

/* ==========================================================
   ציפור כפולה בתפריט — נמצא הגורם: כלל ישן מהתבנית המקורית
   יוצר ::before נסתר על .brand עם תמונת ציפור נפרדת (var(--bird)),
   בלתי תלוי לגמרי בלוגו img/logo-with-bird.webp שהחלפנו אליו.
   זו הסיבה שהכפילות הופיעה רק בתפריט ולא בהירו — לשם הכלל
   הישן מעולם לא התייחס. מבטלים את ה-::before הזה לגמרי.
   ========================================================== */
.brand::before{
  content:none!important;
}

/* ==========================================================
   תפריט המבורגר במובייל.
   בדסקטופ הכפתור מוסתר והתפריט נשאר שורה רגילה כמו תמיד.
   ========================================================== */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:760px){
  .nav{
    height:64px!important;
    min-height:64px!important;
    padding-block:0!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    position:relative;
  }
  /* התפריט מימין, הלוגו משמאל */
  .nav-toggle{display:flex;order:-1}
  .brand{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding-left:0!important;
    text-align:left!important;
  }

  .navlinks{
    display:none!important;
    position:absolute!important;
    top:100%;
    right:0;
    left:0;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    background:#fff;
    border-top:1px solid var(--line-soft);
    box-shadow:0 18px 30px rgba(64,53,43,.14);
    padding:8px 20px 20px;
    z-index:120;
  }
  .navlinks.is-open{display:flex!important}

  .navlinks a:not(.btn){
    display:flex!important;
    min-height:50px;
    align-items:center;
    border-bottom:1px solid var(--line-soft);
    font-size:16px;
    white-space:normal;
  }
  .navlinks a:not(.btn)::after{display:none}

  .navlinks .btn{
    display:flex!important;
    width:100%;
    margin-top:12px;
    margin-inline-start:0!important;
  }
  .navlinks .nav-workshop{margin-top:14px}
}

/* ==========================================================
   באנר הציטוט האמצעי — הוספת סלוט שמור לצילום סטילס רחב
   מעל מסגרת הציטוט, כדי שהאזור לא יישאר טקסט בלבד על רקע ריק.
   ========================================================== */
.quote-photo-placeholder{
  width:min(100%,900px);
  margin:0 auto 40px;
  min-height:260px;
  border-radius:26px;
}
@media (max-width:640px){
  .quote-photo-placeholder{min-height:190px;margin-bottom:26px}
}

/* קטע "גילי": הלייאאוט (תמונה גדולה למעלה + שתיים קטנות מתחתיה)
   מוגדר עכשיו inline ב-index.html על ה-wrapper וה-flex row עצמם. */

/* ==========================================================
   מצב "אזל המלאי" — מוסתר כברירת מחדל, מופעל דרך KIT_SOLD_OUT ב-JS
   ========================================================== */
.sold-out-box{
  background:var(--teal-soft);
  border:1px solid rgba(90,164,174,.35);
  border-radius:18px;
  padding:22px 24px;
  margin-top:6px;
}
.sold-out-badge{
  display:inline-block;
  background:var(--fuchsia);
  color:#fff;
  font-weight:700;
  font-size:13px;
  padding:5px 14px;
  border-radius:999px;
  margin-bottom:12px;
}
.sold-out-box p{
  margin:0 0 10px;
  line-height:1.7;
  color:var(--ink-soft);
  font-size:14.5px;
}
.sold-out-box p:last-of-type{margin-bottom:0}
.sold-out-box .btn{margin-top:14px}

/* ==========================================================
   ציפור קטנה מעל האות ם' הסופית, בסוף הכותרת "איך אמרה באה לעולם"
   צמודה אליה משמאל
   ========================================================== */
.birdtitle{margin-top:10px}
.mem-bird{position:relative;display:inline-block}
.mem-bird .bird-tiny{
  position:absolute;
  top:-0.28em;
  left:-0.5em;
  transform:scaleX(-1);
  width:.62em;
  height:.62em;
  background:var(--bird) center/contain no-repeat;
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* ==========================================================
   פופאפ "אזל המלאי" — נפתח מכל כפתור הזמנה, בלי לשנות את הכפתור עצמו
   ========================================================== */
.sold-out-modal-card{
  width:min(480px,94vw);
  text-align:center;
  padding:34px 28px;
}
.sold-out-modal-card .sold-out-badge{margin-bottom:14px}
.sold-out-modal-card p{
  margin:0 0 20px;
  line-height:1.75;
  color:var(--ink);
  font-size:16px;
}