/* === Solid button (default) =========================================== */
.custom-back-button{
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-dark);
  --btn-bg-active: var(--color-primary-dark);
  --btn-text: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  background: var(--btn-bg);
  color: var(--btn-text);
  padding: .75rem 1.25rem;
  border-radius: .75rem;
  border: 0;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: background .2s ease, transform .12s ease, box-shadow .2s ease;
  /* logical margins so it’s RTL/LTR friendly */
  margin-block: .25rem 1rem;
}

/* Hover / active */
.custom-back-button:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }
.custom-back-button:active{ background: var(--btn-bg-active); transform: translateY(0); }

/* Keyboard accessibility */
.custom-back-button:focus-visible{
  outline: 3px solid var(--color-primary-reverse);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 20%, transparent);
}

/* Prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .custom-back-button{ transition: none; }
}

/* Mobile: full-width looks nicer under titles */
@media (max-width: 640px){
  .custom-back-button{ width: 100%; }
}

/* Place nicely when inserted after the H1 by your script */
h1.product-main-title + .custom-back-button{
  /* inline-start works for RTL/LTR */
  margin-inline-start: .75rem;
}
@media (max-width: 640px){
  h1.product-main-title + .custom-back-button{
    margin-inline: 0; /* full width on small screens */
  }
}

/* Optional: small icon to indicate external site */
.custom-back-button::after{
  content: '↗';
  font-size: .9em;
  opacity: .9;
}

/* === Outline variant ================================================== */
.custom-back-button--outline{
  --btn-bg: transparent;
  --btn-text: var(--color-primary);
  background: transparent;
  color: var(--btn-text);
  border: 2px solid var(--color-primary);
}
.custom-back-button--outline:hover{
  background: var(--color-primary);
  color: #fff;
}

/* === Dark mode touch-up (if your theme toggles to dark) =============== */
.color-mode-dark .custom-back-button{
  --btn-bg: color-mix(in oklab, var(--color-primary) 85%, #000 15%);
  --btn-bg-hover: color-mix(in oklab, var(--color-primary) 95%, #000 5%);
}