/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Шапка как Баннер + Лого 2.0'; */

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

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

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

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

:root {

/* Закругление шапки */
--round-super-shapka-header-card: 25px;

/* Закругление логотипа в шапке */
--round-logo-super-shapka-header-card: 100%;

/* Толщина рамки логотипа в шапке */
--border-width-logo-super-shapka-header-card: 4px;

/* Цвет рамки логотипа в шапке */
--border-color-logo-super-shapka-header-card: #ffffff;

/* Фон логотипа в шапке */
--bg-color-logo-super-shapka-header-card: #F7F8F9;

/* Цвет и прозрачность внешней тени логотипа в шапке */
--shadow-color-logo-super-shapka-header-card: rgba(0, 0, 0, 0.15);

/* Внутренний отступ логотипа в шапке */
--shadow-padding-logo-super-shapka-header-card: 0px;

}

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

/* --------------------------------------- */
/* ШАПКА 2.0 В ВИДЕ БАННЕРА + ЛОГОТИП 2.0  */
/* --------------------------------------- */

/* Раскомментируйте display, чтобы убрать Шапку и Лого на мобильных */

@media only screen and (max-width : 767px) {

.site-content .brand-row {
	/* display: none; */
}
}

/* Блок Шапки */

.site-content .brand-row {
	display: flex;
    align-items: end;
    justify-self: center;
    border-radius: var(--round-super-shapka-header-card);
    padding: 0;
    margin: 40px auto 0;
	background-size: contain;
	/* aspect-ratio: 4.061 / 1; */
    /* max-height: fit-content; */
}

/* Блок Шапки на разных экранах */

@media (min-width: 1400px) {

.site-content .brand-row {
	height: 330px;
    width: 1338px;
}
}

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

.site-content .brand-row {
	height: 281px;
	width: 1140px;
}
}

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

.site-content .brand-row {
	height: 231px;
	width: 940px;
}
}

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

.site-content .brand-row {
	height: 178px;
	width: 720px;
}
}

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

.site-content .brand-row {
	height: 84px;
	width: 340px;
}
}

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

.site-content .brand-row {
	height: 89px;
	width: 360px;
}
}

/* Контейнер Логотипа */

.site-content .brand-row .container {
	padding: 0;
	margin: 0 auto;
	position: relative;
    /* margin: 0; */
}

.site-content .brand-row .container .row {
	width: 100%;
    margin: 0;
}

/* Контейнер Логотипа на разных экранах */

@media (min-width: 1400px) {

.site-content .brand-row .container {
	bottom: 30px;
	width: 95%;
}
}

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

.site-content .brand-row .container {
	bottom: 30px;
	width: 94%;
}
}

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

.site-content .brand-row .container {
	bottom: 30px;
	width: 93%;
}
}

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

.site-content .brand-row .container {
	width: 95%;
	align-self: center;
}
}

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

.site-content .brand-row .container {
	width: 93%;
	align-self: center;
}
}

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

.site-content .brand-row .container {
	width: 94%;
	align-self: center;
}
}

/* Обёртка Логотипа */

.site-content .brand-row .flex-logo-wrap {
    padding: 0;
    margin: 0;
    min-height: unset;
	justify-content: flex-start;
}

/* Дизайн Логотипа */

.site-content .brand-row .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content .brand-row .flex-logo-wrap a.wpm_default_header .brand-logo {
	border-radius: var(--round-logo-super-shapka-header-card);
	border: var(--border-width-logo-super-shapka-header-card) solid var(--border-color-logo-super-shapka-header-card);
    background-color: var(--bg-color-logo-super-shapka-header-card);
	box-shadow: 5px 10px 25px 0px var(--shadow-color-logo-super-shapka-header-card);
	padding: var(--shadow-padding-logo-super-shapka-header-card);
}

/* Размер Логотипа на разных экранах */

@media (min-width: 1400px) {

.site-content .brand-row .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content .brand-row .flex-logo-wrap a.wpm_default_header .brand-logo {
	max-height: 150px;
    height: 150px;
}
}

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

.site-content .brand-row .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content .brand-row .flex-logo-wrap a.wpm_default_header .brand-logo {
	max-height: 150px;
    height: 150px;
}
}

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

.site-content .brand-row .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content .brand-row .flex-logo-wrap a.wpm_default_header .brand-logo {
	max-height: 150px;
    height: 150px;
}
}

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

.site-content .brand-row .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content .brand-row .flex-logo-wrap a.wpm_default_header .brand-logo {
	max-height: 150px;
    height: 150px;
}
}

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

.site-content .brand-row .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content .brand-row .flex-logo-wrap a.wpm_default_header .brand-logo {
	max-height: 70px;
    height: 70px;
}
}

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

.site-content .brand-row .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content .brand-row .flex-logo-wrap a.wpm_default_header .brand-logo {
	max-height: 70px;
    height: 70px;
}
}

/* НАСТРОЙКИ ЛОГОТИПА, КОГДА ОТКЛЮЧЕНА ШАПКА В АДМИНКЕ */
/* --------------------------------------------------- */

/* Блок Шапки */
/* Отменяем текущие настройки в Рубриках, где есть Царский блок «ШАПКА» */

.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background: transparent;"],
/* корректировка для страницы входа */
.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background-image: url('')"] {
    /* display: none; */
	height: auto;
	/* убираем уникальную шапку, если она задана в настройках рубрики */
	background-image: none !important;
}

/* Контейнер Логотипа, если ОТКЛЮЧЕНА ШАПКА */

.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background: transparent;"] .container,
/* корректировка для страницы входа */
.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background-image: url('')"] .container {
	bottom: 0;
	width: 100%;
}

/* Обёртка Логотипа, если ОТКЛЮЧЕНА ШАПКА */
/* Переносим в центр, иначе Лого будет слева и некрасиво смотреться */
/* Отменяем эту настройку в Рубриках, где есть Царский блок «ШАПКА» */

.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background: transparent;"] .flex-logo-wrap,
/* корректировка для страницы входа */
.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background-image: url('')"] .flex-logo-wrap {
	justify-content: center;
}

/* Размер Логотипа, если ОТКЛЮЧЕНА ШАПКА */

.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background: transparent;"] .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background: transparent;"] .flex-logo-wrap a.wpm_default_header .brand-logo,
/* корректировка для страницы входа */
.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background-image: url('')"] .flex-logo-wrap span.wpm_default_header .brand-logo,
.site-content:not(:has(a[href*="wpm-category/header-card-"][class*="folder-wrap"])) .brand-row[style*="background-image: url('')"] .flex-logo-wrap a.wpm_default_header .brand-logo {
	max-height: 200px;
    height: 200px;
}