.product-image {
    
    object-fit: cover;
}

.scrollable-col {
    max-height: 87vh; /* Ajuste conforme o necessário */
    overflow-y: auto;
    padding-right: 8px; /* Para evitar que o scroll sobreponha conteúdo */
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.toast {
    border-radius: 12px; /* Borda mais arredondada */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 1%;
  }
.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.thumbnail:hover, .thumbnail.active {
    opacity: 1;
}

.texture-swatch {
    width: 40px;
    height: 40px;
    border: 2px solid #ccc;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.texture-swatch.active {
    border-color: #007bff;
    box-shadow: 0 0 0 2px #007bff55;
}
#model-viewer{
    width: 100%; 
    height: 75%;
    margin-bottom: 24px;
}


input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    background: #2f2f2f; /* fallback */
  }
  
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #27828A;
    border: 2px solid white;
    cursor: pointer;
    margin-top: -5px;
  }
  
  input[type=range]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #27828A;
    border: 2px solid white;
    cursor: pointer;
  }
  
  input[type=range]::-moz-range-track {
    height: 6px;
    background: #2f2f2f;
    border-radius: 3px;
  }
  


@media (max-width: 768px) {
    #model-viewer{
        height: 400px;
    }
}