/*
 * Páginas de produto Torcisão — acabamento visual 2026-09-07.
 * Mantém o painel técnico existente e aplica a mesma régua horizontal da Home.
 */

:root{
  --tor-product-layout-max:1580px;
  --tor-product-layout-gutter:clamp(34px,4vw,72px);
}

/* Mesma linha-mestra da Home, do título até as especificações. */
.hf-page .hf-wrap{
  width:min(var(--tor-product-layout-max),calc(100% - (2 * var(--tor-product-layout-gutter))))!important;
  max-width:var(--tor-product-layout-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Seletor das fotos reais do produto/variação, dentro do próprio painel. */
.hf-page .hf-image-variants{
  position:absolute;
  z-index:10;
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  gap:5px;
  max-width:calc(100% - 235px);
  padding:5px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  border:1px solid rgba(24,25,27,.10);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(20,20,20,.055);
}
.hf-page .hf-image-variants::-webkit-scrollbar{display:none}
html[data-bs-theme="dark"] .hf-page .hf-image-variants{
  border-color:rgba(255,255,255,.12);
  background:rgba(28,28,29,.84);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.hf-page .hf-image-variant{
  flex:0 0 auto;
  min-height:34px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--hf-text,#60666b);
  font:800 .61rem/1 'Montserrat',sans-serif;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.hf-page .hf-image-variant:hover,
.hf-page .hf-image-variant:focus-visible{
  color:var(--hf-orange,#ef7b30);
  border-color:rgba(239,123,48,.30);
  outline:none;
}
.hf-page .hf-image-variant.is-active{
  color:#fff;
  background:var(--hf-orange,#ef7b30);
  border-color:var(--hf-orange,#ef7b30);
  box-shadow:0 5px 14px rgba(239,123,48,.18);
}

/* As fotos novas têm fundo transparente e precisam respirar dentro do palco. */
.hf-page .hf-image{
  max-width:90%!important;
  max-height:82%!important;
}
.hf-page .hf-image.is-connector{
  max-width:72%!important;
  max-height:82%!important;
}

@media(max-width:991.98px){
  :root{--tor-product-layout-gutter:20px}
  .hf-page .hf-image-variants{
    top:14px;
    left:14px;
    max-width:calc(100% - 205px);
  }
}

@media(max-width:760px){
  .hf-page .hf-image-variants{
    top:12px;
    left:12px;
    right:12px;
    max-width:none;
    width:max-content;
    max-width:calc(100% - 118px);
    padding:4px;
  }
  .hf-page .hf-image-variant{
    min-height:31px;
    padding-inline:10px;
    font-size:.58rem;
  }
  .hf-page .hf-image{
    max-width:92%!important;
    max-height:80%!important;
  }
}

@media(max-width:390px){
  :root{--tor-product-layout-gutter:16px}
}