@import url(./base.css);
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap");

/* --- Estilos Gerais do Layout --- */
.main-detalhe-assinatura {
  margin: 0 auto;
  padding: 20px 33px;
}

/* --- Breadcrumb (Caminho das Páginas) --- */
.breadcrumb {
  color: var(--roxo-fonte);
  margin-bottom: 5px;
  font-size: 10px;
}

.breadcrumb a {
  color: var(--roxo-fonte);
  text-decoration: none;
  font-family: "Josefin Sans";
}

.breadcrumb span {
  font-family: "Josefin Sans";
}

/* --- Container Principal Injetado pelo JS --- */
.produto-detalhe-container {
  display: flex;
  flex-direction: column; /* Empilha o conteúdo (imagem acima, info abaixo) */
}

/* --- Galeria de Imagens --- */
.galeria-produto {
  margin-bottom: 20px;
  width: 100%;
}

.imagem-principal {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.miniaturas-container {
  display: flex;
  justify-content: space-between; /* Espaçamento entre as 3 miniaturas */
  gap: 5px;

  width: 100%;
}

.miniatura {
  width: 90px;
  height: 90px;
  cursor: pointer;
}
/* .miniatura:hover { opacity: 1; }  Se quiser um efeito hover/seleção */

/* --- Informações do Produto --- */
.info-assinatura {
  padding: 10px 0;
  color: var(--roxo-fonte);
}

.titulo-assinatura {
  font-family: "Newsreader"; /* Fontes com estilo elegante */
  font-size: 21px;
  font-weight: bold;
}

.preco-assinatura {
  font-size: 24px;
  font-weight: 400;
}

.frete-info {
  font-size: 16px;
  font-family: "Arimo";
  margin-bottom: 20px;
}

.descricao-assinatura {
  font-size: 18px;
  font-family: "Roboto Condensed";
  line-height: 1.5;
  margin-bottom: 20px;
}

/* --- Opções de Seleção (Dropdowns) --- */
.opcoes-selecao {
  margin-bottom: 15px;
}

.opcoes-selecao label {
  display: block;
  font-weight: bold;
  font-size: 20px;
  font-weight: 400;
  font-family: "Arimo";
  margin-bottom: 5px;
}

.opcoes-selecao select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  appearance: none;
  background: url("caminho/para/seta-dropdown.png") no-repeat right 10px center; /* Opcional: ícone customizado */
  background-color: #fff;
  cursor: pointer;

  font-size: 20px;
  font-weight: 400;
  font-family: "Roboto Condensed";
  color: var(--roxo-fonte);
}

/* --- Botão de Assinar --- */
.btn-assinatura {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: var(--roxo-claro); /* Roxo Médio */
  color: white;
  font-size: 24px;
  font-family: "Roboto";
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 15px; /* Cantos arredondados, como no print */
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-assinatura:hover {
  background-color: #7b68ee; /* Um tom um pouco mais escuro ao passar o mouse */
}

@media (min-width: 768px) {
  .main-detalhe-assinatura {
    width: auto;
  }

  #produto-detalhe-container {
    width: 90%;
    display: flex;
    justify-content: space-between;
  }

  .galeria-produto {
    width: 48%;
    margin-right: 1%;
  }

  .info-assinatura {
    margin-left: 1%;
    width: 48%;
  }

  .frete-info,
  .descricao-assinatura {
    margin-bottom: 16px;
  }
}

@media (min-width: 1024px) {
  #produto-detalhe-container {
    width: 100%;
  }

  .container-assinatura {
    padding: 50px 30px;
    width: 80vw;
    margin: 0 auto;
  }
  .titulo-assinatura {
    font-size: 26px;
  }
  .preco-assinatura {
    font-size: 30px;
  }

  .frete-info,
  .descricao-assinatura {
    margin-bottom: 22px;
    font-size: 20px;
    width: 90%;
  }

  .quantidade {
    font-size: 22px;
  }

  .opcoes-selecao {
    margin-bottom: 22px;
    width: 90%;
  }

  .btn-assinatura {
    width: 90%;
  }
}
@media (min-width: 1366px) {
  .breadcrumb {
    font-size: 18px;
  }
  .info-assinatura {
    margin-left: 2%;
    width: 50%;
  }

  .titulo-assinatura,
  .preco-assinatura {
    font-size: 32 px;
  }
}