[data-card-carousel], [data-card-carousel] .ap-home-pay__value {
  min-width:0;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}
[data-card-carousel] [data-carousel-track] {
  position:relative;
  display:grid;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  grid-template-columns:none;
  grid-template-rows:auto;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 36px) / 3);
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:#a1a1aa transparent;
}
[data-ap-pay-section] .ap-home-pay__value {
  /* Keep controls inside the content column even when the track breaks out. */
  grid-template-columns:minmax(0, 1fr);
}
[data-card-carousel] [data-carousel-track] > article {
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  align-self:stretch;
  scroll-snap-align:start;
  overflow-wrap:anywhere;
}
[data-ap-pay-section] [data-carousel-track],
[data-ap-wall-section] [data-carousel-track] {
  grid-auto-columns:calc((100% - 32px) / 3);
  gap:16px;
}
[data-ap-pay-section] [data-carousel-track] > .ap-pay-card,
[data-ap-wall-section] [data-carousel-track] > .ap-wall-card {
  min-height:350px;
}
[data-ap-wall-section] #ap-wall-track > .ap-wall-card {
  padding:32px;
}
/* Let the shadows fade inside the scroll viewport before they reach its
   clipping edge. Matching negative margins preserve the cards' positions
   and the space between the row, heading, and controls. */
#ap-pay-track,
#ap-wall-track {
  padding-block:40px 56px;
  padding-inline-end:20px;
  margin-block:-40px -56px;
}
.ap-carousel-controls { position:relative; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
[data-ap-wall-section] .ap-carousel-controls { margin-top:24px; }
.ap-carousel-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid #a1a1aa;
  border-radius:50%;
  background:transparent;
  color:#71717a;
  cursor:pointer;
}
.ap-carousel-arrow:disabled { opacity:.35; cursor:default; }
.ap-carousel-arrow:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.ap-carousel-dots {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:64px;
  min-height:36px;
  padding:0 4px;
}
.ap-carousel-dot {
  width:18px;
  height:7px;
  flex:0 0 18px;
  padding:0;
  border:0;
  border-radius:4px;
  background:#d4d4d8;
  cursor:pointer;
}
.ap-carousel-dot.is-active,
.ap-carousel-dot:hover { background:#71717a; }
.ap-carousel-dot:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
body.dark-mode .ap-carousel-arrow { color:#d4d4d8; border-color:#a1a1aa; }
body.dark-mode .ap-carousel-dot { background:#71717a; }
body.dark-mode .ap-carousel-dot.is-active,
body.dark-mode .ap-carousel-dot:hover { background:#a1a1aa; }