/* The rail inherits Shopmore's runtime palette and typography. */
.fshop-circles { position: relative; margin: 20px 0 28px; color: var(--sm-text, #0f172a); }
.fshop-circles__track { display: flex; gap: 12px; list-style: none; padding: 8px 6px 12px; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.fshop-circles__item { flex: 0 0 108px; min-width: 0; scroll-snap-align: start; }
.fshop-circles__link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; text-align: center; height: 100%; border-radius: 6px; }
.fshop-circles__image { width: 80px; height: 80px; box-sizing: border-box; padding: 2px; border: 1px solid var(--sm-border, #e2e8f0); border-radius: 50%; background: var(--sm-surface, #fff); transition: border-color .15s ease; }
.fshop-circles__image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fshop-circles__title { font-size: 12px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.fshop-circles__link:hover { color: var(--sm-primary, #6366f1); }
.fshop-circles__link:hover .fshop-circles__image { border-color: currentColor; }
.fshop-circles__link:focus-visible, .fshop-circles__arrow:focus-visible { outline: 2px solid var(--sm-primary, #6366f1); outline-offset: 3px; }
.fshop-circles__arrow { position: absolute; z-index: 2; top: 27px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sm-border, #e2e8f0); background: var(--sm-surface, #fff); color: inherit; box-shadow: 0 2px 10px #00000012; font: 30px/1 system-ui, sans-serif; cursor: pointer; }
.fshop-circles__arrow--prev { left: -4px; }
.fshop-circles__arrow--next { right: -4px; }
.fshop-circles__arrow[hidden] { display: none; }
.fshop-circles__arrow:disabled { opacity: 0; pointer-events: none; }
.fshop-circles__sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 575px) {
	.fshop-circles { margin: 12px 0 20px; }
	.fshop-circles__track { gap: 8px; }
	.fshop-circles__item { flex-basis: 88px; }
	.fshop-circles__image { width: 68px; height: 68px; }
	.fshop-circles__arrow { top: 21px; }
}
@media (prefers-reduced-motion: reduce) { .fshop-circles__image { transition: none; } }