/* --- ESTILOS GERAIS E DE NAVEGAÇÃO --- */

body {
  font-family: 'Inter', sans-serif;
  background-color: #4A4A4A;
  /* Fundo cinza escuro definido pelo utilizador */
  color: #EB5D40;
  /* Cor de texto padrão/destaque definida pelo utilizador */
}

.page-section {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.section-hidden {
  opacity: 0;
  transform: translateY(20px);
  height: 0;
  /* Garante que não ocupe espaço vertical */
  overflow: hidden;
  /* Esconde o conteúdo extra */
  display: none;
  /* Remove completamente do fluxo do layout quando escondido após a transição */
  pointer-events: none;
}

.section-visible {
  opacity: 1;
  transform: translateY(0);
  position: relative;
  display: block;
  /* Garante que ocupe espaço quando visível */
  height: auto;
  /* Permite que o conteúdo defina a altura */
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 50%;
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}


/* --- CONTROLO DE CORES DOS TEXTOS --- */

.header-link-color,
.footer-link-color {
  color: #EB5D40;
  /* Laranja */
}

.nav-link::after {
  background-color: #EB5D40;
}

.hero-title-color {
  color: #ffffff;
  /* Branco */
}

.hero-subtitle-color {
  color: #f0f0f0;
}

.hero-button-text-color {
  color: #EB5D40;
}

.section-title-color {
  color: #EB5D40;
}

.section-paragraph-color {
  color: #E0E0E0;
}

.product-name-color {
  /* Esta cor não é mais diretamente usada para o nome do produto no overlay, mas pode ser mantida para outras partes */
  color: #ffffff;
  /* Cor de texto branco */
}

.product-price-color {
  /* Esta cor será usada para o preço sobre a imagem */
  color: #ffffff;
  /* Cor de texto branco */
}

.form-label-color {
  color: #E0E0E0;
}

.form-button-text-color {
  color: #ffffff;
}

.footer-text-color {
  color: #a49a9a;
}

/* --- CONTROLO DE CORES DOS FUNDOS --- */
.header-background {
  background-color: #EEEBE5;
}

.footer-background {
  background-color: #EEEBE5;
}

/* --- ESTILOS DOS PRODUTOS (PARA SOBREPOSIÇÃO DE TEXTO NA IMAGEM) --- */

/* Contêiner principal de cada card de produto */
.group>div {
  position: relative;
  width: 100%;
  padding-top: 133.33%;
  /* Proporção 3:4 para o card do produto (mais alto que largo) */
  background-size: cover;
  /* A imagem de fundo cobrirá todo o espaço */
  background-position: center;
  /* Centraliza a imagem de fundo */
  background-repeat: no-repeat;
  /* Evita repetição da imagem */
  border-radius: 0.5rem;
  /* Bordas arredondadas */
  overflow: hidden;
  /* Garante que nada transborde */
  box-sizing: border-box;
  /* Garante que padding não aumente o tamanho total */
}

/* Opcional: Efeito de zoom no card ao passar o mouse */
.group>div:hover {
  transform: scale(1.02);
  /* Leve zoom no card ao passar o mouse */
  transition: transform 0.3s ease-in-out;
}

/* Oculta a tag <img> dentro da div do produto, pois a imagem agora é background */
.group>div img {
  display: none;
}

/* Overlay para o preço do produto, POSICIONADO SOBRE a imagem */
.product-info-overlay {
  position: absolute;
  /* Posiciona o overlay sobre a imagem */
  bottom: 0;
  /* Alinha o overlay na parte inferior da caixa do produto */
  left: 0;
  width: 100%;
  /* Gradiente para o fundo do texto, para melhorar a legibilidade sobre a imagem */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 1.5rem;
  /* Espaçamento interno para o texto */
  box-sizing: border-box;
  /* Inclui padding no cálculo da largura */
  display: flex;
  /* Utiliza flexbox para organizar o conteúdo */
  flex-direction: column;
  /* Coloca os itens um abaixo do outro */
  align-items: flex-start;
  /* Alinha o conteúdo à esquerda */
  justify-content: flex-end;
  /* Alinha o conteúdo ao final (inferior) do overlay */
  /* A cor principal para o texto dentro deste overlay. O preço herdará esta cor. */
  color: rgba(235, 93, 64, 0.8);
  /* Laranja com 80% de opacidade*/
  z-index: 10;
  /* Garante que o overlay fique acima da imagem */
}

/* Estilos para o valor do preço (ex: 79,99) */
.product-large-price {
  font-size: 2.8rem;
  /* Tamanho bem grande para o preço */
  font-weight: bold;
  /* REMOVIDO: color: white; - O preço agora herdará a cor de .product-info-overlay */
  line-height: 1;
  /* Para evitar espaçamento extra na linha */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 0;
}

/* Ajuste para o '.99' para ser menor e alinhado */
.product-cents {
  font-size: 1.2rem;
  /* Tamanho menor para os centavos */
  vertical-align: super;
  /* Alinha os centavos um pouco mais alto */
}

/* Ajuste de grid para as seções de produtos para acomodar os novos cards */
#home .grid,
#colecao .grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  /* Espaçamento entre os cards, ajuste conforme necessário */
}