/* BONTLE Updated Icon Sprite CSS */
:root {
  --bontle-gold: #C8A46A;
  --bontle-pink: #DDB4B8;
  --bontle-ivory: #F7F3EE;
  --bontle-taupe: #B4A08E;
  --bontle-black: #1F1F20;
  --bontle-rose: #9B6B72;
}

.bontle-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  color: var(--bontle-gold);
  vertical-align: middle;
  flex-shrink: 0;
}

.bontle-icon--xs { width: 14px; height: 14px; }
.bontle-icon--sm { width: 16px; height: 16px; }
.bontle-icon--md { width: 24px; height: 24px; }
.bontle-icon--lg { width: 32px; height: 32px; }
.bontle-icon--xl { width: 48px; height: 48px; }
.bontle-icon--xxl { width: 64px; height: 64px; }

.bontle-icon--gold { color: var(--bontle-gold); }
.bontle-icon--pink { color: var(--bontle-pink); }
.bontle-icon--taupe { color: var(--bontle-taupe); }
.bontle-icon--black { color: var(--bontle-black); }
.bontle-icon--rose { color: var(--bontle-rose); }
.bontle-icon--ivory { color: var(--bontle-ivory); }

.bontle-icon-chip {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(200, 164, 106, 0.45);
  background: rgba(247, 243, 238, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bontle-gold);
}

.bontle-icon-tile {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(200, 164, 106, 0.32);
  background: linear-gradient(145deg, rgba(247,243,238,.95), rgba(221,180,184,.25));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bontle-gold);
}