/*
 * V53 — Dimensions naturelles, panneaux lisibles et cadre compact.
 *
 * La tresse retrouve son échelle produit d'origine. Tous les panneaux de
 * personnalisation utilisent un fond blanc opaque afin que la photo placée
 * derrière le configurateur ne nuise jamais à la lecture.
 */

#configurateur-tresse-root #mainPanel,
#configurateur-tresse-root #mainPanel .panelHd,
#configurateur-tresse-root #mainPanel .mobile-step-nav,
#configurateur-tresse-root #mainPanel .panelBody {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}

#configurateur-tresse-root #mainPanel {
  border-color: rgba(90, 65, 48, 0.12) !important;
  box-shadow:
    0 18px 50px rgba(67, 47, 33, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.sissou-configurator-standalone
  #configurateur-tresse-root.mobile-panel-open
  #mainPanel:not(.is-closed) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

#configurateur-tresse-root #mainPanel .panelBody {
  isolation: isolate;
}

#configurateur-tresse-root #mainPanel .optSection {
  background-color: #ffffff !important;
}

/*
 * Retour à la taille produit utilisée avant l'agrandissement V41.
 */
@media (min-width: 981px) {
  #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas {
    width: min(58vw, 980px) !important;
    max-width: calc(100vw - 540px) !important;
    height: auto !important;
    max-height: 68vh !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /*
   * Quand l'iframe est raccourcie par Shopify, les commandes utilisent
   * l'espace disponible et leur contenu défile à l'intérieur du panneau.
   */
  html body.sissou-configurator-standalone
    #configurateur-tresse-root.mobile-panel-open
    #mainPanel:not(.is-closed) {
    position: fixed !important;
    inset: 78px 18px 74px auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  #configurateur-tresse-root.mobile-panel-open #mainPanel .panelBody {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }

  html body.sissou-configurator-standalone
    #configurateur-tresse-root.mobile-panel-open
    .main-config-actions {
    position: fixed !important;
    top: auto !important;
    right: 18px !important;
    bottom: 12px !important;
    left: auto !important;
    transform: none !important;
  }
}

@media (max-width: 980px) {
  #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"]:not(.is-preview-focus) #canvas-braid,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"]:not(.is-preview-focus) .braidCanvas {
    width: min(92vw, 720px) !important;
    max-width: 92vw !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }

  #configurateur-tresse-root.mobile-panel-open #mainPanel {
    border-radius: 20px 20px 0 0 !important;
  }
}

@media (min-width: 981px) and (max-height: 700px) {
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    #canvas-rug[data-rug-model="braided"],
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    .rugCanvas[data-rug-model="braided"],
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    #canvas-rug[data-rug-model="knot"],
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    .rugCanvas[data-rug-model="knot"] {
    transform: rotate(12deg) scale(0.68) !important;
  }
}