/* ================================================================
   ESTILOS BASE DO CONTAINER DE CARDS
   Configuração do container principal que contém a linha de cards
================================================================ */

/* Container de cards com rolagem horizontal suave e sem barra de rolagem visível */
.carouselsContainer .cards-container {
   width: 100%;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 20px 0 0 0;
   scroll-behavior: smooth
}

/* Remove a barra de rolagem em navegadores WebKit (Chrome, Safari) */
.carouselsContainer .cards-container::-webkit-scrollbar {
   display: none;
}

/* Linha de cards em formato horizontal com espaçamento uniforme */
.carouselsContainer .cards-row {
   display: flex;
   flex-wrap: nowrap;
   gap: 25px;
   padding: 0 15px 50px 0;
   padding-right: 80px;
}

/* Adiciona margem ao último card para garantir espaço ao fim do carrossel */
.carouselsContainer .custom-card:last-child {
   margin-right: 40px;
}

/* ================================================================
   ESTILOS DOS CARDS INDIVIDUAIS
   Aparência e dimensões de cada card do carrossel
================================================================ */

/* Estilo base para cada card do carrossel */
.carouselsContainer .custom-card {
   position: relative;
   width: 280px;
   height: 280px;
   flex-shrink: 0;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
   border: #f1f1f1 solid 1px !important;
   transition: all 0.4s ease-in-out;
}

/* Configuração da imagem de capa do card */
.carouselsContainer .card-img-top {
   height: 160px;
   object-fit: cover;
   border-bottom: #c70c00 solid 3px !important;  /* Linha vermelha decorativa abaixo da imagem */
   transition: height 0.3s ease;  /* Transição suave para alterações de altura */
}

/* Área de conteúdo textual do card */
.carouselsContainer .card-body {
   padding: 5px;
   background-color: white
}

/* ================================================================
   ESTILOS DOS INDICADORES (DESCONTO E CERTIFICADO)
   Formatação dos badges e textos indicativos
================================================================ */

/* Cor para o indicador de desconto */
.carouselsContainer .discount {
   color: #b75656;
   bottom: 24px;
}

/* Cor para o indicador de certificado */
.carouselsContainer .certificate {
   color: #042049;
   bottom: 5px;
}

/* Formatação do texto dos badges de desconto e certificado */
.carouselsContainer .span-discount,
.carouselsContainer .span-certificate {
   font-size: 0.75rem !important;  /* Tamanho de fonte reduzido */
}

/* Estilo para o preço com desconto riscado */
.carouselsContainer .price-discount {
   font-size: 0.85rem !important;
}

/* ================================================================
   ESTILOS DO CABEÇALHO E NAVEGAÇÃO
   Layout da área de título e botões de navegação
================================================================ */

/* Container do cabeçalho que inclui título e controles de navegação */
.carouselsContainer .header-container {
   display: flex;
   align-items: center;
   padding: 0 15px;
   flex-wrap: wrap;
}

/* Container dos botões de navegação */
.carouselsContainer .title-nav-container {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-left: 25px;
}

/* Estilo base para o botão "ver todos" */
.carouselsContainer .all-btn {
   text-decoration: none;
}

/* Efeito de hover para o botão "ver todos" */
.carouselsContainer .all-btn:hover {
   background: #f1f1f1;
}

/* Estilo base para os botões de navegação */
.carouselsContainer .carousel-nav-btn {
   border: none;
   background: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
}

/* Efeito de hover para botões de navegação */
.carouselsContainer .carousel-nav-btn:hover {
   color: #000000;
}

/* Tamanho dos ícones nos botões de navegação */
.carouselsContainer .carousel-nav-btn i {
   font-size: 20px;
}

/* Estilo para botões de navegação desativados */
.carouselsContainer .carousel-nav-btn.disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

/* ================================================================
   RESPONSIVIDADE - TABLETS (até 1266px)
   Ajustes para telas médias
================================================================ */

@media (max-width: 1266px) {
   /* Redimensiona os cards para telas menores */
   .carouselsContainer .custom-card {
      width: 250px;
      height: 254px;
   }

   /* Ajusta a altura da imagem proporcionalmente */
   .carouselsContainer .card-img-top {
      height: 136px;
   }

   /* Reduz o tamanho da fonte do título do card */
   .carouselsContainer .card-title {
      font-size: 0.95rem !important;  /* Fonte menor para o título */
   }

   /* Reduz o tamanho da fonte do texto e preço */
   .carouselsContainer .card-text,
   .carouselsContainer .price-discount {
      font-size: 0.90rem !important;  /* Fonte menor para textos */
   }

   /* Reduz o espaçamento entre cards */
   .carouselsContainer .cards-row {
      gap: 20px;
   }
}

/* ================================================================
   RESPONSIVIDADE - MOBILE (até 1024px)
   Ajustes para telas pequenas
================================================================ */

@media (max-width: 1024px) {
   /* Remove margem inferior do container para otimizar espaço */
   .carouselsContainer .container-vitrine {
      margin-bottom: 0 !important;  /* Remove margem inferior */
   }

   /* Remove o espaço extra acima dos cards */
   .carouselsContainer .cards-container {
      padding-top: 0 !important
   }

   /* Redimensiona os cards para telas pequenas */
   .carouselsContainer .custom-card {
      width: 220px;
      height: 234px;
   }

   /* Ajusta a altura da imagem para telas pequenas */
   .carouselsContainer .card-img-top {
      height: 110px;
   }

   /* Reduz mais o tamanho da fonte do título */
   .carouselsContainer .card-title {
      font-size: 0.90rem !important;  /* Fonte menor para o título */
   }

   /* Reduz mais o tamanho da fonte do texto e preço */
   .carouselsContainer .card-text,
   .carouselsContainer .price-discount {
      font-size: 0.85rem !important;  /* Fonte ainda menor para textos */
   }

   /* Reorganização do cabeçalho para layout vertical em telas pequenas */
   .carouselsContainer .header-container {
      flex-direction: column;
      align-items: flex-start;
      position: relative;
   }

   /* Ajustes no container de navegação para telas pequenas */
   .carouselsContainer .title-nav-container {
      margin-left: 0;
      margin-top: 10px;
      margin-bottom: 10px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
   }

   /* Posicionamento do botão "ver todos" em telas pequenas */
   .carouselsContainer .all-btn {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      position: static;
      order: 2;
      position: absolute;
      right: 10px;
      bottom: 10px;
   }

   /* Posicionamento dos botões de navegação em telas pequenas */
   .carouselsContainer .prev-btn,
   .carouselsContainer .next-btn {
      order: 1;
   }

   /* Reduz ainda mais o espaçamento entre cards */
   .carouselsContainer .cards-row {
      gap: 15px;
   }
}

/* ================================================================
   MODO GRID (VISUALIZAÇÃO EM GRADE)
   Estilo para quando o carrossel é transformado em grid
================================================================ */

/* Ajusta o container para modo grid, permitindo visualização vertical */
.carouselsContainer .grid-view .cards-container {
   overflow: visible;
   height: auto !important;
   display: flex;
   justify-content: center;
}

/* Configura a linha de cards para quebrar e formar um grid */
.carouselsContainer .grid-view .cards-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   flex-wrap: wrap !important;
   padding-right: 15px !important; /* Padroniza padding com o lado esquerdo */
   transition: all 0.3s ease
}

/* Remove margem extra do último card no modo grid */
.carouselsContainer .grid-view .custom-card:last-child {
   margin-right: 0;
}

/* Adiciona espaço abaixo dos cards no modo grid */
.carouselsContainer .grid-view .custom-card {
   margin-bottom: 25px;
}

/* Esconde os botões de navegação no modo grid pois não são necessários */
.carouselsContainer .grid-view .prev-btn,
.carouselsContainer .grid-view .next-btn {
   display: none;
}

/* ================================================================
   RESPONSIVIDADE DO MODO GRID
   Ajustes do modo grid para diferentes tamanhos de tela
================================================================ */

/* Ajuste do espaçamento do grid para tablets */
@media (max-width: 1266px) {
   .carouselsContainer .grid-view .cards-row {
      gap: 20px;
   }
}

/* Ajuste do espaçamento do grid para mobile */
@media (max-width: 1024px) {
   .carouselsContainer .grid-view .cards-row {
      gap: 15px;
   }
}

/* ================================================================
   ÍCONES DE AÇÃO SOBRE A IMAGEM (INFO E CARRINHO)
   Estilização dos ícones de informação e compra
================================================================ */

/* Container para os ícones de ação */
.carouselsContainer .card-action-icons {
   position: absolute;
   top: 10px;
   right: 10px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 10;
}

/* Estilo base para os ícones de ação */
.carouselsContainer .card-icon-btn {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background-color: #e20000;
   color: white;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 0.9rem;
   border: 2px solid transparent;
   opacity: 1;
   box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.33);
      -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.33);
      -moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.33);
   text-decoration: none;
}

/* Efeito hover para os ícones */
.carouselsContainer .card-icon-btn:hover {
   transform: scale(1.15);
   background-color: #b50000;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Efeito de clique para os ícones */
.carouselsContainer .card-icon-btn:active {
   transform: scale(0.95);
}

/* Posicionamento relativo para a imagem para servir como referência */
.carouselsContainer .card-img-top {
   position: relative;
}

/* Estilo para o preço com desconto riscado */
.carouselsContainer .price-discount {
   font-size: 0.75rem !important;
}