/* ----------------- */
/* КАРТОЧКА - ФИЛЬТР */
/* ----------------- */

/* Добавить в начало ярлыка:

button-
button-active-

button-one-color-
button-one-color-active-

button-no-bg-
button-no-bg-active-

*/

/* ----------------- */
/* БЫСТРЫЕ НАСТРОЙКИ */
/* ----------------- */

:root {
	
	/* Закругление фильтра */
	--radius-button: 25px;
	
	/* Горизонтальный отступ между фильтрами */
	--right-button: 15px;
	
	/* ДИЗАЙН 1 - КНОПКА С РОДНЫМ ФОНОМ И ЦВЕТОМ ТЕКСТА */
	
		/* Фон АКТИВНОЙ кнопки */
		--bg-button-active: transparent;

		/* Цвет текста АКТИВНОЙ кнопки */
		--color-button-active: #222222;
	
	/* ДИЗАЙН 2 - ОДНОЦВЕТНАЯ КНОПКА С ФОНОМ */
	
		/* Фон одноцветной кнопки */
		--bg-button-one-color: #0a8ff5; 
	
		/* Цвет текста одноцветной кнопки */
		--color-button-one-color: #fff;
	
		/* Фон одноцветной кнопки ПРИ НАВЕДЕНИИ */
		--bg-hover-button-one-color: #fc7d24; 
	
		/* Цвет текста одноцветной кнопки ПРИ НАВЕДЕНИИ */
		--color-hover-button-one-color: #FFFFFF;
		
		/* Фон АКТИВНОЙ одноцветной кнопки */
		--bg-button-one-color-active: #fc7d24;

		/* Цвет текста АКТИВНОЙ кнопки */
		--color-button-one-color-active:#FFFFFF;
			
	/* ДИЗАЙН 3 - ОДНОЦВЕТНАЯ ССЫЛКА БЕЗ ФОНА */
		
		/* Цвет текста ссылки */
		--color-button-no-bg: #2572df;
		
		/* Цвет текста ссылки ПРИ НАВЕДЕНИИ */
		--color-hover-button-no-bg: #FF8D11;
		
		/* Цвет линии ссылки ПРИ НАВЕДЕНИИ */
		--line-hover-button-no-bg: #FF8D11;
		
		/* Цвет текста АКТИВНОЙ ссылки */
		--color-button-no-bg-active: #222222;
			
		/* Цвет линии АКТИВНОЙ ссылки */
		--line-button-no-bg-active: #222222;
		
}

/* 1. Раскомментировать, чтобы отключить ТЕНЬ при наведении на карточку */

.folders-row .col-lg-3 > a[href*="wpm-category/button-"][class*="folder-wrap"]:hover {
	filter: none;
}

/* Корректировка положения иконки emoji, если вставлена в стикер */

.folders-row a[href*="wpm-category/button-"][class*="folder-wrap"] .emoji {
    top: 3px;
    position: relative;
}

/* Убираем рамку - ТЕНЬ вокруг карточки */

.folders-row a[href*="wpm-category/button-"][class*="folder-wrap"] {
	border: none;
	box-shadow: none;
	border-radius: 0;
	text-align: center;
	background: none;
	/* временный фон карточки */
    /* background: aqua; */
}

/* Убираем всё содержание и индикаторы */

a[href*="wpm-category/button-"] .folder-content {
	display: none;
}

/* Карточка на больших и средних экранах */

@media (min-width: 768px) {

.col-lg-3:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
	display: block!important;
	width: auto!important;
	z-index: 498!important;
	padding: 0;
	margin-left: 15px;
	margin-right: var(--right-button);
}
}

/* Карточка на маленьких экранах */

@media (min-width: 320px) and (max-width: 767px) {

.col-lg-3:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
	display: block!important;
	width: 100%!important;
	z-index: 498!important;
}
}

/* ВЫСОТА карточки на больших и средних экранах */

@media (min-width: 768px) {

a[href*="wpm-category/button-"][class*="folder-wrap"] {
	height: 48.8px!important;
}
}

@media (min-width: 320px) and (max-width: 767px) {

a[href*="wpm-category/button-"][class*="folder-wrap"] {
	height: 48.8px!important;
}
}

/* ------- */
/* ОБЛОЖКА */

/* Убираем фоновую картинку */

a[href*="wpm-category/button-"] .folder-front,
a[href*="wpm-category/button-"] .folder-sub-front

{
	display: none!important;
}

/* ------ */
/* СТИКЕР */

/* ДИЗАЙН 1 - КНОПКА С РОДНЫМ ФОНОМ И ЦВЕТОМ ТЕКСТА */

a[href*="wpm-category/button-"] .label {
	position: relative;
	border-radius: var(--radius-button);
	/* font-weight: bold; */
	font-size: 19px;
	max-width: 100%;
    top: 14px;
	text-transform: none;
	padding: 12px 20px;
	line-height: 1;
	/* плавная анимация */
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

/* Осветляем кнопку при наведении */

a[href*="wpm-category/button-"] .label:hover {
	box-shadow: inset 0 0 0 10em rgb(255 255 255 / 20%);
	/* плавная анимация */
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

/* Активная кнопка с родным фоном */

a[href*="wpm-category/button-active-"] .label {
    background: var(--bg-button-active)!important;
    color: var(--color-button-active)!important;
}

/* Отключаем ТЕНЬ при наведении на активную кнопку */

.folders-row .col-lg-3 > a[href*="wpm-category/button-active-"][class*="folder-wrap"]:hover {
	filter: none;
}

/* Запрещаем клик по АКТИВНОЙ кнопке с родным фоном */

a[href*="wpm-category/button-active-"][class*="folder-wrap"] {
	cursor: default;
    pointer-events: none;
}

/* ------------------------------------- */
/* ДИЗАЙН 2 - ОДНОЦВЕТНАЯ КНОПКА С ФОНОМ */

a[href*="wpm-category/button-one-color-"] .label {
    background: var(--bg-button-one-color)!important;
    color: var(--color-button-one-color)!important;
}

/* Одноцветная кнопка при наведении */

a[href*="wpm-category/button-one-color-"] .label:hover {
	background: var(--bg-hover-button-one-color)!important;
    color: var(--color-hover-button-one-color)!important;
}

/* Убираем осветление при наведении на одноцветную кнопку */

a[href*="wpm-category/button-one-color-"] .label:hover {
	box-shadow: none;
}

/* Активная одноцветная ссылка */

a[href*="wpm-category/button-one-color-active-"] .label {
    background: var(--bg-button-one-color-active)!important;
    color: var(--color-button-one-color-active)!important;
}

/* Запрещаем клик по АКТИВНОЙ одноцветной кнопке с фоном */

a[href*="wpm-category/button-one-color-active-"][class*="folder-wrap"] {
	cursor: default;
    pointer-events: none;
}

/* -------------------------------------- */
/* ДИЗАЙН 3 - ОДНОЦВЕТНАЯ ССЫЛКА БЕЗ ФОНА */

a[href*="wpm-category/button-no-bg-"] .label {
    background: none!important;
	color: var(--color-button-no-bg)!important;
	border-radius: 0;
}

/* Одноцветная ссылка при наведении */

a[href*="wpm-category/button-no-bg-"] .label:hover {
    border-bottom: 3px solid var(--line-hover-button-no-bg);
	color: var(--color-hover-button-no-bg)!important;
	padding: 12px 20px 9px 20px;
	border-radius: 0;
}

/* Отключаем ТЕНЬ при наведении на ссылку */

.folders-row .col-lg-3 > a[href*="wpm-category/button-no-bg-"][class*="folder-wrap"]:hover {
	filter: none;
}

/* Убираем ОСВЕТЛЕНИЕ при наведении на ссылку */

a[href*="wpm-category/button-no-bg-"] .label:hover {
	box-shadow: none;
}

/* Активная одноцветная ссылка */

a[href*="wpm-category/button-no-bg-active-"] .label {
	position: relative;
    background: none!important;
    color: var(--color-button-no-bg-active)!important;
	font-size: 19px;
	max-width: 100%;
	top: 14px;
	text-transform: none;
	line-height: 1;
    border-bottom: 3px solid var(--line-button-no-bg-active);
    border-radius: 0;
    padding: 12px 20px 9px 20px;
	/* font-weight: bold; */
}

/* Запрещаем клик по АКТИВНОЙ одноцветной ссылке */

a[href*="wpm-category/button-no-bg-active-"][class*="folder-wrap"] {
	cursor: default;
    pointer-events: none;
}

/* ----------------------------------------------- */
/* ОТСТУП СВЕРХУ ССЫЛКИ БЕЗ ФОНА НА РАЗНЫХ ЭКРАНАХ */

@media (min-width: 1400px) {
	
.col-lg-3:has(a[href*="wpm-category/button-no-bg-"][class*="folder-wrap"]) {
    margin-top: 25px;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.col-lg-3:has(a[href*="wpm-category/button-no-bg-"][class*="folder-wrap"]) {
    margin-top: -73px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.col-lg-3:has(a[href*="wpm-category/button-no-bg-"][class*="folder-wrap"]) {
    margin-top: -45px;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.col-lg-3:has(a[href*="wpm-category/button-no-bg-"][class*="folder-wrap"]) {
    margin-top: -75px;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.col-lg-3:has(a[href*="wpm-category/button-no-bg-"][class*="folder-wrap"]) {
    margin-top: -70px;
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.col-lg-3:has(a[href*="wpm-category/button-no-bg-"][class*="folder-wrap"]) {
    margin-top: -83px;
}
}

/* --------------------------------- */
/* Размер текста кнопки на мобильных */

@media (min-width: 320px) and (max-width: 767px) {

a[href*="wpm-category/button-"] .label {   
	/* font-size: 25px; */
}
}

/* --------------------------- */
/* ВЫРАВНИВАНИЕ КНОПКИ - СЛЕВА */

a[href*="wpm-category/button-"] .label {
    left: 0px;
    /* text-align: left; */
	/* padding-left: 0!important; */
}

/* -------- */
/* АНИМАЦИИ */

/* Убираем увеличение и цветокоррекцию */

a[href*="wpm-category/button-"]:hover .folder-sub-front pattern image,
a[href*="wpm-category/button-"]:hover .folder-front pattern image

 {
	filter: none;
}