/**
 * product-atf.css - החלק העליון של דף המוצר.
 *
 * רק סקשנים 1-8. כל צבע, מרווח וגודל מגיע מטוקן; אין hex בקובץ הזה.
 * הכיווניות לוגית בלבד (inline-start/end), כי הדף עברי ולא נכתב פעמיים.
 */

/* ── 2. פירורי לחם ───────────────────────────────────────────────────── */

.dd-crumbs {
  padding-block: var(--dd-s-3);
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
}

.dd-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dd-s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dd-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--dd-s-2);
}

.dd-crumbs__link { color: var(--dd-muted); }
.dd-crumbs__link:hover { color: var(--dd-ink); }

.dd-crumbs__sep { color: var(--dd-muted); }

.dd-crumbs__current {
  color: var(--dd-ink);
  font-weight: var(--dd-fw-medium);
}

/* ── פריסת החלק העליון ───────────────────────────────────────────────── */

/*
 * המרווח בין הגלריה לתקציר. 32px היה צפוף מדי בין רצועת התמונות
 * הקטנות לכותרת (הערת הלקוח, 25/07). --dd-s-10 הוא 40px ולא 44 -
 * טוקן קיים עדיף על מספר קשיח, וההפרש אינו נראה. זהו גם הערך שכבר
 * נקבע לפריסה הדו-טורית ב-900, ולכן שני המצבים מתיישרים.
 */
.dd-atf {
  display: flex;
  flex-direction: column;
  gap: var(--dd-s-10);
  padding-block: var(--dd-s-5) var(--dd-s-12);
}

/* ── 3. גלריה ────────────────────────────────────────────────────────── */

/*
 * הבמה במסגרת. עד 23/07 היא הייתה משטח לבן בלי גבול על רקע לבן,
 * ולכן התמונה נראתה כמרחפת בלי התחלה וסוף.
 *
 * ריבוע ולא 5:4 - הכרעת הלקוח מ-25/07. הרינדורים נושאים 46% שוליים
 * לבנים צרובים (התוכן הוא 1493×645 בתוך 1600×1200), ולכן השולחן נראה
 * קטן בכל יחס שנבחר. במקום לגעת בקבצים הוגדלה הקוביה שבה הוא יושב;
 * כיוון שהתמונה נמתחת לרוחב הבמה, השולחן גדל יחד איתה.
 */
.dd-gallery__stage {
  position: relative;
  background: var(--dd-stage);
  border: 1.5px solid var(--dd-hairline);
  border-radius: var(--dd-r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/*
 * בלי ריפוד תחתון. הוא נוסף כדי לתת אוויר מתחת לשולחן במלבן צר;
 * בקוביה יש אוויר סימטרי מכל צד, והריפוד רק הסיט את השולחן מהמרכז.
 */
.dd-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * Play על התמונה הראשית (05/10). מרכז הבמה, מעל השולחן - כמו בעלי אקספרס.
 * כשהסרטון מתנגן הוא תופס את הבמה במקום התמונה, באותה מסגרת.
 */
.dd-gallery__play {
  position: absolute;
  inset-block-end: var(--dd-s-4);
  inset-inline-start: 50%;
  translate: 50% 0;
  display: inline-flex;
  align-items: center;
  gap: var(--dd-s-2);
  padding: 10px 18px 10px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
}

.dd-gallery__play:hover,
.dd-gallery__play:focus-visible { background: #111; }

.dd-gallery__playIcon {
  inline-size: 0;
  block-size: 0;
  border-block: 7px solid transparent;
  border-inline-end: 11px solid currentColor;
}

.dd-gallery__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  background: #000;
  z-index: 3;
}

.dd-gallery__stage.is-playing .dd-gallery__img,
.dd-gallery__stage.is-playing .dd-gallery__play { visibility: hidden; }

/*
 * כפתור השמירה על התמונה, בצד שמאל שלה. ב-RTL זהו inline-end.
 * הוא עבר לכאן מהכותרת, ששם הוא גזל שליש מהרוחב והכריח אותה
 * להישבר לשלוש שורות.
 */
.dd-gallery__fav {
  position: absolute;
  inset-block-start: var(--dd-s-4);
  inset-inline-end: var(--dd-s-4);
  z-index: 1;
}

/* ── סרט "רב מכר" ────────────────────────────────────────────────────
 * הזנב יושב על אלמנט משלו ולא כ-clip-path על הסרט: חיתוך על האלמנט
 * שנושא את הטקסט היה חותך גם אותו ברגע שהמחרוזת מתארכת בתרגום.
 */

.dd-ribbon {
  position: relative;   /* עוגן לזנב */
  display: inline-flex;
  align-items: center;
  gap: var(--dd-s-2);
  padding: var(--dd-s-2) var(--dd-s-4);
  background: var(--dd-ink);
  color: var(--dd-white);
  font-size: var(--dd-fs-xs);
  font-weight: var(--dd-fw-xbold);
  letter-spacing: .02em;
  border-start-start-radius: var(--dd-r-sm);
  border-end-start-radius: var(--dd-r-sm);
  line-height: 1.15;
}

.dd-ribbon__star { color: var(--dd-gold-on-dark); font-size: .9em; }

/*
 * הזנב מצביע פנימה אל התמונה: ב-RTL הסרט נצמד לימין, ולכן החוד
 * פונה שמאלה. 10px רוחב - קצר יותר נקרא כפגם חיתוך ולא כצורה.
 */
/*
 * ממוקם מוחלט ולא כפריט flex. כפריט הוא ישב בתוך הריפוד הפנימי של
 * הסרט, ובאותו שחור - כלומר נבלע בו ולא נראה כזנב כלל. `inset-inline-end`
 * שלילי מוציא אותו החוצה, מעבר לקצה הבלוק.
 *
 * clip-path פיזי ולא לוגי - אין לו גרסה לוגית. הסרט נצמד לימין
 * התמונה, הזנב יוצא ממנו שמאלה, ולכן החוד בקצה הפיזי השמאלי.
 */
.dd-ribbon__tail {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -11px;
  inline-size: 11px;
  background: var(--dd-ink);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/*
 * מיקום הסרט על התמונה - אחרי הגדרת .dd-ribbon ולא לפניה.
 * שני הבוררים באותה ספציפיות, ולכן המאוחר מנצח: כשהכלל הזה ישב למעלה,
 * ה-position: relative של הסרט דרס אותו והתגית נשמטה מתחת לתמונה.
 */
.dd-gallery__badge {
  position: absolute;
  inset-block-start: var(--dd-s-4);
  inset-inline-start: var(--dd-s-4);
}

.dd-gallery__actions {
  position: absolute;
  inset-block-end: var(--dd-s-3);
  inset-inline-end: var(--dd-s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-s-2);
}

.dd-gallery__actionIcon {
  display: inline-flex;
  color: var(--dd-ink);
}

.dd-gallery__thumbs {
  display: flex;
  gap: var(--dd-s-3);
  list-style: none;
  margin: var(--dd-s-3) 0 0;
  padding: 0;
}

.dd-gallery__thumbItem { flex: 1 1 0; min-width: 0; }

/* מסגרת קבועה ולא שקופה - אותו טיפול שקיבלה הבמה שמעליהן. */
.dd-gallery__thumb {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: var(--dd-stage);
  border: 1.5px solid var(--dd-hairline);
  border-radius: var(--dd-r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dd-t-fast) var(--dd-ease);
}

.dd-gallery__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.dd-gallery__thumb[aria-pressed="true"] { border-color: var(--dd-ink); border-width: 2.5px; }

/* תמונית גלריה היא צילום בחלל ולא רינדור על לבן - ממלאת את המסגרת. */
.dd-gallery__thumb--photo img { object-fit: cover; }

/* ── 4. תקציר ────────────────────────────────────────────────────────── */

.dd-summary {
  display: flex;
  flex-direction: column;
  gap: var(--dd-s-5);
}

/*
 * הרווח אחרי הבלוק הזה גדול מהרווח שבתוכו: הכותרת והדירוג הם יחידה
 * אחת, וקופסת המחיר היא יחידה אחרת. עד 23/07 שתיהן היו במרחק זהה
 * זו מזו ומהתוכן שביניהן, והעין קראה אותן כגוש אחד.
 */
.dd-summary__head {
  display: grid;
  gap: var(--dd-s-2);
  margin-block-end: var(--dd-s-3);
}

/*
 * clamp צר יותר מ---dd-fs-hero הכללי: הכותרת של המוצר יושבת בטור
 * צר ולא על רוחב הדף, ובקצה העליון של הסקאלה היא נשברה לשלוש שורות
 * גם אחרי שכפתור השמירה פינה לה מקום. נמדד ב-390, 768 ו-1440.
 */
.dd-summary__title {
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2rem);
  line-height: var(--dd-lh-tight);
  margin: 0;
  text-wrap: balance;
}

/* שורת המידות מתחת לשם (05/10): העובדה הראשונה שקונה בודק - האם זה נכנס. */
.dd-summary__dims {
  margin: var(--dd-s-2) 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dd-ink);
  font-variant-numeric: tabular-nums;
}

.dd-summary__rating {
  display: flex;
  align-items: center;
  gap: var(--dd-s-2);
  font-size: var(--dd-fs-sm);
  color: var(--dd-muted);
}

.dd-summary__ratingNum {
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
}

.dd-summary__reviewsLink { color: var(--dd-muted); text-decoration: underline; }
.dd-summary__reviewsLink:hover { color: var(--dd-ink); }

/* מחיר */

.dd-price {
  display: grid;
  gap: var(--dd-s-3);
  padding: var(--dd-s-5);
  background: var(--dd-surface-warm);
  border-radius: var(--dd-r-md);
}

.dd-price__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dd-s-3);
}

.dd-price__now {
  font-size: var(--dd-fs-h2);
  font-weight: var(--dd-fw-black);
  color: var(--dd-ink);
}

.dd-price__was {
  color: var(--dd-muted);
  font-size: var(--dd-fs-sm);
}

/*
 * מוצר בלי מחיר: ההצעה היא המחיר. משקל קרוב ל-.dd-price__now, אבל גודל
 * h3 ולא h2 - מחרוזת עברית ארוכה בגודל של מספר הייתה נשברת לשתי שורות בנייד.
 */
.dd-price__quote {
  margin: 0;
  font-size: var(--dd-fs-h3);
  font-weight: var(--dd-fw-black);
  color: var(--dd-ink);
}

.dd-price__quoteNote {
  margin: 0;
  font-size: var(--dd-fs-sm);
  color: var(--dd-n-700);
}

.dd-price__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dd-s-2);
}

.dd-price__note {
  font-size: var(--dd-fs-xs);
  color: var(--dd-n-700);
}

/* טיימר */

.dd-countdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dd-s-3);
  padding-block-start: var(--dd-s-3);
  border-block-start: 1px solid var(--dd-n-200);
}

.dd-countdown__label {
  font-size: var(--dd-fs-xs);
  color: var(--dd-n-700);
  font-weight: var(--dd-fw-medium);
}

/* השעון עצמו LTR - ימים:שעות:דקות:שניות נקראים כך גם בעברית. */
.dd-countdown__clock {
  display: flex;
  align-items: flex-start;
  gap: var(--dd-s-2);
  direction: ltr;
  unicode-bidi: isolate;
}

.dd-countdown__unit {
  display: grid;
  justify-items: center;
  min-width: 2.5rem;
}

.dd-countdown__num {
  font-size: var(--dd-fs-h3);
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
  line-height: 1;
}

.dd-countdown__unitLabel {
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
}

.dd-countdown__sep {
  color: var(--dd-muted);
  font-weight: var(--dd-fw-bold);
  line-height: 1.1;
}

/* בוררים */

.dd-picker { display: grid; gap: var(--dd-s-3); }

.dd-picker__head {
  display: flex;
  align-items: baseline;
  gap: var(--dd-s-2);
}

.dd-picker__title {
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
}

.dd-picker__value {
  font-size: var(--dd-fs-sm);
  color: var(--dd-muted);
}

.dd-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-s-2);
}

/* בורר הגוונים והרגליים יושבים ב-components.css - שם הם מוגדרים. */

/* סיכום הבחירה */

.dd-summary__selection {
  margin: 0;
  padding: var(--dd-s-3) var(--dd-s-4);
  background: var(--dd-surface);
  border-inline-start: 3px solid var(--dd-ink);
  border-radius: var(--dd-r-sm);
  font-size: var(--dd-fs-sm);
}

.dd-summary__selectionLabel { color: var(--dd-muted); }

.dd-summary__selectionValue {
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
}

/* קריאות לפעולה */

.dd-summary__cta { display: grid; gap: var(--dd-s-3); }

.dd-summary__ctaNote {
  margin: 0;
  text-align: center;
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
}

/* רצועת אמון */

.dd-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-s-4);
  margin: 0;
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
}

/* ── 5. למה אנחנו ────────────────────────────────────────────────────── */

.dd-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dd-s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * ארבעה מספרים חשופים על שמנת נקראו כרשימה ולא כארבע הבטחות. כרטיס
 * ממוסגר עם אייקון נותן לכל אחת גבול משלה. מסגרת ולא צל - שפת 2026.
 */
.dd-why__item {
  display: grid;
  gap: var(--dd-s-1);
  justify-items: center;
  text-align: center;
  padding: var(--dd-s-6) var(--dd-s-4);
  border: 1.5px solid var(--dd-hairline);
  border-radius: var(--dd-r-lg);
  background: var(--dd-white);
}

/*
 * חמישה פריטים בשתי עמודות משאירים את האחרון לבד בשורה, וקוביה בודדת
 * ברוחב חצי נקראת כטעות פריסה ולא כפריט. פרישה על שני הטורים הופכת
 * אותה לסגירה של הרצועה.
 */
.dd-why__item:nth-child(5) { grid-column: 1 / -1; }

.dd-why__icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-block-end: var(--dd-s-1);
}

.dd-why__big {
  font-size: var(--dd-fs-h2);
  font-weight: var(--dd-fw-black);
  color: var(--dd-ink);
  line-height: var(--dd-lh-tight);
}

.dd-why__prefix {
  font-size: var(--dd-fs-body);
  font-weight: var(--dd-fw-medium);
  color: var(--dd-n-700);
}

.dd-why__label {
  font-size: var(--dd-fs-sm);
  color: var(--dd-n-700);
}

/* ── 6. טאבים ────────────────────────────────────────────────────────── */

/*
 * safe center ולא center.
 *
 * הרצועה ממורכזת מול .dd-tabs__body, שמוגבל ל-68ch וממורכז בעצמו;
 * בלי זה הטאבים נצמדים לקצה ההתחלה ב-RTL וסוטים 317px ממרכז התוכן.
 *
 * ה-safe הוא העיקר: ב-390 הרצועה גולשת ונגללת אופקית, ומרכוז רגיל
 * היה דוחף את הגלישה לשני הכיוונים ומוציא את הטאב הראשון אל מחוץ
 * לתחילת אזור הגלילה, בלי דרך להגיע אליו.
 */
.dd-tabs__list {
  display: flex;
  justify-content: safe center;
  gap: var(--dd-s-1);
  border-block-end: 1px solid var(--dd-hairline);
  margin-block-end: var(--dd-s-6);
}

.dd-tabs__tab {
  flex: 0 0 auto;
  min-height: 48px;
  padding: var(--dd-s-3) var(--dd-s-4);
  background: transparent;
  border: 0;
  border-block-end: 3px solid transparent;
  color: var(--dd-muted);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dd-t-fast) var(--dd-ease),
              border-color var(--dd-t-fast) var(--dd-ease);
}

.dd-tabs__tab:hover { color: var(--dd-ink); }

.dd-tabs__tab[aria-selected="true"] {
  color: var(--dd-ink);
  font-weight: var(--dd-fw-bold);
  border-block-end-color: var(--dd-ink);
}

.dd-tabs__body { max-width: 68ch; }

.dd-tabs__panel { line-height: var(--dd-lh-body); }

.dd-tabs__panel:focus-visible { outline-offset: 4px; }

.dd-tabs__subtitle {
  font-size: var(--dd-fs-h3);
  margin-block-end: var(--dd-s-2);
}

.dd-tabs__list-plain {
  padding-inline-start: var(--dd-s-5);
  list-style: disc;
}

/* מפרט */

.dd-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dd-fs-sm);
}

.dd-specs th,
.dd-specs td {
  padding: var(--dd-s-3) var(--dd-s-2);
  text-align: start;
  border-block-end: 1px solid var(--dd-hairline);
  vertical-align: top;
}

.dd-specs th {
  color: var(--dd-muted);
  font-weight: var(--dd-fw-medium);
  width: 45%;
}

.dd-specs td { color: var(--dd-ink); font-weight: var(--dd-fw-medium); }

/* ביקורות */

.dd-reviews {
  display: grid;
  gap: var(--dd-s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dd-reviews__head {
  display: flex;
  align-items: center;
  gap: var(--dd-s-2);
  margin-block-end: var(--dd-s-2);
}

.dd-reviews__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--dd-r-pill);
  background: var(--dd-surface-warm);
  color: var(--dd-ink);
  font-weight: var(--dd-fw-bold);
  flex: 0 0 auto;
}

.dd-reviews__name { font-weight: var(--dd-fw-bold); }

.dd-reviews__text { margin: 0; color: var(--dd-n-700); }

/* ── 7. שני מצבי רוח ─────────────────────────────────────────────────── */

.dd-modes__head { text-align: center; margin-inline: auto; }

.dd-modes__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: var(--dd-s-8) var(--dd-s-4);
  background: var(--dd-stage);
  border-radius: var(--dd-r-lg);
}

/* הרוחב הוא הסיפור כולו: הסגור הוא היחס מהפתוח, והמעבר ביניהם מונפש. */
.dd-modes__table {
  position: relative;
  display: flex;
  align-items: center;
  /*
   * ההגדלות נכנסות מצד אחד ולא מתפצלות לשניים - כך המנגנון של סיאטל
   * באמת עובד. justify-content: center הציג פתיחה סימטרית, שהיא תיאור
   * שגוי של המוצר ולא רק בחירה עיצובית.
   */
  justify-content: flex-start;
  gap: var(--dd-s-1);
  width: var(--dd-modes-closed, 60%);
  max-width: 100%;
  height: 26px;
  background: var(--dd-wood);
  border: 2px solid var(--dd-wood-dark);
  border-radius: var(--dd-r-sm);
  transition: width var(--dd-t-slow) var(--dd-ease);
}

.dd-modes__table.is-open { width: 100%; }

/* ההגדלות נחשפות רק במצב פתוח - הן ההסבר הוויזואלי לרוחב שנוסף. */
.dd-modes__leaf {
  width: 0;
  height: 14px;
  background: var(--dd-wood-dark);
  border-radius: 2px;
  opacity: 0;
  transition: width var(--dd-t-slow) var(--dd-ease),
              opacity var(--dd-t-slow) var(--dd-ease);
}

/*
 * 10% לכל אחת מארבע ההגדלות = 40%, בדיוק הרוחב שנוסף כשהשולחן עובר
 * מ-60% ל-100%. הסכמה מסתדרת עם עצמה במקום להיות קירוב.
 */
.dd-modes__table.is-open .dd-modes__leaf {
  width: 10%;
  opacity: .92;
}

.dd-modes__legs {
  display: flex;
  justify-content: space-between;
  width: 45%;
  max-width: 260px;
}

.dd-modes__legs span {
  width: 6px;
  height: 54px;
  background: var(--dd-n-700);
  border-radius: 0 0 3px 3px;
}

.dd-modes__readout {
  display: flex;
  justify-content: center;
  gap: var(--dd-s-8);
  margin-block: var(--dd-s-5) var(--dd-s-4);
}

.dd-modes__figure {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 0;
  font-size: var(--dd-fs-h2);
  font-weight: var(--dd-fw-black);
  color: var(--dd-ink);
  line-height: 1;
}

.dd-modes__figureLabel {
  font-size: var(--dd-fs-xs);
  font-weight: var(--dd-fw-medium);
  color: var(--dd-n-700);
}

.dd-modes__action { margin: 0; text-align: center; }

/* ── רספונסיביות ─────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .dd-why__grid { grid-template-columns: repeat(5, 1fr); }
  .dd-why__item:nth-child(5) { grid-column: auto; }
  .dd-summary__cta { grid-template-columns: 1fr; }
}

/*
 * הנקודה הצרה של הרצועה. חמש קוביות ברוחב מסך 768 מותירות כ-96px
 * לתוכן, ו-26px של --dd-fs-h2 שוברים את "0 מתווכים" ואת "עד 21 יום"
 * לשתי שורות באמצע המילה. הקטנה בבנד הזה בלבד - ב-1100 ומעלה יש
 * מקום והמספרים חוזרים לגודלם המלא.
 *
 * nowrap ולא רק גופן קטן: בלעדיו "אחריות שנה + 3" נשבר בין ה-"+"
 * ל-"3", כלומר באמצע המספר. 1.15rem הוא הגודל שבו המחרוזת הארוכה
 * ביותר בבנד עדיין נכנסת לשורה.
 */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .dd-why__item { padding-inline: var(--dd-s-3); }
  .dd-why__big { font-size: 1.15rem; white-space: nowrap; }
  .dd-why__prefix { font-size: var(--dd-fs-sm); }
}

@media (min-width: 900px) {
  /*
   * הטור הראשון ברשת RTL הוא הימני. הגלריה ראשונה ב-DOM כי בנייד
   * המבקר רוצה לראות את המוצר לפני שהוא קורא עליו - ולכן ההיפוך
   * לדסקטופ נעשה ב-order ולא בסדר ה-PHP: שינוי שם היה הופך גם
   * את הנייד.
   */
  .dd-atf {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
    gap: var(--dd-s-10);
  }

  .dd-summary { order: 1; max-width: 480px; }

  /* הגלריה נשארת מול העין בזמן שקוראים את הבוררים. */
  .dd-gallery {
    order: 2;
    position: sticky;
    top: var(--dd-s-5);
  }

  .dd-tabs__body { margin-inline: auto; }
}

@media (min-width: 1200px) {
  .dd-atf { grid-template-columns: 1fr 1.25fr; }
}

/*
 * מ-1280 ומעלה ה-ATF חורג מהמיכל הכללי (1180) וטור הפרטים מתקבע.
 * ביחס, כל פיקסל שנוסף לרוחב המסך מתחלק בין שני הטורים; טור קבוע
 * שולח את כולו לגלריה. 1280 − 64 מרזב − 40 מרווח − 460 = 716.
 *
 * למה לא מ-900: שם טור קבוע של 460 היה מותיר לגלריה 348px במקום
 * 432 שהיא מקבלת היום. מה שמשפר את הרחב היה פוגע בצר.
 *
 * 460 ולא פחות - בורר הגוונים מציג שישה עיגולים בשורה אחת, וזה
 * הרוחב שבו הם עדיין 68px מלאים.
 */
@media (min-width: 1280px) {
  .dd-atf {
    max-width: 1280px;
    grid-template-columns: minmax(0, 460px) 1fr;
  }
}

/* ── פחות תנועה ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dd-modes__table,
  .dd-modes__leaf,
  .dd-gallery__thumb {
    transition-duration: 1ms;
  }
}