/* breadcrumbs-and-progress-css-free.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Хлебные крошки и Прогресс'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Хлебные крошки станут похожи на меню + Адаптивный и стилизованный Прогресс обучения. Эти крошки особенно красиво смотрятся с дополнением «Шапка как баннер + Лого 2.0».'; */

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

/* Эти крошки особенно красиво смотрятся с дополнением «Шапка как баннер + Лого 2.0» */

:root {

/* Фон хлебных крошек */
--bg-bread-progress: #ffffff;

/* Закругление фона хлебных крошек */
--radius-bread-progress: 25px;

/* Цвет-Градиент 1 в Прогрессе */
--color-progress-bar-1-bread-progress: #fffc00;

/* Цвет-Градиент 2 в Прогрессе */
--color-progress-bar-2-bread-progress: #FF9800;

/* Выравнивание хлебных крошек - на Больших экранах */
/* flex-start - СЛЕВА, center - ЦЕНТР, end - СПРАВА */
--align-big-screen-bread-progress: flex-start;

/* Корректировка отступа Крошек - на Больших экранах */
/* Задайте "0", если выше указано выравнивание "СЛЕВА" (flex-start) */
/* Зайдайте "1", если выше указано выравнивание "ЦЕНТР" или "СПРАВА" */
--align-correction-bread-progress: 0;

/* Выравнивание хлебных крошек - на Маленьких экранах */
/* flex-start - СЛЕВА, center - ЦЕНТР, end - СПРАВА */
--align-small-screen-bread-progress: center;

/* Иконка в хлебной крошке - Материал */
/* "\f118" - смайл, "\f0f6" - файл (по умолчанию) */
--icon-mat-bread-progress: "\f118";

}

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* Хлебные крошки на мобильных */

@media (max-width: 767px) {
.breadcrumbs-row:not(.mkk_nav) .container {
	max-width: 100%;
}
}

/* Обёртка Хлебных крошек */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
    align-items: center;
	border: none;
	margin-top: 30px;
	padding: 3px 20px;
	background-color: var(--bg-bread-progress); 
	border-radius: var(--radius-bread-progress); 
}

/* Выравнивание Хлебных крошек и Прогресса - на Маленьких экранах */

@media (max-width: 767px) {

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap {
	flex-flow: column;
	/* выравнивание Прогресса */
	align-items: var(--align-small-screen-bread-progress);
}
	/* выравнивание Крошек */
section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs {
	justify-content: var(--align-small-screen-bread-progress);
}
}

/* Хлебные крошки */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs { 
	display: flex;
	flex: auto;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 0 10px 0;
}

/* Выравнивание крошек - на Больших экранах */

@media (min-width: 768px) {

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs {
	justify-content: var(--align-big-screen-bread-progress);
}
}

/* Крошка */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item {
	padding: 0;
	margin: 5px 0 5px 0;
	vertical-align: middle;
	max-width: 330px;
	cursor: pointer;
}

/* Крошка - на Средних экранах */

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

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item {
	max-width: 200px;
}
}

/* Крошка - на Маленьких экранах */

@media (max-width: 767px) {

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item {
	max-width: 200px;
}
}

/* Обёртка Иконки в крошке */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .iconmoon {
	margin: 0;
	margin-right: 5px;
	line-height: normal;
}

/* Общая корректировка Иконок у крошек - Рубрики и Материал */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .iconmoon:before,
section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before,
section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-folder-open-o:before {
    margin: 0;
	line-height: normal;
}

/* Корректируем Иконку у крошек - Рубрики и Материал */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-folder-open-o:before,
section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before {
    margin-top: 1px;
}

/* Обёртка Разделителя крошек */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .separator {
    padding: 0;
	margin: 2px 15px 0 15px;
    line-height: normal;
	vertical-align: middle;
}

/* Новая Иконка хлебной крошки - Материал */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before {
	content: var(--icon-mat-bread-progress);
}

/* ИНДИКАТОР ПРОХОЖДЕНИЯ УРОКОВ */
/* ---------------------------- */

/* Обёртка Индикатора */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap {
	display: flex;
	gap: 5px;
    align-items: center;
	margin: 0;
	padding: 0;
	width: 90px !important;
}

/* Отступ Крошек - на Средних и Больших экранах */
/* Чтобы Крошки были по центру страницы */
/* Корректировка отступа Крошек для выравнивания Слева */
/* Только для Залогинненных, когда отображается Прогресс */

@media (min-width: 768px) {

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap:has(.course-progress-wrap) .breadcrumbs {
    margin-left: calc(105px * var(--align-correction-bread-progress));
}
}

/* Отступ Обёртки Индикатора - на Средних и Больших экранах */

@media (min-width: 768px) {

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap {
    margin-left: 15px;
}
}

/* Обёртка Индикатора - на Маленьких экранах */

@media (max-width: 767px) {

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap {
	padding: 5px 0 15px 0;
	width: 150px !important;
}
}

/* Непройденная часть Прогресса */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap .progress {
	width: 100%;
	height: 15px;
    margin: 0px 2px 0px 0;
	border-radius: 50px;
}

/* Пройденная часть Прогресса */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap .progress-bar {
	height: 15px;
	background-image: linear-gradient(to right, var(--color-progress-bar-1-bread-progress) 0%, var(--color-progress-bar-2-bread-progress) 100%);
}

/* КОРРЕКТИРОВКА МЕНЮ НА БОЛЬШИХ ЭКРАНАХ */
/* ------------------------------------- */
/* Чтобы левая часть меню хорошо смотрелась, когда Крошки СЛЕВА */

@media (min-width: 1199px) {

.top-nav-row .container .row .top-nav-row--inner {
	padding-left: 21px;
}
}
/* jump-notice-indicator-css-free.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Прыгающий индикатор писем'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Заставляет индикатор уведомлений игриво подпрыгивать и привлекать внимание ученика.'; */

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* Анимация Индикатора уведомлений */

.mbln-notifications-number {
	/* характер анимации. Бесконечная. linear или ease */
	animation: number_ani 1s ease infinite;
	/* проигрывает анимацию сначала вперед, потом назад */
	animation-direction: alternate;
}

.mbln-notifications-number:hover {
	/* пауза анимации при наведении мыши */
	animation-play-state: paused;
}

/* Подпрыгивание Индикатора уведомлений */

@keyframes number_ani {
        0%   { transform: translateY(0); }
        30%  { transform: translateY(-5px); }
        50%  { transform: translateY(0); }
        100% { transform: translateY(0); }
}

/* Мигание. Плавное затухание, резкое появление */
/*
@keyframes number_ani {
  from { opacity: 1; }
  to { opacity: 0; }
}
*/

/* Мигание. Плавное появление, резкое затухание */

/*
@keyframes number_ani {
   0% {opacity: 0;}
  100% {opacity: 1;}
}
*/

/* Мигание. Отдельно цифра, отдельно круг  */

/* 
@-webkit-keyframes number_ani {
	100% { color: rgba(34, 34, 34, 0); }
	100% { background: rgba(34, 34, 34, 0); }
} 
*/
/* my-style.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Мои css'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Александра Фомина'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "https://school.fomitoys.ru/wp-content/uploads/2021/11/1598513258153.jpg"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Все мои стили тут'; */



          /* Закругление сразу всех кнопок*/
.button {border-radius: 50px;}

          /* Закругление сразу всех изображений*/
.img {border-radius: 25px !importaint;}


                      /* Поиск */
/* Поиск внешний вид */
.search-hint-form {border-radius: 50px;}

.search-hint-form input {border-radius: 50px !important; /*  Закругляем  левые  углы input */}

.search-hint-form button {border-radius: 50px !important; /*  Закругляем  правые  углы  button */}

                      /* Корзина */
/* кнопка корзины */
.a.mbr-btn.btn-default.btn-solid.btn-green.text-uppercase.cart-proceed-button {border-radius: 50px !important;}

 /* Закругление картинки в корзине */
     .folder-wrap {border-radius: 50px !important;}
   
/* Закругление всего блока в корзине */
     .tab-content {border-radius: 25px !important;}
     
/* Закругление кнопки закрыть в корзине */
   .remove-cart-item {
       display: inline-block;
       border-radius: 25px !important;;
       overflow: hidden;
       width: 20px;   /*  Пример */
       height: 20px; /*  Пример */
   }
    
                    /* Личный кабинет */
/* скругление в личном кабинете кнопок загрузить аватарку */
   [data-id="mblpr_field_avatar_1"] {border-radius: 25px !important;}

/* скругление в личном кабинете кнопки сохранить */
.mblpr-submit.mbr-btn {border-radius: 50px !important;}

/* Закругление для кнопки в личном кабинете удалить */
[data-avatar-clear="mblpr_field_avatar_1"] {border-radius: 50px !important;}

/* Закругление аватарки в личном кабинете */
.mblpr-avatar-preview-box img {
  border-radius: 50px !important; /*  Для скругленных углов */
  overflow: hidden;  /*  Чтобы скрыть углы изображения  */
}

/* Закругление всех форм ввода данных в личном кабинете */
.mblpr-field {border-radius: 50px !important;}


                /* Главная страница кнопки и стикеры */
/* Закругление кнопок доступ открыт */
.doc-label.opened {border-radius: 50px !important;}

/* Закругление стикера */
.label {
  border-radius: 50px !important; /*  Устанавливаем радиус закругления  */ 
  padding: 5px 10px; /*  Добавляем отступы для лучшего визуального эффекта  */
}

/* Закругление кнопки доступ закрыт внутри обложки */
.doc-label.locked {
  border-radius: 50px !important; /*  Или другой желаемый радиус */
  overflow: hidden;   /*  Опционально: предотвращает "вылезание" текста */ 
}

/* Закругление подложки прозрачной на всем сайте */
     .folder-content {border-radius: 50px !important;}
  
/* прозрачная нижняя граница (с замочком) на всех элементах папок */
.bottom-icons {
    display: none !important;
    margin-bottom: -30px !important; 
}
 

                  /* Элементы управления в верхней части сайта */
/* Закругление кнопки закрыть в уведомлениях */
    .mbln-close-icon { border-radius: 50px; }
  
/* Закругление кнопки закрыть в верхней части сайта */
.close-button { border-radius: 50px !important; }

/* Закругление вокруг кнопки закрыть в верхней части сайта */
.mbln-close { border-radius: 50px; }


/* Закругление всех форм ввода данных при регистрации */
    .form-control { border-radius: 50px !important; }

/* Закругление кнопки зарегистрироваться */
.mbr-btn { border-radius: 50px !important; }

/* ========================================
   FOMI — Единая система стилей для блоков "подробнее"
   ======================================== */

.fomi-block {
    max-width: 820px;
    margin: 50px auto;
    padding: 55px 65px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    text-align: center;
    border: 1px solid #f0ece7;
}

.fomi-badge {
    display: inline-block;
    background: #fef5eb;
    padding: 14px 40px;
    border-radius: 40px;
    border: 1px solid #f7d5b0;
    margin-bottom: 20px;
}

.fomi-badge strong {
    font-size: 1.6rem;
    font-weight: 700;
    color: #b85d14;
}

.fomi-text {
    font-size: 1.25rem;
    color: #4a4540;
    margin: 0 0 25px;
    line-height: 1.8;
}

.fomi-text strong {
    color: #b85d14;
}

.fomi-note {
    font-size: 1.15rem;
    color: #5a554f;
    margin: 18px 0 10px;
}

.fomi-skills {
    background: #faf7f4;
    padding: 18px 28px;
    border-radius: 16px;
    border-left: 4px solid #e07c1f;
    margin: 20px 0 35px;
    text-align: left;
}

.fomi-skills p {
    margin: 0;
    font-size: 1.1rem;
    color: #6b625a;
    line-height: 1.7;
}

.fomi-warning {
    background: #fcf6ef;
    padding: 24px 32px;
    border-radius: 16px;
    border-left: 4px solid #e07c1f;
    text-align: left;
    margin: 5px 0 0;
}

.fomi-warning p {
    margin: 0;
    font-size: 1.1rem;
    color: #6b625a;
    line-height: 1.7;
}

.fomi-warning strong {
    color: #b85d14;
    font-size: 1.15rem;
}

.fomi-button {
    display: inline-block;
    background: #e87a1e;
    padding: 18px 70px;
    border-radius: 60px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.35rem;
    text-decoration: none;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 0 #b85d14, 0 6px 20px rgba(232, 122, 30, 0.3);
    transition: all 0.1s ease;
    border: none;
    cursor: pointer;
}

.fomi-button:hover {
    background: #d46d17;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #b85d14, 0 8px 22px rgba(232, 122, 30, 0.35);
}

.fomi-button:active {
    transform: translateY(6px);
    box-shadow: 0 1px 0 #b85d14;
}

.fomi-mt-20 { margin-top: 20px; }

/* ========================================
   АДАПТИВНОСТЬ
   ======================================== */

@media (max-width: 768px) {
    .fomi-block {
        padding: 28px 18px 32px;
        margin: 20px 12px;
    }
    .fomi-badge strong {
        font-size: 1.2rem;
    }
    .fomi-text {
        font-size: 1rem;
    }
    .fomi-note {
        font-size: 0.95rem;
    }
    .fomi-skills p {
        font-size: 0.95rem;
    }
    .fomi-warning p {
        font-size: 0.95rem;
    }
    .fomi-button {
        padding: 16px 30px;
        font-size: 1.1rem;
        width: 100%;
        box-sizing: border-box;
        display: block;
        text-align: center;
    }
}
/* Технические страницы: скрываем прогресс и навигацию урока */
body.fomi-technical .reading-status-row,
body.fomi-technical .course-progress-wrap,
body.fomi-technical .progress-wrap {
    display: none !important;
}

/* name-student-back-css-free.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Имя ученика в меню'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё описание файла между '' */
/* --human-description-css: 'Возвращает имя ученика в верхнее меню школы.'; */

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* Настройки для больших экранов */
/* ----------------------------- */

/* Возвращаем в меню Имя и Фамилию ученика */

@media (min-width: 768px) {

.top-nav-row .dropdown-button.user-profile-dropdown-button:after {
	content: attr(title);
	top: 2px;
	position: relative;
	/* order: -1; */
	/* margin-right: 5px; */
	/* font-size: 17px; */
}

/* Стрелка в Профиле и Аватар */

#user-profile-dropdown .caret {
	margin-left: 10px;
}

.top-nav-row .user-profile-humbnail {
	margin-right: 5px;
}
}

/* Настройки для маленьких экранов */
/* ------------------------------- */

/* Стрелка в Профиле и Аватар */

@media (max-width: 768px) {

#user-profile-dropdown .caret {
	margin-left: 2px;
}

.top-nav-row .user-profile-humbnail {
	margin-right: 5px;
}
}

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

/* Выравниваем стрелочку в Профиле на больших экранах */

.top-nav-row .dropdown-button.user-profile-dropdown-button {
	display: inherit;
	/* gap: 10px; */
	/* gap: 5px; */
}

#user-profile-dropdown .caret {
	float: right;
    top: 15.5px;
    position: relative;
	/* margin-left: 0px; */
	/* display: inline-block; */
	/* vertical-align: middle; */
}
/* remove-page-shift-css-free.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Убираем дёргание страницы'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Предотвращает дёргание страницы при открытии выпадающих меню на Windows.'; */

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* Убираем скрытие полосы прокрутки на Windows при открытии выпадающих меню */
/* Убираем дёргание страницы школы на Windows при открытии выпадающих меню */

body[style*="overflow: hidden;"] {
	overflow: visible!important;
}
/* scrollbar-elegant-css-free.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Элегантные полосы прокрутки'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Современные и изящные полосы прокрутки на страницах школы, в панели навигации и уведомлениях.'; */

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

:root {

/* Ширина ВСЕХ полос прокруток */
--width-scroll-elegant: 10px;

/* Закругление ВСЕХ Перетаскиваемых элементов */
--radius-scroll-elegant: 10px;

/* Цвет Перетаскиваемого элемента - на Страницах */
--color-thumb-scroll-elegant: #C3CCD5;

/* Цвет пустой области Прокрутки - на Страницах */
--color-empty-scroll-elegant: #ffffff;

/* Цвет Перетаскиваемого элемента - в панели Навигации по урокам */
--color-thumb-menu-lessons-scroll-elegant: #C3CCD5;

/* Цвет пустой области Прокрутки - в панели Навигации по урокам */
--color-empty-menu-lessons-scroll-elegant: #ffffff;

/* Цвет Перетаскиваемого элемента - в Уведомлениях */
--color-thumb-notify-scroll-elegant: #C3CCD5;

/* Цвет пустой области Прокрутки - в Уведомлениях */
--color-empty-notify-scroll-elegant: #F7F7F7;

}

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* ПОЛОСА ПРОКРУТКИ НА ВСЕХ СТРАНИЦАХ */
/* ---------------------------------- */

/* Вся область полосы прокрутки */

::-webkit-scrollbar {
	width: var(--width-scroll-elegant);
}

/* Индикатор Прокрутки - перетаскиваемый элемент */

body::-webkit-scrollbar-thumb {
    background-color: var(--color-thumb-scroll-elegant);
    border-radius: var(--radius-scroll-elegant);
	border: none;
}

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

body::-webkit-scrollbar-track {
    background: var(--color-empty-scroll-elegant);
}

/* Полоса прокрутки в панели Навигации по урокам */

body .menu-opened.mbli3-left-menu::-webkit-scrollbar-thumb {
	background-color: var(--color-thumb-menu-lessons-scroll-elegant);
    border-radius: var(--radius-scroll-elegant);
	border: none;
}

/* Пустое пространство под индикатором Прокрутки в панели Навигации */

body .menu-opened.mbli3-left-menu::-webkit-scrollbar-track {
	background: var(--color-empty-menu-lessons-scroll-elegant);
}
 
/* Полоса прокрутки в панели Уведомлений */

.mbln-notifications-tab-content > .mbln-notifications-tab-pane::-webkit-scrollbar-thumb {
	background-color: var(--color-thumb-notify-scroll-elegant);
    border-radius: var(--radius-scroll-elegant);
	border: none;
}

/* Пустое пространство под индикатором Прокрутки панели Уведомлений */

.mbln-notifications-tab-content > .mbln-notifications-tab-pane::-webkit-scrollbar-track {
	background: var(--color-empty-notify-scroll-elegant);
}

/* -------------------------- */
/* ПОЛОСА ПРОКРУТКИ В FIREFOX */
/* -------------------------- */

@-moz-document url-prefix() {

/* Общие настройки полосы прокрутки для FIREFOX */

* {
	scrollbar-color: var(--color-thumb-scroll-elegant) var(--color-empty-scroll-elegant) !important;
	scrollbar-width: thin !important;
}

/* Полоса прокрутки в панели Навигации по урокам для FIREFOX */

body .menu-opened.mbli3-left-menu {
	scrollbar-color: var(--color-thumb-menu-lessons-scroll-elegant) var(--color-empty-menu-lessons-scroll-elegant) !important;
}

}
/* Конец стилей для FIREFOX */
/* ------------------------ */
/* super-catalog-css-free.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Внушительный каталог продуктов'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Делает карточки товаров крупными, а их обложки выразительными.'; */

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

:root {

/* Количество товаров в ряду */
--count-super-catalog: 3;

/* Размер текста в описании товара */
--font-size-info-super-catalog: 1.8rem;

}

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* На большом экране */

@media (min-width: 1200px) {
.shop-row .col-lg-3 {
	width: calc(100% / var(--count-super-catalog));
}
}

/* Размер цены и доступа в Каталоге */
/* Актуально, если в ряду 3 товара  */

@media (min-width: 1200px) {
.shop-row .shop-single-product .product-info {
    font-size: var(--font-size-info-super-catalog);
	min-height: 75px;
}
}
/* folder.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Мои папки на главной'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Александра Фомина'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "https://school.fomitoys.ru/wp-content/uploads/2021/11/1598513258153.jpg"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Меняет внешний вид папок на главной странице'; */

/* --- СТИЛЬ ДЛЯ КАРТОЧЕК КУРСОВ (Версия 30, Финальная и Комплексная) --- */

/* === ЧАСТЬ 1: ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ КАРТОЧЕК === */

a.folder-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #fff !important;
  border-radius: 20px !important;
  overflow: hidden !important; /* Ключевое свойство для обрезки углов! */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

a.folder-wrap:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ЭТОТ ПСЕВДОЭЛЕМЕНТ ТЕПЕРЬ ОТВЕЧАЕТ ЗА ОТОБРАЖЕНИЕ КАРТИНКИ */
a.folder-wrap::before {
    content: '';
    display: block;
    width: 100%;
    /* Фото везде 4:3: высота = 75% ширины карточки, без обрезки */
    height: 0;
    padding-bottom: 75%; /* 4:3 (3/4 = 0.75) */
    order: 1; /* Ставим его первым, над контентом */
    flex-shrink: 0;
    
    /* ДОБАВЛЕНО: Фоновый цвет, который всегда будет виден, если нет картинки */
    background-color: #f0f0f0;
    
    /* Стили для фоновой картинки, которая будет задана JS-скриптом */
    background-image: var(--card-image); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* ФИНАЛЬНЫЙ ФИКС: Скругляем углы для этого контейнера! */
    border-radius: 20px 20px 0 0 !important;
    z-index: 1; /* Слой картинки */
}

/* Контентная часть */
a.folder-wrap .folder-content {
  order: 2;
  position: relative !important;
  z-index: 2; /* Контент выше картинки */
  padding: 15px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* Заголовок */
a.folder-wrap .folder-content h1.title {
  color: #333 !important;
  background: none !important;
margin-top: 0 !important;
  margin-bottom: 5px !important;
  flex-grow: 1 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  min-height: 42px;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Стикер */
a.folder-wrap .label {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 3 !important; /* Стикер выше всего */
}

/* Нижние иконки */
a.folder-wrap .bottom-icons {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    background: none !important;
    flex-shrink: 0;
}
a.folder-wrap .folder-icon.status { margin-right: 10px; }

/* Если у папки есть обложка, название уже написано на картинке:
   скрываем текстовый дубль визуально, но оставляем его для скринридеров. */
a.folder-wrap[style*="--card-image"] .folder-content h1.title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    flex-grow: 0 !important;
}

/* Заголовок больше не растягивает контент — прижимаем прогресс/статус к низу. */
a.folder-wrap[style*="--card-image"] .folder-content .bottom-icons {
    margin-top: auto !important;
}

/* Обновляем и добавляем стили для обертки прогресса курса в папках */
a.folder-wrap .course-progress-wrap {
    display: flex !important;
    align-items: center !important;
    flex-grow: 1 !important;
    /* --- ДОБАВЛЕНО/ОБНОВЛЕНО --- */
    gap: 10px !important; /* Отступ между полосой прогресса и процентом */
    margin-top: 10px !important; /* Отступ сверху от других элементов bottom-icons */
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    /* --- КОНЕЦ ДОБАВЛЕНО/ОБНОВЛЕНО --- */
}

/* Обновляем и добавляем стили для контейнера полосы прогресса */
a.folder-wrap .progress {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
    /* --- ДОБАВЛЕНО/ОБНОВЛЕНО --- */
    height: 15px !important; /* Высота полосы прогресса */
    background-color: #f0f0f0 !important; /* Фон непройденной части (светло-серый) */
    border-radius: 50px !important; /* Закругление (для .progress-bar-unlock) */
    overflow: hidden !important; /* Важно для корректного отображения прогресс-бара */
    position: relative !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Легкая тень для глубины */
    /* - КОНЕЦ ДОБАВЛЕНО/ОБНОВЛЕНО - */
}

/* - НОВЫЕ СТИЛИ ДЛЯ ВНУТРЕННИХ ЭЛЕМЕНТОВ ПРОГРЕССА В ПАПКАХ - */

/* Пройденная часть Прогресса */
a.folder-wrap .course-progress-wrap .progress-bar {
    height: 100% !important; /* Заполняет всю высоту контейнера .progress */
    border-radius: 50px !important; /* Закругление (для левого края, если <100%) */
    /* ИСПОЛЬЗУЕМ ВАШИ ПЕРЕМЕННЫЕ ИЗ ХЛЕБНЫХ КРОШЕК */
    background-image: linear-gradient(to right, #fffc00 0%, #FF9800 100%) !important; /* <--- ИЗМЕНЕНО: цвета прописаны напрямую */
    background-size: 100% 100% !important; /* Чтобы градиент#FF9800 был от начала до конца заполненной части */
    transition: width 0.6s ease !important; /* Плавное изменение при обновлении процента */
    display: flex !important; /* Для выравнивания текста внутри, если он будет */
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important; /* Скрываем стандартный текст "sr-only", если он показывается */
    font-size: 0 !important; /* Убираем размер шрифта для sr-only */
    line-height: 0 !important; /* Убираем line-height для sr-only */
}

/* Текст процента прохождения (например, "20%") */
a.folder-wrap .course-progress-wrap .progress-count {
    font-size: 0.9em !important;
    font-weight: 600 !important;
    color: #555 !important; /* Цвет текста процента */
    min-width: 40px !important; /* Минимальная ширина, чтобы текст не прыгал */
    text-align: right !important; /* Выравнивание по правому краю */
    flex-shrink: 0 !important; /* Не сжимается */
}

/* Скрываем элемент sr-only, который предназначен для скринридеров */
a.folder-wrap .course-progress-wrap .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

/* === ЧАСТЬ 2: СКРЫВАЕМ ВЕСЬ ОРИГИНАЛЬНЫЙ SVG-МУСОР И ТЕГИ IMG === */

.folder-wrap .folder-sub-front,
.folder-wrap .folder-front,
.folder-wrap .folder-back,
.folder-wrap .folder-sub,
.folder-wrap .folder-sub-back,
.folder-wrap .files-group,
.folder-wrap img.course-cover-image { /* Скрываем и обычные картинки, если они есть */
    display: none !important;
}


/* === ЧАСТЬ 3: ФИКС ДЛЯ СЕТКИ === */

.row:has(.folder-wrap) {
    display: flex !important;
    flex-wrap: wrap !important;
}
.row:has(.folder-wrap) > div[class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
}


/* --- НОВЫЙ БЛОК: АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ (1 ПАПКА В РЯДУ) --- */
@media (max-width: 767px) { /* Медиа-запрос для экранов шириной до 767px (мобильные устройства) */

    /* 1. Настройка сетки для 1 колонки в ряду */
    .row:has(.folder-wrap) > div[class*="col-"] {
        width: 100% !important; /* Каждая колонка занимает всю ширину */
        max-width: 100% !important; /* Ограничиваем максимальную ширину */
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 15px !important; /* Отступ между карточками */
    }
    .row:has(.folder-wrap) {
        margin-left: -10px !important; /* Компенсация padding колонок */
        margin-right: -10px !important; /* Компенсация padding колонок */
    }

    /* 2. Изображение в пропорции 4:3, как и исходные фото (без обрезки) */
    a.folder-wrap::before {
        height: 0 !important; /* Обнуляем фиксированную высоту */
        padding-bottom: 75% !important; /* Пропорции 4:3 (3/4 = 0.75) */
        background-size: cover !important; /* Фон заполняет контейнер */
        background-position: center center !important; /* Центрируем фон */
    }

    /* 3. Заголовок — крупнее и до 2 строк, чтобы название было видно */
    a.folder-wrap .folder-content h1.title {
        min-height: auto !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 18px !important; /* Крупнее, чем на десктопе (16px) */
        line-height: 1.35 !important;
    }

    /* 4. Чуть больше внутренних отступов контента */
    a.folder-wrap .folder-content {
        padding: 18px !important;
    }

    /* 5. Если внизу карточки нечего показывать, убираем пустую белую полосу.
       Заголовок при этом остаётся в DOM (доступность), просто контент схлопывается. */
    a.folder-wrap.folder-no-bottom .bottom-icons {
        display: none !important;
    }
    a.folder-wrap.folder-no-bottom[style*="--card-image"] .folder-content {
        padding: 0 !important;
        min-height: 0 !important;
        flex-grow: 0 !important;
    }
}
/* --- КОНЕЦ НОВОГО БЛОКА АДАПТИВНОСТИ --- */

/* --- СКРЫВАЕМ ПУСТОЙ ЗАГОЛОВОК СТРАНИЦЫ "Онлайн-курсы и видео мастер-классы FomiToys" --- */
/* Скрываем только блоки без описания (с кнопкой "Получить доступ"), чтобы не трогать шапку уроков */
.page-title-row:not(:has(.page-description-content)) {
    display: none !important;
}

/* --- УМЕНЬШАЕМ ОТСТУПЫ ВОКРУГ ЛОГОТИПА НА МОБИЛЬНЫХ --- */
@media (max-width: 767px) {
    /* Обнуляем ВСЕ отступы у логотипа и всех его обёрток */
    .brand-row,
    .brand-row .container,
    .brand-row .row,
    .brand-row .flex-logo-wrap,
    .brand-row .wpm_default_header {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    /* Контейнер занимает всю ширину экрана, содержимое по центру */
    .brand-row {
        display: flex !important;
        justify-content: center !important;
    }
    .brand-row .container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .brand-row .row,
    .brand-row .flex-logo-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Логотип показываем в натуральном размере */
    .brand-row .wpm_default_header {
        display: flex !important;
        justify-content: center !important; /* Центрируем по горизонтали */
        align-items: center !important; /* Центрируем по вертикали */
    }
    .brand-row .brand-logo {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important; /* Не ограничиваем, но не даём вылезти за экран */
        margin: 0 !important;
    }
}
/* --- КОРЗИНА: превью товара в пропорции 4:3, как исходные обложки --- */
@supports (aspect-ratio: 4 / 3) {
    .woocommerce-cart-form .tab-content .folder-wrap.folder-image {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* round-avatar-css-free.css */
/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Круглые аватары'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Закругляет аватары в комментариях и в домашних заданиях.'; */

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* Круглые Аватары в комментариях */

.comments-list .comment .comment-meta-wrap .comment-avatar img {
	border-radius: 100%;
}

/* Круглое превью аватара ученика в ДЗ */

.content-wrap .discussion-form-wrap .discussion-form .author img {
	border-radius: 100%;
}

/* Круглое превью аватара админа в ДЗ */

.discussion-list .comment-item .comment .comment-meta-wrap .comment-avatar img {
    border-radius: 100%;
}