/* Cart/Favorite icon links in the site header. Kept as its own stylesheet since the header renders outside the .tr-theme wrapper on most pages. */ .header-icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 4px; color: #340411; font-size: 18px; text-decoration: none; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; } .header-icon-link:hover { color: #c8a278; } .header-icon-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #340411; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* Fly-to-destination microinteraction (Add to Bag / Save to Favorites). The ghost is a fixed-position clone appended to by FlyToTargetService; it never affects document layout and is removed once the animation ends. */ .tr-fly-ghost { position: fixed; z-index: 99998; pointer-events: none; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 16px rgba(52, 4, 17, 0.28); } .tr-fly-ghost img { display: block; width: 100%; height: 100%; object-fit: cover; } .header-icon-link.tr-fly-pulse { animation: tr-fly-pulse-icon 0.6s ease-out; } .header-icon-link.tr-fly-pulse .header-icon-badge { animation: tr-fly-pulse-badge 0.6s ease-out; } @keyframes tr-fly-pulse-icon { 0% { transform: scale(1); color: #340411; } 35% { transform: scale(1.08); color: #c8a278; } 100% { transform: scale(1); color: #340411; } } @keyframes tr-fly-pulse-badge { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .header-icon-link.tr-fly-pulse, .header-icon-link.tr-fly-pulse .header-icon-badge { animation: none; } }