/*
 * Sissou configurator v14
 * Clean bed stage + editor made of independent floating surfaces.
 */

#configurateur-tresse-root{
  --v14-ink:#29231f;
  --v14-muted:#786f68;
  --v14-line:rgba(63, 49, 38, .12);
  --v14-accent:#c9875f;
  --v14-accent-soft:#f5ded0;
  --v14-paper:rgba(255, 255, 255, .88);
  --v14-paper-solid:#fff;
  --v14-shadow:0 18px 54px rgba(67, 48, 34, .16);
  background:#f8f7f4 !important;
}

#configurateur-tresse-root #mainStage{
  background:
    radial-gradient(circle at 50% 42%, #fff 0, #faf9f6 52%, #f1eee8 100%) !important;
  cursor:pointer !important;
}

#configurateur-tresse-root #mainStage::before{
  display:none !important;
}

#configurateur-tresse-root .view-braid > .hd{
  display:none !important;
}

#configurateur-tresse-root[data-active-product="tresse"] .canvasWrap{
  display:grid !important;
  place-items:center !important;
  padding:82px 24px 28px !important;
}

#configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
#configurateur-tresse-root[data-active-product="tresse"] .braidCanvas{
  width:min(76vw, calc((100dvh - 142px) * 1.5), 1180px) !important;
  max-width:calc(100vw - 48px) !important;
  height:auto !important;
  max-height:calc(100dvh - 126px) !important;
  aspect-ratio:3 / 2 !important;
  object-fit:contain !important;
  object-position:center !important;
  border:1px solid rgba(70, 52, 39, .08) !important;
  border-radius:clamp(20px, 2.2vw, 34px) !important;
  background:#fbfaf7 !important;
  box-shadow:
    0 32px 90px rgba(65, 45, 31, .17),
    0 5px 18px rgba(65, 45, 31, .08) !important;
  filter:none !important;
}

#configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .canvasWrap{
  padding:22px !important;
}

#configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] #canvas-braid,
#configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .braidCanvas{
  width:min(92vw, calc((100dvh - 44px) * 1.5), 1450px) !important;
  max-width:92vw !important;
  height:auto !important;
  max-height:calc(100dvh - 44px) !important;
  transform:none !important;
}

#configurateur-tresse-root .preview-focus-cue{
  inset:auto auto 22px 50% !important;
  min-height:40px !important;
  padding:7px 14px 7px 8px !important;
  border:1px solid rgba(74, 56, 43, .10) !important;
  background:rgba(255, 255, 255, .78) !important;
  color:var(--v14-ink) !important;
  box-shadow:0 14px 38px rgba(61, 43, 31, .14) !important;
  backdrop-filter:blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(140%) !important;
}

#configurateur-tresse-root .preview-focus-cue-icon{
  border:1px solid rgba(201, 135, 95, .24) !important;
  background:var(--v14-accent-soft) !important;
  color:#8b5639 !important;
}

#configurateur-tresse-root .preview-focus-cue-text{
  color:var(--v14-ink) !important;
}

/*
 * The panel itself is transparent. Only its header, step selector and
 * currently useful control group are visible as floating objects.
 */
#configurateur-tresse-root #mainPanel,
#configurateur-tresse-root.is-canopy-active #mainPanel,
#configurateur-tresse-root.is-rug-active #mainPanel,
#configurateur-tresse-root.is-room-active #mainPanel,
#configurateur-tresse-root[data-active-product="tresse"] #mainPanel{
  inset:104px 22px auto auto !important;
  gap:9px !important;
  width:clamp(370px, 30vw, 430px) !important;
  height:min(70dvh, 690px) !important;
  max-height:calc(100dvh - 196px) !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--v14-ink) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#configurateur-tresse-root .panelHd{
  flex:0 0 50px !important;
  width:100% !important;
  min-height:50px !important;
  padding:5px 6px 5px 16px !important;
  overflow:hidden !important;
  border:1px solid rgba(72, 53, 40, .10) !important;
  border-radius:999px !important;
  background:var(--v14-paper) !important;
  box-shadow:0 14px 38px rgba(61, 43, 31, .13) !important;
  backdrop-filter:blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
}

#configurateur-tresse-root .panelHd::before{
  width:8px !important;
  height:8px !important;
  margin-right:10px !important;
  background:var(--v14-accent) !important;
  box-shadow:0 0 0 5px rgba(201, 135, 95, .13) !important;
}

#configurateur-tresse-root .panelTitle{
  color:var(--v14-ink) !important;
  font-size:13px !important;
  font-weight:780 !important;
}

#configurateur-tresse-root .panelTitle::before{
  display:none !important;
}

#configurateur-tresse-root .panelToggleBtn{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  border:1px solid rgba(201, 135, 95, .24) !important;
  border-radius:999px !important;
  background:var(--v14-accent-soft) !important;
  color:#7b4a32 !important;
}

#configurateur-tresse-root .panelToggleBtn:hover{
  background:#f0cbb6 !important;
}

#configurateur-tresse-root #mainPanel.is-closed,
#configurateur-tresse-root.is-canopy-active #mainPanel.is-closed,
#configurateur-tresse-root.is-rug-active #mainPanel.is-closed,
#configurateur-tresse-root.is-room-active #mainPanel.is-closed,
#configurateur-tresse-root[data-active-product="tresse"] #mainPanel.is-closed{
  inset:50% 22px auto auto !important;
  width:250px !important;
  height:50px !important;
  min-height:50px !important;
  max-height:50px !important;
  transform:translateY(-50%) !important;
}

#configurateur-tresse-root #mainPanel.is-closed .panelHd{
  width:250px !important;
  border-bottom:1px solid rgba(72, 53, 40, .10) !important;
}

#configurateur-tresse-root .mobile-step-nav{
  flex:0 0 54px !important;
  min-height:54px !important;
  margin:0 !important;
  padding:5px !important;
  overflow:hidden !important;
  border:1px solid rgba(72, 53, 40, .10) !important;
  border-radius:999px !important;
  background:var(--v14-paper) !important;
  box-shadow:0 12px 32px rgba(61, 43, 31, .11) !important;
  backdrop-filter:blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(140%) !important;
}

#configurateur-tresse-root .mobile-step-btn{
  min-height:42px !important;
  padding:0 8px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#938880 !important;
}

#configurateur-tresse-root .mobile-step-btn span{
  background:#f1ede9 !important;
  color:#756b64 !important;
}

#configurateur-tresse-root .mobile-step-btn.is-active{
  border-color:transparent !important;
  background:var(--v14-accent-soft) !important;
  color:#73452e !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .mobile-step-btn.is-active span{
  background:#fff !important;
  color:#73452e !important;
}

#configurateur-tresse-root .panelBody{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:0 2px 12px !important;
  color:var(--v14-ink) !important;
  background:transparent !important;
  scrollbar-color:rgba(83, 66, 53, .22) transparent !important;
}

#configurateur-tresse-root .panelBody > .opt:not([hidden]){
  display:grid !important;
  gap:9px !important;
}

#configurateur-tresse-root .optSection{
  padding:18px !important;
  overflow:visible !important;
  border:1px solid rgba(72, 53, 40, .10) !important;
  border-radius:24px !important;
  background:var(--v14-paper) !important;
  color:var(--v14-ink) !important;
  box-shadow:var(--v14-shadow) !important;
  backdrop-filter:blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(135%) !important;
}

#configurateur-tresse-root .optSection > .bd,
#configurateur-tresse-root .optSection > .bd > .col,
#configurateur-tresse-root .panelBody .col{
  background:transparent !important;
}

#configurateur-tresse-root .panelBody label,
#configurateur-tresse-root .panelBody .rug-layer-section-title{
  color:#5f554e !important;
}

#configurateur-tresse-root .panelBody .muted,
#configurateur-tresse-root .tresse-entry-help,
#configurateur-tresse-root .canopy-cart-note,
#configurateur-tresse-root .rug-layer-help{
  color:var(--v14-muted) !important;
}

#configurateur-tresse-root .panelBody .btn,
#configurateur-tresse-root .panelBody .chip{
  border-color:var(--v14-line) !important;
  background:rgba(255, 255, 255, .70) !important;
  color:#4f4640 !important;
}

#configurateur-tresse-root .panelBody .btn:hover,
#configurateur-tresse-root .panelBody .chip:hover{
  border-color:rgba(201, 135, 95, .42) !important;
  background:#fff !important;
  color:var(--v14-ink) !important;
}

#configurateur-tresse-root .panelBody .btn.active,
#configurateur-tresse-root .panelBody .chip.active,
#configurateur-tresse-root .panelBody .btn[aria-pressed="true"],
#configurateur-tresse-root .panelBody .chip[aria-pressed="true"]{
  border-color:rgba(201, 135, 95, .48) !important;
  background:var(--v14-accent-soft) !important;
  color:#6e432d !important;
  box-shadow:0 7px 18px rgba(128, 77, 47, .11) !important;
}

#configurateur-tresse-root .tresse-length-block{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

#configurateur-tresse-root #knownTresseSize{
  border-color:var(--v14-line) !important;
  background:rgba(255, 255, 255, .82) !important;
  color:var(--v14-ink) !important;
}

#configurateur-tresse-root #knownTresseSize::placeholder{
  color:#a49b95 !important;
}

#configurateur-tresse-root .strand-accordion{
  border-color:var(--v14-line) !important;
  background:rgba(255, 255, 255, .58) !important;
}

#configurateur-tresse-root .strand-accordion.is-open{
  border-color:rgba(201, 135, 95, .42) !important;
  background:#fff !important;
}

#configurateur-tresse-root .strand-accordion-trigger,
#configurateur-tresse-root .strand-accordion-title{
  color:var(--v14-ink) !important;
}

#configurateur-tresse-root .strand-accordion-summary,
#configurateur-tresse-root .strand-accordion-icon{
  color:var(--v14-muted) !important;
}

#configurateur-tresse-root .strand-accordion-panel{
  border-top-color:var(--v14-line) !important;
}

#configurateur-tresse-root .swatch,
#configurateur-tresse-root .rug-color-grid .chip{
  border-color:rgba(66, 49, 37, .14) !important;
}

#configurateur-tresse-root .swatch.active,
#configurateur-tresse-root .rug-color-grid .chip.active,
#configurateur-tresse-root .rug-color-grid .chip[aria-pressed="true"]{
  border-color:#fff !important;
  box-shadow:
    0 0 0 3px rgba(201, 135, 95, .48),
    0 8px 18px rgba(72, 50, 34, .14) !important;
}

/* The price dock follows the editor and disappears with it. */
#configurateur-tresse-root .main-config-actions{
  inset:auto 22px 18px auto !important;
  width:clamp(370px, 30vw, 430px) !important;
  min-height:60px !important;
  padding:5px !important;
  border:1px solid rgba(72, 53, 40, .10) !important;
  border-radius:20px !important;
  background:var(--v14-paper) !important;
  box-shadow:0 15px 42px rgba(61, 43, 31, .14) !important;
  backdrop-filter:blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
}

#configurateur-tresse-root:not(.mobile-panel-open) .main-config-actions{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(18px) scale(.97) !important;
}

#configurateur-tresse-root.mobile-panel-open:not(.is-preview-focus) .preview-focus-cue{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#configurateur-tresse-root .mini-braid-option,
#configurateur-tresse-root .main-price-inline{
  border-color:var(--v14-line) !important;
  background:rgba(255, 255, 255, .58) !important;
  color:var(--v14-ink) !important;
}

#configurateur-tresse-root .mini-braid-title,
#configurateur-tresse-root .main-price-inline strong{
  color:var(--v14-ink) !important;
}

#configurateur-tresse-root .mini-braid-price,
#configurateur-tresse-root .main-price-inline-label{
  color:var(--v14-muted) !important;
}

#configurateur-tresse-root .mini-braid-check{
  border-color:rgba(72, 53, 40, .20) !important;
  background:#fff !important;
}

#configurateur-tresse-root .main-add-btn{
  border-color:#312a26 !important;
  background:#312a26 !important;
  color:#fff !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .main-add-btn:hover{
  background:#171311 !important;
}

#configurateur-tresse-root .main-add-btn:disabled{
  border-color:rgba(63, 49, 38, .08) !important;
  background:#eeeae6 !important;
  color:#afa7a1 !important;
}

@media (max-width:1100px) and (min-width:981px){
  #configurateur-tresse-root #mainPanel,
  #configurateur-tresse-root .main-config-actions{
    width:370px !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas{
    width:min(70vw, calc((100dvh - 136px) * 1.5), 980px) !important;
  }
}

@media (max-width:980px){
  #configurateur-tresse-root[data-active-product="tresse"] .canvasWrap,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus)[data-active-product="tresse"] .canvasWrap{
    align-items:start !important;
    justify-content:center !important;
    padding:72px 10px 0 !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus)[data-active-product="tresse"] #canvas-braid{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:3 / 2 !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:20px !important;
  }

  #configurateur-tresse-root .preview-focus-cue{
    inset:calc(66.666vw + 82px) auto auto 50% !important;
    max-width:calc(100vw - 30px);
    white-space:nowrap;
  }

  #configurateur-tresse-root #mainPanel,
  #configurateur-tresse-root.is-canopy-active #mainPanel,
  #configurateur-tresse-root.is-rug-active #mainPanel,
  #configurateur-tresse-root.is-room-active #mainPanel,
  #configurateur-tresse-root[data-active-product="tresse"] #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"]:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open.is-canopy-active:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open.is-rug-active:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open.is-room-active:not(.is-preview-focus) #mainPanel{
    position:fixed !important;
    inset:auto 8px 82px 8px !important;
    gap:7px !important;
    width:auto !important;
    height:min(54dvh, 560px) !important;
    max-height:calc(100dvh - 150px) !important;
    transform:none !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed,
  #configurateur-tresse-root.is-canopy-active #mainPanel.is-closed,
  #configurateur-tresse-root.is-rug-active #mainPanel.is-closed,
  #configurateur-tresse-root.is-room-active #mainPanel.is-closed,
  #configurateur-tresse-root[data-active-product="tresse"] #mainPanel.is-closed{
    inset:auto 12px 24px auto !important;
    width:224px !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    transform:none !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed .panelHd{
    width:224px !important;
  }

  #configurateur-tresse-root .panelHd{
    min-height:48px !important;
    flex-basis:48px !important;
  }

  #configurateur-tresse-root .mobile-step-nav{
    flex-basis:50px !important;
    min-height:50px !important;
  }

  #configurateur-tresse-root .panelBody{
    padding:0 2px 8px !important;
  }

  #configurateur-tresse-root .optSection{
    padding:15px !important;
    border-radius:21px !important;
  }

  #configurateur-tresse-root .main-config-actions,
  #configurateur-tresse-root[data-active-product="tresse"] .main-config-actions,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .main-config-actions{
    inset:auto 8px max(6px, env(safe-area-inset-bottom)) 8px !important;
    width:auto !important;
    min-height:68px !important;
  }

  #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .canvasWrap,
  body.sissou-configurator-standalone #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .canvasWrap{
    display:grid !important;
    place-items:center !important;
    padding:8px !important;
  }

  #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .braidCanvas{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    height:auto !important;
    max-height:calc(100dvh - 16px) !important;
  }

  #configurateur-tresse-root.is-preview-focus .preview-focus-cue{
    inset:auto auto max(18px, env(safe-area-inset-bottom)) 50% !important;
  }
}

@media (max-width:420px){
  #configurateur-tresse-root .preview-focus-cue-text{
    font-size:8px !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed,
  #configurateur-tresse-root[data-active-product="tresse"] #mainPanel.is-closed{
    width:206px !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed .panelHd{
    width:206px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #configurateur-tresse-root #mainPanel,
  #configurateur-tresse-root .main-config-actions,
  #configurateur-tresse-root .preview-focus-cue{
    transition:none !important;
  }
}