/*
 * Sissou configurator v19
 * Complete-room scene: floating recap on the left, real mask rendering only.
 */

#configurateur-tresse-root .room-summary-panel{
  display:none;
}

#configurateur-tresse-root[data-active-product="room"] .room-summary-panel{
  position:absolute;
  inset:104px auto 90px 22px;
  z-index:48;
  display:flex;
  flex-direction:column;
  width:clamp(286px, 22vw, 336px);
  max-height:calc(100dvh - 194px);
  overflow:hidden;
  border:1px solid rgba(76, 54, 40, .11);
  border-radius:26px;
  background:rgba(255, 253, 249, .84);
  color:#302721;
  box-shadow:
    0 22px 64px rgba(63, 43, 29, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  transition:
    opacity .35s ease,
    transform .48s cubic-bezier(.2, .8, .2, 1),
    max-height .38s ease;
}

#configurateur-tresse-root[data-active-product="room"] .room-summary-toggle{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto 30px;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:66px;
  padding:10px 12px 10px 17px;
  border:0;
  border-bottom:1px solid rgba(76, 54, 40, .08);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

#configurateur-tresse-root .room-summary-heading{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#configurateur-tresse-root .room-summary-heading strong{
  overflow:hidden;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#configurateur-tresse-root .room-summary-kicker{
  color:#9b6447;
  font-size:9px;
  font-weight:820;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#configurateur-tresse-root .room-summary-scene{
  min-height:26px;
  padding:6px 9px;
  border:1px solid rgba(196, 124, 83, .22);
  border-radius:999px;
  background:#f7e6da;
  color:#744b35;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

#configurateur-tresse-root .room-summary-chevron{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(76, 54, 40, .10);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:#78513d;
  transition:transform .3s ease;
}

#configurateur-tresse-root .room-summary-chevron svg{
  width:15px;
  height:15px;
}

#configurateur-tresse-root .room-summary-panel.is-collapsed{
  max-height:66px;
}

#configurateur-tresse-root .room-summary-panel.is-collapsed .room-summary-toggle{
  border-bottom-color:transparent;
}

#configurateur-tresse-root .room-summary-panel.is-collapsed .room-summary-chevron{
  transform:rotate(180deg);
}

#configurateur-tresse-root .room-summary-panel.is-collapsed .room-summary-body{
  opacity:0;
  pointer-events:none;
}

#configurateur-tresse-root .room-summary-body{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
  padding:8px;
  opacity:1;
  transition:opacity .2s ease;
}

#configurateur-tresse-root .room-summary-items{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  padding:1px 1px 7px;
  scrollbar-color:rgba(154, 101, 71, .28) transparent;
  scrollbar-width:thin;
}

#configurateur-tresse-root .room-summary-item{
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy price"
    "icon action action";
  align-items:center;
  gap:7px 10px;
  min-height:82px;
  padding:9px 10px;
  border:1px solid rgba(76, 54, 40, .085);
  border-radius:17px;
  background:rgba(255,255,255,.62);
  box-shadow:0 7px 20px rgba(62, 42, 29, .05);
}

#configurateur-tresse-root .room-summary-icon{
  grid-area:icon;
  position:relative;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:13px;
  background:linear-gradient(145deg, #f5dfcf, #fbf3ec);
  color:#8a563a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
}

#configurateur-tresse-root .room-summary-icon::after{
  content:"";
  position:absolute;
  right:4px;
  bottom:4px;
  width:6px;
  height:6px;
  border:2px solid #fff;
  border-radius:999px;
  background:#67a477;
}

#configurateur-tresse-root .room-summary-copy{
  grid-area:copy;
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}

#configurateur-tresse-root .room-summary-name{
  overflow:hidden;
  color:#332922;
  font-size:11px;
  font-weight:820;
  letter-spacing:-.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#configurateur-tresse-root .room-summary-detail{
  display:-webkit-box;
  overflow:hidden;
  color:#7e736c;
  font-size:9px;
  font-weight:620;
  line-height:1.3;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#configurateur-tresse-root .room-summary-price{
  grid-area:price;
  align-self:start;
  padding-top:3px;
  color:#4c3b31;
  font-size:10px;
  font-weight:820;
  white-space:nowrap;
}

#configurateur-tresse-root .room-summary-price.is-pending{
  color:#a1958d;
  font-size:8px;
  font-weight:730;
}

#configurateur-tresse-root .room-summary-item-add{
  grid-area:action;
  justify-self:stretch;
  min-height:29px;
  padding:5px 10px;
  border:1px solid rgba(174, 103, 65, .20);
  border-radius:10px;
  background:linear-gradient(135deg, #c9815a, #ad6847);
  color:#fff;
  box-shadow:0 7px 16px rgba(154, 88, 53, .16);
  font:inherit;
  font-size:8.5px;
  font-weight:820;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

#configurateur-tresse-root .room-summary-item-add:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 9px 19px rgba(154, 88, 53, .22);
}

#configurateur-tresse-root .room-summary-item-add:disabled{
  border-color:rgba(76, 54, 40, .07);
  background:#eee9e4;
  color:#a69b93;
  box-shadow:none;
  cursor:not-allowed;
}

#configurateur-tresse-root .room-summary-status{
  min-height:0;
  margin:8px 2px 0;
  color:#8b7e76;
  font-size:8px;
  font-weight:620;
  line-height:1.35;
  text-align:center;
}

#configurateur-tresse-root[data-active-product="room"] .opt-room{
  position:relative;
  z-index:8;
  min-height:0;
  align-content:start;
  margin-bottom:0;
  padding-bottom:8px;
  background:transparent;
}

#configurateur-tresse-root[data-active-product="room"] .opt-room-main{
  position:sticky;
  top:0;
  z-index:10;
  padding-bottom:10px;
  background:rgba(255,253,249,.96);
  box-shadow:0 8px 18px rgba(68,48,35,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

#configurateur-tresse-root[data-active-product="room"] .opt-room-main .room-options{
  gap:8px !important;
}

#configurateur-tresse-root[data-active-product="room"] .opt-room-main .room-simple-editor-hidden{
  display:none !important;
}

#configurateur-tresse-root[data-active-product="room"] .opt-room-main .room-product-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

#configurateur-tresse-root[data-active-product="room"] .opt-room-main .room-product-grid .chip{
  min-height:38px;
}

#configurateur-tresse-root[data-active-product="room"] .is-room-editor{
  animation:room-editor-in .32s cubic-bezier(.2,.8,.2,1) both;
}

#configurateur-tresse-root[data-active-product="room"] .room-editor-host{
  display:block;
  min-height:0;
}

#configurateur-tresse-root[data-active-product="room"] .room-editor-host > .opt{
  min-height:0 !important;
  align-content:start;
}

#configurateur-tresse-root[data-active-product="room"] .is-room-editor > .optSection{
  margin-top:0;
}

#configurateur-tresse-root .rug-application-mode{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px;
  width:100%;
  margin-bottom:10px;
  padding:4px;
  border:1px solid rgba(80,56,41,.09);
  border-radius:13px;
  background:rgba(239,232,225,.72);
}

#configurateur-tresse-root .rug-application-mode-button{
  min-height:36px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#796d65;
  font:inherit;
  font-size:9px;
  font-weight:760;
  line-height:1.15;
  cursor:pointer;
}

#configurateur-tresse-root .rug-application-mode-button.active{
  border-color:rgba(190,118,78,.22);
  background:rgba(255,253,250,.96);
  color:#71472f;
  box-shadow:0 5px 14px rgba(78,53,38,.08);
}

#configurateur-tresse-root[data-active-product="room"] #mainPanel .rug-layer-picker,
#configurateur-tresse-root[data-active-product="room"] #mainPanel .rug-fabric-type-chip{
  color:#41362f;
}

@keyframes room-editor-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

#configurateur-tresse-root[data-active-product="room"] .main-config-actions{
  display:none !important;
}

body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="room"] .main-config-actions{
  display:none !important;
}

#configurateur-tresse-root[data-active-product="room"] .view-room > .hd{
  left:calc(22px + clamp(286px, 22vw, 336px) + 14px) !important;
}

#configurateur-tresse-root.is-preview-focus .room-summary-panel{
  opacity:0;
  transform:translateX(-24px);
  pointer-events:none;
}

#configurateur-tresse-root[data-active-product="room"] .view-room .canvasWrap{
  padding:84px 92px 20px !important;
}

#configurateur-tresse-root[data-active-product="room"] .roomCanvas{
  width:auto !important;
  max-width:min(72vw, calc((100dvh - 106px) * .75)) !important;
  height:100% !important;
  max-height:calc(100dvh - 104px) !important;
  aspect-ratio:3 / 4 !important;
  object-fit:contain !important;
  border-radius:24px !important;
  box-shadow:0 28px 80px rgba(53, 37, 26, .18) !important;
  filter:none !important;
  transform:scale(var(--room-product-focus-scale, 1.055));
  transform-origin:var(--room-product-focus-origin, 58% 34%);
  will-change:transform;
  transition:
    transform .62s cubic-bezier(.2, .82, .2, 1),
    transform-origin .62s cubic-bezier(.2, .82, .2, 1),
    box-shadow .45s ease !important;
}

#configurateur-tresse-root[data-active-product="room"] .roomCanvas[data-room-focus="canopy"]{
  --room-product-focus-scale:1.055;
  --room-product-focus-origin:58% 34%;
}

#configurateur-tresse-root[data-active-product="room"] .roomCanvas[data-room-focus="braid"]{
  --room-product-focus-scale:1.072;
  --room-product-focus-origin:52% 53%;
}

#configurateur-tresse-root[data-active-product="room"] .roomCanvas[data-room-focus="rug"]{
  --room-product-focus-scale:1.082;
  --room-product-focus-origin:50% 75%;
}

#configurateur-tresse-root[data-active-product="room"] .roomCanvas[data-room-focus="softrow"]{
  --room-product-focus-scale:1.075;
  --room-product-focus-origin:56% 56%;
}

@media (max-width:980px){
  #configurateur-tresse-root[data-active-product="room"] .room-summary-panel{
    inset:62px 9px auto 9px;
    width:auto;
    max-height:min(46dvh, 430px);
    border-radius:20px;
  }

  #configurateur-tresse-root[data-active-product="room"] .room-summary-panel:not(.is-user-expanded){
    max-height:58px;
  }

  #configurateur-tresse-root[data-active-product="room"] .room-summary-panel:not(.is-user-expanded) .room-summary-toggle{
    min-height:58px;
    border-bottom-color:transparent;
  }

  #configurateur-tresse-root[data-active-product="room"] .room-summary-panel:not(.is-user-expanded) .room-summary-body{
    opacity:0;
    pointer-events:none;
  }

  #configurateur-tresse-root[data-active-product="room"] .room-summary-panel:not(.is-user-expanded) .room-summary-chevron{
    transform:rotate(180deg);
  }

  #configurateur-tresse-root[data-active-product="room"] .room-summary-toggle{
    min-height:58px;
    padding:7px 9px 7px 13px;
  }

  #configurateur-tresse-root[data-active-product="room"] .room-summary-heading strong{
    font-size:13px;
  }

  #configurateur-tresse-root[data-active-product="room"] .view-room > .hd{
    display:none !important;
  }

  #configurateur-tresse-root[data-active-product="room"] .view-room .canvasWrap{
    padding:8px !important;
  }

  #configurateur-tresse-root[data-active-product="room"] .roomCanvas{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:calc(100dvh - 132px) !important;
    border-radius:16px !important;
    --room-product-focus-scale:1.065;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus)[data-active-product="room"] .view-room .canvasWrap{
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:126px 0 8px !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus)[data-active-product="room"] .roomCanvas{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:calc(100dvh - 132px) !important;
    object-position:center !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #configurateur-tresse-root .room-summary-panel,
  #configurateur-tresse-root .room-summary-body,
  #configurateur-tresse-root .room-summary-chevron,
  #configurateur-tresse-root[data-active-product="room"] .roomCanvas{
    transition:none !important;
  }
}