/* StoreBadge - ported from Framer code component StoreBadge.tsx
   App store link drawn as a hairline pill with the store mark, a small line and
   the store name. Hover takes the accent and lifts 2px, pressing settles it
   back, keyboard focus draws a ring. No JS: pure CSS, transform-only motion.
   Colours are custom properties so the badge can sit on a dark film (defaults)
   or be re-themed on a light ground by overriding --fr-badge-* on the element. */
.fr-badge {
  --fr-badge-border: rgba(244, 241, 234, 0.24);
  --fr-badge-border-hover: rgb(74, 144, 226);
  --fr-badge-fill: rgba(244, 241, 234, 0.05);
  --fr-badge-fill-hover: rgba(74, 144, 226, 0.12);
  --fr-badge-ink: rgb(255, 255, 255);
  --fr-badge-small: rgb(147, 163, 180);
  --fr-badge-focus: rgb(108, 172, 246);
  --fr-badge-ease: cubic-bezier(.16, 1, .3, 1);
  display: inline-flex;
  align-items: center;
  gap: 11.2px;
  padding: 12.8px 24px;
  border-radius: 10px;
  border: 1px solid var(--fr-badge-border);
  background: var(--fr-badge-fill);
  color: var(--fr-badge-ink);
  text-decoration: none;
  transform: translateY(0);
  transition: background-color 220ms var(--fr-badge-ease),
    border-color 220ms var(--fr-badge-ease),
    transform 220ms var(--fr-badge-ease);
}
.fr-badge:active { transform: translateY(0); transition-duration: 120ms; }
.fr-badge:focus-visible { outline: 2px solid var(--fr-badge-focus); outline-offset: 4px; }
.fr-badge__mark { display: block; flex: none; color: var(--fr-badge-ink); }
.fr-badge__mark svg { display: block; width: 100%; height: 100%; }
.fr-badge__label { display: flex; flex-direction: column; align-items: flex-start; }
.fr-badge__small {
  display: block;
  font-family: var(--jifu-font-body, Montserrat, sans-serif);
  font-weight: 400;
  font-size: 8.1px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fr-badge-small);
}
.fr-badge__store {
  display: block;
  font-family: var(--jifu-font-display, "Heuvel Grotesk", Montserrat, sans-serif);
  font-weight: 700;
  font-size: 15.3px;
  line-height: 1.2;
  color: var(--fr-badge-ink);
}
@media (hover: hover) {
  .fr-badge:hover {
    border-color: var(--fr-badge-border-hover);
    background: var(--fr-badge-fill-hover);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr-badge {
    transition: background-color 220ms var(--fr-badge-ease),
      border-color 220ms var(--fr-badge-ease);
  }
  .fr-badge:hover { transform: none; }
}