/* ==========================================================================
   Round prev/next arrow button (.prod-slider-nav) — the home page's product
   row sliders, and the photo arrows in the quick-view dialog and the
   catalogue lightbox.
   ========================================================================== */

/* Solid navy by default rather than a plain white circle — reads as a
   deliberate branded control against the light .section-alt background and
   white cards, not just a neutral scroll affordance. Hover inverts to the
   brand gold (the same navy/gold swap .prod's own border and .why-feat's
   top accent already use elsewhere in this page) with a bit of lift+scale
   for feedback. */
.prod-slider-nav {
  flex: none; width: 44px; height: 44px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--color-accent-2-900); color: var(--color-neutral-100);
  border: 1px solid var(--color-accent-2-900); box-shadow: var(--shadow-sm);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.prod-slider-nav:hover {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text);
  box-shadow: var(--shadow-md); transform: translateY(-3px) scale(1.05);
}
.prod-slider-nav:active { transform: translateY(-1px) scale(1); }
/* The glyphs are drawn as plain left/right chevrons — flipping both by the
   same scaleX(-1) under [dir="rtl"] turns "prev" into a right-pointer and
   "next" into a left-pointer, matching the sliders' own reversed (start =
   right) reading order in Arabic instead of pointing the wrong way. */
[dir="rtl"] .prod-slider-nav svg { transform: scaleX(-1); }