/* ==========================================================================
   Меню категорій [category_menu] (inc/woocommerce/category-menu.php, assets/js/category-menu.js)
   Без JS — список батьківських категорій; з JS (is-js) — слайди: активний на місці,
   попередні (шлях назад) ліворуч, решта праворуч.
   ========================================================================== */

.category-menu{
	--cm-icon:     20px;                     /* ← ПРОЄКТ розмір іконки категорії */
	--cm-icon-color: var(--theme-accent);    /* ← ПРОЄКТ колір SVG-іконок з fill="currentColor" */
	--cm-text:     var(--theme-text);
	--cm-muted:    var(--theme-text-muted);
	--cm-hover:    var(--theme-accent-soft); /* фон рядка при наведенні та поточної категорії */
	--cm-accent:   var(--theme-accent);
	--cm-radius:   var(--theme-radius);
	--cm-speed:    .3s;

	position:relative;
	font-family:var(--theme-font), sans-serif;
	color:var(--cm-text);
}

/* ---------- слайди ---------- */
.category-menu:not(.is-js) .category-menu__panel:not([data-parent="-1"]){display:none}

.category-menu.is-js{overflow:hidden}
.category-menu.is-js .category-menu__panel{
	position:absolute;top:0;left:0;right:0;
	transform:translateX(100%);opacity:0;visibility:hidden;
	transition:transform var(--cm-speed) ease, opacity var(--cm-speed) ease, visibility 0s var(--cm-speed);
}
.category-menu.is-js .category-menu__panel.is-before{transform:translateX(-30%)}
.category-menu.is-js .category-menu__panel.is-active{
	position:relative; /* активний слайд задає висоту меню */
	transform:none;opacity:1;visibility:visible;
	transition:transform var(--cm-speed) ease, opacity var(--cm-speed) ease, visibility 0s;
}
.category-menu.is-instant,
.category-menu.is-instant .category-menu__panel{transition:none !important}

/* ---------- список ---------- */
.category-menu .category-menu__list{margin:0;padding:0;list-style:none}
.category-menu .category-menu__item{margin:0;padding:0}
.category-menu .category-menu__item::before,
.category-menu .category-menu__item::marker{content:none}

.category-menu .category-menu__link,
.category-menu .category-menu__title{
	display:flex;align-items:center;gap:12px;
	padding:12px 14px;
	border-radius:var(--cm-radius);
	color:var(--cm-text);
	font-size:15px;font-weight:500;line-height:1.3;
	text-decoration:none;
	transition:background-color .2s ease, color .2s ease;
}
.category-menu .category-menu__link:hover,
.category-menu .category-menu__link:focus-visible,
.category-menu .category-menu__title:hover,
.category-menu .category-menu__title:focus-visible,
.category-menu .is-current > .category-menu__link,
.category-menu .category-menu__title.is-current{background:var(--cm-hover);color:var(--cm-text)}
.category-menu .category-menu__link:focus-visible,
.category-menu .category-menu__title:focus-visible,
.category-menu .category-menu__back:focus-visible{outline:2px solid var(--cm-accent);outline-offset:-2px}

.category-menu .category-menu__name{flex:1 1 auto;min-width:0}
.category-menu .category-menu__count{color:var(--cm-muted);font-size:13px;font-weight:400}

.category-menu .category-menu__icon{
	display:inline-flex;flex:0 0 var(--cm-icon);width:var(--cm-icon);height:var(--cm-icon);
	color:var(--cm-icon-color);
}
.category-menu .category-menu__icon svg,
.category-menu .category-menu__icon img{display:block;width:100%;height:100%;object-fit:contain}

/* у списку, де в когось є іконка, рядки без іконки отримують порожнє місце — назви в одну лінію */
.category-menu .category-menu__list:has(.category-menu__icon) .category-menu__link:not(:has(.category-menu__icon))::before{
	content:'';flex:0 0 var(--cm-icon);width:var(--cm-icon);
}

.category-menu .category-menu__chevron{flex:0 0 16px;width:16px;height:16px;color:var(--cm-muted)}

/* «Усі товари» — першим рядком кореня, відділений від категорій */
.category-menu .category-menu__item--shop{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--theme-line)}

/* ---------- шапка слайду ---------- */
/* Стилі кнопок Kit (рамка, padding, заливка на :hover / :focus) сюди не потрапляють — усі стани задані явно */
.category-menu .category-menu__back,
.category-menu .category-menu__back:hover,
.category-menu .category-menu__back:focus,
.category-menu .category-menu__back:active{
	display:flex;align-items:center;gap:6px;
	width:100%;min-height:0;margin:0 0 4px;padding:10px 14px;
	border:0 !important;border-radius:var(--cm-radius);background:none;box-shadow:none;transform:none;
	color:var(--cm-accent);
	font:500 14px/1.3 var(--theme-font), sans-serif;text-align:left;text-transform:none;letter-spacing:0;
	cursor:pointer;
}
.category-menu .category-menu__back:hover,
.category-menu .category-menu__back:focus-visible{background:var(--cm-hover)}
.category-menu .category-menu__back svg{flex:0 0 16px;width:16px;height:16px}

.category-menu .category-menu__title{
	margin-bottom:6px;
	font-size:16px;font-weight:600;
	border-bottom:1px solid var(--theme-line);border-radius:var(--cm-radius) var(--cm-radius) 0 0;
}
.category-menu .category-menu__all{flex:0 0 auto;color:var(--cm-accent);font-size:13px;font-weight:500}

@media (prefers-reduced-motion:reduce){
	.category-menu{--cm-speed:0s}
}