/* Shared BeadApp metallic-gold actions. Same gold ramp as Studio's light theme. */
.pro-cta, .pro-cta:hover, .pro-cta:focus,
.preview-button, .preview-button:hover, .preview-button:focus,
.print.solo, .print.solo:hover, .print.solo:focus,
.cta, .cta:hover, .cta:focus,
.open:not(.open2), .open:not(.open2):hover, .open:not(.open2):focus,
.upsell-cta, .upsell-cta:hover, .upsell-cta:focus,
.metallic-gold-button, .metallic-gold-button:hover, .metallic-gold-button:focus {
  --metallic-gold: linear-gradient(177deg, #FBEFC8 0%, #E7C976 17%, #B58F2C 49%, #D3AE4E 51%, #F6E7B4 86%, #E7C976 100%);
  background-color: #C9A44E;
  background-image: var(--metallic-gold);
  color: #241A05;
  box-shadow: inset 0 0 0 1px #9A7521, inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 4px rgba(58,43,38,.18);
}

:is(.pro-cta, .preview-button, .print.solo, .cta, .open:not(.open2), .upsell-cta, .metallic-gold-button):is(:hover, :focus-visible) {
  background-image: linear-gradient(110deg, transparent 45%, rgba(255,252,235,.8) 50%, transparent 55%), var(--metallic-gold);
  background-size: 240% 100%, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.pro-cta, .preview-button, .print.solo, .cta, .open:not(.open2), .upsell-cta, .metallic-gold-button):hover {
    animation: metallic-gold-glint .45s ease-out;
  }
}

@keyframes metallic-gold-glint {
  from { background-position: 100% center, center; }
  to { background-position: 50% center, center; }
}

.cta:focus-visible, .open:not(.open2):focus-visible, .upsell-cta:focus-visible, .metallic-gold-button:focus-visible { outline: 3px solid #6E5518; outline-offset: 3px; }