/* =========== © 2026 Centroarts - https://m1r.ru =========== */

:root {
	--headbar-pad: 14px;
	--cathead-pad-y: var(--sect-vpad);
	--cathead-pad-x: var(--g-sect);
	--cathead-c-text: var(--c-text);
}

/* maincat-head */
.maincat-head {
	--mcat-box-rd: var(--rd-box);
	--mcat-box-pad: var(--wrp-p);
	--mcat-box-gap: 16px;
	--mcat-box-c: hsl(var(--c-text-white));
	--mcat-box-bg: var(--c-dark);

	position: relative; z-index: 1;
	background-color: hsl(var(--mcat-box-bg));

	border-radius: var(--mcat-box-rd);
	padding: var(--mcat-box-pad);
	color: var(--mcat-box-c);
	overflow: hidden;
}

.maincat-head-bg { position: absolute; inset: 0; left: auto; max-width: 628px; z-index: -1; pointer-events: none; user-select: none; }
.maincat-head-bg::after { content: ""; position: absolute; inset: 0; right: auto; width: 50%; background-image: linear-gradient(90deg, hsl(var(--mcat-box-bg)) 0%, hsla(var(--mcat-box-bg),0) 100%); }


.mc-bg-skazki { --mcat-box-bg: 263, 38%, 30%; }
.mc-bg-askazki { --mcat-box-bg: 12, 84%, 39%; }
.mc-bg-rasskazi { --mcat-box-bg: 173, 54%, 15%; }
.mc-bg-arasskazi { --mcat-box-bg: 53, 27%, 19%; }
.mc-bg-stihi { --mcat-box-bg: 245, 45%, 32%; }
.mc-bg-astihi { --mcat-box-bg: 26, 64%, 51%; }
.mc-bg-basni { --mcat-box-bg: 84, 61%, 25%; }
.mc-bg-abasni { --mcat-box-bg: 33, 54%, 33%; }

.maincat-head-tools { display: flex; align-items: start; gap: 8px; margin-bottom: var(--mcat-box-gap); }
.maincat-head-tools .page-switcher { margin-bottom: 0; margin-top: 0; } 
.maincat-head-tools .right { margin-left: auto; }
.maincat-head .heading { position: relative; margin-bottom: 0; }
.maincat-head .heading-text { margin-top: 4px; opacity: .9; }


@media (max-width: 991.9px) {
	.maincat-head {
		border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;
		margin-inline: var(--wrp-p-inv); margin-top: var(--ppad-top-inv);
	}
}
@media (min-width: 768px) {
	.maincat-head {
		--mcat-box-pad: 28px;
		--mcat-box-gap: 20px;
	}
	.maincat-head .heading-text { margin-top: 8px; opacity: .7; }
}
@media (max-width: 767.9px) {
	.maincat-head-bg { opacity: .6; }
}
@media (max-width: 575.9px) {
	.maincat-head .tagset-item { --tagset-h: 36px; font-size: var(--fs-1); }
	.maincat-head .tagset-item .age-icon { padding-inline: 6px; }
	.maincat-head { --items-gap: 4px; }
}

.maincat-head .btn { --btn-c-text: var(--c-text-white); }
.maincat-head .tagset-list { margin-top: var(--mcat-box-gap); }

.tagset-list { display: flex; gap: var(--items-gap); }
.tagset-list:not(.hscroll) { flex-wrap: wrap; }
.tagset-item {
	--tagset-h: 44px;
	--tagset-rd: var(--rd-tags);
	position: relative; z-index: 1;
	display: flex; align-items: center; border-radius: var(--tagset-rd); user-select: none;
	height: var(--tagset-h); background-color: var(--c-body-tone); color: hsl(var(--c-text));
}
.tagset-item::after {
	content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--c-border); transition: box-shadow .2s ease;
}
.tagset-item span { padding: 6px 12px; white-space: nowrap; }
.tagset-item .cover { width: var(--tagset-h); height: var(--tagset-h); border-radius: var(--tagset-rd); }
.tagset-item .age-icon {
	--age-icon-rd: var(--tagset-rd);
    --age-icon-fs: 16px;
    --age-icon-s: var(--tagset-h);
}
.tagset-item .cover, .tagset-item .age-icon { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.tagset-item:active::after { box-shadow: inset 0 0 0 1px hsla(var(--c-primary),0.5);  }
@media (min-width: 992px) {
	.tagset-item:hover::after { box-shadow: inset 0 0 0 1px hsla(var(--c-primary),0.5); }
}