/* ==========================================================================
   Storage Station — calculator.css
   Storage calculator flow (calculator-1.html … calculator-5.html).
   Figma: 203:1177, 203:1824, 213:341, 213:566, 213:795 (desktop 1920px).
   Depends on tokens / buttons / header / footer from base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
.calc {
  padding-block: 8px clamp(56px, 5vw, 96px);
}
.calc [hidden] { display: none !important; }   /* JS-toggled cards / result blocks */

/* Top bar: progress indicator (steps 1-4) or "restart" link (step 5) */
.calc-topbar {
  display: flex;
  justify-content: flex-start;          /* = right edge in RTL */
  min-height: 44px;
}

/* Progress — "1 מתוך 4" + 4 bars (rightmost bar = step 1) */
.calc-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.calc-progress__label {
  font-size: 15.94px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-blue-dark);
}
.calc-progress__bars { display: flex; gap: 11px; }
.calc-progress__bar {
  width: 70.73px;
  height: 9.46px;
  border-radius: 1.5px;
  background: var(--color-secondary);
}
.calc-progress__bar.is-current { background: var(--color-blue-dark); }

/* Big dark-blue headings */
.calc-title {
  font-size: clamp(32px, 4.08vw, 78.35px);
  font-weight: var(--fw-bold);
  line-height: 0.82;                    /* 63.5 / 78.35 */
  letter-spacing: -0.03em;
  color: var(--color-blue-dark);
  text-align: center;
}
.calc-title__lg {                       /* second, larger line */
  display: block;
  margin-top: 0.08em;
  font-size: clamp(48px, 6.2vw, 119px);
  line-height: 0.82;
}
.calc-title__lg--black { font-weight: var(--fw-black); }

/* --------------------------------------------------------------------------
   2. Flow buttons (next = dark, back = light)
   -------------------------------------------------------------------------- */
.calc-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: clamp(40px, 3.8vw, 72px);
}
.calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18.4px;
  flex: 0 1 493px;
  min-height: clamp(56px, 4.06vw, 78px);
  padding: 12px 32px;
  border: 1.84px solid var(--color-white);
  border-radius: 14.72px;
  font-size: clamp(22px, 1.94vw, 37.2px);
  font-weight: var(--fw-regular);       /* Figma: Poppins Medium → Hebrew fallback renders regular */
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--transition), transform var(--transition);
}
.calc-btn:hover { transform: translateY(-1px); }
.calc-btn img {
  flex: none;
  width: clamp(30px, 2.3vw, 44.15px);
  height: auto;
}
.calc-btn--next { background: var(--color-blue-dark); color: var(--color-secondary); }
.calc-btn--next:hover { background: #053D70; }
.calc-btn--next img { transform: rotate(180deg); }      /* arrow points left = forward in RTL */
.calc-btn--back { background: var(--color-secondary); color: var(--color-blue-dark); }
.calc-btn--back:hover { background: #93CCEF; }
.calc-btn--wide { flex-basis: 822px; }
.calc-btn--status { cursor: default; }                   /* "8 פריטים נבחרו" (not a link) */
.calc-btn--status:hover { transform: none; background: var(--color-secondary); }
.calc-btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* --------------------------------------------------------------------------
   3. Step 1 — intro
   -------------------------------------------------------------------------- */
.calc-intro { text-align: center; }
.calc-intro .calc-title { margin-top: -30px; }
.calc-intro__text {
  max-width: 633px;
  margin: clamp(20px, 1.6vw, 30px) auto 0;
  font-size: clamp(19px, 1.51vw, 28.93px);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  color: var(--color-gray);
}
.calc-intro__media {
  width: min(1483px, 100%);
  margin: clamp(0px, 0.4vw, 8px) auto 0;
  transform: translateX(-1.8%);        /* Figma: art sits ~34px left of centre */
}
.calc-intro__media img { width: 100%; height: auto; }
.calc-intro .calc-actions { margin-top: clamp(24px, 1.6vw, 30px); }

/* --------------------------------------------------------------------------
   4. Choice cards (steps 2 & 4 — single select, radio inputs)
   -------------------------------------------------------------------------- */
.choice-grid {
  display: grid;
  justify-content: center;
  gap: 41px;
  margin: 0;
  padding: 0;
  border: 0;
}
.choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 484px)); }
.choice-grid--4 { grid-template-columns: repeat(4, minmax(0, 333px)); gap: 40px 22px; }

.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 341px;
  padding: 16px 16px 38px;
  background: var(--color-white);
  border-radius: 23px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition), outline-color var(--transition);
  outline: 3px solid transparent;
  outline-offset: -3px;
}
.choice-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(6, 74, 136, 0.18); }
/* Selected / focused state (not in Figma — brand blue outline) */
.choice-card:has(input:checked) { outline-color: var(--color-main); }
.choice-card:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(17, 123, 188, 0.35); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }

.choice-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}
.choice-card__media img { height: auto; max-width: 100%; }
.choice-card__label {
  font-size: clamp(24px, 2.04vw, 39.15px);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  color: var(--color-blue-dark);
}

/* Step 2 — "what to store" (2×2 large cards, 484×341) */
.calc-type .calc-title { margin-top: -18px; }
.calc-type .choice-grid { margin-top: clamp(28px, 2.2vw, 42px); }
.calc-type .choice-card { padding-bottom: 25px; }
.calc-type .choice-card__media { align-items: flex-start; }
.calc-type .choice-card:nth-of-type(2) .choice-card__media img { margin-top: 29px; }   /* sofa sits lower */

/* Step 4 — boxes + duration (4-col, 333×341) */
.calc-volume .calc-title { margin-top: 0; }
.calc-volume .choice-grid { margin-top: clamp(24px, 1.6vw, 30px); }
.calc-volume .calc-title--second { margin-top: clamp(40px, 3.1vw, 58px); }
.calc-volume .choice-card { padding: 0 16px 30px; }
.calc-volume .choice-card__label { font-size: clamp(24px, 2.1vw, 40.47px); letter-spacing: -0.03em; }
.choice-card__media--box { padding-top: 60px; }
.choice-card__media--box img { width: 205px; }
.choice-card__media--calendar { padding-top: 27px; }
.choice-card__media--calendar img { width: 211px; }

/* Step 4 — boxes counter (one item-style card, +/- 10) */
.boxes-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: clamp(24px, 1.6vw, 30px);
}
.boxes-card { width: min(333px, 100%); min-height: 341px; }
.boxes-counter__hint {
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-gray);
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. Step 3 — rooms tabs + item counters
   -------------------------------------------------------------------------- */
.calc-items .calc-title { margin-top: -18px; }

.room-tabs {
  display: flex;
  justify-content: center;
  gap: 29.5px;
  margin-top: clamp(24px, 1.7vw, 32px);
}
.room-tab {
  flex: 0 1 256px;
  min-height: 52px;
  padding: 8px 20px;
  border: 1.22px solid var(--color-white);
  border-radius: 9.78px;
  background: var(--color-secondary);
  font-size: clamp(18px, 1.29vw, 24.7px);
  font-weight: var(--fw-regular);
  color: var(--color-blue-dark);
  transition: background-color var(--transition), color var(--transition);
}
.room-tab:hover { background: #93CCEF; }
.room-tab[aria-selected="true"] { background: var(--color-blue-dark); color: var(--color-secondary); }

.item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 333px));
  justify-content: center;
  gap: 40px 22px;
  margin-top: clamp(28px, 2.9vw, 56px);
}
.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 341px;
  padding-bottom: 30px;
  background: var(--color-white);
  border-radius: 23px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
  text-align: center;
}
/* Image slot (333×222 at 1920). Cards are built from js/calculator-data.js, so every
   picture (trimmed to the object) is fitted into the same box, centred on the floor line. */
.item-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 333 / 222;
}
.item-card__media img {
  position: absolute;
  left: 9%;
  top: 8%;
  width: 82%;
  height: 84%;
  object-fit: contain;
  object-position: 50% 100%;
}
/* No photo yet: neutral box icon in brand colours */
.item-card__placeholder {
  position: absolute;
  left: 50%;
  top: 12%;
  width: auto;
  height: 76%;
  transform: translateX(-50%);
}
.item-card__name {
  margin-top: 8px;
  padding-inline: 14px;
  font-size: clamp(24px, 2.1vw, 40.47px);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-blue-dark);
  text-wrap: balance;
}

/* Quantity stepper: [−] 1 [+]  (RTL: minus on the right) */
.qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;                    /* counters line up even when a name wraps */
}
.qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background-color var(--transition);
}
.qty__btn:hover { background: var(--color-bg); }
.qty__btn:disabled { opacity: 0.35; cursor: default; background: none; }
.qty__btn:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
.qty__btn img { width: 15.12px; height: auto; }
.qty__value {
  min-width: 42px;
  font-size: clamp(36px, 2.8vw, 53.9px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-blue-dark);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6. Step 5 — recommendation / result
   -------------------------------------------------------------------------- */
.calc--result { padding-bottom: 0; }
.calc-restart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: clamp(19px, 1.32vw, 25.43px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-blue-dark);
}
.calc-restart:hover { color: var(--color-main); }
.calc-restart img { width: 19px; height: auto; transform: rotate(90deg); }  /* arrow → */

.calc-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44.47%;   /* RTL: content right, photo left */
  align-items: start;
  margin-top: clamp(40px, 4.2vw, 80px);
}
.calc-result__content {
  width: 100%;
  max-width: calc(767px + var(--gutter));
  padding-inline-start: var(--gutter);   /* right gutter */
  padding-top: clamp(24px, 4.2vw, 80px);
  padding-bottom: 48px;
}
.calc-result__title {
  font-size: clamp(32px, 4.18vw, 80.31px);
  font-weight: var(--fw-bold);
  line-height: 0.81;
  letter-spacing: -0.03em;
  color: var(--color-blue-dark);
  text-align: center;
}
.calc-result__line { display: block; }
/* Result title carries the computed size: two balanced lines whatever the number */
.calc-result__title--balanced { text-wrap: balance; }
.calc-result__size { white-space: nowrap; }

.result-stats {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(32px, 3.3vw, 62px);
  padding-inline: 12px 0;
}
.result-stat { display: flex; align-items: center; gap: 22px; }
.result-stat img { width: clamp(64px, 5.17vw, 99.3px); height: auto; flex: none; }
.result-stat__text { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.result-stat__value {
  font-size: clamp(30px, 2.61vw, 50.16px);
  font-weight: var(--fw-bold);
  line-height: 0.81;
  letter-spacing: -0.03em;
  color: var(--color-blue-dark);
  white-space: nowrap;
}
.result-stat__label {
  font-size: clamp(22px, 1.96vw, 37.57px);
  font-weight: var(--fw-medium);
  line-height: 0.81;
  letter-spacing: -0.03em;
  color: var(--color-gray);
  white-space: nowrap;
}

/* Offers under the price (calculator-data.js → promo) and the note on the "יותר משנה" card */
.result-promo {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: #E8F3FB;
  color: var(--color-blue-dark);
  font-size: clamp(17px, 1.25vw, 22px);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-align: center;
}
.result-promo[hidden] { display: none; }
.choice-card__note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-main);
  text-align: center;
}

/* "החל מ-₪X לחודש" — only rendered when prices are verified in calculator-data.js */
.result-price {
  margin-top: clamp(24px, 2.4vw, 46px);
  font-size: clamp(24px, 2.2vw, 42px);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-main);
  text-align: center;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(32px, 3.6vw, 68px);
}
.result-list li {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: clamp(20px, 2.04vw, 39.24px);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-blue-dark);
}
.result-list img { width: clamp(32px, 2.45vw, 46.97px); height: auto; flex: none; }

.calc-result__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(32px, 3.4vw, 64px);
}
.calc-result__actions .calc-btn { flex: none; width: 100%; }

/* Nothing selected yet: friendly prompt instead of zeros */
.calc-empty__text {
  max-width: 640px;
  margin: clamp(24px, 2.4vw, 46px) auto 0;
  font-size: clamp(19px, 1.51vw, 28.93px);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--color-gray);
  text-align: center;
}

.calc-result__media { align-self: stretch; }
.calc-result__media img {
  width: 100%;
  height: 100%;
  max-height: 1060px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .choice-card { min-height: 300px; }
  .item-card { min-height: 0; }
  .choice-card__media--box img,
  .choice-card__media--calendar img { width: 170px; }
}

@media (max-width: 1200px) {
  .choice-grid--4,
  .item-grid { grid-template-columns: repeat(2, minmax(0, 333px)); }
  .room-tabs { flex-wrap: wrap; gap: 12px; }
  .room-tab { flex-basis: 180px; }
  .calc-result { grid-template-columns: 1fr; }
  .calc-result__content { max-width: 767px; margin-inline: auto; padding-inline: var(--gutter); }
  .calc-result__media img { max-height: 520px; }
}

/* ==========================================================================
   ≤768px — MOBILE (Figma mobile frames, 400px wide):
   341:3057 (step 1), 341:4207 (2), 341:4425 (3), 341:4822 (4), 341:5237 (5).
   All px values are taken 1:1 from the 400px frames.
   ========================================================================== */
@media (max-width: 768px) {
  .calc { padding-block: 4px 44px; overflow-x: clip; }

  /* ---- Progress: centered "N מתוך 4" + 4 small bars ---- */
  .calc-topbar { justify-content: center; min-height: 0; }
  .calc-progress { align-items: center; gap: 5.5px; }
  .calc-progress__label { font-size: 7.756px; line-height: 9px; }
  .calc-progress__bars { gap: 5.33px; }
  .calc-progress__bar { width: 34.42px; height: 4.606px; border-radius: 0.727px; }

  /* ---- Titles (40.25px / 32.65px, second line Rubik Black 48px) ---- */
  .calc-title,
  .calc-intro .calc-title,
  .calc-type .calc-title,
  .calc-items .calc-title,
  .calc-volume .calc-title {
    max-width: 311px;
    margin: 17px auto 0;
    font-size: 40.253px;
    line-height: 32.65px;
    letter-spacing: -0.03em;
  }
  .calc-title__lg {
    margin-top: 0;
    font-size: 48px;
    font-weight: var(--fw-black);
    line-height: 43px;
    white-space: nowrap;
  }
  .calc-intro .calc-title__lg { font-size: 61.443px; line-height: 47.264px; }

  /* ---- Flow buttons: full width 368 × 40.6, stacked (back/status on top) ---- */
  .calc-actions { flex-direction: column; align-items: stretch; gap: 6.42px; margin-top: 48px; }
  .calc-btn {
    flex: none;
    width: 100%;
    min-height: 40.58px;
    padding: 9.44px 18.87px;
    gap: 7.86px;
    border-width: 0.786px;
    border-radius: 6.29px;
    font-size: 15.9px;
  }
  .calc-btn img { width: 18.87px; }

  /* ---- Step 1 — intro ---- */
  .calc-intro__text {
    max-width: 325px;
    margin-top: 13px;
    font-size: 14.865px;
    line-height: 18.116px;
  }
  .calc-intro__media {                 /* 429 × 222 art, bleeds past both gutters, centre −8.5px */
    width: auto;
    margin: 17px calc(50% - 206px) 0 calc(50% - 223px);
    transform: none;
  }
  .calc-intro .calc-actions { margin-top: 39.6px; }

  /* ---- Step 2 — 2 × 2 cards (176 × 124) ---- */
  .choice-card {
    min-height: 0;
    justify-content: flex-start;
    border-radius: 8.4px;
  }
  .calc-type .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14.7px 14.95px;
    margin-top: 26px;
  }
  .calc-type .choice-card { min-height: 124px; padding: 0 6px 6px; }
  .calc-type .choice-card__media { flex: none; height: 98.5px; padding-top: 6px; }
  .calc-type .choice-card__label { font-size: 14.251px; line-height: 17.368px; }
  .calc-type .choice-card:nth-of-type(1) .choice-card__media img { width: 67.4%; }       /* מספר פריטים */
  .calc-type .choice-card:nth-of-type(2) .choice-card__media img { width: 85.4%; margin-top: 10.4px; }  /* sofa */
  .calc-type .choice-card:nth-of-type(3) .choice-card__media img { width: 58.2%; }       /* אחר */
  .calc-type .choice-card:nth-of-type(4) .choice-card__media img { width: 60.4%; }       /* משרד */

  /* ---- Step 3 — room tabs + 2-col item cards ---- */
  .room-tabs { flex-wrap: nowrap; gap: 8.25px; margin-top: 36px; }
  .room-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 35px;
    padding: 0 2px;
    border-width: 0.819px;
    border-radius: 6.551px;
    font-size: clamp(13px, 3.75vw, 15px);
    white-space: nowrap;
  }

  .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8.2px 11.7px;
    margin-top: 37px;
  }
  .item-card { min-height: 131.26px; padding-bottom: 4px; border-radius: 8.886px; }
  .item-card__media { aspect-ratio: 176.4 / 85.5; }
  .item-card__media img { left: 10%; top: 6%; width: 80%; height: 90%; }

  .item-card__name { margin-top: 2px; padding-inline: 6px; font-size: 15.591px; line-height: 1.05; }
  .qty { gap: 4px; padding-top: 4.85px; }
  .qty__btn { width: 24px; height: 24px; }
  .qty__btn img { width: 8px; }
  .qty__value { min-width: 22.4px; font-size: 20.769px; line-height: 16.846px; }
  .calc-items .calc-actions { margin-top: 54px; }
  .calc-items { padding-bottom: 16px; }

  /* ---- Step 4 — 4 narrow cards per row (88 × 178) ---- */
  .calc-volume .choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5.83px;
    margin-top: 26.7px;
  }
  .calc-volume .calc-title--second { margin-top: 59.6px; }
  .calc-volume .calc-title--second + .choice-grid { margin-top: 20.7px; }
  .calc-volume .choice-card { min-height: 178.4px; padding: 0 0 8px; border-radius: 12.078px; }
  .calc-volume .choice-card__label {
    padding-inline: 2px;
    font-size: 21.191px;
    line-height: 17.188px;
    letter-spacing: -0.03em;
  }
  .choice-card__media--box,
  .choice-card__media--calendar { flex: none; align-items: flex-start; }
  .choice-card__media--box { height: 144.5px; padding-top: 48.86px; }
  .choice-card__media--box img { width: 75.3%; }
  .choice-card__media--calendar { height: 141.3px; padding-top: 37.5px; }
  .choice-card__media--calendar img { width: 97.8%; }
  .calc-volume .calc-actions { margin-top: 42.6px; }
  .boxes-counter { gap: 10px; margin-top: 26.7px; }
  .boxes-card { width: calc((100% - 11.7px) / 2); min-height: 131.26px; }
  .boxes-card__media img { left: 22%; top: 8%; width: 56%; height: 88%; }
  .boxes-counter__hint { font-size: 13px; }

  /* ---- Step 5 — result: title, stats, checklist, photo, then buttons ---- */
  .calc-restart { gap: 6.5px; margin-top: 0; font-size: 12.716px; line-height: 11.224px; }
  .calc-restart img { width: 8px; }

  .calc--result { padding-bottom: 45px; }
  .calc-result { display: flex; flex-direction: column; align-items: stretch; margin-top: 0; }
  .calc-result__content { display: contents; }

  .calc-result__title {
    order: 1;
    max-width: 320px;
    margin: 18px auto 0;
    font-size: 32.14px;
    line-height: 26.069px;
    letter-spacing: -0.04em;
  }
  .result-stats {
    order: 2;
    gap: 8px;
    margin: 34.8px 11px 0 12px;
    padding-inline: 0;
  }
  .result-stat { gap: 14.7px; }
  .result-stat img { width: 52.14px; }
  .result-stat__text { gap: 3.7px; }
  .result-stat__value { font-size: 26.339px; line-height: 21.364px; }
  .result-stat__label { font-size: 19.727px; line-height: 16px; }

  .result-price { order: 2; margin-top: 24px; font-size: 24px; }
  .result-promo { order: 2; font-size: 14px; }
  .calc-empty__text { order: 2; max-width: 320px; margin-top: 16px; font-size: 14.865px; line-height: 18.116px; }

  .result-list {
    order: 3;
    gap: 6.7px;
    width: fit-content;
    max-width: calc(100% - 2 * var(--gutter));
    margin: 38px auto 0;
  }
  .result-list li { gap: 7px; min-height: 16.1px; font-size: 16.491px; line-height: 13.376px; }
  .result-list img { width: 16.9px; }

  .calc-result__media {                 /* 383 × 210 crop; bleeds to the right edge like the frame */
    order: 4;
    position: relative;
    overflow: hidden;
    aspect-ratio: 383 / 210;
    margin: 39.3px 1px 0 var(--gutter);
  }
  .calc-result__media img {
    position: absolute;
    left: -7.31%;
    top: -90.52%;
    width: 105.85%;
    max-width: none;
    height: auto;
    max-height: none;
  }
  .calc-result__actions {
    order: 5;
    gap: 7.42px;
    margin: 49px var(--gutter) 0;
  }
}

/* Very narrow phones (<360px): "חדר ילדים" still fits inside its tab */
@media (max-width: 359px) {
  .room-tab { padding-inline: 0; font-size: 12px; }
}