/* ==========================================================================
   [menu_cats] / [menu_cats_mobile] / [menu_subcats] / [menu_cats_cards]
   Кольори — лише через токени з tokens.css.
   ========================================================================== */

/* --- [menu_cats] --------------------------------------------------------- */
.menu-cats{
	--mc-fg:        var(--theme-text);
	--mc-bg:        var(--theme-light);
	--mc-fg-hover:  var(--theme-light);
	--mc-bg-active: var(--theme-gradient);
	--mc-icon:28px;
	--mc-edge:0px;    /* повітря по краях при скролі */
	--mc-cols:12;     /* скільки плиток вміщається у видиму частину */
	--mc-gap:4px;
	display:flex;
	margin:0;padding:0;list-style:none;
	flex-wrap:nowrap;
	overflow-x:auto;overflow-y:hidden;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;
	scroll-snap-type:x proximity;
	overscroll-behavior-x:contain;
	gap:var(--mc-gap);
	margin-inline:calc(var(--mc-edge) * -1);
	padding-inline:var(--mc-edge);
	scroll-padding-inline:var(--mc-edge);
}
.menu-cats::-webkit-scrollbar{display:none}
.menu-cats--wrap{
	flex-wrap:wrap;overflow:visible;
	scroll-snap-type:none;
	margin-inline:0;padding-inline:0;
}
.menu-cats__item{
	margin:0;padding:0;scroll-snap-align:start;
	flex:0 0 calc( ( 100% - ( var(--mc-cols) - 1 ) * var(--mc-gap) ) / var(--mc-cols) );
	min-width:0;
}
.menu-cats__item::before,
.menu-cats__item::marker{display:none;content:none}
.menu-cats__link{
	display:flex;align-items:center;justify-content:center;
	flex-direction:column;gap:.6em;
	width:100%;
	min-height:94px;
	padding:14px 10px;
	border-radius:var(--theme-radius);
	background-color:var(--mc-bg);
	color:var(--mc-fg);
	text-decoration:none;text-align:center;
	overflow-wrap:break-word;
	transition:background-color .3s ease,color .3s ease;
	font-family:var(--theme-font-secondary), sans-serif;
	font-size:11px;
	font-weight:600;
	line-height:1;
}
.menu-cats__link:hover,
.menu-cats__link:focus,
.menu-cats__link:focus-visible,
.menu-cats__link--active{
	background-image:var(--mc-bg-active);
	color:var(--mc-fg-hover);
}
.menu-cats__icon{
	display:block;flex:0 0 auto;
	width:var(--mc-icon);height:var(--mc-icon);
	object-fit:contain;max-width:none;
}
.menu-cats__icon--mask{
	background-color:currentColor;
	-webkit-mask:var(--mc-icon-url) center/contain no-repeat;
	mask:var(--mc-icon-url) center/contain no-repeat;
}
.menu-cats__icon--empty{background-color:currentColor;opacity:.25}
.menu-cats__name{display:block}
.menu-cats__count{font-size:.8em;opacity:.6}

/* іконка зліва (пігулка) */
.menu-cats--row .menu-cats__item{flex:0 0 auto}
.menu-cats--row .menu-cats__link{
	flex-direction:row;justify-content:flex-start;
	width:auto;min-height:0;
	gap:.5em;padding:9px 14px;
	border-radius:var(--theme-radius);
	text-align:left;white-space:nowrap;
}

/* мобілка: іконка зліва, виїзд на всю ширину */
@media (max-width:781px){
	.menu-cats{--mc-icon:24px;--mc-edge:16px;--mc-gap:8px}
	.menu-cats .menu-cats__item{flex:0 0 auto}
	.menu-cats .menu-cats__link{
		flex-direction:row;justify-content:flex-start;
		width:auto;min-height:0;
		gap:.5em;padding:8px 13px;
		border-radius:var(--theme-radius);
		text-align:left;white-space:nowrap;
	}
}

/* [menu_cats_mobile] — сітка карток, іконка зверху (після медіа-запиту навмисно) */
.menu-cats--grid{
	--mc-icon:24px;--mc-gap:8px;--mc-edge:0px;
	display:grid;
	grid-template-columns:repeat(var(--mc-cols), minmax(0, 1fr));
	gap:var(--mc-gap);
	overflow:visible;
	scroll-snap-type:none;
	margin-inline:0;padding-inline:0;
}
.menu-cats--grid .menu-cats__item{flex:none;width:auto}
.menu-cats--grid .menu-cats__link{
	flex-direction:column;justify-content:center;
	width:100%;min-height:0;height:100%;
	gap:.6em;padding:14px 8px;
	text-align:center;white-space:normal;
}

/* --- [menu_subcats] ------------------------------------------------------ */
.menu-subcats{
	--sc-fg:        var(--theme-text);
	--sc-bg:        var(--theme-light);
	--sc-fg-active: var(--theme-light);
	--sc-bg-active: var(--theme-gradient);
	--sc-gap:8px;
	--sc-edge:0px;
	display:flex;flex-wrap:nowrap;
	margin:0;padding:0;list-style:none;
	gap:var(--sc-gap);
	overflow-x:auto;overflow-y:hidden;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;
	scroll-snap-type:x proximity;
	overscroll-behavior-x:contain;
	margin-inline:calc(var(--sc-edge) * -1);
	padding-inline:var(--sc-edge);
	scroll-padding-inline:var(--sc-edge);
}
.menu-subcats::-webkit-scrollbar{display:none}
.menu-subcats--wrap{
	flex-wrap:wrap;overflow:visible;
	scroll-snap-type:none;
	margin-inline:0;padding-inline:0;
}
.menu-subcats__item{margin:0;padding:0;flex:0 0 auto;scroll-snap-align:start}
.menu-subcats__item::before,
.menu-subcats__item::marker{display:none;content:none}
.menu-subcats__link{
	display:block;
	padding:8px 14px;
	border-radius:var(--theme-radius);
	background-color:var(--sc-bg);
	color:var(--sc-fg);
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .3s ease,color .3s ease;
}
.menu-subcats__link:hover,
.menu-subcats__link:focus,
.menu-subcats__link:focus-visible,
.menu-subcats__link--active{
	background-image:var(--sc-bg-active);
	color:var(--sc-fg-active);
}
.menu-subcats__count{opacity:.6}
@media (max-width:781px){
	.menu-subcats{--sc-edge:16px}
}

/* --- [menu_cats_cards] --------------------------------------------------- */
.menu-cards{
	--mcd-label-bg: var(--theme-light);
	--mcd-label-fg: var(--theme-text);
	--mcd-img-bg:   #eceae6;
	--mcd-cols:6;
	--mcd-cols-mobile:2;
	--mcd-gap:10px;
	--mcd-h:140px;
	--mcd-h-mobile:120px;
	display:grid;
	grid-template-columns:repeat(var(--mcd-cols), minmax(0, 1fr));
	gap:var(--mcd-gap);
	margin:0;padding:0;list-style:none;
}
.menu-cards__item{margin:0;padding:0;min-width:0}
.menu-cards__item::before,
.menu-cards__item::marker{display:none;content:none}
.menu-cards .menu-cards__link{
	position:relative;display:block;
	overflow:hidden;
	border-radius:var(--theme-radius-lg);
	background-color:var(--mcd-img-bg);
	text-decoration:none;
	box-shadow:var(--theme-shadow);
}
/* !important, бо теми глобально задають img{height:auto} */
.menu-cards__img{
	display:block;
	width:100% !important;
	height:var(--mcd-h) !important;
	max-width:none;
	object-fit:cover;
	object-position:center;
	transition:transform .4s ease;
}
.menu-cards__link:hover .menu-cards__img,
.menu-cards__link:focus-visible .menu-cards__img{transform:scale(1.04)}
.menu-cards__name{
	position:absolute;left:0;bottom:0;z-index:2;
	padding:9px 18px;
	border-radius:0 var(--theme-radius-lg) 0 var(--theme-radius-lg);
	background-color:var(--mcd-label-bg);
	color:var(--mcd-label-fg);
	font-size:14px;font-weight:500;line-height:1;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:781px){
	.menu-cards{
		--mcd-gap:8px;
		grid-template-columns:repeat(var(--mcd-cols-mobile), minmax(0, 1fr));
	}
	.menu-cards__img{height:var(--mcd-h-mobile) !important}
}