/*
 * Design Deal - רכיבים.
 * אוצר המילים הוויזואלי המשותף: כפתורים, כרטיסים, תגיות, טפסים, לוגו.
 * כל סקשן בדף המוצר מרכיב מהחלקים האלה במקום להמציא מחדש.
 */

/* ── לוגו ───────────────────────────────────────────────────────────── */

.dd-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--dd-s-3);
  /* מרחב נשימה בגובה אות ה-D - דרישת מדריך המותג. */
  padding: var(--dd-s-2);
}

.dd-logo__mark { flex: 0 0 auto; }

.dd-logo__type {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  letter-spacing: .02em;
}

/*
 * הנעילה של המדריך: "DESIGN" דק ומרווח באפור מעל "DEAL" שחור וכבד.
 * שתי המילים באותיות גדולות - כך הן מופיעות בכל מופע במדריך 2026.
 */
.dd-logo__design {
  font-weight: var(--dd-fw-regular);
  font-size: .95em;
  color: var(--dd-muted);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.dd-logo__deal {
  font-weight: var(--dd-fw-black);
  font-size: 1.15em;
  color: var(--dd-ink);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/*
 * הווריאנט הבהיר שרד למקרה שבו הלוגו יונח על תצלום כהה. אין באתר
 * משטח כהה מאז מיתוג 2026, ולכן הוא לא בשימוש בפועל.
 */
.dd-logo--light .dd-logo__design,
.dd-logo--light .dd-logo__deal { color: var(--dd-white); }

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

/* ── כפתורים ────────────────────────────────────────────────────────── */

.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dd-s-2);
  padding: var(--dd-s-3) var(--dd-s-6);
  /* המדריך מגדיר כפתורים מלבניים מעוגלים, לא גלולות. ראשי 14, משני 18. */
  border-radius: var(--dd-r-md);
  font-weight: var(--dd-fw-bold);
  font-size: var(--dd-fs-body);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--dd-t-fast) var(--dd-ease),
              color var(--dd-t-fast) var(--dd-ease),
              border-color var(--dd-t-fast) var(--dd-ease),
              transform var(--dd-t-fast) var(--dd-ease);
  /* מינימום 44px גובה מגע - אצבע על נייד. */
  min-height: 44px;
}

.dd-btn:active { transform: translateY(1px); }

/*
 * הכפתור הראשי הוא הטורקיז הפסטלי עם טקסט שחור - דפוס "קטן · תגית"
 * שבמדריך. הירוק שמור לוואטסאפ בלבד, ולכן הוא לא זמין כאן: פעולה
 * שאינה וואטסאפ שנצבעת בירוק וואטסאפ משקרת למבקר על מה שיקרה בלחיצה.
 */
.dd-btn--primary {
  background: var(--dd-pastel);
  color: var(--dd-ink);
  border-color: var(--dd-pastel);
}

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

.dd-btn--ghost {
  background: var(--dd-white);
  color: var(--dd-ink);
  border-color: var(--dd-hairline);
  border-radius: var(--dd-r-lg);
  font-weight: var(--dd-fw-medium);
}

.dd-btn--ghost:hover { border-color: var(--dd-ink); }

.dd-btn--soft {
  background: var(--dd-white);
  color: var(--dd-ink);
  border-color: var(--dd-hairline);
}

.dd-btn--soft:hover { background: var(--dd-cream); }

.dd-btn--whatsapp {
  background: var(--dd-whatsapp);
  color: var(--dd-white);
  font-size: 1.0625rem;
}

.dd-btn--whatsapp:hover { background: var(--dd-whatsapp-hover); }

.dd-btn--block { width: 100%; }

.dd-btn--lg { padding: var(--dd-s-4) var(--dd-s-8); min-height: 54px; }

.dd-btn--sm {
  padding: var(--dd-s-2) var(--dd-s-5);
  font-size: var(--dd-fs-sm);
  border-radius: 13px;
  min-height: 38px;
}

.dd-btn[disabled], .dd-btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* ── תגיות ──────────────────────────────────────────────────────────── */

.dd-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dd-s-1);
  padding: var(--dd-s-1) var(--dd-s-3);
  border-radius: var(--dd-r-pill);
  font-size: var(--dd-fs-xs);
  font-weight: var(--dd-fw-bold);
  letter-spacing: .04em;
  background: var(--dd-cream);
  color: var(--dd-ink);
}

.dd-tag--sale  { background: var(--dd-pastel); color: var(--dd-ink); }
.dd-tag--olive { background: var(--dd-pastel); color: var(--dd-ink); }

/* ── כרטיסים ────────────────────────────────────────────────────────── */

.dd-card {
  background: var(--dd-white);
  border: var(--dd-border);
  border-radius: var(--dd-r-card);
  overflow: hidden;
  transition: border-color var(--dd-t-base) var(--dd-ease),
              transform var(--dd-t-base) var(--dd-ease);
}

/* המדריך לא משתמש בצללים - הריחוף מסומן בהכהיית המסגרת. */
.dd-card--hover:hover {
  border-color: var(--dd-ink);
  transform: translateY(-2px);
}

.dd-card__media {
  aspect-ratio: 4 / 3;
  background: var(--dd-stage);
  overflow: hidden;
}

.dd-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dd-card__body { padding: var(--dd-s-5); }

.dd-card__title {
  font-size: var(--dd-fs-body);
  font-weight: var(--dd-fw-bold);
  margin-block-end: var(--dd-s-2);
}

/* ── דוגמיות בחירה (גימור / רגל / כמות) ─────────────────────────────── */

/*
 * רצועת עיגולים ולא רשת כרטיסים - הכרעת 23/07.
 *
 * עד אז כל דוגמית הייתה 173×202, ושש יחד תפסו שני שלישים מגובה
 * קופסת הבחירה: בורר משני שגזל את המקום של המחיר וה-CTA. בעיגול של
 * 68px נכנסות שש בשתי שורות קצרות.
 *
 * התמונה היא צילום אמיתי של השולחן בבית ולא רינדור, כי השאלה שהבורר
 * עונה עליה היא "איך זה נראה אצלי" - ורקע לבן לא עונה עליה.
 */
/*
 * שלושה טורים קבועים ולא flex-wrap.
 *
 * עטיפה חופשית נותנת חמישה בשורה ואחד יתום מתחתיהם ברוחב הטור שלנו,
 * וזה נקרא כרשת שנקטעה באמצע - אותה תקלה שתועדה כבר בגרסת האריחים.
 * שלושה טורים מתחלקים בששת הגימורים בכל רוחב, בלי יתומים.
 */
/*
 * שלושה טורים ברוחב הפריט עצמו, ממורכזים כקבוצה - ולא שלושה טורים
 * שנמתחים על כל הרוחב. במתיחה כל טור היה רחב מהפריט שבו ב-18px בנייד
 * וב-58px בדסקטופ, וזה מה שהלקוח קרא לו "מרווח מדי" (25/07).
 */
.dd-swatches {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  justify-content: center;
  gap: var(--dd-s-3) var(--dd-s-2);
  justify-items: center;
  align-items: start;
}

/*
 * שורה אחת מ-900 ומעלה. הכיתובים אינם באותו אורך - "אבן סילבס" נשבר
 * לשתי שורות ו"בטון" לא - ולכן align-items: start משאיר את העיגולים
 * מיושרים בראש במקום לתלות אותם באמצע גבהים שונים.
 */
@media (min-width: 900px) {
  .dd-swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: stretch;
    gap: var(--dd-s-3) 10px;
  }
}

.dd-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dd-s-2);
  inline-size: 100%;
  max-inline-size: 96px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: 0;
}

/*
 * הטבעת היא אלמנט נפרד ולא מסגרת על התמונה: מסגרת שמשנה עובי בין
 * מצבים מזיזה את התמונה, והרצועה כולה רועדת בכל בחירה.
 */
/*
 * min() ולא ערך קבוע. 68px דורש טור פרטים של 448px לפחות, והטור נע בין
 * 376 (ב-900) ל-460 (ב-1280 ומעלה) - ערך קבוע היה שובר את השורה בקצה
 * התחתון של הטווח, וסף רוחב נוסף היה מוסיף נקודת שבירה שלישית לאותו
 * רכיב. כאן העיגול מתמלא עד 68 כשיש מקום ומצטמצם לבד כשאין.
 */
.dd-swatch__ring {
  display: block;
  inline-size: min(68px, 100%);
  block-size: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background: var(--dd-white);
  border: 2px solid var(--dd-hairline);
  transition: border-color var(--dd-t-fast) var(--dd-ease);
}

/*
 * aspect-ratio על התמונה ולא רק על הטבעת.
 *
 * הטבעת נושאת aspect-ratio: 1 עם block-size: auto, ולכן אין לה גובה
 * מוגדר; block-size: 100% על התמונה נפתר מולו ל-auto, והתמונה
 * מרונדרת ביחס הטבעי שלה ומותחת את הטבעת. עיגול אחד מתוך שישה יצא
 * 68×87.3 - הצילום שמאחוריו הוא 1500×2000, לאורך.
 *
 * עם aspect-ratio כאן הקופסה מוגדרת, object-fit: cover מקבל למה
 * לחתוך, וכל צילום שיוזן בעתיד נחתך במקום למתוח.
 */
.dd-swatch__img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.dd-swatch__label {
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
  font-weight: var(--dd-fw-medium);
  text-align: center;
  line-height: 1.25;
}

.dd-swatch:hover .dd-swatch__ring,
.dd-swatch:focus-visible .dd-swatch__ring { border-color: var(--dd-pastel-border); }

.dd-swatch[aria-pressed="true"] .dd-swatch__ring { border-color: var(--dd-ink); }

.dd-swatch[aria-pressed="true"] .dd-swatch__label {
  color: var(--dd-ink);
  font-weight: var(--dd-fw-bold);
}

/* בורר מלבני - רגליים וכמות כיסאות */
.dd-option {
  display: inline-flex;
  align-items: center;
  gap: var(--dd-s-2);
  padding: var(--dd-s-3) var(--dd-s-4);
  border: 1.5px solid var(--dd-hairline);
  border-radius: var(--dd-r-md);
  background: var(--dd-white);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  cursor: pointer;
  min-height: 48px;
  transition: border-color var(--dd-t-fast) var(--dd-ease),
              background var(--dd-t-fast) var(--dd-ease);
}

.dd-option:hover { border-color: var(--dd-n-300); }

/*
 * מצב נבחר = מסגרת שחורה + מילוי שמנת.
 *
 * המילוי היה טורקיז פסטל, וזו הייתה הערת הלקוח מ-23/07: על כרטיס
 * גדול כמו בורר הרגליים הכתם נקרא כהדגשה צורמת ולא כבחירה. המסגרת
 * השחורה - הסימן שמיתוג 2026 קבע - נשארת, ורק המילוי התרכך.
 */
.dd-option[aria-pressed="true"] {
  border-color: var(--dd-ink);
  background: var(--dd-cream);
  font-weight: var(--dd-fw-bold);
}

.dd-option__icon { color: var(--dd-ink); flex: 0 0 auto; }

/* ── טפסים ──────────────────────────────────────────────────────────── */

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

.dd-label {
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  color: var(--dd-ink-soft);
}

.dd-input,
.dd-textarea,
.dd-select {
  width: 100%;
  padding: var(--dd-s-3) var(--dd-s-4);
  border: 1.5px solid var(--dd-hairline);
  border-radius: var(--dd-r-md);
  background: var(--dd-white);
  min-height: 48px;
  transition: border-color var(--dd-t-fast) var(--dd-ease);
}

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

.dd-input::placeholder,
.dd-textarea::placeholder { color: var(--dd-muted); }

/*
 * שדה מספרי בטופס RTL: הכיוון נשאר LTR, היישור חוזר לימין.
 *
 * .dd-num קובעת direction: ltr כדי שספרות טלפון עם מקפים לא יתערבבו
 * בסדר. אבל היישור של אלמנט נגזר מהכיוון של עצמו, ולכן השדה - והפלייסהולדר
 * שבו - נצמדו לשמאל בזמן ש"שם מלא" שמעליו נצמד לימין.
 *
 * הכיוון קובע את סדר התווים, היישור קובע היכן הבלוק יושב. צריך את שניהם.
 * זו ההופעה השלישית של המלכודת הזו: ב-23/07 אותה מחלקה הפכה inset לוגי
 * בתגית משך הרילס.
 */
.dd-input.dd-num { text-align: right; }

.dd-textarea { min-height: 110px; resize: vertical; }

.dd-form__msg {
  font-size: var(--dd-fs-sm);
  padding: var(--dd-s-3) var(--dd-s-4);
  border-radius: var(--dd-r-sm);
}

.dd-form__msg--ok  { background: var(--dd-pastel); color: var(--dd-ink); }
.dd-form__msg--err { background: rgba(180, 67, 43, .10); color: var(--dd-danger); }

/* ── סליידר טווח - מעוצב אחיד בכל הדפדפנים ─────────────────────────── */

.dd-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--dd-r-pill);
  background: var(--dd-n-200);
  cursor: pointer;
}

.dd-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--dd-ink);
  border: 3px solid var(--dd-white);
  box-shadow: var(--dd-shadow-float);
}

.dd-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--dd-ink);
  border: 3px solid var(--dd-white);
  box-shadow: var(--dd-shadow-float);
}

/* ── דירוג כוכבים - התפקיד היחיד של הזהב במדריך ─────────────────────── */

.dd-stars { display: inline-flex; gap: 2px; color: var(--dd-gold); }

/* ── אייקון בעיגול פסטל - הטיפול שהמדריך מגדיר לכל אייקון ────────────── */

.dd-icon-circle {
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  background: var(--dd-pastel);
  color: var(--dd-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.dd-icon-circle svg {
  inline-size: 23px;
  block-size: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── באנר תוכן לדוגמה - אדמין בלבד ──────────────────────────────────── */

.dd-placeholder-note {
  background: var(--dd-cream);
  border-inline-start: 3px solid var(--dd-gold);
  padding: var(--dd-s-2) var(--dd-s-4);
  font-size: var(--dd-fs-xs);
  color: var(--dd-body);
  border-radius: var(--dd-r-sm);
}

/* ── טופס הליד ──────────────────────────────────────────────────────────
 * כאן ולא ב-product-btf.css: מ-23/07 אותו טופס מוגש בשלושה מקומות -
 * הסקשן בדף המוצר, הפופאפ, ועמוד צור קשר. product-btf נטען בדף המוצר
 * בלבד, ולכן בעמוד צור קשר בורר סוג הפינה הופיע כרדיו חשוף בלי חזות.
 */

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

/*
 * שורת שדות.
 *
 * בפריסה הרגילה היא שקופה לגמרי - `display: contents` משאירה את
 * הילדים ילדים ישירים של הטופס, ולכן דף המוצר, הפופאפ ועמוד צור קשר
 * נשארים בדיוק כפי שהיו. רק פריסת ה-grid של דף הבית הופכת אותה לרשת.
 */
.dd-lead__row { display: contents; }

.dd-lead__form--grid { gap: 10px; }

.dd-lead__form--grid .dd-lead__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* בורר "מה מעניין אתכם" צמוד יותר לשדות שמעליו, כמו בקובץ העיצוב. */
.dd-lead__form--grid .dd-lead__types { gap: 8px; padding-block: 4px 2px; }

.dd-lead__form--grid .dd-lead__types .dd-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dd-muted);
}

/*
 * כפתור השליחה כהה ומלבני יותר מכפתור הפעולה הרגיל של האתר - כך הוא
 * בקובץ העיצוב, והוא סוגר את הקופסה במקום לצוף בתוכה.
 */
/*
 * `color` חובה כאן, לא רק `background`.
 *
 * .dd-btn--primary הוא מילוי פסטל עם טקסט שחור. החלפת הרקע לכהה בלי
 * להחליף את הטקסט השאירה שחור על #14303A - 1.2:1, כלומר כפתור בלי
 * כיתוב קריא. שינוי רקע של כפתור קיים תמיד גורר גם את צבע הטקסט.
 */
.dd-lead__form--grid [data-dd-lead-submit] {
  background: var(--dd-strip);
  border-color: var(--dd-strip);
  color: var(--dd-white);
  border-radius: 16px;
  padding-block: 16px;
}

.dd-lead__form--grid [data-dd-lead-submit]:hover {
  background: #1B3D48;
  border-color: #1B3D48;
  color: var(--dd-white);
}

@media (min-width: 620px) {
  .dd-lead__form--grid .dd-lead__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* השדות לבנים על השמנת - אותו ניגוד עדין שהמדריך משתמש בו בכרטיסים. */
.dd-lead__form .dd-label { color: var(--dd-body); }

.dd-lead__form .dd-input,
.dd-lead__form .dd-textarea {
  background: var(--dd-white);
  border-color: var(--dd-hairline);
  color: var(--dd-ink);
}

.dd-lead__form .dd-input::placeholder,
.dd-lead__form .dd-textarea::placeholder { color: var(--dd-muted); }

.dd-lead__form .dd-input:focus,
.dd-lead__form .dd-textarea:focus { border-color: var(--dd-ink); }

.dd-lead__form .dd-input.is-invalid,
.dd-lead__form .dd-textarea.is-invalid { border-color: var(--dd-danger); }

.dd-lead__err {
  font-size: var(--dd-fs-xs);
  color: var(--dd-danger);
}

.dd-lead__types { border: 0; padding: 0; margin: 0; }

.dd-lead__type-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-s-3);
  margin-block-start: var(--dd-s-3);
}

.dd-lead__type-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: var(--dd-s-2) var(--dd-s-5);
  border-radius: var(--dd-r-pill);
  border: 1.5px solid var(--dd-hairline);
  background: var(--dd-white);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  cursor: pointer;
  transition: background var(--dd-t-fast) var(--dd-ease),
              border-color var(--dd-t-fast) var(--dd-ease);
}

.dd-lead__type input:checked + .dd-lead__type-face {
  background: var(--dd-pastel);
  border-color: var(--dd-ink);
  color: var(--dd-ink);
  font-weight: var(--dd-fw-bold);
}

/* הקלט עצמו מוסתר, ולכן טבעת הפוקוס חייבת לעבור לחזות שלו. */
.dd-lead__type input:focus-visible + .dd-lead__type-face {
  outline: 2px solid var(--dd-ink);
  outline-offset: 3px;
}

/* ── בועת הוואטסאפ הצפה ─────────────────────────────────────────────── */

/*
 * עברה לכאן ב-03/08. היא מוגשת בדף הקטגוריה ובדף הבית, ו-CSS שיושב
 * ב-category.css פשוט לא קיים בעמודים אחרים - אותה תקלה שבה בורר
 * "סוג פינה" הופיע בעמוד צור קשר כרדיו חשוף ב-23/07.
 */
.dd-catfab {
  position: fixed;
  inset-inline-start: 18px;
  inset-block-end: 24px;
  z-index: var(--dd-z-fab);
  inline-size: 58px;
  block-size: 58px;
  border-radius: 50%;
  background: var(--dd-whatsapp);
  color: var(--dd-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(37, 211, 102, .38);
}

.dd-catfab:hover { background: var(--dd-whatsapp-hover); color: var(--dd-white); }

/* בר דביק תופס 90px בתחתית בנייד; הבועה מתרוממת מעליו. */
@media (max-width: 1023px) {
  .dd-catfab { inset-block-end: 90px; }
}

/*
 * כרטיס המוצר עבר לכאן ב-03/08. הוא מוגש בדף הקטגוריה ובשתי קרוסלות
 * דף הבית, ו-CSS שיושב ב-category.css פשוט לא קיים בעמודים אחרים -
 * אותה תקלה שבה בורר "סוג פינה" הופיע בעמוד צור קשר כרדיו חשוף.
 */
/* ── כרטיס מוצר ─────────────────────────────────────────────────────── */

.dd-pcard {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  background: var(--dd-white);
  border: 1.5px solid var(--dd-hairline-soft);
  border-radius: 24px;
  overflow: hidden;
  transition: box-shadow var(--dd-t-base) var(--dd-ease), transform var(--dd-t-base) var(--dd-ease);
}

.dd-pcard:hover {
  box-shadow: 0 20px 44px rgba(20, 48, 58, .13);
  transform: translateY(-4px);
}

.dd-pcard__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--dd-cream-section);
  overflow: hidden;
}

.dd-pcard__img,
.dd-pcard__hover {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.dd-pcard__hover { opacity: 0; transition: opacity var(--dd-t-slow) var(--dd-ease); }
.dd-pcard:hover .dd-pcard__hover { opacity: 1; }

.dd-pcard__badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  font-size: 12px;
  font-weight: var(--dd-fw-bold);
  letter-spacing: .3px;
  padding: 6px 14px;
  border-radius: var(--dd-r-pill) 8px var(--dd-r-pill) var(--dd-r-pill);
  border: 1.5px solid transparent;
}

.dd-pcard__badge--best { background: var(--dd-strip); border-color: var(--dd-strip); color: var(--dd-strip-text); }
.dd-pcard__badge--new  { background: var(--dd-pastel); border-color: var(--dd-pastel-border); color: var(--dd-ink); }
.dd-pcard__badge--sale { background: var(--dd-gold-on-dark); border-color: #C98C3F; color: var(--dd-ink); }

.dd-pcard__tone {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  background: rgba(255, 255, 255, .94);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--dd-r-pill) var(--dd-r-pill) 8px var(--dd-r-pill);
  color: var(--dd-ink);
}

.dd-pcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 17px 17px;
}

.dd-pcard__name {
  display: block;
  font-size: 18.5px;
  font-weight: var(--dd-fw-xbold);
  letter-spacing: -.3px;
  color: var(--dd-ink);
}

.dd-pcard__sub {
  margin-block-start: 4px;
  font-size: 13.5px;
  color: var(--dd-muted);
  font-weight: var(--dd-fw-medium);
  line-height: 1.45;
}

.dd-pcard__rating { display: flex; align-items: center; gap: 7px; }

/*
 * הזהב המוכהה ולא #D69A4E של המדריך: על לבן הבהיר הוא 2.44:1, מתחת
 * לסף 3:1 לאלמנט גרפי. ההכרעה מ-22/07.
 */
.dd-pcard__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--dd-gold); }
.dd-pcard__stars .is-off { color: var(--dd-hairline-deep); }
.dd-pcard__ratingNum { font-size: 13px; font-weight: var(--dd-fw-bold); }
.dd-pcard__reviews { font-size: 12.5px; color: var(--dd-muted-warm); }

.dd-pcard__prices {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-block-start: auto;
}

.dd-pcard__now { font-size: 22px; font-weight: var(--dd-fw-xbold); letter-spacing: -.5px; }
/* מוצר בלי מחיר. קטן מהמספר - מחרוזת עברית בגודל 22px נשברת בכרטיס צר. */
.dd-pcard__quote { font-size: 15px; font-weight: var(--dd-fw-bold); color: var(--dd-ink); }
.dd-pcard__was { font-size: 14px; color: var(--dd-muted-warm); }

.dd-pcard__save {
  background: var(--dd-cream);
  border: 1.5px solid var(--dd-hairline-soft);
  font-size: 11.5px;
  font-weight: var(--dd-fw-bold);
  padding: 4px 11px;
  border-radius: var(--dd-r-pill) 8px var(--dd-r-pill) var(--dd-r-pill);
}

.dd-pcard__actions { display: flex; align-items: stretch; gap: 8px; }

.dd-pcard__more {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--dd-white);
  border: 1.5px solid var(--dd-hairline);
  border-radius: 14px;
  padding: 13px 12px;
  font-size: 15px;
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
}

.dd-pcard__more:hover { background: var(--dd-cream); color: var(--dd-ink); }
.dd-pcard__arrow { color: var(--dd-muted-warm); }

.dd-pcard__wa {
  flex: 0 0 auto;
  inline-size: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dd-whatsapp);
  border-radius: 14px;
  color: var(--dd-white);
}

.dd-pcard__wa:hover { background: var(--dd-whatsapp-hover); color: var(--dd-white); }

/*
 * נגן הרילסים עבר לכאן ב-03/08. הוא מוגש בדף המוצר ובסקשן הווידאו של
 * דף הבית, ו-CSS שיושב ב-product-btf.css פשוט לא קיים בעמודים אחרים.
 */
/* ══ נגן הרילסים ═══════════════════════════════════════════════════════ */

.dd-reelbox {
  position: fixed;
  inset: 0;
  z-index: var(--dd-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dd-s-4);
}

.dd-reelbox[hidden] {
  display: none;
}

.dd-reelbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .82);
  border: 0;
}

.dd-reelbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dd-s-3);
}

/*
 * שני הסרטונים הם 9:16 מדויק. הגובה מוביל והרוחב נגזר ממנו, כי בנגן
 * אנכי הגובה הוא המשאב הנדיר - רוחב שמוביל היה גולש מהמסך בדסקטופ.
 *
 * 72vh ולא 78: מעל המסגרת יושב כפתור הסגירה ומתחתיה הכיתוב, ושניהם
 * נספרים באותו טור. גובה מסגרת שלוקח כמעט את כל המסך היה דוחק את
 * הכיתוב מתחת לקצה התחתון במסכים נמוכים.
 */
/*
 * הרוחב הזמין נספר בתוך ה-min ולא נחתך אחריו.
 *
 * עד 23/07 הגובה נקבע מ-vh בלבד, ו-max-inline-size חתך את הרוחב
 * כשהוא לא נכנס - הגובה נשאר, היחס נשבר, והסרטון קיבל פסים שחורים.
 * עכשיו הרוחב הזמין (רוחב החלון פחות הריפוד של הלייטבוקס) מתורגם
 * לגובה המרבי שעדיין שומר 9:16, והוא מתחרה עם שני האחרים.
 */
.dd-reelbox__frame {
  position: relative;
  block-size: min(72vh, 700px, (100vw - 2 * var(--dd-s-4)) * 16 / 9);
  aspect-ratio: 9 / 16;
  border-radius: var(--dd-r-md);
  overflow: hidden;
  background: #000;
  box-shadow: var(--dd-shadow-lg);
}

.dd-reelbox__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  /* שני הסרטונים 9:16 מדויק כמו המסגרת, ולכן cover אינו חותך דבר - */
  /* הוא רק מונע פס שחור מעיגול של שבר פיקסל. */
  object-fit: cover;
  background: #000;
}

/*
 * בתוך זרימת הטור ולא ב-position: absolute. מיקום מוחלט מעל המסגרת נחתך
 * במסכים נמוכים, ומיקום מוחלט בתוכה נופל על פקדי הנגן של פייסבוק -
 * שם כבר יושבים כפתור השיתוף והכותרת. שורה משלו פותרת את שניהם.
 */
.dd-reelbox__close {
  align-self: flex-start;
}

.dd-reelbox__caption {
  color: var(--dd-n-100);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-bold);
  text-align: center;
  max-inline-size: 30ch;
}

@media (max-width: 560px) {
  .dd-reelbox__frame {
    block-size: min(66vh, 620px, (100vw - 2 * var(--dd-s-4)) * 16 / 9);
  }
}

/*
 * כרטיס ההצלחה שמחליף את טופס הליד.
 *
 * עבר לכאן מ-home.css ב-04/08: הוא מוגש עכשיו גם בעמוד צור קשר, שם
 * home.css אינו נטען כלל. אותה תקלה שבה .dd-catfab ו-.dd-pcard
 * הופיעו בלי עיצוב ב-03/08.
 */
.dd-home-sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  background: var(--dd-pastel);
  border: 1.5px solid var(--dd-pastel-border);
  border-radius: 20px;
  padding: 34px 28px;
}

.dd-home-sent[hidden] { display: none; }

.dd-home-sent__icon {
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  background: var(--dd-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dd-home-sent__title { font-size: 21px; font-weight: var(--dd-fw-xbold); letter-spacing: -.4px; }

.dd-home-sent__text { font-size: 15px; color: #31555C; line-height: 1.6; max-inline-size: 34ch; }

.dd-home-sent__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dd-white);
  border: 1.5px solid var(--dd-pastel-border);
  font-size: 15px;
  font-weight: var(--dd-fw-bold);
  padding: 12px 22px;
  border-radius: 999px;
  margin-block-start: 4px;
}

.dd-home-sent__btn span { color: var(--dd-muted-warm); }