/*
  design.css — Вкусный портал Вилка

  Как устроен файл
  ----------------
  Разделы идут в порядке от общего к частному. Если два правила
  спорят, побеждает то, что ниже, поэтому раздел ставим ниже тех,
  которые он должен перебивать.

    Базовые стили    переменные, шрифты, теги, ссылки, заголовки, поля
    Разделы сайта    каркас, карточки, рецепт, категории и т. д.
                     (ещё не переписаны, переносятся по одному)
    Компоненты       переписанные компоненты: шапка, меню, кнопки
    Служебные        .Hide, .Mobile/.NoMobile, фокус, уменьшение анимации

  Правило: новый стиль кладём в раздел своего компонента. Если он не
  срабатывает, !important не добавляем: проверяем, какое правило
  перебивает, и упрощаем его селектор.
*/

/* ==========================================================================
   Шрифты
   ========================================================================== */

@font-face {
  font-family: "Lobster";
  src: url("/fonts/Lobster-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("/fonts/Caveat-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* Русские буквы Nunito: без этого файла кириллица шла запасным шрифтом Arial */
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ------------------------------------------------------------------------
   Переменные
   ------------------------------------------------------------------------ */

:root {
  /* Палитра */
  --tomato: #C8420E;          /* основной акцент: кнопки, заголовки блоков */
  --tomato-dark: #A3340A;     /* кнопка при наведении */
  --tomato-active: #8A2C08;   /* кнопка при нажатии */
  --green: #3F6F1A;           /* ссылки, иконки, вторичный акцент */
  --green-dark: #2F5513;
  --saffron: #F2A33A;
  --text: #2B2723;
  --muted: #6B645A;
  --line: #E6DFD2;
  --line-strong: #D5CCBA;
  --field-border: #8F887C;
  --warm: #F6F0E4;
  --background-color: #ffffff;

  /* Старые имена переменных: используются в разделах legacy */
  --color: var(--text);
  --grey: var(--line);
  --heading-line-color: var(--line);
  --icon-color: var(--green);
  --hover-color: var(--tomato);
  --button-hover-color: var(--tomato-dark);
  --h1-back-color: var(--tomato);
  --h1-back-color-2: var(--green);
  --link-hover-color: var(--tomato);
  --block-subtitle-color: var(--tomato);
  --block-subtitle_border-color: var(--tomato);
  --block-separator_border-color: var(--line-strong);
  --custom-link-color: var(--tomato);
  --custom-link-hover-color: var(--green);
  --aput-color: var(--tomato);
  --aput-hover: var(--tomato-dark);
  --overlay: linear-gradient(to top, rgba(0, 0, 0, 0.40), transparent);
  --overlay-color: #ffffff;

  /* Шрифты */
  --font-body: "Nunito", Arial, sans-serif;
  --font-display: "Lobster", sans-serif;
  --font-hand: "Caveat", sans-serif;
  --display-ls: 0.5px;
  --display-weight: 400;
  --h1-weight: 400;
  --h2-weight: 400;
  --h1-size: 2.25rem;
  --h3-font: var(--font-body);
  --h3-weight: 800;
  --h3-size: 1.125rem;
  --block-subtitle-fontsize: 1.6rem;
  --block-subtitle2-fontsize: 1.3rem;
  --block-button-fontsize: 1rem;

  /* Формы и эффекты */
  --radius-sm: 8px;
  --radius-md: 5px;
  --radius-pill: 250px;
  --radius-btn: 999px;
  --shadow-btn-hover: 0 6px 14px rgba(200, 66, 14, 0.28);

  /* Карточки: белые, тонкая рамка, лёгкая тень */
  --card-bg: #ffffff;
  --card-border: 1px solid var(--line);
  --card-shadow: 0 2px 6px rgba(60, 40, 20, 0.06);
  --card-shadow-hover: 0 6px 16px rgba(60, 40, 20, 0.12);
  --focus-ring: var(--green);

  /* Отступ под фиксированную шапку при переходе по якорю */
  --scroll-padding-top: 100px;
  --scroll-padding-top-menu: 110px;
  scroll-padding-top: var(--scroll-padding-top);
}

/* ------------------------------------------------------------------------
   Сброс
   ------------------------------------------------------------------------ */

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

header, main, aside, section, article, div, span,
figcaption, iframe, label, p, img, figure, input, textarea {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  direction: ltr;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  background-color: var(--background-color);
}

img {
  display: block;
  max-width: 100%;
}

figure {
  overflow: hidden;
  border-radius: var(--radius-md);
}

hr {
  height: 1px;
  margin: 2px 0;
  border: none;
  background: var(--line-strong);
}

strong {
  font-weight: 700;
}

abbr,
address {
  font-style: normal;
  text-decoration: none;
}

::placeholder {
  color: var(--muted);
}

::-moz-focus-inner {
  border: 0;
}

/* ------------------------------------------------------------------------
   Текст и заголовки
   ------------------------------------------------------------------------ */

p {
  line-height: 1.5rem;
  text-align: left;
}

h1,
h2 {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  line-height: 2rem;
}

h1 { font-weight: var(--h1-weight); }
h2 { font-weight: var(--h2-weight); }

h3,
h4,
h5 {
  margin: 0;
  padding: 0.5rem 0;
}

h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: 1.5rem;
  letter-spacing: 0;
}

h4,
h5 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 2px;
}

h4 {
  line-height: 1.5rem;
  color: var(--tomato);
}

h5 {
  line-height: 1.2rem;
  color: var(--green);
}

/* Заголовки групп ингредиентов в рецепте */
#list_of_ingredients h3 {
  font-family: "Caveat", cursive;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tomato);
}

/* ------------------------------------------------------------------------
   Списки. Нумерованный список: номера в зелёных кружках
   ------------------------------------------------------------------------ */

ul,
li {
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

ol {
  position: relative;
  margin: 0 0 0 50px;
  padding: 12px 0 8px 0;
  font-size: 16px;
  text-align: left;
  list-style-type: none;
  counter-reset: num;
}

ol li {
  position: relative;
  margin: 0;
  line-height: 1.5;
}

ol li::after {
  content: counter(num);
  counter-increment: num;
  position: absolute;
  top: 0;
  left: -40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--green);
  background: #f3faef;
  border: 0.5px solid #4cce27;
  border-radius: 50%;
}

/* ------------------------------------------------------------------------
   Ссылки
   ------------------------------------------------------------------------ */

a {
  font-weight: 500;
  color: var(--green);
  text-decoration: none;
  cursor: pointer;
}

a:visited,
a:active {
  color: var(--green);
}

a:hover,
a:focus,
a:focus-within {
  color: var(--tomato);
}

article a {
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------------
   Элементы форм
   ------------------------------------------------------------------------ */

button {
  font-family: var(--font-body);
  font-size: inherit;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: var(--font-body);
}

/* ==========================================================================
   Базовые стили: теги, заголовки, ссылки, текст
   ========================================================================== */

.border_bottom {
  border-bottom: 2px var(--grey) dotted;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.image_form input {
  width: 120px !important;
}
.more_outer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
}
.faded {
  opacity: 0.6;
}
.image_form_div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.PrintPage_Outer {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}
.PrintPage {
  display: flex;
  width: 100%;
  max-width: 800px !important;
  padding: 2rem;
  justify-content: center;
  flex-direction: column;
}
.PrintPage_image {
  max-width: 100%;
}
.PrintPage_article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.outer_div {
  display: flex;
  width: 100%;
  justify-content: center;
}
.sep {
  display: flex;
  width: 100%;
  height: calc(var(--scroll-padding-top) + 10px);
}
#share_panel span {
  border-bottom: 2px var(--grey) dotted;
  margin-bottom: 10px;
}
#popular_content,
#new_content,
.articles-content {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex: 1;
}
.survey_vote_topic {
  display: flex;
  width: 100%;
  color: #2B2723;
  flex-direction: row;
  justify-content: flex-start;
  padding: 8px;
  border: 1px var(--grey) solid;
}
.separator {
  display: flex;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px var(--grey) dotted;
}
.x2x label {
  display: flex;
  width: 100% !important;
  flex-direction: column;
  justify-content: flex-start;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .line_break {
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
  }
}
.icon {
  width: 35px;
  height: 35px;
  margin-right: 8px;
  transition: 0.2s;
}

/* ==========================================================================
   Каркас страницы: контейнер, основная колонка, мобильная/десктопная версия
   ========================================================================== */

.BackToTop {
  display: flex;
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 1rem;
}
.BackToTop button {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  background-color: var(--h1-back-color);
  color: #ffffff;
  justify-content: center;
  align-content: center;
  align-items: center;
  transform: rotate(-90deg);
  font-size: 1.6rem;
  font-weight: 600;
}
.flexEnd {
  display: flex;
  flex-shrink: 1;
  justify-content: flex-end;
}
.MarginTop {
  margin-top: 40px;
}
.Full {
  display: flex;
  width: 100%;
  min-width: 300px;
  justify-content: center;
}
.Content {
  width: 90%;
  max-width: 1350px;
  min-width: 300px;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.page-main {
  display: flex;
  flex: 1;
  min-width: 300px;
  flex-direction: column;
  gap: 20px;
}
.page-hero {
  display: flex;
  margin-bottom: 2rem;
  flex-direction: row;
  justify-content: flex-start;
  gap: 30px;
}
.page-hero figure {
  display: block;
  height: 400px;
  width: 60%;
  min-width: 450px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
  position: relative;
}
.page-hero figure img {
  display: inline-block;
  width: 100%;
  height: 400px;
  z-index: 1;
  object-fit: cover;
  object-position: center center;
}
.page-hero figure figcaption {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 6rem;
  position: absolute;
  bottom: 0;
  z-index: 3;
  background: var(--overlay);
  font-size: 1.4rem;
  font-weight: 500;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
}
.page-hero figure figcaption h1 {
  color: #ffffff;
  padding-left: 1.5rem;
  padding-bottom: 1.5rem;
}
.NoMobile {
  display: flex;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .Full {
    width: 100%;
  }
  .Content {
    width: 90%;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 40px;
  }
  .page-main {
    display: flex;
    width: 100%;
    min-width: 300px;
    flex-direction: column;
    gap: 20px;
  }
  .page-hero {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
   Поиск: поле, кнопки, выпадающие подсказки
   ========================================================================== */

.autocomplete {
  position: relative;
  flex: 1;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #D5CCBA;
}
.autocomplete-items div:hover {
  background-color: #F6F0E4;
}
.autocomplete-active {
  background-color: #3F6F1A !important;
  color: #ffffff;
}
.search_opened {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 99;
  top: 0.5px;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background-color: rgba(255,255,255,0.95);
  border-bottom: 5px solid var(--grey);
  border-radius: 0 0 20px 20px;
  animation: anim_main_navigation_opened 0.5s forwards;
}
.search-btn2 {
  width: 50px;
  height: 50px;
  background-image: url('/pics/main/search.png?new_icon');
  background-position: center center;
  background-repeat: no-repeat;
  transition: 220ms;
}
.search-btn2:focus-within {
  background-image: url('/pics/main/search_hover.png');
  background-size: 96% 96%;
}
.search-btn3 {
  width: 40px;
  height: 40px;
  background-image: url('/pics/main/search.png?new_icon');
  background-position: center center;
  background-repeat: no-repeat;
  transition: 220ms;
}
.search-btn3:hover,
.search-btn3:focus-within {
  background-image: url('/pics/main/search_hover.png');
  background-size: 96% 96%;
}
.search_slct2 {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 50%;
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.2rem;
}
.search_slct2 input[type=checkbox] {
  width: 2.5rem;
  height: 2.5rem;
}
.search_tabs{display:flex;gap:4px;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.search_tabs button{padding:.5rem .9rem;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.search_tabs button[aria-pressed=true]{color:var(--tomato);border-bottom-color:var(--tomato)}
.search_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px 14px;max-width:900px;margin:6px 0 10px}
.search_grid label{display:flex;flex-direction:column;gap:4px;font-weight:600;color:var(--muted)}
.search_grid .search_slct{width:100%}
.search_section {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  max-width: 600px;
  margin-bottom: 6px;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  #search_inpt,
  #search_slct {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 50%;
    height: 2.5rem;
    border: 1px var(--grey) solid;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1.2rem;
  }
}
#search_inpt,
#search_slct {
  border-color: var(--field-border);
}
.search_inpt,
.search_slct {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 50%;
  height: 2.5rem;
  border: 1px var(--grey) solid;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1.2rem;
  border-color: var(--field-border);
}
.autocomplete-items .autocomplete-option.autocomplete-active .autocomplete-recipe-image {
  opacity: .95;
}
.autocomplete-items .autocomplete-option-name strong {
  color: #C8420E;
  font-weight: 800;
}
.autocomplete-items .autocomplete-option.autocomplete-active {
  background: #ffffff !important;
  color: inherit !important;
  outline: 2px solid #3F6F1A;
  outline-offset: -2px;
}
.autocomplete-items .autocomplete-option:has(.autocomplete-recipe-image[src$="/blank.jpg"])::before,
.autocomplete-items .autocomplete-option:not(:has(img))::before {
  content: "";
}
.autocomplete-items {
  position: absolute;
  z-index: 99;
  background: #F4EFE6;
  top: calc(100% + 2px);
  left: 0;
  min-width: 260px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  box-sizing: border-box;
  max-height: 360px;
  overflow-y: auto;
  right: auto;
  width: 80%;
  background-color: #ffffff;
  border: 1px solid #D5CCBA;
  border-radius: 12px;
  box-shadow: 0 0.5rem 0.75rem 0 rgba(0,0,0,0.12);
}
.autocomplete-items .autocomplete-option {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(43, 39, 35, 0.07);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  height: auto;
  margin: 0;
  padding: 6px 12px 6px 6px;
  overflow: visible;
  flex-shrink: 0;
  background-color: #ffffff;
  border: 1px solid #E6DFD2;
  border-radius: 10px;
}
.autocomplete-items .autocomplete-option:hover {
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(200, 66, 14, 0.16);
  transform: translateY(-1px);
  background-color: #F6F0E4;
}
.autocomplete-items .autocomplete-recipe-image {
  background: #F2EFE8;
  position: relative;
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  max-width: none;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
  border-radius: 8px;
  object-fit: cover;
}
.autocomplete-items .autocomplete-recipe-image[src$="/blank.jpg"] {
  display: none;
}
.autocomplete-items .autocomplete-option:has(.autocomplete-recipe-image[src$="/blank.jpg"])::before,
.autocomplete-items .autocomplete-option:not(:has(img))::before {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: url("/pics/small/default.jpg") center / cover no-repeat;
}
.autocomplete-items .autocomplete-option-name {
  font-family: var(--font-body);
  font-weight: 600;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color);
}
.autocomplete-items .autocomplete-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #6B645A;
}
.autocomplete-items .autocomplete-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
}
@media (max-width: 700px) {
  .autocomplete-items {
    max-width: 100%;
    padding: 4px;
    border-radius: 14px;
    min-width: 0;
    right: 0;
    width: auto;
    max-height: 60vh;
  }
  .autocomplete-items .autocomplete-option {
    gap: 10px;
    min-height: 64px;
    padding: 6px 10px 6px 6px;
  }
  .autocomplete-items .autocomplete-recipe-image,
  .autocomplete-items .autocomplete-option:has(.autocomplete-recipe-image[src$="/blank.jpg"])::before,
  .autocomplete-items .autocomplete-option:not(:has(img))::before {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }
  .autocomplete-items .autocomplete-option-name {
    line-height: 1.25;
    font-size: 14px;
  }
}

/* ==========================================================================
   Баннеры над контентом
   ========================================================================== */

.banners {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  width: 90%;
  max-width: 1350px;
  margin-bottom: 1.75rem;
}
.banners a {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}
.banners figure {
  display: inline-block;
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.banners figure img {
  width: 100%;
  height: 170px;
  display: block;
  object-fit: cover;
}
.banners figure figcaption {
  width: 100%;
  height: 50%;
  position: absolute;
  z-index: 2;
  padding: 1rem;
  background: var(--overlay);
  color: var(--overlay-color);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  bottom: 0;
  font-size: 1.4rem;
  font-weight: 500;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
}
/* Текст ошибки под полем формы (WCAG 3.3.1) */
.field-error {
  display: block;
  margin-top: .25rem;
  color: #b00020;
  font-size: .9rem;
  font-weight: 600;
}
.field-error:empty { display: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #b00020;
}
/* Баннеры соцсетей: настоящий текст вместо картинки с текстом (WCAG 1.4.5) */
.banners .banner-social {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 170px;
  padding: 1rem 1.25rem;
  color: #ffffff;
}
.banner-social--tg { background: linear-gradient(135deg, #0e5f93, #136ca4); }
.banner-social--ok { background: linear-gradient(135deg, #a84600, #c25500); }
.banner-social--fb { background: linear-gradient(135deg, #0b4fa8, #1660c4); }
.banners figure img.banner-social__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
}
.banner-social__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  min-width: 0;
}
.banner-social__title {
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
  font-size: 1.6rem;
  line-height: 1.15;
}
.banner-social__sub {
  font-size: 1.05rem;
  font-weight: 600;
}
.banner-social__btn {
  margin-top: .35rem;
  padding: .3rem .9rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
}
.banners a:hover .banner-social__btn,
.banners a:focus .banner-social__btn {
  background: #ffffff;
  color: #1f1f1f;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .banners {
    display: none;
  }
}

/* ==========================================================================
   Боковая панель и блоки-заголовки в основной колонке
   ========================================================================== */

.sidebar {
  display: flex;
  width: 100%;
  max-width: 320px;
  flex-direction: column;
  gap: 15px;
}
.sidebar .block {
  display: flex;
  flex-direction: column;
  border: var(--card-border);
  padding: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
}
.sidebar .block .title {
  font-size: var(--block-subtitle-fontsize);
  display: flex;
  color: var(--block-subtitle_border-color);
  position: relative;
  border-bottom: 1px solid transparent;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
}
.page-main .block {
  display: flex;
  flex-direction: column;
  border: var(--card-border);
  padding: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
}
.page-main .block:hover,
.page-main .block:focus-within {
  box-shadow: var(--card-shadow-hover);
}
.page-main .block2 {
  display: flex;
  flex-direction: column;
  border: var(--card-border);
  padding: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
}
.page-main .block .title,
.page-main .block2 .title {
  font-size: var(--block-subtitle-fontsize);
  display: flex;
  color: var(--hover-color);
  position: relative;
  border-bottom: 1px solid transparent;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
}
.page-main .block2 h1,
.page-main .block2 h2 {
  font-size: var(--block-subtitle-fontsize);
  display: flex;
  color: var(--block-subtitle-color);
  padding: 6px;
  margin-bottom: 12px;
  font-weight: 600;
  position: relative;
  border-bottom: 1px solid transparent;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
}
.links3-block a {
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
  color: var(--custom-link-color);
  font-weight: 500;
  transition: 120ms;
}
.links3-block a:hover,
.links3-block a:focus {
  color: var(--custom-link-hover-color);
}
#links1_block,
.links2-block {
  display: flex;
  flex-direction: column;
}
.sidebar .block #survey_form {
  display: flex;
  flex-direction: column;
}
.sidebar .block #survey_form fieldset {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 0;
}
.sidebar .block #survey_form fieldset legend {
  font-size: var(--block-subtitle2-fontsize);
  color: var(--color);
  line-height: calc(var(--block-subtitle2-fontsize) + 0.3rem);
  margin-bottom: 10px;
  margin-top: 10px;
}
.sidebar .block #survey_form fieldset label {
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 5px;
}
.sidebar .block #survey_form fieldset label:focus-within {
  outline: 3px solid #3F6F1A;
  outline-offset: 2px;
  border-radius: 99em;
}
.sidebar .block #survey_form input {
  position: absolute;
  left: -9999px;
}
.sidebar .block #survey_form input:checked + span {
  background-color: #F6F0E4;
  color: #2B2723;
}
.sidebar .block #survey_form input:checked + span:before {
  box-shadow: inset 0 0 0 0.4375em var(--hover-color);
}
.sidebar .block #survey_form span {
  display: flex;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  transition: 0.25s ease;
}
.sidebar .block #survey_form span:hover {
  background-color: #F6F0E4;
  color: #2B2723;
}
.sidebar .block #survey_form span:before {
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #000000;
}
.sidebar .block #survey_form section {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 10px;
}
.sidebar .block section.bottom {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  padding: 10px;
  border-top: 2px var(--grey) dotted;
}
.sidebar .button:hover {
  background-color: var(--button-hover-color);
  color: #ffffff;
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}
.sidebar .button:disabled {
  background: #E6DFD2;
  color: #8F887C;
  cursor: not-allowed;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .sidebar {
    max-width: 100%;
  }
}
a.block2.list .Data {
  margin-top: auto;
  flex-shrink: 0;
}
#links1_block a,
.links2-block a {
  display: flex;
  color: #2B2723;
  transition: 120ms;
  font-weight: 600;
}
.sidebar .button {
  padding: 0.5rem;
  border-radius: var(--radius-btn);
  border: 0;
  background-color: var(--hover-color);
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
  font-weight: 700;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.sidebar .button:active {
  background-color: var(--tomato-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: none;
}
.sidebar .button:disabled {
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   Карточки рецептов и статей (главная, списки), статистика, автор
   ========================================================================== */

.crop p {
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: auto;
  overflow: hidden;
}
/* Автор в карточках списков. Стоит выше блока «Лучшее», чтобы
   .top-content__list .Main его перебивал */
.avtor.new {
  display: block;
}
.top-content {
  flex: 1;
}
.top-content__list {
  flex-direction: row;
  align-items: flex-start;
}
.top-content a {
  flex-direction: column;
  transition: 120ms;
  color: var(--color);
}
.top-content a:hover figure img {
  transform: scale(1.1);
}
.top-content a:hover {
  color: var(--color);
}
.top-content a:focus figure img {
  transform: scale(1.1);
}
.top-content a:focus-within {
  color: var(--color);
}
.top-content__list figure {
  display: flex;
  position: relative;
  overflow: hidden;
}
.top-content__list article {
  display: flex;
  flex-direction: column;
}
.top-content__list .Data div {
  display: flex;
  flex-direction: row;
}
.top-content__list figure img {
  width: 100%;
  object-fit: cover;
  object-position: center center;
  display: flex;
  transition: 750ms;
  transform: scale(1);
}
.top-content__list .Data {
  display: flex;
  position: relative;
}
.top-content__list .Main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.content_block1 {
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  width: 50%;
  max-width: 50%;
}
.content_block1 a:hover figure img {
  transform: scale(1.1);
}
.content_block1 a:hover {
  color: var(--hover-color);
  background-color: #F6F0E4;
  border-radius: 10px;
}
.content_block1 a:focus figure img {
  transform: scale(1.1);
}
.content_block1 a:focus-within {
  color: var(--hover-color);
  background-color: #F6F0E4;
}
.content_block1 figure {
  display: flex;
  position: relative;
  overflow: hidden;
}
.content_block1 .Main {
  display: flex;
  gap: 1rem;
}
.content_block1 .Data {
  gap: 1rem;
}
.content_block2 {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.content_block2 a:hover {
  background-color: #F6F0E4;
  color: var(--hover-color);
  border-radius: 10px;
}
.content_block2 a:focus-within {
  background-color: #F6F0E4;
  color: var(--hover-color);
}
.content_block2 a:hover figure img,
.content_block2 a:focus figure img {
  transform: scale(1.5);
}
.content_block2 figure {
  display: flex;
  position: relative;
  overflow: hidden;
}
.added_date {
  font-weight: 500;
  font-size: 14px;
  color: var(--icon-color);
  position: relative;
  padding-left: 1.2rem;
}
.added_date:before {
  content: '';
  background-image: url('/pics/main/date.png');
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.views {
  font-weight: 550;
  font-size: 14px;
  color: var(--icon-color);
  position: relative;
  padding-left: 1.2rem;
}
.views:before {
  content: '';
  background-image: url('/pics/main/views.png');
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.likes {
  font-weight: 550;
  font-size: 14px;
  color: var(--icon-color);
  position: relative;
  padding-left: 1.2rem;
}
.likes:before {
  content: '';
  background-image: url('/pics/main/likes.png');
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.added_date.white {
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
  position: relative;
  padding-left: 1.5rem;
}
.added_date.white:before {
  content: '';
  background-image: url('/pics/main/date_white.png');
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.views.white {
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
  position: relative;
  padding-left: 1.5rem;
}
.views.white:before {
  content: '';
  background-image: url('/pics/main/views_white.png');
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.likes.white {
  font-weight: 500;
  color: #ffffff;
  position: relative;
  padding-left: 1.5rem;
}
.likes.white:before {
  content: '';
  background-image: url('/pics/main/likes_white.png');
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.author.white {
  font-weight: 500;
  color: #ffffff;
  position: relative;
  padding-left: 1.5rem;
}
.author.white:before {
  content: '';
  background-image: url('/pics/main/author_white.png');
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.clip_line {
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .content_block1 {
    width: 100%;
    max-width: 100%;
  }
  .content_block2 {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }
  .content_block2 figure {
    justify-content: flex-start;
  }
  .clip_line {
    white-space: normal;
    word-break: normal;
  }
  .top-content__list {
    flex-direction: column;
  }
}
.author {
  font-weight: 500;
  color: var(--icon-color);
  padding-left: 0;
  gap: 5px;
}
.author:before {
  content: '';
  display: block;
  background-image: url('/pics/main/author.png');
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.stats span:hover {
  transform: scale(1.1);
  color: #C8420E;
}
.stats span {
  transition: transform 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stats-badge span {
  transition: transform 0.2s, color 0.2s;
}
.stats-badge span:hover {
  transform: scale(1.1);
  color: #C8420E;
}
.content_block2 > a > article > .textnadlo {
  flex-shrink: 0;
}
.content_block2 > a > article > .Data {
  flex: 1;
  min-width: 0;
  gap: 0;
}
.content_block2 > a > article > .Data > .cat_name {
  margin-top: auto;
  margin-bottom: 4px;
}
.content_block2 > a > article > .Data > hr {
  width: 100%;
  margin: 0 0 4px 0;
  border: 0;
  border-top: 1px solid #d8cbbb;
}
.content_block2 > a > article > .Data > .stats {
  justify-content: space-between;
  align-items: center;
}
.author.avtor,
.avtor {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--tomato);
}
.zagpodf {
  letter-spacing: 0;
}
.textnadlo {
  letter-spacing: 0;
}
.ellipsis {
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.cat_name {
  font-family: var(--font-body);
}
.stats {
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.stats-badge {
  position: absolute;
  bottom: 8px;
  left: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 500;
  z-index: 10;
  border-radius: var(--radius-pill);
}
.check-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  padding: 6px 10px;
  z-index: 11;
  background: var(--saffron);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Страница категорий
   ========================================================================== */

.cats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
.cats .cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 33%;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cats nav {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: flex-start;
  align-content: space-between;
  flex-direction: column;
  gap: 1rem;
}
.cats ul {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-direction: column;
  list-style: none;
  gap: 0.5rem;
}
.cats li a {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  color: #2B2723;
  font-weight: 500;
  transition: 120ms;
}
.cats li a:hover {
  color: var(--link-hover-color);
}
.cats li a:before {
  content: '››\00a0\00a0\00a0';
  letter-spacing: -2px;
  margin-top: -0.3rem;
  color: var(--link-hover-color);
  font-weight: 800;
}
.cats li {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
}
.cats a {
  color: var(--h1-back-color);
  font-weight: 500;
  transition: 120ms;
  width: 100%;
}
.cats a:hover,
.cats a:focus-within {
  color: #2B2723;
}
.cats .cat figure {
  width: 100%;
  display: flex;
  border-radius: 1.1rem;
  overflow: hidden;
}
.cats .cat h2 {
  width: 100%;
  font-size: 1.1rem;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  color: var(--h1-back-color-2);
  border-bottom: 1px solid transparent;
  position: relative;
  padding-left: 2.2rem;
  font-weight: 600;
}
.cats .cat h2:hover,
.cats .cat h2:focus-within {
  color: var(--h1-back-color);
}
.cats .cat h2::before {
  content: '';
  position: absolute;
  background-image: url('/pics/main/icon.png');
  background-size: contain;
  background-position: center center;
  width: 1.5rem;
  height: 1.5rem;
  left: 0;
}
.cats .cat figure img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center center;
}
.cats .cat span {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.cats .cat b {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  color: var(--block-subtitle_border-color);
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
  font-size: 1.2rem;
}
.cats .cat b.ct {
  border-top: 2px var(--grey) dotted;
  padding-top: 5px;
  margin-top: auto;
}
.cats .cat a.more:hover,
.cats .cat a.more:focus-within {
  background-color: var(--button-hover-color);
  color: #ffffff;
}
.cats .cat a.more:after {
  content: '\00a0\00a0\00a0››';
  letter-spacing: -2px;
  margin-top: -0.3rem;
  color: #ffffff;
  font-weight: 800;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .cats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
  }
  .cats .cat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 1rem;
  }
}
.cats .cat a.more {
  display: inline;
  width: auto;
  padding: 0.5rem;
  border-radius: var(--radius-btn);
  border: 0;
  background-color: var(--hover-color);
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
  font-weight: 700;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.cats .cat a.more:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}
.cats .cat a.more:active {
  background-color: var(--tomato-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: none;
}

/* ==========================================================================
   Авторы и списки рецептов автора
   ========================================================================== */

.author_image {
  width: 100px !important;
  height: 100px !important;
  border-radius: 100%;
  overflow: hidden;
  border: 1px var(--grey) dashed;
  min-width: 100px;
}
.author_image img {
  width: 100%;
}
.author_image_small {
  width: 75px !important;
  height: 75px !important;
  border-radius: 100%;
  overflow: hidden;
  border: 1px var(--grey) dashed;
  min-width: 75px;
}
.author_image_small img {
  width: 100%;
}
.Avatars {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  flex-wrap: wrap;
}
.Avatars a {
  display: inline;
  width: 75px;
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.content_block2 a {
  align-content: flex-start;
}
/* порядок важен: по смыслу относится к разделу «Базовые стили: теги, заголовки, ссылки, текст», но должно идти после правил текущего раздела */
.cat a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 1rem;
}
.Avatars a img {
  display: inline;
  width: 75px;
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.content_block1 figure img {
  object-position: center center;
  display: flex;
  transform: scale(1);
  transition: 1000ms;
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.content_block2 figure img {
  object-position: center center;
  display: flex;
  transition: 720ms;
}
.authors-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
.authors-list .list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 23%;
  gap: 1rem;
  margin-bottom: 1rem;
}
.authors-list .list figure {
  display: flex;
  width: 100%;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
}
.authors-list .list figure img {
  display: flex;
  width: 120px;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
  height: 120px;
  border-radius: 100%;
  overflow: hidden;
  border: 1px var(--grey) dashed;
}
.authors-list .Main {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-content: stretch;
  align-items: stretch;
}
.authors-list h3 {
  text-align: center;
}
.recipe-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
.recipe-list .list {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 49%;
  margin-bottom: 1rem;
}
.recipe-list .list figure {
  display: flex;
  width: 100%;
  align-items: flex-start;
  position: relative;
}
.recipe-list .list figure img {
  display: flex;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
.recipe-list .list .Main {
  display: flex;
  align-items: center;
}
.recipe-list .list .Data {
  display: flex;
  align-content: center;
  font-size: 1rem;
}
.recipe-list .list .Data span {
  display: flex;
}
.recipe-list a {
  color: #2B2723;
  font-weight: 500;
  font-size: 1.2rem;
}
.recipe-list a:hover,
.recipe-list a:focus-within {
  color: var(--hover-color);
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .authors-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
  }
  .authors-list .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
    margin-bottom: 1rem;
  }
  .authors-list .list figure {
    display: flex;
    width: 100%;
    align-items: flex-start;
    position: relative;
  }
  .authors-list .list figure img {
    display: flex;
    width: 96px;
    object-fit: cover;
    object-position: center center;
    height: 96px;
  }
  .authors-list .Main {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
  }
  .authors-list h3 {
    text-align: center;
    font-size: 1rem;
  }
  .recipe-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
  }
  .recipe-list .list {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    margin-bottom: 1rem;
  }
  .recipe-list .list figure {
    display: flex;
    width: 100%;
    align-items: flex-start;
  }
  .recipe-list .list figure img {
    display: flex;
    width: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .recipe-list .list .Data {
    display: flex;
    align-content: center;
    font-size: 1rem;
  }
}

/* ==========================================================================
   Страница рецепта: заголовок, фото, данные, ингредиенты, шаги, лайк, шеринг
   ========================================================================== */

.title_section {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: var(--block-subtitle-fontsize);
  border-bottom: 1px solid transparent;
}
.action-panel {
  display: flex;
}
.content-actions-data {
  display: flex;
}
.like-panel button:hover {
  background-color: var(--button-hover-color);
  color: #ffffff;
  transform: translateY(-1px);
}
.like-panel button:disabled {
  background: #E6DFD2;
  color: #8F887C;
  cursor: not-allowed;
}
.like-panel button:before {
  left: 10px;
}
.share_panel2,
.share_panel1x,
.share_panel3 {
  display: flex;
  align-items: center;
  align-content: center;
}
.share-buttons img {
  display: block;
}
.share-buttons,
.share-buttons2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  gap: 3px;
}
.share-buttons2 img {
  display: block;
  width: 35px;
  height: 35px;
}
.custom-window {
  width: 100%;
  flex-direction: column;
  align-items: center;
  align-content: center;
  gap: 10px;
}
.custom-window span {
  border-bottom: 2px var(--grey) dotted;
  margin-bottom: 10px;
}
.page-hero figure .action-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  width: 50px;
  gap: 10px;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 4;
  color: #ffffff !important;
  font-size: 1.2rem;
  font-weight: 500;
  text-shadow: 0px 1px 2px rgba(43, 39, 35, 0.6);
}
.content-steps {
  display: inline-flex;
  flex-direction: row;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  flex-grow: 0;
}
.content-steps > h2,
.content-steps h3,
.content-steps h5 {
  display: inline-block;
  width: 100%;
}
.content-steps p {
  display: inline;
  flex: 1 0 0;
}
.content-steps p.full {
  display: inline-block;
  flex: 1;
  min-width: 100%;
}
.content-steps figure {
  max-width: 100%;
}
.content-steps figure.small {
  display: inline;
  float: left;
  position: relative;
  width: 50%;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
}
.content-steps figure img,
.content-steps figure.small img {
  display: flex;
  width: 100%;
}
.content-steps figure figcaption {
  display: none;
  align-items: flex-end;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  z-index: 3;
  padding-left: 1.1rem;
  padding-bottom: 1.1rem;
  transition: 160ms;
}
.content-steps figure:hover figcaption,
.content-steps figure:focus figcaption {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  z-index: 3;
  background: var(--overlay);
  color: var(--overlay-color);
  padding-left: 1.1rem;
  padding-bottom: 1.1rem;
}
.pre_main_data {
  justify-content: center;
  font-weight: 500;
}
.main_data img {
  margin-top: 4px;
}
.main_data ul {
  justify-content: space-between;
  list-style-type: none;
  align-items: stretch;
}
.article-block2 {
  display: flex;
  flex-direction: column;
}
.article-block2 > section {
  display: flex;
}
.article-block2 ul {
  width: 50%;
}
.article-block2 li {
  list-style-type: none;
  line-height: 1.7rem;
}
.article-block2 > h2:after,
.article-block2 > h2:before,
.main_data > h2:after,
.main_data > h2:before {
  content: " ";
  display: block;
  border-bottom: 2px solid var(--hover-color);
}
.article-block3 li {
  list-style-type: none;
  line-height: 1.7rem;
  border-bottom: 2px var(--grey) dotted;
}
.article-block3 > h2:after,
.article-block3 > h2:before {
  display: block;
  border-bottom: 2px solid var(--hover-color);
}
.print {
  position: relative;
}
.print:before {
  content: '';
  background-image: url('/pics/main/print.png');
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
.print a:hover,
.print a:focus {
  color: var(--icon-color);
}
.CheckedByUs {
  position: relative;
}
.CheckedByUs:before {
  content: '';
  background-image: url('/pics/main/check.png');
  background-position: center center;
  background-size: contain;
  position: absolute;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .article-block2 .list-of-ingredients {
    display: flex;
    flex-direction: column;
  }
  .share_panel1,
  .share_panel1x {
    display: flex;
    align-items: center;
    align-content: center;
  }
  .share_panel3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    gap: 10px;
  }
  .article-block2 ul {
    width: 100%;
  }
  .main_data ul {
    list-style-type: none;
    align-items: stretch;
  }
  .main_data li {
    align-content: center;
  }
  .main_data img {
    margin-top: 0;
  }
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.stats img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.article-block1 h1 {
  position: relative;
  border-bottom: 1px solid transparent;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
  font-weight: var(--h1-weight);
}
.article-block2 > h2,
.main_data > h2,
.article-block3 > h2 {
  color: #2B2723;
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 16px 0;
  grid-gap: 22px;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
  font-weight: var(--h2-weight);
}
.title_section .title {
  color: var(--block-subtitle_border-color);
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
  font-weight: var(--display-weight);
}
.like-panel button {
  justify-content: center;
  align-content: center;
  border-radius: var(--radius-btn);
  position: relative;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.like-panel button:hover {
  box-shadow: var(--shadow-btn-hover);
}
.like-panel button:active {
  background-color: var(--tomato-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: none;
}
.like-panel button:disabled {
  box-shadow: none;
  transform: none;
}
.aput {
  letter-spacing: 0;
}
.aput a {
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
}
.aput a:hover {
  color: var(--aput-hover);
}
/* Ссылки в «хлебных крошках»: серые, перебивают .aput a */
.place-show a {
  color: #6B645A;
  transition: 120ms;
  font-weight: 580;
  padding-right: 5px;
}
.place-show a:hover,
.place-show a:focus-within {
  color: var(--hover-color);
}
.aput .home-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
  position: relative;
  top: -2px;
}

/* ==========================================================================
   Текстовые страницы и статьи
   ========================================================================== */

#text_content li {
  list-style-type: none;
  line-height: 1.7rem;
  border-bottom: 2px var(--grey) dotted;
}
#text_content_block1,
#text_content_block2,
.text-content-block3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
}
#text_content_block1 figure,
#text_content_block2 figure,
.text-content-block3 figure {
  display: flex;
  position: relative;
  width: 50%;
  overflow: hidden;
}
#text_content_block1 a:hover,
#text_content_block2 a:hover,
.text-content-block3 a:hover,
#text_content_block1 a:focus,
#text_content_block2 a:focus,
.text-content-block3 a:focus {
  color: var(--custom-link-hover-color);
}
#text_content_block1 article,
#text_content_block2 article,
.text-content-block3 article {
  display: flex;
  width: 50%;
  min-height: 45vh;
  flex-direction: column;
  justify-content: space-between;
}
#text_content_block1 article.noPic,
#text_content_block2 article.noPic,
.text-content-block3 article.noPic {
  display: flex;
  width: 100%;
  min-height: 15vh;
  flex-direction: column;
  justify-content: space-between;
}
#text_content_block1 figure img,
#text_content_block2 figure img,
.text-content-block3 figure img {
  width: 100%;
  height: 45vh;
  object-fit: cover;
  object-position: center center;
  display: flex;
  transition: 750ms;
  transform: scale(1);
}
.Paragraphs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#text_content h1 {
  display: flex;
  color: var(--block-subtitle-color);
  font-size: 3rem;
  justify-content: flex-start;
}
.content_block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  gap: 20px;
}
#text_content {
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
#text_content section {
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
#text_content article {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#text_content figure {
  display: flex;
}
.text-content2 section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.text-content2 article {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.text-content2 figure {
  display: flex;
  width: 100%;
}
.text-content2 figure img {
  display: flex;
  width: inherit;
  height: 350px;
  object-fit: cover;
  object-position: center;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .content_block {
    flex-direction: column;
    gap: 20px;
  }
  #text_content_block1,
  #text_content_block2,
  .text-content-block3 {
    flex-direction: column;
    gap: 1rem;
  }
  #text_content_block1 figure,
  #text_content_block2 figure,
  .text-content-block3 figure {
    width: 100%;
  }
  #text_content_block1 article,
  #text_content_block2 article,
  .text-content-block3 article {
    width: 100%;
    gap: 0px;
    min-height: auto;
  }
  #text_content_block1 figure img,
  #text_content_block2 figure img,
  .text-content-block3 figure img {
    height: 30vh;
  }
  #text_content section {
    display: flex;
  }
  .txt2 section {
    display: flex;
    flex-direction: column !important;
  }
  .txt3 section {
    flex-direction: row !important;
    gap: 1rem !important;
  }
  #text_content figure {
    display: flex;
  }
  #text_content figure img {
    display: flex;
    max-width: 100%;
  }
  .text-content2 figure img {
    display: flex;
    width: inherit;
    height: 250px;
  }
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.ellipsis a {
  text-underline-offset: 3px;
}
#text_content a {
  text-underline-offset: 3px;
}
#text_content_block1 a,
#text_content_block2 a,
.text-content-block3 a {
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
  color: var(--custom-link-color);
  font-weight: 500;
  transition: 120ms;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Комментарии
   ========================================================================== */

.comments_list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.comments_list .comments_title {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
}
.comments_list .comments_title section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.content_block2 .Data div {
  flex-direction: row;
}
/* порядок важен: по смыслу относится к разделу «Поиск: поле, кнопки, выпадающие подсказки», но должно идти после правил текущего раздела */
.autocomplete-items .autocomplete-meta-item img {
  display: inline-block;
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.comments_list p {
  display: flex;
  width: auto !important;
  margin-bottom: 1rem;
}
.comments_list article {
  display: flex;
  flex-direction: column;
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.content_block1 article {
  justify-content: space-between;
  transition: 120ms;
}
/* порядок важен: по смыслу относится к разделу «Карточки рецептов и статей (главная, списки), статистика, автор», но должно идти после правил текущего раздела */
.add-comment-panel {
  margin-top: 1rem;
}
.bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
  margin-top: -15px;
}
.bubble::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  left: 3.5em;
  border: .75rem solid transparent;
  border-top: none;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}
.add_subcomment_panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.add_subcomment_panel div {
  display: flex;
  flex-direction: row;
  align-content: flex-end;
  justify-content: flex-end;
}
.add_subcomment_panel div button {
  display: inline-block;
  width: auto !important;
}
.comments_hr {
  display: flex;
  width: 100%;
  border-bottom: 2px var(--grey) dotted;
}
.like_comment {
  margin-top: 5px;
  color: #6B645A;
}
.comments-content {
  align-items: stretch;
  align-content: stretch;
  flex: 1;
}
.comments-list {
  display: flex;
  flex-direction: column;
  width: inherit;
}
.comments-list .list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
  border-bottom: 2px var(--grey) dotted;
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
}
.comments-list .list figure {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: flex-start;
  position: relative;
}
.comments-list .list article {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
}
.comments-list .list figure img {
  display: flex;
  object-fit: cover;
  object-position: center center;
  width: 50px;
  height: 50px;
}
.comments-list .list .Data {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-content: center;
  font-size: 1rem;
  justify-content: space-between;
}
.comments-list .list .Data span {
  display: flex;
}
.comments {
  font-weight: 550;
  Font-size: 14px;
  color: var(--icon-color);
  position: relative;
  padding-left: 1.2rem;
}
.comments:before {
  content: '';
  background-image: url('/pics/main/comments.png');
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0;
  background-position: center center;
  background-size: contain;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .comments-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
  }
  .comments-list .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
  }
  .comments-list .list figure {
    display: flex;
    width: 100%;
    align-items: flex-start;
  }
  /* порядок важен: по смыслу относится к разделу «Каркас страницы: контейнер, основная колонка, мобильная/десктопная версия», но должно идти после правил текущего раздела */
  .page-hero figure {
    display: block;
    height: 250px;
    width: 100%;
    min-width: auto;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: var(--card-bg);
    position: relative;
  }
  /* порядок важен: по смыслу относится к разделу «Страница рецепта: заголовок, фото, данные, ингредиенты, шаги, лайк, шеринг», но должно идти после правил текущего раздела */
  .content-steps figure.small {
    display: inline;
    position: relative;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: var(--card-bg);
  }
  .comments-list .list figure img {
    display: flex;
    width: 100%;
    height: 250px;
  }
  /* порядок важен: по смыслу относится к разделу «Каркас страницы: контейнер, основная колонка, мобильная/десктопная версия», но должно идти после правил текущего раздела */
  .page-hero figure img {
    display: inline-block;
    width: 100%;
    height: 250px;
    z-index: 1;
    object-fit: cover;
    object-position: center center;
  }
  /* порядок важен: по смыслу относится к разделу «Страница рецепта: заголовок, фото, данные, ингредиенты, шаги, лайк, шеринг», но должно идти после правил текущего раздела */
  .content-steps figure.small img {
    display: flex;
    width: 100%;
  }
  .comments-list .list .Data {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 1rem;
    justify-content: flex-start;
    gap: 0.7rem;
  }
}
.comments_area {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  height: 7rem;
  font-size: 1.1rem;
  border-radius: 8px;
  border-color: var(--field-border);
}

/* ==========================================================================
   Кабинет, сообщения, формы, опросы
   ========================================================================== */

#messages_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#messages_list .list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-bottom: 2px var(--grey) dotted;
  padding-bottom: 10px;
}
#messages_list .list .date {
  display: flex;
  width: 100px;
  font-size: 14px !important;
}
#messages_list .list .name {
  display: flex;
  flex: 1;
}
#messages_list .list .stat {
  display: flex;
  width: 100px;
  font-size: 14px !important;
}
.img_holder {
  display: inline-block;
  width: 1px;
}
.img_holder_show {
  display: inline-block;
  width: 220px !important;
  height: 180px !important;
  overflow: hidden;
  border: 2px var(--grey) dotted;
}
.img_holder_show img {
  width: inherit !important;
  display: block;
}
#btns {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
#btns button:hover {
  background-color: var(--button-hover-color);
  color: #ffffff;
}
#btns button:disabled {
  background: #E6DFD2;
  color: #8F887C;
  cursor: not-allowed;
}
#survey_list ul {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-direction: column;
  list-style: none;
  gap: 1rem;
}
#survey_list li a {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  color: #2B2723;
  font-weight: 500;
  transition: 120ms;
}
#survey_list li a:hover {
  color: var(--link-hover-color);
}
#survey_list li a:before {
  content: '››\00a0\00a0\00a0';
  letter-spacing: -2px;
  margin-top: -0.3rem;
  color: var(--link-hover-color);
  font-weight: 800;
}
#survey_list li {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  border-bottom: 2px var(--grey) dotted;
  padding-bottom: 0.5rem;
}
#old_survey {
  display: flex;
  position: relative;
  padding: 1rem;
  padding-top: 3rem;
  width: 300px;
  max-width: 300px;
  gap: 0.3rem;
}
#old_survey button {
  display: inline-block;
  font-size: 3rem;
  font-weight: 800;
  position: absolute;
  top: -1rem;
  right: 0;
  z-index: 3;
  color: #2B2723;
}
#old_survey span.title {
  font-weight: 500;
  font-size: 1.3rem;
}
#old_survey .survey-data {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  flex: 1;
}
#old_survey #survey {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.settings-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.settings-section #loader {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
.settings-section #loader.show {
  margin-bottom: 1rem;
}
.settings-section .pager {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.settings-section .pager #list_buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.settings-section .pager select {
  display: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 0;
}
.settings-section .pager button:hover {
  background-color: var(--button-hover-color);
  color: #ffffff;
}
.settings-section .pager button:disabled {
  background: #E6DFD2;
  color: #8F887C;
  cursor: not-allowed;
}
.settings-section .pager button.pager_btn:hover {
  background-color: var(--button-hover-color);
  color: #ffffff;
}
.settings-section .pager button.pager_btn:disabled {
  background: #E6DFD2;
  color: #8F887C;
  cursor: not-allowed;
}
#contact_form button:hover,
#contact_form2 button:hover,
#contact_form3 button:hover {
  background-color: var(--button-hover-color);
  color: #ffffff;
}
#contact_form button:disabled,
#contact_form2 button:disabled,
#contact_form3 button:disabled {
  background: #E6DFD2;
  color: #8F887C;
  cursor: not-allowed;
}
#contact_form,
#contact_form2,
#contact_form3 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}
#contact_form section,
#contact_form2 section,
#contact_form3 section {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
#contact_form section label,
#contact_form2 section label,
#contact_form3 section label {
  display: flex;
  width: 180px;
}
#contact_form section.x4 label,
#contact_form section.x4 a,
#contact_form2 section.x4 label,
#contact_form2 section.x4 a,
#contact_form3 section.x4 label,
#contact_form3 section.x4 a {
  display: inline;
  width: auto;
}
#contact_form section.x4 input,
#contact_form2 section.x4 input,
#contact_form3 section.x4 input {
  display: inline;
  width: 1rem;
  height: 1rem;
}
#contact_form section.x4,
#contact_form2 section.x4,
#contact_form3 section.x4 {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
#contact_form section.x2,
#contact_form2 section.x2,
#contact_form3 section.x2 {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  #contact_form section.x3,
  #contact_form2 section.x3,
  #contact_form3 section.x3 {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }
  #messages_list .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    border-bottom: 2px var(--grey) dotted;
    padding-bottom: 10px;
  }
  #btns {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}
#messages_list .list .stat .new {
  color: #ffffff;
  padding: 0.4rem;
  border-radius: 5px;
  background-color: var(--green);
}
#btns button {
  display: flex;
  height: 2rem;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-size: 1rem;
  padding-bottom: 0;
  border-radius: var(--radius-btn);
  border: 0;
  background-color: var(--hover-color);
  padding-left: 1rem;
  padding-right: 1rem;
  color: #ffffff;
  font-weight: 700;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
#contact_form button,
#contact_form2 button,
#contact_form3 button {
  padding: 0.5rem;
  border-radius: var(--radius-btn);
  border: 0;
  background-color: var(--hover-color);
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
  font-weight: 700;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.settings-section .pager button {
  display: flex;
  width: 2rem;
  height: 2rem;
  justify-content: center;
  align-content: center;
  align-items: center;
  border-radius: var(--radius-btn);
  border: 0;
  background-color: var(--hover-color);
  font-size: 1.6rem;
  padding-bottom: 0.3rem;
  color: #ffffff;
  font-weight: 700;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.settings-section .pager button.pager_btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-size: 1rem;
  padding-bottom: 0;
  border-radius: var(--radius-btn);
  border: 0;
  background-color: var(--hover-color);
  color: #ffffff;
  font-weight: 700;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
#btns button:hover,
#contact_form button:hover,
#contact_form2 button:hover,
#contact_form3 button:hover,
.settings-section .pager button:hover,
.settings-section .pager button.pager_btn:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}
#btns button:active,
#contact_form button:active,
#contact_form2 button:active,
#contact_form3 button:active,
.settings-section .pager button:active,
.settings-section .pager button.pager_btn:active {
  background-color: var(--tomato-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: none;
}
#btns button:disabled,
#contact_form button:disabled,
#contact_form2 button:disabled,
#contact_form3 button:disabled,
.settings-section .pager button:disabled,
.settings-section .pager button.pager_btn:disabled {
  box-shadow: none;
  transform: none;
}
#contact_form section input,
#contact_form2 section input,
#contact_form3 section input,
#contact_form section select,
#contact_form2 section select,
#contact_form3 section select {
  display: flex;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 2.5rem;
  border: 1px var(--grey) solid;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1.6rem;
  border-color: var(--field-border);
}
#contact_form section textarea,
#contact_form2 section textarea,
#contact_form3 section textarea {
  display: flex;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 5.5rem;
  border: 1px var(--grey) solid;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1.6rem;
  border-color: var(--field-border);
}

/* ==========================================================================
   Всплывающие окна и индикатор загрузки
   ========================================================================== */

@keyframes loading_spinner_anime {
  0%,
  4.9% {
    transform: scale(0);
    opacity: 0;
  }

  5% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes anim_dialog {
    from { scale: 0;}
    to { scale: 1;}
}
.loading_spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loading_spinner div {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  box-sizing: content-box;
  border: 4px solid var(--link-hover-color);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  animation: loading_spinner_anime 1s
    cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loading_spinner div:nth-child(2) {
  animation-delay: -0.5s;
}
#dialog {
  overflow: hidden;
  background-color: #ffffff;
  border: 3px #ffffff solid;
  border-radius: 1rem;
  width: auto;
  height: auto;
  display: table;
  padding: 0;
}
#dialog_text {
  overflow: auto;
  background-color: #ffffff;
  border: 3px #ffffff solid;
  border-radius: 1rem;
  width: 90%;
  max-width: 700px;
  height: auto;
  max-height: 90vh;
  display: table;
  padding: 0;
}
#dialog::backdrop,
#dialog_text::backdrop {
  background-color: rgba(0,0,0,0.6);
}
#dialog.dialog_show,
#dialog_text.dialog_show {
  animation: anim_dialog 0.5s forwards;
}
#dialog .main_image,
#dialog_text .main_image {
  display: block;
  padding: 0;
  justify-content: center;
  width: auto;
}
#dialog .main_image figure,
#dialog_text .main_image section {
  display: block;
  width: 100%;
  position: relative;
}
#dialog .main_image figure img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
#dialog_text .main_image section article {
  display: block;
  height: auto;
  max-width: 100%;
  max-height: 84vh;
  margin-top: 3vh;
  margin-bottom: 3vh;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--card-shadow);
  overflow: auto;
}
#dialog .main_image figure button {
  display: inline-block;
  font-size: 3rem;
  font-weight: 800;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  color: #ffffff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
}
#dialog_text .main_image section button {
  display: inline-block;
  font-size: 3rem;
  font-weight: 800;
  position: absolute;
  top: -25px;
  right: 12px;
  z-index: 3;
  color: #2B2723;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
}
#dialog .main_image figure figcaption {
  display: flex;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: var(--overlay);
  color: var(--overlay-color);
  justify-content: center;
  align-items: flex-end;
  font-size: 1.4rem;
  font-weight: 500;
  font-family: var(--font-display);
  letter-spacing: var(--display-ls);
}
#dialog .main_image figure figcaption span {
  padding: 1rem;
  color: #ffffff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
}
#dialog {
  position: relative;
}

/* ==========================================================================
   Подвал
   ========================================================================== */

footer {
  margin: 0;
}
.site-footer {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 1.8rem;
}
.site-footer .FooterIn {
  width: 90%;
  max-width: 1350px;
  min-width: 300px;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
.site-footer .footer-links {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.site-footer .footer-links section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.site-footer .footer-social {
  display: flex;
  flex-direction: row;
  gap: 6px;
}
.site-footer .footer-social img {
  width: 30px;
}
.site-footer a {
  font-weight: 500;
}
.site-footer a:hover,
.site-footer a:focus {
  font-weight: 500;
}
.site-footer a b {
  font-weight: 300;
}
@media screen and (min-width: 1px) and (max-width: 1050px) {
  .site-footer {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 1.8rem;
  }
  .site-footer .FooterIn {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
  }
  .site-footer figure {
    display: none;
  }
  .site-footer .footer-links,
  .site-footer .footer-links section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .site-footer .footer-social {
    display: flex;
    flex-direction: row;
    gap: 6px;
  }
  .site-footer .footer-social img {
    width: 30px;
  }
}

/* ==========================================================================
   Шапка
   ========================================================================== */

#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(60, 40, 20, 0.08);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
 
}

.HeaderIn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 90%;
  max-width: 1350px;
  height: 80px;
}

/* Поиск в шапке: поле-«таблетка» с томатной кнопкой */
.header-search {
  flex: 1 1 320px;
  max-width: 560px;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 5px 0 18px;
  background-color: var(--warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
}

.header-search:focus-within {
  border-color: var(--green);
  background-color: #ffffff;
}

.header-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  outline: none;
}

.header-search button {
  display: flex;
  flex: 0 0 36px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background-color: var(--tomato);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.header-search button:hover,
.header-search button:focus-visible {
  background-color: var(--tomato-dark);
}

/* Значок «Расширенный поиск» внутри поля, перед лупой */
.header-search .header-search__adv {
  flex: 0 0 40px;
  width: 40px;
  color: var(--text);
  background-color: transparent;
}

.header-search .header-search__adv:hover,
.header-search .header-search__adv:focus-visible {
  color: var(--tomato);
  background-color: transparent;
}

.header-search__adv rect {
  fill: var(--warm);
}

.header-search:focus-within .header-search__adv rect {
  fill: #ffffff;
}

/* Логотип без скругления (у figure по умолчанию оно есть) */
.logo {
  border-radius: 0;
}

.HeaderIn figure.logo {
  display: flex;
  flex-shrink: 0;
  height: 50px;
}

.HeaderIn figure.logo img {
  display: block;
  width: auto;
  height: 50px;
  max-width: none;
}

#header #main_navigation {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

#header .main_navigation button,
#header .main_navigation div.button {
  display: flex;
}

#header .button_in {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0.2rem;
}

/* ------------------------------------------------------------------------
   Кнопки шапки: Вход, Регистрация, Кабинет, Выход, Поиск, Меню.
   Вариант без «2» — с иконкой справа, вариант с «2» — только текст
   (используется в мобильном меню).
   ------------------------------------------------------------------------ */

#menu_btn,
#search_btn,
.reg_btn, .reg_btn2,
.login_btn, .login_btn2,
.logout_btn, .logout_btn2,
.acc_btn, .acc_btn2 {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 40px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: var(--display-ls);
  color: var(--green);
  transition: 220ms;
}

#menu_btn,
#search_btn,
.reg_btn,
.login_btn,
.logout_btn,
.acc_btn {
  padding-right: 40px;
  background-position: center right;
  background-repeat: no-repeat;
}

.reg_btn { margin-right: 20px; }

/* Фото пользователя у кнопки «Мой кабинет» задаётся из шаблона через style */
.acc_btn { background-size: 35px 35px; }

#menu_btn                                   { background-image: url('/pics/main/menu.png'); }
#menu_btn:hover, #menu_btn:focus-within     { background-image: url('/pics/main/menu_hover.png'); }
#search_btn                                 { background-image: url('/pics/main/search.png'); }
#search_btn:hover, #search_btn:focus-within { background-image: url('/pics/main/search_hover.png'); }
.reg_btn                                    { background-image: url('/pics/main/reg.png'); }
.reg_btn:hover, .reg_btn:focus-within       { background-image: url('/pics/main/reg_hover.png'); }
.login_btn                                  { background-image: url('/pics/main/login.png'); }
.login_btn:hover, .login_btn:focus-within   { background-image: url('/pics/main/login_hover.png'); }
.logout_btn                                 { background-image: url('/pics/main/logout.png'); }
.logout_btn:hover, .logout_btn:focus-within { background-image: url('/pics/main/logout_hover.png'); }

.close_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 3rem;
  color: var(--text);
  transition: 220ms;
}

.close_btn:hover,
.close_btn:focus-within {
  color: var(--green);
}

/* ==========================================================================
   Главное меню (открывается кнопкой «Меню»)
   ========================================================================== */

@keyframes anim_main_navigation_opened {
  from { opacity: 0; transform: translateY(-60vh); }
  to   { opacity: 1; transform: translateY(0); }
}

.main_navigation_opened {
  position: absolute;
  top: 0.5px;
  left: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 50vh;
  max-height: 90vh;
  padding: 1.5rem;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 5px solid var(--line);
  border-radius: 0 0 20px 20px;
  animation: anim_main_navigation_opened 0.5s forwards;
}

.navigation_links {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: space-between;
  gap: 3rem;
  width: 100%;
}

.navigation_links nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navigation_links nav a {
  display: flex;
  padding: 6px 8px;
  font-weight: 500;
  line-height: 1.2rem;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: 120ms;
}

.navigation_links nav a:hover,
.navigation_links nav a:focus-within {
  color: #ffffff;
  background-color: var(--green);
}

/* Заголовок группы в меню («Рецепты», «Полезно знать»…) */
.navigation_links nav a.sub_title,
.navigation_links nav span.sub_title {
  padding-top: 0;
  font-weight: 900;
}

.navigation_links nav a.sub_title:hover,
.navigation_links nav a.sub_title:focus-within {
  color: var(--text);
  background-color: transparent;
}

#Nav1Links, #Nav2Links, #Nav3Links, #Nav4Links, #Nav5Links {
  display: flex;
  flex-direction: column;
}

.MobileMenuTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.MobileMenuTitle button {
  display: none;
}

.MobileSubMenu {
  flex-direction: column;
  gap: 0.8rem;
}

/* Красная кнопка в меню («Все рецепты» и т. п.) */
#main_navigation a.more {
  display: inline;
  width: auto;
  margin: 0 20px;
  padding: 0.5rem 20px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--tomato);
  border: 0;
  border-radius: var(--radius-btn);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

#main_navigation a.more::before {
  content: '+\00a0\00a0\00a0';
  margin-top: -0.3rem;
  font-weight: 800;
  letter-spacing: -2px;
  color: #ffffff;
}

#main_navigation a.more:hover,
#main_navigation a.more:focus-within {
  color: #ffffff;
  background-color: var(--tomato-dark);
}

#main_navigation a.more:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

#main_navigation a.more:active {
  background-color: var(--tomato-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: none;
}

/* ------------------------------------------------------------------------
   Блок пользователя в меню: фото, ссылки кабинета, вход/регистрация
   ------------------------------------------------------------------------ */

#acc_block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#acc_block a {
  display: flex;
  padding: 4px 8px;
  font-weight: 600;
  line-height: 1.2rem;
  color: var(--text);
  border-radius: 4px;
  transition: 120ms;
}

#acc_block a:hover,
#acc_block a:focus-within,
#acc_block a.selected {
  color: #ffffff;
  background-color: var(--green);
}

#acc_x1,
#acc_x2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

#acc_panel_1m {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

#acc_panel_1m img {
  width: 75px;
  height: 75px;
}

#login_panel_1m {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
}

/* ------------------------------------------------------------------------
   Меню на узком экране: группы сворачиваются, у заголовка кнопка «›»
   ------------------------------------------------------------------------ */

@media screen and (max-width: 1050px) {
  .main_navigation_opened {
    min-height: auto;
  }

  .navigation_links {
    flex-direction: column;
    gap: 0;
  }

  .navigation_links nav span.sub_title {
    display: none;
  }

  .navigation_links nav a.first {
    padding-top: 0;
  }

  #Nav1Links, #Nav2Links, #Nav3Links, #Nav4Links, #Nav5Links {
    display: none;
  }

  .MobileMenuTitle {
    margin-top: 2rem;
  }

  .MobileMenuTitle span,
  .MobileMenuTitle a {
    width: 100%;
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: var(--display-ls);
  }

  .MobileMenuTitle button {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    border-radius: 50%;
  }
}

/* ==========================================================================
   Кнопки и ссылки-кнопки
   ========================================================================== */

/* Основная кнопка (томатная): .more1, .label_btn, .button_label */
.more1,
.label_btn,
.button_label {
  padding: 0.5rem 20px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--tomato);
  border: 0;
  border-radius: var(--radius-btn);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.more1 {
  display: flex;
  align-items: center;
}

.label_btn {
  display: inline-block;
  width: auto;
  cursor: pointer;
}

.button_label {
  display: inline;
  width: auto;
  cursor: pointer;
}

.more1:hover, .more1:focus-within,
.label_btn:hover, .label_btn:focus-within,
.button_label:hover, .button_label:focus-within {
  color: #ffffff;
  background-color: var(--tomato-dark);
}

.more1:hover,
.label_btn:hover,
.button_label:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

.more1:active,
.label_btn:active,
.button_label:active {
  background-color: var(--tomato-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: none;
}

/* Стрелки «››» после текста */
.more1::after,
.button_label::after {
  content: '\00a0\00a0\00a0››';
  font-weight: 800;
  letter-spacing: -2px;
  color: #ffffff;
}

.more1::after        { margin-top: -1px; }
.button_label::after { margin-top: -0.3rem; }

/* Вторичная кнопка (белая, при наведении зелёная): .more2 */
.more2 {
  display: inline;
  padding: 0.5rem 20px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background-color: #ffffff;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-btn);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Цвет текста кнопки не должен меняться внутри блоков со своими
   цветами ссылок (.cats a и т. п.) */
a.more2 {
  color: var(--text);
}

.more2:hover,
.more2:focus-within {
  color: #ffffff;
  background-color: var(--green);
  border-color: var(--green);
}

.more2:active {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
}

/* Мелкая кнопка в списке авторов */
.authors-list .more2 {
  font-size: 0.8rem;
}

@media (max-width: 1050px) {
  .authors-list .more2 {
    font-size: 0.6rem;
  }
}

.btns {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin-top: 15px;
}

/* Зелёная текстовая ссылка */
a.link1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a.link1:hover,
a.link1:focus {
  color: var(--tomato);
}

/* Ссылка поверх фото */
a.white,
a.white:hover,
a.white:focus-within {
  color: #ffffff;
  text-decoration: none;
}

/* Метка-фильтр (в поиске): рамка, при наведении зелёная */
.label {
  display: inline-flex;
  align-items: center;
  margin: 4px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-btn);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.label:hover {
  color: #ffffff;
  background-color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(63, 111, 26, 0.45);
}

.label:active {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 0 6px rgba(47, 85, 19, 0.6);
  transform: scale(0.95);
}

.label:hover .icon {
  filter: brightness(0) invert(1);
}

.label:active .icon {
  filter: brightness(0.8) invert(1);
}

/* ----------------------------------------------------------------------
   Плашка просмотров, лайков и комментариев на карточке
   ---------------------------------------------------------------------- */

.stats-badge {
  font-size: 11px;
}

.stats-badge * {
  font-size: inherit;
  font-weight: bold;
}

/* ==========================================================================
   Блоки, стили которых раньше были прописаны прямо в шаблонах (style="…")
   ========================================================================== */

/* ----------------------------------------------------------------------
   Автор в карточке: фото (или иконка) и имя в одну строку
   ---------------------------------------------------------------------- */

.author-chip {
  display: inline-flex;
  align-items: center;
}

.author-photo {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  object-fit: cover;
  border-radius: 50%;
}

.top-content .author-photo {
  margin-right: 8px;
}

/* Автор на странице рецепта: крупнее, со счётчиком рецептов */
.author-photo--large {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}


.author-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.author-sep {
  margin: 0 10px;
  font-size: 15px;
  color: #aaa;
}

.author-count {
  font-size: 15px;
  font-weight: normal;
  color: #555;
  text-decoration: none;
}

/* ----------------------------------------------------------------------
   Рецепт: блок «О блюде»
   ---------------------------------------------------------------------- */

.pre_main_data {
  display: block;
}

.pre_main_data__text {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Меню кабинета в мобильной шапке */
.acc-menu-mobile {
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------------------
   Сообщение формы: ошибка или успех (восстановление пароля)
   ---------------------------------------------------------------------- */

.notice {
  margin-top: 20px;
  padding: 15px 18px;
  color: #333;
  border-left: 4px solid;
  border-radius: 6px;
}

.notice--error {
  background: #fff4f4;
  border-left-color: #d32f2f;
}

.notice--success {
  background: #eef8e8;
  border-left-color: #508d0e;
}

.notice--error .notice__title   { color: #d32f2f; }
.notice--success .notice__title { color: #508d0e; }

/* Ссылка «Сообщить об ошибке» на странице рецепта
   (раньше была в блоке style внутри recipe/_content.ascx) */

.simple-error-link {
  appearance: none;
  -webkit-appearance: none;
  transition: color 0.3s ease;
}

.simple-error-link:hover {
  color: #508d0e;
}

.simple-error-link .error {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: middle;
  background: url('/pics/main/err.png') no-repeat center center;
  background-size: contain;
}

.simple-error-link:hover .error {
  filter: brightness(0) saturate(100%) invert(44%) sepia(83%) saturate(493%) hue-rotate(48deg) brightness(92%) contrast(93%);
}

/* ==========================================================================
   Макет А: шапка, боковая колонка, «Рецепт недели», сетки карточек.
   Стоит после старых разделов и перебивает их. Разметка прежняя.
   ========================================================================== */

/* ---------- Шапка: простые ссылки вместо рукописных надписей с иконками ---------- */

@media (min-width: 1051px) {
  #header .login_btn,
  #header .reg_btn,
  #header .acc_btn,
  #header .logout_btn,
  #header #menu_btn {
    height: 40px;
    padding: 0 6px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text);
    background-image: none;
  }

  /* у «Мой кабинет» фото пользователя задаётся в шаблоне, место под него оставляем */
  #header .acc_btn {
    padding-right: 42px;
    background-position: center right;
    background-repeat: no-repeat;
  }

  #header .login_btn:hover,
  #header .reg_btn:hover,
  #header .acc_btn:hover,
  #header .logout_btn:hover,
  #header #menu_btn:hover,
  #header .login_btn:focus-visible,
  #header .reg_btn:focus-visible,
  #header .acc_btn:focus-visible,
  #header .logout_btn:focus-visible,
  #header #menu_btn:focus-visible {
    color: var(--tomato);
  }

  /* «Меню» — кнопка с обводкой */
  #header #menu_btn {
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn);
  }

  /* Поиск — полем в шапке; расширенный поиск открывает значок в поле */
  #header #search_btn {
    display: none;
  }

  /* «Добавить рецепт» (виден после входа) — томатная кнопка */
  #header #add_new_recipe {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    background-color: var(--tomato);
    border-radius: var(--radius-btn);
  }

  #header #add_new_recipe:before {
    content: "+ ";
  }

  #header #add_new_recipe:hover,
  #header #add_new_recipe:focus-visible {
    background-color: var(--tomato-dark);
  }

  #header #main_navigation {
    align-items: center;
    gap: 12px;
  }
}

/* ---------- Боковая колонка: ссылки с разделителями ---------- */

#links1_block,
.links2-block {
  gap: 0;
}

#links1_block a,
.links2-block a {
  padding: 8px 0;
  font-size: 0.95rem;
  line-height: 1.3;
  border-bottom: 1px solid #F1EBDF;
  border-radius: 0;
}

#links1_block a:last-child,
.links2-block a:last-child {
  border-bottom: 0;
}

#links1_block a:hover,
.links2-block a:hover,
#links1_block a:focus-within,
.links2-block a:focus-within {
  color: var(--tomato);
  background-color: transparent;
}

.sidebar .block .title,
.page-main .block .title,
.page-main .block2 .title {
  padding: 0;
  margin-bottom: 10px;
  font-weight: 400;
}

/* ---------- Названия в карточках: тёмный жирный шрифт ---------- */

.zagpodf,
.textnadlo {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  transform: none;
}

.content_block1 a:hover .zagpodf,
.content_block2 a:hover .textnadlo,
.top-content a:hover .zagpodf,
a.block2.list:hover .zagpodf {
  color: var(--tomato);
}

/* ---------- «Рецепт недели»: фото слева, текст справа, одна карточка ---------- */

.top-content.block {
  padding: 0;
  overflow: hidden;
}

/* на планшете и телефоне блок не сжимается, иначе низ карточки обрезается */
@media (max-width: 1050px) {
  .top-content.block {
    flex: none;
  }
}

.top-content.block > a > .title {
  align-self: flex-start;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tomato-dark);
  background-color: #FBE9E1;
  border-radius: var(--radius-btn);
}

.top-content__list {
  gap: 0;
}

.top-content__list figure {
  border-radius: 0;
}

.top-content__list article {
  min-height: 0;
  padding: 28px 30px;
  gap: 14px;
  justify-content: flex-start;
}

.top-content__list article > .Main { order: 1; margin: 0; }
.top-content__list article > .Paragraphs { order: 2; }
.top-content__list article > .added_date { order: 3; }
.top-content__list article > span.avtor { order: 4; margin: auto 0 0; }

.top-content__list .zagpodf {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.15;
}

.top-content__list .Main hr,
.top-content__list .border_bottom {
  display: none;
}

.top-content__list .Paragraphs p {
  font-size: 1rem;
  line-height: 1.6;
  color: #4A443D;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

@supports (display: grid) and (display: contents) {
  /* Метка «Рецепт недели» встаёт в правую колонку над названием */
  .top-content.block > a {
    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-rows: auto 1fr;
  }

  .top-content.block > a > .top-content__list {
    display: contents;
  }

  .top-content.block > a > .title {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin: 28px 30px 0;
  }

  .top-content__list figure {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    min-height: 400px;
  }

  .top-content__list figure img {
    height: 100%;
  }

  .top-content__list article {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    padding-top: 14px;
  }
}

/* ---------- Новые, популярные, случайные, статьи: сетка по 3 карточки ---------- */

/* Узкая боковая колонка, как в макете */
@media (min-width: 1051px) {
  .sidebar {
    max-width: 270px;
  }
}

/* Блоки со списками карточек без своей рамки: заголовок и карточки прямо на фоне */
#new_content,
#popular_content,
#random_content,
#articles_content {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

@supports (display: grid) and (display: contents) {
  .block2 > .content_block {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
    --card-photo-h: 190px;
  }

  .block2 > .content_block > .content_block1,
  .block2 > .content_block > .content_block2 {
    display: contents;
  }

  .block2 > .content_block a {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    color: var(--text);
    background-color: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .block2 > .content_block a:hover,
  .block2 > .content_block a:focus-within {
    color: var(--text);
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
  }

  .block2 > .content_block a figure {
    width: 100%;
    border-radius: 0;
  }

  .block2 > .content_block a figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .block2 > .content_block a:hover figure img,
  .block2 > .content_block a:focus figure img {
    transform: scale(1.05);
  }

  .block2 > .content_block a > article {
    display: flex;
    width: auto;
    max-width: none;
    align-self: stretch;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 14px 16px 16px;
  }

  .block2 > .content_block .cat_name hr,
  .block2 > .content_block article > hr {
    display: none;
  }

  .block2 > .content_block .ellipsis {
    font-size: 0.9rem;
  }
}

@media (max-width: 1050px) {
  @supports (display: grid) and (display: contents) {
    .block2 > .content_block {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      --card-photo-h: 140px;
    }
  }

  .top-content__list figure img {
    height: 240px;
  }

  .top-content__list article {
    padding: 18px 20px;
  }

  @supports (display: grid) and (display: contents) {
    .top-content.block > a {
      display: flex;
      flex-direction: column;
    }

    .top-content.block > a > .title {
      order: 2;
      margin: 18px 20px 0;
    }

    .top-content__list figure { order: 1; min-height: 0; }
    .top-content__list article { order: 3; padding-top: 10px; }
  }
}

@media (max-width: 560px) {
  @supports (display: grid) and (display: contents) {
    .block2 > .content_block {
      grid-template-columns: minmax(0, 1fr);
      --card-photo-h: 200px;
    }
  }
}

/* ==========================================================================
   Страница статьи, новый макет (редизайн, шаг 5). Разметка прежняя:
   фото и колонка с датой и «Поделиться» внутри .page-hero.
   ========================================================================== */

.article-block1:not(.recipe-head) h1 {
  margin: 0 0 18px;
  padding: 0;
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--text);
}

.article-block1:not(.recipe-head) .page-hero {
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.article-block1:not(.recipe-head) .page-hero figure {
  width: 100%;
  min-width: 0;
  height: auto;
  border: var(--card-border);
}

/* Дата, просмотры, печать и кнопки соцсетей одной строкой под фото */

.page-hero > .content-actions-data > section:empty {
  display: none;
}

.page-hero > .content-actions-data .action-panel {
  flex-wrap: wrap;
  color: var(--muted);
}

.page-hero > .content-actions-data .share_panel1x {
  flex-direction: row;
  gap: 12px;
}

.page-hero > .content-actions-data .share_panel1x > span {
  margin: 0;
  border: 0;
  font-weight: 700;
}

.page-hero > .content-actions-data .share-buttons img {
  width: 32px;
  height: 32px;
}

/* Текст статьи: крупнее и не шире удобной для чтения строки */
.article-block3 .content-steps {
  display: block;
  max-width: 100%;
  font-size: 1.075rem;
  line-height: 1.7;
}

.article-block3 .content-steps p {
  display: block;
  margin: 0 0 14px;
  line-height: 1.7;
}

.article-block3 .content-steps > h2,
.article-block3 .content-steps h5 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: var(--green);
}

@media (max-width: 1050px) {
  .article-block1:not(.recipe-head) h1 {
    font-size: 2rem;
  }

  .article-block1:not(.recipe-head) .page-hero figure img {
    height: 260px;
  }
}

/* ==========================================================================
   Страница рецепта, новый макет (редизайн, шаг 3–4).
   Стоит после старых разделов и перебивает их.
   ========================================================================== */

.article-block1.recipe-head .main_content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.article-block1.recipe-head h1 {
  margin: 0;
  padding: 0;
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--text);
}

/* Автор, дата, счётчики, «Проверено нами» в одну строку */
.recipe-byline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.recipe-byline .poster-box {
  display: flex;
  align-items: center;
}

.recipe-meta.action-panel {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 0.9rem;
  color: var(--muted);
}

.recipe-meta .comments a {
  color: inherit;
}

.recipe-meta .comments a:hover,
.recipe-meta .comments a:focus-visible {
  color: var(--tomato);
}

.recipe-checked:empty {
  display: none;
}

.recipe-checked .CheckedByUs {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px 5px 34px;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--green-dark);
  background-color: #EEF4E8;
  border-radius: var(--radius-btn);
  transform: none;
}

.recipe-checked .CheckedByUs:before {
  left: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}

/* Фото на всю ширину колонки, значок «увеличить» в углу */
.recipe-photo.page-hero {
  display: block;
  margin: 0;
}

.recipe-photo.page-hero figure {
  width: 100%;
  min-width: 0;
  height: auto;
}

.recipe-photo.page-hero figure img {
  display: block;
  width: 100%;
}

.recipe-photo__link {
  display: block;
  position: relative;
}

.recipe-photo__zoom {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: var(--card-shadow);
}

.recipe-photo__link:hover .recipe-photo__zoom,
.recipe-photo__link:focus-visible .recipe-photo__zoom {
  color: var(--tomato);
}

/* плитки прилегают к фото снизу: вместе это одна карточка */

.recipe-facts .main_data {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.recipe-facts .main_data h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.recipe-facts .main_data ul {
  flex-wrap: wrap;
  padding: 0;
}

/* Ряд действий: лайк, режим готовки, печать, поделиться, ошибка */

.recipe-actions .like-panel {
  gap: 10px;
}

.recipe-cook-btn {
  font: inherit;
  transition: background-color 0.2s ease;
}

.recipe-cook-btn:hover,
.recipe-cook-btn:focus-visible {
  background-color: var(--green-dark);
}

.recipe-actions .print,
.recipe-actions__share,
.recipe-actions .simple-error-link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.recipe-actions .print:before {
  top: 50%;
  margin-top: -0.5rem;
  background-repeat: no-repeat;
}

.recipe-actions .print:hover,
.recipe-actions__share:hover,
.recipe-actions__share:focus-visible,
.recipe-actions .simple-error-link:hover,
.recipe-actions .simple-error-link:focus-visible {
  border-color: var(--green);
  color: var(--green-dark);
}

.recipe-admin:empty {
  display: none;
}

/* «О блюде» */
.recipe-head .pre_main_data {
  flex-direction: column;
}

.recipe-head .pre_main_data__text {
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Ингредиенты слева (прилипают при прокрутке), шаги справа */
.recipe-body {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 28px;
}

.recipe-body .article-block2,
.recipe-body .article-block3 {
  margin: 0;
}

.recipe-body .article-block2 h2,
.recipe-body .article-block3 h2 {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  font-size: 1.75rem;
  color: var(--tomato);
}

.recipe-body .article-block2 h2:before,
.recipe-body .article-block2 h2:after,
.recipe-body .article-block3 h2:before,
.recipe-body .article-block3 h2:after {
  content: none;
}

/* Список ингредиентов показан целиком, без прокрутки внутри карточки */
.recipe-ingredients {
  flex: 0 0 340px;
  padding: 20px 22px;
  background-color: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

.recipe-ingredients > section {
  flex-direction: column;
  gap: 12px;
}

.recipe-ingredients .list-of-ingredients {
  min-width: 0;
}

.recipe-ingredients ul,
.recipe-ingredients ol {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Поделиться дублируется ниже, в блоке «Поделитесь с друзьями» */
.recipe-ingredients .custom-window {
  display: none;
}

.recipe-steps {
  flex: 1 1 0;
  min-width: 0;
}

.recipe-steps .content-steps {
  display: block;
  font-size: 1.05rem;
  line-height: 1.65;
}

.recipe-steps .content-steps h3,
.recipe-steps .content-steps h5 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1.25;
  color: var(--green);
}

.recipe-steps .content-steps p {
  display: block;
  margin: 0 0 10px;
  line-height: 1.65;
}

.recipe-steps .content-steps figure {
  margin: 0 16px 12px 0;
}

/* Поделиться: карточка после шагов */
.recipe-share.share_panel1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 28px;
  padding: 16px 20px;
  background-color: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

.recipe-share.share_panel1 span {
  margin: 0;
  border: 0;
  font-weight: 800;
}

@media (max-width: 1050px) {
  .article-block1.recipe-head h1 {
    font-size: 2rem;
  }

  .recipe-photo.page-hero figure img {
    height: 260px;
  }

  .recipe-facts .main_data ul {
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
  }

  .recipe-facts .main_data li {
    justify-content: flex-start;
    min-width: 0;
  }

  /* На телефоне ингредиенты и шаги идут друг за другом, без вкладок */
  .recipe-body {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .recipe-ingredients {
    flex: none;
  }

  /* Время, порции, сложность, метод, тип: ровная сетка по три в ряд */
  .recipe-facts .main_data {
    overflow: hidden;
  }

  .recipe-facts .main_data li span {
    overflow-wrap: break-word;
  }

  /* Кнопки: «Режим готовки» во всю ширину, остальные по две в ряд */
  .recipe-actions {
    grid-template-columns: 1fr 1fr;
  }

  .recipe-actions .like-panel {
    flex-wrap: wrap;
  }

  .recipe-actions .like-panel button,
  .recipe-cook-btn,
  .recipe-actions .print,
  .recipe-actions__share,
  .recipe-actions .simple-error-link {
    justify-content: center;
  }

  .recipe-actions .print:before {
    left: 12px;
  }

  .recipe-admin {
    grid-column: 1 / -1;
  }
}

/* ----------------------------------------------------------------------
   Инструменты рецепта (/js/recipe-tools.js): галочки, порции, режим готовки
   ---------------------------------------------------------------------- */

.rt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.rt-hint {
  font-size: 0.875rem;
  color: var(--muted);
}

.rt-portions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background-color: var(--warm);
  border-radius: var(--radius-btn);
}

.rt-portions button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background-color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}

.rt-portions button:hover,
.rt-portions button:focus-visible {
  color: var(--tomato);
}

.rt-portions button:disabled {
  color: var(--line-strong);
  cursor: default;
}

.rt-portions output {
  min-width: 78px;
  font-size: 0.875rem;
  font-weight: 800;
  text-align: center;
}

.list-of-ingredients.rt-on li {
  list-style: none;
  padding: 0;
  border-bottom: 1px dashed var(--line);
}

.list-of-ingredients.rt-on li:last-child {
  border-bottom: 0;
}

.list-of-ingredients.rt-on ol,
.list-of-ingredients.rt-on ul {
  margin: 0;
  padding: 0;
}

.list-of-ingredients.rt-on li:before,
.list-of-ingredients.rt-on li::after {
  display: none;
}

.rt-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  line-height: 1.4;
  cursor: pointer;
}

.rt-item input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}

.rt-item.is-done .rt-text,
.rt-item.is-done .rt-qty {
  color: var(--muted);
  text-decoration: line-through;
}

.rt-text {
  flex: 1 1 auto;
}

/* Количество справа, серым */
.rt-qty {
  flex: 0 1 45%;
  margin-left: auto;
  text-align: right;
  color: var(--muted);
}

/* Шаги карточками с номером в кружке */
.content-steps.rt-steps-on {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rt-step {
  overflow: hidden;
  background-color: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

/* Фото шага во всю ширину карточки, номер в левом верхнем углу */
.rt-step__media {
  position: relative;
}

.recipe-steps .rt-step__media figure,
.recipe-steps .rt-step__media figure.small {
  float: none;
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.recipe-steps .rt-step__media img {
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

.rt-step__num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  background-color: var(--green);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.rt-step__body {
  padding: 18px 22px;
}

/* Шаг без фото: подзаголовок «Шаг N» над текстом */
.rt-step__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
}

.recipe-steps .rt-step__body h3,
.recipe-steps .rt-step__body h5 {
  margin: 0 0 8px;
  padding: 0;
}

.recipe-steps .rt-step__body section,
.recipe-steps .rt-step__body section.small_new {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.recipe-steps .rt-step__body p {
  display: block;
}

.recipe-steps .rt-step__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .rt-step__body {
    padding: 14px 16px;
  }

  .rt-step__num {
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
}

/* Хлебные крошки как в макете: мелкий обычный шрифт, серые */
.place-show .aput {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
}

.place-show .aput a {
  font-weight: 500;
}

/* Кнопки под фото в один ряд на обычном экране */
@media (min-width: 1051px) {

  .recipe-actions .print:before {
    left: 14px;
  }
}

/* ----------------------------------------------------------------------
   Рецепт: фото слева, данные справа, кнопки панелью со значками
   (по образцу, присланному 26.10.2026)
   ---------------------------------------------------------------------- */

@media (min-width: 701px) {
  .article-block1.recipe-head .main_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
  }

  .article-block1.recipe-head .main_content > * {
    grid-column: 1 / -1;
  }

  .article-block1.recipe-head .main_content > .recipe-photo {
    grid-column: 1;
  }

  .article-block1.recipe-head .main_content > .recipe-facts {
    grid-column: 2;
  }

  .recipe-head .recipe-photo.page-hero figure,
  .recipe-head .recipe-photo.page-hero figure a,
  .recipe-head .recipe-photo.page-hero figure img {
    height: 100%;
  }

  .recipe-head .recipe-photo.page-hero figure img {
    min-height: 280px;
    max-height: 360px;
  }
}

.recipe-head .recipe-photo.page-hero figure {
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

/* Данные рецепта списком: значок, название, значение */
.recipe-head .recipe-facts {
  margin-top: 0;
}

.recipe-head .recipe-facts .main_data {
  height: 100%;
  padding: 6px 20px;
  border: var(--card-border);
  border-radius: var(--radius-md);
}

.recipe-head .recipe-facts .main_data ul {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.recipe-head .recipe-facts .main_data li {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--warm);
  text-align: left;
}

.recipe-head .recipe-facts .main_data li:last-child {
  border-bottom: 0;
}

.recipe-head .recipe-facts .main_data img {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.recipe-head .recipe-facts .main_data li div {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}

.recipe-head .recipe-facts .main_data li div strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.recipe-head .recipe-facts .main_data li div span {
  font-weight: 800;
  text-align: right;
}

/* Кнопки: одна панель, у каждой значок в кружке и подпись */
.recipe-head .recipe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: 12px 6px;
  background-color: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

.recipe-head .recipe-actions > .like-panel,
.recipe-head .recipe-actions > .recipe-cook-btn,
.recipe-head .recipe-actions > .print,
.recipe-head .recipe-actions > .recipe-actions__share,
.recipe-head .recipe-actions > .simple-error-link {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.recipe-head .recipe-actions > .like-panel {
  border-left: 0;
}

.recipe-head .recipe-actions .like-panel button,
.recipe-head .recipe-actions .recipe-cook-btn,
.recipe-head .recipe-actions .print a,
.recipe-head .recipe-actions__share,
.recipe-head .recipe-actions .simple-error-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: auto;
  padding: 2px 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transform: none;
}

.recipe-head .recipe-actions .like-panel button:before,
.recipe-head .recipe-actions .recipe-cook-btn:before,
.recipe-head .recipe-actions .print a:before,
.recipe-head .recipe-actions__share:before,
.recipe-head .recipe-actions .simple-error-link:before {
  content: "";
  position: static;
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.recipe-head .recipe-actions .like-panel button {
  color: var(--tomato);
}

.recipe-head .recipe-actions .like-panel button:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9.2-9.3A4.8 4.8 0 0 1 12 7.3a4.8 4.8 0 0 1 9.2 3.4C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
  background-color: var(--tomato);
}

.recipe-head .recipe-actions .recipe-cook-btn {
  color: var(--green);
}

.recipe-head .recipe-actions .recipe-cook-btn svg {
  display: none;
}

.recipe-head .recipe-actions .recipe-cook-btn:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5l9 5.5-9 5.5z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-color: var(--green);
}

.recipe-head .recipe-actions .print:before {
  display: none;
}

.recipe-head .recipe-actions .print a {
  color: var(--text);
}

.recipe-head .recipe-actions .print a:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2E22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5'/%3E%3Cpath d='M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 14h10v6H7z'/%3E%3C/svg%3E");
  background-color: var(--warm);
}

.recipe-head .recipe-actions__share {
  color: var(--green);
}

.recipe-head .recipe-actions__share:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6F1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.3 10.8l7.4-4.3M8.3 13.2l7.4 4.3'/%3E%3C/svg%3E");
  background-color: #EEF4E8;
}

.recipe-head .recipe-actions .simple-error-link {
  color: var(--tomato);
}

.recipe-head .recipe-actions .simple-error-link .error {
  display: none;
}

.recipe-head .recipe-actions .simple-error-link:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8420E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v3.5M11 14h.01'/%3E%3C/svg%3E");
  background-color: #FBE7DF;
}

.recipe-head .recipe-actions .like-panel button:hover,
.recipe-head .recipe-actions .recipe-cook-btn:hover,
.recipe-head .recipe-actions .print a:hover,
.recipe-head .recipe-actions__share:hover,
.recipe-head .recipe-actions .simple-error-link:hover,
.recipe-head .recipe-actions .like-panel button:focus-visible,
.recipe-head .recipe-actions .recipe-cook-btn:focus-visible,
.recipe-head .recipe-actions .print a:focus-visible,
.recipe-head .recipe-actions__share:focus-visible,
.recipe-head .recipe-actions .simple-error-link:focus-visible {
  text-decoration: underline;
  background: none;
}

.recipe-head .recipe-actions .like-panel button:disabled {
  opacity: 0.7;
}

/* разделители между кнопками; порядок как в разметке */
.recipe-head .recipe-actions > .like-panel ~ * {
  border-left: 1px solid var(--warm);
}

.recipe-head .recipe-actions > .recipe-actions__share {
  padding-top: 2px;
}

.recipe-head .recipe-actions > .recipe-cook-btn {
  order: 0;
  grid-column: auto;
}

.recipe-head .recipe-actions > .recipe-admin {
  flex: 0 0 100%;
  padding: 10px 10px 0;
}

@media (max-width: 560px) {
  .recipe-head .recipe-actions {
    padding: 10px 2px;
  }

  .recipe-head .recipe-actions .like-panel button,
  .recipe-head .recipe-actions .recipe-cook-btn,
  .recipe-head .recipe-actions .print a,
  .recipe-head .recipe-actions__share,
  .recipe-head .recipe-actions .simple-error-link {
    font-size: 0.72rem;
  }

  .recipe-head .recipe-actions .like-panel button:before,
  .recipe-head .recipe-actions .recipe-cook-btn:before,
  .recipe-head .recipe-actions .print a:before,
  .recipe-head .recipe-actions__share:before,
  .recipe-head .recipe-actions .simple-error-link:before {
    width: 36px;
    height: 36px;
  }
}

/* ----------------------------------------------------------------------
   Рецепт: оставшиеся отличия от макета (26.10.2026)
   ---------------------------------------------------------------------- */

/* Имя автора под заголовком — тёмным обычным шрифтом */
.recipe-byline .author-chip .avtor {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.recipe-byline .author-link:hover .avtor,
.recipe-byline .author-link:focus-visible .avtor {
  color: var(--tomato);
}

/* «О блюде» — простой абзац под кнопками, без рамки */
.recipe-head .pre_main_data {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.recipe-head .pre_main_data .title_section {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.recipe-head .pre_main_data__text {
  color: var(--text);
}

/* «Поделитесь с друзьями» — цветные кнопки с названиями */
.recipe-share .share-buttons {
  flex-wrap: wrap;
  gap: 8px;
}

.recipe-share .share-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 10px;
  border-radius: var(--radius-btn);
  color: #ffffff;
  text-decoration: none;
  background-color: #1466D8;
  transition: filter 0.15s ease;
}

/* цвета соцсетей чуть темнее фирменных, чтобы белый текст читался (WCAG AA) */
.recipe-share .share-buttons a[href*="ok.ru"] { background-color: #B35300; }
.recipe-share .share-buttons a[href*="t.me"] { background-color: #1A73A8; }
.recipe-share .share-buttons a[href*="whatsapp"] { background-color: #12803D; }

.recipe-share .share-buttons a:hover,
.recipe-share .share-buttons a:focus-visible {
  filter: brightness(0.9);
}

.recipe-share .share-buttons img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

#share_panel.recipe-share .share-buttons .share-name {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  transform: none;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
}

/* «Ещё рецепты» / «Ещё статьи» — три компактные карточки в ряд */
#popular_content > .recipe-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

#popular_content > .recipe-list .list {
  width: auto;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background-color: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

#popular_content > .recipe-list .list figure {
  margin: 0;
  border-radius: 0;
}

#popular_content > .recipe-list .list figure img {
  height: 170px;
  border-radius: 0;
}

#popular_content > .recipe-list .list article,
#popular_content > .recipe-list .list > .Main {
  gap: 0;
  padding: 12px 14px 14px;
}

#popular_content > .recipe-list .list > .Main {
  justify-content: flex-start;
  text-align: left;
}

#popular_content > .recipe-list .list .cat_name hr,
#popular_content > .recipe-list .list .ellipsis,
#popular_content > .recipe-list .list .Data,
#popular_content > .recipe-list .list .stats-badge {
  display: none;
}

#popular_content > .recipe-list .list .cat_name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

#popular_content > .recipe-list .list .zagpodf {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  transform: none;
}

@media (max-width: 820px) {
  #popular_content > .recipe-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  #popular_content > .recipe-list {
    gap: 12px;
  }

  #popular_content > .recipe-list .list figure img {
    height: 130px;
  }
}

/* Левое меню: 8 рубрик, остальные по кнопке «Все рубрики» (_left1.ascx) */
#links1_block.links-collapsed a.links-more {
  display: none;
}

.links-toggle {
  margin-top: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--green);
  text-align: left;
  cursor: pointer;
}

.links-toggle:hover,
.links-toggle:focus-visible {
  color: var(--tomato);
}

/* ----------------------------------------------------------------------
   Карточки в блоках главной (новые, популярные, случайные, «Полезно знать»):
   первая карточка блока и остальные сделаны разной разметкой. Приводим их
   к одному виду, как первая: фото со счётчиками, рубрика, название,
   описание, автор.
   ---------------------------------------------------------------------- */

@supports (display: grid) and (display: contents) {

  .block2 > .content_block a {
    position: relative;
  }

  .block2 > .content_block a > article,
  .block2 > .content_block a > article .cat_name,
  .block2 > .content_block a > article .Data,
  .block2 > .content_block a > article .Main {
    position: static;
  }

  .block2 > .content_block a figure {
    height: var(--card-photo-h);
  }

  /* порядок внутри карточки одинаковый */
  .block2 > .content_block a > article .cat_name { order: 1;
    position: static;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--muted); }
  .block2 > .content_block a > article h3,
  .block2 > .content_block a > article > .zagpodf,
  .block2 > .content_block a > article > .textnadlo { order: 2; }
  .block2 > .content_block a > article .ellipsis { order: 3;
    -webkit-line-clamp: 3; }
  .block2 > .content_block a > article .Data { order: 4;
    flex-direction: row;
    align-items: center;
    overflow: visible; }

  /* у первой карточки название внутри рубрики — обычным шрифтом названия */
  .block2 > .content_block a > article .cat_name h3,
  .block2 > .content_block a > article .cat_name .zagpodf {
    display: block;
    margin: 6px 0 0;
  }

  .block2 > .content_block a > article h3,
  .block2 > .content_block a > article .zagpodf,
  .block2 > .content_block a > article .textnadlo {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    transform: none;
  }

  /* описание: у всех карточек по 3 строки; пустое не занимает места */

  .block2 > .content_block a > article .ellipsis:empty {
    display: none;
  }

  /* счётчики остальных карточек — плашкой на фото, как у первой */
  .block2 > .content_block a > article .stats,
  .block2 > .content_block a > article .Data > .stats {
    position: absolute;
    top: calc(var(--card-photo-h) - 40px);
    left: 10px;
    z-index: 3;
    display: flex;
    gap: 16px;
    width: auto;
    margin: 0;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-pill);
  }

  .block2 > .content_block a > article .stats * {
    font-size: inherit;
    font-weight: inherit;
  }

  /* «Полезно знать»: рубрика над названием у всех статей, черта не нужна */
  #articles_content > .content_block a > article {
    justify-content: flex-start;
  }

  #articles_content > .content_block a > article .Main {
    order: 2;
  }

  #articles_content > .content_block a > article .Data > hr {
    display: none;
  }

  .block2 > .content_block a > article .Data {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: auto;
    padding-top: 6px;
  }
}

/* ----------------------------------------------------------------------
   Блоки главной: большая карточка слева, маленькие справа одна под другой.
   Планшет (561–1050px): все четыре блока. Компьютер: только «Новые рецепты»,
   и у маленьких карточек счётчики не на фото, а справа в строке автора.
   ---------------------------------------------------------------------- */

@supports (display: grid) and (display: contents) {
  @media (min-width: 561px) and (max-width: 1050px) {
    .block2 > .content_block > .content_block1 > a > article {
      flex: none;
    }

    .block2 > .content_block {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .block2 > .content_block > .content_block1 > a {
      grid-row: span 2;
    }

    .block2 > .content_block > .content_block1 > a figure {
      position: relative;
      flex: 1 1 auto;
      height: auto;
      min-height: 180px;
    }

    .block2 > .content_block > .content_block1 > a figure img {
      position: absolute;
      top: 0;
      left: 0;
    }

    .block2 > .content_block > .content_block2 > a {
      --card-photo-h: 120px;
    }

    .block2 > .content_block > .content_block2 > a > article .ellipsis {
      display: none;
    }
  }

  @media (min-width: 1051px) {
    #new_content > .content_block > .content_block1 > a > article {
      flex: none;
    }

    #new_content > .content_block {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    #new_content > .content_block > .content_block1 > a {
      grid-row: span 2;
    }

    #new_content > .content_block > .content_block1 > a figure {
      position: relative;
      flex: 1 1 auto;
      height: auto;
      min-height: 220px;
    }

    #new_content > .content_block > .content_block1 > a figure img {
      position: absolute;
      top: 0;
      left: 0;
    }

    #new_content > .content_block > .content_block2 > a {
      --card-photo-h: 150px;
    }

    #new_content > .content_block > .content_block2 > a > article .ellipsis {
      display: none;
    }

    #new_content > .content_block > .content_block2 > a > article .Data {
      min-height: 34px;
      padding-right: 140px;
    }

    #new_content > .content_block > .content_block2 > a > article .stats {
      top: auto;
      right: 16px;
      bottom: 16px;
      left: auto;
      height: 34px;
      align-items: center;
      padding: 0;
      background: none;
    }
  }
}

/* ----------------------------------------------------------------------
   Списки рецептов (подрубрика, поиск и т.п.): карточки как на главной —
   фото во всю ширину, счётчики на фото, рубрика, название, описание, автор.
   «Ещё рецепты» на странице рецепта оформлены отдельно (#popular_content).
   ---------------------------------------------------------------------- */

.recipe-list > a.block2.list {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.recipe-list > a.block2.list figure {
  margin: 0;
  border-radius: 0;
}

.recipe-list > a.block2.list figure img {
  height: 220px;
  border-radius: 0;
}

.recipe-list > a.block2.list > .cat_name {
  padding: 14px 18px 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
}

.recipe-list > a.block2.list > .cat_name hr {
  display: none;
}

.recipe-list > a.block2.list .zagpodf {
  display: block;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

.recipe-list > a.block2.list > .ellipsis {
  margin: 8px 18px 0;
  -webkit-line-clamp: 3;
}

.recipe-list > a.block2.list > .Data {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  padding: 12px 18px 16px;
}

@media (max-width: 560px) {
  .recipe-list > a.block2.list figure img {
    height: 200px;
  }
}

/* ----------------------------------------------------------------------
   Статья дня на главной («Кулинарный справочник» и т.п.): как «Рецепт
   недели» — крупное название, текст, внизу дата и просмотры в одну строку.
   ---------------------------------------------------------------------- */

.top-content__list article > .Data {
  order: 3;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin-top: auto;
}

.top-content__list .Main h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
}

/* ----------------------------------------------------------------------
   Поиск по всему сайту (js/site-search.js): подсказки под полем шапки
   из рецептов и «Полезно знать»; на странице результатов — блок
   совпадений из второго раздела.
   ---------------------------------------------------------------------- */

.header-search,
#search_section.hs-on {
  position: relative;
}

/* в окне поиска старые подсказки заменены общими */
#search_section.hs-on .autocomplete-items {
  display: none;
}

.hs-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 120;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px 0;
  background-color: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(43, 39, 35, 0.16);
}

.hs-suggest[hidden] {
  display: none;
}

.hs-group {
  padding: 10px 16px 4px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.hs-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
}

.hs-option:hover,
.hs-option.hs-active {
  background-color: var(--warm);
}

.hs-img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
}

.hs-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hs-name strong {
  font-weight: 800;
  color: var(--tomato);
}

.hs-meta {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--muted);
}

.hs-empty {
  padding: 10px 16px;
  color: var(--muted);
}

.hs-all {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.hs-more {
  font-weight: 700;
  color: var(--green);
}

.search-other {
  margin-bottom: 1rem;
  padding: 18px 20px;
}

.search-other__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--tomato);
}

.search-other__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-other__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.search-other__item:hover,
.search-other__item:focus-visible {
  border-color: var(--green);
}

.search-other__item img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.search-other__item strong {
  color: var(--tomato);
}

.search-other__more {
  display: inline-block;
  margin-top: 12px;
  font-weight: 800;
  color: var(--green);
}

/* ----------------------------------------------------------------------
   Страницы «Полезно знать»: кнопки «Поделиться» как у рецепта,
   карточки статей в списках как карточки рецептов.
   ---------------------------------------------------------------------- */

.page-hero > .content-actions-data .share_panel1x.recipe-share {
  flex-wrap: wrap;
  align-items: center;
}

#share_panel.recipe-share .share-buttons a[href*="/print/"] .share-name {
  color: var(--text);
}

.recipe-list > a.block2.list > .Main {
  justify-content: flex-start;
  width: auto;
  padding: 14px 18px 0;
  text-align: left;
}

/* Статья и её страница печати: блок «фото + текст» (section.small_new из редактора) — фото слева,
   текст справа ровной колонкой, без обтекания; на телефоне фото над текстом */
.article-block3:not(.recipe-steps) .content-steps > h2,
.article-block3:not(.recipe-steps) .content-steps h5,
.PrintPage_article .content-steps > h2,
.PrintPage_article .content-steps h5 {
  clear: both;
}

.article-block3:not(.recipe-steps) .content-steps section.small_new,
.PrintPage_article .content-steps section.small_new {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  clear: both;
  margin: 0 0 14px;
}

.article-block3:not(.recipe-steps) .content-steps section.small_new > figure.small,
.PrintPage_article .content-steps section.small_new > figure.small {
  display: block;
  float: none;
  flex: 0 0 42%;
  width: 42%;
  margin: 0;
}

.article-block3:not(.recipe-steps) .content-steps section.small_new > section,
.PrintPage_article .content-steps section.small_new > section {
  flex: 1;
  min-width: 0;
}

.article-block3:not(.recipe-steps) .content-steps section.small_new > section > p:last-child,
.PrintPage_article .content-steps section.small_new > section > p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .article-block3:not(.recipe-steps) .content-steps section.small_new,
  .PrintPage_article .content-steps section.small_new {
    flex-direction: column;
    gap: 12px;
  }

  .article-block3:not(.recipe-steps) .content-steps section.small_new > figure.small,
  .PrintPage_article .content-steps section.small_new > figure.small {
    flex: none;
    width: 100%;
  }
}

/* Рецепты автора (/recipeautor): та же карточка, но текст внутри <article> */
.recipe-list > a.block2.list > article {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 14px 18px 16px;
}

.recipe-list > a.block2.list > article > .cat_name {
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
}

.recipe-list > a.block2.list > article .cat_name hr {
  display: none;
}

.recipe-list > a.block2.list > article > .ellipsis {
  margin: 8px 0 0;
  -webkit-line-clamp: 3;
}

.recipe-list > a.block2.list > article > .Data {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  margin-top: auto;
  padding: 12px 0 0;
}

/* ----------------------------------------------------------------------
   Статья: шапка как у Альберта на образце — фото слева, справа столбиком
   дата, просмотры, «Распечатать», под ними круглые значки соцсетей.
   ---------------------------------------------------------------------- */

@media (min-width: 701px) {
  .article-block1:not(.recipe-head) .page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .article-block1:not(.recipe-head) .page-hero figure img {
    height: 300px;
  }
}

.page-hero > .content-actions-data {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
}

.page-hero > .content-actions-data .action-panel {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
}

.page-hero > .content-actions-data .action-panel > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-left: 30px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--green);
}

.page-hero > .content-actions-data .action-panel > span:before {
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background-repeat: no-repeat;
}

.page-hero > .content-actions-data .action-panel .print a {
  color: var(--green);
}

/* «Поделитесь с друзьями»: заголовок только для экранных читалок */
.page-hero > .content-actions-data .share_panel1x.recipe-share > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page-hero .recipe-share .share-buttons {
  gap: 10px;
}

.page-hero .recipe-share .share-buttons a {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

.page-hero .recipe-share .share-buttons a[href*="/print/"] {
  color: #ffffff;
  background-color: #6A3FC9;
  border: 0;
}

.page-hero > .content-actions-data .recipe-share .share-buttons img {
  width: 24px;
  height: 24px;
}

/* значок печати сам фиолетовый квадрат с принтером — во весь круг */
.page-hero > .content-actions-data .recipe-share .share-buttons a[href*="/print/"] img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* название соцсети остаётся для экранных читалок */
#share_panel.recipe-share.share_panel1x .share-buttons .share-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .page-hero > .content-actions-data .action-panel {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
}

/* Текст из админки с ярко-оранжевым цветом (#ff6600, #fc6c3f) слишком бледный на светлом фоне
   (контраст 2.7–2.9 при норме 4.5). В тексте страниц заменяем его на фирменный томатный. */
.page-main [style*="#ff6600"],
.page-main [style*="#FF6600"],
.page-main [style*="#fc6c3f"],
.page-main [style*="#FC6C3F"] {
  color: var(--tomato) !important;
}

.rt-note {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

.rt-copy {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  font: inherit;
  font-weight: 800;
  color: var(--green);
  background-color: #ffffff;
  border: 2px solid var(--green);
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.rt-copy:hover,
.rt-copy:focus-visible {
  color: #ffffff;
  background-color: var(--green);
}

/* Режим готовки: шаги по одному, крупно, на весь экран.
   Кнопки «Назад»/«Дальше» всегда внизу. Телефон: ингредиенты открываются
   снизу по кнопке; планшет: ингредиенты слева; от 1000px ещё список шагов. */
.rt-cook {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
}

.rt-cook[hidden] {
  display: none;
}

.rt-cook__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 12px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--line);
}

.rt-cook__head {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rt-cook__mode,
.rt-cook__caption {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}

.rt-cook__title {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rt-cook__close,
.rt-cook__ingbtn,
.rt-cook__ingclose {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text);
  background-color: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
}

.rt-cook__ingbtn {
  color: var(--green);
}

.rt-cook__ingbtn b {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  color: #ffffff;
  background-color: var(--green);
  border: 2px solid #ffffff;
  border-radius: 999px;
}

.rt-cook__progress {
  display: flex;
  flex: none;
  gap: 5px;
  padding: 10px 16px 0;
}

.rt-cook__progress i {
  flex: 1;
  height: 5px;
  background-color: var(--line);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.rt-cook__progress i.is-done {
  background-color: var(--green);
}

.rt-cook__progress i.is-current {
  background-color: var(--tomato);
}

.rt-cook__main {
  display: flex;
  flex: 1 1 auto;
  gap: 18px;
  min-height: 0;
}

.rt-cook__body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 20px;
}

.rt-cook__count {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--green);
  background-color: var(--warm);
  border-radius: 999px;
}

.rt-cook__step h3,
.rt-cook__step h5 {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--tomato);
}

.rt-cook__step p {
  display: block;
  margin: 0 0 14px;
  font-size: 1.2rem;
  line-height: 1.6;
}

.rt-cook__step figure {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
}

/* подпись к фото уже стоит заголовком шага */
.rt-cook__step--cap figcaption {
  display: none;
}

.rt-cook__step img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32vh;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* «Дальше: …» над кнопками (только телефон) */
.rt-cook__upnext {
  flex: none;
  overflow: hidden;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top: 1px dashed var(--line);
}

.rt-cook__upnext:empty {
  display: none;
}

.rt-cook__upnext b {
  color: var(--text);
}

.rt-cook__nav {
  flex: none;
  /* слева место под кнопку плагина доступности */
  padding: 12px 12px 16px 68px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background-color: #ffffff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px rgba(60, 40, 20, 0.06);
}

.rt-cook__navin {
  display: flex;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.rt-cook__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 14px;
  cursor: pointer;
}

.rt-cook__prev {
  flex: none;
  width: 64px;
  color: var(--text);
  background-color: #ffffff;
  border: 1.5px solid var(--line-strong);
}

/* на телефоне «Назад» — только стрелка */
.rt-cook__prev span {
  display: none;
}

.rt-cook__next {
  flex: 1 1 auto;
  color: #ffffff;
  background-color: var(--green);
  border: 0;
}

.rt-cook__next.is-last {
  background-color: var(--tomato);
}

.rt-cook__prev:disabled {
  color: var(--line-strong);
  border-color: var(--line);
  cursor: default;
}

/* Боковая колонка: список шагов и ингредиенты */
.rt-cook__side {
  display: none;
}

.rt-cook__steps,
.rt-cook__ing {
  background-color: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.rt-cook__steps {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
}

.rt-cook__caption {
  padding: 6px 12px 4px;
}

.rt-cook__goto {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.rt-cook__num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  background-color: var(--warm);
  border-radius: 50%;
}

.rt-cook__goto.is-done .rt-cook__num {
  color: #ffffff;
  background-color: var(--green);
}

.rt-cook__goto.is-current {
  color: var(--text);
  background-color: #FFF1EA;
}

.rt-cook__goto.is-current .rt-cook__num {
  color: #ffffff;
  background-color: var(--tomato);
}

.rt-cook__ing {
  padding: 14px 18px;
}

.rt-cook__inghead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.rt-cook__inghl {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--tomato);
}

.rt-cook__portions {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  background-color: var(--warm);
  border-radius: 999px;
}

.rt-cook__portions:empty {
  display: none;
}

.rt-cook__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt-cook__list li {
  border-bottom: 1px solid var(--line);
}

.rt-cook__list .rt-item {
  font-size: 0.95rem;
}

.rt-cook__list li:last-child {
  border-bottom: 0;
}

.rt-cook__ingclose {
  display: none;
}

.rt-cook__shade {
  display: none;
}

/* Телефон: ингредиенты выезжают снизу поверх шага */
@media (max-width: 760px) {
  .rt-cook.is-ing .rt-cook__shade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    background-color: rgba(30, 22, 14, 0.45);
  }

  .rt-cook.is-ing .rt-cook__side {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    overflow-y: auto;
    max-height: 85%;
    background-color: #ffffff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
  }

  /* снизу место, чтобы кнопка плагина доступности не закрывала последний пункт */
  .rt-cook.is-ing .rt-cook__ing {
    padding: 16px 18px 72px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    border: 0;
  }

  .rt-cook.is-ing .rt-cook__ingclose {
    display: flex;
  }
}

/* Планшет и компьютер: колонка слева, кнопки «Назад» с текстом */
@media (min-width: 761px) {
  .rt-cook__bar {
    padding: 8px 20px;
  }

  .rt-cook__title {
    font-size: 1.25rem;
  }

  .rt-cook__ingbtn,
  .rt-cook__upnext {
    display: none;
  }

  .rt-cook__progress {
    padding: 12px 20px 0;
  }

  .rt-cook__main {
    padding: 16px 20px;
  }

  .rt-cook__side {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    width: 300px;
  }

  .rt-cook__body {
    padding: 24px 28px;
    background-color: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .rt-cook__count {
    margin-bottom: 14px;
  }

  .rt-cook__step h3,
  .rt-cook__step h5 {
    font-size: 2.1rem;
  }

  .rt-cook__step p {
    font-size: 1.35rem;
  }

  .rt-cook__step img {
    max-height: 40vh;
  }

  .rt-cook__nav {
    padding-right: 68px;
  }

  .rt-cook__prev {
    width: 150px;
  }

  .rt-cook__prev span {
    display: inline;
  }
}

@media (min-width: 1000px) {
  .rt-cook__steps {
    display: flex;
  }

  .rt-cook__side {
    width: 320px;
  }

  .rt-cook__step--pic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }

  .rt-cook__step--pic > * {
    grid-column: 2;
  }

  .rt-cook__step--pic > .rt-cook__pic {
    grid-column: 1;
    grid-row: 1 / span 99;
    margin: 0;
  }

  .rt-cook__step--pic img {
    max-height: 70vh;
    object-fit: contain;
  }

  .rt-cook__main {
    padding: 16px 24px;
  }

  .rt-cook__progress {
    padding: 12px 24px 0;
  }
}

html.rt-cook-open,
html.rt-cook-open body {
  overflow: hidden;
}

@media print {
  .recipe-actions,
  .rt-head,
  .rt-copy,
  .rt-cook {
    display: none;
  }
}

/* ----------------------------------------------------------------------
   «Категории рецептов» и «Полезно знать» (recipemaincat, articlemaincat):
   рубрики плитками — фото на всю карточку, внизу название и число
   ---------------------------------------------------------------------- */

.cats-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.cats-stats span {
  padding: 6px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  background-color: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-pill);
}

.cats-stats b {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tomato);
}

@supports (display: grid) {
  .cats--tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.cats--tiles > a.cat {
  position: relative;
  display: block;
  width: auto;
  min-height: 160px;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #2B2723;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cats--tiles > a.cat:hover,
.cats--tiles > a.cat:focus-visible {
  color: #fff;
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.cats--tiles > a.cat::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 14, 8, 0.82) 0%, rgba(20, 14, 8, 0.35) 45%, rgba(20, 14, 8, 0) 70%);
  pointer-events: none;
}

.cats--tiles > a.cat figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.cats--tiles > a.cat figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cats--tiles > a.cat:hover figure img {
  transform: scale(1.06);
}

.cats--tiles > a.cat h2 {
  position: absolute;
  right: 16px;
  bottom: 54px;
  left: 16px;
  z-index: 2;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  background: none;
  border: 0;
  box-shadow: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.cats--tiles > a.cat h2::before {
  content: none;
}

.cats--tiles > a.cat b {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 4px 10px 4px 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
  background-color: #fff;
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cats--tiles > a.cat b::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("/pics/main/icon.png") center / contain no-repeat;
}

.cats--tiles > a.cat:hover b {
  color: #fff;
  background-color: var(--tomato);
}

@media (max-width: 1050px) {
  .cats--tiles {
    gap: 14px;
  }

  .cats--tiles > a.cat {
    aspect-ratio: 1 / 1;
  }

  .cats--tiles > a.cat h2 {
    right: 12px;
    bottom: 46px;
    left: 12px;
    font-size: 1.35rem;
  }

  .cats--tiles > a.cat b {
    bottom: 12px;
    left: 12px;
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  @supports (display: grid) {
    .cats--tiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
  }

  .cats--tiles > a.cat h2 {
    right: 10px;
    bottom: 42px;
    left: 10px;
    font-size: 1.2rem;
  }

  .cats--tiles > a.cat b {
    bottom: 10px;
    left: 10px;
    padding: 3px 8px 3px 6px;
  }
}

/* ----------------------------------------------------------------------
   Страница рубрики (recipecat, articlecat): карточки подрубрик.
   Название красным сразу над списком, пункты с точкой и тонкой линией,
   внизу кнопка с числом рецептов (статей) и стрелкой
   ---------------------------------------------------------------------- */

@supports (display: grid) {
  .cats--subs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  .cats--subs > .cat {
    width: auto;
    margin: 0;
  }
}

.cats--subs > .cat {
  gap: 12px;
  padding: 18px 20px 20px;
}

.cats--subs > .cat > a {
  justify-content: flex-start;
}

.cats--subs > .cat h2 {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tomato);
}

.cats--subs > .cat h2::before {
  content: none;
}

.cats--subs > .cat > a:hover h2,
.cats--subs > .cat > a:focus-visible h2 {
  color: var(--tomato-dark);
}

.cats--subs .cat nav {
  flex: 1 1 auto;
  gap: 16px;
  height: auto;
}

.cats--subs .cat ul {
  gap: 0;
  margin: 0;
  padding: 0;
}

.cats--subs .cat li {
  flex: none;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.cats--subs .cat li:first-child {
  padding-top: 2px;
  border-top: 0;
}

.cats--subs .cat li a {
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}

.cats--subs .cat li a:before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: var(--tomato);
  border-radius: 50%;
  transform: translateY(-2px);
}

.cats--subs .cat nav > span {
  margin-top: auto;
}

.cats--subs .cat a.more2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 800;
  color: var(--green);
  border-color: var(--green);
}

.cats--subs .cat a.more2::after {
  content: "→";
}

.cats--subs .cat a.more2:hover,
.cats--subs .cat a.more2:focus-visible {
  color: #ffffff;
  background-color: var(--green);
}

@media (max-width: 1050px) {
  @supports (display: grid) {
    .cats--subs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
  }
}

@media (max-width: 560px) {
  @supports (display: grid) {
    .cats--subs {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }
  }
}

/* ----------------------------------------------------------------------
   Доступность
   ---------------------------------------------------------------------- */

/* «Перейти к содержимому»: первая ссылка страницы, видна только при фокусе с клавиатуры */
.skip-link {
  position: absolute;
  top: -200px;
  left: 12px;
  z-index: 3000;
  padding: 10px 18px;
  font-weight: 800;
  color: var(--text);
  background-color: #ffffff;
  border: 2px solid var(--tomato);
  border-radius: var(--radius-btn);
}

.skip-link:focus {
  top: 12px;
}

/* пустой заголовок блока на главной (подзаголовок не заполнен в админке) */
.Main > h2:empty {
  display: none;
}

/* Ссылки внутри текста отличаются не только цветом (WCAG 1.4.1).
   Только абзацы статей и подписи полей: карточки, меню и кнопки не задеты */
main article p a:not([class]),
main form label a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Поле поиска в шапке: та же рамка фокуса, что у остальных элементов (WCAG 2.4.7) */
.header-search:has(input[type="search"]:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Режим готовки: баннер cookie не закрывает кнопки «Назад» / «Дальше».
   display у баннера ставит JS прямо в style, поэтому !important */
html.rt-cook-open #cookie-banner {
  display: none !important;
}

/* ==========================================================================
   Служебные классы. Последний слой: перебивает всё остальное
   ========================================================================== */

/* Скрыть элемент. Класс переключается из JS, поэтому должен
   перебивать любой display компонента */
.Hide {
  display: none !important;
}

/* Видимость по ширине экрана: .Mobile только на телефоне и планшете,
   .NoMobile только на компьютере */
.Mobile {
  display: none !important;
}

@media (max-width: 1050px) {
  .Mobile {
    display: flex !important;
  }

  .NoMobile {
    display: none !important;
  }

  /* Раскрытый подпункт мобильного меню (класс ставит JS в _top.ascx) */
  .NavShow {
    display: flex !important;
  }
}

.red {
  font-weight: 600;
  color: red;
}

/* Текст только для экранных читалок */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Видимый фокус с клавиатуры (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------------
   Телефон и планшет: лишнее при выпадающем меню (27.10.2026)
   Ссылки «Рецепты» и «Полезно знать» в левой колонке повторяют меню,
   верхняя кнопка «Поделиться» только прокручивает к блоку внизу рецепта.
   ---------------------------------------------------------------------- */
@media (max-width: 1050px) {
  #links1_block,
  #links2_block,
  .recipe-actions__share,
  .recipe-head .recipe-actions > .recipe-actions__share {
    display: none;
  }
}

/* ----------------------------------------------------------------------
   Подвал: тёмный, как в макете А (27.10.2026)
   ---------------------------------------------------------------------- */
.site-footer {
  margin-top: 3rem;
  margin-bottom: 0;
  padding: 36px 0 28px;
  border-top: 0;
  background: #2B2723;
  color: #E6DFD2;
}
.site-footer a {
  color: #E6DFD2;
}
.site-footer a:hover,
.site-footer a:focus {
  color: #F2A33A;
}
.site-footer a:focus-visible {
  outline-color: #F2A33A;
}
.site-footer .logo {
  margin: 0;
}
.site-footer .logo img {
  display: none;
}
.site-footer .logo a::after {
  content: "Вилка" / "";
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: #F2A33A;
}
.site-footer .terms-wrapper,
.site-footer .FooterIn > p {
  color: #BFB6A8;
}
/* у ссылки в тексте соглашения цвет задан прямо в тексте из админки */
.site-footer .terms-wrapper a {
  color: #F2A33A !important;
}

/* ----------------------------------------------------------------------
   «Рецепт недели»: время и порции с иконками
   ---------------------------------------------------------------------- */
.top-facts {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  color: var(--muted);
}
.top-facts li {
  display: flex;
  align-items: center;
  gap: 6px;
}

#new_content {
  flex-flow: row wrap;
  align-items: baseline;
  column-gap: 12px;
}
#new_content > .title {
  flex: 1 1 auto;
}
#new_content > .content_block {
  flex: 1 1 100%;
  align-self: stretch;
}
.block-more {
  flex: none;
  font-weight: 800;
  color: var(--green);
  text-decoration: none;
}
.block-more:hover,
.block-more:focus {
  color: var(--tomato);
  text-decoration: underline;
}

.newrecipes-head {
  margin-bottom: 20px;
}
.newrecipes-head h1 {
  margin: 0;
}
.pager-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 24px 0 8px;
}
.pager-links a,
.pager-links span {
  display: inline-flex;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-btn);
  font-weight: 700;
  text-decoration: none;
}
.pager-links a {
  background-color: var(--hover-color);
  color: #ffffff;
}
.pager-links a:hover,
.pager-links a:focus {
  background-color: var(--button-hover-color);
  color: #ffffff;
}
.pager-links .pager-links__current {
  background: #E6DFD2;
  color: var(--text);
}
.pager-links span.pager-links__arrow {
  color: #8F887C;
}
.pager-links .pager-links__gap {
  min-width: 1rem;
  padding: 0;
  color: #8F887C;
}
.pager-links .pager-links__arrow {
  font-size: 1.4rem;
}

/* ----------------------------------------------------------------------
   Окна <dialog>: закрытое окно не видно (27.10.2026)
   #dialog { display: table } перебивал правило браузера для закрытого
   окна, и после «Назад» на Android фото оставалось на экране.
   ---------------------------------------------------------------------- */
#dialog:not([open]),
#dialog_text:not([open]) {
  display: none;
}

/* ----------------------------------------------------------------------
   Компьютер: колонка ингредиентов остаётся на экране при прокрутке шагов,
   если помещается по высоте. Класс is-sticky ставит js/recipe-tools.js;
   длинный список прокручивается вместе со страницей, как раньше (27.10.2026)
   ---------------------------------------------------------------------- */
@media (min-width: 1051px) {
  .recipe-ingredients.is-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: var(--scroll-padding-top);
  }
}