/* =========================================
   produtosResumo.css - Versão Profissional Otimizada e Responsiva
   Explicado para iniciantes, com feedback visual, responsividade e boas práticas
   ========================================= */

/*
  Definimos variáveis globais com as cores e configurações visuais principais
  Isso facilita a manutenção do layout e a padronização visual em todo o sistema
*/
:root {
  --primary-color: #2c3e50;        /* Cor principal */
  --primary-hover: #1a252f;        /* Cor ao passar o mouse */
  --primary-active: #0a1929;       /* Cor ao clicar */
  --secondary-color: #3498db;      /* Cor secundária */
  --danger-color: #e74c3c;         /* Cor de erro/alerta */
  --danger-hover: #c0392b;
  --success-color: #2ecc71;        /* Cor de sucesso */
  --gray-light: #f8f9fa;           /* Cinza claro */
  --gray-medium: #95a5a6;          /* Cinza médio */
  --gray-border: #ecf0f1;          /* Cor da borda */
          /* Texto escuro */
  --text-light: #ecf0f1;           /* Texto claro */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --transition: all 0.3s ease;     /* Transição suave */
  --border-radius: 8px;            /* Arredondamento padrão */
  --border-radius-sm: 4px;
}

/*
  Classe auxiliar para acessibilidade (leitores de tela)
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  margin: -1px;
}

/*
  Grade de produtos em carrossel horizontal com rolagem suave e responsiva
*/
/* Ajuste da grade de produtos - reduzindo o espaçamento entre os cards */
.produtos-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0.4rem; /* Espaçamento mínimo entre cards */
  padding: 0.5rem 0;
  margin-top: 1rem;
  scrollbar-width: none; /* Firefox */
}

.produtos-grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Cards dentro do grid horizontal */
.produto-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 220px;
  margin-right: 0.25rem; /* Margem final opcional para último item */
}


/*
  Cada coluna/cartão de produto
*/
.produtos-card-col {
  scroll-snap-align: start;
  margin-right: 0.2rem;
  min-height: 450px !important; /* mantém altura fixa */
}


/* Responsividade para tablets e desktops */
@media (min-width: 600px) {
  .produtos-card-col {
    flex: 0 0 calc(50% - 0.5rem); /* 2 cards por linha em tablets */
  }
}

@media (min-width: 900px) {
  .produtos-card-col {
    flex: 0 0 calc(20% - 0.5rem); /* 5 cards por linha em desktop */
  }

}




.preco-container {
    /* margin top para separar do conteúdo acima */
    margin-top: auto;
}
.btn-acoes {
    margin-top: auto; /* manter botões no fim, caso queira */
}
.card.h-100 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: white;
  border-radius: var(--border-radius);
  border: 1px solid var(--gray-border);
  /* box-shadow: var(--shadow-sm); */
  /* transition: var(--transition); */
  position: relative;
}



/* Imagem principal do produto */
.product-image {
  height: 220px !important;
  object-fit: contain;
  background: rgba(255, 255, 255, 0);
  padding: 1rem;
  transition: transform 0.5s;
}

.produtos-section .novidades-grid .produtos-card-col{
  max-width: 250px;
}

.produtos-section .destaques-grid .produtos-card-col{
  max-width: 250px;
}

.product-image:hover {
  transform: scale(1.2);
}
/* Área de informações textuais do produto */
.card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.8rem;
}

/* Selo de promoção no canto superior do card */
.promo-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: linear-gradient(135deg, var(--danger-color), var(--danger-hover));
  color: white;
  font-weight: 800;
  padding: 0.35rem 1rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: var(--shadow-sm);
  animation: float 3s ease-in-out infinite;
  z-index: 10;
}

/* Animação leve para selo */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Animação de entrada nos cards */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Área de botões com ações e controle de quantidade */
.btn-acoes {
  display: flex;
  padding: 0.5rem;
  border-top: 1px solid var(--gray-border);
  background-color: white;
  margin-top: auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap; /* Permite quebra em telas pequenas */
}

/* Formulário com alinhamento horizontal */
.form-carrinho {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  flex-wrap: wrap; /* Permite que os elementos se reorganizem */
}

/* Controle de quantidade */
.quantidade-controle {
  display: flex;
  align-items: center;
  background-color: var(--gray-light);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  height: 25px;
  width: 40px;
  min-width: 10px;
}

/* Botões de + e - */
.quantidade-btn {
  width:35px;
  height: 100%;
  font-size: 0.8rem;
  background-color: var(--gray-light);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-color);
}

.quantidade-btn:hover {
  background-color: var(--primary-hover);
  color: white;
}



/* Input de quantidade */
.quantidade-input {
  width: 100%;
  height: 100%;
  border: none;
  border-left: 1px solid var(--gray-border);
  border-right: 1px solid var(--gray-border);
  text-align: center;
  font-size: 1rem;
  background-color: white;
  font-weight: 600;
  padding: 0;
  /* Remove as setas */
  -moz-appearance: textfield;
}

.quantidade-input::-webkit-outer-spin-button,
.quantidade-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Botão de adicionar ao carrinho */
.btn-carrinho {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 6px 0.5rem;
  margin-bottom: 2px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;

  /* Centralização de conteúdo */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* Espaço entre ícone e texto */
  text-align: center;
}

.btn-carrinho:hover {
  background-color: var(--primary-hover);
}

.btn-carrinho:active {
  background-color: var(--primary-active);
}

/* Ajuste para manter alinhamento em telas maiores */
@media (min-width: 600px) {
  .form-carrinho {
    flex-wrap: nowrap;
  }

  .quantidade-controle {
    flex: 1 1 auto;
  }

  .btn-carrinho {
    flex: 1 1 auto;
  }
}

/* Em telas muito pequenas, deixar os botões empilharem se necessário */
@media (max-width: 599px) {
  .quantidade-controle,
  .btn-carrinho {
    width: 100%;
    justify-content: center;
  }
}

.preco-produto {
    font-size: 1.3rem;              /* Fonte maior para maior destaque */
    font-weight: 1000;               /* Peso forte para dar robustez */
    text-align: center;             /* Centraliza o texto */
    display: block;
    width: 100%;
    color: #d11818;                 /* Vermelho forte, sóbrio e corporativo */
    background-color: #0000000c;

}

.preco-indisponivel {
    font-style: italic;
    font-size: 1.3rem;              /* Tamanho ligeiramente menor que o preço disponível */
    text-align: center;             /* Centraliza o texto */
    display: block;
    width: 100%;
    color: #000000;                  /* Vermelho terroso, indicando indisponibilidade com sobriedade */
    background-color: #0000000c;
}

@media (max-width: 768px) {
    .preco-produto {
        font-size: 1.3rem;          /* Ajusta tamanho para dispositivos móveis */
    }
    .preco-indisponivel {
        font-size: 1.1rem;
    }
}


/* ============ RESPONSIVIDADE ============ */
@media (max-width: 768px) {
  .btn-acoes {
    justify-content: center; /* Centraliza os botões */
  }

  .form-carrinho {
    flex-direction: column;
    align-items: stretch;
  }

  .quantidade-controle {
    width: 100%;
    justify-content: space-between;
  }

  .btn-carrinho {
    width: 100%;
    min-width: unset;
    margin-left: 0;
    margin-top: 1rem;
  }
}

@media (max-width: 480px) {
  .quantidade-btn {
    width: 28px;
    font-size: 0.8rem;
  }

  .quantidade-input {
    width: 50px;
    font-size: 0.8rem;
  }

  .btn-carrinho {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
  }
}


  /* Container principal (opcional, para organização) */
  .grid-nav-buttons {
    display: flex;
    justify-content: flex-end; /* Alinha os botões à direita */
    gap: 0.5rem; /* Espaço entre os botões */
    padding: 0.5rem 10rem; /* Espaçamento opcional interno */
        margin-top: 30px;
  }

  /* Botões de navegação */
  .grid-nav {
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--gray-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-color);
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }


  /* Ícones (Font Awesome) */
  .grid-nav i {
    pointer-events: none;
  }

  /* Hover visual */
  .grid-nav:hover {
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
    border-color: var(--primary-color);
  }


  /* Esconde os botões em dispositivos móveis */
  /* Esconde os botões em dispositivos móveis */
  @media (max-width: 768px) {
    .grid-nav-buttons {
      display: none;
    }}
  /* ==========================
    Estilização da Seção de Destaques
    ========================== */

  /* Seção principal */
  .produtos-section {
    margin: 2rem auto;
    padding: 0 1rem;
    max-width: 1710px;
    /* background-color: #ffffff; */
    /* border-radius: var(--border-radius); */
    /* box-shadow: var(--shadow-md); */
    transition: var(--transition);
  }

  /* Cabeçalho da seção */
  .section-header {
      text-align: center;          /* Centraliza horizontalmente */
      margin-bottom: 1.5rem;       /* Espaçamento inferior adequado */
      padding: 0 1rem;             /* Espaçamento lateral para evitar encostar nas bordas */
      /* Remover overflow para evitar cortes */
      overflow: visible;
  }

  /* Título da seção */
  #destaques-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
  }
  /* Título da seção */
  #novidades-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
  }
  #promocoes-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
  }



  /* Responsividade */
  @media (max-width: 768px) {
    .section-title {
      font-size: 1.5rem;
    }

    .section-title::after {
      width: 60px;
    }
  }

  /* Responsivo para telas menores */
  @media (max-width: 768px) {
    #destaques-title {
      font-size: 1.5rem;
    }

    .produtos-section {
      padding: 0 0.5rem;
      box-shadow: none;
    }
  }

  /* Estilo para o container de preços */
  .preco-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
  }

  /* Preço original riscado */
  .preco-original {
      font-size: 1rem;
      color: #6c757d; /* cinza neutro para preço antigo */
      text-decoration: line-through;
  }

  /* Preço promocional em destaque */
  .preco-promocional {
      font-size: 1.25rem;
      font-weight: bold;
      color: #dc3545; /* vermelho Bootstrap clássico (danger) */
  }

  /* Preço normal (sem promoção) */
  .preco-produto {
      font-size: 1.2rem;
      font-weight: bold;
      color: #007bff; /* azul padrão do Bootstrap */
  }

  /* Indicação de preço indisponível */
  .preco-indisponivel {
      font-size: 1rem;
      font-style: italic;
      color: #6c757d;
  }
  /* Centraliza o título da sessão */
  .section-header {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .section-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-block;
    position: relative;
  }

  /* Container do carrossel - permite scroll horizontal suave */
  .carrossel-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* rolagem suave no iOS */
    padding-bottom: 0.5rem; /* Espaço para scroll bar (se aparecer) */
  }

  /* Grade de produtos em linha horizontal sem quebra */
  .produtos-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 0 0.25rem;
    /* scrollbar escondido em navegadores compatíveis */
    scrollbar-width: none; /* Firefox */
  }

  .produtos-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }



  /* Cada card da sessão com largura fixa para manter consistência */
  .produtos-card-col {
    flex: 0 0 220px; /* largura fixa para o card */
    min-width: 220px;
    max-width: 220px;
    scroll-snap-align: start;
  }

  /* Scroll snap para melhorar experiência no scroll horizontal */
  .carrossel-container {
    scroll-snap-type: x mandatory;
  }

  /* Responsividade: reduz o tamanho do título em telas menores */
  @media (max-width: 768px) {
    .section-header h3 {
      font-size: 1.5rem;
    }
  }

  /* Responsividade: permite que o carrossel ocupe 100% e o título mantenha centralização */
  @media (max-width: 480px) {
    .section-header h3 {
      font-size: 1.3rem;
    }

    .carrossel-container {
      padding-bottom: 0.3rem;
    }
  }
  .section-header {
      text-align: center;          /* Centraliza horizontalmente */
      margin-bottom: 1.5rem;       /* Espaçamento inferior adequado */
      padding: 0 1rem;             /* Espaçamento lateral para evitar encostar nas bordas */
      /* Remover overflow para evitar cortes */
      overflow: visible;
  }

  .section-header h3 {
      font-size: 1.75rem;          /* Tamanho robusto em desktop */
      font-weight: 700;            /* Peso forte para destaque */
      line-height: 1.2;
      margin: 0 auto;              /* Centraliza via margem automática */
      display: inline-block;       /* Permite largura mínima e centralização */
      white-space: normal;         /* Permite quebra natural de linha */
      overflow: visible;           /* Exibir todo o texto */
      text-overflow: clip;         /* Sem reticências */
      max-width: 100%;             /* Respeita o container */
      word-wrap: break-word;       /* Quebra palavras longas se necessário */
          margin-top: 30px;
  }

  /* Ajuste para telas menores */
  @media (max-width: 576px) {
      .section-header h3 {
          font-size: 1.25rem;      /* Fonte menor e legível */
          white-space: normal;     /* Quebra de linha permitida */
          padding: 0 0.5rem;       /* Padding extra para conforto visual */
          word-break: break-word;  /* Quebra palavras longas */
      }
  }


  .discount-circle {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #e53935; /* Vermelho destaque */
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Forma de círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 10;
  }