/* Shared return control: storefront, account pages and administration. */
:root .back-button {
  --back-background: #ffdaaa;
  --back-border: #df7900;
  --back-ink: #194d20;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-width: 38px;
  min-height: 38px;
  padding: 8px 12px;
  border: 2px solid var(--back-border);
  border-radius: 12px;
  background: var(--back-background);
  color: var(--back-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(157, 76, 0, .12);
  transition: none;
}
:root .back-button > :is(i, .back-button__icon) { flex: 0 0 auto; }
:root .back-button:visited { color: var(--back-ink); }
:root .back-button:hover { background: #ffcb85; border-color: #c96300; color: var(--back-ink); }
:root .back-button:focus-visible { outline: 3px solid var(--back-ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
:root .back-button:active { background: #ffc374; box-shadow: none; }

/* Keep the larger touch area clear of the sign-in logo. */
.auth-card:has(> .back-button) { padding-top: 76px; }

@media (max-width: 767px), (pointer: coarse) {
  :root .back-button { min-width: 44px; min-height: 44px; }
  .registration-home.back-button { top: 16px; left: 24px; }
  .cart-store-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  :root .back-button { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
  :root .back-button:focus-visible > :is(i, .back-button__icon) { animation: back-arrow-hop 300ms ease-out; }
  @media (hover: hover) and (pointer: fine) {
    :root .back-button:hover > :is(i, .back-button__icon) { animation: back-arrow-hop 300ms ease-out; }
  }
  @keyframes back-arrow-hop {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-2px); }
    75% { transform: translateY(1px); }
  }
}