/* Galeria de visualizações do Arame (Rolo / Spider).
 * Mantém o palco, zoom, lupa, lightbox e pré-3D existentes. */

.tor-arame-angle-picker{
  position:absolute;
  z-index:12;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:7px;
  border:1px solid rgba(24,25,27,.10);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 28px rgba(20,20,20,.08);
}
html[data-bs-theme="dark"] .tor-arame-angle-picker{
  border-color:rgba(255,255,255,.12);
  background:rgba(28,28,29,.86);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.tor-arame-angle-picker[hidden]{display:none!important}
.tor-arame-angle-picker small{
  display:block;
  padding:1px 4px 0;
  color:var(--hf-text,#676d73);
  font:800 .48rem/1 'Montserrat',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
.tor-arame-angle-btn{
  position:relative;
  width:58px;
  height:46px;
  padding:3px;
  overflow:hidden;
  border:1px solid rgba(24,25,27,.12);
  border-radius:11px;
  background:#f7f6f4;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background-color .18s ease;
}
.tor-arame-angle-btn:hover,
.tor-arame-angle-btn:focus-visible{
  border-color:rgba(239,123,48,.58);
  transform:translateX(-2px);
  outline:none;
}
.tor-arame-angle-btn.is-active{
  border-color:var(--hf-orange,#ef7b30);
  background:#fff;
  box-shadow:0 0 0 2px rgba(239,123,48,.10),0 7px 18px rgba(20,20,20,.08);
}
.tor-arame-angle-btn img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
}
html[data-bs-theme="dark"] .tor-arame-angle-btn{
  background:#242526;
  border-color:rgba(255,255,255,.12);
}
html[data-bs-theme="dark"] .tor-arame-angle-btn.is-active{background:#1c1d1e}

body.home .tor-arame-angle-picker{--hf-orange:var(--th-orange,#ef7b30);--hf-text:var(--th-text,#676d73)}
#tpeStage .tor-arame-angle-picker,
#arame-trefilado .hf-stage .tor-arame-angle-picker{pointer-events:auto}

@media(max-width:767.98px){
  .tor-arame-angle-picker{
    right:12px;
    top:auto;
    bottom:54px;
    transform:none;
    flex-direction:row;
    gap:6px;
    padding:6px;
    border-radius:15px;
  }
  .tor-arame-angle-picker small{display:none}
  .tor-arame-angle-btn{
    width:48px;
    height:38px;
    border-radius:9px;
  }
  .tor-arame-angle-btn:hover,
  .tor-arame-angle-btn:focus-visible{transform:none}
}

@media(max-width:420px){
  .tor-arame-angle-btn{width:43px;height:35px}
}