/* .ap-store-carousel — horizontal scroll-snap row of circular store badges. */

.ap-store-carousel {
  position: relative;
}

.ap-store-carousel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ap-space-sm);
  margin-bottom: var(--ap-space-lg);
}

.ap-store-carousel__heading-title {
  display: flex;
  align-items: center;
  gap: var(--ap-space-sm);
}

.ap-store-carousel__heading i {
  color: var(--ap-secondary);
  font-size: var(--ap-fs-h3);
}

/* .ap-store-carousel__heading above already carries the margin-bottom —
   without this, the h2's own base margin-bottom (03-base.css) would stack
   on top of it via the nested flex box. */
.ap-store-carousel__heading-title h2 {
  margin-bottom: 0;
}

.ap-store-carousel__track {
  display: flex;
  gap: var(--ap-space-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-block: var(--ap-space-sm) var(--ap-space-md);
  padding-inline: var(--ap-space-xs);
  scrollbar-width: none;
}

.ap-store-carousel__track::-webkit-scrollbar {
  display: none;
}

.ap-store-carousel__item {
  flex: 0 0 auto;
  width: 140px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ap-space-sm);
  text-align: center;
}

.ap-store-carousel__badge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: var(--ap-shadow-md);
  transition: transform var(--ap-transition);
}

.ap-store-carousel__item:hover .ap-store-carousel__badge {
  transform: translateY(-4px);
}

.ap-store-carousel__badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ap-logo-bg);
}

/* Warm/orange-family rotation only — every badge stays on-theme instead of
   cycling through unrelated hues (blue, teal, indigo, olive, ...). */
.ap-store-carousel__badge--c0 { background: var(--ap-primary); }
.ap-store-carousel__badge--c1 { background: var(--ap-secondary); }
.ap-store-carousel__badge--c2 { background: var(--ap-accent); }
.ap-store-carousel__badge--c3 { background: var(--ap-rotate-c3); }
.ap-store-carousel__badge--c4 { background: var(--ap-rotate-c4); }
.ap-store-carousel__badge--c5 { background: var(--ap-rotate-c5); }
.ap-store-carousel__badge--c6 { background: var(--ap-rotate-c6); }
.ap-store-carousel__badge--c7 { background: var(--ap-surface); border: 1px solid var(--ap-border); }

.ap-store-carousel__name {
  font-weight: 700;
  font-size: var(--ap-fs-sm);
  color: var(--ap-text);
}

.ap-store-carousel__count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ap-text-muted);
}

.ap-store-carousel__nav {
  display: none;
  position: absolute;
  top: 52px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  color: var(--ap-text);
  box-shadow: var(--ap-shadow-sm);
  z-index: 10;
}

@media (min-width: 768px) {
  .ap-store-carousel__nav {
    display: inline-flex;
  }
}

.ap-store-carousel__nav:hover {
  border-color: var(--ap-primary);
  color: var(--ap-primary);
}

.ap-store-carousel__nav:focus-visible {
  outline: none;
  box-shadow: var(--ap-focus-ring);
}

.ap-store-carousel__nav--prev { left: -22px; }
.ap-store-carousel__nav--next { right: -22px; }

.ap-store-carousel__nav[disabled] {
  opacity: var(--ap-disabled-opacity);
  cursor: default;
}