/* ============================================================
   V59 — Tapis Tresse / Noeud : detail recadre uniquement
   ============================================================ */

/* Le cadre masque toujours les bords du canevas agrandi. */
body.sissou-configurator-standalone
  #configurateur-tresse-root[data-active-product="rug"]
  .view-rug
  .canvasWrap {
  overflow: hidden !important;
}

/* Desktop : gros plan central, sans retour possible a la vue entiere. */
@media (min-width: 981px) {
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    .view-rug
    #canvas-rug.rugCanvas[data-rug-model="braided"],
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    .view-rug
    #canvas-rug.rugCanvas[data-rug-model="knot"] {
    width: 132% !important;
    max-width: none !important;
    clip-path: none !important;
    transform: scale(3.2) !important;
    transform-origin: center center !important;
  }
}

/*
 * Mobile : meme cadrage dans tous les etats du panneau. Les anciennes
 * regles ne s'appliquaient que lorsque le panneau etait ouvert, ce qui
 * faisait reapparaitre le tapis entier apres repli.
 */
@media (max-width: 980px) {
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    .view-rug
    .canvasWrap {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin-inline: 0 !important;
    overflow: hidden !important;
  }

  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    .view-rug
    #canvas-rug.rugCanvas[data-rug-model="braided"],
  body.sissou-configurator-standalone
    #configurateur-tresse-root[data-active-product="rug"]
    .view-rug
    #canvas-rug.rugCanvas[data-rug-model="knot"] {
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    clip-path: none !important;
    transform: rotate(90deg) scale(3.05) !important;
    transform-origin: center center !important;
  }
}