/* ========================================
   TIPOGRAFIA MODERNA - UI/UX Best Practices
   ======================================== */

/* Reset e aplicação de fontes base */
html, body { 
  background-color: var(--color-bg); 
  font-family: var(--font-body); /* Inter - fonte moderna e legível */
  -webkit-font-smoothing: antialiased; /* Suavização de fonte no WebKit */
  -moz-osx-font-smoothing: grayscale; /* Suavização de fonte no Firefox/Mac */
}

body { 
  line-height: 1.6; /* Altura de linha ideal para leitura (1.5-1.8) */
  color: #1a1a1a; /* Preto suave (melhor que #000 puro) */
  font-size: 16px; /* Tamanho base padrão */
  font-weight: 400; /* Peso regular */
  letter-spacing: -0.011em; /* Tracking negativo sutil para Inter */
}

/* Hierarquia de títulos com fonte elegante */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading); /* Playfair Display - elegante e sofisticada */
  font-weight: 700; /* Bold para destaque */
  line-height: 1.2; /* Linha mais compacta para títulos */
  letter-spacing: -0.02em; /* Tracking negativo para fontes serif */
  color: #0a0a0a; /* Preto mais intenso para títulos */
  margin-bottom: 0.75rem; /* Espaçamento consistente */
}

/* Tamanhos de títulos seguindo escala tipográfica */
h1, .h1 { font-size: 2.5rem; font-weight: 800; } /* 40px - Títulos principais */
h2, .h2 { font-size: 2rem; font-weight: 700; } /* 32px - Subtítulos importantes */
h3, .h3 { font-size: 1.75rem; font-weight: 700; } /* 28px - Seções */
h4, .h4 { font-size: 1.5rem; font-weight: 600; } /* 24px - Subseções */
h5, .h5 { font-size: 1.25rem; font-weight: 600; } /* 20px - Pequenos títulos */
h6, .h6 { font-size: 1rem; font-weight: 600; } /* 16px - Mínimo */

/* Parágrafos e textos */
p {
  margin-bottom: 1rem; /* Espaçamento entre parágrafos */
  font-size: 1rem; /* 16px - tamanho confortável */
  line-height: 1.7; /* Altura ideal para leitura de parágrafos */
}

/* Avatar do usuário (círculo com iniciais) */
.user-avatar {
  display: flex; /* Flex para centralizar */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  width: 40px; /* Largura fixa */
  height: 40px; /* Altura fixa (circular) */
  border-radius: 50%; /* Totalmente circular */
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); /* Gradiente com cores do tema */
  color: white; /* Texto branco */
  font-weight: 700; /* Bold */
  font-size: 0.9rem; /* Tamanho da fonte */
  font-family: var(--font-heading); /* Fonte elegante */
  text-transform: uppercase; /* Sempre maiúsculas */
  cursor: help; /* Indica que tem tooltip */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Sombra suave */
  border: 2px solid white; /* Borda branca */
  flex-shrink: 0; /* Não encolhe */
  transition: all 0.3s ease; /* Transição suave */
}

.user-avatar:hover {
  transform: scale(1.1); /* Aumenta 10% no hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra maior */
}

/* Mobile: avatar menor */
@media (max-width: 768px) {
  .user-avatar {
    width: 36px; /* Menor em mobile */
    height: 36px; /* Mantém proporção */
    font-size: 0.8rem; /* Fonte menor */
  }
}

/* Botão de voltar (abaixo da navbar) */
.btn-back-below {
  display: inline-flex; /* Flex para alinhar ícone + texto */
  align-items: center; /* Centraliza verticalmente */
  padding: 0.5rem 1rem; /* Padding confortável */
  border-radius: 8px; /* Bordas arredondadas */
  background: rgba(var(--bs-primary-rgb), 0.05); /* Fundo azul muito claro */
  color: var(--color-primary); /* Cor primária */
  transition: all 0.3s ease; /* Transições suaves */
  text-decoration: none; /* Remove sublinhado */
  border: 1px solid rgba(var(--bs-primary-rgb), 0.2); /* Borda sutil */
  font-weight: 500; /* Peso médio */
  font-size: 0.9rem; /* Texto ligeiramente menor */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

.btn-back-below:hover {
  background: rgba(var(--bs-primary-rgb), 0.1); /* Fundo mais visível no hover */
  color: var(--color-primary); /* Mantém cor */
  border-color: var(--color-primary); /* Borda mais forte */
  transform: translateX(-3px); /* Move 3px para esquerda (efeito de "voltar") */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra maior */
}

.btn-back-below:active {
  transform: translateX(-3px) scale(0.98); /* Efeito de clique */
}

.btn-back-below svg {
  display: block; /* Remove espaço extra */
  flex-shrink: 0; /* Não encolhe */
}

.btn-back-below span {
  white-space: nowrap; /* Não quebra linha */
}

/* Links com melhor acessibilidade */
a {
  color: var(--color-primary); /* Cor do tema */
  text-decoration: none; /* Remove sublinhado padrão */
  transition: color 0.2s ease, opacity 0.2s ease; /* Transição suave */
  font-weight: 500; /* Peso médio para destaque */
}

a:hover {
  color: var(--color-accent); /* Cor de destaque no hover */
  opacity: 0.85; /* Leve transparência */
}

/* Botões com tipografia otimizada */
.btn {
  font-family: var(--font-button); /* Fonte configurável para botões */
  font-weight: 600; /* Semi-bold para destaque */
  letter-spacing: 0.025em; /* Tracking positivo para botões */
  text-transform: none; /* Mantém capitalização natural */
  font-size: 0.95rem; /* Ligeiramente menor que corpo */
}

/* Botão do Carrinho com estilo personalizado */
.btn-cart {
  background-color: #ffc107; /* Amarelo vibrante */
  border: 2px solid #ffc107; /* Borda amarela */
  color: #212529 !important; /* Texto escuro para contraste */
  font-weight: 700; /* Bold */
  transition: all 0.3s ease; /* Transição suave */
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3); /* Sombra amarela sutil */
}

.btn-cart:hover {
  background-color: #ffca2c; /* Amarelo mais claro no hover */
  border-color: #ffca2c; /* Borda mais clara */
  color: #000 !important; /* Texto preto no hover */
  transform: translateY(-2px); /* Leve elevação */
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4); /* Sombra maior */
}

.btn-cart:active {
  transform: translateY(0); /* Volta ao normal ao clicar */
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3); /* Sombra menor */
}

/* Ícones nos botões */
.btn i {
  font-size: 1.1rem; /* Ícones ligeiramente maiores */
}

/* Badge de contador do carrinho */
.btn-cart .badge {
  font-size: 0.7rem; /* Tamanho menor */
  padding: 0.35em 0.5em; /* Padding ajustado */
  font-weight: 700; /* Bold */
  animation: pulse 2s infinite; /* Animação de pulso */
}

/* Animação de pulso para o badge */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Botão de Comprar (Verde) */
.btn-success {
  background-color: #28a745; /* Verde vibrante */
  border-color: #28a745; /* Borda verde */
  color: #fff !important; /* Texto branco */
  font-weight: 600; /* Semi-bold */
  transition: all 0.3s ease; /* Transição suave */
}

.btn-success:hover {
  background-color: #218838; /* Verde mais escuro */
  border-color: #1e7e34; /* Borda mais escura */
  transform: translateY(-2px); /* Leve elevação */
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); /* Sombra verde */
}

.btn-success:active {
  transform: translateY(0); /* Volta ao normal */
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2); /* Sombra menor */
}

/* Ícone de cart-plus nos botões */
.btn i.bi-cart-plus {
  font-size: 1.15rem; /* Ícone maior */
  transition: transform 0.2s ease; /* Transição suave */
}

.btn:hover i.bi-cart-plus {
  transform: scale(1.15); /* Aumenta no hover */
}

/* Ícone de eye (detalhes) */
.btn i.bi-eye {
  font-size: 1.1rem; /* Tamanho adequado */
}

/* Ícone de arrow-left (voltar) */
.btn i.bi-arrow-left {
  font-size: 1rem; /* Tamanho adequado */
  transition: transform 0.2s ease; /* Transição suave */
}

.btn:hover i.bi-arrow-left {
  transform: translateX(-3px); /* Move para esquerda no hover */
}

/* Textos pequenos e metadados */
small, .small {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5; /* Linha mais compacta */
  color: #666; /* Cinza médio */
}

/* Badges e labels */
.badge {
  font-family: var(--font-body); /* Inter */
  font-weight: 600; /* Semi-bold */
  letter-spacing: 0.03em; /* Tracking para legibilidade */
  font-size: 0.75rem; /* 12px */
}

/* Seções de produtos estilo Netflix */
.product-section { 
  margin-bottom: 3rem; 
  background: rgba(255, 255, 255, 0.5); /* Fundo branco com 50% de transparência */
  padding: 1.5rem; 
  border-radius: 12px; 
  backdrop-filter: blur(10px); /* Efeito de vidro fosco */
  -webkit-backdrop-filter: blur(10px); /* Safari */
}
.section-title { 
  font-family: var(--font-heading); /* Playfair Display para elegância */
  font-size: 1.75rem; /* 28px - tamanho destacado */
  font-weight: 700; /* Bold */
  margin-bottom: 1.25rem; /* Espaço generoso */
  color: var(--color-primary); /* Cor do tema */
  letter-spacing: -0.02em; /* Tracking negativo para serif */
  line-height: 1.2; /* Linha compacta */
}

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
  .product-section {
    padding: 1rem; /* Padding menor em mobile */
    margin-bottom: 2rem; /* Menos espaço entre seções */
  }
  
  .section-title {
    font-size: 1.5rem; /* Título responsivo para mobile (24px) */
  }
  
  /* Ajuste de tipografia mobile */
  h1, .h1 { font-size: 2rem; } /* 32px */
  h2, .h2 { font-size: 1.75rem; } /* 28px */
  h3, .h3 { font-size: 1.5rem; } /* 24px */
  
  body {
    font-size: 15px; /* Base ligeiramente menor em mobile */
  }
  
  /* Botão de voltar em mobile */
  .btn-back-below {
    padding: 0.4rem 0.8rem; /* Padding menor em mobile */
    font-size: 0.85rem; /* Texto menor */
  }
  
  .btn-back-below svg {
    width: 18px; /* SVG menor */
    height: 18px; /* Mantém proporção */
  }
}

/* Scroll horizontal suave para produtos */
.product-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
  /* Fade no início e fim para indicar scroll */
  max-width: calc(100vw - 2rem);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 95%, transparent 100%);
}

/* Gap menor no scroll horizontal em mobile */
@media (max-width: 768px) {
  .product-row {
    gap: 0.75rem; /* Gap menor para mobile */
  }
}

/* Espaçador antes do primeiro card (meio card de distância) */
.product-row::before {
  content: '';
  flex: 0 0 100px; /* Metade do tamanho do card (250px / 2) */
  min-width: 100px;
}

/* Espaçador depois do último card (meio card de distância) */
.product-row::after {
  content: '';
  flex: 0 0 125px; /* Metade do tamanho do card (250px / 2) */
  min-width: 125px;
}

/* Espaçadores menores em dispositivos móveis (50% menor) */
@media (max-width: 768px) {
  .product-row::before {
    flex: 0 0 22px; /* 50% de 125px = 62.5px       meloria de tamanho do espeço inicial */
    min-width: 22px;
  }
  
  .product-row::after {
    flex: 0 0 62px; /* 50% de 125px = 62.5px */
    min-width: 62px;
  }
}

/* Remove scrollbar completamente para visual clean */
.product-row::-webkit-scrollbar { display: none; }
.product-row { -ms-overflow-style: none; scrollbar-width: none; }

/* Item do produto na linha horizontal */
.product-item { flex: 0 0 250px; min-width: 250px; }

/* Modo expandido: grid vertical */
.product-row.expanded {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  overflow: visible !important;
  max-width: 100% !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.product-row.expanded .product-item { flex: none; min-width: auto; }
.product-row.expanded::before { display: none; } /* Remove espaçador inicial no modo grid */
.product-row.expanded::after { display: none; } /* Remove espaçador final no modo grid */

/* Grid de 2 colunas em dispositivos móveis quando expandido */
@media (max-width: 768px) {
  .product-row.expanded {
    grid-template-columns: repeat(2, 1fr) !important; /* Exatamente 2 colunas */
    gap: 0.75rem; /* Gap menor para mobile */
  }
  
  .product-row.expanded .product-item {
    min-width: 0; /* Permite que os cards se ajustem às colunas */
  }
  
  .product-row.expanded .product-card {
    width: 100% !important; /* Cards ocupam 100% da coluna */
    height: 350px !important; /* Altura um pouco menor para mobile */
  }
  
  .product-row.expanded .product-card .card-img-top {
    height: 180px !important; /* Imagem um pouco menor */
  }
}

/* Cartões de produto com foco em hierarquia visual e tamanho consistente */
.product-card { 
  transition: transform .2s ease, box-shadow .2s ease; 
  display: flex !important; 
  flex-direction: column !important; 
  height: 380px !important; 
  width: 250px !important;
} /* Tamanho fixo para consistência no scroll horizontal */
.product-card:hover { transform: scale(1.05); box-shadow: 0 12px 32px rgba(0,0,0,.15); z-index: 10; } /* Efeito hover estilo Netflix */

/* Preços com ênfase de cor de acento */
.price { 
  color: var(--color-accent); /* Cor de destaque */
  font-family: var(--font-price); /* Fonte configurável para preços */
  font-weight: 700; /* Bold para destaque */
  font-size: 1.25rem; /* 20px - maior que texto normal */
  letter-spacing: -0.02em; /* Tracking negativo para números */
  line-height: 1.2; /* Linha compacta */
}

/* Header alinhado ao tema com tipografia otimizada */
header nav.navbar { 
  background: #fff; 
  font-family: var(--font-navbar); /* Fonte configurável para navegação */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra sutil para profundidade */
  position: relative; /* Para z-index */
  z-index: 1000; /* Fica acima do carousel */
}

header nav.navbar .navbar-brand {
  font-family: var(--font-heading); /* Fonte de títulos para logo/marca */
  font-weight: 700; /* Bold */
  font-size: 1.5rem; /* 24px - destaque */
  letter-spacing: -0.02em; /* Tracking negativo */
}

header nav.navbar .nav-link {
  font-family: var(--font-navbar); /* Fonte configurável para links */
  font-weight: 500; /* Médio para links */
  font-size: 0.95rem; /* 15px - ligeiramente menor */
  letter-spacing: 0.01em; /* Tracking positivo sutil */
  transition: all 0.2s ease; /* Transição suave */
}

header nav.navbar .nav-link:hover {
  font-weight: 600; /* Semi-bold no hover */
}

/* Ícones nos links de navegação */
header nav.navbar .nav-link i {
  font-size: 1.1rem; /* Ícones maiores */
  transition: transform 0.2s ease; /* Transição suave */
}

header nav.navbar .nav-link:hover i {
  transform: scale(1.1); /* Aumenta ícone no hover */
}

/* Botão hamburguer personalizado para mobile */
.navbar-toggler {
  padding: 0.5rem; /* Padding adequado */
  background-color: var(--color-primary) !important; /* Cor de fundo do tema */
  border-radius: 8px; /* Cantos arredondados */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Sombra sutil */
  transition: all 0.3s ease; /* Transição suave */
}

.navbar-toggler:hover {
  background-color: var(--color-accent) !important; /* Cor de destaque no hover */
  transform: scale(1.05); /* Aumenta levemente */
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.25); /* Foco acessível */
}

/* Ajustes específicos para mobile */
@media (max-width: 991px) {
  /* Logo menor em mobile */
  header nav.navbar .navbar-brand img {
    height: 50px !important; /* Reduz logo em mobile */
  }
  
  header nav.navbar .navbar-brand span {
    font-size: 1rem !important; /* Texto menor em mobile */
  }
  
  /* Menu colapsado com melhor layout */
  .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.98); /* Fundo semi-transparente */
    border-radius: 8px; /* Cantos arredondados */
    margin-top: 1rem; /* Espaço do topo */
    padding: 1rem; /* Padding interno */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra */
  }
  
  /* Links de navegação em mobile */
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem; /* Padding maior para toque */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Divisor sutil */
    font-weight: 500; /* Peso médio */
  }
  
  .navbar-nav .nav-link:last-child {
    border-bottom: none; /* Remove borda do último */
  }
  
  /* Botões em coluna em mobile */
  .d-flex.flex-column {
    width: 100%; /* Largura total */
  }
  
  .d-flex.flex-column .btn {
    width: 100%; /* Botões com largura total */
    padding: 0.75rem; /* Padding maior para toque */
    font-weight: 600; /* Semi-bold */
  }
}

/* ========================================
   CAROUSEL DE BANNERS
   ======================================== */

/* Carousel principal */
#bannerCarousel {
  margin: 0; /* Remove margem */
  padding: 0; /* Remove padding */
}

/* Imagens do carousel */
#bannerCarousel .carousel-item img {
  width: 100%; /* Largura total */
  height: 400px; /* Altura fixa */
  object-fit: cover; /* Cobre área sem distorcer */
  object-position: center; /* Centraliza imagem */
}

/* Caption com fundo semi-transparente */
#bannerCarousel .carousel-caption {
  background: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */
  padding: 1.5rem; /* Espaçamento interno */
  border-radius: 12px; /* Cantos arredondados */
  backdrop-filter: blur(8px); /* Efeito de vidro fosco */
  -webkit-backdrop-filter: blur(8px); /* Safari */
}

/* Controles do carousel */
#bannerCarousel .carousel-control-prev,
#bannerCarousel .carousel-control-next {
  width: 5%; /* Largura dos controles */
  opacity: 0.7; /* Transparência */
  transition: opacity 0.3s ease; /* Transição suave */
}

#bannerCarousel .carousel-control-prev:hover,
#bannerCarousel .carousel-control-next:hover {
  opacity: 1; /* Opaco no hover */
}

/* Indicadores do carousel */
#bannerCarousel .carousel-indicators button {
  width: 12px; /* Largura */
  height: 12px; /* Altura */
  border-radius: 50%; /* Circular */
  margin: 0 4px; /* Espaçamento */
  background-color: rgba(255, 255, 255, 0.5); /* Branco semi-transparente */
  border: 2px solid rgba(255, 255, 255, 0.8); /* Borda branca */
  transition: all 0.3s ease; /* Transição suave */
}

#bannerCarousel .carousel-indicators button.active {
  background-color: #fff; /* Branco sólido quando ativo */
  transform: scale(1.2); /* Aumenta quando ativo */
}

/* Responsivo: altura menor em mobile */
@media (max-width: 768px) {
  #bannerCarousel .carousel-item img {
    height: 250px; /* Altura reduzida em mobile */
  }
  
  #bannerCarousel .carousel-caption {
    padding: 0.75rem; /* Padding menor */
    font-size: 0.9rem; /* Texto menor */
  }
  
  #bannerCarousel .carousel-caption h5 {
    font-size: 1.1rem; /* Título menor */
  }
  
  /* Ajustes dos botões nos cards de produtos para mobile */
  .product-card .btn-sm {
    font-size: 0.75rem !important; /* Texto menor */
    padding: 0.35rem 0.5rem !important; /* Padding reduzido */
  }
  
  .product-card .btn-sm i {
    font-size: 0.9rem !important; /* Ícones menores */
  }
  
  .product-card .btn-sm span {
    display: none; /* Esconde texto em telas muito pequenas */
  }
  
  /* Cards menores em mobile */
  .product-card {
    height: 360px !important; /* Altura reduzida */
    width: 240px !important; /* Largura reduzida */
  }
  
  .product-card .card-img-top {
    height: 160px !important; /* Imagem menor */
  }
  
  .product-card .card-body {
    padding: 0.75rem !important; /* Padding menor */
  }
  
  .product-card .card-title {
    font-size: 0.875rem !important; /* Título menor */
    min-height: 2.4em !important; /* Altura mínima ajustada */
  }
  
  .product-card .price {
    font-size: 1rem !important; /* Preço menor */
  }
  
  /* Botões lado a lado ocupando espaço igual */
  .product-card .mt-auto.d-flex {
    gap: 0.25rem !important; /* Gap menor */
  }
  
  .product-card .mt-auto.d-flex .btn-sm {
    flex: 1; /* Ocupa espaço igual */
    min-width: 0; /* Remove largura mínima */
    padding: 0.5rem 0.25rem !important; /* Padding vertical maior */
  }
  
  /* Mostra apenas ícones em mobile muito pequeno */
  @media (max-width: 480px) {
    .product-card .btn-sm span {
      display: none !important; /* Esconde texto */
    }
    
    .product-card .btn-sm {
      justify-content: center !important; /* Centraliza ícone */
    }
  }
}

/* ========================================
   CAMPO DE BUSCA (LIVE SEARCH)
   ======================================== */

/* Container da busca */
.search-container {
  width: 100%; /* Largura total em mobile */
  max-width: 400px; /* Largura máxima em desktop */
}

/* Input de busca */
.search-container .input-group-text {
  border-radius: 0.375rem 0 0 0.375rem; /* Borda arredondada à esquerda */
  padding: 0.5rem 0.75rem; /* Espaçamento interno */
}

.search-container .form-control {
  border-radius: 0 0.375rem 0.375rem 0; /* Borda arredondada à direita */
  border-left: none !important; /* Remove borda esquerda */
  padding-right: 2.5rem !important; /* Espaço para o spinner */
}

.search-container .form-control:focus {
  box-shadow: none; /* Remove sombra padrão do Bootstrap */
  border-color: #dee2e6; /* Mantém cor da borda */
}

/* Loading spinner dentro do input */
#searchLoading {
  animation: fadeIn 0.2s ease-in; /* Animação de entrada suave */
}

#searchLoading .spinner-border {
  width: 1.2rem; /* Tamanho do spinner */
  height: 1.2rem; /* Tamanho do spinner */
  border-width: 0.15rem; /* Espessura da borda */
  opacity: 0.8; /* Leve transparência */
}

/* Animação de fade in para o loading */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Resultados da busca */
.search-results {
  animation: slideDown 0.3s ease-out; /* Animação de entrada */
}

@keyframes slideDown {
  from {
    opacity: 0; /* Invisível */
    transform: translateY(-10px); /* Deslocado para cima */
  }
  to {
    opacity: 1; /* Visível */
    transform: translateY(0); /* Posição normal */
  }
}

/* Itens da lista de resultados */
.search-results .list-group-item {
  transition: background-color 0.2s ease; /* Transição suave no hover */
  border-left: 3px solid transparent; /* Borda invisível */
}

.search-results .list-group-item:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05); /* Fundo azul claro */
  border-left-color: var(--color-primary); /* Borda colorida */
}

/* Imagem nos resultados */
.search-results img {
  border: 2px solid #dee2e6; /* Borda mais visível */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
  transition: all 0.3s ease; /* Transição suave */
  background: #f8f9fa; /* Fundo claro (aparece se imagem não carregar) */
}

/* Hover na imagem dos resultados */
.search-results .list-group-item:hover img {
  border-color: var(--color-primary); /* Borda colorida no hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra maior */
  transform: scale(1.05); /* Leve zoom */
}

/* Estilo específico para imagens de busca */
.search-result-img {
  width: 60px !important; /* Largura fixa */
  height: 60px !important; /* Altura fixa */
  object-fit: cover !important; /* Cobre área sem distorcer */
  object-position: center !important; /* Centraliza imagem */
  flex-shrink: 0 !important; /* Não encolhe */
  border-radius: 0.375rem !important; /* Bordas arredondadas */
}

/* Scrollbar customizada para resultados */
.search-results::-webkit-scrollbar {
  width: 8px; /* Largura da scrollbar */
}

.search-results::-webkit-scrollbar-track {
  background: #f1f1f1; /* Fundo da track */
  border-radius: 4px; /* Borda arredondada */
}

.search-results::-webkit-scrollbar-thumb {
  background: #888; /* Cor do thumb */
  border-radius: 4px; /* Borda arredondada */
}

.search-results::-webkit-scrollbar-thumb:hover {
  background: #555; /* Cor mais escura no hover */
}

/* Mobile: busca em largura total */
@media (max-width: 991px) {
  .search-container {
    max-width: none; /* Remove limite de largura */
    width: 100%; /* Largura total */
  }
  
  /* Destaque visual no campo de busca em mobile */
  .search-container .form-control:focus {
    border-color: var(--color-primary) !important; /* Borda colorida ao focar */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15) !important; /* Sombra suave */
  }
  
  /* Aumenta tamanho do campo em mobile para melhor usabilidade */
  .search-container .form-control {
    font-size: 16px; /* Evita zoom automático no iOS */
    padding: 0.75rem; /* Padding maior para touch */
  }
  
  .search-container .input-group-text {
    padding: 0.75rem; /* Padding consistente */
  }
}

/* ========================================
   PRODUTO - IMAGEM CLICÁVEL
   ======================================== */

/* Link da imagem do produto (clicável para detalhes) */
.product-image-link {
  display: block; /* Ocupa toda área */
  position: relative; /* Para overlay */
  overflow: hidden; /* Esconde overflow da imagem */
  cursor: pointer; /* Indica que é clicável */
  transition: all 0.3s ease; /* Transição suave */
}

.product-image-link::after {
  content: ''; /* Overlay escuro */
  position: absolute; /* Posiciona sobre a imagem */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0); /* Transparente por padrão */
  transition: background 0.3s ease; /* Transição do overlay */
  pointer-events: none; /* Não interfere com cliques */
}

.product-image-link:hover::after {
  background: rgba(0, 0, 0, 0.1); /* Overlay escuro sutil no hover */
}

.product-image-link::before {
  content: '\F341'; /* Ícone bi-eye (Unicode) */
  font-family: 'bootstrap-icons'; /* Usa Bootstrap Icons */
  position: absolute; /* Centraliza */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* Escondido e pequeno */
  font-size: 2rem; /* Tamanho grande */
  color: white; /* Cor branca */
  background: rgba(0, 0, 0, 0.7); /* Fundo escuro */
  padding: 1rem; /* Espaçamento */
  border-radius: 50%; /* Circular */
  z-index: 2; /* Acima da imagem */
  transition: transform 0.3s ease; /* Transição suave */
  pointer-events: none; /* Não interfere com cliques */
}

.product-image-link:hover::before {
  transform: translate(-50%, -50%) scale(1); /* Aparece e cresce no hover */
}

/* Imagem dos cards: altura fixa, largura 100%, object-fit cover para preencher sem distorcer */
.product-card .card-img-top { 
  height: 200px !important; 
  width: 100% !important; 
  object-fit: cover !important; 
  object-position: center !important; 
  flex-shrink: 0 !important; 
  transition: transform 0.3s ease; /* Transição para zoom */
} /* Altura fixa 200px, imagem cobre área sem distorcer */

/* Zoom sutil na imagem ao hover */
.product-image-link:hover .card-img-top {
  transform: scale(1.05); /* Zoom de 5% */
}

/* Padronização de altura dos cards (título truncado, corpo flex e CTA no final) */
.product-card .card-title {
  display: -webkit-box !important; 
  -webkit-line-clamp: 2 !important; 
  -webkit-box-orient: vertical !important; 
  overflow: hidden !important;
  min-height: 2.8em !important; /* Espaço para 2 linhas de título */
  line-height: 1.4 !important;
  font-family: var(--font-body) !important; /* Inter para títulos de produtos */
  font-weight: 600 !important; /* Semi-bold para destaque */
  font-size: 1rem !important; /* 16px - tamanho confortável */
  letter-spacing: -0.01em !important; /* Tracking sutil */
  color: #1a1a1a !important; /* Preto suave */
  margin-bottom: 0.5rem !important; /* Espaço após título */
}

/* Texto descritivo dos cards */
.product-card .card-text {
  font-size: 0.875rem !important; /* 14px - menor que título */
  line-height: 1.5 !important; /* Linha compacta */
  color: #666 !important; /* Cinza médio */
  font-weight: 400 !important; /* Regular */
}
.product-card .card-body { 
  flex: 1 !important; 
  display: flex !important; 
  flex-direction: column !important; 
  padding: 1rem !important; 
} /* Flex 1 faz o corpo ocupar espaço restante */
.product-card .card-body .mt-auto { margin-top: auto !important; }