/* Six round dots: three at the back, two in the middle, one at the tip.
   Rotate the same SVG for direction; move the whole icon only on hover. */
.print-arrow {
  --arrow-size: 22px;
  --arrow-angle: 0deg;
  --arrow-distance: 2.5px;
  --arrow-x: var(--arrow-distance);
  --arrow-y: 0px;
  display: inline-block;
  position: relative;
  flex: none;
  width: var(--arrow-size);
  height: 12px;
  color: var(--ink);
  vertical-align: middle;
  pointer-events: none;
  transform: translate(0, 0);
  transition: transform 200ms ease;
}
.print-arrow--small { --arrow-size: 20px; --arrow-distance: 2px; }
.print-arrow--large { --arrow-size: 24px; }
.print-arrow--left { --arrow-angle: 180deg; --arrow-x: calc(-1 * var(--arrow-distance)); }
.print-arrow--up {
  --arrow-angle: -90deg;
  --arrow-x: 0px;
  --arrow-y: calc(-1 * var(--arrow-distance));
  width: 12px;
}
.print-arrow--down {
  --arrow-angle: 90deg;
  --arrow-x: 0px;
  --arrow-y: var(--arrow-distance);
  width: 12px;
}
.print-arrow svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--arrow-size);
  height: var(--arrow-size);
  overflow: visible;
  fill: currentColor;
  transform: translate(-50%, -50%) rotate(var(--arrow-angle));
}
/* White dots keep the small arrow legible on the existing blue BUY button. */
.purchase-button .print-arrow { color: var(--paper); }
.scroll-hint.print-arrow-control { display: inline-flex; align-items: center; gap: 10px; }
@media (hover: hover) {
  .print-arrow-control:not(.is-disabled):not(:disabled):hover .print-arrow {
    transform: translate(var(--arrow-x), var(--arrow-y));
  }
}
/* Exclude arrow controls from the site's generic 1px button press shift. */
button.print-arrow-control:active { transform: none; }
/* Focus keeps the existing outline. Clicking adds no arrow motion. */
@media (prefers-reduced-motion: reduce) {
  .print-arrow-control .print-arrow { transition: none; transform: none !important; }
}
.reduce-motion .print-arrow-control .print-arrow {
  transition: none;
  transform: none !important;
}