/* -------------------------------- */
/* КАРТОЧКИ ВМЕСТО ПАПОК - 3 в ряду */
/* Автор стилей: Игорь Лохман       */
/* -------------------------------- */

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

:root {
	
	/* 1. Закругление верхней части карточки */
	--radius-top-classic-card: 25px;
	
	/* 2. Закругление нижней части карточки - от 0px до 65px */
	--radius-bottom-classic-card: 25px;
	
	/* 3. Толщина рамки карточки */
	--width-border-classic-card: 0px;
	
	/* 4. Цвет рамки карточки */
	--color-border-classic-card: #9100ff;

	/* 5. Цвет описания */
	--color-subtitle-classic-card: #000;
	
	/* 6. Фон описания */
	--color-subtitle-bg-classic-card: #ffffff;
	
	/* 7. Фон блока с индикаторами */
	--color-bg-indikator-classic-card: #ffffff;
	
	/* 8. Цвет текста индикаторов */
	--color-indikator-classic-card: #000;
	
	/* 9. Цвет иконки названия у карточки с материалами */
	--color-subtitle-icon-files-classic-card: #ff9f09;
	
	/* 10. Цвет иконки названия у карточки с карточками */
	--color-subtitle-icon-subfolders-classic-card: #ff9f09;
	
	/* 11. Скорость анимации обложки */
	--speed-cover-classic-card: 0.18s;

	/* 12. Непрозрачность наложения обложки карточки от 0 до 1 */
	/* По умолчанию 1 - нет наложения. 0 - невидимая обложка */
	--opacity-cover-classic-card: 1;

	/* 13. Цвет непрозрачности наложения обложки карточки по умолчанию */
	--color-cover-classic-card: #7CEC5A;
	
	/* 14. Скорость анимации ТЕНИ при наведении на карточку */
	--speed-shadow-classic-card: 0.18s;
	
	/* 15. Цвет ОТКРЫТОГО замка */
	--color-unlock-classic-card: #56bf50;

	/* 16. Цвет ПОЛУОТКРЫТОГО замка */
    --color-unlock-alt-classic-card: #ff9f09;

	/* 17. Цвет ЗАКРЫТОГО замка */
    --color-lock-classic-card: #FF4B3E;

}

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

.folders-row .col-lg-3 .folder-wrap:hover {
	/* filter: none; */
}

/* --------------------- */
/* 1. БЛОК ВСЕЙ КАРТОЧКИ */

/* Общие настройки блока карточки */

.folders-row .col-lg-3 {
	display: block!important;
	z-index: 501!important;
	/* 3 карточки в ряду на больших экранах */
	width: calc(100%/3)!important;
}

/* 2 карточки в ряду на средних экранах */

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

.folders-row .col-lg-3 {
	width: calc(100%/2)!important;
}
}

/* 1 карточка в ряду на мобильных */

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

.folders-row .col-lg-3 {
	width: 100%!important;
	/* Корректировка ширины карточки на узких экранах */
	padding-right: 0px;
    padding-left: 0px;
}
}

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

@media (min-width: 1400px) {
	
.folders-row .col-lg-3 {
	margin-bottom: -9px;
    margin-top: 40px;
}
}

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

.folders-row .col-lg-3 {
	margin-bottom: 84px;
    margin-top: -55px;
}
}

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

.folders-row .col-lg-3 {
	margin-bottom: 57px;
    margin-top: -27px;
}
}

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

.folders-row .col-lg-3 {
	margin-bottom: 87px;
    margin-top: -58px;
}
}

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

.folders-row .col-lg-3 {
    margin-bottom: 83px;
    margin-top: -53px;
}
}	

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

.folders-row .col-lg-3 {
	margin-bottom: 87px;
    margin-top: -66px;
}
}

/* ------------------------- */
/* 2. БЛОК - ССЫЛКА КАРТОЧКИ */

/* Анимация карточки при наведении - ТЕНЬ */

.folders-row .folder-wrap:hover,
.row-key-categories .folder-wrap:hover {
	filter: drop-shadow(6px 12px 8px rgba(0, 0, 250, 0.1));
	-webkit-filter: drop-shadow(6px 12px 8px rgba(0, 0, 250, 0.1));
}

.folders-row .folder-wrap,
.row-key-categories .folder-wrap {
	transition: all var(--speed-shadow-classic-card)!important;
}

/* Раскомментируй оба свойства, чтобы УБРАТЬ ТЕНЬ при наведении в Активации */
/* Закомментируй оба свойства, чтобы ОСТАВИТЬ ТЕНЬ при наведении в Активации */

.row-key-categories .folder-wrap:hover {
	drop-shadow: none!important;
	filter: none!important;
}

/* ЗАКРУГЛЕНИЕ карточки + внутренняя РАМКА */
/* Общие настройки */

.folders-row .folder-wrap,
.row-key-categories .folder-wrap  {
	
margin-top: 0px!important;
margin-bottom: 0;
background: none;

border-radius: calc(var(--radius-top-classic-card) - var(--width-border-classic-card)) calc(var(--radius-top-classic-card) - var(--width-border-classic-card)) calc(var(--radius-bottom-classic-card) + 20px) calc(var(--radius-bottom-classic-card) + 20px);

box-shadow: 0px 0px 0px var(--width-border-classic-card) var(--color-border-classic-card) inset;
-webkit-box-shadow: 0px 0px 0px var(--width-border-classic-card) var(--color-border-classic-card) inset;
-moz-box-shadow: 0px 0px 0px var(--width-border-classic-card) var(--color-border-classic-card) inset;

}

/* Растягиваем карточку на всю ширину своего блока */

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

@media (min-width: 768px) {
	
.folders-row .folder-wrap {
	width: 100%;
}
}

/* На мобильных */

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

.folders-row .folder-wrap {
	width: 340px;
}
}

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

.folders-row .folder-wrap {
	width: 360px;
}
}

/* Высота карточки на разных экранах */

@media (min-width: 1400px) {

.folders-row .folder-wrap {
	height: 349px;
}
}

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

.folders-row .folder-wrap {
	height: 312px;
}
}

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

.folders-row .folder-wrap {
	height: 274px;
}
}

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

.folders-row .folder-wrap {
    height: 303px;
}
}

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

.folders-row .folder-wrap {
    height: 299px;
}
}

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

.folders-row .folder-wrap {
	height: 312px;
}
}

/* --------------------- */
/* 3. СТИКЕР НА КАРТОЧКЕ */

.folder-wrap .label {
	font-weight: normal;
    font-size: 17px;
	border-radius: 15px;
    text-transform: none;
    line-height: 1.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 6px 15px;
	max-width: 80%;
	top: calc(13px + var(--radius-top-classic-card)/6 + var(--width-border-classic-card));
    right: calc(13px + var(--radius-top-classic-card)/4 + var(--width-border-classic-card));
	/* white-space: normal; */
	
	/* стеклянный стикер */
	
	/* background: rgba(255, 255, 255, 0.2)!important; */
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
    /* backdrop-filter: blur(5px); */
    /* -webkit-backdrop-filter: blur(5px); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    /* color: #efff00!important; */
    /* color: #ffffff!important; */
}

/* --------------------------- */
/* 4. БЛОК СОДЕРЖАНИЯ КАРТОЧКИ */

/* Ширина и отступ нижней части всех карточек */

.folder-wrap .folder-content {
    width: 100%;
    bottom: 0;
}

/* Убираем перекрытие названия карточкой */
/* Иначе блока с названием не будет видно */

.folder-wrap .folder-content {
    overflow: visible;
}

/* КОРРЕКТИРОВКА НАЗВАНИЯ КАРТОЧКИ В КОРЗИНЕ и КАТАЛОГЕ */

.woocommerce-cart-form .folder-wrap .folder-content,
.shop-row .folder-wrap .folder-content {
    width: 100%;
	bottom: 0;
}

/* -------------------- */
/* 5. ОПИСАНИЕ КАРТОЧКИ */

/* Описание - название карточки */

.folder-wrap .folder-content .title,
.row-key-categories .folder-wrap > .folder-content .title {
	position: initial;
	padding: 12px 18px 12px;
	background: var(--color-subtitle-bg-classic-card);
	color: var(--color-subtitle-classic-card)!important;
	border-bottom: none;
	/* временно */
	/* border-bottom: 13px solid rgb(41 171 253); */
}

/* Скрываем лишний текст в названии карточки */

.folder-wrap .folder-content .title {
    text-wrap: nowrap;
    text-overflow: ellipsis;
	/* для FireFox */
	white-space: -moz-pre-space;
}

/* Показываем название карточки полностью при наведении */

.folder-wrap:hover .folder-content .title {
    text-wrap: inherit;
	/* для FireFox */
	white-space: normal;
}

/* ЦВЕТ ИКОНКИ рядом с названием */
/* Иконка для карточки с материалами и карточки с карточками задаётся в файле iconscard.css */

/* Для карточки с МАТЕРИАЛАМИ */

.folder-wrap.folder-with-files .folder-content .title:before {
	color: var(--color-subtitle-icon-files-classic-card);
}

/* Для карточки с КАРТОЧКАМИ */

.folder-wrap.folder-with-subfolders .folder-content .title:before {
	color: var(--color-subtitle-icon-subfolders-classic-card);
}

/* ---------------------------- */
/* 6. БЛОК ИНДИКАТОРОВ КАРТОЧКИ */

/* Закругление блока с ИНДИКАТОРАМИ и отступ */

.folders-row .col-xs-12 > .folder-wrap .folder-content .bottom-icons,
.row-key-categories .col-xs-12 .folder-content .bottom-icons  {
	border-radius: 0 0 var(--radius-bottom-classic-card) var(--radius-bottom-classic-card);
	padding-left: calc(14px + var(--radius-bottom-classic-card)/5);
    padding-right: calc(5px + var(--radius-bottom-classic-card)/5);
}

/* Фон и цвет Просмотров, Комментариев и Процента прогресса */

.folders-row .col-xs-12 > .folder-wrap .folder-content .course-progress-wrap .progress-count,
.folders-row .col-xs-12 > .folder-wrap .folder-content .bottom-icons,

.row-key-categories .col-xs-12 .folder-content .course-progress-wrap .progress-count,
.row-key-categories .col-xs-12 .folder-content .bottom-icons
 {
	background: var(--color-bg-indikator-classic-card);
    color: var(--color-indikator-classic-card)!important;
}

/* ------------------------ */
/* НОВЫЙ ДИЗАЙН ИНДИКАТОРОВ */

.folders-row .col-xs-12 > .folder-wrap .folder-content .bottom-icons,
.row-key-categories .col-xs-12 .folder-content .bottom-icons
 {
	display: flex;
    width: 100%;
    align-items: center;
    height: 58px;
}

/* 	КОММЕНТАРИИ */

.folders-row .col-xs-12 > .folder-wrap .folder-content .bottom-icons .comments,
.row-key-categories .col-xs-12 .folder-content .bottom-icons .comments {
	order: 1;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ПРОСМОТРЫ */

.folders-row .col-xs-12 > .folder-wrap .folder-content .bottom-icons .views,
.row-key-categories .col-xs-12 .folder-content .bottom-icons .views {
	order: 2;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* СТАТУС - ЗАМОК */

.folder-wrap .folder-content .bottom-icons .status,
.row-key-categories .col-xs-12 .folder-content .bottom-icons .status {
	text-align: right;
    order: 4;
    margin-right: 10px;
    flex-grow: 1;
}

/* Цвет ОТКРЫТОГО замка */

.icon-unlock:before {
    color: var(--color-unlock-classic-card);
}

/* Цвет ПОЛУОТКРЫТОГО замка */

.icon-unlock-alt:before {
    color: var(--color-unlock-alt-classic-card);
}

/* Цвет ЗАКРЫТОГО замка */

.icon-lock:before {
    color: var(--color-lock-classic-card);
}

/* --------------- */
/* ШКАЛА ПРОГРЕССА */

.bottom-icons .course-progress-wrap {
    margin: 0;
    line-height: normal;
    flex-grow: 2;
    order: 3;	
}

.bottom-icons .course-progress-wrap .progress {
	position: relative;
	width: 78%;
    height: 15px;
    margin: 0;
	margin-right: 5px;
    top: 2px;
    border-radius: 10px; 
}

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

.bottom-icons .course-progress-wrap .progress {
    width: 70%;
}
}

/* Цвет НЕЗАВЕРШЁННОЙ шкалы прогресса на карточке */

.course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt,
.course-progress-wrap .progress .progress-bar.progress-bar-unlock,
.course-progress-wrap .progress .progress-bar.progress-bar-lock {
	background-image: linear-gradient(to right, #fffc00 0%, #ff9f09 100%);
}

/* Цвет ЗАВЕРШЁННОЙ на 100% шкалы прогресса на карточке */

.course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt[style="width: 100%"],
.course-progress-wrap .progress .progress-bar.progress-bar-unlock[style="width: 100%"],
.course-progress-wrap .progress .progress-bar.progress-bar-lock[style="width: 100%"] {
	background-color: #65BF49;
    background: #65BF49;
}

/* Высота плашки Индикатор для блоков «МАТЕРИАЛ» */

.folders-row .folder-wrap .course-progress-wrap .progress .progress-bar {
	height: 15px;
}

/* ------------------- */
/* 7. ОБЛОЖКА КАРТОЧКИ */

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

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

.folder-wrap .files-group,
.folder-wrap .folder-back {
	display: none;
}

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

.folder-wrap .folder-sub,
.folder-wrap .folder-sub-back {
	display: none;
}

/* Убираем обрезку обложки */

.folder-wrap .folder-front,
.folder-wrap .folder-sub-front {
	width: 100%!important;
	height: 100%!important;
    top: 0px;
	border-radius: var(--radius-top-classic-card) var(--radius-top-classic-card) 0 0;
	
	/* ОБРЕЗКА - ЗАКРУГЛЕНИЕ ОБЛОЖКИ на всех экранах */
	/* Чтобы видна была рамка карточки, иначе карточка перекрывает рамку */
	
	clip-path: inset(var(--width-border-classic-card) round calc(var(--radius-top-classic-card) - var(--width-border-classic-card) * 2) calc(var(--radius-top-classic-card) - var(--width-border-classic-card) * 2) 0 0);
	
	-webkit-clip-path: inset(var(--width-border-classic-card) round calc(var(--radius-top-classic-card) - var(--width-border-classic-card) * 2) calc(var(--radius-top-classic-card) - var(--width-border-classic-card) * 2) 0 0);
}

/* Фон карточки, если нет обложки */

.folder-wrap .folder-front,
.folder-wrap .folder-sub-front {
    background: #ffc160;
	border-radius: 0 0 var(--radius-bottom-classic-card) var(--radius-bottom-classic-card);
}

/* ФОН верхней части карточки - она же подложка */

.folder-wrap .folder-front use[fill^="#"],
.folder-wrap .folder-sub-front use[fill^="#"] {
	fill: none;
}

/* Общие настройки блока обложки */

.folder-wrap .folder-front pattern image,
.folder-wrap .folder-sub-front  pattern image {
    height: auto;
}

/* ---------------------------------------------------------- */
/* РАЗМЕР ОБЛОЖКИ на карточке с МАТЕРИАЛАМИ на разных экранах */

@media (min-width: 1400px) {

.folder-wrap .folder-front pattern image {
    width: 262px;
    transform: translate(4px, 16px);
}
}

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

.folder-wrap .folder-front pattern image {
    width: 248px;
    transform: translate(11px, 16px);
}
}

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

.folder-wrap .folder-front pattern image {
    width: 230px;
    transform: translate(20px, 16px);
}
}

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

.folder-wrap .folder-front pattern image {
    width: 244px;
    transform: translate(13px, 16px);
}
}

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

.folder-wrap .folder-front pattern image {
    width: 244px;
    transform: translate(13px, 16px);
}
}	

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

.folder-wrap .folder-front pattern image {
	width: 248px;
    transform: translate(11px, 16px);
}
}

/* ------------------------------------------------------------------------------ */
/* КОРРЕКЦИЯ ШИРИНЫ И ПОЛОЖЕНИЯ ОБЛОЖКИ на карточке с МАТЕРИАЛАМИ на всех экранах */

/* Для всех браузеров, КРОМЕ Firefox - старый вариант */

.folder-wrap .folder-front path[id*="shape-front"]{
	/* transform: translate(0px, -17px); */
}

/* Коррекция для всех браузеров в том числе и для Firefox */

.folder-wrap .folder-front use[fill^="url"] {
	transform: translate(0px, -17px);
}

/* --------------------------------------------------------- */
/* РАЗМЕР ОБЛОЖКИ на карточке с КАРТОЧКАМИ на разных экранах */

@media (min-width: 1400px) {

.folder-wrap .folder-sub-front  pattern image {
	width: 283px;
    transform: translate(21px, 51px);
}
}

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

.folder-wrap .folder-sub-front  pattern image {
	width: 279px;
    transform: translate(23px, 47px);
}
}

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

.folder-wrap .folder-sub-front  pattern image {
	width: 262px;
    transform: translate(31px, 46px);
}
}

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

.folder-wrap .folder-sub-front  pattern image {
	width: 276px;
    transform: translate(24px, 46px);
}
}

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

.folder-wrap .folder-sub-front  pattern image {
    width: 274px;
    transform: translate(25px, 47px);
}
}	

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

.folder-wrap .folder-sub-front  pattern image {
	width: 279px;
    transform: translate(23px, 47px);
}
}

/* ----------------------------------------------------------------------------- */
/* КОРРЕКЦИЯ ШИРИНЫ И ПОЛОЖЕНИЯ ОБЛОЖКИ на карточке с КАРТОЧКАМИ на всех экранах */

/* Для всех браузеров, КРОМЕ Firefox - старый вариант */

.folder-wrap .folder-sub-front path[id*="shape-front"] {
    /* transform: translate(0px, -25px); */
}

/* Коррекция для всех браузеров в том числе и для Firefox */

.folder-wrap .folder-sub-front use[fill^="url"] {
	transform: translate(0px, -25px);
}

/* -------------------- */
/* 8. АНИМАЦИЯ ОБЛОЖКИ  */

/* Тонировка обложки и скорость анимации карточки */

.folder-front pattern image,
.folder-sub-front pattern image {
	filter: opacity(var(--opacity-cover-classic-card)) drop-shadow(0 0 0 var(--color-cover-classic-card));
	transition: all var(--speed-cover-classic-card);
}

/* Эффект ОБЛОЖКИ при наведении - ОСВЕТЛЕНИЕ */
/* ВАЖНО! Не используйте transform. Он занят обложкой */

.folder-wrap:hover .folder-front pattern image,
.folder-wrap:hover .folder-sub-front pattern image {
	filter: opacity(0.8) drop-shadow(0 0 0 #DFECE0) brightness(1.05);
	-webkit-filter: opacity(0.8) drop-shadow(0 0 0 #DFECE0) brightness(1.05);
	
	/* scale: 1.01; */
	/* filter: opacity(0.8) drop-shadow(0 0 0 #DFECE0); */
	/* filter: opacity(0.5) drop-shadow(0 0 0 #ffff00); */
	
	/* filter: sepia(.2); */
	/* -webkit-filter: sepia(.2); */
	
	/*filter: grayscale(50%);*/              /* Эффект - Ч/Б. Должны быть оба одинаковы */
	/*-webkit-filter: grayscale(50%);*/      /* Эффект - Ч/Б. Должны быть оба одинаковы */
	
	/*filter: hue-rotate(120deg);*/          /* Эффект - Цветовой баланс. Должны быть оба одинаковы */
	/*-webkit-filter: hue-rotate(120deg);*/  /* Эффект - Цветовой баланс. Должны быть оба одинаковы */
}

/* ---------------------------------------------------------------------- */
/* 9. КОРРЕКТИРОВКА ПОЛОЖЕНИЯ КАРТОЧЕК ОТНОСИТЕЛЬНО МЕНЮ И ФУТЕРА         */
/* Эти стили ещё лучше смотрятся с ШАПКОЙ 2.0 и Хлебными крошками 2.0     */
/* ---------------------------------------------------------------------- */	

/* Отступ всех карточек от меню и от футера на разных экранах */

@media (min-width: 1400px) {
.folders-row {
    margin: 0px 0 100px;
}	
}

@media (min-width: 1200px) and (max-width: 1399px) {
.folders-row {
	margin: 83px 0 0;
}	
}

@media (min-width: 992px) and (max-width: 1199px) {
.folders-row {
	margin: 57px 0 0;
}	
}

@media (min-width: 768px) and (max-width: 991px) {
.folders-row {
	margin: 88px 0 0;
}	
}

@media (min-width: 460px) and (max-width: 767px) {
.folders-row {
	margin: 82px 0 0;
}	
}

@media (min-width: 320px) and (max-width: 459px) {
.folders-row {
    margin: 95px 0 0;
}	
}

/* Отступ всего блока Кнопки "ПОДРОБНЕЕ" */

.page-title-row {
    position: relative;
    margin-top: 30px!important;
}

/* Нижний отступ кнопки "Подробнее" на больших и средних экранах */
/* Чтобы хорошо смотрелась с карточками */

@media (min-width: 1400px) {
.page-title-row .page-description-content {
	margin-bottom: 0px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
.page-title-row .page-description-content {
	margin-bottom: 10px;
}
}

/* -------------------------------------------------------------  */
/* 10. КОРРЕКЦИЯ ФОРМЫ КАРТОЧЕК ВСЕХ ТИПОВ В РАЗДЕЛЕ «АКТИВАЦИЯ»  */
/* -------------------------------------------------------------  */

@media (min-width: 1400px) {
.row-key-categories .folder-wrap.folder-with-subfolders,
.row-key-categories .folder-wrap.folder-with-files {
	height: 349px;
    width: 426px;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {
.row-key-categories .folder-wrap.folder-with-subfolders,
.row-key-categories .folder-wrap.folder-with-files {
    width: 360px;
    height: 312px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
.row-key-categories .folder-wrap.folder-with-subfolders,
.row-key-categories .folder-wrap.folder-with-files {
    width: 293px;
	height: 274px;
}
}

@media (min-width: 768px) and (max-width: 991px) {
.row-key-categories .folder-wrap.folder-with-subfolders,
.row-key-categories .folder-wrap.folder-with-files {
	width: 345px;
	height: 303px;
}
}

@media (min-width: 460px) and (max-width: 767px) {
.row-key-categories .folder-wrap.folder-with-subfolders,
.row-key-categories .folder-wrap.folder-with-files {
    width: 340px;
    height: 299px;
}
}

@media (min-width: 320px) and (max-width: 459px) {
.row-key-categories .folder-wrap.folder-with-subfolders,
.row-key-categories .folder-wrap.folder-with-files {
    width: 360px;
    height: 312px;
}
}

/* ----------------- */
/* 11. ПРОЧИЕ ШТУЧКИ */

/* Ширина контента на мобильных */

@media (max-width: 767px) {
.clearfix .container {
	max-width: 100%;
}
}

/* -------------------------------- */
/* 12. ФИКСЫ ДЛЯ КАТАЛОГА И КОРЗИНЫ */

/* ------------------------ */
/* Фикс 1 - НАЗВАНИЕ ТОВАРА */

/* Убираем воздействие стилей на название товаров в Каталоге */

.woocommerce-page .folder-wrap .folder-content .title {
	padding: 12px 18px 0;
	background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%);
	border-bottom: 13px solid rgba(0, 0, 0, 0);
}

/* Убираем скрытие лишнего текста в названии товара */

.woocommerce-page .folder-wrap .folder-content .title,
.woocommerce-page .folder-wrap:hover .folder-content .title {
    text-wrap: inherit;
    text-overflow: inherit;
	/* для FireFox */
	white-space: normal;
}

/* Возвращаем перекрытие названия товаром */

.woocommerce-page .folder-wrap .folder-content {
    overflow: hidden;
}

/* ----------------------- */
/* Фикс 2 - ОБЛОЖКА ТОВАРА */

/* Возвращаем обратную сторону папки */

.woocommerce-page .folder-wrap .files-group,
.woocommerce-page .folder-wrap .folder-back,

.woocommerce-page .folder-wrap .folder-sub,
.woocommerce-page .folder-wrap .folder-sub-back {
	display: initial;
}

/* Убираем Фон у папки, который предназначен для карточки */

.woocommerce-page .folder-wrap .folder-front,
.woocommerce-page .folder-wrap .folder-sub-front {
    background: none;
}

/* Возвращаем обрезку обложки папки */

.woocommerce-page .folder-wrap .folder-front,
.woocommerce-page .folder-wrap .folder-sub-front {
	width: unset!important;
	height: unset!important;
    top: initial;
	border-radius: initial;
	clip-path: initial;
	-webkit-clip-path: initial;
}

/* Возвращаем ФОН верхней части папки - она же подложка */

.woocommerce-page .folder-wrap .folder-front use[fill^="#"],
.woocommerce-page .folder-wrap .folder-sub-front use[fill^="#"] {
	fill: rgb(173, 200, 221);
}

/* Убираем коррекцию ширины и положения обложки папки */

.woocommerce-page .folder-wrap .folder-front use[fill^="url"],
.woocommerce-page .folder-wrap .folder-sub-front use[fill^="url"] {
	transform: none;
}

/* Отменяем изменения размера обложки папки с МАТЕРИАЛАМИ */

.woocommerce-page .folder-wrap .folder-front pattern image {
    width: 100%;
    height: 100%;
    transform: none;
}

/* Отменяем изменения размера обложки папки с ПАПКАМИ */

.woocommerce-page .folder-wrap .folder-sub-front pattern image {
    width: 120%;
    height: 120%;
    transform: none;
}

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

.woocommerce-page .folder-front pattern image,
.woocommerce-page .folder-sub-front pattern image {
	filter: none;
	transition: none;
}

/* Убираем эффект осветления обложки при наведении */

.woocommerce-page .folder-wrap:hover .folder-front pattern image,
.woocommerce-page .folder-wrap:hover .folder-sub-front pattern image {
	filter: none;
	-webkit-filter: none;