/*
 * Add `jr-button` to an Elementor Button widget under Advanced > CSS Classes.
 * The two current Store "SHOP NOW" widgets are included as live examples.
 */
:where(
  .jr-button,
  .elementor-element-3365506,
  .elementor-element-272adb6
) {
  --jr-button-accent: #e7d0a1;
  --jr-button-scale: 1.035;
  --jr-button-grow-speed: 640ms;
  --jr-button-speed: 320ms;
  --jr-button-border-opacity: .5;
}

:where(
  .jr-button,
  .elementor-element-3365506,
  .elementor-element-272adb6
) .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, var(--jr-button-border-opacity)) !important;
  border-radius: 0;
  font-family: "Krona One", sans-serif !important;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  transform: scale(1);
  transform-origin: center;
  box-shadow: none;
  transition:
    transform var(--jr-button-grow-speed) cubic-bezier(.2,.72,.2,1),
    background-color var(--jr-button-speed) ease,
    border-color var(--jr-button-speed) ease,
    box-shadow var(--jr-button-speed) ease !important;
  will-change: transform;
}

:where(
  .jr-button,
  .elementor-element-3365506,
  .elementor-element-272adb6
) .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--jr-button-accent);
  opacity: 0;
  transition: opacity var(--jr-button-speed) ease;
  pointer-events: none;
}

:where(
  .jr-button,
  .elementor-element-3365506,
  .elementor-element-272adb6
) .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .jr-button,
    .elementor-element-3365506,
    .elementor-element-272adb6
  ) .elementor-button:hover {
    color: #fff !important;
    background: transparent !important;
    border-color: var(--jr-button-accent) !important;
    transform: scale(var(--jr-button-scale));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
  }

  :where(
    .jr-button,
    .elementor-element-3365506,
    .elementor-element-272adb6
  ) .elementor-button:hover::before {
    opacity: 1;
  }
}

:where(
  .jr-button,
  .elementor-element-3365506,
  .elementor-element-272adb6
) .elementor-button:focus-visible {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--jr-button-accent) !important;
  transform: scale(var(--jr-button-scale));
  box-shadow: 0 0 0 3px rgba(231, 208, 161, .3), 0 10px 26px rgba(0, 0, 0, .2);
  outline: none;
}

:where(
  .jr-button,
  .elementor-element-3365506,
  .elementor-element-272adb6
) .elementor-button:focus-visible::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .jr-button,
    .elementor-element-3365506,
    .elementor-element-272adb6
  ) .elementor-button,
  :where(
    .jr-button,
    .elementor-element-3365506,
    .elementor-element-272adb6
  ) .elementor-button::before {
    transition-duration: 0ms !important;
  }
}