/**
 * Category Nav — hierarchical product_cat sidebar.
 *
 * Every value rides a theme token with a literal fallback, because this file
 * ships byte-identical to sites with different palettes and faces. Type is on
 * --ly-text-body (the UI/sans face) rather than --ly-text-heading: the display
 * face is a serif on some sites, which is wrong for chrome.
 */

.ly-catnav {
	font-family: var(--ly-text-body, system-ui, sans-serif);
	color: var(--ly-color-text, #2b2b2b);
}

.ly-catnav--placeholder {
	padding: 16px;
	border: 1px dashed var(--ly-color-border, #ddd);
	border-radius: var(--ly-radius-sm, 4px);
	color: var(--ly-color-text-muted, #888);
	font-size: 0.875rem;
}

.ly-catnav__title {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: var(--ly-font-size-sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ly-color-text, #2b2b2b);
}

/* ---- lists ---- */

.ly-catnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ly-catnav__list--sub {
	/* Indent marks hierarchy; the hairline makes the branch legible. */
	margin: 2px 0 2px 8px;
	padding-left: 12px;
	border-left: 1px solid var(--ly-color-border, #e6e6e6);
}

/* ---- row: link + toggle ---- */

.ly-catnav__row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ly-catnav__link {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 0;
	text-decoration: none;
	color: inherit;
	font-size: var(--ly-font-size-sm, 0.9375rem);
	line-height: 1.35;
	transition: color 0.15s ease;
}

.ly-catnav__link:hover,
.ly-catnav__link:focus-visible {
	color: var(--ly-color-primary, #53225e);
}

.ly-catnav__link:focus-visible {
	outline: 2px solid var(--ly-color-focus-ring, currentColor);
	outline-offset: 2px;
	border-radius: 2px;
}

.ly-catnav__count {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--ly-color-text-muted, #9a9a9a);
	font-variant-numeric: tabular-nums;
}

/* Current category: the page you're on. Ancestors get weight but not colour,
   so the current item stays the single strongest mark in the tree. */
.ly-catnav__item.is-current > .ly-catnav__row > .ly-catnav__link {
	font-weight: 700;
	color: var(--ly-color-primary, #53225e);
}

.ly-catnav__item.is-ancestor > .ly-catnav__row > .ly-catnav__link {
	font-weight: 600;
}

/* ---- collapse toggle ---- */

.ly-catnav__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ly-color-text-muted, #9a9a9a);
	cursor: pointer;
	border-radius: var(--ly-radius-sm, 4px);
	transition: transform 0.18s ease, color 0.15s ease;
}

.ly-catnav__toggle:hover {
	color: var(--ly-color-primary, #53225e);
}

.ly-catnav__toggle:focus-visible {
	outline: 2px solid var(--ly-color-focus-ring, currentColor);
	outline-offset: 1px;
}

.ly-catnav__item.is-open > .ly-catnav__row > .ly-catnav__toggle {
	transform: rotate(180deg);
}

/* ---- collapsed state ----
   Only applies when the widget opted into collapsing. Without the modifier the
   whole tree renders open, which is also the no-JS end state.
   NOTE: this hides sub-lists visually only — they remain in the HTML so the
   internal links stay crawlable. Do not swap this for conditional rendering. */
.ly-catnav--collapsible .ly-catnav__item--parent > .ly-catnav__list--sub {
	display: none;
}

.ly-catnav--collapsible .ly-catnav__item--parent.is-open > .ly-catnav__list--sub {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.ly-catnav__toggle,
	.ly-catnav__link {
		transition: none;
	}
}

/* Storefront: immunity from the Elementor kit a/button bleed (crimson links +
   red toggle circles). Double-class (0,2,0) beats `.elementor-kit-N a|button`
   (0,1,1) and restores the widget's intended dark-theme colours. The current
   item's own rule is already specific enough to keep its crimson mark. */
.ly-catnav .ly-catnav__link { color: #DCC6CC; }
.ly-catnav .ly-catnav__link:hover,
.ly-catnav .ly-catnav__link:focus-visible { color: #F5EDE7; }
.ly-catnav__toggle.ly-catnav__toggle { background: transparent; color: #A98D96; box-shadow: none; }
.ly-catnav__toggle.ly-catnav__toggle:hover { background: rgba(245, 237, 231, .07); color: #F5EDE7; }