/* Custom Mockup Room — Room Builder (halaman/shortcode terpisah, multi-produk).
   Memakai ulang variabel warna & komponen (swatch, panel, field, dst) dari
   mockup-room.css — file ini hanya menata layout khusus halaman + hal-hal
   baru yang tidak ada di versi per-produk: daftar layer & modal pemilih produk. */

.cmr-page, .cmr-page *{ box-sizing:border-box; }
.cmr-page{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#232019;
  background:#F3EEE3; border:1px solid #232019; max-width:1280px; margin:0 auto;
}

.cmr-page-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid #D9CFBA;
}
.cmr-page-add-btn{ background:#3C5170; border-color:#3C5170; }
.cmr-page-add-btn:hover{ background:#2f425b; }

.cmr-page-body{ display:grid; grid-template-columns:1fr 340px; min-height:600px; }
@media (max-width:900px){ .cmr-page-body{ grid-template-columns:1fr; } }

.cmr-page-body .cmr-room-view{
  position:relative; background:#111; min-height:600px; display:flex; flex-direction:column;
}
.cmr-page-body .cmr-room-scene{
  position:relative; flex:1; overflow:hidden; background-size:contain; background-repeat:no-repeat;
  background-position:center; background-color:#1B1912;
}
.cmr-page-body .cmr-hint{
  position:static; transform:none; text-align:center; padding:10px; background:#000;
  font-family:monospace; font-size:10.5px; color:rgba(255,255,255,.7); letter-spacing:.06em;
}

.cmr-page-panel{ border-left:1px solid #D9CFBA; max-height:600px; overflow-y:auto; }
@media (max-width:900px){
  /* Di layar sempit, panel & panggung sudah jadi baris grid terpisah
     (lihat media query grid-template-columns di atas), jadi tinggi panel
     tidak lagi berbagi baris dengan panggung — aman dibiarkan mengikuti
     tinggi kontennya sendiri. */
  .cmr-page-panel{ max-height:none; }
}
.cmr-panel-sep{ border:none; border-top:1px solid #D9CFBA; margin:22px 0 20px; }

/* ---------- daftar produk yang sedang dipajang ---------- */
.cmr-layer-list{ display:flex; flex-direction:column; gap:8px; }
.cmr-layer-empty{ margin:0; font-size:12px; color:#5C574C; }
.cmr-layer-item{
  display:flex; align-items:center; gap:10px; padding:8px; border:1px solid #D9CFBA;
  background:#FBFBF9; cursor:pointer; text-align:left;
}
.cmr-layer-item:hover{ border-color:#232019; }
.cmr-layer-item.is-active{ border-color:#232019; outline:2px solid #232019; outline-offset:-1px; background:#EFE8D8; }
.cmr-layer-item__thumb{ width:38px; height:38px; object-fit:cover; flex-shrink:0; background:#eee; }
.cmr-layer-item__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cmr-layer-item__name{ display:block; font-size:12.5px; font-weight:600; line-height:1.3; overflow-wrap:break-word; }
.cmr-layer-item__meta{ display:block; font-size:10.5px; color:#5C574C; }
.cmr-layer-item__remove{
  flex-shrink:0; width:22px; height:22px; border:1px solid #D9CFBA; background:transparent;
  cursor:pointer; font-size:11px; color:#5C574C; line-height:1;
}
.cmr-layer-item__remove:hover{ background:#B8483D; border-color:#B8483D; color:#fff; }

.cmr-remove-layer-btn{ width:100%; margin-top:20px; color:#B8483D; border-color:#B8483D; }
.cmr-remove-layer-btn:hover{ background:#B8483D; color:#fff; }

/* Anchor karya aktif (sedang dipilih untuk diedit) mendapat outline emas
   supaya jelas item mana yang dikontrol oleh panel di kanan, terutama saat
   ada beberapa karya sekaligus di satu ruangan. */
.cmr-page-body .cmr-art-anchor::before{ border-color:transparent; }
.cmr-page-body .cmr-art-anchor.is-active::before{ border:2px dashed #F5C64B; }
.cmr-page-body .cmr-art-anchor:hover::before{ border-color:rgba(255,255,255,.55); }
.cmr-page-body .cmr-art-anchor.is-active:hover::before{ border-color:#F5C64B; }

/* ---------- modal pemilih produk ---------- */
.cmr-product-picker{
  display:none; position:fixed; inset:0; background:rgba(20,18,14,.6); backdrop-filter:blur(2px);
  z-index:99999; align-items:center; justify-content:center; padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.cmr-product-picker.open{ display:flex; }
.cmr-product-picker__body{
  background:#F3EEE3; width:min(880px,100%); max-height:88vh; overflow:auto; padding:22px;
  color:#232019; border:1px solid #232019; position:relative;
}
.cmr-product-picker__head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.cmr-product-picker__head input[type="text"]{
  flex:1; padding:11px 14px; font-size:14px; border:1px solid #232019; background:#FBFBF9;
  color:#232019; font-family:inherit;
}
.cmr-product-picker__head .cmr-close{ position:static; }
.cmr-product-picker__hint{ margin:10px 0 16px; font-size:11.5px; color:#5C574C; }
.cmr-product-picker__status{ margin:14px 0 0; font-size:12px; color:#5C574C; text-align:center; }

.cmr-product-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px;
}
.cmr-product-card{
  border:1px solid #D9CFBA; background:#FBFBF9; cursor:pointer; text-align:left; padding:0;
  font-family:inherit; color:#232019; display:flex; flex-direction:column; overflow:hidden;
}
.cmr-product-card:hover{ border-color:#232019; }
.cmr-product-card.is-added{ border-color:#3E7D53; }
.cmr-product-card__img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:#EDE8DC; display:block; }
.cmr-product-card__body{ padding:9px 10px; }
.cmr-product-card__name{ display:block; font-size:12px; font-weight:600; line-height:1.3; margin-bottom:3px; }
.cmr-product-card__type{ display:block; font-size:10.5px; color:#5C574C; text-transform:uppercase; letter-spacing:.04em; }
.cmr-product-card__added{
  font-size:10px; color:#3E7D53; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  padding:0 10px 8px;
}
#cmrProductLoadMore{ display:block; margin:18px auto 0; }