/* Side arrows over a rail: an overlay the size of the rail's wrapper that lets every drag / click
   through; only the two buttons catch the pointer. --sa-y (set by the component) is the centre of
   the first card's anchor (product photo, video frame…) inside the overlay; 50% until measured. */
.cc_b3eorip4_UVDxwCF1Bq .sg-sa, .cc_b3eorip4_c4NgeZyFvF .sg-sa, .cc_b3eorip4_7B4gfqytxJ .sg-sa, .cc_b3eorip4_ngaPfv6XFB .sg-sa { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cc_b3eorip4_UVDxwCF1Bq .sg-sa__btn, .cc_b3eorip4_c4NgeZyFvF .sg-sa__btn, .cc_b3eorip4_7B4gfqytxJ .sg-sa__btn, .cc_b3eorip4_ngaPfv6XFB .sg-sa__btn {
  /* half over the rail edge where the gutter allows it, never past the screen edge */
  --sa-off: calc(min(23px, var(--sg-gutter, 16px) - 4px) * -1);
  --sa-shadow: 0 10px 24px -10px rgba(10, 12, 14, 0.38);
  position: absolute;
  top: var(--sa-y, 50%);
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  pointer-events: auto;
  border-color: rgba(10, 12, 14, 0.08);
  /* same look as SgImageGrid's side arrows (.sg-ig__side) so every rail on a page matches;
     hover = the global .sg-arrow ink fill, press = its scale */
  box-shadow: var(--sa-shadow);
  transition: background var(--sg-t-fast), color var(--sg-t-fast), border-color var(--sg-t-fast),
    opacity var(--sg-t-mid) var(--sg-ease-out), visibility var(--sg-t-mid), transform var(--sg-t-fast);
}
/* keyboard focus: the theme's focus ring on top of the drop shadow, and the button stays round
   (the global `.sg-scope :focus-visible` rule would replace both) */
.cc_b3eorip4_UVDxwCF1Bq .sg-sa__btn:focus-visible, .cc_b3eorip4_c4NgeZyFvF .sg-sa__btn:focus-visible, .cc_b3eorip4_7B4gfqytxJ .sg-sa__btn:focus-visible, .cc_b3eorip4_ngaPfv6XFB .sg-sa__btn:focus-visible { outline: none; box-shadow: var(--sg-focus), var(--sa-shadow); border-radius: 50%; }
.cc_b3eorip4_UVDxwCF1Bq .sg-sa__btn--prev, .cc_b3eorip4_c4NgeZyFvF .sg-sa__btn--prev, .cc_b3eorip4_7B4gfqytxJ .sg-sa__btn--prev, .cc_b3eorip4_ngaPfv6XFB .sg-sa__btn--prev { left: var(--sa-off); }
.cc_b3eorip4_UVDxwCF1Bq .sg-sa__btn--next, .cc_b3eorip4_c4NgeZyFvF .sg-sa__btn--next, .cc_b3eorip4_7B4gfqytxJ .sg-sa__btn--next, .cc_b3eorip4_ngaPfv6XFB .sg-sa__btn--next { right: var(--sa-off); }
/* edge-to-edge (bleed) rail: no gutter to overhang into — sit just inside the screen edge */
.cc_b3eorip4_UVDxwCF1Bq .sg-container--bleed .sg-sa__btn, .cc_b3eorip4_c4NgeZyFvF .sg-container--bleed .sg-sa__btn, .cc_b3eorip4_7B4gfqytxJ .sg-container--bleed .sg-sa__btn, .cc_b3eorip4_ngaPfv6XFB .sg-container--bleed .sg-sa__btn { --sa-off: 12px; }
/* an end the rail cannot scroll to: the arrow disappears (not just fades) — clicks fall through to the card */
.cc_b3eorip4_UVDxwCF1Bq .sg-sa__btn:disabled, .cc_b3eorip4_c4NgeZyFvF .sg-sa__btn:disabled, .cc_b3eorip4_7B4gfqytxJ .sg-sa__btn:disabled, .cc_b3eorip4_ngaPfv6XFB .sg-sa__btn:disabled { opacity: 0; visibility: hidden; }
/* …except while the visitor who pressed it is still on the spot: the transparent, disabled button
   keeps catching (and dropping) their extra clicks, so they never open the card under it */
.cc_b3eorip4_UVDxwCF1Bq .sg-sa__btn.is-shield:disabled, .cc_b3eorip4_c4NgeZyFvF .sg-sa__btn.is-shield:disabled, .cc_b3eorip4_7B4gfqytxJ .sg-sa__btn.is-shield:disabled, .cc_b3eorip4_ngaPfv6XFB .sg-sa__btn.is-shield:disabled { visibility: visible; cursor: default; }

/* phones: every rail peeks its next card and swipes natively (scroll-snap); 48px buttons on
   140–170px cards would cover the product photos — no buttons there. Rails of big cards (the video
   showcase, `phone`) keep smaller ones over the peeking neighbours' edge. */
@media (max-width: 767px) {
  .cc_b3eorip4_UVDxwCF1Bq .sg-sa, .cc_b3eorip4_c4NgeZyFvF .sg-sa, .cc_b3eorip4_7B4gfqytxJ .sg-sa, .cc_b3eorip4_ngaPfv6XFB .sg-sa { display: none; }
  .cc_b3eorip4_UVDxwCF1Bq .sg-sa.sg-sa--phone, .cc_b3eorip4_c4NgeZyFvF .sg-sa.sg-sa--phone, .cc_b3eorip4_7B4gfqytxJ .sg-sa.sg-sa--phone, .cc_b3eorip4_ngaPfv6XFB .sg-sa.sg-sa--phone { display: block; }
  .cc_b3eorip4_UVDxwCF1Bq .sg-sa--phone .sg-sa__btn, .cc_b3eorip4_c4NgeZyFvF .sg-sa--phone .sg-sa__btn, .cc_b3eorip4_7B4gfqytxJ .sg-sa--phone .sg-sa__btn, .cc_b3eorip4_ngaPfv6XFB .sg-sa--phone .sg-sa__btn { width: 40px; height: 40px; }
  .cc_b3eorip4_UVDxwCF1Bq .sg-sa--phone .sg-sa__btn svg, .cc_b3eorip4_c4NgeZyFvF .sg-sa--phone .sg-sa__btn svg, .cc_b3eorip4_7B4gfqytxJ .sg-sa--phone .sg-sa__btn svg, .cc_b3eorip4_ngaPfv6XFB .sg-sa--phone .sg-sa__btn svg { width: 18px; height: 18px; }
  .cc_b3eorip4_UVDxwCF1Bq .sg-container--bleed .sg-sa--phone .sg-sa__btn, .cc_b3eorip4_c4NgeZyFvF .sg-container--bleed .sg-sa--phone .sg-sa__btn, .cc_b3eorip4_7B4gfqytxJ .sg-container--bleed .sg-sa--phone .sg-sa__btn, .cc_b3eorip4_ngaPfv6XFB .sg-container--bleed .sg-sa--phone .sg-sa__btn { --sa-off: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc_b3eorip4_UVDxwCF1Bq .sg-sa__btn, .cc_b3eorip4_c4NgeZyFvF .sg-sa__btn, .cc_b3eorip4_7B4gfqytxJ .sg-sa__btn, .cc_b3eorip4_ngaPfv6XFB .sg-sa__btn { transition: none; }
}