/* Pektiva — дизайн-токены и базовые компоненты публичного фронта (issue #151).
   Визуальный язык FreshCart: Inter, зелёный #0aad0a, тёмный #21313c,
   радиус 8px. Значения палитры совпадают с freshcart/theme.min.css, чтобы
   Tailwind-классы шаблона (text-gray-600, bg-green-600…) и компоненты
   ниже выглядели одинаково. Каталог (catalog.css) берёт цвета отсюда.

   Компоненты:
     .pk-btn + .pk-btn--primary | --dark | --outline | --icon, размеры --sm | --lg, .pk-btn--block
     .pk-badge + .pk-badge--new | --hit | --sale
     .pk-header / .pk-topbar / .pk-search / .pk-suggest / .pk-dd / .pk-menu / .pk-mobile — шапка (#152)
     .pk-mega — мега-меню каталога (#153)
     .pk-offcanvas — выезжающие панели, .pk-tabbar — нижняя панель на телефоне (#154)
     .pk-toast — всплывающее сообщение «Добавлено в избранное» (#159)
     .icon — inline SVG Tabler из {{ icon(name="…") }}
*/

:root {
  /* цвет */
  --pk-green: #0aad0a;
  --pk-green-dark: #0d7e0f;
  --pk-green-soft: #e7f7e7;
  --pk-green-ring: rgba(10, 173, 10, .25);
  --pk-dark: #21313c;
  --pk-dark-hover: #001e2b;
  --pk-heading: #21313c;
  --pk-text: #5c6c75;
  --pk-muted: #889397;
  --pk-subtle: #c1c7c6;
  --pk-line: #dfe2e1;
  --pk-bg: #fff;
  --pk-bg-soft: #f0f3f2;
  --pk-red: #dc2626;
  --pk-red-soft: #fdecee;
  --pk-yellow: #eab308;
  --pk-warn-soft: #fffbea;
  --pk-on-dark: #fff;
  --pk-green-on-dark: #8fe28f;

  /* форма */
  --pk-radius-sm: 6px;
  --pk-radius: 8px;
  --pk-radius-lg: 12px;
  --pk-radius-pill: 999px;

  /* тени */
  --pk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --pk-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --pk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);

  /* отступы (шаг 4px) */
  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 20px;
  --pk-space-6: 24px;
  --pk-space-8: 32px;

  /* шрифт */
  --pk-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pk-fs-sm: 13px;
  --pk-fs: 14px;
  --pk-fs-md: 15px;
  --pk-fs-lg: 16px;

  --pk-ease: .15s ease;
}

/* ---------- иконки ---------- */
.icon { display: inline-block; flex-shrink: 0; vertical-align: -0.125em; }

/* ---------- кнопки ---------- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-2);
  padding: 9px 16px; border: 1px solid transparent; border-radius: var(--pk-radius);
  font-family: inherit; font-size: var(--pk-fs); font-weight: 600; line-height: 1.25;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--pk-ease), border-color var(--pk-ease), color var(--pk-ease), box-shadow var(--pk-ease);
}
.pk-btn:focus-visible { outline: none; box-shadow: 0 0 0 .25rem var(--pk-green-ring); }
.pk-btn:disabled, .pk-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

.pk-btn--primary { background: var(--pk-green); border-color: var(--pk-green); color: #fff; }
.pk-btn--primary:hover { background: var(--pk-green-dark); border-color: var(--pk-green-dark); color: #fff; }

.pk-btn--dark { background: var(--pk-dark); border-color: var(--pk-dark); color: #fff; }
.pk-btn--dark:hover { background: var(--pk-dark-hover); border-color: var(--pk-dark-hover); color: #fff; }

.pk-btn--outline { background: transparent; border-color: var(--pk-line); color: var(--pk-text); }
.pk-btn--outline:hover { background: var(--pk-dark); border-color: var(--pk-dark); color: #fff; }

.pk-btn--icon {
  width: 36px; height: 36px; padding: 0; background: var(--pk-bg);
  border-color: var(--pk-line); color: var(--pk-heading);
}
.pk-btn--icon:hover { background: var(--pk-green); border-color: var(--pk-green); color: #fff; }

.pk-btn--sm { padding: 6px 12px; font-size: var(--pk-fs-sm); }
.pk-btn--sm.pk-btn--icon { width: 30px; height: 30px; padding: 0; }
.pk-btn--lg { padding: 12px 22px; font-size: var(--pk-fs-lg); }
.pk-btn--block { display: flex; width: 100%; }

/* ---------- бейджи ---------- */
.pk-badge {
  display: inline-flex; align-items: center; gap: var(--pk-space-1);
  padding: 2px 8px; border-radius: var(--pk-radius-sm);
  font-size: 12px; font-weight: 600; line-height: 1.5; color: #fff; background: var(--pk-dark);
}
.pk-badge--new { background: var(--pk-green); }
.pk-badge--hit { background: var(--pk-red); }
.pk-badge--sale { background: var(--pk-yellow); color: var(--pk-dark); }

/* ---------- текст статьи ---------- */
.prose-blog h2 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 .75rem; color: var(--pk-heading); }
.prose-blog h3 { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: var(--pk-heading); }
.prose-blog p { margin-bottom: 1rem; line-height: 1.7; color: var(--pk-text); }
.prose-blog ul { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--pk-text); list-style-type: disc; }
.prose-blog ol { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--pk-text); list-style-type: decimal; }
.prose-blog li { margin-bottom: .25rem; }
.prose-blog a { color: var(--pk-green); }
.prose-blog img { max-width: 100%; border-radius: var(--pk-radius); margin: 1rem 0; }
.prose-blog table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; }
.prose-blog th, .prose-blog td { border: 1px solid var(--pk-line); padding: .5rem .75rem; text-align: left; vertical-align: top; color: var(--pk-text); }
.prose-blog thead th, .prose-blog tr:first-child td { background: var(--pk-bg-soft); font-weight: 600; color: var(--pk-heading); }

/* ---------- шапка (issue #152, разметка — blog/partials/header.html) ----------
   Липкая: топ-бар (фиксированной высоты) уезжает вверх за счёт отрицательного
   top, строка меню при прокрутке вниз уходит под основную строку
   (.is-collapsed, header.js) — transform без перестройки страницы, поэтому
   контент не «прыгает». Прозрачная зона свёрнутого меню клики пропускает. */
:root { --pk-topbar-h: 34px; }
/* Сколько шапка закрывает сверху, когда прилипла: от неё считают `top` липкие
   колонки (фильтры каталога, сайдбар блога). header.js уточняет значение по
   фактической высоте (свёрнута/развёрнута строка меню). */
@media (min-width: 1024px) { :root { --pk-sticky-offset: 150px; } }
html { scroll-padding-top: 140px; }
.pk-header {
  position: sticky; top: calc(-1 * var(--pk-topbar-h)); z-index: 40;
  pointer-events: none;
}
.pk-header > * { pointer-events: auto; }
.pk-header button { font-family: inherit; }

.pk-topbar { height: var(--pk-topbar-h); background: var(--pk-bg-soft); font-size: var(--pk-fs-sm); color: var(--pk-text); position: relative; z-index: 3; }
.pk-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-4); height: 100%; }
.pk-topbar__slogan { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-topbar__links { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.pk-topbar__links li + li::before { content: "|"; margin: 0 var(--pk-space-2); color: var(--pk-subtle); }
.pk-topbar__links a { color: inherit; }
.pk-topbar__links a:hover { color: var(--pk-green); }

.pk-header__main { position: relative; z-index: 2; background: var(--pk-bg); border-bottom: 1px solid var(--pk-line); transition: box-shadow var(--pk-ease); }
.pk-header.is-collapsed .pk-header__main { box-shadow: var(--pk-shadow); }
.pk-header__grid {
  display: grid; align-items: center; gap: var(--pk-space-3) var(--pk-space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "burger logo actions" "search search search";
  padding-top: var(--pk-space-3); padding-bottom: var(--pk-space-3);
}
.pk-header__burger { grid-area: burger; display: inline-flex; padding: 6px; margin-left: -6px; border: 0; border-radius: var(--pk-radius); background: none; color: var(--pk-heading); cursor: pointer; }
.pk-header__burger:hover { background: var(--pk-bg-soft); }
.pk-header__logo { grid-area: logo; display: inline-flex; }
.pk-header__logo img { display: block; width: auto; height: 28px; }
.pk-header__actions { grid-area: actions; display: flex; align-items: center; gap: var(--pk-space-1); }
.pk-header__action {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--pk-radius-pill);
  background: none; color: var(--pk-heading); cursor: pointer; transition: background-color var(--pk-ease), color var(--pk-ease);
}
.pk-header__action:hover, .pk-header__action[aria-expanded="true"] { background: var(--pk-bg-soft); color: var(--pk-green); }
.pk-header__burger:focus-visible, .pk-header__action:focus-visible, .pk-menu__link:focus-visible,
.pk-search__submit:focus-visible, .pk-dd__list a:focus-visible, .pk-dd__list button:focus-visible {
  outline: none; box-shadow: 0 0 0 .2rem var(--pk-green-ring);
}
.pk-count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--pk-radius-pill); background: var(--pk-green-dark); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.pk-count[hidden] { display: none; }

/* поиск */
.pk-search { grid-area: search; position: relative; }
.pk-search__input { padding-right: 44px; font-size: var(--pk-fs); }
.pk-search__input::-webkit-search-cancel-button { display: none; }
.pk-search__submit {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 100%; border: 0; border-radius: 0 var(--pk-radius) var(--pk-radius) 0; background: none; color: var(--pk-text); cursor: pointer;
}
.pk-search__submit:hover { color: var(--pk-green); }
.pk-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; max-height: min(70vh, 520px); overflow-y: auto;
  padding: var(--pk-space-1) 0; background: var(--pk-bg); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-lg); box-shadow: var(--pk-shadow-lg);
}
.pk-suggest[hidden] { display: none; }
.pk-suggest__title { padding: 8px 14px 4px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--pk-text); }
.pk-suggest__opt { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: var(--pk-heading); font-size: var(--pk-fs); text-decoration: none; }
.pk-suggest__opt:hover, .pk-suggest__opt[aria-selected="true"] { background: var(--pk-bg-soft); color: var(--pk-green); }
.pk-suggest__opt img, .pk-suggest__ph { width: 36px; height: 36px; flex: none; border-radius: var(--pk-radius-sm); object-fit: contain; background: var(--pk-bg-soft); }
.pk-suggest__ph { display: inline-flex; align-items: center; justify-content: center; color: var(--pk-muted); }
.pk-suggest__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-suggest__meta { margin-left: auto; padding-left: var(--pk-space-2); flex: none; font-size: var(--pk-fs-sm); color: var(--pk-text); white-space: nowrap; }
.pk-suggest__price { margin-left: auto; padding-left: var(--pk-space-2); flex: none; font-weight: 600; white-space: nowrap; }
.pk-suggest__all { justify-content: center; color: var(--pk-green); font-weight: 500; }
.pk-suggest__group + .pk-suggest__group { margin-top: var(--pk-space-1); border-top: 1px solid var(--pk-line); }
.pk-suggest__empty { padding: 10px 14px; color: var(--pk-text); font-size: var(--pk-fs); }

/* строка меню */
.pk-header__nav {
  display: none; position: relative; z-index: 1; background: var(--pk-bg); border-bottom: 1px solid var(--pk-line);
  transition: transform .2s ease, opacity .2s ease;
}
.pk-header.is-collapsed .pk-header__nav { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.pk-header__nav-inner { display: flex; align-items: center; gap: var(--pk-space-6); padding-top: var(--pk-space-2); padding-bottom: var(--pk-space-2); }
.pk-menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1); margin: 0; padding: 0; list-style: none; }
.pk-menu__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: var(--pk-radius);
  background: none; color: var(--pk-heading); font-size: var(--pk-fs-md); font-weight: 500; cursor: pointer; text-decoration: none;
}
.pk-menu__link:hover, .pk-menu__link[aria-expanded="true"], .pk-menu__link[aria-current="page"] { color: var(--pk-green); }

/* выпадающие списки: кнопка «Каталог», пункты меню, профиль */
.pk-dd { position: relative; }
.pk-dd__list { list-style: none; }
.pk-dd__menu .pk-dd__list { margin: 0; padding: 0; }
.pk-dd__menu {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 15rem; max-height: 70vh; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none;
  background: var(--pk-bg); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); box-shadow: var(--pk-shadow-lg);
}
.pk-dd__menu--end { left: auto; right: 0; }
.pk-dd.is-open > .pk-dd__menu { display: block; }
/* мостик через зазор под пунктом: курсор идёт к списку, не закрывая его */
.pk-dd--hover.is-open::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
@media (hover: hover) and (min-width: 1024px) {
  /* без JS меню открываются наведением; с JS (.pk-js) — только через .is-open,
     чтобы Esc и клик мимо закрывали его и под курсором */
  html:not(.pk-js) .pk-dd--hover:hover > .pk-dd__menu { display: block; }
  html:not(.pk-js) .pk-dd--hover:hover::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
}
.pk-dd__list a, .pk-dd__list button {
  display: flex; align-items: center; gap: var(--pk-space-2); width: 100%; padding: 8px 16px; border: 0;
  background: none; color: var(--pk-text); font-size: var(--pk-fs); text-align: left; text-decoration: none; cursor: pointer;
}
.pk-dd__list a:hover, .pk-dd__list button:hover, .pk-dd__list a:focus-visible, .pk-dd__list button:focus-visible { background: var(--pk-bg-soft); color: var(--pk-green); }
.pk-dd__count { margin-left: auto; padding-left: var(--pk-space-3); font-size: 12px; color: var(--pk-text); }
.pk-dd__sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--pk-line); }
.pk-dd__sep a { color: var(--pk-green); font-weight: 500; }
.pk-dd__head { margin: 0; padding: 6px 16px 8px; border-bottom: 1px solid var(--pk-line); color: var(--pk-heading); font-weight: 600; font-size: var(--pk-fs); }

/* мега-меню каталога (#153): панель на всю ширину контейнера строки меню */
.pk-header__nav-inner { position: relative; }
.pk-dd--mega { position: static; }
.pk-dd--mega > .pk-mega {
  left: 1rem; right: 1rem; top: 100%; min-width: 0; max-height: calc(100vh - var(--pk-sticky-offset, 150px) - 16px);
  padding: var(--pk-space-6); border-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "cols" "foot"; gap: var(--pk-space-4) var(--pk-space-8);
}
.pk-dd--mega > .pk-mega--promo { grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "cols promo" "foot foot"; }
.pk-dd--mega.is-open > .pk-mega { display: grid; }
/* li статичен, мостик через нижний отступ строки меню — у самой панели */
.pk-dd--mega.is-open::after { content: none; }
.pk-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--pk-space-2); }
.pk-mega__col { min-width: 0; }
.pk-mega__cols { grid-area: cols; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--pk-space-6); align-content: start; }
.pk-mega__head {
  display: flex; align-items: baseline; gap: var(--pk-space-2); margin-bottom: var(--pk-space-2); padding: 4px 0;
  color: var(--pk-green-dark); font-size: var(--pk-fs-lg); font-weight: 600; text-decoration: none;
}
/* текст зелёным — только тёмный оттенок (контраст AA на белом), яркий — для декора */
.pk-mega__head:hover { text-decoration: underline; }
.pk-mega__list { margin: 0; padding: 0; list-style: none; }
.pk-mega__list a {
  display: flex; align-items: baseline; gap: var(--pk-space-2); padding: 5px 0;
  color: var(--pk-text); font-size: var(--pk-fs); text-decoration: none;
}
.pk-mega__list a:hover, .pk-mega__list a[aria-current="page"] { color: var(--pk-green-dark); }
.pk-mega__count { margin-left: auto; padding-left: var(--pk-space-2); font-size: 12px; font-weight: 400; color: var(--pk-text); }
.pk-mega__head .pk-mega__count { margin-left: 0; }
.pk-mega__list .pk-mega__more { color: var(--pk-green-dark); font-weight: 500; align-items: center; }
.pk-mega__empty { margin: 0; color: var(--pk-text); font-size: var(--pk-fs); }
.pk-mega__promo {
  grid-area: promo; display: flex; flex-direction: column; overflow: hidden; align-self: start;
  border-radius: var(--pk-radius-lg); background: var(--pk-green-soft);
}
.pk-mega__promo-img { display: block; width: 100%; height: 160px; object-fit: cover; }
.pk-mega__promo-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pk-space-2); padding: var(--pk-space-5); }
.pk-mega__eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--pk-green-dark); }
.pk-mega__promo-title { margin: 0; color: var(--pk-heading); font-size: 18px; font-weight: 700; line-height: 1.3; }
.pk-mega__promo-sub { margin: 0; color: var(--pk-text); font-size: var(--pk-fs); }
.pk-mega__promo-links { margin: 0 0 var(--pk-space-1); padding: 0; list-style: none; }
.pk-mega__promo-links a { display: block; padding: 3px 0; color: var(--pk-heading); font-size: var(--pk-fs); text-decoration: none; }
.pk-mega__promo-links a::before { content: "→ "; color: var(--pk-green); }
.pk-mega__promo-links a:hover { color: var(--pk-green-dark); }
.pk-mega__foot { grid-area: foot; padding-top: var(--pk-space-3); border-top: 1px solid var(--pk-line); }
.pk-mega__foot a { display: inline-flex; align-items: center; gap: var(--pk-space-1); color: var(--pk-green-dark); font-weight: 500; font-size: var(--pk-fs); text-decoration: none; }
.pk-mega__list .pk-mega__more:hover, .pk-mega__foot a:hover { text-decoration: underline; }
.pk-mega a:focus-visible { outline: none; border-radius: var(--pk-radius-sm); box-shadow: 0 0 0 .2rem var(--pk-green-ring); }
@media (hover: hover) and (min-width: 1024px) {
  html:not(.pk-js) .pk-dd--mega:hover > .pk-mega { display: grid; }
  html:not(.pk-js) .pk-dd--mega:hover::after { content: none; }
}

/* выезжающие панели (offcanvas, #154): мобильное меню и фильтры каталога.
   Закрытая панель уезжает влево и скрыта (visibility) — фокус в неё не попадёт;
   header.js переключает .is-open, при свайпе панель едет за пальцем (.is-dragging). */
.pk-offcanvas {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pk-bg); box-shadow: var(--pk-shadow-lg); touch-action: pan-y;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.pk-offcanvas.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
.pk-offcanvas.is-dragging { transition: none; }
.pk-offcanvas[hidden] { display: none; }
.pk-offcanvas:focus { outline: none; }

/* мобильное меню */
.pk-mobile { width: min(320px, 86vw); padding: var(--pk-space-4); padding-bottom: calc(var(--pk-space-6) + env(safe-area-inset-bottom)); }
/* затемнение — отдельный слой: тап мимо панели не нажимает то, что под ним */
.pk-mobile-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(0, 30, 43, .45); }
.pk-mobile-backdrop[hidden] { display: none; }
.pk-mobile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pk-space-4); }
.pk-mobile__search { position: relative; margin-bottom: var(--pk-space-4); }
.pk-mobile__catalog { justify-content: flex-start; }
.pk-mobile__grow { flex: 1; text-align: left; }
.pk-mobile__chevron { transition: transform var(--pk-ease); }
.pk-mobile__catalog[aria-expanded="true"] .pk-mobile__chevron { transform: rotate(180deg); }
.pk-mobile__catalog-body { margin-top: var(--pk-space-2); padding-bottom: var(--pk-space-2); border-bottom: 1px solid var(--pk-line); }
.pk-mobile__catalog-body[hidden] { display: none; }
.pk-mobile__catalog + nav, .pk-mobile__catalog-body + nav { margin-top: var(--pk-space-3); }
.pk-mobile__list, .pk-mobile__list ul { margin: 0; padding: 0; list-style: none; }
.pk-mobile__list ul { margin: 2px 0 6px; padding-left: var(--pk-space-6); }
.pk-mobile__list ul[hidden] { display: none; }
.pk-mobile__list a, .pk-mobile__list button {
  display: flex; align-items: center; gap: var(--pk-space-2); width: 100%; padding: 8px 10px; border: 0; border-radius: var(--pk-radius);
  background: none; color: var(--pk-heading); font-size: var(--pk-fs-md); text-align: left; text-decoration: none; cursor: pointer;
}
.pk-mobile__list ul a { color: var(--pk-text); font-size: var(--pk-fs); padding-top: 6px; padding-bottom: 6px; }
.pk-mobile__list a:hover, .pk-mobile__list button:hover, .pk-mobile__list a[aria-current="page"] { background: var(--pk-green-soft); color: var(--pk-green-dark); }
.pk-mobile__list a:focus-visible, .pk-mobile__list button:focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--pk-green-ring); }
.pk-mobile__strong { font-weight: 600; }
.pk-mobile__tree > li > a, .pk-mobile__tree > li > .pk-mobile__row > a { font-weight: 500; }
.pk-mobile__row { display: flex; align-items: center; gap: var(--pk-space-1); }
.pk-mobile__row > a { flex: 1; }
.pk-mobile__list .pk-mobile__toggle { flex: none; width: 40px; justify-content: center; padding: 8px; color: var(--pk-text); }
.pk-mobile__toggle .icon { transition: transform var(--pk-ease); }
.pk-mobile__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.pk-mobile__account { margin-top: var(--pk-space-3); padding-top: var(--pk-space-3); border-top: 1px solid var(--pk-line); }
.pk-mobile__account-head { display: flex; align-items: center; gap: var(--pk-space-2); padding: 4px 10px 8px; color: var(--pk-heading); font-size: var(--pk-fs-md); font-weight: 600; }
.pk-mobile__auth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pk-space-2); }
/* Фон не прокручивается под открытой панелью (top задаёт header.js). */
body.pk-no-scroll { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* нижняя панель на телефоне (#154): Главная · Каталог · Блог · Избранное · Профиль */
.pk-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding-bottom: env(safe-area-inset-bottom); background: var(--pk-bg);
  border-top: 1px solid var(--pk-line); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
.pk-tabbar__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pk-tabbar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 56px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  color: var(--pk-text); font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.2; text-decoration: none;
}
.pk-tabbar__item span:not(.pk-count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-tabbar__item:hover, .pk-tabbar__item[aria-current], .pk-tabbar__item[aria-expanded="true"] { color: var(--pk-green-dark); }
.pk-tabbar__item[aria-current]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; border-radius: 0 0 2px 2px; background: var(--pk-green); }
.pk-tabbar__item:focus-visible { outline: none; box-shadow: inset 0 0 0 .2rem var(--pk-green-ring); }
.pk-tabbar__item .pk-count { top: 4px; right: calc(50% - 22px); }
/* место под панелью, чтобы она не закрывала низ страницы */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  .pk-tabbar { display: none; }
}
@media print {
  .pk-tabbar { display: none; }
}

@media (min-width: 1024px) {
  .pk-header__grid {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search actions";
    gap: var(--pk-space-8); padding-top: var(--pk-space-5); padding-bottom: var(--pk-space-5);
  }
  .pk-header__burger { display: none; }
  .pk-header__logo img { height: 31px; }
  .pk-search { width: 100%; max-width: 640px; }
  .pk-header__nav { display: block; }
  .pk-mobile, .pk-mobile-backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-header__nav, .pk-header__main, .pk-offcanvas, .pk-offcanvas.is-open { transition: none; }
}

/* ---------- список брендов (/brands) ---------- */
.pk-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; }
.pk-brand-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--pk-space-2); height: 100%; padding: var(--pk-space-5) var(--pk-space-3);
  border: 1px solid var(--pk-line); border-radius: var(--pk-radius-lg); background: var(--pk-bg); text-align: center; text-decoration: none;
  transition: border-color var(--pk-ease), box-shadow var(--pk-ease);
}
.pk-brand-card:hover, .pk-brand-card:focus-visible { border-color: var(--pk-green); box-shadow: var(--pk-shadow); outline: none; }
.pk-brand-card__logo {
  display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden;
  border-radius: var(--pk-radius); background: var(--pk-bg-soft); color: var(--pk-green); font-size: 28px; font-weight: 700;
}
.pk-brand-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.pk-brand-card__name { color: var(--pk-heading); font-weight: 600; }
.pk-brand-card__count { color: var(--pk-text); font-size: var(--pk-fs-sm); }

/* ---------- поля ввода ---------- */
.pk-input {
  display: block; width: 100%; padding: 8px 12px;
  border: 1px solid var(--pk-line); border-radius: var(--pk-radius); background: var(--pk-bg);
  color: var(--pk-dark-hover); font-family: inherit; font-size: var(--pk-fs-lg); line-height: 1.5;
  transition: border-color var(--pk-ease), box-shadow var(--pk-ease);
}
.pk-input::placeholder { color: var(--pk-muted); }
.pk-input:focus { outline: none; border-color: var(--pk-green); box-shadow: 0 0 0 .25rem var(--pk-green-ring); }
.pk-input--sm { font-size: var(--pk-fs); }

/* ---------- утилиты, которых нет в собранном theme.min.css ----------
   theme.min.css собран только из классов исходного шаблона, поэтому часть
   Tailwind-классов в наших шаблонах молча не работала (проверка — тест
   tests/frontend_css.rs). Базовые утилиты обёрнуты в :where() (нулевая
   специфичность), чтобы адаптивные варианты из темы (md:…, lg:…) их
   перебивали независимо от порядка файлов. */
:where(.items-stretch) { align-items: stretch; }
:where(.shrink-0) { flex-shrink: 0; }
:where(.gap-y-2) { row-gap: .5rem; }
:where(.h-48) { height: 12rem; }
:where(.max-w-lg) { max-width: 32rem; }
:where(.max-w-2xl) { max-width: 42rem; }
:where(.max-w-3xl) { max-width: 48rem; }
:where(.ml-6) { margin-left: 1.5rem; }
:where(.mt-10) { margin-top: 2.5rem; }
:where(.mt-12) { margin-top: 3rem; }
:where(.my-12) { margin-top: 3rem; margin-bottom: 3rem; }
:where(.my-16) { margin-top: 4rem; margin-bottom: 4rem; }
:where(.pt-6) { padding-top: 1.5rem; }
:where(.pb-16) { padding-bottom: 4rem; }
:where(.py-16) { padding-top: 4rem; padding-bottom: 4rem; }
:where(.py-2\.5) { padding-top: .625rem; padding-bottom: .625rem; }
:where(.border-l-2) { border-left-width: 2px; }
:where(.border-gray-100) { border-color: var(--pk-bg-soft); }
:where(.border-white\/20) { border-color: rgb(255 255 255 / .2); }
:where(.bg-white\/10) { background-color: rgb(255 255 255 / .1); }
:where(.backdrop-blur) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:where(.text-xs) { font-size: .75rem; line-height: 1rem; }
:where(.tracking-wide) { letter-spacing: .025em; }
:where(.whitespace-pre-line) { white-space: pre-line; }
:where(.text-primary) { color: var(--pk-green); }
:where(.text-green-50) { color: #ecfdeb; }
:where(.text-green-100) { color: #cefdca; }
:where(.text-green-700) { color: var(--pk-green-dark); }
:where(.text-red-700) { color: #b91c1c; }
:where(.duration-300) { transition-duration: .3s; }
:where(.line-clamp-3) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
:where(.bg-gradient-to-r) { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
:where(.bg-gradient-to-br) { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
:where(.from-primary) { --tw-gradient-from: var(--pk-green); --tw-gradient-to: rgb(10 173 10 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
:where(.from-green-50) { --tw-gradient-from: #ecfdeb; --tw-gradient-to: rgb(236 253 235 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
:where(.to-green-100) { --tw-gradient-to: #cefdca; }
:where(.to-green-700) { --tw-gradient-to: var(--pk-green-dark); }

.hover\:underline:hover { text-decoration: underline; }
.hover\:text-primary:hover { color: var(--pk-green); }
.hover\:text-primary-700:hover { color: var(--pk-green-dark); }
.hover\:text-gray-600:hover { color: var(--pk-text); }
.hover\:text-red-700:hover { color: #b91c1c; }
.hover\:bg-gray-50:hover { background-color: #f7f9f8; }
.hover\:bg-green-50:hover { background-color: var(--pk-green-soft); }
.hover\:bg-green-100:hover { background-color: #cefdca; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

@media (min-width: 768px) {
  .md\:h-full { height: 100%; }
  .md\:min-h-\[220px\] { min-height: 220px; }
  .md\:p-12 { padding: 3rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .lg\:grid { display: grid; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:p-8 { padding: 2rem; }
  .lg\:sticky { position: sticky; }
  .pk-sticky-side { top: calc(var(--pk-sticky-offset, 150px) + 16px); }
}

/* ---------- избранное и сравнение (#159) ---------- */
/* Без JS кнопкам нечего делать — списки живут в localStorage/через fetch. */
html:not(.pk-js) [data-pk-save] { display: none; }
.pk-header__action[aria-current] { color: var(--pk-green-dark); }
.pk-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--pk-radius); background: var(--pk-dark); color: var(--pk-on-dark);
  font-size: var(--pk-fs); line-height: 1.4; box-shadow: var(--pk-shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity var(--pk-ease), transform var(--pk-ease), visibility var(--pk-ease);
}
.pk-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.pk-toast a { margin-left: 8px; color: var(--pk-green-on-dark); font-weight: 600; text-decoration: underline; }
@media (max-width: 767.98px) { .pk-toast { bottom: calc(68px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .pk-toast { transition: none; } }

/* ---------- блог: лента, карточки, статья (issue #160) ----------
   Разметка — blog/partials/post_card_grid.html, post_featured.html, blog/show.html. */
.bl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; align-items: stretch; }
@media (min-width: 768px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bl-card { display: flex; flex-direction: column; height: 100%; }
.bl-card__media, .bl-featured__media, .bl-cover { display: block; overflow: hidden; border-radius: var(--pk-radius); background: var(--pk-bg-soft); }
.bl-card__media { aspect-ratio: 16 / 9; flex-shrink: 0; }
.bl-card__media img, .bl-featured__media img, .bl-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.bl-card:hover .bl-card__media img, .bl-featured:hover .bl-featured__media img { transform: scale(1.05); }
.bl-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding-top: 16px; }
.bl-card__cat { align-self: flex-start; color: var(--pk-green); font-size: var(--pk-fs-sm); font-weight: 500; }
.bl-card__cat:hover { color: var(--pk-green-dark); }
.bl-card__title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.bl-card__title a, .bl-featured__title a { color: var(--pk-heading); }
.bl-card__title a:hover, .bl-featured__title a:hover { color: var(--pk-green); }
.bl-card__excerpt { margin: 0; color: var(--pk-text); font-size: var(--pk-fs); line-height: 1.6; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.bl-card__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; color: #6b7280; font-size: var(--pk-fs-sm); }
.bl-card__meta strong { color: var(--pk-heading); font-weight: 700; }

.bl-featured { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 40px; }
.bl-featured__media { aspect-ratio: 16 / 9; }
.bl-featured__body { display: flex; flex-direction: column; gap: 16px; }
.bl-featured__title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.bl-featured__excerpt { margin: 0; color: #6b7280; line-height: 1.7; }
@media (min-width: 1024px) {
  .bl-featured { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; }
  .bl-featured__title { font-size: 1.875rem; }
}

.bl-article__cover { margin-bottom: 24px; }
.bl-cover { aspect-ratio: 21 / 9; }
.bl-cover img { transition: none; }
@media (max-width: 767.98px) { .bl-cover { aspect-ratio: 16 / 9; } }
.bl-article__cat { display: inline-block; margin-bottom: 8px; color: var(--pk-green); font-weight: 500; }
.bl-article__title { margin: 0 0 16px; font-size: 1.75rem; font-weight: 700; line-height: 1.25; color: var(--pk-heading); }
@media (min-width: 768px) { .bl-article__title { font-size: 2.25rem; } }
.bl-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--pk-line); color: #6b7280; font-size: var(--pk-fs-sm); }
.bl-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.bl-meta strong { color: var(--pk-heading); }
.bl-toc { margin-bottom: 32px; padding: 16px 20px; border: 1px solid var(--pk-line); border-radius: var(--pk-radius); background: var(--pk-bg-soft); }
.bl-toc__title { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--pk-heading); }
.bl-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: bl-toc; }
.bl-toc li { margin: 4px 0; counter-increment: bl-toc; }
.bl-toc li::before { content: counter(bl-toc) "."; margin-right: 6px; color: #6b7280; }
.bl-toc li.is-sub { margin-left: 20px; }
.bl-toc a { color: var(--pk-text); }
.bl-toc a:hover { color: var(--pk-green); text-decoration: underline; }
.prose-blog h2, .prose-blog h3 { scroll-margin-top: calc(var(--pk-sticky-offset, 150px) + 16px); }
.bl-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--pk-line); }
.bl-section__title { margin: 0 0 20px; font-size: 1.375rem; font-weight: 700; color: var(--pk-heading); }
.bl-section__more { margin-top: 12px; font-size: var(--pk-fs-sm); }
.bl-section__more a { color: var(--pk-green); }
.bl-section__more a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .bl-card__media img, .bl-featured__media img { transition: none; } .bl-card:hover .bl-card__media img, .bl-featured:hover .bl-featured__media img { transform: none; } }

/* ---------- подвал (#161) ---------- */
.pk-footer { margin-top: 40px; padding: 48px 0 24px; background: var(--pk-bg-soft); color: var(--pk-text); font-size: var(--pk-fs); }
.pk-footer a { color: var(--pk-text); text-decoration: none; }
.pk-footer a:hover, .pk-footer a:focus-visible { color: var(--pk-green); }
.pk-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.pk-footer__col--about { grid-column: 1 / -1; }
.pk-footer__title { margin: 0 0 16px; color: var(--pk-heading); font-size: var(--pk-fs-lg); font-weight: 600; }
.pk-footer__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pk-footer__text { margin: 12px 0 0; color: var(--pk-text); font-size: var(--pk-fs-sm); line-height: 1.5; }
.pk-footer__social { display: inline-flex; align-items: center; gap: 8px; }
.pk-footer__requisites { font-size: var(--pk-fs-sm); line-height: 1.4; }
.pk-footer__requisites span { color: var(--pk-heading); font-weight: 500; }
.pk-footer__digest { margin-top: 16px; max-width: 320px; }
.pk-footer__digest label { display: block; margin: 0 0 6px; }
.pk-footer__digest-row { display: flex; gap: 8px; }
.pk-footer__digest-row .pk-input { flex: 1; min-width: 0; }
.pk-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--pk-line);
}
.pk-footer__copy { font-size: var(--pk-fs-sm); }
.pk-footer__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pk-footer__apps .pk-footer__text { margin: 0; }
.pk-store {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px;
  border-radius: var(--pk-radius); background: var(--pk-dark); color: var(--pk-on-dark) !important;
  transition: background-color var(--pk-ease);
}
.pk-store:hover, .pk-store:focus-visible { background: var(--pk-dark-hover); color: var(--pk-on-dark) !important; }
.pk-store:focus-visible { outline: none; box-shadow: 0 0 0 .25rem var(--pk-green-ring); }
.pk-store__label { display: flex; flex-direction: column; line-height: 1.15; }
.pk-store__label small { font-size: 11px; opacity: .8; }
.pk-store__label strong { font-size: var(--pk-fs); font-weight: 600; }
@media (min-width: 768px) { .pk-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pk-footer__grid { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
  .pk-footer__col--about { grid-column: auto; }
}
@media (max-width: 767.98px) { .pk-footer { padding-bottom: calc(24px + 68px + env(safe-area-inset-bottom)); } }

/* ---------- вход, регистрация, восстановление пароля (#161) ---------- */
.pk-auth { display: grid; grid-template-columns: minmax(0, 1fr); margin: 32px auto; max-width: 1040px; overflow: hidden;
  border: 1px solid var(--pk-line); border-radius: var(--pk-radius-lg); background: var(--pk-bg); box-shadow: var(--pk-shadow-sm); }
.pk-auth__aside { display: none; position: relative; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 40px;
  background: linear-gradient(160deg, var(--pk-green) 0%, var(--pk-green-dark) 100%); color: var(--pk-on-dark); }
.pk-auth__aside-icon { position: absolute; top: 32px; right: 32px; opacity: .25; }
.pk-auth__aside h2 { margin: 0; color: var(--pk-on-dark); font-size: 1.75rem; font-weight: 700; line-height: 1.25; }
.pk-auth__aside p { margin: 0; color: var(--pk-on-dark); opacity: .9; }
.pk-auth__main { padding: 32px 24px; }
.pk-auth__title { margin: 0 0 8px; color: var(--pk-heading); font-size: 1.75rem; font-weight: 700; }
.pk-auth__lead { margin: 0 0 24px; color: var(--pk-text); }
.pk-auth__form { display: flex; flex-direction: column; gap: 16px; }
.pk-auth__field label { display: block; margin-bottom: 6px; color: var(--pk-heading); font-size: var(--pk-fs); font-weight: 500; }
.pk-auth__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--pk-fs); }
.pk-auth a:not(.pk-btn) { color: var(--pk-green); }
.pk-auth a:not(.pk-btn):hover { text-decoration: underline; }
.pk-auth__alt { margin: 20px 0 0; color: var(--pk-text); font-size: var(--pk-fs); text-align: center; }
.pk-auth__alert { margin-bottom: 16px; padding: 12px 16px; border-radius: var(--pk-radius); font-size: var(--pk-fs); }
.pk-auth__alert--error { border: 1px solid #f5c2c7; background: var(--pk-red-soft); color: #b42318; }
.pk-auth__alert--ok { border: 1px solid #b7e4b7; background: var(--pk-green-soft); color: var(--pk-green-dark); }
.pk-auth__oauth { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.pk-auth__divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--pk-muted); font-size: var(--pk-fs-sm); }
.pk-auth__divider::before, .pk-auth__divider::after { content: ""; flex: 1; border-top: 1px solid var(--pk-line); }
@media (min-width: 768px) {
  .pk-auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pk-auth__aside { display: flex; }
  .pk-auth__main { padding: 48px 48px; }
}
.pk-auth__hint { display: block; margin-top: 6px; color: var(--pk-muted); font-size: var(--pk-fs-sm); line-height: 1.4; }
.pk-auth__hint a { text-decoration: underline; }
.pk-footer__col { min-width: 0; }
.pk-footer__logo { display: inline-block; }
.pk-footer__logo img { display: block; height: auto; }

/* Контейнер виджета Яндекс SmartCaptcha (blog/captcha.html) */
.smart-captcha { min-height: 100px; }