/*
 * Studio Sissou 2026
 * Final presentation layer loaded after configurateur-modern.css.
 * The product navigation bar intentionally keeps its existing identity.
 */

html,
body{
  margin:0;
  min-height:100%;
  background:#f3f2ef !important;
}

body.sissou-configurator-standalone{
  color:#292724;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#configurateur-tresse-root{
  --s26-bg:#f3f2ef;
  --s26-stage:#e8e6e1;
  --s26-surface:#ffffff;
  --s26-surface-soft:#f8f7f4;
  --s26-ink:#292724;
  --s26-muted:#77726b;
  --s26-line:#e4e0da;
  --s26-accent:#b96f45;
  --s26-accent-soft:#f2ded0;
  --s26-dark:#302d29;
  --s26-shadow:0 24px 70px rgba(42,37,32,.10);
  width:100%;
  min-height:100vh;
  color:var(--s26-ink);
  background:
    radial-gradient(900px 520px at 50% -240px, rgba(255,255,255,.94), transparent 72%),
    var(--s26-bg) !important;
  isolation:isolate;
}

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

#configurateur-tresse-root *,
#configurateur-tresse-root *::before,
#configurateur-tresse-root *::after{
  box-sizing:border-box;
}

#configurateur-tresse-root button,
#configurateur-tresse-root input,
#configurateur-tresse-root select{
  font:inherit;
}

#configurateur-tresse-root button{
  -webkit-tap-highlight-color:transparent;
}

/* Product bar: geometry only. Its visual treatment remains unchanged. */
#configurateur-tresse-root #mainConfiguratorCard > .mainTabsHd{
  z-index:80;
}

#configurateur-tresse-root .mainTabs{
  max-width:720px;
  margin-inline:auto;
}

/* Main studio */
#configurateur-tresse-root #mainConfiguratorCard{
  width:100% !important;
  max-width:1760px !important;
  margin:0 auto !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .mainStageBd{
  min-width:0;
  min-height:0;
}

#configurateur-tresse-root #mainStage{
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(56,51,46,.08) !important;
  background:
    radial-gradient(68% 58% at 50% 44%, rgba(255,255,255,.62), transparent 100%),
    var(--s26-stage) !important;
  box-shadow:var(--s26-shadow) !important;
}

#configurateur-tresse-root .view-braid,
#configurateur-tresse-root .view-canopy,
#configurateur-tresse-root .view-rug,
#configurateur-tresse-root .view-room{
  position:relative;
  width:100%;
  height:100%;
  min-height:0 !important;
  overflow:hidden !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .view-braid::before,
#configurateur-tresse-root .view-braid::after{
  display:none !important;
}

#configurateur-tresse-root .view-braid > .hd,
#configurateur-tresse-root .view-canopy > .hd,
#configurateur-tresse-root .view-rug > .hd,
#configurateur-tresse-root .view-room > .hd{
  position:absolute !important;
  z-index:8 !important;
  display:flex;
  align-items:center;
  min-height:42px;
  margin:0 !important;
  padding:10px 14px !important;
  border:1px solid rgba(55,49,44,.10) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 10px 30px rgba(43,38,33,.09) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

#configurateur-tresse-root .view-braid > .hd h2,
#configurateur-tresse-root .view-canopy > .hd h2,
#configurateur-tresse-root .view-rug > .hd h2,
#configurateur-tresse-root .view-room > .hd h2{
  margin:0;
  color:var(--s26-ink) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}

#configurateur-tresse-root .canvasWrap,
#configurateur-tresse-root .view-canopy .canvasWrap,
#configurateur-tresse-root .view-rug .canvasWrap,
#configurateur-tresse-root .view-room .canvasWrap{
  position:relative;
  z-index:1;
  display:flex;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  isolation:isolate;
}

#configurateur-tresse-root .canvasWrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 24%),
    radial-gradient(75% 72% at 50% 46%, transparent 66%, rgba(39,34,29,.055) 100%);
}

#configurateur-tresse-root .canvasWrap::after{
  display:none !important;
}

#configurateur-tresse-root .canvasWrap canvas,
#configurateur-tresse-root .braidCanvas,
#configurateur-tresse-root .canopyCanvas,
#configurateur-tresse-root .rugCanvas,
#configurateur-tresse-root .roomCanvas{
  position:relative;
  z-index:1;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 18px 30px rgba(39,34,29,.12));
}

/* One integrated configuration console */
#configurateur-tresse-root #mainPanel{
  z-index:30;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:1px solid var(--s26-line) !important;
  border-bottom:0 !important;
  border-radius:28px 28px 0 0 !important;
  background:var(--s26-surface) !important;
  color:var(--s26-ink) !important;
  box-shadow:0 18px 48px rgba(42,37,32,.08) !important;
  backdrop-filter:none !important;
}

#configurateur-tresse-root .panelHd{
  position:relative;
  flex:0 0 64px !important;
  display:flex;
  align-items:center;
  min-height:64px !important;
  padding:0 16px 0 20px !important;
  border-bottom:1px solid var(--s26-line) !important;
  background:#fff !important;
}

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

#configurateur-tresse-root .panelTitle{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--s26-ink) !important;
  font-size:17px !important;
  font-weight:780 !important;
  letter-spacing:-.025em;
}

#configurateur-tresse-root .panelTitle::before{
  content:"";
  width:9px !important;
  height:9px !important;
  flex:0 0 9px !important;
  border-radius:50% !important;
  background:var(--s26-accent) !important;
  box-shadow:0 0 0 5px var(--s26-accent-soft) !important;
}

#configurateur-tresse-root .panelToggleBtn{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  border:1px solid var(--s26-line) !important;
  border-radius:13px !important;
  background:var(--s26-surface-soft) !important;
  color:#4e4943 !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .panelToggleBtn:hover{
  border-color:#c9c3bc !important;
  background:#fff !important;
}

/* Step navigation is shared by desktop and mobile. */
#configurateur-tresse-root .mobile-step-nav{
  display:flex !important;
  flex:0 0 58px;
  gap:6px;
  align-items:center;
  width:100%;
  min-width:0;
  padding:8px 10px;
  overflow-x:auto;
  border-bottom:1px solid var(--s26-line);
  background:#fff;
  scrollbar-width:none;
}

#configurateur-tresse-root .mobile-step-nav::-webkit-scrollbar{
  display:none;
}

#configurateur-tresse-root .mobile-step-btn{
  display:flex;
  flex:1 1 0;
  align-items:center;
  justify-content:center;
  min-width:96px;
  min-height:40px;
  gap:7px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--s26-muted);
  box-shadow:none;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}

#configurateur-tresse-root .mobile-step-btn:hover{
  background:var(--s26-surface-soft);
}

#configurateur-tresse-root .mobile-step-btn span{
  display:grid;
  width:22px;
  height:22px;
  flex:0 0 22px;
  place-items:center;
  border-radius:50%;
  background:#ece9e5;
  color:#716c65;
  font-size:10px;
  font-weight:850;
}

#configurateur-tresse-root .mobile-step-btn strong{
  overflow:hidden;
  font-size:11px;
  font-weight:760;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#configurateur-tresse-root .mobile-step-btn.is-active{
  border-color:#3a3733;
  background:var(--s26-dark) !important;
  color:#fff !important;
  box-shadow:0 7px 18px rgba(47,44,41,.15) !important;
}

#configurateur-tresse-root .mobile-step-btn.is-active span{
  background:#fff;
  color:var(--s26-dark);
}

#configurateur-tresse-root .mobile-step-hidden{
  display:none !important;
}

#configurateur-tresse-root .panelBody{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:#fff !important;
  scrollbar-color:#cfc8c0 transparent;
  scrollbar-width:thin;
}

#configurateur-tresse-root .panelBody::-webkit-scrollbar{
  width:6px;
}

#configurateur-tresse-root .panelBody::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#cfc8c0;
}

#configurateur-tresse-root .panelBody > .opt:not([hidden]){
  display:block;
  width:100%;
  min-height:100%;
}

#configurateur-tresse-root .optSection{
  position:relative;
  margin:0 !important;
  padding:18px 18px 24px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .optSection::before,
#configurateur-tresse-root .optStepHeader{
  display:none !important;
}

#configurateur-tresse-root .optSection .bd,
#configurateur-tresse-root .optSection .col{
  gap:12px !important;
}

#configurateur-tresse-root label,
#configurateur-tresse-root .compact-choice-label,
#configurateur-tresse-root .rug-options label,
#configurateur-tresse-root .canopy-options label,
#configurateur-tresse-root .room-options label{
  color:#625d56 !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.065em !important;
  text-transform:uppercase;
}

#configurateur-tresse-root .muted,
#configurateur-tresse-root .tresse-entry-help,
#configurateur-tresse-root .rug-material-note{
  color:var(--s26-muted) !important;
}

/* Shared controls */
#configurateur-tresse-root .chips{
  gap:8px !important;
}

#configurateur-tresse-root .chip,
#configurateur-tresse-root .btn{
  border-color:var(--s26-line) !important;
  background:#fff !important;
  color:var(--s26-ink) !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .chip:hover,
#configurateur-tresse-root .btn:hover{
  transform:translateY(-1px);
  border-color:#c8c2ba !important;
}

#configurateur-tresse-root .chip.active,
#configurateur-tresse-root .btn.active,
#configurateur-tresse-root .rug-fabric-type-chip.active,
#configurateur-tresse-root .rug-motif-choice.active,
#configurateur-tresse-root .compact-fabric-chip.active{
  border-color:var(--s26-dark) !important;
  background:var(--s26-dark) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(47,44,41,.14) !important;
}

#configurateur-tresse-root .canopy-type-grid,
#configurateur-tresse-root .canopy-model-grid,
#configurateur-tresse-root .canopy-variant-grid,
#configurateur-tresse-root .canopy-option-toggle-grid,
#configurateur-tresse-root .canopy-stitch-toggle-grid,
#configurateur-tresse-root .canopy-pocket-toggle-grid,
#configurateur-tresse-root .rug-type-grid,
#configurateur-tresse-root .room-product-grid,
#configurateur-tresse-root .room-type-grid,
#configurateur-tresse-root #braidTypeChips{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
}

#configurateur-tresse-root .canopy-type-grid .chip,
#configurateur-tresse-root .canopy-model-grid .chip,
#configurateur-tresse-root .canopy-variant-grid .chip,
#configurateur-tresse-root .canopy-option-toggle-grid .chip,
#configurateur-tresse-root .canopy-stitch-toggle-grid .chip,
#configurateur-tresse-root .canopy-pocket-toggle-grid .chip,
#configurateur-tresse-root .rug-type-grid .chip,
#configurateur-tresse-root .room-product-grid .chip,
#configurateur-tresse-root .room-type-grid .chip,
#configurateur-tresse-root #braidTypeChips .chip{
  min-height:46px !important;
  padding:9px 12px !important;
  border-radius:13px !important;
  font-size:12px !important;
  font-weight:760 !important;
}

#configurateur-tresse-root #knownTresseSize{
  min-height:54px !important;
  border:1px solid var(--s26-line) !important;
  border-radius:14px !important;
  background:var(--s26-surface-soft) !important;
  color:var(--s26-ink) !important;
  box-shadow:none !important;
}

#configurateur-tresse-root #knownTresseSize:focus{
  border-color:var(--s26-dark) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(48,45,41,.10) !important;
}

#configurateur-tresse-root .tresse-help-inline-btn{
  min-height:54px !important;
  border-radius:14px !important;
  background:#fff !important;
}

#configurateur-tresse-root #desiredBlock{
  border:1px solid var(--s26-line) !important;
  border-radius:16px !important;
  background:var(--s26-surface-soft) !important;
}

/* Braid material accordions */
#configurateur-tresse-root #strandRows{
  gap:8px !important;
}

#configurateur-tresse-root .strand-accordion{
  border:1px solid var(--s26-line) !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .strand-accordion.is-open{
  border-color:#bdb6ae !important;
  box-shadow:0 12px 28px rgba(42,37,32,.075) !important;
}

#configurateur-tresse-root .strand-accordion-trigger{
  min-height:62px !important;
  padding:9px 10px !important;
}

#configurateur-tresse-root .strand-accordion-preview{
  width:42px !important;
  height:42px !important;
  flex-basis:42px !important;
  border-radius:12px !important;
}

#configurateur-tresse-root .strand-accordion-title{
  color:var(--s26-ink) !important;
  font-size:13px !important;
  font-weight:780 !important;
}

#configurateur-tresse-root .strand-accordion-summary{
  color:var(--s26-muted) !important;
  font-size:11px !important;
}

#configurateur-tresse-root .strand-accordion-icon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  flex-basis:34px !important;
  border-color:var(--s26-line) !important;
  border-radius:11px !important;
  background:var(--s26-surface-soft) !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .strand-accordion-panel{
  padding:12px !important;
  border-color:var(--s26-line) !important;
  background:var(--s26-surface-soft) !important;
}

#configurateur-tresse-root .compact-fabric-list{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:7px !important;
}

#configurateur-tresse-root .compact-fabric-chip{
  min-height:40px !important;
  border-color:var(--s26-line) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:var(--s26-ink) !important;
  font-size:11px !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .compact-color-grid{
  grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
  gap:7px !important;
}

#configurateur-tresse-root .compact-color-swatch{
  min-height:36px !important;
  border-radius:10px !important;
}

#configurateur-tresse-root .compact-color-swatch.active,
#configurateur-tresse-root .rug-color-dot.active{
  border-color:#fff !important;
  outline:2px solid var(--s26-dark) !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}

/* Canopy fabric gallery */
#configurateur-tresse-root .canopy-chip-grid,
#configurateur-tresse-root .canopy-pocket-chip-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
}

#configurateur-tresse-root .canopy-fabric-choice{
  display:grid !important;
  grid-template-columns:46px minmax(0, 1fr);
  align-items:center;
  min-height:58px !important;
  gap:10px;
  padding:6px !important;
  overflow:hidden;
  border:1px solid var(--s26-line) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:var(--s26-ink) !important;
  text-align:left;
}

#configurateur-tresse-root .canopy-fabric-choice.active{
  border-color:var(--s26-dark) !important;
  background:var(--s26-surface-soft) !important;
  color:var(--s26-ink) !important;
  box-shadow:inset 0 0 0 1px var(--s26-dark) !important;
}

#configurateur-tresse-root .canopy-fabric-preview{
  width:46px;
  height:46px;
  border:1px solid rgba(45,41,37,.10);
  border-radius:11px;
  background-color:#ece9e5;
  background-position:center;
  background-size:cover;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
}

#configurateur-tresse-root .canopy-fabric-label{
  display:-webkit-box;
  overflow:hidden;
  color:inherit;
  font-size:10px;
  font-weight:740;
  line-height:1.25;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#configurateur-tresse-root .canopy-type-pill,
#configurateur-tresse-root .canopy-cart-note{
  border-color:var(--s26-line) !important;
  border-radius:14px !important;
  background:var(--s26-surface-soft) !important;
}

/* Rug: compact accordion, one strand at a time */
#configurateur-tresse-root .rug-chip-grid.is-layered-rug{
  display:block !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
}

#configurateur-tresse-root .rug-material-note{
  margin:0 0 10px !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-transform:none !important;
}

#configurateur-tresse-root .rug-layer-picker{
  margin:0 0 8px !important;
  padding:0 !important;
  overflow:hidden;
  border:1px solid var(--s26-line) !important;
  border-radius:15px !important;
  background:#fff !important;
}

#configurateur-tresse-root .rug-layer-picker.is-open{
  border-color:#bdb6ae !important;
  box-shadow:0 12px 28px rgba(42,37,32,.07) !important;
}

#configurateur-tresse-root .rug-layer-header{
  display:flex !important;
  width:100%;
  min-height:58px;
  margin:0 !important;
  padding:9px 11px !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0 !important;
  background:#fff !important;
  color:var(--s26-ink) !important;
  text-align:left;
  cursor:pointer;
}

#configurateur-tresse-root .rug-layer-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
}

#configurateur-tresse-root .rug-layer-index{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:11px;
  background:var(--s26-surface-soft);
  color:var(--s26-ink);
  font-size:11px;
  font-weight:800;
}

#configurateur-tresse-root .rug-layer-header strong{
  min-width:0;
  overflow:hidden;
  color:var(--s26-muted) !important;
  font-size:11px !important;
  font-weight:680 !important;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#configurateur-tresse-root .rug-layer-chevron{
  width:9px;
  height:9px;
  flex:0 0 9px;
  margin-right:4px;
  border-right:1.8px solid #79736c;
  border-bottom:1.8px solid #79736c;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}

#configurateur-tresse-root .rug-layer-picker.is-open .rug-layer-chevron{
  transform:rotate(225deg) translate(-1px, -1px);
}

#configurateur-tresse-root .rug-layer-body{
  padding:12px !important;
  border-top:1px solid var(--s26-line);
  background:var(--s26-surface-soft);
}

#configurateur-tresse-root .rug-layer-body[hidden]{
  display:none !important;
}

#configurateur-tresse-root .rug-fabric-type-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:6px !important;
  margin-bottom:10px !important;
}

#configurateur-tresse-root .rug-fabric-type-chip{
  min-height:38px !important;
  padding:5px 4px !important;
  border:1px solid var(--s26-line) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--s26-ink) !important;
  font-size:9px !important;
  font-weight:760 !important;
}

#configurateur-tresse-root .rug-color-grid{
  grid-template-columns:repeat(9, minmax(0, 1fr)) !important;
  gap:7px !important;
}

#configurateur-tresse-root .rug-color-dot{
  min-height:30px !important;
  border-color:rgba(45,41,37,.12) !important;
  border-radius:9px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
}

#configurateur-tresse-root .rug-motif-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:6px !important;
  max-height:196px !important;
  padding:2px !important;
}

#configurateur-tresse-root .rug-motif-choice{
  min-height:36px !important;
  padding:6px 8px !important;
  border-color:var(--s26-line) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--s26-ink) !important;
  font-size:9px !important;
}

/* Summary and purchase console */
#configurateur-tresse-root .main-config-actions{
  z-index:31;
  display:grid !important;
  grid-template-columns:minmax(104px, .72fr) minmax(0, 1.28fr) !important;
  gap:8px !important;
  min-width:0;
  margin:0 !important;
  padding:10px !important;
  border:1px solid var(--s26-line) !important;
  border-radius:0 0 28px 28px !important;
  background:#fff !important;
  box-shadow:0 20px 48px rgba(42,37,32,.08) !important;
  backdrop-filter:none !important;
}

#configurateur-tresse-root .mini-braid-option{
  grid-column:1 / -1;
  min-height:44px !important;
  padding:7px 10px !important;
  border:1px solid var(--s26-line) !important;
  border-radius:13px !important;
  background:var(--s26-surface-soft) !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .mini-braid-check{
  border-color:#bdb6ae !important;
  border-radius:7px !important;
  background:#fff !important;
}

#configurateur-tresse-root .mini-braid-option input:checked + .mini-braid-check{
  border-color:var(--s26-dark) !important;
  background:var(--s26-dark) !important;
}

#configurateur-tresse-root .mini-braid-title{
  color:var(--s26-ink) !important;
  font-size:10px !important;
  font-weight:800 !important;
}

#configurateur-tresse-root .mini-braid-price{
  color:var(--s26-muted) !important;
  font-size:10px !important;
}

#configurateur-tresse-root .main-price-inline{
  min-width:0;
  min-height:54px !important;
  padding:8px 10px !important;
  border:1px solid var(--s26-line) !important;
  border-radius:14px !important;
  background:var(--s26-surface-soft) !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .main-price-inline-label{
  color:var(--s26-muted) !important;
  font-size:10px !important;
  font-weight:700 !important;
}

#configurateur-tresse-root #actionDesiredPrice{
  color:var(--s26-ink) !important;
  font-size:19px !important;
  font-weight:800 !important;
}

#configurateur-tresse-root .main-add-btn{
  min-width:0;
  min-height:54px !important;
  border:1px solid var(--s26-dark) !important;
  border-radius:14px !important;
  background:var(--s26-dark) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(47,44,41,.15) !important;
  font-size:11px !important;
  font-weight:780 !important;
}

#configurateur-tresse-root .main-add-btn:not(:disabled):hover{
  transform:translateY(-1px);
  background:#191816 !important;
  box-shadow:0 13px 26px rgba(31,29,27,.20) !important;
}

#configurateur-tresse-root .main-add-btn:disabled{
  border-color:#e7e3de !important;
  background:#ece9e5 !important;
  color:#aaa49c !important;
  box-shadow:none !important;
}

#configurateur-tresse-root button:focus-visible,
#configurateur-tresse-root input:focus-visible{
  outline:3px solid rgba(48,45,41,.14) !important;
  outline-offset:2px;
}

/* Desktop studio */
@media (min-width:981px){
  #configurateur-tresse-root{
    height:100vh !important;
    min-height:700px !important;
    padding:16px 20px 20px !important;
    overflow:hidden !important;
  }

  #configurateur-tresse-root #mainConfiguratorCard{
    display:grid !important;
    grid-template-rows:auto minmax(0, 1fr) !important;
    height:calc(100vh - 36px) !important;
  }

  #configurateur-tresse-root #mainConfiguratorCard > .mainTabsHd{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    padding:0 0 14px !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  #configurateur-tresse-root .mainTabsHd-left{
    width:100% !important;
  }

  #configurateur-tresse-root .mainStageBd{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(440px, 510px) !important;
    grid-template-rows:minmax(0, 1fr) auto !important;
    grid-template-areas:
      "preview controls"
      "preview actions" !important;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    column-gap:16px !important;
    row-gap:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #configurateur-tresse-root #mainStage{
    position:relative !important;
    inset:auto !important;
    grid-area:preview !important;
    width:100%;
    height:100% !important;
    min-height:0 !important;
    border-radius:30px !important;
  }

  #configurateur-tresse-root .view-braid > .hd,
  #configurateur-tresse-root .view-canopy > .hd,
  #configurateur-tresse-root .view-rug > .hd,
  #configurateur-tresse-root .view-room > .hd{
    top:18px !important;
    left:18px !important;
  }

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

  #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{
    position:relative !important;
    inset:auto !important;
    grid-area:controls !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    width:auto !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed{
    align-self:start !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    border-bottom:1px solid var(--s26-line) !important;
    border-radius:28px !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed .mobile-step-nav,
  #configurateur-tresse-root #mainPanel.is-closed .panelBody{
    display:none !important;
  }

  #configurateur-tresse-root .main-config-actions{
    position:relative !important;
    inset:auto !important;
    grid-area:actions !important;
    align-self:end !important;
    justify-self:stretch !important;
    width:auto !important;
  }
}

/* Mobile product studio */
@media (max-width:980px){
  html,
  body.sissou-configurator-standalone{
    width:100%;
    height:100%;
    overflow:hidden;
  }

  #configurateur-tresse-root{
    width:100%;
    height:100dvh !important;
    min-height:600px !important;
    padding:0 !important;
    overflow:hidden !important;
    background:var(--s26-bg) !important;
  }

  #configurateur-tresse-root #mainConfiguratorCard{
    display:grid !important;
    grid-template-rows:auto minmax(0, 1fr) !important;
    width:100% !important;
    height:100dvh !important;
    margin:0 !important;
  }

  /* Keep the approved product bar, only make it fit the viewport. */
  #configurateur-tresse-root #mainConfiguratorCard > .mainTabsHd{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    padding:7px 7px 6px !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  #configurateur-tresse-root .mainTabs{
    width:100%;
    max-width:none;
    flex-wrap:nowrap !important;
  }

  #configurateur-tresse-root .mainTabs .chip{
    flex:1 1 25% !important;
    min-width:0 !important;
  }

  #configurateur-tresse-root .mainStageBd,
  #configurateur-tresse-root.mobile-panel-open .mainStageBd,
  #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"] .mainStageBd{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    grid-template-rows:minmax(260px, 45dvh) minmax(0, 1fr) auto !important;
    grid-template-areas:
      "preview"
      "controls"
      "actions" !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    gap:0 !important;
    overflow:hidden !important;
  }

  #configurateur-tresse-root:not(.mobile-panel-open) .mainStageBd{
    grid-template-rows:minmax(0, 1fr) 56px auto !important;
  }

  #configurateur-tresse-root #mainStage{
    position:relative !important;
    inset:auto !important;
    grid-area:preview !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 0 24px 24px !important;
    box-shadow:0 12px 30px rgba(42,37,32,.09) !important;
  }

  #configurateur-tresse-root .view-braid > .hd,
  #configurateur-tresse-root .view-canopy > .hd,
  #configurateur-tresse-root .view-rug > .hd,
  #configurateur-tresse-root .view-room > .hd{
    top:10px !important;
    left:10px !important;
    min-height:36px;
    padding:7px 10px !important;
  }

  #configurateur-tresse-root .canvasWrap,
  #configurateur-tresse-root .view-canopy .canvasWrap,
  #configurateur-tresse-root .view-rug .canvasWrap,
  #configurateur-tresse-root .view-room .canvasWrap,
  #configurateur-tresse-root[data-active-product="tresse"] .canvasWrap,
  #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"] .canvasWrap{
    padding:48px 8px 8px !important;
  }

  #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{
    position:relative !important;
    inset:auto !important;
    grid-area:controls !important;
    align-self:stretch !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:20px 20px 0 0 !important;
    box-shadow:0 -10px 28px rgba(42,37,32,.10) !important;
  }

  #configurateur-tresse-root .panelHd{
    flex-basis:50px !important;
    min-height:50px !important;
    padding:6px 10px 2px 14px !important;
  }

  #configurateur-tresse-root .panelHd::after{
    content:"";
    position:absolute;
    top:5px;
    left:50%;
    width:34px;
    height:3px;
    border-radius:999px;
    background:#cac4bd;
    transform:translateX(-50%);
  }

  #configurateur-tresse-root .panelTitle{
    font-size:13px !important;
  }

  #configurateur-tresse-root .panelTitle::before{
    width:7px !important;
    height:7px !important;
    flex-basis:7px !important;
    box-shadow:0 0 0 4px var(--s26-accent-soft) !important;
  }

  #configurateur-tresse-root .panelToggleBtn{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
  }

  #configurateur-tresse-root .mobile-step-nav{
    flex-basis:50px;
    min-height:50px;
    padding:5px 7px;
  }

  #configurateur-tresse-root .mobile-step-btn{
    min-width:88px;
    min-height:38px;
    padding:5px 7px;
  }

  #configurateur-tresse-root .mobile-step-btn strong{
    font-size:10px;
  }

  #configurateur-tresse-root .panelBody{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
  }

  #configurateur-tresse-root .optSection{
    padding:12px 10px 18px !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{
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    border-bottom:1px solid var(--s26-line) !important;
    border-radius:20px 20px 0 0 !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed .mobile-step-nav,
  #configurateur-tresse-root #mainPanel.is-closed .panelBody{
    display:none !important;
  }

  #configurateur-tresse-root .main-config-actions{
    position:relative !important;
    inset:auto !important;
    grid-area:actions !important;
    align-self:end !important;
    width:100% !important;
    min-height:72px !important;
    padding:8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
    box-shadow:0 -8px 20px rgba(42,37,32,.08) !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] .main-config-actions{
    min-height:112px !important;
  }

  #configurateur-tresse-root .canopy-chip-grid,
  #configurateur-tresse-root .canopy-pocket-chip-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #configurateur-tresse-root .canopy-fabric-choice{
    grid-template-columns:40px minmax(0, 1fr);
    min-height:50px !important;
  }

  #configurateur-tresse-root .canopy-fabric-preview{
    width:40px;
    height:40px;
  }

  #configurateur-tresse-root .compact-color-grid{
    grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
  }

  #configurateur-tresse-root .rug-color-grid{
    grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
  }
}

@media (max-width:420px){
  #configurateur-tresse-root .mainTabs .chip{
    font-size:9px !important;
  }

  #configurateur-tresse-root .rug-fabric-type-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #configurateur-tresse-root .canopy-chip-grid,
  #configurateur-tresse-root .canopy-pocket-chip-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:980px) and (max-height:700px){
  #configurateur-tresse-root .mainStageBd,
  #configurateur-tresse-root.mobile-panel-open .mainStageBd,
  #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"] .mainStageBd{
    grid-template-rows:minmax(230px, 40dvh) minmax(0, 1fr) auto !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] .main-config-actions{
    min-height:102px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #configurateur-tresse-root *,
  #configurateur-tresse-root *::before,
  #configurateur-tresse-root *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}