.mp-tools { position: absolute; inset: 0 0 auto; height: 116px; display: flex; align-items: center; z-index: 2; }
.mp-tools__viewport { width: calc(100% - 64px); max-width: 1480px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; outline-offset: 4px; }
.mp-tools__viewport::-webkit-scrollbar { display: none; }
.mp-tools__viewport:focus-visible { outline: 2px solid #27b6bc; }
.mp-tools__track, .mp-tools__group { display: flex; align-items: center; gap: 28px; width: max-content; }
.mp-tools__group { margin: 0; padding: 0; list-style: none; flex-shrink: 0; }
.mp-tools__item { display: flex; align-items: center; gap: 12px; width: 196px; min-height: 76px; flex-shrink: 0; }
.mp-tools__icon { display: block; width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.mp-tools__copy { min-width: 0; }
.mp-tools__name { display: block; color: #101d32; font-size: 18px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.mp-tools__type { display: block; margin-top: 4px; color: #686973; font-size: 12px; line-height: 1.4; }
.mp-tools--ready .mp-tools__track { animation: mp-tools-scroll var(--mp-tools-duration, 150s) linear infinite; animation-play-state: paused; }
.mp-tools--playing .mp-tools__track { animation-play-state: running; }
.mp-tools--manual .mp-tools__track { animation: none; transform: none; }
.mp-tools--manual .mp-tools__group[aria-hidden="true"] { display: none; }
@keyframes mp-tools-scroll { to { transform: translateX(calc(-1 * var(--mp-tools-distance))); } }
@media (max-width: 575px) {
 .mp-tools { height: 100px; }
 .mp-tools__viewport { width: calc(100% - 32px); }
 .mp-tools__track, .mp-tools__group { gap: 20px; }
 .mp-tools__item { width: 172px; gap: 10px; }
 .mp-tools__name { font-size: 16px; }
 .mp-tools__type { font-size: 11px; }
 .mp-tools__icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
 .mp-tools--ready .mp-tools__track { animation: none; transform: none; }
 .mp-tools__group[aria-hidden="true"] { display: none; }
}

/* Widen the existing white wave without narrowing the product viewport. */
@media (min-width: 1200px) {
 /* The source wave's transparent center is 96px of its 1132px height. */
 .seller-two.mp-tools-section {
  --mp-tools-band-height: 120px;
  background-size: 152% calc(var(--mp-tools-band-height) * 1132 / 96);
  background-position: center top;
  padding-top: calc(var(--mp-tools-band-height) + 48px);
 }
 .seller-two.mp-tools-section > .mp-tools { height: var(--mp-tools-band-height); }
 .seller-two.mp-tools-section .mp-tools__viewport { width: calc(100% - 96px); }
}
@media (max-width: 1199px) {
 .seller-two.mp-tools-section > .mp-tools { background-color: #fff; }
}
