/* =========================================================
   Pagina de sugestoes de presente
   Herda tudo de styles.css; aqui so o que e proprio dela.
   ========================================================= */

body { padding-bottom: 0; }

/* ---------------- cabecalho ---------------- */

.cabecalho {
  position: relative;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 16px 20px 10px;
  text-align: center;
}

.voltar {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--texto-fraco);
  text-decoration: none;
  padding: 6px 4px;
}

.voltar:hover { color: var(--verde-esc); }

.cabecalho__logo {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 4px;
  animation: surgir 1s cubic-bezier(.2, .8, .3, 1) both;
}

.cabecalho__titulo {
  margin: 0 0 22px;
  font-family: var(--fonte-mao);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--terracota);
}

/* --- recado de "e opcional" --- */

.cartao--recado {
  text-align: center;
  padding: 24px 20px;
  border-style: dashed;
}

.cartao--recado p { margin: 0 0 12px; font-size: 16px; }
.cartao--recado p:last-child { margin-bottom: 0; }

.recado__forte {
  font-family: var(--fonte-mao);
  font-size: 30px !important;
  line-height: 1.15;
  color: var(--verde-esc);
}

.recado__leve {
  font-size: 15px !important;
  color: var(--texto-fraco);
  font-style: italic;
}

/* ---------------- lista ---------------- */

.lista-presentes {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 26px 20px 0;
}

/* ---------------- cartao de presente ---------------- */

.grade-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--areia);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .3s ease, box-shadow .3s ease;
}

.item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}

.item__figura {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.item__figura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

/* se a imagem da loja sumir, o card nao quebra */
.item__figura--vazia img { display: none; }

.item__figura--vazia::after {
  content: '🎁';
  font-size: 34px;
  opacity: .5;
}

.item__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 14px;
}

.item__nome {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--verde-esc);
}

.item__descricao {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--texto-fraco);
}

.item__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: auto;
  padding-top: 6px;
}

.item__preco {
  font-size: 17px;
  font-weight: 800;
  color: var(--terracota);
}

.item__idade {
  font-size: 12px;
  color: var(--texto-fraco);
}

.item__link {
  display: block;
  margin-top: 8px;
  padding: 11px 10px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  color: var(--verde-esc);
  background: var(--areia);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}

.item__link:hover {
  background: var(--verde);
  color: #fff;
}

/* ---------------- fim ---------------- */

.secao--fim { padding-top: 40px; }

.cartao--fim { text-align: center; }

.fim__frase {
  margin: 0 0 16px;
  font-family: var(--fonte-mao);
  font-size: 27px;
  line-height: 1.25;
  color: var(--terracota);
}

.cartao--fim .botao { margin-top: 0; }

/* ---------------- telas maiores ---------------- */

@media (min-width: 620px) {
  .cabecalho__logo { max-width: 340px; }
  .grade-lista     { grid-template-columns: repeat(3, 1fr); }
}