/* ==========================================================================
   ro-ga by ida@  —  מערכת עיצוב
   "ink + chalk" · שטוח · פינות חדות · ללא צללים · רובו לבן
   טקסטים ומחירים = פלייסהולדר לאישור עיצוב
   ========================================================================== */

/* ---------- 1. אסימוני עיצוב ---------- */
:root {
  /* צבע — בסיס קרם/בז' חמים */
  --ink: #23231f;
  --graphite: #6b6a60;
  --chalk: #d6cdba;
  --band: #ebe4d6;
  --paper: #f7f3ea;
  --olive: #6e7355;
  --white: #ffffff; /* רק לתצוגה המוגדלת של המוצר */

  /* גופנים */
  --f-disp: "Frank Ruhl Libre", "Times New Roman", serif;
  --f-body: "Assistant", "Arial Hebrew", sans-serif;

  /* מידות טיפוגרפיה — סולם מרוסן. הגג נמוך בכוונה: במסך רחב הכותרת
     מפסיקה לגדול, וזה מה שמייצר את הרוגע במקום שהדף יצעק. */
  --t-hero: clamp(1.95rem, 4.05vw, 3.05rem);
  --t-sec: clamp(1.45rem, 2.2vw, 2.1rem);
  --t-sub: clamp(1.2rem, 1.6vw, 1.5rem);
  --t-lead: clamp(1rem, 1.05vw, 1.0625rem);

  /* מידת שורה — עמודת טקסט צרה, שוליים ריקים נדיבים סביבה */
  --measure: 52ch;
  --measure-lead: 44ch;
  --measure-tight: 36ch;

  /* מרווחים — רשת 8 */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;

  /* מבנה */
  --pad: 32px;
  --maxw: 1280px;
  /* פס הניווט — שתי שורות: לוקאפ המותג למעלה, ניווט ושירות למטה.
     חשבון הגובה ב-1920: 12 ריפוד + 106.8 שורת המותג (60 כתר + 10 + 1
     קו + 8 + 13.8 תת-כותרת + 10 ריפוד תחתון) + 66 שורת הניווט ≈ 184.
     ה-min-height מייצב את הפס גם במסכים צרים יותר, שבהם ה-clamp של
     השם והלוגו מקטין אותם.
     הטוקן משמש גם ל-scroll-margin של עוגנים ולסיכום ההזמנה הדביק. */
  --nav-h: 184px;
  /* ריפוד אופקי של פס הניווט — הפס נפרש מקצה לקצה, ולכן הוא לא יורש
     את --pad של .wrap אלא מקבל שוליים צרים משלו: הקישורים נצמדים
     לקצה הימני, החיפוש/שפה/סל לקצה השמאלי, והלוגו במרכז החלון. */
  --nav-pad: clamp(28px, 2.2vw, 44px);
  --r: 2px;

  /* מיכל רחב — רק לשני פסי ההצלבה.
     שאר העמודים נשארים ב---maxw (1280) כדי לשמור על המידה הרגועה;
     פסי ההצלבה הם הרגע הרחב של הדף, ולכן הם נפרשים החוצה: גם התמונה
     וגם הטקסט. clamp במקום ערך קבוע כדי שלא תהיה קפיצה בשינוי גודל,
     והרצפה 1280px מבטיחה שמתחת ל-1280 שום דבר לא זז. */
  --maxw-zig: clamp(1280px, 92vw, 2160px);

  /* השוליים החיצוניים של פסי ההצלבה — רצועת קרם שנשארת גלויה מחוץ
     לתמונה, בקצה החלון. התמונה נעצרת לפניה ולא נושקת לזכוכית:
     זה מה שנותן לפס את הנשימה במקום שייראה חתוך. */
  --zig-gutter: clamp(40px, 3.2vw, 80px);

  /* המרווח בין עמודת הטקסט לתמונה בפסי ההצלבה — החלל הגדול הזה הוא
     עיקר האפקט. גדל אגרסיבית עם רוחב החלון (13.5vw) אבל עם ריצפה
     נמוכה, כך שבלפטופ צר התמונה לא מצטמקת. §12ב מחיל אותו רק מ-1025
     ומעלה; מתחת לזה הזיגזג הוא עמודה אחת וה-gap הוא מרווח אנכי. */
  --zig-gap: clamp(56px, calc(13.5vw - 70px), 246px);

  /* פריצת הזיגזג — כמעט עד קצה החלון, ביחס למיכל הרחב, פחות
     --zig-gutter כדי שתמיד תישאר רצועת רקע גלויה בחוץ.
     max(0px, …) שומר שהפריצה לא תתהפך לשלילית ותמשוך את התמונה
     פנימה בלפטופ צר — שם הפריצה יוצאת 0 והתמונה נעצרת בדיוק על
     שולי ה-wrap (32px). את ההתנפחות בגובה עוצרים ב-max-height על
     התמונות עצמן (§12ב) ולא כאן. css/i18n.css משתמש באותו טוקן
     ל-LTR — הוא בוחר רק את הצד הפיזי, ולכן עברית ואנגלית לא יכולות
     להיפרד זו מזו. */
  --bleed: max(
    0px,
    calc(
      max(0px, (100vw - var(--maxw-zig)) / 2) + var(--pad) - var(--zig-gutter)
    )
  );
  --hair: 1px solid var(--chalk);
  --dur: 180ms;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- 2. איפוס ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* clip ולא hidden: hidden הופך את האלמנט למיכל גלילה ומשתק
   את position:sticky של הניווט. clip חוסם גלישה אופקית בלי זה. */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.78;
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* מיקוד נגיש — קו מתאר, לא צל */
:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

/* ---------- 3. טיפוגרפיה ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--f-disp);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: 0.01em;
}

h1 {
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.12;
}

h2 {
  font-size: var(--t-sec);
  font-weight: 400;
}

h3 {
  font-size: var(--t-sub);
}

p {
  max-width: var(--measure);
}

strong {
  font-weight: 600;
  color: var(--ink);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.72;
  color: var(--graphite);
  max-width: var(--measure-lead);
}

/* תווית עילית — מספור וקטגוריות, בלי אייקונים */
.eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--olive);
}

.u-center {
  text-align: center;
}

.u-mt3 {
  margin-top: var(--s3);
}
.u-mt4 {
  margin-top: var(--s4);
}
.u-mt5 {
  margin-top: var(--s5);
}
.u-mt6 {
  margin-top: var(--s6);
}

/* ---------- 4. פריסה — פסים ברוחב מלא, רעיון אחד לכל פס ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.wrap--narrow {
  max-width: 820px;
}

.sec {
  padding-block: 84px 68px;
  background: var(--paper);
}

.sec--band {
  background: var(--band);
}

.sec--tight {
  padding-block: 60px 52px;
}

.sec--hair {
  border-top: var(--hair);
}

/* עוגן בתוך העמוד לא נחתך מתחת לכותרת הדביקה */
.sec[id] {
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

/* מרווח נוסף לפני פס "האהובים ביותר" — כדי שהתמונה שלו לא תציץ
   מלמטה בזמן שעדיין קוראים את שלוש נקודות הערך. */
.sec--feature {
  padding-top: clamp(88px, 8.5vw, 128px);
}

.sec__head {
  margin-bottom: var(--s6);
}

.sec__head .eyebrow {
  margin-bottom: var(--s3);
}

.sec__head p {
  margin-top: var(--s3);
}

.sec__head--center {
  text-align: center;
}

.sec__head--center p {
  margin-inline: auto;
}

.hairline {
  border: 0;
  border-top: var(--hair);
}

/* ---------- 5. כפתורים — שטוחים, מרובעים, ללא צל, ללא תזוזה ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  cursor: pointer;
  text-align: center;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--graphite);
  border-color: var(--graphite);
}

/* קו מתאר דק ושקט — לא מסגרת דיו כבדה. ההבדל מהראשי הוא בעוצמה
   בלבד, לא במשפחה: אותו גודל, אותו משקל, אותה פינה. */
.btn--secondary {
  background: transparent;
  border-color: var(--graphite);
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--sm {
  padding: 8px 16px;
  font-size: 0.8125rem;
}

/* מעל תמונה — אותה משפחה, היפוך לקריאות מעל סצנה בהירה וגם כהה */
.btn--onimg.btn--primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.btn--onimg.btn--primary:hover {
  background: var(--ink);
  border-color: var(--paper);
  color: var(--paper);
}

.btn--onimg.btn--secondary {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}

.btn--onimg.btn--secondary:hover {
  background: var(--paper);
  color: var(--ink);
}

/* אזל מהמלאי */
.btn--soldout {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--paper);
  cursor: default;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.btn-row--center {
  justify-content: center;
}

/* קישור טקסטואלי */
.tlink {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  border-bottom: 1px solid var(--chalk);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}

.tlink:hover {
  border-bottom-color: var(--ink);
}

/* ---------- 6. ניווט — שתי שורות ----------
   שורה עליונה: לוקאפ המותג לבדו, במרכז החלון. שורה תחתונה: הקישורים
   נצמדים לקצה הימני (inline-start ב-RTL) והשירות — סל, חיפוש, שפה —
   לקצה השמאלי. קו שיער אחד מפריד בין השורות.

   שתי השורות הן שתי שורות של אותה רשת אחת (.nav__bar) ולא שני מיכלים,
   כדי שהקיפול לנייד יישאר בדיוק מה שהיה: grid-template-areas אחד
   שמחזיר את הכול לשורה אחת — בורגר · לוגו · סל.

   הפס עצמו נפרש מקצה לקצה של החלון ולא נכנס ל---maxw (1280): במסך
   רחב הכליאה ההיא השאירה את הקישורים והסל תלויים באמצע, במקום
   נצמדים לקצוות. ה-div נושא גם .wrap וגם .nav__bar — הכלל כאן מבטל
   את ה-max-width וה-padding של .wrap (אותה סגוליות, מוגדר אחרי).  */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: var(--hair);
}

.nav__bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s4);
  min-height: var(--nav-h);
  padding-block: 12px 0;
  /* מבטל את .wrap — הפס ברוחב מלא עם שוליים צרים משלו */
  max-width: none;
  padding-inline: var(--nav-pad);
}

/* קו השיער שמפריד בין שורת המותג לשורת הניווט. פריט רשת ריק בשורה 2,
   נצמד לראש השורה — כך אין צורך באלמנט נוסף ב-HTML ומפתחות ה-CMS
   לא מושפעים בכלל. */
.nav__bar::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  height: 0;
  border-top: var(--hair);
}

/* ימין ב-RTL — שורה תחתונה */
.nav__side--nav {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: 8px 10px;
}

/* שמאל ב-RTL — שורה תחתונה */
.nav__side--util {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 8px 10px;
}

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

   הכתר אופקי ולא מוערם: הערמה הייתה מוסיפה ~60px לפס דביק שגם ככה
   גבוה אחרי שהשם גדל מ-27px ל-48px. */
.nav__brand {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  padding-block: 2px 10px;
}

.nav__crest {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 1.1vw, 20px);
}

.nav__logo {
  flex: 0 0 auto;
  width: auto;
  height: clamp(46px, 3.5vw, 60px);
  object-fit: contain;
}

/* השם — פרנק רוהל, מרווח אותיות נדיב. שולי הקצה השליליים מבטלים את
   רווח האות האחרונה, אחרת המילה יושבת מעט מהמרכז. */
.nav__mark {
  font-family: var(--f-disp);
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.3em;
  margin-inline-end: -0.3em;
  color: var(--ink);
  white-space: nowrap;
}

.nav__rule {
  display: block;
  align-self: stretch;
  height: 1px;
  margin-block: 10px 8px;
  background: var(--chalk);
}

.nav__tagline {
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.2em;
  margin-inline-end: -0.2em;
  color: var(--graphite);
  white-space: nowrap;
  /* מחרוזת מעורבת לטינית/עברית בתוך דף RTL — בלי זה ה-@ קופץ לתחילת
     השורה. הבידוד שומר על הסדר "ro-ga by ida@ · ארומתרפיה…". */
  direction: ltr;
  unicode-bidi: isolate;
}

.nav__word {
  font-family: var(--f-disp);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.nav__word span {
  display: block;
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--graphite);
}

/* המרווח גדל עם הרוחב — כך קבוצת הקישורים עצמה רחבה יותר, ולא רק
   נצמדת לקצה. */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(28px, 2.4vw, 46px);
}

.nav__links a {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: 0.02em;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.nav__links a:hover {
  color: var(--ink);
}

.nav__links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---- חיפוש ---- */
.nav__search {
  position: relative; /* עוגן ללוח ההצעות */
  display: flex;
  align-items: stretch;
  border: 1px solid var(--chalk);
  border-radius: var(--r);
  background: var(--paper);
  transition: border-color var(--dur) var(--ease);
}

.nav__search:focus-within {
  border-color: var(--ink);
}

.nav__search-field {
  /* רחב יותר מבעבר — השורה התחתונה נפרשת לקצוות, ושדה צר היה
     נראה כמו שריד של הפריסה הישנה. */
  width: clamp(140px, 14vw, 232px);
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 9px 12px;
  font-family: var(--f-body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
}

.nav__search-field::placeholder {
  color: var(--graphite);
  opacity: 0.75;
}

.nav__search-field:focus {
  outline: none;
}

/* ה-x המובנה של Chrome שובר את הקו הנקי של השדה */
.nav__search-field::-webkit-search-cancel-button,
.nav__search-field::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.nav__search-go {
  flex: 0 0 auto;
  width: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--chalk);
  border-radius: 0;
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.nav__search-go:hover {
  color: var(--ink);
  background: var(--band);
}

.nav__search-go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* ---- לוח ההצעות של החיפוש ----
   שטוח, פינה 2px, מסגרת שיער אחת, בלי צל — אותו חוק כמו כל השאר.

   העיגון הוא inset-inline-end: 0 ולא start: הטופס יושב בקצה החיצוני
   של הפס (שמאל ב-RTL, ימין ב-LTR), ולוח רחב מהטופס שנפתח מהקצה
   הפנימי גולש החוצה מהחלון. מהקצה החיצוני הוא תמיד נפתח פנימה,
   ולכן הכלל נכון בשני כיווני הכתיבה בלי שום מראה ב-css/i18n.css. */
.nav__sug {
  position: absolute;
  top: calc(100% + 7px);
  inset-inline-end: 0;
  z-index: 5;
  width: max(100%, 23rem);
  max-width: min(92vw, 460px);
  background: var(--paper);
  border: var(--hair);
  border-radius: var(--r);
  text-align: start;
}

.nav__sug[hidden] {
  display: none;
}

.nav__sug-head {
  margin: 0;
  padding: 11px 14px 10px;
  border-bottom: var(--hair);
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  color: var(--graphite);
}

.nav__sug-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 14px;
  border-bottom: var(--hair);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.nav__sug-row:last-child {
  border-bottom: 0;
}

/* מצב פעיל אחד — עכבר ומקלדת מקבלים בדיוק את אותו סימון */
.nav__sug-row:hover,
.nav__sug-row.is-active {
  background: var(--band);
}

.nav__sug-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--band);
}

.nav__sug-text {
  display: block;
  min-width: 0;
}

.nav__sug-name {
  display: block;
  font-family: var(--f-disp);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.nav__sug-blurb {
  display: block;
  margin-top: 2px;
  font-family: var(--f-body);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--graphite);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__sug-empty {
  margin: 0;
  padding: 15px 14px;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--graphite);
}

.nav__sug-empty[hidden] {
  display: none;
}

/* ---- בורר שפה (התנהגות נבנית בנפרד) ---- */
.nav__lang {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav__lang button {
  padding: 5px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.15;
  color: var(--graphite);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

/* הקו המפריד יושב בין שני הכפתורים בשני כיווני הכתיבה */
.nav__lang button + button {
  border-inline-start: 1px solid var(--chalk);
}

.nav__lang button:hover {
  color: var(--ink);
}

/* המצב הפעיל מובחן במשקל ובצבע בלבד — בלי גלולה ובלי רקע */
.nav__lang button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
}

/* ---- סל ---- */
.nav__cart {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.nav__cart:hover {
  border-color: var(--chalk);
  background: var(--band);
}

.nav__cart svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* מונה מרובע — לא עיגול. יושב על פינת השקית עצמה, וב-LTR הוא עובר
   לפינה הנגדית מעצמו דרך inset-inline-end. */
.nav__cart-count {
  position: absolute;
  top: 6px;
  inset-inline-end: 3px;
  min-width: 15px;
  padding: 1px 3px;
  border-radius: 1px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--chalk);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur) var(--ease);
}

.nav__burger:hover {
  border-color: var(--ink);
}

.nav__burger i {
  position: absolute;
  inset-inline: 12px;
  height: 1px;
  background: var(--ink);
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.nav__burger i:nth-child(1) {
  top: 16px;
}
.nav__burger i:nth-child(2) {
  top: 21px;
}
.nav__burger i:nth-child(3) {
  top: 26px;
}

.nav.is-open .nav__burger i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav.is-open .nav__burger i:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__burger i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------- 7. גיבור — פס אחד ברוחב מלא, טקסט מעל התמונה ---------- */
.hero {
  position: relative;
  min-height: min(80vh, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--band);
}

/* קירוב קל של הסצנה — חותך מהשוליים כדי שהתוכן ייראה גדול יותר,
   בלי לשנות את גובה הפס. חל גם על תמונת ה-poster, כך שאין קפיצה. */
video.hero__img {
  transform: scale(1.16);
  transform-origin: center center;
}

/* אותו כלל לתמונה ולווידאו — הווידאו יושב בדיוק במקום שהתמונה ישבה */
.hero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: var(--band);
}

/* שכבת קריאות שטוחה — עובדת מעל סצנה בהירה וגם כהה */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(35, 35, 31, 0.46);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 104px 88px;
  text-align: center;
}

.hero__box {
  max-width: 640px;
  margin-inline: auto;
}

.hero h1 {
  color: var(--paper);
}

.hero .eyebrow {
  color: rgba(253, 252, 249, 0.82);
  margin-bottom: var(--s3);
}

.hero__sub {
  margin: var(--s3) auto 0;
  max-width: 470px;
  font-size: var(--t-lead);
  line-height: 1.72;
  color: rgba(253, 252, 249, 0.9);
}

.hero .btn-row {
  margin-top: var(--s5);
}

/* ---------- 8. כותרת עמוד רזה ---------- */
.pagehead {
  padding-block: 56px 46px;
  background: var(--paper);
  border-bottom: var(--hair);
}

.pagehead--band {
  background: var(--band);
  border-bottom: 0;
}

.pagehead h1 {
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
}

.pagehead p {
  margin-top: var(--s3);
  max-width: var(--measure-lead);
}

/* ---------- 9. שלוש נקודות ערך — שלושה סמלים במרכז, בלי כרטיסים ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.values__item {
  padding-inline: clamp(16px, 2.6vw, 46px);
  border-inline-start: var(--hair);
  text-align: center;
}

.values__item:first-child {
  border-inline-start: 0;
}

/* אייקון קו — נטען מ-img/icons. alt ריק, כך שקובץ חסר נעלם בשקט. */
.values__icon {
  width: clamp(44px, 3.2vw, 56px);
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--s3);
}

.values__item h3 {
  margin-top: var(--s3);
  font-size: 1.125rem;
}

.values__item p {
  margin-top: 8px;
  margin-inline: auto;
  max-width: 30ch;
  font-size: 0.9375rem;
}

/* ---------- 10. כרטיס מוצר (משותף: בית · חנות · דף מוצר) ---------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  align-items: start; /* גובה לפי תוכן — בלי מתיחה ובלי חורים ריקים */
}

.pcard {
  display: block;
  color: inherit;
}

/* התמונה, השם והמחיר הם קישור אחד; הכפתור נשאר כפתור אמיתי */
.pcard__link {
  display: block;
  color: inherit;
}

.pcard__link > span {
  display: block;
}

.pcard__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--band);
  border-radius: var(--r);
  overflow: hidden;
}

/* על פס אפור — האריח הופך לבן כדי לשמור על הפרדה */
.sec--band .pcard__tile,
.pagehead--band .pcard__tile {
  background: var(--paper);
}

.pcard__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* כל התמונה נראית — לעולם לא נחתכת */
  transition: opacity var(--dur) var(--ease);
}

.pcard:hover .pcard__tile img {
  opacity: 0.88;
}

.pcard__badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  background: rgba(35, 35, 31, 0.88);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 7px 11px;
  border-radius: var(--r);
}

.pcard__name {
  font-family: var(--f-disp);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  line-height: 1.35;
  margin-top: 16px;
  min-height: 2.7em; /* שתי שורות שמורות — הכפתורים מיושרים בלי חור גדול */
}

.pcard__price {
  font-family: var(--f-body);
  font-size: 0.875rem;
  color: var(--graphite);
  text-align: center;
  margin-top: 2px;
}

/* ---- מחיר במבצע: הישן מחוק בקו, החדש מודגש ----
   inline-block + isolate: בלעדיהם ה-bidi מערבב את שני המחירים
   זה בזה (ספרות LTR בתוך פסקה RTL) והם נדרסים אחד על השני. */
.price-was,
.price-now {
  display: inline-block;
  unicode-bidi: isolate;
}

.price-was {
  color: var(--graphite);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-inline-start: 10px;
  opacity: 0.85;
}

.price-now {
  font-weight: inherit;
  color: inherit;
}

.price-now--sale {
  font-weight: 700;
  color: var(--ink);
}

.pcard__badge--sale {
  background: var(--olive);
}

.pcard__cta {
  margin-top: 12px;
}

/* שבבי קטגוריה */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 9px 16px;
  border: 1px solid var(--chalk);
  border-radius: var(--r);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* שבב "חיפוש פעיל" — נוסף בזמן ריצה כשיש ?q= בכתובת */
.chip--clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-style: dashed;
  color: var(--ink);
}

.chip--clear span {
  font-size: 1rem;
  line-height: 1;
  color: var(--graphite);
}

.shop-empty {
  padding-block: var(--s7);
  text-align: center;
  color: var(--graphite);
}

/* ---------- 11. טיפולי תמונה — הכול מרובע, בלי עיגולים ---------- */

/* A · תמונה חשופה */
.img-plain img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* B · מסגרת פנימית דקה (פספרטו) */
.img-mat {
  background: var(--paper);
  border: var(--hair);
  padding: 10px;
}

.img-mat img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* C · בלוק מלא מוסט מאחורי התמונה */
.img-offset {
  position: relative;
  isolation: isolate;
}

.img-offset::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-end: -24px;
  inset-inline-start: -24px;
  width: 58%;
  height: 62%;
  background: var(--olive);
}

.img-offset img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* D · זוג חופף — נחיתה גדולה + פורטרט מעליה */
.img-pair {
  position: relative;
  margin-bottom: 64px;
}

.img-pair__main img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.img-pair__over {
  position: absolute;
  z-index: 2;
  inset-block-end: -56px;
  inset-inline-start: -32px;
  width: 46%;
  background: var(--paper); /* הרווח הבהיר בין שתי התמונות */
  padding: 10px;
}

.img-pair__over img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* בזיגזג הזוג נושק לקצה הימני של החלון — לכן הפורטרט נתלה לצד הפנימי
   (לכיוון הטקסט), אחרת היה נחתך מחוץ למסך. הוא גם נתלה עמוק יותר:
   הזנב הזה הוא מה שמצטלב עם התמונה של פס הסדנאות שמתחתיו. */
.zig--media-right .img-pair {
  --hang: clamp(72px, 11.8vw, 170px);
  margin-bottom: var(--hang);
}

.zig--media-right .img-pair__over {
  inset-block-end: calc(-1 * var(--hang));
  inset-inline-start: auto;
  inset-inline-end: -34px;
  width: 47%;
}

.figcap {
  margin-top: var(--s4);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--graphite);
}

/* ---------- 12. פסים: תמונה + טקסט ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.split--wide-media {
  grid-template-columns: 1.15fr 1fr;
}

.split__text .eyebrow {
  margin-bottom: var(--s3);
}

.split__text h2 + p {
  margin-top: var(--s4);
}

.split__text p + p {
  margin-top: var(--s3);
}

.split__text .btn-row {
  margin-top: var(--s4);
}

.split__list {
  margin-top: var(--s4);
  border-top: var(--hair);
}

.split__list li {
  padding-block: 12px;
  border-bottom: var(--hair);
  font-size: 0.9375rem;
}

.split__list li b {
  font-family: var(--f-body);
  font-weight: 600;
  color: var(--ink);
}

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

.zig {
  display: grid;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

/* [תמונה | טקסט] — התמונה בעמודה הראשונה = ימין ב-RTL */
.zig--media-right {
  grid-template-columns: 1fr 1.06fr;
}

/* [טקסט | תמונה] — התמונה בעמודה השנייה = שמאל ב-RTL.
   הטקסט מקבל כאן את העמודה הרחבה; התמונה מפצה בפריצה לקצה השמאלי. */
.zig--media-left {
  grid-template-columns: 1.05fr 1fr;
}

/* שני פסי ההצלבה מקבלים את המיכל הרחב — כך גם התמונה נושקת לקצה
   וגם הטקסט נדחף החוצה לקצה הנגדי, ולא נשאר אי צר באמצע המסך. */
.sec--zig-top > .wrap,
.sec--zig-bottom > .wrap {
  max-width: var(--maxw-zig);
}

/* פריצה מה-wrap עד קצה החלון.
   מאפיינים פיזיים בכוונה — האתר תמיד RTL; css/i18n.css מהפך אותם. */
.zig--media-right .zig__media {
  margin-right: calc(-1 * var(--bleed));
}

.zig--media-left .zig__media {
  margin-left: calc(-1 * var(--bleed));
}

/* החלל שבין הטקסט לתמונה — רק בשני העמודות, ורק מ-1025 ומעלה.
   מתחת לזה §18 פורם את הזיגזג לעמודה אחת וה-gap הופך למרווח אנכי,
   ולכן אסור לגעת בו שם. row-gap נשמר מהכלל הכללי של .zig. */
@media (min-width: 1025px) {
  .zig--media-right,
  .zig--media-left {
    column-gap: var(--zig-gap);
  }
}

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

   רק מ-1025 ומעלה: מתחת לזה הזיגזג ממילא עמודה אחת בלי פריצה,
   ושם התמונה צריכה להישאר ביחס הטבעי שלה ולא להיחתך. */
@media (min-width: 1025px) {
  .sec--zig-top .img-pair__main img {
    max-height: 600px;
    object-fit: cover;
    object-position: center;
  }

  .sec--zig-bottom .zig__media img {
    max-height: 560px;
  }
}

/* הפורטרט התלוי נשאר צנוע גם כשהזוג מתרחב */
.zig--media-right .img-pair__over {
  width: min(47%, 420px);
}

/* טיפוגרפיה מעט מוגדלת לפס העליון — הדגשה עדינה, לא קפיצת מדרגה */
.zig__text--lg h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.375rem);
  line-height: 1.16;
}

.zig__text--lg p {
  font-size: clamp(1rem, 1.08vw, 1.09rem);
  line-height: 1.8;
  max-width: var(--measure-tight);
}

.zig__text--lg .btn {
  padding: 12px 26px;
  font-size: 0.9375rem;
}

.zig__text--lg .split__list li {
  font-size: clamp(0.94rem, 0.95vw, 1rem);
  padding-block: 13px;
}

/* ההצלבה האנכית — הפס העליון בלי ריפוד תחתון, התחתון נשאב מעלה */
.sec--zig-top {
  padding-block: 84px 0;
}

/* הריפוד העליון מזיז את שתי העמודות יחד — כך נפתח אוויר מתחת לזנב
   של התמונה שמעליה, בלי לשבור את היישור בין התמונה להסבר שלצדה. */
.sec--zig-bottom {
  padding-block: clamp(28px, 3.4vw, 56px) 80px;
}

.sec--zig-top .zig__text {
  margin-top: clamp(4px, 0.8vw, 14px);
}

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

   1. שוליים עליונים זהים לשניהם — ההיסט המכויל שמפנה את הזנב של
      התמונה מהפס שמעליה נשמר, ומופעל על שתי העמודות באותה מידה.
   2. align-items: center על השורה — ומכיוון שהשוליים זהים, מרכז שני
      הבלוקים יוצא בדיוק על אותו קו (m + H/2 לשניהם).

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

.sec--zig-bottom .zig {
  align-items: center;
}

/* הנשימה הגדולה של הדף — בין תמונת הסדנאות לבלוק "מי אני".
   כאן נגמר רצף ההצלבה ומתחיל פרק חדש, ולכן זה השבר הגדול ביותר בדף
   ולא עוד מרווח בין פסים. בורר אחים כדי לא לגעת ב-HTML של <main>
   (מפתחות ה-CMS לפי מקום), וזה גם מגדיר את זה כיחס בין השניים ולא
   כערך שיושב על .sec כללי. יחד עם ה-80px התחתונים של פס הסדנאות
   זה יוצא ~320px ב-1920. */
.sec--zig-bottom + .sec {
  padding-top: clamp(88px, 12.5vw, 252px);
}

.sec--zig-bottom .zig__media,
.sec--zig-bottom .zig__text {
  margin-top: clamp(26px, 3vw, 46px);
}

/* ההסבר גבוה מתמונת 16:9, ולכן היה נפער שטח ריק לצדה.
   יחס 3:2 מגביה אותה ומיישר את שתי העמודות. */
.sec--zig-bottom .zig__media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* בין 1025 ל-1360 עמודת הטקסט מצטמצמת והכותרת נשפכת לשורה נוספת,
   ולכן ההצלבה מרוככת כאן — פחות טיפוס מלמטה, זנב ארוך יותר מלמעלה. */
@media (min-width: 1025px) and (max-width: 1360px) {
  .zig--media-right .img-pair {
    --hang: clamp(96px, 12vw, 154px);
  }

  .zig--media-right .img-pair__over {
    inset-inline-end: -18px;
    width: 44%;
  }
}

/* ---------- 13. רצועת אינסטגרם ---------- */
.igstrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: var(--s5);
}

.igstrip a {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border-radius: var(--r);
  overflow: hidden;
}

.igstrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur) var(--ease);
}

.igstrip a:hover img {
  opacity: 0.85;
}

/* ---------- 14. כותרת תחתונה ---------- */
.footer {
  background: var(--paper);
  border-top: var(--hair);
  padding-block: 60px 28px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s6);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__logo {
  width: 50px;
  height: 45px;
  object-fit: contain;
}

.footer h4 {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.footer li + li {
  margin-top: 10px;
}

.footer a {
  font-size: 0.875rem;
  color: var(--graphite);
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.footer a:hover {
  color: var(--ink);
  border-bottom-color: var(--chalk);
}

.footer__note {
  max-width: var(--measure-tight);
  margin-top: var(--s4);
  font-size: 0.875rem;
}

.footer__base {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--graphite);
}

/* ---------- 15. דף מוצר ---------- */
.pdp {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* הגלריה בעמודה השנייה = צד שמאל ב-RTL · הפרטים בעמודה הראשונה = צד ימין */
.pdp__gallery {
  order: 2;
}

.pdp__info {
  order: 1;
  padding-top: var(--s2);
}

.pdp__main {
  aspect-ratio: 1 / 1;
  background: var(--band);
  border-radius: var(--r);
  overflow: hidden;
}

.pdp__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  background: var(--band);
  border: 1px solid transparent;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumb:hover {
  border-color: var(--chalk);
}

.thumb[aria-current="true"] {
  border-color: var(--ink);
}

.pdp__crumb {
  font-size: 0.875rem;
  color: var(--graphite);
  margin-bottom: var(--s4);
}

.pdp__crumb a:hover {
  color: var(--ink);
}

.pdp__cat {
  margin-bottom: var(--s3);
}

.pdp h1 {
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}

.pdp__price {
  margin-top: var(--s3);
  font-family: var(--f-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

.pdp__unit {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--graphite);
  margin-inline-start: 10px;
}

.pdp__blurb {
  margin-top: var(--s4);
  padding-bottom: var(--s5);
  border-bottom: var(--hair);
}

.pdp__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s3);
  margin-top: var(--s5);
}

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--chalk);
  border-radius: var(--r);
  overflow: hidden;
}

.qty button {
  width: 40px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.qty button:hover {
  background: var(--band);
}

.qty__val {
  min-width: 46px;
  display: grid;
  place-items: center;
  border-inline: 1px solid var(--chalk);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pdp__buy .btn {
  flex: 1 1 200px;
}

.pdp__details {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--hair);
}

.pdp__details h2 {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.pdp__details p + p {
  margin-top: var(--s3);
}

.pdp__note {
  margin-top: var(--s4);
  font-size: 0.875rem;
  color: var(--graphite);
}

/* מדף "אולי תאהבו גם את זה" */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* ---------- 16. טופס יצירת קשר ---------- */
.contact {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

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

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--chalk);
  border-radius: var(--r);
  padding: 11px 13px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.7;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B6A60' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 12px;
  padding-inline-end: 38px;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--graphite);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--chalk);
}

.form-actions {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

.form-actions p {
  flex: 1 1 220px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--graphite);
}

.formmsg {
  margin-top: var(--s4);
  padding: 16px 18px;
  border: 1px solid var(--chalk);
  border-inline-start: 3px solid var(--olive);
  border-radius: var(--r);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink);
}

.aside__block + .aside__block {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: var(--hair);
}

.aside__block h3 {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.contact-list li + li {
  margin-top: var(--s4);
}

.contact-list b {
  display: block;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 2px;
}

.contact-list a {
  font-size: 0.9375rem;
  color: var(--graphite);
  border-bottom: 1px solid var(--chalk);
  padding-bottom: 1px;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.contact-list a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 17. תצוגה מוגדלת של המוצר (לייטבוקס) ----------
   רקע לבן לגמרי — רואים רק את המוצר. חצים בשני הצדדים, נקודות למטה.
   ב-RTL הגלריה מתקדמת שמאלה, ולכן החץ השמאלי = הבא.            */

.lbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

.lbox.is-open {
  opacity: 1;
}

html.lbox-open {
  overflow: hidden;
}

.lbox__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(58px, 8vh, 92px) clamp(66px, 9vw, 148px) clamp(10px, 2vh, 22px);
}

.lbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* חצים */
.lbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--chalk);
  border-radius: var(--r);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.lbox__nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.lbox__nav svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lbox__nav--next {
  left: clamp(10px, 2.4vw, 40px);
}

.lbox__nav--prev {
  right: clamp(10px, 2.4vw, 40px);
}

/* סגירה — פינה עליונה שמאלית (inline-end ב-RTL) */
.lbox__close {
  position: absolute;
  top: clamp(12px, 2.2vw, 26px);
  inset-inline-end: clamp(12px, 2.2vw, 26px);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.lbox__close:hover {
  color: var(--ink);
  border-color: var(--chalk);
}

.lbox__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* נקודות — אפורות, והנוכחית שחורה */
.lbox__dots {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: clamp(8px, 1.6vh, 16px) 16px clamp(20px, 3.4vh, 38px);
}

.lbox__dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lbox__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chalk);
  transition: background-color var(--dur) var(--ease);
}

.lbox__dot:hover::before {
  background: var(--graphite);
}

.lbox__dot[aria-current="true"]::before {
  background: var(--ink);
}

/* רמז שאפשר להגדיל */
.pdp__main {
  cursor: zoom-in;
}

/* ---------- 17ב. מגירת הסל ----------
   נכנסת מצד שמאל — שם יושב כפתור הסל בניווט ב-RTL. */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 180;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(35, 35, 31, 0.42);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}

.drawer.is-open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(452px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-inline-start: var(--hair);
  transform: translateX(-100%);
  transition: transform 260ms var(--ease);
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 22px var(--s4);
  border-bottom: var(--hair);
}

.drawer__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.drawer__head h2 {
  font-family: var(--f-disp);
  font-size: 1.25rem;
  font-weight: 500;
}

.drawer__count {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}

.drawer__close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.drawer__close:hover {
  color: var(--ink);
  border-color: var(--chalk);
}

.drawer__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s4);
}

/* מצב ריק — לא רק שורת טקסט: תווית, כותרת ומשפט אחד */
.drawer__empty {
  padding-block: var(--s6) var(--s5);
  border-bottom: var(--hair);
}

.drawer__empty h3 {
  margin-top: var(--s3);
  font-size: 1.1875rem;
}

.drawer__empty p {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  color: var(--graphite);
}

.drawer__foot {
  flex: 0 0 auto;
  padding: var(--s4);
  border-top: var(--hair);
  background: var(--paper);
}

.drawer__foot .btn {
  margin-top: var(--s4);
}

/* התקדמות למשלוח חינם — פס שטוח, בלי עיגולים ובלי צל */
.drawer__ship {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: var(--hair);
}

.drawer__hint {
  font-size: 0.8125rem;
  color: var(--olive);
}

.drawer__track {
  display: block;
  height: 2px;
  margin-top: 13px;
  background: var(--chalk);
}

.drawer__track i {
  display: block;
  height: 100%;
  background: var(--olive);
  transition: width var(--dur) var(--ease);
}

.drawer__note {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--graphite);
  text-align: center;
}

/* שורת מוצר בסל: תמונה · שם והסרה · יחידה ומחיר · בורר כמות וסך השורה */
.citem {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: var(--s3);
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: var(--hair);
}

.citem:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.citem__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--band);
  border-radius: var(--r);
  overflow: hidden;
}

.citem__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--dur) var(--ease);
}

.citem__thumb:hover img {
  opacity: 0.86;
}

.citem__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.citem__name {
  font-family: var(--f-disp);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.citem__name:hover {
  border-bottom-color: var(--chalk);
}

.citem__unit {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--graphite);
}

.citem__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: 12px;
}

.citem__total {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* הסרה שקטה — סימן דק בקצה השורה, לא כפתור מתחרה */
.citem__remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--chalk);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.citem__remove:hover {
  color: var(--ink);
  background: var(--band);
}

.citem__remove svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* בורר כמות מרובע */
.qty--sm button {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

.qty--sm .qty__val {
  min-width: 38px;
  font-size: 0.9375rem;
}

/* שורות סיכום — משותף למגירה ולעמוד התשלום */
.sumrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: 7px;
  font-size: 0.9375rem;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}

.sumrow span:last-child {
  color: var(--ink);
  white-space: nowrap;
}

.sumrow--save span:last-child {
  color: var(--olive);
  font-weight: 600;
}

.sumrow--muted span:last-child {
  color: var(--graphite);
}

.sumrow--total {
  margin-top: 10px;
  padding-top: var(--s3);
  border-top: var(--hair);
  font-size: 1rem;
}

.sumrow--total span {
  color: var(--ink);
  font-weight: 700;
}

.sumrow--total span:first-child {
  font-family: var(--f-disp);
  font-weight: 500;
}

/* ---------- 17ג. עמוד התשלום ---------- */

.checkout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.checkout__aside {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  border: var(--hair);
  border-radius: var(--r);
  padding: var(--s4);
  background: var(--paper);
}

.checkout__aside h2,
.checkout__block h2 {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.checkout__block + .checkout__block {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: var(--hair);
}

.checkout__hint {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--olive);
}

.checkout__note {
  margin-top: var(--s4);
  font-size: 0.8125rem;
  color: var(--graphite);
}

/* שורת מוצר בסיכום ההזמנה */
.olines {
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: var(--hair);
}

.oline {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
}

.oline:last-child {
  margin-bottom: 0;
}

.oline__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--band);
  border-radius: var(--r);
  overflow: hidden;
}

.oline__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.oline__qty {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  min-width: 18px;
  padding: 1px 4px;
  border-radius: var(--r);
  background: rgba(35, 35, 31, 0.88);
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.oline__main b {
  display: block;
  font-family: var(--f-disp);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.oline__unit {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--graphite);
}

.oline__price {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* בחירת שיטת משלוח */
.ship {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--chalk);
  border-radius: var(--r);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.ship + .ship {
  margin-top: 10px;
}

.ship:hover {
  border-color: var(--graphite);
}

.ship.is-on {
  border-color: var(--ink);
  background: var(--band);
}

.ship input {
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
  cursor: pointer;
}

.ship__label {
  display: block;
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.ship__note {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--graphite);
}

.ship__cost {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* אישור לדוגמה */
.checkout__done {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  padding: var(--s7) var(--s4);
}

.checkout__done h2 {
  font-family: var(--f-disp);
  font-size: var(--t-sec);
  font-weight: 400;
  margin-top: var(--s3);
}

.checkout__done p {
  margin: var(--s4) auto 0;
  max-width: 40ch;
}

/* משפט התודה — גדול יותר מהערת התצוגה שמתחתיו */
.checkout__thanks {
  font-size: var(--t-lead);
  line-height: 1.7;
  color: var(--ink);
}

.checkout__done .checkout__thanks + p {
  font-size: 0.9375rem;
  color: var(--graphite);
}

/* שלא ייפול הסימן ₪ לשורה נפרדת */
.checkout__done [data-done-total] {
  white-space: nowrap;
  color: var(--ink);
}

.checkout__done .btn-row {
  margin-top: var(--s5);
  justify-content: center;
}

.checkout__empty {
  padding-block: var(--s7);
  text-align: center;
}

.checkout__empty .btn-row {
  margin-top: var(--s4);
  justify-content: center;
}

/* ---------- 18. רספונסיביות ---------- */
@media (max-width: 1024px) {
  :root {
    --pad: 24px;
    --nav-h: 74px;
  }

  /* ---- ניווט מקופל: בורגר בימין · לוגו במרכז · סל בשמאל ----
     שתי השורות של הדסקטופ חוזרות לשורה אחת: grid-template-areas
     ממקם מחדש את שלושת הפריטים, ו-display:contents מפרק את שתי
     הקבוצות כך שהחיפוש, השפה והקישורים הופכים לפריטי רשת עצמאיים
     ויכולים לרדת לשורות נפרדות בתוך המגש הנפתח. */
  .nav__bar {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "burger brand cart";
    column-gap: var(--s3);
    padding-block: 7px;
    /* בנייד הפס חוזר לשוליים של הדף — הפס הרחב עם --nav-pad הוא
       פתרון לדסקטופ בלבד, שם יש 2000px להיצמד לקצותיהם. */
    padding-inline: var(--pad);
  }

  /* קו ההפרדה בין השורות שייך לפריסת שתי השורות בלבד */
  .nav__bar::before {
    display: none;
  }

  .nav__side--nav,
  .nav__side--util {
    display: contents;
  }

  .nav__burger {
    display: block;
    grid-area: burger;
    justify-self: start;
  }

  .nav__brand {
    grid-area: brand;
    justify-self: center;
    padding-block: 0;
  }

  .nav__crest {
    gap: 10px;
  }

  .nav__cart {
    grid-area: cart;
    justify-self: end;
    width: 46px;
    height: 46px;
  }

  .nav__cart svg {
    width: 24px;
    height: 24px;
  }

  .nav__nav,
  .nav__search,
  .nav__lang {
    display: none;
  }

  /* בתוך המגש הטופס כבר תופס את מלוא רוחב הדף, ולכן הלוח פשוט נצמד
     אליו. בלי זה ה---23rem של הדסקטופ היה מרחיב אותו מעבר לקצה: ה-
     overflow-x: clip מונע גלילה, אבל כמה פיקסלים מהלוח היו נחתכים. */
  .nav__sug {
    width: 100%;
    max-width: 100%;
  }

  .nav__logo {
    height: 44px;
  }

  .nav__mark {
    font-size: 1.0625rem;
    letter-spacing: 0.22em;
    margin-inline-end: -0.22em;
  }

  /* הקו והתת-כותרת הם רגע של השורה העליונה הרחבה — בפס המקופל
     הם רק היו מנפחים את הגובה. */
  .nav__rule,
  .nav__tagline {
    display: none;
  }

  /* המגש נפתח בתוך הזרימה — הכותרת הדביקה פשוט מתארכת */
  .nav.is-open .nav__bar {
    grid-template-areas:
      "burger brand  cart"
      "menu   menu   menu"
      "search search search"
      "lang   lang   lang";
    padding-bottom: var(--s5);
  }

  .nav.is-open .nav__nav {
    display: block;
    grid-area: menu;
    margin-top: var(--s3);
    border-top: var(--hair);
  }

  .nav.is-open .nav__search {
    display: flex;
    grid-area: search;
    margin-top: var(--s4);
  }

  .nav.is-open .nav__lang {
    display: flex;
    grid-area: lang;
    justify-self: start;
    margin-top: var(--s3);
    margin-inline-start: -9px;
  }

  .nav.is-open .nav__search-field {
    width: 100%;
  }

  .nav.is-open .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav.is-open .nav__links a {
    font-family: var(--f-disp);
    font-size: 1.25rem;
    padding-block: 15px;
    border-bottom: var(--hair);
  }

  .nav.is-open .nav__links li:last-child a {
    border-bottom: 0;
  }

  .pgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 20px;
  }

  .split,
  .split--wide-media,
  .pdp,
  .contact,
  .checkout {
    grid-template-columns: 1fr;
  }

  /* סיכום ההזמנה עולה למעלה ומפסיק להיצמד */
  .checkout__aside {
    position: static;
    order: -1;
  }

  /* הזיגזג נפרם לעמודה אחת — בלי פריצות ובלי הצלבה */
  .zig,
  .zig--media-right,
  .zig--media-left {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 52px);
  }

  .zig--media-right .zig__media,
  .zig--media-left .zig__media {
    margin-inline: 0;
  }

  /* התמונה תמיד ראשונה בנייד — גם בפס שבו הטקסט ראשון בקוד */
  .zig--media-left .zig__media {
    order: -1;
  }

  .sec--zig-top {
    padding-block: 68px 52px;
  }

  .sec--zig-bottom {
    padding-block: 0 60px;
  }

  .sec--zig-top .zig__text,
  .sec--zig-bottom .zig__text,
  .sec--zig-bottom .zig__media {
    margin-top: 0;
  }

  .zig--media-right .img-pair__over {
    inset-inline-end: -20px;
    width: 46%;
  }

  .pdp__gallery,
  .pdp__info {
    order: 0;
  }

  .pdp__info {
    padding-top: 0;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .rail {
    grid-auto-columns: 40%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s3);
    -webkit-overflow-scrolling: touch;
  }

  .rail > * {
    scroll-snap-align: start;
  }
}

@media (max-width: 860px) {
  .values {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .values__item {
    padding-inline: 0;
    border-inline-start: 0;
    border-top: var(--hair);
    padding-top: var(--s5);
  }

  .values__item:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .igstrip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  :root {
    --pad: 20px;
  }

  .sec {
    padding-block: 60px 48px;
  }

  .sec--tight {
    padding-block: 48px 40px;
  }

  .sec__head {
    margin-bottom: var(--s5);
  }

  .hero {
    min-height: 70vh;
  }

  .hero__inner {
    padding-block: 80px 68px;
  }

  .hero .btn-row {
    margin-top: var(--s5);
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn {
    width: 100%;
  }

  .pagehead {
    padding-block: 40px 34px;
  }

  .pgrid {
    gap: 28px 14px;
  }

  .pcard__name {
    font-size: 0.9375rem;
    margin-top: 12px;
  }

  .pcard__cta {
    margin-top: 10px;
  }

  .btn {
    padding: 10px 18px;
  }

  .pcard__cta .btn {
    padding-inline: 10px;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
  }

  /* היסטים מצומצמים כדי שלא תיווצר גלילה אופקית */
  .img-offset::before {
    inset-block-end: -14px;
    inset-inline-start: -14px;
  }

  .img-pair {
    margin-bottom: 44px;
  }

  .img-pair__over {
    inset-block-end: -36px;
    inset-inline-start: -12px;
    width: 48%;
    padding: 7px;
  }

  .thumb {
    width: 72px;
    height: 72px;
  }

  .pdp__buy .btn {
    flex: 1 1 100%;
  }

  .nav__logo {
    height: 42px;
  }

  .ship {
    grid-template-columns: auto 1fr;
    row-gap: 6px;
  }

  .ship__cost {
    grid-column: 2;
  }

  .rail {
    grid-auto-columns: 62%;
    gap: 16px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__base {
    flex-direction: column;
    gap: var(--s2);
  }

  /* לייטבוקס בנייד — חצים קטנים יותר, קרובים לקצה */
  .lbox__stage {
    padding: 62px clamp(52px, 14vw, 68px) 8px;
  }

  .lbox__nav {
    width: 44px;
    height: 44px;
  }

  .sec--zig-top {
    padding-block: 56px 44px;
  }
}

/* ---------- 19. תנועה מופחתת ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   §20 · התאמות iOS / אייפון
   נוסף אחרי בדיקת מכשירים ברוחב 375–430. כל כלל כאן פותר תקלה שנמדדה,
   לא הנחה תיאורטית.
   ========================================================================== */

/* 20א · ספארי ב-iOS מזגזג ומזם את כל העמוד כשנוגעים בשדה שהגופן בו קטן
   מ-16px. נמדד: שדה החיפוש בניווט היה 14px. 16px מבטל את הזום לגמרי.
   חל רק על מסכי מגע/צר — בדסקטופ הטיפוגרפיה נשארת כמו שאושרה. */
@media (max-width: 1024px) {
  input,
  select,
  textarea,
  .field input,
  .field select,
  .field textarea,
  .nav__search input {
    font-size: 16px;
  }

  /* יעד נגיעה גם לכפתורי הטפסים — נמדדו 36px גובה, מתחת ל-44 של אפל.
     נמדדו גם: שבבי הקטגוריות בחנות 33px, וכפתורי הכמות במוצר 28px. */
  .btn,
  .form-actions .btn,
  .pcard__cta .btn,
  .chip {
    min-height: 44px;
  }

  .qty button,
  .qty--sm button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 20ב · יעדי נגיעה: אפל דורשת 44×44pt. הכפתור של הסל נמדד 42×42. */
.nav__cart,
.nav__burger,
[data-cart-open] {
  min-width: 44px;
  min-height: 44px;
}

/* 20ג · אזורים בטוחים — מגרעת/Dynamic Island והפס התחתון.
   עובד רק יחד עם viewport-fit=cover ב-<meta viewport>, שנוסף בחמשת הדפים. */
@supports (padding: env(safe-area-inset-left)) {
  .nav__bar {
    padding-inline-start: max(var(--pad), env(safe-area-inset-right));
    padding-inline-end: max(var(--pad), env(safe-area-inset-left));
  }
  .footer {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  .drawer__panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 20ד · ספארי מנפח טקסט באוריינטציה לרוחב בלי הכלל הזה. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 20ה · מצבי :hover "נתקעים" אחרי נגיעה במסך מגע. */
@media (hover: none) {
  a:hover,
  .btn:hover,
  .chip:hover,
  .pcard:hover {
    background-color: initial;
  }
}