/**
 * Styles exclusifs aux pages Cadeaux (page-cadeaux.php, page-cadeaux-occasion.php).
 * Réutilise déjà .card/.grid-products/.band-grid/.testi/.stars-row des feuilles
 * shop.css/homepage.css/components.css chargées à leurs côtés (cf. inc/enqueue.php).
 */

.occasion-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-12);
}
.occasion-card{
  background: var(--white);
  border: 1px solid var(--champagne);
  border-radius: var(--radius-card-sm);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.occasion-card:hover{ border-color: var(--accent); transform: translateY(-3px); }
.occasion-emoji{ font-size: 1.8rem; display: block; margin-bottom: var(--space-2); }
.occasion-card b{ font-family: var(--font-display); color: var(--taupe); }

.gift-wrap-band{
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-6);
  background: var(--cream-deep);
  border-radius: var(--radius-card-sm);
  text-align: center;
  font-size: .9rem;
  color: var(--taupe-soft);
}

.budget-chips{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.budget-chip{
  border: 1px solid var(--champagne);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: .85rem;
  color: var(--taupe-soft);
}
.budget-chip.active{ background: var(--taupe); color: var(--cream); border-color: var(--taupe); }
.budget-chip:hover{ border-color: var(--accent); }

.gift-fallback-band{ margin-top: var(--space-16); }

@media (min-width: 768px){
  .occasion-grid{ grid-template-columns: repeat(4, 1fr); }
}