/* .ap-logo-badge — round store-logo treatment used everywhere a store logo
   appears (store header, related/competitor/trending stores, coupon cards,
   search results). Same recipe as the homepage Standout Stores carousel:
   a colored ring, deterministic per store, framing a circular white-backed
   logo image. */

.ap-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 4px;
  flex-shrink: 0;
  box-shadow: var(--ap-shadow-sm);
}

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

.ap-logo-badge--xs { width: 40px; height: 40px; padding: 2px; }
.ap-logo-badge--sm { width: 56px; height: 56px; padding: 3px; }
.ap-logo-badge--md { width: 80px; height: 80px; padding: 4px; }
.ap-logo-badge--lg { width: 120px; height: 120px; padding: 6px; }

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