/* Shop page category nav — Instagram-style circular avatars with a small
   label underneath, horizontally scrollable on mobile. Circular thumbnails
   let visitors recognise a category by its product photo at a glance while
   keeping the strip compact, so the product grid below gets more of the
   screen on small viewports. The "Shop by category" showcase itself is
   styled by components/categories/component.css (reused as-is from the
   homepage). */

.qg-shop-chips {
	margin: 0 0 var(--qg-space-4);
}

.qg-shop-chips__track {
	display: flex;
	gap: var(--qg-space-4);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--qg-space-2);
}

.qg-shop-chips__track::-webkit-scrollbar {
	display: none;
}

.qg-shop-chips__chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 5.5rem;
	gap: 0.4rem;
	text-decoration: none;
}

.qg-shop-chips__media {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-color: var(--qg-color-paper);
	background-size: cover;
	background-position: center;
	border: 1.5px solid var(--qg-color-line);
	transition: border-color 0.2s var(--qg-ease), transform 0.2s var(--qg-ease);
}

.qg-shop-chips__media--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qg-color-muted);
}

.qg-shop-chips__media--icon .qg-icon {
	width: 1.4rem;
	height: 1.4rem;
}

.qg-shop-chips__label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--qg-color-muted);
	font-family: var(--qg-font-body);
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: color 0.2s var(--qg-ease);
}

.qg-shop-chips__chip:hover .qg-shop-chips__media {
	border-color: var(--qg-color-accent);
}

.qg-shop-chips__chip:hover .qg-shop-chips__label {
	color: var(--qg-color-ink);
}

.qg-shop-chips__chip.is-active .qg-shop-chips__media {
	border-color: var(--qg-color-ink);
}

.qg-shop-chips__chip.is-active .qg-shop-chips__label {
	color: var(--qg-color-ink);
}

.qg-shop-chips__chip--sale .qg-shop-chips__media--icon {
	color: var(--qg-color-accent);
}

.qg-shop-chips__chip--sale:hover .qg-shop-chips__media,
.qg-shop-chips__chip--sale.is-active .qg-shop-chips__media {
	border-color: var(--qg-color-accent);
}

.qg-shop-chips__chip--sale:hover .qg-shop-chips__label,
.qg-shop-chips__chip--sale.is-active .qg-shop-chips__label {
	color: var(--qg-color-accent-dark);
}

@media (max-width: 480px) {
	.qg-shop-chips__chip {
		width: 4.5rem;
	}

	.qg-shop-chips__media {
		width: 3.25rem;
		height: 3.25rem;
	}

	.qg-shop-chips__label {
		font-size: 0.62rem;
	}
}