/* Shop circles */
.tt.tt-circles { padding: clamp(36px, 4vw, 56px) 0 0; }
.tt.tt-circles .tt-h2 { font-size: var(--tt-fs-h2); margin-bottom: 20px; }
.tt .tt-circles__list { display: grid; grid-template-columns: repeat(var(--tt-n, 6), minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.tt .tt-circles__item { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--tt-ink); }
.tt .tt-circles__img { position: relative; display: block; width: 100%; max-width: 160px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background-color: var(--tt-mist); transition: box-shadow .2s; }
/* Packshots are on the same #f2f2f2 as the circle, so the photo's square edge never shows. */
.tt .tt-circles__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s var(--tt-ease); }
.tt a.tt-circles__item:hover .tt-circles__img, .tt a.tt-circles__item:focus-visible .tt-circles__img { box-shadow: 0 0 0 2px var(--tt-ink); }
.tt a.tt-circles__item:hover .tt-circles__img img { transform: scale(1.05); }
.tt .tt-circles__label { font-size: 14px; font-weight: 700; text-align: center; line-height: 1.3; }
@media (max-width: 900px) {
	.tt .tt-circles__list { display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--tt-pad) * -1); padding-inline: var(--tt-pad); }
	.tt .tt-circles__list::-webkit-scrollbar { display: none; }
	/* three full circles and a clear peek of the fourth */
	.tt .tt-circles__list { gap: 12px; }
	.tt .tt-circles__list li { flex: none; width: calc((100vw - var(--tt-pad) - 36px) / 3.5); }
	.tt .tt-circles__label { font-size: 13px; }
}