/* About page (site/local/pages/about-us.html): the real Rudraksha and gemstone photos on the
   legacy mala and the gemstone links. */
/* The legacy mala (.gta-mala): its four generation beads are real Rudraksha, from the store's own
   product photos (site/local/about-beads/: 5, 6, 7 and 9 Mukhi). Their white ground is multiplied
   away, so the gold thread shows round them. */
.gta-mala .gta-mala__bead::before { width: 46px; height: 46px; margin-left: -1px; border-radius: 50%;
  background: center / cover no-repeat; box-shadow: none; mix-blend-mode: multiply; }
.gta-mala .gta-mala__bead:nth-child(2)::before { background-image: url(/local/about-beads/5-mukhi.webp); }
.gta-mala .gta-mala__bead:nth-child(3)::before { background-image: url(/local/about-beads/6-mukhi.webp); }
.gta-mala .gta-mala__bead:nth-child(4)::before { background-image: url(/local/about-beads/7-mukhi.webp); }
.gta-mala .gta-mala__bead:nth-child(5)::before { background-image: url(/local/about-beads/9-mukhi.webp); }

/* The gemstone links (.gta-chips) show the real stone, from the store's own product photos
   (site/local/about-gems/), in a gold ring, in place of the colour dot. */
.gta .gta-chips a { gap: 12px; padding: 6px 20px 6px 6px; }
.gta .gta-chips a:hover i { transform: scale(1.08); }
.gta .gta-chips i { width: 44px; height: 44px; flex: none; background: var(--stone) center / cover no-repeat;
  box-shadow: 0 0 0 2px #E7B75F, 0 4px 10px -4px rgba(80, 50, 5, .5); transition: transform .25s; }
.gta .gta-chips a[href="/collections/emerald/"] i { background-image: url(/local/about-gems/emerald.webp); }
.gta .gta-chips a[href="/collections/yellow-sapphire/"] i { background-image: url(/local/about-gems/yellow-sapphire.webp); }
.gta .gta-chips a[href="/collections/ruby/"] i { background-image: url(/local/about-gems/ruby.webp); }
.gta .gta-chips a[href="/collections/red-coral/"] i { background-image: url(/local/about-gems/coral.webp); }
.gta .gta-chips a[href="/collections/pearl/"] i { background-image: url(/local/about-gems/pearl.webp); }
.gta .gta-chips a[href="/collections/gemstones/"] { padding: 6px 20px; min-height: 58px; }
@media (prefers-reduced-motion: reduce) { .gta .gta-chips i { transition: none; } }
