/* Small, non-interactive details kept in the hero's lower margin. */
.kids-product-hero, .phonics-playful .phonics-hero { position: relative; padding-bottom: 48px; }
.page-theme-detail { position: absolute; right: 40px; bottom: 10px; display: flex; align-items: center; gap: 16px; pointer-events: none; user-select: none; }
.footprint-trail span { width: 26px; height: 32px; background: var(--footprint) center / contain no-repeat; opacity: .55; transform: rotate(-18deg); }
.footprint-trail span:nth-child(2) { transform: translateY(-5px) rotate(18deg); }
.footprint-trail span:nth-child(3) { transform: rotate(-10deg); }
.dino-page { --footprint: url('/images/page-details/dino-footprint.svg'); }
.farm-page { --footprint: url('/images/page-details/paw-print.svg'); }
.letter-sprinkles { gap: 10px; }
.letter-sprinkles span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #ffffff99; color: #6232b4; font-family: "Baloo 2", sans-serif; font-size: 1.3rem; font-weight: 800; line-height: 1; transform: rotate(-12deg); }
.letter-sprinkles span:nth-child(2) { background: #d9c9fa; transform: translateY(-4px) rotate(9deg); }
.letter-sprinkles span:nth-child(3) { background: #d7ef90; transform: rotate(-6deg); }
@media (max-width: 560px) { .page-theme-detail { right: 26px; gap: 12px; } .letter-sprinkles { gap: 8px; } }