/* ==========================================================================
   IPEKERP_STOREFRONT_BRAND_PAGINATION_DOTS_V1

   Final scroll affordance:
   - Keep the approved -11px arrow position.
   - Remove the temporary side "..." hints.
   - Add true dynamic pagination dots at the CENTER-BOTTOM of the brand rail.
   - Active page dot grows; current page follows horizontal scroll.
   - Dot count is created by JS from the actual number of scrollable pages.
   ========================================================================== */

@media (min-width: 1180px) {

  body .sf4-brand-rail[data-brand-rail="v2"] {
    position: relative !important;
  }

  /* Keep the arrow position the user approved. */
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__arrow {
    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;
  }

  /* Remove 299_8_7's side dots. */
  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: none !important;
    display: none !important;
  }

  /* Also keep the old center-bottom pseudo dots disabled. */
  body .sf4-brand-rail[data-brand-rail="v2"]
  .sf4-brand-rail__inner::after {
    content: none !important;
    display: none !important;
  }

  .sf4-brand-pagination {
    position: absolute !important;
    z-index: 8 !important;

    left: 50% !important;
    bottom: 2px !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    min-height: 16px !important;

    padding: 0 7px !important;

    pointer-events: auto !important;
  }

  .sf4-brand-pagination[hidden] {
    display: none !important;
  }

  .sf4-brand-pagination__dot {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 16px !important;
    height: 16px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;

    cursor: pointer !important;
    outline: none !important;
  }

  .sf4-brand-pagination__dot::before {
    content: "" !important;

    width: 6px !important;
    height: 6px !important;

    display: block !important;

    border-radius: 999px !important;
    background: #bdc9d7 !important;

    box-shadow: none !important;

    transform: scale(1) !important;

    transition:
      width 150ms ease,
      height 150ms ease,
      background-color 150ms ease,
      box-shadow 150ms ease,
      transform 150ms ease !important;
  }

  .sf4-brand-pagination__dot:hover::before,
  .sf4-brand-pagination__dot:focus-visible::before {
    background: #7fa8d2 !important;
    transform: scale(1.12) !important;
  }

  .sf4-brand-pagination__dot[data-active="true"]::before {
    width: 10px !important;
    height: 10px !important;

    background: #0868d7 !important;

    box-shadow:
      0 0 0 3px rgba(8, 104, 215, .08) !important;

    transform: scale(1) !important;
  }
}

@media (max-width: 1179px) {
  .sf4-brand-pagination {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf4-brand-pagination__dot::before {
    transition-duration: .001ms !important;
  }
}