@media (max-width: 767.98px) {
  :is(.product__container, .quickview) .product__thumbnails { --abf-tg: .5rem; position: relative; }
  :is(.product__container, .quickview) .product__thumbnails-list {
    display: flex; gap: var(--abf-tg); margin: 0; padding: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  :is(.product__container, .quickview) .product__thumbnails-list::-webkit-scrollbar { display: none; }
  :is(.product__container, .quickview) .product__thumbnails-list > * { flex: 0 0 calc((100% - 3 * var(--abf-tg)) / 4); min-width: 0; }
  :is(.product__container, .quickview) .product__thumbnails-list:has(> :nth-child(5):last-child) > * { flex-basis: calc((100% - 4 * var(--abf-tg)) / 5); }
  :is(.product__container, .quickview) .product__thumbnails-list:has(> :nth-child(6)) > * { flex-basis: calc((100% - 4 * var(--abf-tg)) / 4.5); }
:is(.product__container, .quickview) .abf-thumbs--right .product__thumbnails-list {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  :is(.product__container, .quickview) .abf-thumbs--left .product__thumbnails-list {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  }
  :is(.product__container, .quickview) .abf-thumbs--left.abf-thumbs--right .product__thumbnails-list {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  }
.abf-thumbs-arrow {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%;
    background: #fff; color: #222; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); cursor: pointer;
  }
  .abf-thumbs-arrow[hidden] { display: none; }
  .abf-thumbs-arrow--next { right: .25rem; }
  .abf-thumbs-arrow--prev { left: .25rem; }
  .abf-thumbs-arrow svg { width: 1.25rem; height: 1.25rem; }
.abf-gallery-count {
    position: absolute; left: .5rem; bottom: .5rem; z-index: 10;
    padding: .125rem .5rem; border-radius: 1rem; background: rgba(0, 0, 0, .6); color: #fff;
    font-size: .8125rem; line-height: 1.5; font-variant-numeric: tabular-nums; pointer-events: none;
  }
}
@media (min-width: 768px) {
  .abf-thumbs-arrow, .abf-gallery-count { display: none; }
}