/* RoomForm V3.2 — Walk-mode details overlay and local product photo.
   Keep this file AFTER styles.css in the site <head>. */
body.furniture-walk-active #modalBackdrop:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  pointer-events: auto !important;
}
body.furniture-walk-active #modalBackdrop .modal {
  position: relative;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  pointer-events: auto;
}

/* Only furniture details dialogs get the wider two-column layout. */
.modal:has(.walk-item-details) {
  width: min(720px, 96vw);
}
.walk-item-details .walk-item-overview {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.walk-item-details .walk-product-photo {
  flex: 0 0 min(260px, 42%);
  min-width: 0;
  min-height: 210px;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7f5;
  border: 1px solid #e3e9e3;
  border-radius: 12px;
}
.walk-item-details .walk-product-photo[hidden] { display: none !important; }
.walk-item-details .walk-product-photo img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 290px;
  object-fit: contain;
}
.walk-item-details .walk-item-overview dl {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  grid-template-columns: minmax(75px, 100px) minmax(0, 1fr);
}
.walk-item-details .modal-foot { margin-top: 24px; }
@media (max-width: 590px) {
  .walk-item-details .walk-item-overview { flex-direction: column; gap: 15px; }
  .walk-item-details .walk-product-photo { width: 100%; min-height: 160px; max-height: 280px; flex-basis: auto; }
  .walk-item-details .walk-product-photo img { max-height: 240px; }
  .walk-item-details .walk-item-overview dl { width: 100%; }
}