/* KLN Pergola — Stage 3D dans la page produit (thème falcon) */
.kln-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  /* Ciel : le dégradé quasi blanc d'origine noyait la pergola et rendait le mur
     adossé invisible. On descend vers une teinte d'horizon qui rejoint celle du
     brouillard de scene.js (0xdfe9ee), pour que la pelouse s'y fonde. */
  background: linear-gradient(180deg, #b9d6e8 0%, #d6e6ef 52%, #dfe9ee 100%);
  box-shadow: 0 10px 40px rgba(24, 36, 24, .08);
}
@supports not (aspect-ratio: 1 / 1) { .kln-3d { height: 520px; } }

.kln-3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.kln-3d__canvas:active { cursor: grabbing; }

.kln-3d__toolbar {
  position: absolute; bottom: 14px; left: 14px; right: 14px; top: auto;
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  pointer-events: none;
}
.kln-3d__chip {
  pointer-events: auto; border: 0; background: rgba(255, 255, 255, .92); color: #182418;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transition: .15s;
}
.kln-3d__chip:hover { background: #fff; transform: translateY(-1px); }
.kln-3d__switch {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .92); padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.kln-3d__hint { display: none; }

/* Curseurs de taille — panneau dans la colonne de droite */
.kln-sizes {
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid #dee2e6; border-radius: 12px; background: #fafbfa;
}
.kln-sizes__title {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: #6c757d;
}
.kln-size {
  display: grid; grid-template-columns: 110px 1fr 96px; align-items: center; gap: 10px; margin-bottom: 10px;
}
.kln-size:last-child { margin-bottom: 0; }
.kln-size label { font-size: 14px; font-weight: 600; color: #182418; }
.kln-size input[type="range"] { width: 100%; height: 5px; accent-color: #506e50; }
.kln-size__box {
  display: inline-flex; align-items: baseline; gap: 3px; justify-self: end;
  border: 1px solid #dee2e6; border-radius: 8px; padding: 5px 8px; background: #fff;
}
.kln-size__box:focus-within { border-color: #506e50; box-shadow: 0 0 0 3px rgba(80,110,80,.12); }
.kln-size__input {
  width: 46px; border: 0; outline: 0; background: transparent; text-align: right;
  font-size: 14px; font-weight: 700; color: #182418; -moz-appearance: textfield;
}
.kln-size__input::-webkit-outer-spin-button,
.kln-size__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kln-size__box span { font-size: 12px; color: #6c757d; }
@media (max-width: 480px) { .kln-size { grid-template-columns: 84px 1fr 92px; } }

/* En mobile le panneau passe juste sous la 3D (déplacé par product-configurator.js) :
   il lui faut sa propre respiration, la colonne image n'en prévoit pas. */
@media (max-width: 991px) {
  #kln-3d + .kln-sizes { margin-top: 14px; }
}