/* --- Estilos para a Página da Loja --- */
.shop-section .section-title {
  background-color: var(--red);
  padding: 10px;
  word-break: break-word;
  text-transform: uppercase;
  color: var(--black);
  font-size: 30pt;
  border-bottom: none;
  border-bottom: 1px solid var(--black);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  background-color: var(--black);
}

.product-card {
  background-color: var(--black);
  /* bordas internas top/left evitam borda dupla nas extremidades */
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}

.product-card-image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/* Imagem principal, sempre visível por padrão */
.product-image-primary {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}

/* Imagem secundária (hover), posicionada sobre a principal e invisível por padrão */
.product-image-secondary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: var(--transition);
}

/* No hover do card, a imagem secundária se torna visível */
.product-card:hover .product-image-secondary {
  opacity: 1;
}

/* Estilos para o conteúdo do card (título, artista) */
.product-card-content {
  padding: 10px;
  background-color: var(--black);
  /* Altura mínima para manter os cards uniformes enquanto o preço carrega */
  min-height: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--transition);
  border-top: 1px solid var(--black);
}

/*
  Sobrescreve os estilos globais de p.p-large e p.p-small para se adequarem ao card.
  Regras ajustadas para controlar espaçamento entre título, artista e preço.
*/
.product-card-content .p-large {
  /* Nome do produto: sem espaço abaixo para ficar colado ao nome do artista */
  margin: 0;
  color: var(--white);
  transition: var(--transition);
}
.product-card-content .p-small {
  /* Nome do artista: sem margem superior e 5px abaixo para separar do preço */
  margin: 0 0 5px 0;
  color: var(--white);
  transition: var(--transition);
}

.product-price-placeholder {
  margin-top: 5px; /* Espaçamento fixo de 5px entre artista e preço */
  min-height: 1.2em; /* Evita 'pulos' no layout enquanto o preço carrega */
}

/* --- Efeitos de Hover --- */

/* Ao passar o mouse, o fundo e o texto do conteúdo mudam de cor */
.product-card:hover .product-card-content {
  background-color: var(--grey);
}

.product-card:hover .product-card-content .p-large,
.product-card:hover .product-card-content .p-small {
  color: var(--black);
}
/* --- Estilos para as Seções da Loja --- */

.shop-section {
  width: 100%;
}

/* Adiciona um espaço entre a seção de Lançamentos e a de Merchandise */
/* Removido conjunto de regras vazio para manter o CSS limpo */