/* ==========================================================================
   IPEKERP_STOREFRONT_BRAND_ARROW_SCROLL_HINT_TUNE_V1

   Final visual tune:
   - Previous -21px arrow offset looked too high.
   - Move to a middle -11px optical offset.
   - Remove the ineffective center-bottom dots.
   - Add visible "..." hints immediately beside both arrow controls.
   - Keep all brand rail geometry / hover / JS behavior unchanged.
   ========================================================================== */

@media (min-width: 1180px) {

  /* Remove the old center-bottom dots from 299_8_5. */
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__inner::after {
    content: none !important;
    display: none !important;
  }

  /*
   * Middle position between the earlier -1px and -21px attempts.
   * This keeps the arrows visually centered in the complete brand row.
   */
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow {
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;

    transform: translateY(-11px) !important;
  }

  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow:hover {
    transform: translateY(-12px) !important;
  }

  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow:focus-visible {
    transform: translateY(-11px) !important;
  }

  /* Scrollability hints: ‹  ...   brands   ...  › */
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow--prev::after,
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow--next::before {
    content: "···" !important;

    position: absolute !important;
    top: 50% !important;

    color: #9eafc3 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;

    white-space: nowrap !important;
    pointer-events: none !important;
    user-select: none !important;

    opacity: .82 !important;
  }

  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow--prev::after {
    left: calc(100% + 7px) !important;
    transform: translateY(-50%) !important;
  }

  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow--next::before {
    right: calc(100% + 7px) !important;
    transform: translateY(-50%) !important;
  }

  /*
   * Existing rail JS exposes data-disabled="true".
   * Keep the hint visible but quieter at an unavailable direction.
   */
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow[data-disabled="true"]::before,
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow[data-disabled="true"]::after {
    opacity: .26 !important;
  }
}