/*
 * V54 — Panneaux blancs et navigation produit compacte.
 *
 * Cette feuille est volontairement chargee en dernier : elle neutralise les
 * anciennes variantes transparentes sans modifier la structure responsive.
 */

#configurateur-tresse-root #mainPanel:not(.is-closed),
#configurateur-tresse-root.is-canopy-active #mainPanel:not(.is-closed),
#configurateur-tresse-root.is-rug-active #mainPanel:not(.is-closed),
#configurateur-tresse-root.is-room-active #mainPanel:not(.is-closed),
#configurateur-tresse-root[data-active-product="tresse"] #mainPanel:not(.is-closed) {
  border: 1px solid rgba(83, 61, 46, 0.11) !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow:
    0 22px 58px rgba(66, 45, 31, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#configurateur-tresse-root #mainPanel .panelHd {
  border: 1px solid rgba(83, 61, 46, 0.10) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow:
    0 12px 30px rgba(66, 45, 31, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#configurateur-tresse-root #mainPanel .mobile-step-nav {
  border: 1px solid rgba(83, 61, 46, 0.09) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow:
    0 10px 26px rgba(66, 45, 31, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#configurateur-tresse-root #mainPanel .panelBody,
#configurateur-tresse-root #mainPanel .panelBody > .opt:not([hidden]),
#configurateur-tresse-root #mainPanel .optSection,
#configurateur-tresse-root #mainPanel .optSection > .bd,
#configurateur-tresse-root #mainPanel .optSection > .bd > .col {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}

#configurateur-tresse-root .main-config-actions {
  border: 1px solid rgba(83, 61, 46, 0.11) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow:
    0 18px 46px rgba(66, 45, 31, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

/* Retour a une taille de navigation, et non a une hierarchie de titre H1. */
#configurateur-tresse-root .mainTabs .tabBtn,
#configurateur-tresse-root .mainTabs .chip {
  min-width: 0 !important;
  padding-inline: 10px !important;
  overflow: hidden !important;
  font-size: clamp(13px, 0.82vw, 15px) !important;
  font-weight: 780 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#configurateur-tresse-root .room-tab-label,
#configurateur-tresse-root .room-tab-copy {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#configurateur-tresse-root .room-tab-copy > span,
#configurateur-tresse-root .room-tab-copy > small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Les tapis restent verticaux meme sur les ecrans desktop peu hauts. */
@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: scale(0.72) !important;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  #configurateur-tresse-root .mainTabs .tabBtn,
  #configurateur-tresse-root .mainTabs .chip {
    padding-inline: 6px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 980px) {
  #configurateur-tresse-root #mainPanel:not(.is-closed) {
    border-radius: 22px 22px 0 0 !important;
    box-shadow:
      0 -14px 40px rgba(66, 45, 31, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  #configurateur-tresse-root .mainTabs .tabBtn,
  #configurateur-tresse-root .mainTabs .chip {
    padding-inline: 3px !important;
    font-size: clamp(9px, 2.7vw, 11px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 420px) {
  #configurateur-tresse-root .mainTabs .tabBtn,
  #configurateur-tresse-root .mainTabs .chip {
    font-size: clamp(8px, 2.45vw, 10px) !important;
  }
}