/* ------------------------------------- */
/* КАРТОЧКА - КНОПКИ, ФИЛЬТР и НАВИГАЦИЯ */
/* ------------------------------------- */

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

button-
button-active-

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

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

*/

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

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

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

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

.folders-row 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) {

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

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

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

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

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

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

{
	display: none!important;
}

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

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

.folders-row 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 var(--speed-all-effects-button-card) ease-out;
    -moz-transition: all var(--speed-all-effects-button-card) ease-out;
    -o-transition: all var(--speed-all-effects-button-card) ease-out;
    transition: all var(--speed-all-effects-button-card) ease-out;
}

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

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

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

.folders-row 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;
	-webkit-filter: none;
}

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

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

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

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

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

.folders-row 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;
}

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

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

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

.folders-row 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;
}

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

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

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

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

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

.folders-row 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;
	-webkit-filter: none;
}

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

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

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

.folders-row 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; */
}

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

.folders-row 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) {

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

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

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

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

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

.folders-row a[href*="wpm-category/button-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/button-"]:hover .folder-front pattern image {
	filter: none;
	-webkit-filter: none;
}