/*
Theme Name: Chafan Poster
Theme URI: https://www.chafan.ru/
Author: chafan.ru
Description: Плакатная тема для кулинарного сайта Чафан.ру по дизайн-макетам «Chafan Redesign»: жёсткие рамки и тени, наклонные ярлыки, Russo One + Rubik, брейкпоинты 360/480/640/960/1280/1600.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chafan-poster
*/

/* ==========================================================================
   1. Шрифты (self-hosted, cyrillic + latin)
   ========================================================================== */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/russo-one-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/russo-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/rubik-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/rubik-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Токены и база
   ========================================================================== */
:root {
  --cream: #f3e9d3;
  --ink: #26211a;
  --red: #bf3b1f;
  --blue: #1f4a6e;
  --mustard: #c78a1e;
  --green: #3e6b34;
  --plum: #74415e;
  --tg: #1f6e8c;
  --muted: #8a7a63;
  --body: #4a4033;
  --body2: #5f5442;
  --line: #d6c8ab;
  --pad: 20px;      /* горизонтальные поля страницы */
  --imgh: 200px;    /* высота фото карточки в сетке */
  --rs: 'Russo One', 'Arial Black', sans-serif;
  --rub: 'Rubik', 'Segoe UI', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--rub);
  font-size: 16px;
  line-height: 1.6;
  border-top: 8px solid var(--blue);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }

button { font-family: inherit; }

:focus-visible { outline: 3px dashed var(--red); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important;
}

/* Russo One helper */
.rs { font-family: var(--rs); font-weight: 400; }

/* ==========================================================================
   3. Шапка
   ========================================================================== */
.cp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px var(--pad);
  border-bottom: 3px solid var(--ink);
}

.cp-logo {
  font-family: var(--rs);
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 1.1;
  flex: none;
}
.cp-logo b { font-weight: 400; color: var(--red); }

.cp-nav { display: none; }
.cp-nav > ul {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.cp-nav > ul > li:last-child > a { color: var(--blue); }
.cp-nav > ul > li.current-menu-item > a,
.cp-nav > ul > li.current-menu-ancestor > a,
.cp-nav > ul > li.current_page_item > a,
.cp-nav > ul > li.cp-current > a {
  color: var(--red);
  border-bottom: 3px solid var(--red);
  padding-bottom: 2px;
}

/* компактный поиск в шапке (внутренние страницы, ≥960) */
.cp-hsearch { display: none; }

/* бургер */
.cp-burger {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  border: 3px solid var(--ink);
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.cp-burger span {
  flex: none;
  width: 20px;
  height: 3px;
  background: var(--ink);
  display: block;
}

/* красная полоса под шапкой (мобилка) */
.cp-strip {
  background: var(--red);
  color: var(--cream);
  font-family: var(--rs);
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  padding: 8px 12px;
  border-bottom: 3px solid var(--ink);
}

/* мобильная панель меню */
.cp-mpanel {
  display: none;
  border-bottom: 3px solid var(--ink);
  background: var(--cream);
}
.cp-mpanel.is-open { display: block; }
.cp-mpanel-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 3px solid var(--ink);
  margin: 16px var(--pad) 4px;
  padding: 10px 14px;
}
.cp-mpanel-search input {
  font-size: 15px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--rub);
}
.cp-mpanel-search button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--rs);
  font-size: 15px;
  color: var(--red);
}
.cp-mpanel {
  max-height: calc(100vh - 76px);
  overflow-y: auto;
}
.cp-mpanel-nav > ul {
  margin: 10px 0 0;
  padding: 0 var(--pad) 8px;
  list-style: none;
}
.cp-mpanel-nav li { position: relative; }
.cp-mpanel-nav a {
  display: block;
  padding: 12px 2px;
  border-bottom: 2px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cp-mpanel-nav > ul > li:last-child > a { border-bottom: none; color: var(--blue); }
.cp-mpanel-nav li.current-menu-item > a { color: var(--red); }

/* аккордеон 2–3 уровней в мобильной панели */
.cp-mpanel-nav .menu-item-has-children > a { padding-right: 48px; }
.cp-mpanel-toggle {
  position: absolute;
  top: 6px;
  right: 0;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  background: #fff;
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cp-mpanel-nav li.is-open > .cp-mpanel-toggle {
  background: var(--ink);
  color: var(--cream);
}
.cp-mpanel-nav .sub-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}
.cp-mpanel-nav li.is-open > .sub-menu { display: block; }
.cp-mpanel-nav .sub-menu a {
  text-transform: none;
  letter-spacing: .5px;
  font-size: 13.5px;
  padding: 11px 2px;
}
.cp-mpanel-nav .sub-menu .cp-mpanel-toggle { top: 4px; }
.cp-mpanel-nav .sub-menu .sub-menu a {
  font-weight: 400;
  color: var(--body);
}

/* ==========================================================================
   4. Герой главной
   ========================================================================== */
.cp-hero {
  position: relative;
  padding: 34px var(--pad);
  text-align: center;
  overflow: hidden;
}
.cp-hero-ribbon { display: none; }

.cp-hero h1 {
  font-family: var(--rs);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.08;
  text-wrap: pretty;
  max-width: 900px;
  margin: 0 auto;
}
.cp-hero h1 span { color: var(--red); }

.cp-hero-search { margin-top: 26px; }
.cp-hero-search form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
  margin: 0 auto;
}
.cp-hero-search .cp-searchbox {
  display: flex;
  align-items: center;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 14px 16px;
}
.cp-hero-search input {
  font-size: 15px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--rub);
  text-align: left;
}
.cp-hero-search input::placeholder { color: var(--muted); opacity: 1; }
.cp-hero-search button {
  background: var(--red);
  color: var(--cream);
  font-family: var(--rs);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 13px 24px;
  border: none;
  cursor: pointer;
  width: 100%;
}
.cp-hero-search button:hover { opacity: .85; }

.cp-hero-chips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.cp-hero-chips .cp-chips-label { display: none; }

/* ==========================================================================
   5. Чипы, ярлыки, кнопки
   ========================================================================== */
.cp-chip {
  display: inline-block;
  border: 2px solid var(--ink);
  background: #fff;
  padding: 6px 13px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
}
.cp-chip--accent { background: var(--red); color: var(--cream); }
.cp-chip--active { background: var(--ink); color: var(--cream); }
.cp-chip--green { color: var(--green); }
.cp-chip span { color: var(--muted); font-weight: 700; }
.cp-chip--accent span, .cp-chip--active span { color: inherit; opacity: .8; }

/* наклонный ярлык рубрики/времени на карточке */
.cp-badge {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--rs);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 5px 12px;
  transform: rotate(-2deg);
  text-transform: uppercase;
}
.cp-badge--red { background: var(--red); color: var(--cream); }
.cp-badge--blue { background: var(--blue); color: var(--cream); }
.cp-badge--green { background: var(--green); color: var(--cream); }
.cp-badge--mustard { background: var(--mustard); color: var(--ink); }
.cp-badge--plum { background: var(--plum); color: var(--cream); }
.cp-badge--ink { background: var(--ink); color: var(--cream); }
.cp-card:nth-child(even) .cp-badge,
.cp-badge--alt { transform: rotate(2deg); }

/* крупный наклонный стикер (заголовки секций, счётчик рубрики) */
.cp-sticker {
  display: inline-block;
  transform: rotate(-3deg);
  background: var(--blue);
  color: var(--cream);
  font-family: var(--rs);
  font-size: 12.5px;
  letter-spacing: 2px;
  padding: 7px 15px;
  box-shadow: 4px 4px 0 var(--ink);
  text-transform: uppercase;
}
.cp-sticker--red { background: var(--red); }
.cp-sticker--green { background: var(--green); }
.cp-sticker--mustard { background: var(--mustard); color: var(--ink); }
.cp-sticker--plum { background: var(--plum); }

/* заголовок-стикер колонок рецепта */
.cp-h-sticker {
  display: inline-block;
  transform: rotate(-2deg);
  background: var(--blue);
  color: var(--cream);
  font-family: var(--rs);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 8px 18px;
  box-shadow: 5px 5px 0 var(--ink);
  text-transform: uppercase;
}
.cp-h-sticker--red { background: var(--red); transform: rotate(2deg); }

/* плакатная кнопка */
.cp-btn {
  display: inline-block;
  background: var(--cream);
  border: 3px solid var(--ink);
  color: var(--ink);
  padding: 13px 28px;
  font-family: var(--rs);
  font-size: 14px;
  letter-spacing: 1px;
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1.3;
}
.cp-btn--red { background: var(--red); color: var(--cream); border: none; box-shadow: 5px 5px 0 var(--ink); }
.cp-btn--blue { background: var(--blue); color: var(--cream); border: none; box-shadow: 5px 5px 0 var(--ink); }

/* ==========================================================================
   6. Сетка карточек
   ========================================================================== */
/*
 * Линии сетки — бордеры самих карточек (правый и нижний), фон сетки кремовый:
 * пустые ячейки неполного ряда остаются бежевыми, а не тёмными.
 */
.cp-grid {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cream);
  border-top: 3px solid var(--ink);
}
.cp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 0;
  border-bottom: 3px solid var(--ink);
}
/* стык с сеткой: секция ниже перекрывает нижние бордеры карточек своим border-top */
.cp-grid + .cp-pager,
.cp-grid + .cp-more-row,
.cp-grid + .cp-band { margin-top: -3px; }
/* линия над сеткой уже нарисована предыдущей секцией */
.cp-sortbar + .cp-grid,
.cp-arch-head + .cp-grid { border-top: none; }
.cp-card-img { display: block; background: var(--cream); }
.cp-card-img img {
  width: 100%;
  height: var(--imgh);
  object-fit: cover;
  display: block;
}
.cp-card-body {
  flex: 1;
  padding: 16px 18px 20px;
  border-top: 3px solid var(--ink);
  background: #fff;
}
.cp-card-title {
  display: block;
  font-family: var(--rs);
  font-size: 16px;
  line-height: 1.3;
  margin-top: 11px;
}
.cp-card-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
}

/* ряд «Показать ещё» */
.cp-more-row {
  border-top: 3px solid var(--ink);
  display: flex;
  justify-content: center;
  padding: 28px var(--pad);
}
.cp-btn.is-loading {
  opacity: .6;
  cursor: wait;
}

/* ==========================================================================
   7. Шапка архива (рубрика/поиск), сортировка, пагинация
   ========================================================================== */
.cp-crumbs {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-crumbs .sep { margin: 0 7px; color: var(--red); }
.cp-crumbs .here { color: var(--ink); }

.cp-arch-head {
  position: relative;
  padding: 36px var(--pad) 34px;
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
.cp-arch-title-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.cp-arch-title {
  font-family: var(--rs);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.cp-arch-title-row .cp-sticker { margin-bottom: 5px; flex: none; }
.cp-arch-desc {
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--body2);
}
.cp-arch-desc p { margin: 0 0 8px; }
.cp-arch-desc p:last-child { margin-bottom: 0; }
.cp-arch-chips {
  display: flex;
  gap: 9px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.cp-sortbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  padding: 14px var(--pad);
  border-bottom: 3px solid var(--ink);
  background: #fff;
  flex-wrap: wrap;
}
.cp-sortbar-links {
  display: flex;
  gap: 18px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.cp-sortbar-links a { color: var(--muted); }
.cp-sortbar-links a.is-active {
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
}
.cp-sortbar-count { font-size: 13px; color: var(--muted); }

.cp-pager {
  border-top: 3px solid var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 28px var(--pad);
  flex-wrap: wrap;
}
.cp-pager .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink);
  background: #fff;
  font-family: var(--rs);
  font-size: 16px;
}
.cp-pager .page-numbers.current {
  background: var(--red);
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
}
.cp-pager .page-numbers.dots {
  border: none;
  background: transparent;
  width: auto;
  color: var(--muted);
  padding: 0 4px;
}
.cp-pager .page-numbers.next,
.cp-pager .page-numbers.prev {
  width: auto;
  padding: 0 18px;
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ==========================================================================
   8. Страница рецепта
   ========================================================================== */
.cp-single-head {
  padding: 30px var(--pad) 28px;
  border-bottom: 3px solid var(--ink);
}
.cp-single-title {
  font-family: var(--rs);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.16;
  text-wrap: pretty;
  max-width: 1000px;
  margin: 14px 0 0;
  text-transform: uppercase;
}
.cp-single-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.cp-single-meta .cp-badge { font-size: 11px; padding: 6px 13px; }
.cp-single-meta .cp-date { font-size: 13px; color: var(--muted); }
.cp-single-meta .cp-date a { color: var(--red); font-weight: 700; }

.cp-single-media {
  padding: 24px var(--pad);
  border-bottom: 3px solid var(--ink);
}
.cp-single-media .cp-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.cp-single-intro {
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 900px;
  margin: 24px 0 0;
  color: var(--body);
}
.cp-single-intro p { margin: 0 0 10px; }
.cp-single-intro p:last-child { margin-bottom: 0; }

.cp-times {
  display: grid;
  /* до 4 ячеек (Подготовка/Приготовление/Ожидание/Всего) — всегда в одну строку */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 3px solid var(--ink);
  background: #fff;
  margin-top: 24px;
  max-width: 620px;
  box-shadow: 5px 5px 0 var(--ink);
}
.cp-times-cell {
  padding: 10px 3px;
  text-align: center;
  border-right: 3px solid var(--ink);
  min-width: 0;
}
.cp-times-cell:last-child {
  border-right: none;
  background: var(--blue);
  color: var(--cream);
}
.cp-times-cell .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-times-cell .tl-full { display: none; }
.cp-times-cell .tl-short { display: inline; }
@media (min-width: 480px) {
  .cp-times-cell .lbl { font-size: 10px; letter-spacing: 1px; }
  .cp-times-cell .tl-full { display: inline; }
  .cp-times-cell .tl-short { display: none; }
}
.cp-times-cell:last-child .lbl { color: inherit; opacity: .75; }
.cp-times-cell .val {
  font-family: var(--rs);
  font-size: 15px;
  margin-top: 6px;
}

/* две колонки рецепта */
.cp-cols { display: grid; grid-template-columns: 1fr; align-items: start; }
.cp-ingr {
  padding: 24px var(--pad) 30px;
  border-bottom: 3px solid var(--ink);
}
.cp-steps { padding: 24px var(--pad) 30px; }

.cp-serv {
  display: flex;
  align-items: stretch;
  border: 3px solid var(--ink);
  background: #fff;
  margin-top: 22px;
}
.cp-serv-label {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  min-height: 46px;
}
.cp-serv button {
  width: 46px;
  min-height: 46px;
  border: none;
  border-left: 3px solid var(--ink);
  background: var(--cream);
  font-family: var(--rs);
  font-size: 18px;
  cursor: pointer;
  color: var(--red);
}
.cp-serv button:hover { opacity: .85; }
.cp-serv-num {
  width: 52px;
  border-left: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rs);
  font-size: 18px;
}
.cp-serv-type {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 8px;
  text-transform: lowercase;
}

.cp-ingr-list {
  border: 3px solid var(--ink);
  background: #fff;
}
/* вплотную под калькулятором — рамки схлопываются в одну линию */
.cp-serv + .cp-ingr-list { margin-top: -3px; }
.cp-ingr-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
  font-size: 14.5px;
}
.cp-ingr-row:last-child { border-bottom: none; }
.cp-ingr-row .name { font-weight: 700; }
.cp-ingr-row .name small {
  font-weight: 400;
  color: var(--muted);
  font-size: 12.5px;
}
.cp-ingr-row .amt { color: var(--muted); flex: none; text-align: right; }
.cp-ingr-group {
  padding: 10px 16px 6px;
  border-bottom: 2px solid var(--line);
  font-family: var(--rs);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--body2);
  background: var(--cream);
}

.cp-tip {
  margin-top: 22px;
  border: 3px solid var(--ink);
  background: var(--cream);
  box-shadow: 5px 5px 0 var(--red);
  padding: 16px 18px;
}
.cp-tip-title {
  font-family: var(--rs);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--red);
}
.cp-tip p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 8px 0 0;
  color: var(--body);
}

.cp-kbju {
  margin-top: 22px;
  border: 3px solid var(--ink);
  background: #fff;
}
.cp-kbju-head {
  padding: 10px 16px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--rs);
  font-size: 12px;
  letter-spacing: 2px;
}
.cp-kbju-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--ink);
}
.cp-kbju-cell {
  padding: 12px 6px;
  text-align: center;
  border-right: 2px solid var(--line);
}
.cp-kbju-cell:last-child { border-right: none; }
.cp-kbju-cell .val { font-family: var(--rs); font-size: 17px; }
.cp-kbju-cell:first-child .val { color: var(--red); }
.cp-kbju-cell .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.cp-steps-list { display: flex; flex-direction: column; margin-top: 22px; }
.cp-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 2px solid var(--line);
}
.cp-step:last-child { border-bottom: none; }
.cp-step-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--ink);
  background: #fff;
  font-family: var(--rs);
  font-size: 18px;
  color: var(--red);
}
.cp-step-photo { display: block; flex: none; }
.cp-step-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 3px solid var(--ink);
  display: block;
}
.cp-step p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  padding-top: 2px;
  color: var(--ink);
}
.cp-step-group {
  font-family: var(--rs);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  padding: 16px 0 0;
}

/* теги и действия */
.cp-tags {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.cp-tags .lbl { font-family: var(--rs); font-size: 12px; letter-spacing: 1px; }
.cp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.cp-actions .lbl { font-family: var(--rs); font-size: 12px; letter-spacing: 1px; }
.cp-share {
  display: inline-block;
  color: var(--cream);
  padding: 10px 15px;
  font-family: var(--rs);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  border: none;
}
.cp-share--vk { background: var(--blue); }
.cp-share--tg { background: var(--tg); }
.cp-share--ok { background: var(--mustard); color: var(--ink); }
.cp-share--wa { background: var(--green); }
.cp-share--copy {
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 7px 15px;
}

/* ==========================================================================
   9. Комментарии
   ========================================================================== */
.cp-comments {
  border-top: 3px solid var(--ink);
  padding: 24px var(--pad) 30px;
  background: #fff;
}
.cp-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.cp-section-head .ttl {
  font-family: var(--rs);
  font-size: 20px;
  text-transform: uppercase;
  flex: none;
}
.cp-section-head .ttl span { color: var(--red); }
.cp-section-head .rule { flex: 1; height: 3px; background: var(--ink); min-width: 30px; }
.cp-section-head .all {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  flex: none;
}

.cp-comment-list { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.cp-comment-list .children { list-style: none; padding-left: 20px; }
.cp-comment {
  border: 3px solid var(--ink);
  padding: 16px 18px;
  margin-bottom: 14px;
  background: #fff;
}
.cp-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-comment-meta .who { font-family: var(--rs); font-size: 14px; }
.cp-comment-meta .when { font-size: 12px; color: var(--muted); }
.cp-comment-text { font-size: 14.5px; line-height: 1.6; margin-top: 8px; color: var(--body); }
.cp-comment-text p { margin: 0 0 8px; }
.cp-comment-text p:last-child { margin-bottom: 0; }
.cp-comment .reply a { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 1px; }

.cp-comment-form { margin-top: 22px; max-width: 820px; }
.cp-comment-form .form-title {
  font-family: var(--rs);
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: 400;
}
.cp-cf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.cp-comment-form input[type="text"],
.cp-comment-form input[type="email"],
.cp-comment-form input[type="url"],
.cp-comment-form textarea {
  font-size: 15px;
  color: var(--ink);
  border: 3px solid var(--ink);
  outline: none;
  background: var(--cream);
  font-family: var(--rub);
  padding: 12px 15px;
  min-width: 0;
  width: 100%;
}
.cp-comment-form textarea { height: 110px; margin-top: 12px; resize: vertical; }
.cp-comment-form .form-submit { margin: 14px 0 0; }
.cp-comment-form .cookies-consent {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}
.cp-comment-form .logged-in-as, .cp-comment-form .comment-notes { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.cp-comment-form .comment-reply-title small { display: block; font-size: 12px; margin-top: 4px; }
.cp-comment-form .comment-reply-title small a { color: var(--red); }

/* ==========================================================================
   10. «Попробуйте ещё»
   ========================================================================== */
.cp-related {
  border-top: 3px solid var(--ink);
  padding: 28px var(--pad) 34px;
}
.cp-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.cp-rcard {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  background: #fff;
  box-shadow: 8px 8px 0 var(--ink);
}
.cp-rcard-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-bottom: 3px solid var(--ink);
}
.cp-rcard-body { flex: 1; padding: 16px 18px 20px; }
.cp-rcard-title {
  display: block;
  font-family: var(--rs);
  font-size: 16px;
  line-height: 1.3;
  margin-top: 10px;
}

/* ==========================================================================
   11. Текстовая страница / пост с сайдбаром
   ========================================================================== */
.cp-page-grid { display: grid; grid-template-columns: 1fr; }
.cp-main { padding: 24px var(--pad) 34px; min-width: 0; }
.cp-main > .cp-photo-wrap { margin-bottom: 24px; }
.cp-photo-frame {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}

.cp-content { font-size: 15px; line-height: 1.7; color: var(--body); max-width: 860px; }
.cp-content > p { margin: 0 0 16px; }
.cp-content a { color: var(--red); font-weight: 700; }
.cp-content h2 {
  display: table;
  font-family: var(--rs);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--red);
  padding: 8px 18px;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--ink);
  margin: 34px 0 20px;
}
.cp-content h2:nth-of-type(4n+2) { background: var(--green); transform: rotate(2deg); }
.cp-content h2:nth-of-type(4n+3) { background: var(--blue); }
.cp-content h2:nth-of-type(4n+4) { background: var(--mustard); color: var(--ink); transform: rotate(2deg); }
.cp-content h3 {
  font-family: var(--rs);
  font-weight: 400;
  font-size: 18px;
  margin: 28px 0 14px;
  color: var(--ink);
}
.cp-content img {
  border: 2px solid var(--ink);
  height: auto;
}
.cp-content ul, .cp-content ol { padding-left: 22px; margin: 0 0 16px; }
.cp-content li { margin-bottom: 8px; }
.cp-content blockquote {
  margin: 20px 0;
  border: 3px solid var(--ink);
  background: #fff;
  box-shadow: 5px 5px 0 var(--mustard);
  padding: 16px 18px;
}
.cp-content table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.cp-content td, .cp-content th { border: 2px solid var(--line); padding: 8px 10px; }

/* подборки: список ссылок с разделителями */
.cp-list-links .cp-content > p {
  margin: 0;
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
  font-size: 15px;
  line-height: 1.65;
}

.cp-page-comments { margin-top: 36px; border-top: 3px solid var(--ink); padding-top: 26px; }
.cp-page-comments .cp-comment-form input[type="text"],
.cp-page-comments .cp-comment-form input[type="email"],
.cp-page-comments .cp-comment-form input[type="url"],
.cp-page-comments .cp-comment-form textarea { background: #fff; }

/* сайдбар */
.cp-sidebar {
  padding: 28px var(--pad) 34px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-top: 3px solid var(--ink);
  min-width: 0;
}
.cp-widget-title {
  font-family: var(--rs);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 10px;
  margin: 0;
  text-transform: uppercase;
}
.cp-mini {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 2px solid var(--line);
}
.cp-mini:last-child { border-bottom: none; }
.cp-mini-img { flex: none; }
.cp-mini-img img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border: 2px solid var(--ink);
  display: block;
}
.cp-mini-title { font-weight: 700; font-size: 13.5px; line-height: 1.35; display: block; }
.cp-mini-date { font-size: 12px; color: var(--muted); margin-top: 3px; }

.cp-side-box {
  border: 3px solid var(--ink);
  background: #fff;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px;
}
.cp-side-box-title { font-family: var(--rs); font-size: 14px; letter-spacing: 1px; color: var(--red); text-transform: uppercase; }
.cp-side-box-links { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.cp-side-box-links a { font-weight: 700; font-size: 14px; line-height: 1.4; }

/* ==========================================================================
   11a. Каталог ингредиентов (страница «Ингредиенты»)
   ========================================================================== */
.cp-ingr-catalog { padding: 10px var(--pad) 40px; }
.cp-ingr-letter { scroll-margin-top: 20px; padding-top: 24px; }
.cp-letter-sticker {
  min-width: 46px;
  text-align: center;
  font-size: 17px;
  padding: 7px 12px;
}
.cp-letter-sticker--red { background: var(--red); transform: rotate(-2deg); }
.cp-letter-sticker--green { background: var(--green); transform: rotate(2deg); }
.cp-letter-sticker--blue { background: var(--blue); transform: rotate(-2deg); }
.cp-letter-sticker--mustard { background: var(--mustard); color: var(--ink); transform: rotate(2deg); }
.cp-ingr-letter .cp-section-head { margin-bottom: 16px; }
.cp-ingr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.cp-letter-nav .cp-chip { min-width: 38px; text-align: center; }

/* ==========================================================================
   12. Промо-полосы перед футером (случайный рецепт, секрет дня) и футер
   ========================================================================== */
.cp-band { border-top: 3px solid var(--ink); }

/* 11b — случайный рецепт (фон красный, как у 11a) */
.cp-band-random {
  position: relative;
  overflow: hidden;
  background: var(--red);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 26px var(--pad);
}
.cp-band-random .qmark {
  position: absolute;
  right: 30px;
  top: -30px;
  transform: rotate(12deg);
  font-family: var(--rs);
  font-size: 120px;
  line-height: 1.2;
  opacity: .08;
  pointer-events: none;
}
.cp-band-random .ttl {
  font-family: var(--rs);
  font-size: 19px;
  letter-spacing: 1px;
  line-height: 1.3;
}
.cp-band-random .sub { font-size: 14px; margin-top: 6px; opacity: .9; }
.cp-lucky {
  flex: none;
  position: relative;
  background: var(--cream);
  color: var(--red);
  padding: 13px 26px;
  font-family: var(--rs);
  font-size: 14px;
  letter-spacing: 1px;
  box-shadow: 5px 5px 0 var(--ink);
  display: inline-block;
}

/* 11d — кулинарный секрет дня */
.cp-band-secret {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px var(--pad);
}
.cp-secret-label {
  flex: none;
  transform: rotate(-3deg);
  background: var(--mustard);
  color: var(--ink);
  font-family: var(--rs);
  font-size: 14px;
  letter-spacing: 2px;
  padding: 9px 18px;
  box-shadow: 5px 5px 0 var(--ink);
  display: inline-block;
}
.cp-band-secret p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}
.cp-band-secret p a { color: var(--red); font-weight: 700; }
.cp-secret-all {
  flex: none;
  border: 3px solid var(--ink);
  background: var(--cream);
  padding: 11px 24px;
  font-family: var(--rs);
  font-size: 13px;
  letter-spacing: 1px;
  display: block;
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.cp-footer {
  border-top: 3px solid var(--ink);
  background: var(--blue);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px var(--pad);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
}
.cp-footer-logo { font-family: var(--rs); font-size: 15px; font-weight: 400; }
.cp-footer nav ul {
  display: flex;
  gap: 12px 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   13. 404 и заглушки
   ========================================================================== */
.cp-404 {
  padding: 60px var(--pad) 70px;
  text-align: center;
}
.cp-404 .code {
  display: inline-block;
  font-family: var(--rs);
  font-size: 84px;
  line-height: 1;
  color: var(--cream);
  background: var(--red);
  padding: 10px 34px;
  transform: rotate(-2deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.cp-404 h1 { font-family: var(--rs); font-weight: 400; font-size: 26px; margin: 34px 0 10px; text-transform: uppercase; }
.cp-404 p { color: var(--body2); max-width: 480px; margin: 0 auto 26px; }
.cp-404 form {
  display: flex;
  max-width: 480px;
  margin: 0 auto 26px;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 8px 8px 8px 18px;
  align-items: center;
  gap: 10px;
}
.cp-404 input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--rub);
  font-size: 15px;
  color: var(--ink);
}
.cp-404 button {
  background: var(--red);
  color: var(--cream);
  font-family: var(--rs);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 12px 22px;
  border: none;
  cursor: pointer;
}

.cp-empty { padding: 40px var(--pad) 50px; }
.cp-empty p { color: var(--body2); max-width: 640px; }

/* ==========================================================================
   14. Брейкпоинты
   ========================================================================== */

/* ---------- ≥480 ---------- */
@media (min-width: 480px) {
  .cp-hero h1 { font-size: 40px; }
}

/* ---------- ≥640 ---------- */
@media (min-width: 640px) {
  :root { --pad: 28px; --imgh: 180px; }

  .cp-logo { font-size: 26px; }

  .cp-hero { padding: 44px var(--pad); }
  .cp-hero h1 { font-size: 46px; }
  .cp-hero-search form {
    flex-direction: row;
    gap: 0;
    background: #fff;
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    padding: 8px 8px 8px 20px;
    align-items: center;
  }
  .cp-hero-search .cp-searchbox {
    flex: 1;
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .cp-hero-search button { width: auto; flex: none; }
  .cp-hero-chips { gap: 8px 10px; }

  .cp-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-card { border-right: 3px solid var(--ink); }
  .cp-card:nth-child(2n) { border-right: none; }

  .cp-arch-title { font-size: 44px; }

  .cp-single-title { font-size: 34px; }
  .cp-single-media .cp-photo { height: 320px; }
  .cp-times-cell { padding: 12px 8px; }
  .cp-times-cell .lbl { font-size: 11px; }
  .cp-times-cell .val { font-size: 17px; }

  .cp-step { flex-direction: row; gap: 18px; }
  .cp-step-photo { width: 210px; }
  .cp-step-photo img { height: 140px; width: 210px; }
  .cp-step p { flex: 1; }

  .cp-cf-grid { grid-template-columns: 1fr 1fr; }

  .cp-photo-frame { height: 300px; }

  .cp-band-random {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 30px;
  }
  .cp-band-random .qmark { right: 160px; }
  .cp-band-secret {
    flex-direction: row;
    text-align: left;
    gap: 30px;
  }
  .cp-band-secret p { flex: 1; min-width: 0; }
  .cp-secret-all { display: inline-block; width: auto; max-width: none; }
  .cp-footer {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .cp-footer nav ul { gap: 20px; }

  .cp-related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≥960 ---------- */
@media (min-width: 960px) {
  :root { --pad: 40px; --imgh: 220px; }

  body { border-top-width: 10px; }

  .cp-header { padding: 14px var(--pad); gap: 24px; }
  .cp-logo { font-size: 30px; }
  .cp-burger { display: none; }
  .cp-mpanel { display: none !important; }
  .cp-nav { display: block; min-width: 0; }
  .cp-strip { display: none; }

  /* --- выпадающее меню (2-3 уровни) --- */
  .cp-nav > ul { gap: 10px; }
  .cp-nav > ul > li { position: relative; }
  .cp-nav > ul > li > a { white-space: nowrap; display: inline-block; }

  /* стрелки: ▾ на 1-м уровне, ▸ у подпунктов с 3-м уровнем */
  .cp-nav .menu-item-has-children > a::after {
    content: '▾';
    font-size: 9px;
    line-height: 1;
    margin-left: 4px;
  }
  .cp-nav .sub-menu .menu-item-has-children > a::after { content: '▸'; margin-left: 0; }

  /* панель 2-го уровня: по центру под пунктом, зазор 12px */
  .cp-nav .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    min-width: 210px;
    flex-direction: column;
  }
  /* «мостик» для ховера через зазор */
  .cp-nav .sub-menu::before {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    top: -15px;
    height: 15px;
  }
  .cp-nav li:hover > .sub-menu,
  .cp-nav li:focus-within > .sub-menu,
  .cp-nav li.is-touch-open > .sub-menu { display: flex; }

  /* последние 1-2 пункта: панель к правому краю, чтобы не выйти за вьюпорт */
  .cp-nav > ul > li:nth-last-child(-n+2) > .sub-menu {
    left: auto;
    right: 0;
    transform: none;
  }

  .cp-nav .sub-menu li { position: relative; }
  .cp-nav .sub-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: none;
    color: var(--ink);
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
  }
  .cp-nav .sub-menu li:last-child > a { border-bottom: none; }
  .cp-nav .sub-menu a:hover {
    background: var(--cream);
    color: var(--red);
    opacity: 1;
  }
  .cp-nav .sub-menu li.current-menu-item > a { color: var(--red); }

  /* 3-й уровень: флайаут вправо, рамки выровнены (top -3px) */
  .cp-nav .sub-menu .sub-menu {
    top: -3px;
    left: calc(100% + 10px);
    right: auto;
    transform: none;
    min-width: 180px;
  }
  .cp-nav .sub-menu .sub-menu::before {
    top: -3px;
    bottom: -3px;
    height: auto;
    left: -13px;
    right: auto;
    width: 13px;
  }
  /* у правых рубрик — флайаут влево */
  .cp-nav > ul > li:nth-last-child(-n+2) .sub-menu .sub-menu {
    left: auto;
    right: calc(100% + 10px);
  }
  .cp-nav > ul > li:nth-last-child(-n+2) .sub-menu .sub-menu::before {
    left: auto;
    right: -13px;
  }

  .cp-hsearch {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 3px solid var(--ink);
    padding: 8px 14px;
    width: 150px;
    flex: none;
  }
  .cp-hsearch input {
    font-size: 13px;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--rub);
  }
  .cp-hsearch button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--rs);
    font-size: 13px;
    color: var(--red);
  }
  .home .cp-hsearch, .front .cp-hsearch { display: none; }

  .cp-hero { padding: 56px var(--pad) 52px; }
  .cp-hero h1 { font-size: 54px; line-height: 1.06; margin-top: 24px; }
  .cp-hero-ribbon {
    display: block;
    position: absolute;
    top: 30px;
    background: var(--red);
    color: var(--cream);
    font-family: var(--rs);
    font-size: 13px;
    letter-spacing: 3px;
    padding: 8px 90px;
    white-space: nowrap;
  }
  .cp-hero-ribbon--left { left: -60px; transform: rotate(-4deg); }
  .cp-hero-ribbon--right { right: -60px; transform: rotate(4deg); background: var(--blue); }
  .cp-hero-search { margin-top: 32px; }
  .cp-hero-chips { margin-top: 26px; }
  .cp-hero-chips .cp-chips-label {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cp-chip { padding: 7px 16px; font-size: 13px; }

  .cp-grid { grid-template-columns: repeat(3, 1fr); }
  .cp-card:nth-child(2n) { border-right: 3px solid var(--ink); }
  .cp-card:nth-child(3n) { border-right: none; }

  .cp-crumbs { font-size: 12.5px; }
  .cp-crumbs .sep { margin: 0 8px; }
  .cp-arch-head { padding: 44px var(--pad) 40px; }
  .cp-arch-title { font-size: 50px; }
  .cp-arch-title-row { gap: 22px; margin-top: 14px; }
  .cp-arch-desc { font-size: 16px; margin-top: 16px; }
  .cp-arch-chips { margin-top: 22px; gap: 10px; }
  .cp-sticker { font-size: 14px; padding: 8px 18px; box-shadow: 5px 5px 0 var(--ink); }
  .cp-sortbar-links { gap: 22px; }

  .cp-single-head { padding: 36px var(--pad) 34px; }
  .cp-single-title { font-size: 40px; line-height: 1.12; margin-top: 16px; }
  .cp-single-meta { margin-top: 20px; gap: 12px; }
  .cp-single-meta .cp-badge { padding: 6px 14px; }
  .cp-single-meta .cp-chip { padding: 6px 14px; font-size: 13px; }
  .cp-single-media { padding: 36px var(--pad); }
  .cp-single-media .cp-photo { height: 440px; box-shadow: 10px 10px 0 var(--ink); }
  .cp-single-intro { font-size: 16.5px; margin-top: 28px; }
  .cp-times { margin-top: 28px; max-width: 720px; box-shadow: 6px 6px 0 var(--ink); }
  .cp-times-cell { padding: 16px 10px; }
  .cp-times-cell .lbl { letter-spacing: 2px; }
  .cp-times-cell .val { font-size: 20px; }

  .cp-cols { grid-template-columns: 330px 1fr; }
  .cp-ingr {
    border-right: 3px solid var(--ink);
    border-bottom: none;
    padding: 40px 30px 44px;
  }
  .cp-steps { padding: 40px var(--pad) 44px; }
  .cp-h-sticker { font-size: 16px; padding: 9px 20px; }
  .cp-serv { margin-top: 24px; }
  .cp-serv-label { padding: 0 18px; font-size: 14px; }
  .cp-serv button { width: 48px; min-height: 48px; font-size: 20px; }
  .cp-serv-num { width: 56px; font-size: 19px; }
  .cp-ingr-row { padding: 13px 18px; font-size: 15px; gap: 14px; }
  .cp-tip { margin-top: 24px; padding: 18px 20px; }
  .cp-tip-title { font-size: 14px; }
  .cp-tip p { font-size: 14px; }
  .cp-kbju { margin-top: 24px; }
  .cp-kbju-head { padding: 11px 18px; font-size: 13px; }
  .cp-kbju-cell { padding: 14px 8px; }
  .cp-kbju-cell .val { font-size: 19px; }
  .cp-kbju-cell .lbl { font-size: 11px; }

  .cp-steps-list { margin-top: 24px; }
  .cp-step { gap: 22px; padding: 20px 0; }
  .cp-step-num { width: 52px; height: 52px; font-size: 20px; }
  .cp-step p { font-size: 15.5px; padding-top: 4px; }

  .cp-tags { margin-top: 28px; gap: 10px; }
  .cp-tags .lbl, .cp-actions .lbl { font-size: 13px; }
  .cp-tags .cp-chip { padding: 6px 14px; font-size: 13px; }
  .cp-actions { margin-top: 24px; gap: 12px; }
  .cp-actions .lbl { margin-left: 10px; }
  .cp-share { padding: 11px 18px; font-size: 12px; }
  .cp-share--copy { padding: 8px 18px; }

  .cp-comments { padding: 36px var(--pad); }
  .cp-section-head { gap: 18px; margin-bottom: 24px; }
  .cp-section-head .ttl { font-size: 22px; }
  .cp-comment { padding: 18px 22px; }
  .cp-comment-meta .who { font-size: 15px; }
  .cp-comment-meta .when { font-size: 12.5px; }
  .cp-comment-text { font-size: 15px; }

  .cp-related { padding: 40px var(--pad); }
  .cp-related .ttl { font-size: 24px; }
  .cp-related-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .cp-rcard-title { font-size: 17px; }

  .cp-page-grid { grid-template-columns: 1fr 290px; }
  .cp-main {
    padding: 40px var(--pad) 48px;
    border-right: 3px solid var(--ink);
  }
  .cp-sidebar { border-top: none; padding: 40px 28px 48px; gap: 32px; }
  .cp-photo-frame { height: 340px; }
  .cp-content { font-size: 15.5px; }
  .cp-content h2 { font-size: 16px; }
  .cp-mini-title { font-size: 14px; }
  .cp-side-box { padding: 22px; }
  .cp-side-box-title { font-size: 15px; }
  .cp-side-box-links a { font-size: 14.5px; }

  .cp-band-random { padding: 28px var(--pad); }
  .cp-band-random .ttl { font-size: 22px; }
  .cp-band-random .qmark { right: 200px; }
  .cp-lucky { padding: 14px 30px; font-size: 15px; }
  .cp-band-secret { padding: 26px var(--pad); }
  .cp-band-secret p { font-size: 16px; }
  .cp-footer { padding: 16px var(--pad); }
  .cp-footer nav ul { gap: 26px; }

  .cp-btn { padding: 14px 40px; font-size: 15px; }
  .cp-more-row { padding: 30px var(--pad); }
  .cp-404 .code { font-size: 110px; }
}

/* ---------- ≥1280 ---------- */
@media (min-width: 1280px) {
  :root { --pad: 48px; --imgh: 250px; }

  .cp-nav > ul { gap: 26px; font-size: 13px; }
  .cp-hsearch { width: 240px; }

  .cp-hero { padding: 60px var(--pad) 56px; }
  .cp-hero h1 { font-size: 60px; margin-top: 28px; }

  .cp-archive-grid { --imgh: 230px; }

  .cp-card-body { padding: 18px 20px 22px; }
  .cp-card-title { font-size: 18px; margin-top: 12px; }

  .cp-arch-title { font-size: 56px; }
  .cp-single-title { font-size: 46px; }
  .cp-single-media { padding: 40px var(--pad); }
  .cp-single-media .cp-photo { height: 520px; }

  .cp-cols { grid-template-columns: 420px 1fr; }
  .cp-ingr { padding: 40px 40px 44px; }

  .cp-page-grid { grid-template-columns: 1fr 360px; }
  .cp-sidebar { padding: 40px 32px 48px; }
  .cp-photo-frame { height: 380px; }
  .cp-content { font-size: 16px; }
}

/* ---------- ≥1600 ---------- */
@media (min-width: 1600px) {
  :root { --pad: 64px; --imgh: 260px; }

  .cp-nav > ul { gap: 30px; font-size: 14px; }

  .cp-hero h1 { font-size: 70px; }

  .cp-grid { grid-template-columns: repeat(4, 1fr); }
  .cp-card:nth-child(3n) { border-right: 3px solid var(--ink); }
  .cp-card:nth-child(4n) { border-right: none; }

  .cp-cols { grid-template-columns: 440px 1fr; }
  .cp-page-grid { grid-template-columns: 1fr 380px; }
}

/* ==========================================================================
   15. Печать
   ========================================================================== */
@media print {
  body { border-top: none; background: #fff; }
  .cp-header, .cp-strip, .cp-mpanel, .cp-hero,
  .cp-sortbar, .cp-pager, .cp-more-row,
  .cp-band, .cp-footer, .cp-comments, .cp-related,
  .cp-actions, .cp-sidebar, .cp-crumbs, .cp-tags { display: none !important; }
  .cp-cols { grid-template-columns: 1fr; }
  .cp-ingr { border-right: none; border-bottom: 2px solid #000; }
  .cp-single-media .cp-photo { height: 300px; box-shadow: none; }
  .cp-times, .cp-serv, .cp-ingr-list, .cp-tip, .cp-kbju { box-shadow: none; }
  .cp-serv button { display: none; }
  .cp-badge, .cp-sticker, .cp-h-sticker {
    transform: none;
    box-shadow: none;
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000;
  }
}