/*
Theme Name: Patch Child
Text Domain: patch
Domain Path: /languages/
Template: patch

Patch is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/


/* ADD YOUR NEW CSS RULES HERE */

/* This file assumes you wish to add new CSS rules that will overwrite the ones in the parent's CSS files
If you wish however, you can copy the whole style.css file from the parent here and hack at it - see functions.php for more details.
In that case please remember that you still need to retain the header above (replace the header of the parent style.css with the one above),
specifically the 'Template: patch' line. */


 
/* Грузим скрытный стиль для комплайнз - иначе он выскакивает большим крестом при загрузке */
.cmplz-cookiebanner.cmplz-hidden {
	display: none !important;
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 100 200 300 400 500 600 700;
    src: url('/wp-content/uploads/fonts/Oswald-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}

/* Нужные элементы используют шрифт Oswald */

/* h1, h2, h3, h4, h5, h6, {
    font-family: 'Oswald', sans-serif !important;
}
*/


/* Меняем цвет даты-времени в посте для контрастности
        + тест - закешированный css или новый
        меняем 000000(черный) на ff0000(красный) */
.posted-on {
	color: #000000; 
	display: inline-block;
	margin-left: 4px;
}

/* Убираем глюк LCP Litehouse */
/* для 
Главной Мб 
Категорий Мб
Статей Мб+Дк
*/
.entry-image-shadow {
	opacity: 1 !important; 
	transition: none !important; 
	transition-delay: 0s !important;
}

/* для 
Главной Деск
Категорий Деск
*/
.entry-card, .site-header {
  	opacity: 1 !important; 
	transition: none !important; 
	transition-delay: 0s !important;
}

/* Меняем черные квадраты пока не загрузились картинки на серые */
.entry-card .entry-image {
    background-color: #f1f1f1 !important;
}

/* Попытка "спасти" шрифты без кук с лайтспидкэшем 
.entry-card .entry-header--long .entry-title, .nav--main a {
	font-weight: 300 !important;
	font-size: 26px !important;
	line-height: 1.45 !important;
	font-family: Oswald, sans-serif !important;
	letter-spacing: 0.04em !important;
} */

/* Подмена цвета пустой плашки без картинки на главной странице 
.entry-card--text .entry-header {
    background: #f0f0f0 !important;
	    border: 1px solid #000;
}

.entry-card--text .entry-title {
    color: black !important;
}
*/

/* Все остальные 0.01 которые нашел. на LSP-баг не влияют. 
.entry-card .entry-image .hover {
	opacity: 0.01;
}

.site:after {
	opacity: 0.01;
}

.entry-card .entry-meta {
	opacity: 0.01;
}

.comment-reply-link {
	opacity: 0.01;
} 
*/

/* - не видно меню на мобилке, если разрешено
.nav--main ul {
		opacity: 0.01;
	}
*/
/* Конец всех LCP заморочек*/



/* Делаем черные стрелки, гугл их "плохо" видит */
.page-numbers.prev,
.page-numbers.next {
	border: 0;
	border-radius: 0;
	color: #000000;
	height: auto;
	margin: 0;
	position: absolute;
	text-transform: uppercase; 
	top: 0;
	width: auto;
	opacity: 0.8;
}


.page-numbers.prev.disabled,
.page-numbers.next.disabled {
	opacity: 0.8; 
	pointer-events: none;
}


/* Стили для растягивания контейнера оглавления на всю ширину и улучшения доступности ссылок */
#ez-toc-container {
    width: 100%; /* Устанавливаем ширину контейнера на 100% от ширины экрана */
    box-sizing: border-box; /* Убедимся, что паддинги и бордеры включены в ширину элемента */
    padding: 4; /* Убираем внутренние отступы */
    margin: 4 auto; /* Убираем внешние отступы и центрируем если нужно */
}

.ez-toc-list {
    padding-left: 0; /* Убираем отступы списка, если они есть */
}

.ez-toc-list li {
    margin: 0; /* Убираем внешние отступы элементов списка */
}

/* Вертикальная центровка "сложенного" оглавления содержания */
#ez-toc-container .ez-toc-title {
    position: relative;
    bottom: 2px;
}

/* Увеличение размера и отступов ссылок в оглавлении только для экранов меньше 900 пикселей */
@media only screen and (max-width: 899px) {
    .ez-toc-link {
        padding: 12px; /* Добавляем внутренний отступ для увеличения области нажатия */
        display: block; /* Ссылки будут растягиваться на всю ширину */
        min-height: 48px; /* Устанавливаем минимальную высоту для области нажатия */
        width: 100%; /* Ссылки будут растягиваться на всю ширину контейнера */
        box-sizing: border-box; /* Включаем паддинги и бордеры в ширину элемента */
    }
}

/* Увеличение отступа элементов меню на экранах больше 900 пикселей */
@media only screen and (min-width: 900px) {
    .ez-toc-link {
        padding: 4px; /* Добавляем внутренний отступ для увеличения области нажатия */
		margin-left: 10px;
    }
}

/* Меняем шрифт и размер для элементов меню */
.ez-toc-title-container,
.ez-toc-list {
    font-family: Oswald, sans-serif;
    font-size: 120%; /* или любой другой размер, который вам нужен */
   /* font-weight: normal; /* или любой другой размер, который вам нужен */
}



/* ---------------- */
/* Оптимизируем блок комментариев ---------------- */
/* ---------------- */

/* Отображаем Comment над полем комментария */
.comment-form-comment label,
.logged-in-as label {
	display: block;
}

/* Делаем желтые рамки для разделения комментариев экраны больше 900 пх */
@media only screen and (min-width: 900px) {

/* Выдеяем "Уголком" группы комментариев */
	/* Стили для комментариев первого уровня */
	.comment.depth-1 {
		position: relative;
		margin-top: 45px;
	  /* Другие свойства */
	}
	
	.comment.depth-2 {
		margin-top:-10px;
	  /* Другие свойства */
	}
	
	.comment.depth-3 {
		margin-top: -10px;
	  /* Другие свойства */
	}
	
	/* Верхняя граница */
	.comment.depth-1::before {
	  content: '';
	  position: absolute;
	  top: -15px;
	  right: -10px; /* Начало с правого верхнего угла */
	  width: 100%;
	  height: 15px; /* Высота верхней границы */
	  background: linear-gradient(to left, #ffde0088, transparent);
	}

	/* Правая граница */
	.comment.depth-1::after {
	  content: '';
	  position: absolute;
	  top: -15px;
	  right: -25px; /* Смещение правой границы вправо */
	  width: 15px; /* Ширина правой границы */
	  height: 100%;
	  background: linear-gradient(to bottom, #ffde0088, transparent);
	}
	
}



/* Оптимизируем блок комментариев только для экранов между 481 и 900 пикселей */
@media only screen and (min-width: 481px) and (max-width: 899px) {

/* Выдеяем "Уголком" группы комментариев */
/* Стили для комментариев первого уровня */
	.comment.depth-1 {
		position: relative;
		margin-top: 40px;
	  /* Другие свойства */
	}
	
	.comment.depth-2 {
		margin-top:-5px;
	  /* Другие свойства */
	}
	
	.comment.depth-3 {
		margin-top: -5px;
	  /* Другие свойства */
	}

/* Верхняя граница */
	.comment.depth-1::before {
	  content: '';
	  position: absolute;
	  top: -12px;
	  right: 0px; /* Начало с правого верхнего угла */
	  width: 100%;
	  height: 12px; /* Высота верхней границы */
	  background: linear-gradient(to left, #ffde0088, transparent);
	}

/* Правая граница */
	.comment.depth-1::after {
	  content: '';
	  position: absolute;
	  top: -12px;
	  right: -12px; /* Смещение правой границы вправо */
	  width: 12px; /* Ширина правой границы */
	  height: 100%;
	  background: linear-gradient(to bottom, #ffde0088, transparent);
	}


	
/* Уменьшаем нумерацию */
		span.comment-number {
		font-size: 0.9rem;
		font-weight: 300;
		height: 30px;
		line-height: 30px;
		text-align: center;
		width: 30px;
		margin-top: -2px;
		}
	
		span.comment-number.comment-number--dark.total {
		font-size: 1rem;
		font-weight: 300;
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 40px;
		}

	.comment__content.comment {
		margin-top: 10px;
	}
	
/* Сдвигаем вертикальную линию влево (50% от ширины и высоты) */
		.comments-area:before {
		left: 15px;
		top: 66px; /* Чуть вниз, чтобы не торчало сверху */ 
		bottom: -15px; /* Чуть вниз, чтобы не торчало сверху */
		}
	
/* Смещаем автора влево на 3 пикселей */	
		.comment__meta.comment-author,
		.comment__author-name {
			margin-left: -3px;
		}

/* Смещаем коммент влево на 20 пикселей */	
		.comment__content.comment {
			margin-left: -20px;
		}
	
/* Сжимаем расстояние между комментариями */	
		.media__body, .media__body > :last-child {
		margin-bottom: -1px;
		}

/* Расширяем комменты "вправо" */
	aside {
   	 	width: calc(100% + 12px);
	}
	
/* Уменьшаем точку и "+" */	
	.comments-area:after,
	.comment-reply-title:before {
		font-size: 1rem;
		font-weight: 300;
		height: 35px;
		line-height: 35px;
		text-align: center;
		width: 35px;
		margin-top: 3px;
	}	

/* Двигаем CTA влево к плюсу */
	.comment-reply-title {
    	padding-left: -10px;
	}

/* Двигаем дочерние блоки на мобилке вправо, делаем структуру */	
	li.comment .children li,
	li.pingback .children li,
	li.trackback .children li {
		margin-left: 22px; /* коммент 2-го уровня */
		padding-left: -13px; /* коммент 3-го уровня */
	}
	
/* Двигаем и меняем размер горизонтальных линий (строка 4241)*/
/* Смещаем линию влево */
	li.comment .children li:before, /* чтобы найти -копируем эту строчку, жмем кмнд+ф, в Elements - в окне кода */
	li.pingback .children li:before,
	li.trackback .children li:before {
		border-top: 1px solid currentColor;
		content: "";
		opacity: 0.7; 
		position: absolute;
		top: 14px;
		left: -47px; /* короче, это двигает обе линии */
	}
	
/* Меняем длину линии 2-й глубины */
	li.depth-2:before {
    	width: 10px;
	}	

/* Меняем длину и смещение линии 2-й глубины */
	li.depth-3:before {
		width: 30px;
    	margin-left: -22px;
	}	


}




/* Оптимизируем блок комментариев только для экранов меньше 481 пикселя */
@media only screen and (max-width: 480px) {

/* Выдеяем "Уголком" группы комментариев */
/* Стили для комментариев первого уровня */
	.comment.depth-1 {
		position: relative;
		margin-top: 35px;
	  /* Другие свойства */
	}
	
	.comment.depth-2 {
		margin-top:-10px;
	  /* Другие свойства */
	}
	
	.comment.depth-3 {
		margin-top: -10px;
	  /* Другие свойства */
	}

/* Верхняя граница */
	.comment.depth-1::before {
	  content: '';
	  position: absolute;
	  top: -10px;
	  right: 0; /* Начало с правого верхнего угла */
	  width: 100%;
	  height: 10px; /* Высота верхней границы */
	  background: linear-gradient(to left, #ffde0088, transparent);
	}

/* Правая граница */
	.comment.depth-1::after {
	  content: '';
	  position: absolute;
	  top: -10px;
	  right: -10px; /* Смещение правой границы вправо */
	  width: 10px; /* Ширина правой границы */
	  height: 100%;
	  background: linear-gradient(to bottom, #ffde0088, transparent);
	}


	
/* Смещаем блок комментариев влево на 25 пикселей */
		#comments.comments-area {
			margin-left: -25px;
		}

/* Уменьшаем нумерацию */
		span.comment-number {
		font-size: 0.7rem;
		font-weight: 300;
		height: 20px;
		line-height: 20px;
		text-align: center;
		width: 20px;
		}
	
		span.comment-number.comment-number--dark.total {
		font-size: 1rem;
		font-weight: 300;
		height: 35px;
		line-height: 35px;
		text-align: center;
		width: 35px;
		}
	
/* Сдвигаем вертикальную линию влево (50% от ширины и высоты) */
		.comments-area:before {
		left: 10px;
		top: 66px; /* Чуть вниз, чтобы не торчало сверху */ 
		bottom: -15px; /* Чуть вниз, чтобы не торчало сверху */
		}
	
/* Смещаем автора влево на 25 пикселей */	
		.comment__meta.comment-author,
		.comment__author-name {
			margin-left: -10px;
		}

/* Смещаем коммент влево на 35 пикселей */	
		.comment__content.comment {
			margin-left: -35px;
		}
	
/* Сжимаем расстояние между комментариями */	
		.media__body, .media__body > :last-child {
		margin-bottom: -7px;
		}

/* Расширяем комменты "вправо" */
	aside {
   	 	width: calc(100% + 12px);
	}
	
/* Уменьшаем точку и "+" */	
	.comments-area:after,
	.comment-reply-title:before {
		font-size: 1rem;
		font-weight: 300;
		height: 25px;
		line-height: 25px;
		text-align: center;
		width: 25px;
		margin-top: 8px;
	}	

/* Двигаем CTA влево к плюсу */
	.comment-reply-title {
    	padding-left: 40px;
	}

/* Двигаем дочерние блоки на мобилке вправо, делаем структуру */	
	li.comment .children li,
	li.pingback .children li,
	li.trackback .children li {
		margin-left: 15px; /* коммент 2-го уровня */
		padding-left: -6px; /* коммент 3-го уровня */
	}
	
/* Двигаем и меняем размер горизонтальных линий (строка 4241)*/
/* Смещаем линию влево */
	li.comment .children li:before, /* чтобы найти -копируем эту строчку, жмем кмнд+ф, в Elements - в окне кода */
	li.pingback .children li:before,
	li.trackback .children li:before {
		border-top: 1px solid currentColor;
		content: "";
		opacity: 0.7; 
		position: absolute;
		top: 10px;
		left: -45px; /* короче, это двигает обе линии */
	}
	
/* Меняем длину линии 2-й глубины */
	li.depth-2:before {
    	width: 5px;
	}	

/* Меняем длину и смещение линии 2-й глубины */
	li.depth-3:before {
		width: 23px;
    	margin-left: -16px;
	}

/* Расширяем форму на мобилке - была смещена вправо */	
	.comment-form {
		margin-left: -12px;
	}

/* В ответе на одиночный коммент делаем зазоры, было слишком близко */	
	.comment-respond {
		margin-left: -12px;
		margin-top: 30px;
	}

	div#respond #reply-title {
	  margin-top: 35px;
	}
	
}



/* Увеличение размера чекбокса "Сохранить мое имя в комментариях" и 
Получать новые комментарии" и поля ввода URL только для экранов меньше 900 пикселей */
@media only screen and (max-width: 900px) {
    #wp-comment-cookies-consent {
        min-width: 24px;
        min-height: 24px;
        margin-top: 24px; /* Устанавливаем отступ сверху в 24 пикселя */
    }
    #subscribe-reloaded {
        min-width: 24px;
        min-height: 24px;
        margin-top: 24px; /* Устанавливаем отступ сверху в 24 пикселя */
    }
}



/* В верхней строке "Записи" делаем в 2 строки: каталог, дату + просмотры с тэгом */
.cat-links {
    background-color: yellow;
    display: inline; /* Изменено с inline-block на inline */
    vertical-align: middle; /* Выравнивание по вертикали */
}

/*
.entry-meta > .clearfix {
    display: inline;  Изменено с block на inline 
}
*/

/* Тэг - под записью - делаем более черным для LihtHouse и с желтым фоном */
.tags-links a {
    color: #000000;
    opacity: 0.9;
    background-color: #ffde00;
	letter-spacing: 0em;
    font-family: Oswald, sans-serif;
    font-size: 0.8rem;
}

/* Убрал слэш перед датой - на мобилке перенос идет со слешем - некрасиво */
.posted-on:before {
	content: "";
	margin-right: 0px;
}

/* Правка ширины заголовка и картинки для разделов каталога и тэгов */
@media only screen and (min-width: 740px) and (max-width: 899px) {
    .page-header.entry-card.is-visible {
        margin-left: 24px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 739px) {
    .page-header.entry-card.is-visible {
        margin-left: 24px;
    }
}

@media only screen and (max-width: 479px) {
    .page-header.entry-card.is-visible {
        margin-left: 0px;
        margin-right: 24px;
    }
}

/* Правка отступа от шапки при просмотре каталога и тэгов */
@media only screen and (max-width: 899px) {
    .layout-grid .page-header {
        margin-top: 0px;
    }
}


/* Скрыл время из шапки поста */
.entry-time {
    display: none;
}

/* Удалил дату и время из комментариев в функшнс 
.comment__time{
    display: none;
}*/


/* Сжал между буквами меню для показа на компах */
@media only screen and (min-width: 900px) {
	.nav--main a {
   		letter-spacing: -0.01em;
		line-height: 1 !important;
	}
}

/* Сжал между буквами меню для показа на телефонах */
@media only screen and (max-width: 899px) {
	.nav--main a {
   		letter-spacing: 0.01em;
	}
}

/* Костыль для НЕотображения только что введенного комментария из-за кэширования */
.comment-form-cookies-consent label::after {
    content: " Please note: Your comment will be reviewed and, if approved, published within 24 hours after submission. ";
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
    color: #666; /* Измените на нужный цвет */
}

/* Убираю черно-белое фото в аватарке автора */
.author-info__avatar {
    filter: none !important;
}

/* Ниже блок форматирования фотографии и заголовков для страницы
 * About US
 * Конкретно для page-id-204 */
body.page-id-204 span.alignnone {
    display: block;
    text-align: left;
}

@media only screen and (min-width: 900px) {
body.page-id-204 span.alignnone img {
    display: block;
    margin-left: 72px; /* Отступ слева */
    margin-top: 15px; /* Отступ сверху, измените значение в соответствии с вашими нуждами */
    margin-bottom: -22px;
	}
}

@media only screen and (max-width: 899px) {
body.page-id-204 span.alignnone img {
    display: block;
    margin-left: 0px; /* Отступ слева */
    margin-top: 15px; /* Отступ сверху, измените значение в соответствии с вашими нуждами */
    margin-bottom: -22px;
	}
}

body.page-id-204 h3.p1 {
    margin-top: 0px; /* Отступ сверху для h3 */
    margin-bottom: 15px; /* Отступ снизу для h3 */
}

body.page-id-204 h4 {
    margin-top: 0px; /* Отступ сверху для h4 */
    margin-bottom: 15px; /* Отступ снизу для h4 */
}


/* Настройка Total Time to do
 * 
 */
.schema-how-to-total-time {
    text-align: right; /* Выравнивание текста по правому краю */
    margin-top: -10px; /* Отступ сверху */
    margin-bottom: 0px; /* Отступ снизу */
}


/* Стиль для HowTo 
 * 
 */
/* Стиль для жирного текста "Time needed" */
.schema-how-to .schema-how-to-total-time .schema-how-to-duration-time-text {
    font-weight: bold;
}

.schema-how-to-step-text {
    color: #000000;
    margin-bottom: 15px;
}

/* Желтые цифры */
.schema-how-to .schema-how-to-step::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    background-color: #ffde00; /* Желтый фон */
    color: #000; /* Цвет текста */
    font-weight: bold;
    padding: 0 8px; /* Отступы вокруг номера */
    margin-right: 6px; /* Расстояние между номером и текстом шага */
	    margin-left: -20px; /* Расстояние между номером и текстом шага */
    border-radius: 4px; /* Скругленные углы фона номера */
    display: inline-block;
}

/* Скрываем оригинальные цифры счетчика */
.schema-how-to .schema-how-to-step {
    list-style: none;
}

/* Инициализация нового счетчика */
.schema-how-to {
    counter-reset: step-counter;
}

/* Линия для первого шага - после описания */
.schema-how-to .schema-how-to-description {
    border-bottom: 1px dotted #ccc; /* пунктирная граница */
    padding-bottom: 25px; /* отступ снизу */
    margin-bottom: 0px; /* отступ до списка шагов */
		margin-left: 0px; /* отступ до списка шагов */
}

/* Линия для разделения между шагами */
.schema-how-to .schema-how-to-step:not(:last-child) {
    border-bottom: 1px dotted #ccc; /* пунктирная граница */
    padding-bottom: 0px; /* отступ снизу */
    margin-bottom: 0px; /* отступ до следующего шага */
}

/* Стиль для блока FAQ
 * 
 */
/* Вопросы */
.schema-faq .schema-faq-question::before {
    content: "Q";
    background-color: #ffde00; /* Желтый фон */
    color: #000; /* Цвет текста */
    font-weight: bold;
    padding: 0 8px; /* Отступы вокруг буквы */
    margin-right: 6px; /* Расстояние между буквой и текстом */
	margin-left: 0px; /* Расстояние между буквой и текстом  */
	margin-top: 0px; /* Расстояние между буквой и текстом */
	margin-bottom: 6px; /* Расстояние между буквой и текстом  */
    border-radius: 4px; /* Скругленные углы фона буквы */
    display: inline-block;
}

.schema-faq .schema-faq-question {
    font-weight: normal;
    color: #000000;
    margin-bottom: 5px;
}

/* Ответы */
.schema-faq .schema-faq-answer::before {
    content: "A";
    background-color: #ffde00; /* Желтый фон */
    color: #000; /* Цвет текста */
    font-weight: bold;
    padding: 0 8px; /* Отступы вокруг буквы */
    margin-right: 6px; /* Расстояние между буквой и текстом */
	margin-left: 0px; /* Расстояние между буквой и текстом  */
    border-radius: 4px; /* Скругленные углы фона буквы */
    display: inline-block;
}

.schema-faq .schema-faq-answer {
    color: #000000;
    margin-bottom: 25px;
}

/* Линия для каждой секции FAQ */
.schema-faq .schema-faq-section {
    border-top: 1px dotted #ccc; /* пунктирная граница сверху */
    padding-top: 0px; /* отступ сверху */
    margin-top: 20px; /* отступ до начала следующей секции */
}


/* Буквица для статьи 
 * 
 */
/* Применение стиля буквицы к первому абзацу внутри статей и постов */
article.post p:first-of-type::first-letter,
article.type-post p:first-of-type::first-letter {
    float: left;
    font-size: 4em; /* Указывает большой размер, который можно изменить по необходимости */
    line-height: 1;
	font-weight: normal;
    margin-right: 0.1em;
    background-color: #ffde00; /* Желтый фон */
    color: #000; /* Цвет текста */
    padding: 5px;
    border-radius: 4px; /* Скругленные углы фона буквы */
}

/* Применение стиля буквицы к первому абзацу внутри Биографии */
article.post .author-info p:first-of-type::first-letter,
article.type-post .author-info p:first-of-type::first-letter {
    float: left;
    font-size: 2em; /* Указывает большой размер, который можно изменить по необходимости */
    line-height: 1;
	font-weight: normal;
    margin-right: 0.1em;
    background-color: #ffde00; /* Желтый фон */
    color: #000; /* Цвет текста */
    padding: 5px;
    border-radius: 4px; /* Скругленные углы фона буквы */
}

/* Отмена буквиц в остальных абзацах */
.schema-how-to .schema-how-to-total-time::first-letter,
.schema-how-to .schema-how-to-description::first-letter,
.schema-how-to .schema-how-to-step-text::first-letter,
.ez-toc-container p::first-letter,
.entry-header p::first-letter,
.entry-content.entry-content--long p::first-letter,
.entry-content.entry-content--short p::first-letter {
    font-weight: inherit !important;
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* Оформление предупреждения "Детальное изображение откроется в новой вкладке */
.image-notice {
    display: block;
    font-size: 0.8em;
    margin-top: 5px;
    color: #666;
    text-decoration: none; /* Убираем подчеркивание, чтобы выглядело как обычный текст */
    font-weight: normal; /* Устанавливаем нормальный вес текста */
    font-style: italic; /* Добавляем курсив */
    text-align: center !important; /* Центрирование ссылки */
    margin-bottom: 10px; /* Отступ снизу для улучшенной читабельности */
}

/* Уменьшаем отступ вокруг изображений в статье для мобилок */
body figure {
    margin: 1em 7px;
}

/* Задвигаем "обратно" подпись для картинок, которая выпирала "влево" */
@media only screen and (min-width: 900px) {
    .entry-content .wp-element-caption {
        margin-left: 72px;
        margin-right: 72px;
        max-width: 100%;
    }
}

@media only screen and (min-width: 900px) {
	.site-footer a {
		margin-top: 8px;

	}
	.nav--footer li:after {
		content: " " !important;
		margin: 10px 10px !important;
	}
}

/* Увеличиваем расстояние между элементами в меню Футера длв ГуглПейджспид */
@media (max-width: 480px) {
	  #menu-footer_menu li {
		margin-bottom: 15px; /* добавляет пространство снизу каждому элементу списка */
	  }

	.nav--footer li:after {
		content: " " !important;
		margin: 10px 10px;
	}
}



/* Увеличиваем ширину на "Кнопке с картинкой" - на мобилках "переносит" части слов */
@media only screen and (max-width: 900px) {
	.wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow .wp-block-group__inner-container {
		max-width: 100%;
	}
/* Увеличиваем ширину самой овальной кнопки "Кнопке с картинкой" - на мобилках "переносит" части слов */
	.wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow .wp-block-button__link {
		padding-left: 24px !important;
		padding-right: 24px !important;
}
}

/* Подсвечиваем желтым кнопку "Кнопке с картинкой"*/
	.wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow .wp-block-button__link {
		background-color: #ffde0066;
}

/* Увеличиваем ширину разрешенного текста "Кнопке с картинкой" и подгоняем текст*/
.wp-block-cover.alignfull {
	padding-right: 5% !important;
    padding-left: 7% !important;
}
.wp-container-core-group-is-layout-1.wp-container-core-group-is-layout-1 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 95% !important;
}
.wp-block-heading.has-text-align-left.has-white-color.has-text-color {
    font-size: 3.2rem !important;
}


/* Стиль для гиперссылок с классом ftrigger */
/* Не срабатывает, если это кнопка "Unlock..." с классом is-style-outline  */
.ftrigger:not(.is-style-outline) {
	background-color: #ffde00;
	box-shadow: white 0 0.8em inset;
	position: relative;
}


/* Меняем размер звездочек для WP Post Ratings */
.post-ratings img,
.post-ratings-loading img,
.post-ratings-image img {
	margin: 4px;
	transform: scale(1.5) translateY(4px);
	image-rendering: auto;
}

/* Стили CSS для анимации появления блока Отзывов */
/* Structured Data Plugin */

/* Основные стили для попап-окошка */
#saswp-sticky-review {
    position: fixed; /* Фиксированное позиционирование, элемент остаётся в одном месте при скроллинге */
    left: 2px; /* Смещение от левой части экрана экрана */
	transform: translateX(0%); /* Смещение элемента на 50% его ширины назад, чтобы центрировать его */
    bottom: -100%; /* Исходное положение за пределами видимой области */
    transition: bottom 1.5s ease-in-out; /* Плавная анимация изменения свойства bottom */
    z-index: 1000; /* Для того чтобы элемент был поверх других */
    background: white; /* Фон, его можно изменить */
    padding: 5px; /* Внутренние отступы вокруг содержимого */
    box-shadow: 0px -2px 10px rgba(0,0,0,0.3); /* Тень для лучшей видимости */
    width: auto; /* Автоматическая ширина в зависимости от содержимого */
    max-width: 95%; /* Максимальная ширина, чтобы избежать слишком большого расширения */
}
		
/* Модификатор для видимости попап-окошка */
#saswp-sticky-review.visible {
    bottom: 2px; /* Конечное положение для видимости */
}

/* Медиа-запрос для экранов шириной 900 пикселей и больше */
@media (min-width: 900px) {
    #saswp-sticky-review {
        left: 30px; /* Увеличение отступа до 25 пикселей */
    }
	#saswp-sticky-review.visible {
    	bottom: 10px; /* Конечное положение для видимости */
	}
}
		
/* Стили для кнопки внутри попап-окошка */
#saswp-sticky-review .saswp-popup-btn {
    position: relative; /* Относительное позиционирование внутри родителя */
    padding: 10px; /* Внутренние отступы вокруг кнопки для создания пространства */
    margin: auto; /* Центрирование внутри родительского блока */
    text-align: center; /* Центрирование текста или содержимого кнопки */

    position: fixed;
    top: auto;
    bottom: 0;
    font-family: Arial, sans-serif;
    z-index: 9;
    box-shadow: 0 20px 40px 8px rgba(0, 0, 0, .25);
    width: 300px;
    background: #fff;
    border: none;
    padding: 0;
    left: 0px;
}

/* WooCommerce - размер бандл-изображений на бандл-товарах при адаптивном ресайзе */
.woocommerce-page div.product div.bundled_product_images, .woocommerce-page #content div.product div.bundled_product_images, .woocommerce div.product div.bundled_product_images, .woocommerce #content div.product div.bundled_product_images {
    float: left;
    width: 20%;
    margin: 0;
}

.small_width.bundle_form div.bundled_product_summary .bundled_product_images, .small_width.composite_form .bundle_form div.bundled_product_summary .bundled_product_images {
    max-width: 30% !important;
}

/* WooCommerce - размер заголовков - кнопок на бандл-товарах */
h4.bundled_product_title.product_title {
    margin-bottom: -0.9rem;
	line-height: 1;
}

div.bundled_product_summary, .woocommerce div.product.bundled_product_summary {
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09) !important;
}

.bundled_product_summary .bundled_product_title a.bundled_product_permalink:before {
    font-size: 1.3em !important;
    top: 45% !important;
}

/* WooCommerce - расстояние между строками на странице "Order Received" */
.woocommerce ul.order_details li {
    margin-top: 7px;
}

.entry-content ol li, .entry-content ul li {
     padding-bottom: 0em; 
}

ol, ul {
     margin-bottom: 2.25rem !important;
}

/* Основные стили корзины для всех размеров экранов */
.custom-mini-cart {
	position: fixed;
    background: #ffde00; /* Фон блока */
    padding: 15px; /* Отступы внутри блока */
    border-radius: 5px; /* Скругление углов */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.65); /* Тень для блока */
    top: 18px;
    right: 18px;
    z-index: 125;
    border: 1px solid #808080ab;
	line-height: 1.8 ;
}

/* Стили корзины для мобилок */
@media only screen and (max-width: 900px) {
    .custom-mini-cart {
        position: fixed;
        top: 60px;
        right: 2px;
        z-index: 125;
        padding: 6px;
        background: #ffde00;
        border-radius: 5px;
        box-shadow: -5px 5px 4px rgba(0, 0, 0, 0.40);
        border: 1px solid #808080ab;
        line-height: 1.8;
    }
}

/* Кнопка открыть - закрыть меню, приоритет раскладки - выше корзины */
.navigation__trigger.js-nav-trigger {
    z-index: 250 !important;
}

/* Увеличение логотипа для мобильной версии */
.mobile-header .site-logo-link,
.mobile-header .site-logo-link img,
.mobile-header .custom-logo-link,
.mobile-header .custom-logo-link img,
.mobile-header .site-title,
.mobile-header .site-title img {
	height: 45px;
    margin-top: 2px;
}

/* Убрал желтые вертикальные штрихи в корзине WC + скрыл точки картинок в бандл */
.page .entry-content .wc-block-cart-item__image a {
    text-decoration: none; /* Убирает подчеркивание у ссылок */
	background-color: #ffffff00;

}
.page:not(.entry-card) .entry-content a:not([class]) {
	padding-left: 0px;
    padding-right: 0px;	
}

/* Настроил вывод списка бандл-товаров в корзине */
table.wc-block-cart-items .wc-block-cart-items__row.is-bundled__indented td.wc-block-cart-item__image a{
	height: 10px !important;
}

.wc-block-cart-items__row.is-bundled {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	line-height: 1.2 !important;
}

.wc-block-cart-items__row.is-bundled .wc-block-cart-item__wrap > * {
	margin-bottom: 0px !important;
}

.wc-block-cart-items .wc-block-cart-items__row.is-bundled__indented .wc-block-cart-item__wrap {
	padding-top: 1px !important;
	padding-bottom: 1px !important;
	margin-left: -50px;
	font-size: .875em !important;
	color: #333;
	font-weight: 500; 
}

.wc-block-cart-items .wc-block-cart-items__row.is-bundled__indented .wc-block-cart-item__wrap a {
    color: #333;
    font-weight: 400; 
}

/* Символ точки для буллет-перечисления бандлов */
.wc-block-cart-items .wc-block-cart-items__row.is-bundled__indented .wc-block-cart-item__wrap a::before {
    content: '• '; 
    color: #333; 
    margin-right: 5px;
}

/* Убрал желтые подчеркивания на вкладках товара */
.description_tab a,
.additional_information_tab a {
	background-color: #ffde0000 !important;
	box-shadow: #ffffff00 0 0em inset !important;
}

/* Делаем нормальную кнопку "Edit price" на странице корзины */
.wc-block-cart-item__edit .wc-block-components-button__text {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
}

.wc-block-components-button:not(.is-link).outlined:not(:focus) {
	border-radius: 5px;
    box-shadow: 0 0 3px 1px #3333336e !important;
}

.wc-block-cart-item__edit a {
	min-height: 2em !important;
}

/* Выравнивание текста внутри блока купона Discount */
.wc-block-components-totals-discount__coupon-list li {
    padding-bottom: 0.2em !important;
}

/* Меняем черные круглые кнопки в пустой корзине */
.wp-block-button__link.add_to_cart_button {
    border-radius: 0px !important;
    padding: calc(.4em) calc(1.1em) !important;
	background-color: #ffde0080;
	font-size: 1.3em !important;
	font-weight: 500 !important;
	color: #515151 !important;
}
.wp-block-button__link.add_to_cart_button:hover {
	background-color: #ffde00;
}

/* Меняем стиль заголовков товаров в пустой корзине */
.wc-block-grid__product-title {
	text-align: left !important;
    line-height: 1.25;
	padding: .5em 0 !important;
    margin: 0 !important;
    font-size: 1.3em !important;
	text-transform: uppercase !important;
	color: #171617 !important;
    font-weight: normal !important;
	letter-spacing: 0.03em !important;
	font-family: Oswald, sans-serif !important;
}
.wc-block-grid__product-price.price {
	text-align: left !important;	
}
.woocommerce-Price-amount.amount{
    font-weight: 400 !important;
    font-size: .557em !important;
	font-family: Roboto, sans-serif !important;
    font-size: 1.4em !important;
}

.wp-block-button.wc-block-grid__product-add-to-cart{
	text-align: left !important;
}

@media(max-width: 320px) {
	.entry-content ul {
    padding-left: 3px !important;
	}
	
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .wc-block-grid.has-4-columns .wc-block-grid__product {
        flex: 1 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

@media(min-width: 321px) and (max-width: 480px) {
	.entry-content ul {
    padding-left: 4px !important;
	}
	
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .wc-block-grid.has-4-columns .wc-block-grid__product {
        flex: 1 0 50% !important;
        max-width: 50% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .wc-block-grid.has-4-columns .wc-block-grid__product:nth-child(odd) {
        padding-right: 0px !important;
    }

    .wc-block-grid.has-4-columns .wc-block-grid__product:nth-child(2n) {
        padding-left: 0px !important;
    }
}

@media(min-width: 481px) {
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .wc-block-grid.has-4-columns .wc-block-grid__product {
        flex: 1 0 25% !important;
        max-width: 25% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .wc-block-grid.has-4-columns .wc-block-grid__product:nth-child(odd) {
        padding-right: 8px !important;
    }

    .wc-block-grid.has-4-columns .wc-block-grid__product:nth-child(2n) {
        padding-left: 8px !important;
    }
}



/* Меняем пурпурные кнопки WooCommerce на мой цвет (Желтый) */
.woocommerce a.button {
	background-color: #ffde0080;
}

.woocommerce a.button:hover {
	background-color: #ffde00;
}

/* Default state */
.woocommerce div.product form.cart .button,
.wc-block-components-button:not(.is-link),
.woocommerce a.button.alt {
background-color: #ffde00ab;
color: #333;
border-color: #ffde00;
}

/* Hover state */
.woocommerce div.product form.cart .button:hover,
.wc-block-components-button:not(.is-link):hover,
.woocommerce a.button.alt:hover {
background-color: #ffde00;
color: #333;
border-color: #bba301;
}

.woocommerce-message {
    background-color: #fbfaf3;
	border-top-color: #1c90cd;
	
}

.woocommerce-message::before {
    content: "\e015";
    color: #1c90cd;
}

.woocommerce-error::before {
    content: "";
    color: #000000;
}

/* Кнопка Sale */
.woocommerce ul.products li.product .onsale {
    margin: 0 0 0 0;
}
.woocommerce span.onsale {
    min-height: 2em;
    min-width: 2em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 2.4;
    border-radius: 26%;
    background-color: #ffe039;
    color: #1e50c3;
    border: 1px solid grey;
}

/* Убираем "сверхжирность" в кнопках WooCommerce */
.woocommerce a.button,
.woocommerce div.product form.cart .button{
	font-weight: 500;
}

/* Убираем ограничение по ширине в WooCommerce на странице Shop */
body.woocommerce-shop article {
    max-width: 100% !important;
}

/* Убираем ограничение по ширине в WooCommerce на странице Account */
body.woocommerce-account article {
    max-width: 100% !important;
}

/* Правим таблицу скачиваний в WooCommerce на странице Account */
.woocommerce-order-downloads .woocommerce-table--order-downloads th,
.woocommerce-order-downloads .woocommerce-table--order-downloads td {
    font-size: small !important;
    padding: 5px !important;
}

/* Убираем рамку при смене пароля в WooCommerce на странице Account */
body.woocommerce-edit-account fieldset {
    border: 0px solid #c0c0c0 !important;
}


@media (min-width: 769px) {
    .woocommerce-order-downloads .woocommerce-table--order-downloads th.download-product,
    .woocommerce-order-downloads .woocommerce-table--order-downloads td.download-product {
        width: 35%; /* Ширина для столбца Product */
    }

    .woocommerce-order-downloads .woocommerce-table--order-downloads th.download-remaining,
    .woocommerce-order-downloads .woocommerce-table--order-downloads td.download-remaining {
        width: 17%; /* Ширина для столбца Downloads remaining */
    }

    .woocommerce-order-downloads .woocommerce-table--order-downloads th.download-expires,
    .woocommerce-order-downloads .woocommerce-table--order-downloads td.download-expires {
        width: 12%; /* Ширина для столбца Expires */
    }

    .woocommerce-order-downloads .woocommerce-table--order-downloads th.download-file,
    .woocommerce-order-downloads .woocommerce-table--order-downloads td.download-file {
        width: 35%; /* Ширина для столбца Download */
    }
}

@media only screen and (min-width: 1260px) {
    body.woocommerce-account .site-main {
        padding: 0 60px !important;
    }
}

/* Предупреждение: не зарегистрируешься - потом товар не увидишь после регистрации */
.wc-block-components-checkbox.wc-block-checkout__create-account .wc-block-components-checkbox__label::after {
    content: "Please note: if you do not create an account now, any orders placed will not appear in your account section should you choose to register at a later time.";
    font-size: smaller;
    display: block;
    visibility: visible;
}

/* Увеличил ширину статьи на десктопе */
@media only screen and (min-width: 1260px) {
    .single .site-main, .page:not(.entry-card) .site-main, .no-posts .site-main {
         padding: 0 0px !important;
    }
}

/* Стили для всех страниц */
.single .hentry,
.single .comments-area,
.single .nocomments,
.single #respond.comment-respond,
.page:not(.entry-card) .hentry,
.page:not(.entry-card) .comments-area,
.page:not(.entry-card) .nocomments,
.page:not(.entry-card) #respond.comment-respond
.attachment-navigation,
.nav-links {
    max-width: 825px;
}

/* Стили для страниц WooCommerce - сделано в woocommerce-add-ons.php 
.page:not(.entry-card) .hentry,
.page:not(.entry-card) .comments-area,
.page:not(.entry-card) .nocomments,
.page:not(.entry-card) #respond.comment-respond {
    max-width: 100% !important;
} 

.woocommerce-tabs.wc-tabs-wrapper {
	max-width: 825px !important;
}*/

.post-ratings-header {
	display: block;
}

.woocommerce-tabs.wc-tabs-wrapper,
.related.products,
.post-ratings-header,
.post-ratings,
.post-ratings-loading,
.aside {
	max-width: 825px !important;
	margin: 0 auto !important;
}

/* Поправил стиль чекбокса подписки */
.stcr-subscription-list td {
    text-align: left !important; /* Выравнивание по левому краю для всех ячеек */
}

.stcr-subscription-list td input[type="checkbox"] {
    margin-right: 10px; /* Отступ 10 пикселей справа от чекбокса */
}

/* Убираем обтекание текста на изображениях слева в полном размере
.alignleft.size-full {
    float: none !important;
    margin-left: 0px !important;	
	max-width: 100% !important;
	margin-bottom: -2.8rem !important;
}

.alignleft.size-full img {
    display: block !important;
    margin: 0 !important;
}

.alignleft.size-full + p {
    clear: both !important;
    display: block !important;
    margin-top: 20px !important; 
    text-align: left !important; 
    width: 100% !important;
}
*/


/* Линия разделителя во всю ширину */
.wp-block-separator:not([class*="is-style"]) {
    max-width: 100% !important;
}
.wp-block-separator {
    border-bottom-color: currentColor;
    margin: 0em auto !important;
}
.wp-block-separator {
    border: none !important;
    border-top: 1px solid !important;
}


/* Уменьшаем изображения и растягиваем текст в блоке Текст+Картинка для мобилок */
@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 1fr !important; /* Растягиваем блок на всю ширину */
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media img {
        width: 70% !important; /* Уменьшаем изображение */
        margin: 0 auto !important; /* Центрируем изображение */
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1 / -1 !important; /* Текст занимает всю ширину */
        padding: 0 !important; /* Убираем padding */
    }
}


/* Стили для изменения размера и положения значка reCAPTCHA на мобилке */
@media (max-width: 600px) {
    .grecaptcha-badge {
        bottom: 3px !important; 
        right: 3px !important;    
        width: 65px !important;   
        height: 60px !important;
        transform: scale(0.7);
        transform-origin: bottom right;
		opacity: 0.5;
    }

    .grecaptcha-badge:hover,
    .grecaptcha-badge:focus {
        bottom: 3px !important; 
        right: 3px !important;    
        width: 256px !important;   
        height: 60px !important;
        transform: scale(0.7);
        transform-origin: bottom right;
		opacity: 1;
    }
}

/* Добавляем отступ после списка 
.entry-content ol {
     padding-bottom: 36px !important;
} */

/* Меняем точки на кружочки и наоборот в списках */
ol ul {
    list-style-type: square;
}

ol ul ul {
    list-style-type: '→ ';
}

ul ul ul {
    list-style-type: '→ ';
}




.wp-block-image a.img-link {
    display: block;
}

/* Меняем размер зеленой Cookie Notice и прозрачность */
#hu-revoke {
    transform: scale(0.7); /* Уменьшаем размер иконки на 30% */
}

#hu-revoke button.hu-revoke-button {
    opacity: 0.4; /* Устанавливаем прозрачность кнопки */
}

/* Для экранов от 900 пикселей и больше сдвигаем в левый нижний угол, "заподлицо" */
@media (min-width: 900px) {
	#hu-revoke.hu-position-bottom-left {
		bottom: -5px !important;
		left: 12px !important;
	}
}
/* Для экранов меньше 900 сдвигаем в левый нижний угол, "заподлицо" */
@media (max-width: 899px) {
	#hu-revoke.hu-position-bottom-left {
		bottom: -6px !important;
		left: -6px !important;
	}
}

/* Делаем верстку, чтобы не ломал при просьбе открыть е-майл */
.woocommerce.wfls-login-message {
    display: block;
    margin: 20px auto;
    padding: 15px;
    background-color: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Для экранов от 900 пикселей и больше */
@media (min-width: 900px) {
    .woocommerce.wfls-login-message {
        max-width: calc(100% - 340px); /* Ширина 100% минус 300px (ширина левого столбца) и 40px (20px отступы) */
        padding: 20px;
        margin-left: calc(300px + 20px); /* Сдвигаем блок вправо на ширину левого столбца + небольшой отступ */
        margin-right: auto; /* Центрируем блок справа */
    }
}

.woocommerce.wfls-login-message ul.woocommerce-error {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.woocommerce.wfls-login-message ul.woocommerce-error li {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

.woocommerce.wfls-login-message strong {
    font-weight: bold;
    color: #d9534f;
}

/* Сжимаем логотип байнанс пей в чекауте */
.payment_method_binance img {
    border: 1px solid darkgray; /* Цвет рамки */
    border-radius: 5px; /* Закругленные края */
    max-height: 55px !important;
    height: auto; 
    width: auto;
    display: block; /* Чтобы изображение перенеслось на следующую строку после названия платежа */
}

/* Стили для лого байнанс пей на главной странице */

/* Для экранов от 900 пикселей и больше */
@media (min-width: 900px) {
	.binance-logo-container {
		display: block;
		max-width: 70%;
		margin-left: -2px;
		text-align: center;
		margin-top: 6px;
	}

	.binance-logo {
		max-height: 55px !important;
		height: auto; 
		width: auto;
	}	
}


/* Для экранов меньше 900px */
@media (max-width: 899px) {

	.binance-logo-container {
		display: block;
		max-width: 50%;
		margin: 0 auto;
		margin-top: 10px;
		text-align: center;
	}

	.binance-logo {
		max-height: 35px !important;
		height: auto;
		width: auto;
		margin-left: -15px;
	}	
}

/* Для экранов меньше 740px */
@media (max-width: 739px) {

	.binance-logo-container {
		display: block;
		max-width: 75%;
		margin: 0 auto;
		margin-top: 10px;
		text-align: center;
		transform: translateX(-6px);
	}

	.binance-logo {
		max-height: 30px !important;
		height: auto;
		width: auto;
		margin-left: -15px;
	}	
}

/* Показываем описание товара woocommerce на страницах пагинации */
.woocommerce-Tabs-panel--description {
    display: block !important;
}

/* Скрываем элемент с классами "cmplz-link impressum cmplz-hidden",
   который отображается как скрытая ссылка в баннере Cookie Notice */
a.cmplz-link.impressum.cmplz-hidden {
    display: none !important;
}
.cmplz-manage-consent {
    border-color: #ffc41a96 !important;
    border-width: 1px !important;
}

.cmplz-cookiebanner {
    border-color: #ffc41a96 !important;
    border-width: 1px !important;
}

/* Убрал пробел до всплывающего меню - которое исчезало при движении мышки */
.nav--main ul {
    margin-left: -1px !important;
}

/* Цвета контрастности на страницах вукоммерс */
.woocommerce-Price-amount.amount {
    color: #898642 !important;
}

/* Правим ширину столбца больше 480 пикселей до 720  */
@media (min-width: 480px) {
    .grid {
        border-left: 5px solid transparent !important;
    }
}
@media not screen and (min-width: 740px) {
    .grid, .pagination {
        max-width: 480px !important;
    }
}

/* Добавляем для купона слово "действует до"  */
.validity::before {
    content: "Expiry: ";
    font-weight: bold;
	color: #ffcb15;
}

/* Увеличиваем высоту terms и conditions на вкладке покупки товара  */
.woocommerce-terms-and-conditions {
    max-height: 600px !important;
    overflow: auto;
}


/* Делаем превью картинок на всю ширину для мобилки  */
@media (max-width: 600px) {
  .wp-block-image,
  .aligncenter,
  .alignnone,
  .entry-content .jetpack-video-wrapper {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-50%);
    margin: 24px 0;
  }

  .wp-block-image img,
  .aligncenter img,
  .alignnone img,
  .entry-content .jetpack-video-wrapper img {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block;
  }

  .wp-block-image .image-notice,
  .aligncenter .image-notice,
  .alignnone .image-notice,
  .entry-content .jetpack-video-wrapper .image-notice {
    display: block;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-top: 0px;
    margin-bottom: 12px;
  }

}


/* Ширина подписи для изображений в продуктах */
.wp-caption-text {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important; 
    display: block !important;
    font-style: italic !important; 
}


/* Унификация подписи на продуктах и записях */
/* Оформляем и .wp-caption-text, и .wp-element-caption */

/* До 600px — твой оригинальный стиль */
.wp-caption-text, .wp-element-caption {
  border-left: 3.5px solid #35c3e6 !important;
  background: #fafdff !important;
  padding: 10px 16px 10px 14px !important;
  margin: 0px 0 0 0 !important;
  color: #256185 !important;
  font-size: 1em !important;
  font-style: italic !important;
  font-weight: 500 !important;
  text-align: left !important;
  line-height: 1.6 !important;
  box-shadow: 0 1px 3px rgba(53,195,230,0.06) !important;
  width: 90vw !important;
  max-width: 95vw !important;
  display: block !important;
  border-radius: 0 !important;
}

/* От 601px до 899px — ширина как у картинки, выравнивание и у подписи, и у img/notice */
@media (min-width: 601px) and (max-width: 899px) {
  figure.wp-caption,
  figure.wp-block-image,
  figure {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }
  figure img,
  figure .img-link {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
	margin-bottom: -8px;
  }
  .wp-caption-text, .wp-element-caption {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .image-notice {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}

/* От 900px — фиксированная ширина, выравнивание по центру */
@media (min-width: 900px) {
  figure.wp-caption,
  figure.wp-block-image,
  figure {
    width: 600px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }
  .wp-caption-text, .wp-element-caption {
    width: 600px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  figure img,
  figure .img-link {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
	margin-bottom: -8px;
  }
  .image-notice {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}

.image-notice {
    color: #b0b0b0;
}

/* Заменяем ' | ' на перенос строки через JS */
.site-description-text {
  display: block;          /* делаем span блочным */
  text-align: center;      /* если нужно по центру */
}

/* для экранов от 900px и шире — выравниваем влево */
@media (min-width: 900px) {
  .site-description-text {
    text-align: left;
  }
}

.entry-title {
    letter-spacing: -0.04em;
}

/* Желтое подчеркивание для ссылок в описании таксономий */
.taxonomy-description a {
    color: #000;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    padding: 0 2px;
    /* Эффект маркера: тень-инсет снизу, только под буквы */
    box-shadow: 0 -0.45em 0 -0.15em #ffde00 inset;
    transition: box-shadow 0.15s, color 0.15s;
	font-family: Oswald, sans-serif;
    /* font-weight: inherit; */
	text-transform: uppercase;
}

/* Желтое подчеркивание для произвольных ссылок в гутенберг-редакторе */
/* Выделить ссылку/абзац/блок, в доп css вставить: marker-link */
/* Вставлять ИМЕННО в css-класс, а НЕ в html-якорь :) */
.marker-link a,
a.marker-link {
    color: #000;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    padding: 0 2px;
    box-shadow: var(--box-shadow-color) 0 1.2em inset !important;	
	font-family: Oswald, sans-serif;
	text-transform: uppercase;
}


/* Делаем картинку таксономии на всю ширину для мобилки  */
@media (max-width: 600px) {
  .taxonomy-description img {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-50%);
    margin: 24px 0;
  }
  .taxonomy-description img {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block;
  }
}


/* Делаем линию разделения на всю ширину для мобилки  */
@media (max-width: 600px) {
  .wp-block-separator {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
    display: block;
  }
}




/* Делаем карусель на всю ширину для мобилки  */
@media (max-width: 600px) {
  .wp-block-gutsliders-photo-carousel {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-50%);
    margin: 24px 0;
  }
  .taxonomy-description img {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block;
  }
}


/* === AI’s Ruthless Roast · Social Row === */
.rr-social-row{
  display:flex; flex-wrap:nowrap; 
  /* overflow:hidden; */
  justify-content:center; align-items:center;
  gap:0;                 /* расстояние регулируем padding'ом в JS */
  margin:22px auto 20px; width:98%;
  padding-top: 6px;
  padding-bottom: 6px;
}

.rr-social-link{
  width:60px; max-width:60px;          /* «чистая» ширина без padding'а */
  transition:transform .25s,padding .25s;
}

.rr-social-link:hover{transform:scale(1.1);}
.rr-social-icon{display:block; width:100%; height:auto;}

/* === Растягиваем RR social row в край на мобилке === */
@media (max-width: 600px) {
  .rr-social-row {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%);
    margin: 24px 0;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* Запрет смещения картинки для картинок в сетке grid */
@media only screen and (min-width: 900px) {
  .is-layout-grid .wp-block-image,
  .is-layout-grid .aligncenter,
  .is-layout-grid .alignnone,
  .is-layout-grid .entry-content .jetpack-video-wrapper,

  .wp-block-group-is-layout-grid .wp-block-image,
  .wp-block-group-is-layout-grid .aligncenter,
  .wp-block-group-is-layout-grid .alignnone,
  .wp-block-group-is-layout-grid .entry-content .jetpack-video-wrapper
  {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* Стрелки - вращение вокруг оси для ссылок */
.arrow {
  display: inline-block;
  font-size: 1em; /* наследует размер текста */
  line-height: 1;
  transition: transform 0.2s ease;
}

/* Ось вращения вокруг центра символа */
.arrow-up    { transform: rotate(0deg); }
.arrow-right { transform: rotate(90deg); }
.arrow-down  { transform: rotate(180deg); }
.arrow-left  { transform: rotate(270deg); }

/* Блок навигации - сужаем расстояние между строками */
.pillar-nav p {
  margin-bottom: 1.25rem !important;
}

/* Заголовки - сужаем расстояние между буквами */
h1 {
    letter-spacing: 0.01em;
}

h2 {
    letter-spacing: 0em;
}

/* Скрываем вывод тегов в шапке */
.single .clearfix .fa-tags,
.single .clearfix a[rel="tag"] {
    display: none !important;
}

/* Мобилки: глаз справа, автор слева, без переноса строки */
@media (max-width: 600px) {
  .entry-meta .clearfix{
    display:flex !important;      /* перебиваем «display:block»/«flex-wrap:wrap» */
    flex-wrap:nowrap !important;  /* ключевой момент – запретить перенос */
    align-items:center;
  }

  .entry-meta .meta-left{
    flex:1 1 auto;          /* занимает всё доступное, может ужаться */
    min-width:0;            /* даём браузеру право ужимать строку */
    overflow:hidden;        /* если совсем не влазит – троеточие */
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .entry-meta .meta-views{
    flex:0 0 auto;          /* фикс-ширина, не сжимается */
    margin-left:auto;       /* выталкиваем к правому краю */
    display:flex;
    align-items:center;
    white-space:nowrap;
    font-size:1em;
    color:#666;
  }

  .entry-meta .meta-views .fa-eye{
    margin-right:0.3em;
  }
}


/* Логотип сайта - убираем промежуток, сдвигаем прямо "под плашку" */
@media (max-width: 600px) {
	.site {
		padding-top: 26px;
	}
}

/* Серые svg кнопки бургер меню и лупа пока не проскороллим вверх */

.mobile-header-wrapper.at-top .navigation__trigger svg {
    opacity: 0.03;
}

.mobile-header-wrapper .navigation__trigger svg {
    opacity: 1;
    transition: opacity 0.85s;
}

.mobile-header-wrapper.at-top .search__trigger svg {
    opacity: 0.03;
}

.mobile-header-wrapper .search__trigger svg {
    opacity: 1;
    transition: opacity 1.3s;
}


/* Когда шапка у самого верха — делаем линию белой невидимой */
.mobile-header-wrapper.at-top:after{
    background:#fff !important;
}

/* ==== MOBILE “SLIDE-UP” LOGO — hi-res 800 px ==================== */
@media (max-width: 899px) {

  /* высота места под фикс-логотип, чтобы текст не залезал под него */
  .site-branding{
    padding-top: 45px;                     /* подгони при необходимости */
  }

  /* ----- ссылка-обёртка логотипа (анимация) ----- */
  .site-header .custom-logo-link{
    position:fixed;
    top:-31px; left:50%;
    /* 800 px × 0.362 ≈ 290 px ― стартовое “большое” состояние */
    transform:translateX(-50%) translateY(40px) scale(0.362);
    transform-origin:top center;

    transition:transform .45s cubic-bezier(.4,0,.2,1);
    backface-visibility:hidden; will-change:transform;
    z-index:201 !important;
    pointer-events:auto;                   /* кликабельно */
  }

	
	
  /* ----- само изображение ― физически 800 px, не сжимается браузером ----- */
  .site-header .custom-logo{
    width:800px;          /* физический размер файла */
    height:auto;
    max-width:none; max-height:none;
    display:block;
  }

  /* ----- приклеенное состояние ----- */
  .logo-pinned .custom-logo-link{
    /* 800 px × 0.262 ≈ 210 px ― финальный размер внутри хедера */
    transform:translateX(-50%) translateY(32px) scale(0.262);
  }
	
}

/* ==== SHADOW ONLY — активна ТОЛЬКО на мобилках ================= */
@media (max-width: 899px) {

  /* базовое (раскрытое) состояние: тень видна под большим логотипом */
  .site-header .custom-logo-shadow{
    /* переменные для смещения */
    --shadow-offset-x: -2px;  /* смещение вправо/влево */
    --shadow-offset-y: 2px;  /* смещение вниз/вверх */

    position: fixed;
    width: 800px !important;      /* фиксируем базовую ширину   */
    height: auto !important;      /* сохраняем пропорции        */
    max-width: none !important;   /* перебиваем img{max-width}  */

    top: -31px;
    left: 50%;

    /* 800 px × 0.362 ≈ 290 px ― стартовое “большое” состояние */
    transform: 
      translateX(calc(-50% + var(--shadow-offset-x))) 
      translateY(calc(40px  + var(--shadow-offset-y))) 
      scale(0.362);
    transform-origin: top center;

    opacity: 0.7;

    transition:
      transform  .45s cubic-bezier(.4,0,.2,1),
      top        .45s,
      opacity    .30s ease 0.45s; /* тень начнёт гаснуть через .45s и уйдёт за .30s */

    backface-visibility: hidden;
    will-change: transform;
    z-index: 200 !important;
    pointer-events: none; /* клики проходят к лого */
  }

  /* когда шапка получила класс logo-pinned → тень схлопывается и гаснет */
  #masthead.logo-pinned .custom-logo-shadow{
    transform: 
      translateX(calc(-50%)) 
      translateY(calc(32px)) 
      scale(0.262);
    opacity: 0;
  }
}
/* =============================================================== */


/* safety: на десктопе тень вообще не выводим */
@media (min-width: 900px){
  .custom-logo-shadow{ display:none!important; }
}

/* =============================================================== */


/* Сдвигаем пункты меню вниз, чтобы не накладывались на лого */
@media (max-width: 899px) {
	.nav--main {
		margin-top: 3.5rem;
	}
}

/* Скрыть старое меню (на случай, если скрипт не сработал) */
#site-navigation .nav--social {
  display: none;
}

@media (max-width: 600px) {
  nav#site-navigation.main-navigation.shadow .rr-social-row {
    width: 80vw !important;
    max-width: 80vw !important;
    margin-left: 0 !important;
  }
}

/* Стиль для последних записей, облака тэгов и категорий внизу страницы */
@media (max-width: 899px) {
	.wp-block-categories-list.wp-block-categories a {
		font-size: 14pt !important;
		font-family: Oswald, sans-serif;
		letter-spacing: -0.02em;
	}

	.wp-block-tag-cloud a {
		font-size: 14pt !important;
		font-family: Oswald, sans-serif;
		letter-spacing: -0.02em;
	}
}

@media (min-width: 900px) {
	.wp-block-categories-list.wp-block-categories a {
		font-size: 11pt !important;
		font-family: Oswald, sans-serif;
		letter-spacing: -0.02em;
	}

	.wp-block-tag-cloud a {
		font-size: 11pt !important;
		font-family: Oswald, sans-serif;
		letter-spacing: -0.02em;
	}
}

.widget.widget_my_custom_recent_posts a {
	font-size: 11pt !important;
	font-family: Oswald, sans-serif;
	letter-spacing: -0.01em;
}

/* Применяем стили к надписи “Search” в виджете поиска */
.widget.widget_block.widget_search .wp-block-search__label,
.widget.widget_block.widget_search .wp-block-search__button {
  font-size: 11pt !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* Стили для ссылки магазина в мобильной версии */
.site-header .ai-agents-shop .ai-agents-shop-link {
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	font-weight: 300;
	font-family: Oswald, sans-serif;
	display: inline-block;
	color: dimgray;
}

@media (min-width: 900px) {
	.site-header .ai-agents-shop .ai-agents-shop-link {
		margin-top: 0.6em;
		margin-bottom: 0.6em;
		font-size: 17px;
		text-align: center; /* Центрирование текста внутри блока */
		letter-spacing: -0.03em;
	}
}

/* @mobile: растягиваем линк магазина от края до края экрана */
@media (max-width: 899px) {
  .site-header .ai-agents-shop .ai-agents-shop-link {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-50%);
    display: block;
    text-align: center;
    font-size: 24px;
    margin-top: 4px; /* по вкусу, чтобы дать вертикальный отступ */
    padding: 6px 0; /* опционально — увеличить кликабельную зону */
	margin-bottom: -0.5em;
  }
}

/* Применяем стиль к описанию сайта */
.site-description-text {
	text-align: center;  
	font-size: 11pt !important;
	font-family: 'Oswald', sans-serif;
	letter-spacing: -0.01em;
}


/* Базовые стили поп-ап окна подписки */
/* ---------- базовая рамка модалки ---------- */
.modal{
  display:none;
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  justify-content:center; align-items:center;
  z-index:1000;
}
.modal.exploding{                      /* фон делаем прозрачным на время взрыва */
  background:transparent;
}
.modal-content{
  background:#fff;
  padding:20px;
  position:relative;
  border-radius:4px;
  max-height:90vh;
  overflow-y:auto;
}
/* кнопка ✕ */
.modal-close{
  position:absolute; top:10px; right:10px;
  background:none; border:none;
  font-size:1.5rem; cursor:pointer;
}

/* ---------- форма ---------- */
.tnp-field{margin-bottom:15px;}
.tnp-field label{display:block;margin-bottom:5px;}
.tnp-field input[type="text"],
.tnp-field input[type="email"]{width:100%;padding:8px;box-sizing:border-box;}
.tnp-submit{padding:10px 20px; cursor:pointer;}

/* ---------- адаптив ---------- */
@media(min-width:601px){.modal-content{width:500px;}}
@media(max-width:600px){.modal-content{width:95%;}}

/* ---------- анимация полёта осколков и скорость взрыва ---------- */
/* плавное непрерывное движение осколков */
.shard{
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:hidden;
  will-change:transform,opacity,filter;
  /*   1.6 s длительность   |  общий плавный сплайн  */
  animation: shard-fly 1.6s cubic-bezier(.25,.1,.3,1) forwards;
}

@keyframes shard-fly{
  0%{
    transform: translate(0,0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100%{
    transform: translate(var(--dx),var(--dy)) rotate(calc(var(--rot)*4)) scale(1.4);
    opacity: 0;
    filter: blur(8px);
  }
}


.modal {
  display: none;
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center; align-items: center;
  z-index: 1000;
  opacity: 1;
  transition: background 0.5s, opacity 0.5s; /* можно задать по умолчанию */
}



/* Корректировка формы подписки */

input.tnp-submit {
	background: #FFDE00 !important;
	border: none !important;
	box-shadow: none !important;
	transition: none !important;
	padding: 0.5em 1em 0.5em 1em;
}

input.tnp-submit:hover,
input.tnp-submit:focus {
	background: #FFDE00 !important;
}

.tnp-subscription input.tnp-submit, .tnp-profile input.tnp-submit, .tnp-unsubscribe button.tnp-submit, .tnp-reactivate button.tnp-submit {
	background-color: #ffde00;
	color: #000000;
}

.tnp-field label {
	font-size: 12pt;
	font-family: 'Oswald', sans-serif !important;
}

/* Заплатка: делаем меню вертикальным на всех экранах + отступы */
@media only screen and (min-width: 900px) {
  .nav--main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
}

@media only screen and (min-width: 900px) {
    .single .nav--main > li, .page .nav--main > li, .no-posts .nav--main > li {
        margin-bottom: 0.5rem;
    }
}

@media only screen and (min-width: 900px) {
    .main-navigation {
        margin-top: 2.3rem;
    }
}

/* Правка положения изображений в каталоге */
@media only screen and (min-width: 1260px) {
	.entry-card .entry-image {
		margin-left: 50px;
	}
}

/* Убираем надпись поверх картинки на мобилках */
.entry-image .hover {
    display: none !important;
}

/* Для мобилок в колонках делаем карточки "по центру" (в два столбца) */
.woocommerce ul.products li.product {
	text-align: center;
}

/* Кнопка + цена по "Низу" карточки Woocommerce, без лесенки */
.woocommerce ul.products li.product{
    display:flex;
    flex-direction:column;
    min-height:100px;           /* fallback до работы JS - было 420, блокировал высоту карточки в 320.03px */
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}

/* цену больше не толкаем вниз */
.woocommerce ul.products li.product .price{
    margin-bottom:0.6em;       /* просто отступ сверху кнопки */
}

/* теперь именно кнопка утапливается в самый низ */
.woocommerce ul.products li.product .button{
    display:block;
    width:max-content;
    margin:0 auto 0.8em;
    margin-top:auto;           /* ключевая строка */
}

/* Рамка для товаров вукоммерс */
@media (max-width: 600px) {
	.woocommerce ul.products li.product {
		border: 1px solid #e0e0e0;         /* светло-серая рамка */
		border-radius: 12px;               /* приятные скругления */
		box-sizing: border-box;            /* чтобы рамка не ломала сетку */
		overflow: hidden;                  /* аккуратно подрезать всё по радиусу */
		background: #fff;                  /* чисто белый фон (если нужно) */
		box-shadow: 0 1px 6px rgba(60,60,60,0.07);
	}
	/* ► небольшой «воздух» вокруг заголовка ◄ */
	.woocommerce ul.products li.product .woocommerce-loop-product__title{
		padding:0 4px;      /* по 2 px слева и справа от рамки */
		box-sizing:border-box;
	}
}

/* Растягиваем два столбца товаров "в край" мобилки ≤ 600 px */
@media (max-width: 600px) {
	/* сам список товаров */
	.products.columns-4{
		/* прежнее «растягивание» на весь вьюпорт */
		position: relative;
		left: 50%;
		right: 50%;
		width: 100vw;
		max-width: 100vw;
		transform: translateX(-50%);

		/* нужные отступы */
		padding: 0 2px !important;   /* по 3 px у краёв */
		margin: 0 !important;
		box-sizing: border-box;

		/* переключаемся на CSS Grid */
		display: grid !important;
		grid-template-columns: repeat(2, 1fr); /* 2 равные колонки */
		gap: 8px !important;                    /* 8 px горизонталь + вертикаль */
		overflow-x: hidden;                     /* как было */
	}

	/* отдельная карточка */
	.products.columns-4 > li.product{
		margin: 0 !important;   /* убираем старые маргины */
		width: auto !important; /* ширина берётся от grid */
	}
	/* --- убираем старый clearfix, чтобы он не занимал место --- */
	.products.columns-4::before,
	.products.columns-4::after{
		content:none !important;
		display:none !important;
	}
}

/* === Print extras: page numbering === */
/* Нумерация страниц при печати в Chrome 131+ и Firefox */
@page {
  /* задайте поля так, чтобы было место под номер */
  margin: 12mm 12mm 15mm 12mm;

  /* правый нижний угол: "текущая / всего" */
  @bottom-right {
    content: counter(page) " of " counter(pages);
    font: 10pt/1 monospace;
    color: #666;
    opacity: .75;
  }
}

/* Прочие печатные стили */
@media print {
  /* Например, фон убрать:
  html, body { background: #fff !important; } */
}

/* Брендинг Production Toolkit для печати */
@page {
  /* Поля: сверху чуть больше для шапки */
  margin: 18mm 12mm 15mm 12mm;

  /* Верхний колонтитул: брендинг */
  @top-center {
    content: "Production Toolkit by AiGuru.Art";
    font: 9pt/1.2 sans-serif;
    color: #444;
    opacity: .8;
  }
}

/* Печатаем список "с квадратиками" слева вместо точек*/
.todo {
  list-style: none;
  padding-left: 2em;
}
.todo li {
  position: relative;
  margin-bottom: 0.1em;
}
/* Печатаем to-do todo checklist список "с квадратиками" слева вместо точек*/
.todo {
  list-style: none;
  padding-left: 2em !important;
}
.todo li {
  position: relative;
  margin-bottom: 0.1em;
}
.todo li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  content: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<rect x='2' y='2' width='20' height='20' fill='none' stroke='%23000' stroke-width='2'/>\
</svg>");
  position:absolute;
  left:-1.5em; top:.15em;
  display:inline-block;
  /* у изображений свой intrinsic размер; подправим масштабом/сдвигом: */
  transform: scale(1.1);
}