.page--produtos .carousel.carousel-dark .carousel-control-prev,
.page--produtos .carousel.carousel-dark .carousel-control-next {
   opacity: 0;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s
}

.page--produtos .carousel.carousel-dark .carousel-control-prev span,
.page--produtos .carousel.carousel-dark .carousel-control-next span {
   width: 1.25rem;
   height: 1.25rem
}

.page--produtos .carousel.carousel-dark:hover .carousel-control-prev,
.page--produtos .carousel.carousel-dark:hover .carousel-control-next {
   opacity: 1
}

.page--produtos .nav-buttons .nav-link {
   border: 0;
   padding-left: 30px;
   padding-right: 30px;
   background: transparent;
   position: relative;
   color: #252525;
   transition: all 0.25s;
   opacity: 0.5
}

.page--produtos .nav-buttons .nav-link:hover {
   color: rgba(var(--bs-primary-rgb), 1)
}

.page--produtos .nav-buttons .nav-link:hover::after {
   left: 0px;
   right: 0px;
   opacity: 1
}

.page--produtos .nav-buttons .nav-link::after {
   height: 2px;
   position: absolute;
   bottom: 0px;
   left: 50%;
   right: 50%;
   content: "";
   background: rgba(var(--bs-primary-rgb), 1);
   transition: all 0.25s;
   opacity: 0
}

.page--produtos .nav-buttons .nav-link.active {
   opacity: 1
}

.page--produtos .nav-buttons .nav-link.active::after {
   left: 0px;
   right: 0px;
   opacity: 1
}

/* ============================================================
   ESTILO PARA ITENS INDISPONÍVEIS
   ------------------------------------------------------------
   Usar na âncora externa  <a class="produto-indisponivel">…</a>
   ============================================================ */

.page--produtos a.produto-indisponivel,
a.produto-indisponivel {
  position: relative;            /* permite o selo e overlay  */
  pointer-events: none !important;          /* bloqueia clique           */
  filter: grayscale(1) opacity(.45);
  transition: filter .3s ease;   /* mesmo timing do seu CSS   */
}

/* Selo “Indisponível” */
.page--produtos a.produto-indisponivel::before,
a.produto-indisponivel::before {
  content: "Indisponível";
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: #dc3545;           /* vermelho Bootstrap        */
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .25rem .55rem;
  border-radius: .25rem;
  text-transform: uppercase;
  z-index: 2;
}

/* Texto suavizado e botão oculto */
.page--produtos a.produto-indisponivel h4,
.page--produtos a.produto-indisponivel p,
.page--produtos a.produto-indisponivel span,
a.produto-indisponivel h4,
a.produto-indisponivel p,
a.produto-indisponivel span {
  color: #6c757d !important;     /* cinza Bootstrap           */
}

.page--produtos a.produto-indisponivel span,
a.produto-indisponivel span {
  display: none;                 /* oculta “Detalhes do produto” */
}

/* Hover apenas para feedback visual (clique já está bloqueado) */
.page--produtos a.produto-indisponivel:hover,
a.produto-indisponivel:hover {
  filter: grayscale(.9) opacity(.35);
}

/* Mobile – selo menor */
@media (max-width: 576px) {
  .page--produtos a.produto-indisponivel::before {
    font-size: .7rem;
    top: .25rem;
    left: .25rem;
  }
}