/* ============================================================
 * io-kenos-child v1.2 — Pill nav (Phase 3 B2)
 * ------------------------------------------------------------
 * Horizontal scroll-snap pill row. Lives at the top of every
 * inventory page (and category page) to make sibling categories
 * a single tap away.
 *
 * Mobile-first: scroller can overflow horizontally and snap.
 * Desktop: pills wrap to multiple rows if there are many cats.
 * ============================================================ */

.wdz-pill-nav {
	margin: 0 0 28px;
	padding: 0;
}

.wdz-pill-nav__scroller {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0 8px;
	/* Hide scrollbar visually but keep it functional */
	scrollbar-width: thin;
	scrollbar-color: var(--wdz-primary, #6B46C1) transparent;
}

.wdz-pill-nav__scroller::-webkit-scrollbar {
	height: 4px;
}

.wdz-pill-nav__scroller::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.18);
	border-radius: 4px;
}

/* On narrow viewports, prefer single-row horizontal scroll.
 * Left-align so the scroll-snap start is at the first pill rather
 * than centered (which would make the user scroll both directions
 * to find pills). */
@media (max-width: 640px) {
	.wdz-pill-nav__scroller {
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding-bottom: 12px;
	}
}

/* ============================================================
 * Hide the IO breadcrumb on inventory pages — pill nav replaces
 * its navigational purpose. This rule only applies when
 * pill-nav.css is enqueued (inventory pages only), so other
 * pages keep their breadcrumb intact.
 * ============================================================ */
#breadcrumbs.io-entry-title {
	display: none;
}

/* ============================================================
 * Pill — chunky, friendly, niche-aware
 * ============================================================ */

.wdz-pill-nav__pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	scroll-snap-align: start;
	flex: 0 0 auto;

	padding: 10px 20px;
	border-radius: var(--wdz-radius-full, 9999px);
	background: var(--wdz-surface-alt, #F4F4F6);
	color: var(--wdz-text, #1A1A1A);
	font-family: 'Fredoka One', 'Lilita One', var(--wdz-font-heading, inherit);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.wdz-pill-nav__pill:hover,
.wdz-pill-nav__pill:focus-visible {
	background: var(--wdz-primary, #6B46C1);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

/* Active pill — solid niche-primary with accent ring */
.wdz-pill-nav__pill.is-active {
	background: var(--wdz-primary, #6B46C1);
	color: #fff;
	border-color: var(--wdz-accent, #F59E0B);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.10);
}

.wdz-pill-nav__pill.is-active:hover,
.wdz-pill-nav__pill.is-active:focus-visible {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

.wdz-pill-nav__pill:focus-visible {
	outline: 2px solid var(--wdz-accent, #F59E0B);
	outline-offset: 2px;
}