/* ==========================================================================
   Certified Bling — collection filter UI (Phase 1)
   Underline tabs, not pills — matches the nav/account-nav language already
   established. Horizontally scrollable on narrow screens instead of
   wrapping into a cramped multi-row block. Reused as-is for 360/Classic
   (All/Chains/Pendants/Bracelets/Earrings/Rings/Watches); OG swaps in its
   own Grillz-specific term set through the same markup/CSS.
   ========================================================================== */

.cb-filters {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
	list-style: none;
	margin: 0 0 var(--cb-space-l);
	padding: 0 0 0.1rem;
	border-bottom: 1px solid var(--cb-line-soft);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.cb-section--light .cb-filters { border-bottom-color: var(--cb-line-dark); }
.cb-filters::-webkit-scrollbar { display: none; }

.cb-filters__item { flex: none; }
.cb-filters__link {
	display: inline-block;
	padding-block: 0.85rem;
	/* Suisse Int'l per the Phase 1 typography lock — filters are UI. */
	font-family: var(--cb-font-body);
	font-weight: 500;
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cb-mute);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color var(--cb-transition), border-color var(--cb-transition);
}
.cb-filters__link:hover { color: var(--cb-white); text-decoration: none; }
.cb-filters__link[aria-current="true"] { color: var(--cb-white); border-color: var(--cb-gold); }
.cb-section--light .cb-filters__link { color: var(--cb-ink-mute); }
.cb-section--light .cb-filters__link:hover { color: var(--cb-black); }
.cb-section--light .cb-filters__link[aria-current="true"] { color: var(--cb-black); border-color: var(--cb-gold); }
@media (prefers-reduced-motion: reduce) { .cb-filters__link { transition: none; } }

/* ---- Mobile filter drawer (bottom sheet, Liquid Glass) ---------------
   Used when a product-type filter set is paired with secondary refinement
   (metal/stone, etc. — configuration filters belong here, never on the
   collection-level tabs above, per the "filters are product type/style,
   not configuration" rule). */
.cb-filter-sheet {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--cb-z-nav);
	max-height: 80vh;
	overflow-y: auto;
	padding: var(--cb-space-m) var(--cb-gutter) calc(var(--cb-space-l) + env(safe-area-inset-bottom));
	transform: translateY(100%);
	transition: transform var(--cb-transition-slow);
}
.cb-filter-sheet.is-open { transform: translateY(0); }
.cb-filter-sheet__handle {
	width: 36px; height: 4px; border-radius: 999px;
	background: var(--glass-border);
	margin: 0 auto var(--cb-space-s);
}
@media (prefers-reduced-motion: reduce) { .cb-filter-sheet { transition: none; } }
@media (min-width: 768px) { .cb-filter-sheet-trigger { display: none; } }