/* Cream studio layer. Canvas rendering and cart mechanics stay untouched. */

html,
body{
  margin:0;
  background:#f4efe7;
}

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

#configurateur-tresse-root{
  --cream:#fbf4ea;
  --cream2:#f2e4d3;
  --sand:#e4d0ba;
  --linen:#fffaf3;
  --text:#2d241d;
  --muted:#78685a;
  --line:rgba(111,86,64,.16);
  --copper:#b87349;
  --copper2:#dfad7a;
  --biscuit:#c9ad8f;
  --biscuit2:#efe0cf;
  --rose:#c9858c;
  --glass:rgba(255,250,243,.78);
  --panel:rgba(255,250,243,.94);
  --shadow:0 26px 72px rgba(85,62,43,.20);
  --shadowSoft:0 14px 34px rgba(85,62,43,.12);
  min-height:100vh;
  padding:18px;
  color:var(--text);
  background:
    radial-gradient(820px 440px at 8% 4%, rgba(201,173,143,.24), transparent 62%),
    radial-gradient(780px 420px at 92% 8%, rgba(223,173,122,.30), transparent 64%),
    radial-gradient(650px 380px at 55% 104%, rgba(201,133,140,.12), transparent 62%),
    linear-gradient(135deg, #fbf4ea 0%, #f2e4d3 48%, #f8f1e8 100%);
  overflow-x:hidden;
  isolation:isolate;
}

#configurateur-tresse-root::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(116,89,67,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,89,67,.045) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 52% 26%, black 0%, transparent 74%);
  opacity:.72;
}

#configurateur-tresse-root::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0 34%, rgba(201,173,143,.14) 35%, transparent 45%),
    linear-gradient(300deg, transparent 0 58%, rgba(184,115,73,.12) 59%, transparent 70%);
}

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

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

#configurateur-tresse-root #mainConfiguratorCard{
  width:min(100%, 1580px);
  max-width:none;
  margin:0 auto;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}

#configurateur-tresse-root #mainConfiguratorCard > .hd{
  padding:0 0 16px;
  border:0;
}

#configurateur-tresse-root .mainTabs{
  display:flex;
  gap:6px;
  padding:6px;
  border:1px solid rgba(105,77,55,.14);
  border-radius:18px;
  background:rgba(255,250,243,.70);
  box-shadow:0 16px 40px rgba(85,62,43,.12);
  backdrop-filter:blur(16px);
}

#configurateur-tresse-root .mainTabs .chip{
  min-height:42px;
  border:1px solid transparent;
  border-radius:13px;
  padding:10px 16px;
  background:transparent;
  color:#4a3a2e;
  box-shadow:none;
  font-size:13px;
}

#configurateur-tresse-root .mainTabs .chip.active,
#configurateur-tresse-root .mainTabs .chip:hover{
  border-color:rgba(184,115,73,.24);
  background:linear-gradient(135deg, rgba(184,115,73,.20), rgba(201,173,143,.18));
  box-shadow:0 12px 24px rgba(184,115,73,.12);
}

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

#configurateur-tresse-root .tresse-help-inline-message{
  padding:0 0 14px;
  color:var(--muted);
}

#configurateur-tresse-root .mainStageBd{
  display:grid;
  grid-template-columns:minmax(660px, 1fr) minmax(390px, 460px);
  grid-template-areas:
    "preview controls"
    "preview actions";
  gap:20px;
  align-items:start;
  min-height:calc(100vh - 84px);
  padding:0;
}

#configurateur-tresse-root #mainStage{
  grid-area:preview;
  position:sticky;
  top:18px;
  min-width:0;
  height:calc(100vh - 36px);
  min-height:650px;
}

#configurateur-tresse-root .view-braid{
  position:relative;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(105,77,55,.16);
  border-radius:30px;
  background:
    linear-gradient(145deg, rgba(255,250,243,.94), rgba(238,223,204,.78)),
    radial-gradient(760px 430px at 22% 8%, rgba(201,173,143,.18), transparent 62%),
    radial-gradient(780px 460px at 84% 78%, rgba(223,173,122,.22), transparent 60%);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

#configurateur-tresse-root .view-braid::before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:0;
  border-radius:24px;
  border:1px solid rgba(184,115,73,.13);
  pointer-events:none;
}

#configurateur-tresse-root .view-braid::after{
  content:"";
  position:absolute;
  width:46%;
  height:2px;
  left:27%;
  top:12px;
  z-index:1;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(201,173,143,.82), rgba(223,173,122,.9), transparent);
  box-shadow:0 0 22px rgba(223,173,122,.42);
  pointer-events:none;
}

#configurateur-tresse-root .view-braid > .hd{
  position:absolute;
  left:22px;
  top:22px;
  z-index:3;
  padding:9px 12px;
  border:1px solid rgba(105,77,55,.13);
  border-radius:15px;
  background:rgba(255,250,243,.76);
  backdrop-filter:blur(14px);
}

#configurateur-tresse-root .view-braid > .hd h2{
  margin:0;
  color:#34291f;
  font-size:14px;
  font-weight:850;
}

#configurateur-tresse-root .canvasWrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  max-height:none;
  flex:1 1 auto;
  min-height:0;
  margin:0 !important;
  padding:58px 24px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  border-radius:0;
  background:transparent;
}

#configurateur-tresse-root .canvasWrap canvas,
#configurateur-tresse-root .braidCanvas{
  width:100% !important;
  height:auto !important;
  max-height:calc(100vh - 126px);
  display:block;
  border:0;
  border-radius:24px;
  background:
    radial-gradient(720px 360px at 18% 0%, rgba(201,173,143,.14), transparent 60%),
    radial-gradient(680px 360px at 86% 12%, rgba(223,173,122,.18), transparent 62%),
    linear-gradient(180deg, #fffdf7 0%, #f4e8d8 100%);
  box-shadow:
    0 0 0 1px rgba(105,77,55,.11),
    0 24px 72px rgba(85,62,43,.22),
    0 0 64px rgba(223,173,122,.10);
}

#configurateur-tresse-root #canvas-braid.sissou-braid-weave{
  animation:sissouBraidWeave 980ms cubic-bezier(.18,.82,.24,1) both;
  transform-origin:50% 50%;
}

#configurateur-tresse-root #canvas-braid.sissou-braid-reveal{
  animation:sissouBraidReveal 820ms cubic-bezier(.16,.84,.28,1) both;
}

@keyframes sissouBraidWeave{
  0%{
    opacity:.82;
    transform:translate3d(-18px, 0, 0) rotate(-.55deg) scale(.985);
    filter:blur(2px) saturate(1.08);
    clip-path:polygon(0 45%, 11% 34%, 22% 48%, 33% 36%, 44% 51%, 55% 39%, 66% 53%, 77% 41%, 88% 55%, 100% 44%, 100% 100%, 0 100%);
  }
  22%{
    opacity:1;
    transform:translate3d(12px, -4px, 0) rotate(.45deg) scale(1.01);
    filter:blur(.8px) saturate(1.18);
    clip-path:polygon(0 23%, 10% 45%, 20% 28%, 30% 50%, 40% 31%, 50% 54%, 60% 34%, 70% 56%, 80% 37%, 90% 59%, 100% 42%, 100% 100%, 0 100%);
  }
  48%{
    transform:translate3d(-8px, 4px, 0) rotate(-.25deg) scale(1.006);
    filter:blur(.4px) saturate(1.12);
    clip-path:polygon(0 8%, 9% 32%, 18% 14%, 27% 38%, 36% 17%, 45% 43%, 54% 20%, 63% 46%, 72% 23%, 81% 49%, 90% 26%, 100% 52%, 100% 100%, 0 100%);
  }
  72%{
    transform:translate3d(4px, -2px, 0) rotate(.16deg) scale(1.002);
    filter:blur(0) saturate(1.06);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes sissouBraidReveal{
  0%{
    opacity:.72;
    transform:translate3d(0, 8px, 0) scale(.992);
    filter:blur(2px);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

#configurateur-tresse-root #mainPanel{
  grid-area:controls;
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  opacity:1 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  border:1px solid rgba(105,77,55,.15);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,250,243,.96), rgba(244,232,216,.94));
  color:var(--text);
  box-shadow:var(--shadowSoft);
  backdrop-filter:blur(18px);
}

#configurateur-tresse-root #mainPanel.is-closed{
  max-height:66px !important;
  overflow:hidden !important;
  pointer-events:auto;
}

#configurateur-tresse-root #mainPanel.is-closed .panelBody{
  display:none;
}

#configurateur-tresse-root .panelHd{
  min-height:66px;
  padding:13px 15px;
  border-bottom:1px solid rgba(105,77,55,.11);
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,250,243,.30));
}

#configurateur-tresse-root .panelTitle{
  color:#2d241d;
  font-size:15px;
  font-weight:950;
  text-transform:none;
}

#configurateur-tresse-root .panelTitle::before{
  content:"";
  width:9px;
  height:9px;
  margin-right:9px;
  display:inline-block;
  border-radius:999px;
  background:var(--biscuit);
  box-shadow:0 0 14px rgba(201,173,143,.72);
}

#configurateur-tresse-root .panelToggleBtn{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:14px;
  border:1px solid rgba(105,77,55,.13);
  background:#fffaf3;
  box-shadow:0 10px 22px rgba(85,62,43,.10);
}

#configurateur-tresse-root .panelToggleBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(184,115,73,.34);
  box-shadow:0 14px 30px rgba(85,62,43,.14);
}

#configurateur-tresse-root .panelToggleIcon{
  color:#3d3026;
}

#configurateur-tresse-root .panelBody{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:14px;
}

#configurateur-tresse-root .opt-main{
  gap:13px;
}

#configurateur-tresse-root .optSection{
  position:relative;
  overflow:hidden;
  padding:14px;
  border:1px solid rgba(105,77,55,.12);
  border-radius:18px;
  background:rgba(255,255,255,.54);
  box-shadow:0 8px 24px rgba(85,62,43,.07);
}

#configurateur-tresse-root .optSection::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--biscuit), var(--copper2), var(--rose));
  opacity:.80;
}

#configurateur-tresse-root .optStepHeader{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

#configurateur-tresse-root .optStepNumber{
  width:30px;
  height:30px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
  color:#2d241d;
  background:linear-gradient(135deg, var(--biscuit2), var(--copper2));
  box-shadow:0 10px 22px rgba(184,115,73,.12);
  font-size:13px;
  font-weight:950;
}

#configurateur-tresse-root .optStepTitle{
  color:#2d241d;
  font-size:14px;
  font-weight:950;
}

#configurateur-tresse-root .optSection .hd{
  display:none !important;
}

#configurateur-tresse-root .opt-braid .bd,
#configurateur-tresse-root .opt-length .bd,
#configurateur-tresse-root .opt-summary .bd{
  padding:0;
}

#configurateur-tresse-root .opt-length .bd > .col,
#configurateur-tresse-root .opt-braid .bd > .col{
  gap:14px !important;
}

#configurateur-tresse-root label,
#configurateur-tresse-root .compact-choice-label{
  color:#68594d;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

#configurateur-tresse-root #braidTypeChips{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:9px;
}

#configurateur-tresse-root #braidTypeChips .chip{
  min-height:46px;
  width:100%;
  border:1px solid rgba(105,77,55,.13);
  border-radius:14px;
  background:#fffaf3;
  color:#34291f;
  box-shadow:0 8px 18px rgba(85,62,43,.06);
  font-size:13px;
}

#configurateur-tresse-root #braidTypeChips .chip.active{
  color:#2d241d;
  border-color:rgba(184,115,73,.28);
  background:linear-gradient(135deg, rgba(223,173,122,.82), rgba(239,224,207,.86));
  box-shadow:0 12px 28px rgba(184,115,73,.16);
}

#configurateur-tresse-root #knownTresseSize{
  min-height:48px;
  width:100%;
  max-width:none;
  border-radius:14px;
  border:1px solid rgba(105,77,55,.15);
  background:#fffdf8;
  color:#2d241d;
  font-size:18px;
  font-weight:900;
}

#configurateur-tresse-root #knownTresseSize:focus{
  border-color:rgba(184,115,73,.56);
  box-shadow:0 0 0 4px rgba(184,115,73,.13);
}

#configurateur-tresse-root .tresse-length-input-row{
  gap:9px;
}

#configurateur-tresse-root .tresse-help-inline-btn{
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(201,173,143,.30);
  background:linear-gradient(135deg, rgba(239,224,207,.44), rgba(223,173,122,.16));
  color:#34291f;
}

#configurateur-tresse-root .tresse-entry-help{
  color:#78685a;
  font-size:12px;
  line-height:1.45;
}

#configurateur-tresse-root #desiredBlock{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
}

#configurateur-tresse-root #desiredBlock .item{
  min-height:58px;
  padding:10px;
  border:1px solid rgba(105,77,55,.11);
  border-radius:14px;
  background:rgba(255,250,243,.72);
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
}

#configurateur-tresse-root #desiredBlock .item.final{
  margin-top:0;
  padding-top:10px;
  border-top:1px solid rgba(105,77,55,.11);
}

#configurateur-tresse-root #desiredBlock .muted{
  color:#746456;
  font-size:11px;
}

#configurateur-tresse-root #desiredBlock b,
#configurateur-tresse-root #desiredBlock .pill{
  font-size:13px;
}

#configurateur-tresse-root .pill{
  border-radius:10px;
}

#configurateur-tresse-root #strandRows{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding-bottom:0;
}

#configurateur-tresse-root .strand-accordion{
  overflow:hidden;
  border:1px solid rgba(105,77,55,.12);
  border-radius:17px;
  background:rgba(255,253,248,.78);
  box-shadow:none;
}

#configurateur-tresse-root .strand-accordion.is-open{
  border-color:rgba(184,115,73,.34);
  box-shadow:0 14px 34px rgba(85,62,43,.10);
}

#configurateur-tresse-root .strand-accordion-trigger{
  min-height:68px;
  padding:11px 12px;
  gap:11px;
  background:transparent;
}

#configurateur-tresse-root .strand-accordion-preview{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:14px;
  border:1px solid rgba(105,77,55,.16);
  background-color:#f2ece4;
  background-size:cover;
  background-position:center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 8px 18px rgba(85,62,43,.09);
}

#configurateur-tresse-root .strand-accordion-preview.is-empty{
  background:
    linear-gradient(135deg, rgba(239,224,207,.52), rgba(223,173,122,.24)),
    #f2ece4;
}

#configurateur-tresse-root .strand-accordion-headtext{
  flex:1 1 auto;
}

#configurateur-tresse-root .strand-accordion-title{
  color:#2d241d;
  font-size:15px;
  font-weight:950;
}

#configurateur-tresse-root .strand-accordion-summary{
  color:#716154;
  font-size:12px;
}

#configurateur-tresse-root .strand-accordion-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  flex:0 0 38px !important;
  border-radius:13px;
  border:1px solid rgba(105,77,55,.13);
  background:#fffaf3;
  color:#3d3026;
  box-shadow:0 8px 18px rgba(85,62,43,.08);
}

#configurateur-tresse-root .strand-accordion-trigger:hover .strand-accordion-icon{
  transform:translateY(-1px);
  border-color:rgba(184,115,73,.34);
}

#configurateur-tresse-root .strand-accordion-panel{
  padding:13px;
  border-top:1px solid rgba(105,77,55,.10);
  background:rgba(255,250,243,.72);
}

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

#configurateur-tresse-root .compact-fabric-chip{
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(105,77,55,.13);
  background:#fffdf8;
  color:#34291f;
  font-size:13px;
  font-weight:850;
  box-shadow:0 8px 18px rgba(85,62,43,.05);
}

#configurateur-tresse-root .compact-fabric-chip.active{
  color:#2d241d;
  border-color:rgba(184,115,73,.28);
  background:linear-gradient(135deg, rgba(223,173,122,.84), rgba(239,224,207,.76));
  box-shadow:0 12px 28px rgba(184,115,73,.16);
}

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

#configurateur-tresse-root .compact-color-swatch{
  width:100%;
  min-width:0;
  max-width:none;
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(105,77,55,.16);
  background-color:#f4eee7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);
}

#configurateur-tresse-root .compact-color-swatch:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 22px rgba(85,62,43,.16);
}

#configurateur-tresse-root .compact-color-swatch.active{
  border-color:rgba(45,36,29,.95);
  box-shadow:
    0 0 0 2px rgba(184,115,73,.28),
    0 12px 24px rgba(85,62,43,.14);
}

#configurateur-tresse-root .compact-motif-more-btn{
  min-height:42px;
  border-radius:14px;
  border-color:rgba(201,173,143,.32);
  background:linear-gradient(135deg, rgba(239,224,207,.40), rgba(223,173,122,.16));
  color:#34291f;
}

#configurateur-tresse-root .main-config-actions{
  grid-area:actions;
  position:sticky;
  bottom:18px;
  z-index:30;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:0;
  padding:13px;
  border:1px solid rgba(105,77,55,.15);
  border-radius:24px;
  background:rgba(255,250,243,.92);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

#configurateur-tresse-root .mini-braid-option,
#configurateur-tresse-root .main-price-inline{
  width:100%;
  min-height:50px;
  border-radius:16px;
  border:1px solid rgba(105,77,55,.13);
  background:rgba(255,255,255,.58);
  color:var(--text);
  box-shadow:none;
}

#configurateur-tresse-root .mini-braid-option:hover{
  border-color:rgba(184,115,73,.34);
  box-shadow:0 0 26px rgba(223,173,122,.12);
}

#configurateur-tresse-root .mini-braid-title{
  color:var(--text);
}

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

#configurateur-tresse-root .mini-braid-check{
  border-radius:8px;
  border-color:rgba(184,115,73,.42);
  background:#fffaf3;
}

#configurateur-tresse-root .mini-braid-option input:checked + .mini-braid-check{
  background:linear-gradient(135deg, var(--copper), var(--copper2));
  border-color:rgba(184,115,73,.78);
}

#configurateur-tresse-root .main-price-inline{
  justify-content:space-between;
  padding:10px 13px;
}

#configurateur-tresse-root #actionDesiredPrice{
  color:#2d241d;
  font-size:24px;
}

#configurateur-tresse-root .main-add-btn{
  width:100%;
  min-width:0;
  min-height:56px;
  border-radius:17px;
  color:#fffaf3;
  background:linear-gradient(135deg, #6f5640, var(--copper));
  box-shadow:0 16px 42px rgba(184,115,73,.22);
}

#configurateur-tresse-root .main-add-btn:hover{
  filter:none;
  box-shadow:0 20px 52px rgba(184,115,73,.28);
}

#configurateur-tresse-root .help-presets-panel{
  border-radius:18px;
  border:1px solid rgba(105,77,55,.12);
  background:rgba(255,253,248,.94);
  box-shadow:0 18px 44px rgba(85,62,43,.12);
}

#configurateur-tresse-root .help-length-chip{
  border-radius:13px;
  border-color:rgba(105,77,55,.12);
}

#configurateur-tresse-root .help-length-chip.is-selected,
#configurateur-tresse-root .help-length-chip:focus-visible{
  border-color:rgba(184,115,73,.48);
  background:rgba(223,173,122,.18);
  box-shadow:none;
}

#configurateur-tresse-root .sissou-pulse{
  animation:sissouPulse .38s ease-out;
}

@keyframes sissouPulse{
  0%{ transform:scale(1); }
  42%{ transform:scale(1.035); filter:saturate(1.14); }
  100%{ transform:scale(1); }
}

.sissou-fx-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2147483000;
  overflow:hidden;
}

.sissou-smoke-particle{
  position:absolute;
  left:var(--left);
  top:var(--top);
  width:var(--size);
  height:var(--size);
  border-radius:999px;
  opacity:0;
  transform:translate(-50%, -50%) scale(.4);
  background:
    radial-gradient(circle at 38% 36%, rgba(255,255,255,.78), rgba(255,255,255,.18) 35%, transparent 68%),
    radial-gradient(circle, var(--smoke-color), transparent 72%);
  filter:blur(4px);
  mix-blend-mode:multiply;
  animation:sissouSmoke var(--duration) cubic-bezier(.16,.84,.32,1) forwards;
}

@keyframes sissouSmoke{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.35) rotate(0deg);
    filter:blur(2px);
  }
  18%{
    opacity:.48;
  }
  100%{
    opacity:0;
    transform:
      translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y)))
      scale(var(--scale))
      rotate(var(--rotate));
    filter:blur(13px);
  }
}

@media (max-width: 1180px){
  #configurateur-tresse-root .mainStageBd{
    grid-template-columns:minmax(560px, 1fr) minmax(360px, 420px);
  }

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

@media (max-width: 980px){
  #configurateur-tresse-root{
    padding:0 10px 12px;
  }

  #configurateur-tresse-root #mainConfiguratorCard > .hd{
    padding:10px 0;
  }

  #configurateur-tresse-root .mainStageBd{
    grid-template-columns:1fr;
    grid-template-areas:
      "preview"
      "controls"
      "actions";
    gap:12px;
    min-height:0;
  }

  #configurateur-tresse-root #mainStage{
    position:sticky;
    top:0;
    z-index:35;
    height:48vh;
    min-height:320px;
    margin:0 -10px;
  }

  #configurateur-tresse-root .view-braid{
    border-radius:0 0 24px 24px;
    border-left:0;
    border-right:0;
  }

  #configurateur-tresse-root .view-braid > .hd{
    left:14px;
    top:12px;
  }

  #configurateur-tresse-root .canvasWrap{
    padding:48px 10px 12px;
  }

  #configurateur-tresse-root .canvasWrap canvas,
  #configurateur-tresse-root .braidCanvas{
    max-height:calc(48vh - 66px);
    border-radius:18px;
  }

  #configurateur-tresse-root #mainPanel,
  #configurateur-tresse-root .main-config-actions{
    border-radius:22px;
  }
}

@media (max-width: 640px){
  #configurateur-tresse-root .mainTabs{
    width:100%;
  }

  #configurateur-tresse-root .mainTabs .chip{
    width:100%;
    min-height:38px;
    padding:8px 10px;
    font-size:12px;
  }

  #configurateur-tresse-root #mainStage{
    height:44vh;
    min-height:280px;
  }

  #configurateur-tresse-root .canvasWrap canvas,
  #configurateur-tresse-root .braidCanvas{
    max-height:calc(44vh - 62px);
  }

  #configurateur-tresse-root .panelHd{
    min-height:58px;
    padding:10px 11px;
  }

  #configurateur-tresse-root .panelBody{
    padding:10px;
  }

  #configurateur-tresse-root .optSection{
    padding:11px;
    border-radius:16px;
  }

  #configurateur-tresse-root #braidTypeChips{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  #configurateur-tresse-root #desiredBlock{
    grid-template-columns:1fr;
  }

  #configurateur-tresse-root .strand-accordion-trigger{
    min-height:62px;
  }

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

  #configurateur-tresse-root .strand-accordion-title{
    font-size:14px;
  }

  #configurateur-tresse-root .strand-accordion-summary{
    font-size:11px;
  }

  #configurateur-tresse-root .compact-fabric-list{
    grid-template-columns:1fr 1fr !important;
  }

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

  #configurateur-tresse-root .compact-color-swatch{
    min-height:44px;
  }

  #configurateur-tresse-root .main-config-actions{
    position:sticky;
    bottom:8px;
    padding:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  #configurateur-tresse-root .sissou-pulse,
  #configurateur-tresse-root #canvas-braid.sissou-braid-weave,
  #configurateur-tresse-root #canvas-braid.sissou-braid-reveal,
  .sissou-smoke-particle{
    animation:none !important;
  }
}

/* Fixed studio behavior: the braid stays visible, only the controls move. */
@media (min-width: 981px){
  html,
  body.sissou-configurator-standalone{
    height:100%;
    overflow:hidden;
  }

  #configurateur-tresse-root{
    height:100vh;
    min-height:0;
    overflow:hidden;
  }

  #configurateur-tresse-root #mainConfiguratorCard{
    height:calc(100vh - 36px);
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  #configurateur-tresse-root .mainStageBd{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    grid-template-rows:minmax(0, 1fr) auto;
    overflow:hidden;
  }

  #configurateur-tresse-root #mainStage{
    position:relative;
    top:auto;
    height:100%;
    min-height:0;
  }

  #configurateur-tresse-root .view-braid{
    height:100%;
    min-height:0;
  }

  #configurateur-tresse-root #mainPanel{
    min-height:0;
    height:100% !important;
    max-height:none !important;
    display:flex;
    flex-direction:column;
  }

  #configurateur-tresse-root #mainPanel.is-closed{
    height:66px !important;
  }

  #configurateur-tresse-root .panelBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    padding-right:10px;
  }

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

  #configurateur-tresse-root .panelBody::-webkit-scrollbar-track{
    background:rgba(105,77,55,.08);
    border-radius:999px;
  }

  #configurateur-tresse-root .panelBody::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(201,173,143,.70), rgba(184,115,73,.62));
    border-radius:999px;
  }

  #configurateur-tresse-root .main-config-actions{
    position:relative;
    bottom:auto;
  }
}

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

  #configurateur-tresse-root{
    height:100vh;
    min-height:0;
    overflow:hidden;
  }

  #configurateur-tresse-root #mainConfiguratorCard{
    height:100%;
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  #configurateur-tresse-root .mainStageBd{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    grid-template-rows:auto minmax(0, 1fr) auto;
    overflow:hidden;
  }

  #configurateur-tresse-root #mainStage{
    position:relative;
    top:auto;
    height:min(42vh, 390px);
    min-height:260px;
    z-index:2;
  }

  #configurateur-tresse-root #mainPanel{
    min-height:0;
    height:100% !important;
    max-height:none !important;
    display:flex;
    flex-direction:column;
  }

  #configurateur-tresse-root .panelBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  #configurateur-tresse-root .main-config-actions{
    position:relative;
    bottom:auto;
  }
}

/* Hard lock: fixed visual + independently scrolling selector. */
@media (min-width: 981px){
  #configurateur-tresse-root .mainStageBd{
    height:calc(100vh - 94px) !important;
    max-height:calc(100vh - 94px) !important;
  }

  #configurateur-tresse-root #mainPanel{
    height:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
  }

  #configurateur-tresse-root .panelBody{
    display:block !important;
    height:calc(100vh - 194px) !important;
    max-height:calc(100vh - 194px) !important;
    overflow-x:hidden !important;
    overflow-y:scroll !important;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 980px){
  #configurateur-tresse-root .mainStageBd{
    height:calc(100vh - 58px) !important;
    max-height:calc(100vh - 58px) !important;
  }

  #configurateur-tresse-root #mainStage{
    height:40vh !important;
    min-height:250px !important;
    max-height:380px !important;
  }

  #configurateur-tresse-root #mainPanel{
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  #configurateur-tresse-root .panelBody{
    display:block !important;
    height:max(220px, calc(100vh - 40vh - 218px)) !important;
    max-height:max(220px, calc(100vh - 40vh - 218px)) !important;
    overflow-x:hidden !important;
    overflow-y:scroll !important;
    -webkit-overflow-scrolling:touch;
  }
}