/*
 * Mashin Irani — Product Rail Slider (mobile fix).
 * Adds tap arrows for .carousel > .rail on mobile + a grabbing cursor while mouse-dragging.
 * --mi-* tokens with hex fallbacks.
 */

.rail.is-grabbing { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }

.mi-railnav { display: none; }

@media (max-width: 900px) {
  .carousel { position: relative; }
  .mi-railnav {
    position: absolute; top: 40%; transform: translateY(-50%);
    z-index: 4; width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--mi-radius-pill, 999px);
    background: var(--mi-color-bg-elevated, #fff);
    border: 1px solid var(--mi-color-border, #d9cbc2);
    box-shadow: var(--mi-shadow-e3, 0 8px 24px rgba(16, 33, 52, .1));
    color: var(--mi-color-navy-900, #102134);
    cursor: pointer;
    transition: opacity var(--mi-motion-duration-200, 200ms), background-color var(--mi-motion-duration-200, 200ms);
  }
  .mi-railnav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .mi-railnav--prev { inset-inline-end: -4px; }
  .mi-railnav--next { inset-inline-start: -4px; }
  .mi-railnav:disabled { opacity: 0; pointer-events: none; }
}