/*
 * V48 — Resserrement vertical de l'atelier.
 * La navigation prend une vraie hiérarchie de titre, le produit Tresse
 * remonte légèrement et le dock prix/panier reste visible sans recouvrir
 * la fin du panneau de personnalisation.
 */

#configurateur-tresse-root .mainTabs .tabBtn {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}

@media (min-width: 981px) {
  #configurateur-tresse-root[data-active-product="tresse"] .view-braid .canvasWrap {
    transform: translateY(clamp(-84px, -8vh, -52px)) !important;
  }

  #configurateur-tresse-root .main-config-actions {
    bottom: clamp(78px, 10vh, 96px) !important;
  }

  #configurateur-tresse-root #mainPanel:not(.is-closed) {
    bottom: calc(clamp(78px, 10vh, 96px) + 80px) !important;
    height: auto !important;
    max-height: calc(
      100dvh - 104px - clamp(158px, calc(10vh + 80px), 176px)
    ) !important;
  }
}

@media (max-width: 980px) {
  #configurateur-tresse-root .mainTabs .tabBtn {
    font-size: clamp(12px, 3.2vw, 15px) !important;
    letter-spacing: -0.02em !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] .view-braid .canvasWrap {
    transform: translateY(-3vh) !important;
  }
}

@media (max-width: 420px) {
  #configurateur-tresse-root .mainTabs .tabBtn {
    font-size: clamp(11px, 3vw, 13px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #configurateur-tresse-root[data-active-product="tresse"] .view-braid .canvasWrap {
    transition: none !important;
  }
}