/* =========================================================
   RETRO PIXEL THEME (Grav + Quark)
   Черный фон, белый текст, заголовки Press Start 2P,
   основной текст Fira Code.

   Требования:
   - Шапка: одна сплошная белая линия снизу на всю ширину
   - Внутри шапки: логотип слева, меню справа, контейнер 1200px
   - Акцент: зеленый (Matrix) только для активной страницы и бургера
   - Логотип и крестик в мобильном меню - белые
   - Hero: без любой разделительной линии снизу
   ========================================================= */

/* ---------- 1) Переменные ---------- */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:#bdbdbd;
  --dim:#333;

  --matrix:#00ff00;

  --font-header:"Press Start 2P", monospace;
  --font-body:"Fira Code", monospace;
}

*{ box-sizing:border-box; }

html, body{
  background:var(--bg) !important;
  color:var(--fg) !important;
  font-family:var(--font-body) !important;
  font-size:16px;
  line-height:1.7;
}

/* ---------- 2) Типографика ---------- */
p{ margin:0 0 18px; color:var(--fg); }
strong{ color:var(--fg); font-weight:700; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-header) !important;
  color:var(--fg) !important;
  text-transform:uppercase;
  letter-spacing:-1px;
  line-height:1.25;
  margin:0 0 18px;
}

/* ---------- 3) Ссылки ---------- */
a{
  color:var(--fg) !important;
  text-decoration:none;
  border-bottom:1px solid var(--fg);
}
a:hover{
  color:var(--muted) !important;
  border-bottom-color:var(--muted);
}

/* ---------- 4) Разделители ---------- */
hr{
  border:0;
  border-top:1px dashed var(--dim);
  margin:0;
}

/* ---------- 5) Контейнер ---------- */
.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

/* ---------- 6) Фон везде черный ---------- */
#body-wrapper,
#header,
#footer,
.footer,
.content-wrapper,
.modular .modular-row,
.modular-row,
.section{
  background:var(--bg) !important;
  color:var(--fg) !important;
}

/* =========================================================
   7) ШАПКА
   - линия на всю ширину
   - контент внутри в контейнере 1200px
   - логотип слева, меню справа
   ========================================================= */

#header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--bg) !important;
  border-bottom:2px solid var(--fg) !important;
}

/* снимаем ограничения Quark на внутренний контейнер header */
#header > .container,
#header .container,
#header .container.grid-lg{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* navbar как контейнер */
#header .navbar{
  width:90% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:12px 0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* логотип слева, всегда белый */
#header .navbar .navbar-brand,
#header .navbar .navbar-brand *{
  display:block !important;
  font-family:var(--font-header) !important;
  font-size:12px;
  color:var(--fg) !important;
  border-bottom:0 !important;
  fill:var(--fg) !important;
  stroke:var(--fg) !important;
}

/* меню справа */
#header .navbar .navbar-section{
  display:flex !important;
  justify-content:flex-end !important;
  gap:18px;
}

/* ссылки меню без нижней линии */
#header .navbar .navbar-section a{
  font-family:var(--font-header) !important;
  font-size:12px;
  color:var(--fg) !important;
  border-bottom:0 !important;
}

/* hover в шапке делаем зеленым */
#header .navbar .navbar-section a:hover{
  color:var(--matrix) !important;
  text-decoration:none;
}

/* активная страница зеленая */
#header .navbar .navbar-section a.active,
#header .navbar .navbar-section a.active:visited,
#header li.active > a{
  color:var(--matrix) !important;
}

/* =========================================================
   8) Бургер и мобильное меню
   - бургер зеленый
   - крестик белый
   - активный пункт зеленый
   - маркеры (точки) слева зеленые не делаем
   ========================================================= */

/* бургер: красим только кнопку/иконку переключателя меню */
#header .menu-toggle,
#header .nav-toggle,
#header .mobile-menu,
#header .navbar-toggle{
  color:var(--matrix) !important;
}

/* бургер svg (только у toggle-кнопки) */
#header .menu-toggle svg,
#header .menu-toggle svg *,
#header .nav-toggle svg,
#header .nav-toggle svg *{
  fill:var(--matrix) !important;
  stroke:var(--matrix) !important;
}

/* мобильный оверлей: активный пункт зеленый, остальное белое */
.mobile-container a{
  color:var(--fg) !important;
  border-bottom:0 !important;
}
.mobile-container a:hover{
  color:var(--matrix) !important;
}
.mobile-container a.active,
.mobile-container a.active:visited{
  color:var(--matrix) !important;
}

/* крестик закрытия: белый (если это кнопка/иконка в оверлее) */
.mobile-container .close,
.mobile-container .close *,
.mobile-container .modal-close,
.mobile-container .modal-close *{
  color:var(--fg) !important;
  fill:var(--fg) !important;
  stroke:var(--fg) !important;
}

/* убираем зеленую окраску маркеров/пуль в мобильном меню */
.mobile-container li::marker{
  color:var(--fg) !important;
}
.mobile-container li::before{
  color:var(--fg) !important;
  background:transparent !important;
}

/* =========================================================
   9) Кнопки и формы
   ========================================================= */

.btn, button, .button, input, select, textarea{
  font-family:var(--font-header) !important;
  background:transparent !important;
  color:var(--fg) !important;
  border:2px solid var(--fg) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:52px !important;
  padding:0 34px !important;
  font-size:12px !important;
  line-height:1 !important;
  text-decoration:none !important;
  border-bottom:2px solid var(--fg) !important;
}

.btn:hover, button:hover{
  background:var(--fg) !important;
  color:var(--bg) !important;
}

.btn:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:2px dotted var(--fg) !important;
  outline-offset:2px;
}

/* =========================================================
   10) UI блоки
   ========================================================= */

.card, .panel, .menu, .dropdown, .pagination, .toast, .empty{
  background:var(--bg) !important;
  color:var(--fg) !important;
  border:1px solid var(--dim) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.notices,
.notices p,
.notices .warning,
.notices .info,
.notices .note,
.notices .tip,
.notices .error{
  background:var(--bg) !important;
  color:var(--fg) !important;
  border:1px solid var(--dim) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* =========================================================
   11) Код и таблицы
   ========================================================= */

pre, code, kbd, samp{
  background:#050505 !important;
  color:var(--fg) !important;
  border:1px solid var(--dim) !important;
  border-radius:0 !important;
}

table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg) !important;
}
th, td{
  border:1px solid var(--dim) !important;
  padding:10px 12px;
  color:var(--fg) !important;
}

/* ---------- 12) Pixel rendering ---------- */
.pixel-img, img{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* =========================================================
   13) HERO
   - без линии снизу
   ========================================================= */

.retro-hero{
  padding:120px 0 70px;
  border-bottom:0 !important;
}

.retro-hero__wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:70px;
  text-align:left !important;
}

.retro-hero__left{
  flex:1;
  max-width:620px;
  text-align:left !important;
}

.retro-hero__h1{
  font-size:44px;
  line-height:1.22;
  margin:0 0 22px;
  text-align:left !important;
}

.retro-hero__sub{
  margin:0 0 28px;
  opacity:0.95;
  font-family:var(--font-body) !important;
  font-size:16px;
  line-height:1.7;
  text-align:left !important;
}

.retro-hero__actions{
  display:flex;
  gap:18px;
  flex-wrap:nowrap;
  align-items:center;
}

.retro-hero__btn{
  height:52px !important;
  padding:0 34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;

  border:2px solid var(--fg) !important;
  border-bottom:2px solid var(--fg) !important;
  text-decoration:none !important;
}

.retro-hero__right{
  flex:1;
  display:flex;
  justify-content:flex-end;
}

.retro-hero__img{
  max-width:560px;
  width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   14) Блоки следующих секций
   ========================================================= */

.retro-section{
  padding:50px 0;
  border-bottom:1px dashed var(--dim);
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

.tech-stack{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  font-weight:700;
}
.tech-stack li{ margin:0 0 8px; }

.link-item{
  display:block;
  padding:14px 0;
  border-bottom:1px solid var(--dim);
}
.link-item:hover{
  padding-left:10px;
  border-bottom-color:var(--fg);
}

/* =========================================================
   15) Футер
   ========================================================= */

footer, #footer{
  border-top:1px solid var(--dim);
}
footer p, #footer p{
  opacity:0.7;
  font-size:14px;
}

/* =========================================================
   16) Мобилка
   ========================================================= */

@media (max-width: 900px){
  #header .navbar{
    padding:10px 0 !important;
  }

  .retro-hero{
    padding:120px 0 50px;
  }

  .retro-hero__wrap{
    flex-direction:column;
    gap:36px;
    text-align:left !important;
  }

  .retro-hero__left,
  .retro-hero__h1,
  .retro-hero__sub{
    text-align:left !important;
  }

  .retro-hero__right{
    justify-content:left;
  }

  .retro-hero__h1{
    font-size:30px;
  }

  .retro-hero__actions{
    flex-wrap:wrap;
  }

  .retro-hero__btn,
  .btn{
    width:100%;
  }

  .grid-2, .grid-3{
    grid-template-columns:1fr;
    gap:40px;
  }
}
/* Quark/Spectre: фиксируем порядок блоков, ничего не скрываем */
#header .navbar{
  width:80% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:12px 0 !important;

  display:flex !important;
  align-items:center !important;
}

/* лого всегда первый слева */
#header .navbar .navbar-center{
  order:0 !important;
  margin-right:auto !important;
  justify-content:flex-start !important;
}

/* меню всегда справа */
#header .navbar .navbar-section{
  order:1 !important;
  margin-left:auto !important;
  justify-content:flex-end !important;
}

/* на всякий: если в шаблоне бренд не в navbar-center */
#header .navbar .navbar-brand{
  margin-right:auto !important;
  border-bottom:0 !important;
}  
.site-brand{ border-bottom:0 !important; }

.site-logo{
height:84px;
width:auto;
display:block;
image-rendering:pixelated;
image-rendering:crisp-edges;
}
.site-footer{
padding:40px 0 26px;
border-top:1px solid var(--dim);
}

.site-footer__inner{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px;
}

.site-footer__brand{
border-bottom:0 !important;
}

.site-footer__title{
font-family:var(--font-header) !important;
font-size:12px;
margin:0 0 14px;
}

.site-footer__list{
list-style:none;
margin:0;
padding:0;
}

.site-footer__list a{
border-bottom:0 !important;
display:inline-block;
padding:6px 0;
}

.site-footer__list a:hover{
color:var(--matrix) !important;
}

.site-footer__links{
display:flex;
flex-direction:column;
gap:10px;
}

.site-footer__link{
border-bottom:0 !important;
}

.site-footer__link:hover{
color:var(--matrix) !important;
}

.site-footer__bottom{
margin-top:26px;
padding-top:18px;
border-top:1px dashed var(--dim);
opacity:0.8;
font-size:14px;
}

@media (max-width: 900px){
.site-footer__inner{
  flex-direction:column;
  gap:22px;
}
}
/* футер: никаких подчеркиваний вообще */
.site-footer a,
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:visited{
border-bottom:0 !important;
text-decoration:none !important;
}
.about-grid{
display:grid;
grid-template-columns: 1.2fr 0.8fr;
gap:60px;
align-items:start;
}

.about-text{
max-width:760px;
}

.about-box{
border:1px solid var(--dim);
padding:22px;
}

.about-box__title{
font-family:var(--font-header) !important;
font-size:12px;
margin:0 0 14px;
}

.about-box__list{
list-style:none;
margin:0 0 18px;
padding:0;
font-weight:700;
}

.about-box__list li{
margin:0 0 10px;
}

.about-cta{
width:100%;
}

@media (max-width: 900px){
.about-grid{ grid-template-columns:1fr; gap:28px; }
}
.cat-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
}

.cat-card{
border:1px solid var(--dim);
padding:18px;
display:flex;
gap:16px;
align-items:flex-start;
border-bottom:0 !important;
text-decoration:none !important;
}

.cat-card:hover{
border-color:var(--fg);
}

.cat-icon{
width:40px;
height:40px;
flex:0 0 40px;
}

.cat-title{
font-family:var(--font-header) !important;
font-size:12px;
margin:0 0 10px;
}

.cat-desc{
font-family:var(--font-body) !important;
opacity:0.9;
line-height:1.6;
margin:0 0 10px;
}

.cat-more{
font-family:var(--font-body) !important;
color:var(--muted);
}

.cat-card:hover .cat-more{
color:var(--matrix);
}

@media (max-width: 900px){
.cat-grid{ grid-template-columns:1fr; }
}
/* категории: никаких подчеркиваний */
.cat-card,
.cat-card:hover,
.cat-card:focus,
.cat-card:visited,
.cat-card *{
text-decoration:none !important;
}

.cat-card,


/* зеленый акцент при наведении */
.cat-card:hover .cat-title,
.cat-card:hover .cat-more{
color:var(--matrix) !important;
}

/* описание оставляем белым */
.cat-card .cat-desc{
color:var(--fg) !important;
opacity:0.9;
}
/* 1) КАРТОЧКИ: рамка со всех сторон (включая низ) */
.cat-card{
border:2px solid var(--dim) !important;
border-bottom:2px solid var(--dim) !important;
}

.cat-card:hover{
border-color:var(--fg) !important;
border-bottom-color:var(--fg) !important;
}

/* важно: не убиваем border-bottom у карточки */
.cat-card,
.cat-card:hover{
border-bottom-style:solid !important;
}

/* 2) УБИРАЕМ пунктирную линию у секции категорий */
.categories-section{
border-bottom:0 !important;
}
/* категории: не даем глобальным a:hover трогать границы карточки */
.cat-card,
.cat-card:hover{
border-bottom:2px solid var(--dim) !important;
border:2px solid var(--dim) !important;
text-decoration:none !important;
}

/* hover: рамка белая и не исчезает */
.cat-card:hover{
border-color:var(--fg) !important;
border-bottom-color:var(--fg) !important;
}

/* убираем нижнюю линию-ссылку (это не рамка) */
.cat-card{
border-bottom:2px solid var(--dim) !important;
}
.cat-card:hover{
border-bottom:2px solid var(--fg) !important;
}

/* CATEGORIES: чисто и без прыжков */
.categories-section{ border-bottom:0 !important; }

.cat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.cat-card{
  /* рамка всегда 2px, чтобы не было layout shift */
  border:2px solid var(--dim);
  padding:18px;

  display:flex;
  gap:16px;
  align-items:flex-start;

  /* это ссылка, убираем подчеркивание, но НЕ трогаем border-bottom */
  text-decoration:none !important;
  border-bottom:2px solid var(--dim) !important; /* перебивает глобальный a{border-bottom:1px...} */
}

.cat-card:hover{
  border-color:var(--fg) !important;
  border-bottom-color:var(--fg) !important;
}

.cat-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
}

.cat-title{
  font-family:var(--font-header) !important;
  font-size:12px;
  margin:0 0 10px;
}

.cat-desc{
  font-family:var(--font-body) !important;
  color:var(--fg) !important;
  opacity:0.9;
  line-height:1.6;
  margin:0 0 10px;
}

.cat-more{
  font-family:var(--font-body) !important;
  color:var(--muted);
}

.cat-card:hover .cat-title,
.cat-card:hover .cat-more{
  color:var(--matrix) !important;
}

@media (max-width: 900px){
  .cat-grid{ grid-template-columns:1fr; }
}
/* =========================================================
   17) КАТАЛОГ НЕЙРОСЕТЕЙ (AI Catalog)
   Интеграция с существующим стилем
   ========================================================= */

/* Сетка такая же, как у категорий (3 колонки) */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

@media (max-width: 900px){
  .ai-grid { grid-template-columns: 1fr; }
}

/* Карточка продукта */
.ai-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  
  /* РАМКИ: Строго как в твоем коде */
  border: 2px solid var(--dim) !important;
  border-bottom: 2px solid var(--dim) !important; 
  
  text-decoration: none !important;
  position: relative;
  transition: none; /* Убираем плавность для жесткости */
}

/* Hover эффект */
.ai-card:hover {
  border-color: var(--fg) !important;
  border-bottom-color: var(--fg) !important;
  transform: translate(-2px, -2px); /* Легкий сдвиг */
  box-shadow: 4px 4px 0 var(--matrix); /* Тень "Матрица" */
}

/* Картинка */
.ai-card__image-wrap {
  width: 100%;
  border-bottom: 2px solid var(--dim);
  position: relative;
  overflow: hidden;
}

.ai-card:hover .ai-card__image-wrap {
  border-bottom-color: var(--fg);
}

.ai-card__image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%); /* ЧБ по умолчанию */
}

.ai-card:hover .ai-card__image-wrap img {
  filter: grayscale(0%); /* Цвет при наведении */
}

/* Бейджик рейтинга */
.ai-card__rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bg);
  border: 1px solid var(--matrix);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  z-index: 2;
}

/* Тело карточки */
.ai-card__body {
  padding: 18px;
  flex-grow: 1; /* Чтобы карточки тянулись одинаково */
}

.ai-card__title {
  font-family: var(--font-header) !important;
  font-size: 14px;
  color: var(--fg) !important;
  margin: 0 0 12px;
  line-height: 1.4;
}

.ai-card:hover .ai-card__title {
  color: var(--matrix) !important;
}

/* Теги внутри карточки */
.ai-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-tag {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--muted);
  border: 0px solid var(--dim);
  padding: 2px 6px;
  text-transform: uppercase;
}

/* SEO Блок внизу */
.seo-text-box {
  margin-top: 50px;
  padding: 30px 0; /* Убрал отступы по бокам, раз рамки нет */
  border: none !important; /* Убил рамку */
  opacity: 0.8;
}
/* --- 1. Центрируем заголовок в блоке категорий --- */
.catalog-categories-wrapper h1,
.catalog-categories-wrapper h2,
.catalog-categories-wrapper .modular-title {
    text-align: center !important;
    width: 100%;
    display: block;
}

/* --- 2. Убираем пунктирную рамку у SEO текста --- */
.seo-text-box {
    margin-top: 50px;
    padding: 20px 0;
    border: none !important; /* УБИРАЕМ РАМКУ */
    opacity: 0.8;
}

/* На всякий случай, если категории прижались влево */
.catalog-categories-wrapper .modular-row {
    justify-content: center;
}
/* ХЛЕБНЫЕ КРОШКИ: Убираем подчеркивание */
.breadcrumbs-pixel a,
.breadcrumbs-pixel a:hover,
.breadcrumbs-pixel a:visited {
    border-bottom: none !important; /* Убираем линию снизу */
    text-decoration: none !important; /* Убираем стандартное подчеркивание */
}

/* При наведении просто красим текст в зеленый */
.breadcrumbs-pixel a:hover {
    color: var(--matrix) !important;
    border: none !important;
}
/* =========================================================
   18) СТРАНИЦА НЕЙРОСЕТИ (ITEM PAGE)
   ========================================================= */

   .ai-hero {
    padding: 60px 0;
    border-bottom: 2px solid var(--dim);
}

.ai-hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Текста больше, логотип меньше */
    gap: 60px;
    align-items: start;
}

/* --- Заголовки --- */
.ai-hero__title {
    font-size: 36px;
    margin-bottom: 10px;
    color: var(--matrix) !important; /* Зеленый заголовок */
}

.ai-hero__subtitle {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 30px;
    font-family: var(--font-body);
}

/* --- Рейтинг --- */
.ai-rating-block {
    font-family: var(--font-header);
    margin-bottom: 30px;
    font-size: 20px;
}
.stars { color: #FFFF00; margin-right: 15px; } /* Желтые звезды */
.score-num { color: var(--fg); font-size: 14px; }

/* --- Таблица характеристик --- */
.ai-specs-table {
    margin-bottom: 40px;
    border: 1px solid var(--dim);
    padding: 20px;
    background: #050505;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--dim);
    font-family: var(--font-body);
    font-size: 14px;
}
.spec-row:last-child { border-bottom: none; }

.spec-label { color: var(--muted); font-weight: bold; }
.spec-value { color: var(--fg); text-align: right; max-width: 60%; }

/* --- Теги категорий --- */
.pixel-tag-link {
    display: inline-block;
    background: var(--dim);
    color: var(--fg) !important;
    padding: 2px 8px;
    margin-left: 5px;
    margin-bottom: 5px;
    text-decoration: none !important;
    font-size: 12px;
    border: 1px solid transparent;
}
.pixel-tag-link:hover {
    border-color: var(--matrix);
    color: var(--matrix) !important;
    background: black;
}

/* --- Кнопки --- */
.ai-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.pixel-btn-white {
    background: transparent !important;
    border: 2px solid var(--fg) !important;
    color: var(--fg) !important;
}
.pixel-btn-white:hover {
    background: var(--fg) !important;
    color: var(--bg) !important;
}

.pixel-btn-green {
    background: transparent !important;
    border: 2px solid var(--matrix) !important;
    color: var(--matrix) !important;
}
.pixel-btn-green:hover {
    background: var(--matrix) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--matrix);
}

/* --- Логотип (Правая колонка) --- */
.ai-hero__logo {
    display: flex;
    justify-content: center;
}

.pixel-frame {
    border: 4px solid var(--fg);
    padding: 10px;
    background: #000;
    box-shadow: 10px 10px 0 var(--dim);
}

.pixel-frame img {
    image-rendering: pixelated; /* Пикселизация */
    width: 100%;
    max-width: 350px;
    height: auto;
    display: block;
}

/* --- Мобилка --- */
@media (max-width: 900px) {
    .ai-hero__grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 40px;
    }
    .ai-hero__logo {
        order: -1; /* Логотип наверх */
        margin-bottom: 20px;
    }
    .pixel-frame img { max-width: 250px; }
}
/* =========================================================
   19) ФИНАЛЬНЫЕ ПРАВКИ (Кнопки, Крошки, Линии)
   ========================================================= */

/* 1. КНОПКИ: Делаем их одинаковыми по ширине */
.ai-actions {
  display: flex;
  gap: 20px;
  width: 100%; /* Контейнер кнопок на всю ширину */
}

.ai-actions .btn {
  flex: 1; /* Растягивает кнопки поровну */
  text-align: center;
  justify-content: center;
  width: 100%; /* На случай, если они перенесутся на новую строку */
}

/* 2. ХЛЕБНЫЕ КРОШКИ: Убираем белую линию снизу */
.breadcrumbs-pixel a {
  border-bottom: 0 !important; /* Убиваем линию */
  text-decoration: none !important;
}

/* При наведении пусть просто меняется цвет на зеленый */
.breadcrumbs-pixel a:hover {
  color: var(--matrix) !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

/* 3. УБИРАЕМ ПУНКТИРНУЮ ЛИНИЮ В КОНЦЕ СТАТЬИ */
/* Она появлялась, потому что блок имел класс retro-section */
.ai-content-body.retro-section {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* На всякий случай убираем и у футера статьи, если он есть */
.ai-product-page .retro-section:last-child {
  border-bottom: 0 !important;
}
/* =========================================================
   20) МОБИЛЬНАЯ АДАПТАЦИЯ КАРТОЧКИ (FIX)
   ========================================================= */

   @media (max-width: 768px) {
    
    /* 1. Сбрасываем сетку: всё в одну колонку */
    .ai-hero__grid {
        display: flex !important;
        flex-direction: column; /* Сначала картинка, потом текст (из-за order ниже) */
        gap: 30px !important;
        width: 100%;
    }

    /* 2. Логотип (Картинка) */
    .ai-hero__logo {
        order: -1; /* Поднимаем логотип на самый верх */
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* Рамка и сама картинка не должны быть шире экрана */
    .pixel-frame {
        width: 100%;
        max-width: 320px; /* Ограничиваем максимальную ширину */
        height: auto;
        box-sizing: border-box; 
    }

    .pixel-frame img,
    .pixel-frame div { /* div - это заглушка NO LOGO */
        width: 100% !important;
        height: auto !important; 
        max-width: 100% !important;
    }

    /* 3. Заголовки: УМЕНЬШАЕМ РАЗМЕР */
    .ai-hero__title {
        font-size: 22px !important; /* Было 36px, делаем меньше */
        line-height: 1.4;
        word-break: break-word; /* Перенос слов, если не влезают */
    }

    .ai-hero__subtitle {
        font-size: 14px !important;
        line-height: 1.5;
    }

    /* 4. Рейтинг */
    .ai-rating-block {
        font-size: 16px !important;
        margin-bottom: 20px;
    }
    
    /* Звездочки чуть меньше */
    .stars {
        margin-right: 10px;
        font-size: 18px; 
    }

    /* 5. Кнопки: Ставим друг под другом */
    .ai-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .ai-actions .btn {
        width: 100% !important; /* Кнопка на всю ширину */
    }

    /* 6. Характеристики */
    .spec-value {
        max-width: 50%; /* Чтобы значения не наезжали на названия */
        font-size: 12px;
    }
}
/* =========================================================
   21) ГЛОБАЛЬНЫЙ ФИКС МОБИЛКИ
   (Бургер, Растягивание экрана, Кнопки)
   ========================================================= */

/* 1. ЗАПРЕЩАЕМ ГОРИЗОНТАЛЬНУЮ ПРОКРУТКУ */
/* Это вернет бургер на место, даже если контент широкий */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* 2. УСМИРЯЕМ ОГРОМНЫЕ ЗАГОЛОВКИ */
/* Чтобы слово MIDJOURNEY не ломало экран */
h1, h2, h3, .ai-hero__title {
  overflow-wrap: break-word !important; /* Перенос длинных слов */
  word-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* На мобиле принудительно уменьшаем шрифт заголовка */
@media (max-width: 768px) {
  .ai-hero__title {
      font-size: 24px !important; /* Было 40+, делаем меньше */
      line-height: 1.3 !important;
  }
}

/* 3. ЧИНИМ БУРГЕР */
/* Принудительно ставим его на место и красим */
#header .menu-toggle {
  display: flex !important; /* Показать */
  color: var(--matrix) !important; /* Зеленый цвет */
  z-index: 9999 !important; /* Поверх всего */
  margin-left: auto; /* Прижать вправо */
}

/* 4. ЧИНИМ "УБЛЮДСКИЕ" КНОПКИ */
/* Делаем их нормальными кирпичиками */
@media (max-width: 768px) {
  .ai-actions {
      display: flex !important;
      flex-direction: column !important; /* Друг под другом */
      gap: 15px !important;
      width: 100% !important;
  }

  .ai-actions .btn {
      width: 100% !important;      /* На всю ширину */
      height: auto !important;     /* Высота подстраивается под текст */
      min-height: 50px !important; /* Но не тоньше пальца */
      padding: 15px 20px !important; /* Воздух внутри кнопки */
      
      white-space: normal !important; /* Разрешаем перенос текста внутри кнопки */
      line-height: 1.4 !important;    /* Чтобы строки не слипались */
      text-align: center !important;
      margin: 0 !important;
  }
}
/* =========================================================
   22) ФИКС ЗАГОЛОВКОВ (Чтобы не рвало слова)
   ========================================================= */

   @media (max-width: 768px) {
    
    /* 1. ГЛАВНЫЙ ЗАГОЛОВОК (H1) */
    .ai-hero__title, h1 {
        /* Делаем шрифт меньше, чтобы длинные слова влезали */
        font-size: 18px !important; 
        line-height: 1.4 !important;
        
        /* ЗАПРЕЩАЕМ перенос по буквам */
        word-break: normal !important; 
        overflow-wrap: normal !important; 
        hyphens: manual !important;
    }

    /* 2. ПОДЗАГОЛОВКИ (H2, H3) */
    h2, h3 {
        font-size: 14px !important;
        word-break: normal !important;
    }

    /* 3. ОБЫЧНЫЙ ТЕКСТ В ГЕРОЕ */
    .ai-hero__subtitle {
        font-size: 10px !important; /* Чуть меньше для аккуратности */
        max-width: 100%;
    }

    /* 4. Если слово НУ ОЧЕНЬ длинное (длиннее экрана даже при 18px) */
    /* Мы разрешаем ему сжаться, но не ломаться */
    .ai-hero__info {
        width: 100%;
        overflow: hidden; /* Обрезаем, если вдруг что */
    }
}
/* =========================================================
   23) ФИКС ХЛЕБНЫХ КРОШЕК (БРОНЕБОЙНЫЙ ВАРИАНТ)
   ========================================================= */

/* Цепляем вообще все варианты, как могут называться крошки */
.breadcrumbs-pixel a,
#breadcrumbs a,
.breadcrumbs a,
.breadcrumbs-content a {
    border: none !important;
    border-bottom: none !important;       /* Убираем линию физически */
    border-bottom-color: transparent !important;
    text-decoration: none !important;     /* Убираем подчеркивание текста */
    background-image: none !important;    /* Убираем, если это градиент */
    box-shadow: none !important;          /* Убираем, если это тень */
}

/* При наведении - только зеленый цвет, никакой линии */
.breadcrumbs-pixel a:hover,
#breadcrumbs a:hover,
.breadcrumbs a:hover {
    color: var(--matrix) !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}
/* =========================================================
   24) НОВЫЕ ФИЛЬТРЫ (Для шаблона Ai Category)
   ========================================================= */

   .ai-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Чтобы на мобилке переносились */
    margin-bottom: 20px;
}

.filter-btn {
    background: transparent;
    border: 2px solid var(--dim);
    color: var(--muted);
    font-family: var(--font-header);
    font-size: 11px;
    padding: 12px 24px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
    outline: none !important;
}

/* Эффект наведения */
.filter-btn:hover {
    border-color: var(--fg);
    color: var(--fg);
    transform: translateY(-2px);
}

/* Активная нажатая кнопка */
.filter-btn.active {
    border-color: var(--matrix);
    color: #000; /* Черный текст на зеленом фоне */
    background: var(--matrix);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    font-weight: bold;
}

/* Мобилка */
@media (max-width: 768px) {
    .ai-filters {
        gap: 10px;
    }
    .filter-btn {
        flex: 1 1 45%; /* Кнопки в две колонки */
        text-align: center;
        padding: 12px 5px;
        font-size: 10px;
    }
}
/* =========================================================
   25) ВЫРАВНИВАНИЕ КАТЕГОРИИ И ФИКС КНОПОК
   ========================================================= */

/* 1. ШАПКА КАТЕГОРИИ */
.category-header-block {
  text-align: left; /* По умолчанию влево */
  margin-bottom: 30px;
}

.category-header-block h1 {
  color: var(--matrix);
  margin-bottom: 10px;
}

.category-header-block p {
  opacity: 0.7;
  font-family: var(--font-body);
  max-width: 800px;
  margin: 0; /* Убираем авто-маржины */
}

/* 2. БЛОК ФИЛЬТРОВ */
.ai-filters {
  display: flex;
  justify-content: flex-start; /* Прижимаем кнопки влево */
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 0; /* Пунктира больше нет, отступ минимальный */
}

/* 3. КНОПКИ ФИЛЬТРОВ (Фикс подчеркивания) */
.filter-btn {
  background: transparent;
  border: 2px solid var(--dim) !important;
  color: var(--muted);
  font-family: var(--font-header);
  font-size: 11px;
  padding: 12px 24px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  outline: none !important;
  text-decoration: none !important; /* УБИРАЕМ ПОДЧЕРКИВАНИЕ ТЕКСТА */
}

.filter-btn:hover {
  border-color: var(--fg) !important;
  color: var(--fg) !important;
  transform: translateY(-2px);
  text-decoration: none !important; /* И при наведении тоже */
}

.filter-btn.active {
  border-color: var(--matrix) !important;
  color: #000 !important;
  background: var(--matrix);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}

/* 4. МОБИЛЬНАЯ ВЕРСИЯ (Всё по центру) */
@media (max-width: 768px) {
  .category-header-block {
      text-align: center !important; /* Центруем заголовок */
  }
  
  .category-header-block p {
      margin: 0 auto; /* Центруем подзаголовок */
  }

  .ai-filters {
      justify-content: center !important; /* Центруем кнопки */
      gap: 10px;
  }

  .filter-btn {
      flex: 1 1 45%;
      padding: 12px 5px;
  }
}
/* =========================================================
   26) ФИКС БАГОВ (Линия на фото + Цвета кнопок)
   ========================================================= */

/* --- 1. Убираем "пиксель/полоску" на картинке --- */
/* Проблема была в том, что глобальная ссылка имеет border-bottom.
   Мы обнуляем шрифт для контейнера ссылки (линия исчезает),
   а внутри текстового блока возвращаем размер шрифта. */

   .ai-card {
    font-size: 0 !important; /* Убивает любые подчеркивания и пробелы вокруг фото */
}

.ai-card__body {
    font-size: 14px !important; /* Возвращаем нормальный размер текста */
}

.ai-card__image-wrap img {
    vertical-align: bottom; /* Убираем микро-отступ снизу картинки */
    display: block;
}

/* --- 2. Чиним цвета кнопок фильтров --- */

/* АКТИВНАЯ КНОПКА (Огонек) */
/* Должна быть: Зеленый фон, Черный текст */
.filter-btn.active {
    background-color: var(--matrix) !important;
    color: #000000 !important; 
    border-color: var(--matrix) !important;
    opacity: 1 !important;
}

/* Эффект при наведении на АКТИВНУЮ кнопку (чтобы не ломалась) */
.filter-btn.active:hover {
    background-color: var(--matrix) !important;
    color: #000000 !important;
}

/* ОБЫЧНАЯ КНОПКА ПРИ НАВЕДЕНИИ */
/* Сделаем: Белый фон, Черный текст (Классический инверс) */
.filter-btn:hover {
    background-color: var(--fg) !important; /* Белый фон */
    color: #000000 !important;              /* Черный текст */
    border-color: var(--fg) !important;
    transform: translateY(-2px);
}

/* Фикс для иконки огня (чтобы она тоже красилась) */
.filter-btn span,
.filter-btn i {
    color: inherit !important;
}

/* =========================================================
   27) ФИНАЛЬНЫЙ ФИКС КНОПОК (Убираем пунктир и глюки)
   ========================================================= */

/* 1. Убиваем пунктирную линию при клике (Фокус) */
.filter-btn:focus,
.filter-btn:active,
.filter-btn:focus-visible {
    outline: none !important;      /* Самое главное - убирает пунктир */
    box-shadow: none !important;   /* Убирает синюю тень в некоторых браузерах */
}

/* 2. Железобетонные цвета для АКТИВНОЙ кнопки (Огонек) */
/* Она всегда должна быть зеленой с черным текстом и свечением */
.filter-btn.active,
.filter-btn.active:hover,
.filter-btn.active:focus {
    background-color: var(--matrix) !important;
    color: #000000 !important;
    border-color: var(--matrix) !important;
    box-shadow: 0 0 15px var(--matrix) !important; /* Возвращаем наше свечение */
    outline: none !important;
}

/* 3. Железобетонные цвета при НАВЕДЕНИИ на неактивную кнопку */
/* Белый фон, черный текст */
.filter-btn:hover:not(.active) {
    background-color: var(--fg) !important;
    color: #000000 !important;
    border-color: var(--fg) !important;
}
/* =========================================================
   28) СТИЛИ БЛОГА (Лента и Статьи)
   ========================================================= */

/* --- 1. ЛЕНТА БЛОГА (Список) --- */

/* Фон страницы списка */
.blog-listing {
  background: #000 !important;
}

/* Убираем "кирпичную кладку" (Masonry) и делаем ровный список */
.blog-listing .bricklayer-column {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 800px !important; /* Ограничиваем ширину для удобства чтения */
  margin: 0 auto !important;   /* Центрируем колонку */
}

/* Карточка поста в ленте */
.blog-listing .card {
  background: #000 !important;
  border: 2px solid var(--dim) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 40px !important; /* Отступ между статьями */
  width: 100% !important;
}

/* Заголовок поста в ленте */
.blog-listing .card-header {
  background: transparent !important;
  border-bottom: 0 !important;
  padding-bottom: 10px !important;
}

.blog-listing .card-title a {
  font-family: var(--font-header) !important;
  color: var(--matrix) !important; /* Зеленый заголовок */
  font-size: 24px !important;
  text-decoration: none !important;
  border: none !important;
}

.blog-listing .card-title a:hover {
  color: var(--fg) !important; /* Белый при наведении */
}

/* Текст анонса */
.blog-listing .card-body {
  font-family: var(--font-body) !important;
  color: var(--fg) !important;
  opacity: 0.9;
}

/* Мета-информация (дата, автор) */
.blog-listing .card-subtitle {
  font-family: var(--font-body) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  margin-bottom: 15px !important;
}

/* Кнопки в блоге (если есть) */
.blog-listing .btn {
  border-color: var(--dim) !important;
  color: var(--muted) !important;
}
.blog-listing .btn:hover {
  border-color: var(--fg) !important;
  color: var(--fg) !important;
}


/* --- 2. САМА СТАТЬЯ (Внутренняя страница) --- */

/* Контейнер статьи */
#body-wrapper .blog-content-item {
  background: #000 !important;
  color: #fff !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
}

/* Заголовки внутри статьи */
.blog-content-item h1, 
.blog-content-item h2,
.blog-content-item h3 {
  color: var(--matrix) !important;
  text-transform: uppercase;
  margin-top: 40px;
}

/* Основной текст */
.blog-content-item p {
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.8;
}

/* --- 3. ПАГИНАЦИЯ (Номера страниц) --- */
.pagination {
  margin-top: 50px;
  justify-content: center;
}
.pagination .page-item a {
  background: #000 !important;
  border: 2px solid var(--dim) !important;
  color: var(--muted) !important;
  font-family: var(--font-header);
  font-size: 12px;
}
.pagination .page-item.active a {
  background: var(--matrix) !important;
  color: #000 !important;
  border-color: var(--matrix) !important;
}
/* =========================================================
   29) ФИКС ВЕРСТКИ (Шапка и Футер - Жесткая позиция)
   ========================================================= */

/* --- 1. ШАПКА: Лого слева, Меню справа (ЖЕЛЕЗОБЕТОННО) --- */

#header .navbar {
  justify-content: flex-start !important; /* Отключаем "размазывание" */
}

/* Логотип: не растягивается, не сжимается */
#header .navbar .navbar-brand {
  flex: 0 0 auto !important; 
  margin-right: auto !important; /* ЭТОТ ОТСТУП ТОЛКАЕТ МЕНЮ ВПРАВО */
}

/* Меню: не растягивается */
#header .navbar .navbar-section {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  margin-left: 0 !important; /* Отменяем лишние отступы, если были */
}

/* --- 2. ФУТЕР: Фиксированные отступы вместо "размазывания" --- */

.site-footer__inner {
  justify-content: flex-start !important; /* Всё прижимаем влево */
  gap: 80px !important; /* ЖЕСТКИЙ ОТСТУП МЕЖДУ КОЛОНКАМИ */
}

/* Если хочешь, чтобы последняя колонка футера (контакты) 
 всё-таки улетела вправо, раскомментируй код ниже: */
/* .site-footer__inner > div:last-child {
  margin-left: auto !important;
} 
*/

/* --- 3. МОБИЛКА: Возвращаем как было (чтобы не сломать) --- */
@media (max-width: 900px) {
  .site-footer__inner {
      flex-direction: column !important;
      gap: 30px !important;
  }
}
/* =========================================================
   30) ФИНАЛЬНЫЙ ФИКС ШАПКИ (Разносим по разным краям)
   ========================================================= */

/* 1. Контейнер шапки */
#header .navbar {
  display: flex !important;
  justify-content: flex-start !important; /* Элементы идут по порядку */
  width: 90% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* 2. Логотип (или левая секция) */
/* Запрещаем ему растягиваться */
#header .navbar .navbar-section:first-child {
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

/* 3. Меню (Правая секция) - САМОЕ ВАЖНОЕ */
/* margin-left: auto работает как пружина, толкая блок вправо до упора */
#header .navbar .navbar-section:last-child {
  margin-left: auto !important; 
  justify-content: flex-end !important;
  flex: 0 0 auto !important; /* Не даем сжиматься */
}
/* =========================================================
   32) БЛОГ И АВТОРЫ (Pixel Style)
   ========================================================= */

/* --- СЕТКА БЛОГА --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* --- КАРТОЧКА БЛОГА --- */
.blog-card {
  border: 2px solid var(--dim);
  background: #000;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-card:hover { border-color: var(--fg); }

/* Обложка */
.blog-card__img-link {
  display: block;
  overflow: hidden;
  border-bottom: 2px solid var(--dim);
  position: relative;
}
.blog-card:hover .blog-card__img-link { border-bottom-color: var(--fg); }

.blog-card__img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%); /* ЧБ */
  image-rendering: pixelated;
}
.blog-card:hover .blog-card__img { filter: grayscale(0%); }

.blog-card__placeholder {
  height: 200px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-family: var(--font-header);
}

/* Тело карточки */
.blog-card__body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column;}

.blog-card__title {
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.4;
}
.blog-card__title a { border: none !important; color: var(--fg) !important; }
.blog-card:hover .blog-card__title a { color: var(--matrix) !important; }

.blog-card__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 15px;
  display: flex;
  gap: 8px;
}
.meta-author { border: none !important; color: var(--muted) !important; text-transform: uppercase;}
.meta-author:hover { color: var(--matrix) !important; }

.blog-card__tags { margin-top: auto; }
.pixel-tag {
  font-size: 10px;
  background: var(--dim);
  color: #fff;
  padding: 2px 6px;
  margin-right: 5px;
}

/* --- СТРАНИЦА СТАТЬИ (Hero) --- */
.post-hero__img-wrap {
  border: 2px solid var(--dim);
  padding: 5px;
  margin-bottom: 30px;
}
.post-hero__img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  image-rendering: pixelated;
  display: block;
}
.post-title {
  font-size: 32px;
  color: var(--matrix) !important;
  margin-bottom: 20px;
}
.post-meta-bar {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 30px;
}
.p-author { color: var(--fg) !important; border: none !important; }
.p-author:hover { color: var(--matrix) !important; }
.pixel-hr { border-top: 1px dashed var(--dim); margin: 30px 0; }

/* --- ПРОФИЛЬ АВТОРА --- */
.author-card-pixel {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  border: 2px solid var(--dim);
  padding: 40px;
}
@media (max-width: 768px) { .author-card-pixel { flex-direction: column; } }

.author-photo-wrap { flex: 0 0 200px; }
.author-photo {
  width: 100%;
  border: 2px solid var(--fg);
  box-shadow: 8px 8px 0 var(--dim);
  filter: grayscale(100%);
  image-rendering: pixelated;
}
.author-info h1 { color: var(--matrix); margin-bottom: 5px; }
.author-role { color: var(--muted); font-family: var(--font-body); margin-bottom: 20px; }
.author-bio { margin-bottom: 30px; opacity: 0.9; }
.author-contacts { display: flex; gap: 15px; }
/* =========================================================
   33) ФИКС ССЫЛКИ АВТОРА (Убираем подчеркивание)
   ========================================================= */

/* Для страницы статьи */
.p-author,
.p-author:hover,
.p-author:focus,
.p-author:visited {
    border: none !important;         /* Убирает рамку */
    border-bottom: none !important;  /* Убирает нижнюю линию */
    text-decoration: none !important; /* Убирает стандартное подчеркивание */
    color: var(--fg) !important;      /* Цвет белый */
}

/* При наведении делаем зеленым, но БЕЗ линии */
.p-author:hover {
    color: var(--matrix) !important;
    background: transparent !important;
}

/* То же самое для карточек в ленте */
.meta-author,
.meta-author:hover {
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}
/* =========================================================
   34) СПИСОК АВТОРОВ (Authors List)
   ========================================================= */

   .authors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 в ряд */
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 1000px) { .authors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .authors-grid { grid-template-columns: 1fr; } }

/* Карточка */
.author-card-link {
    text-decoration: none !important;
    border: none !important;
    display: block;
}

.author-list-card {
    background: #000;
    border: 2px solid var(--dim);
    padding: 20px;
    text-align: center;
    transition: all 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ховер эффект: Зеленая рамка и свечение */
.author-card-link:hover .author-list-card {
    border-color: var(--matrix);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
    transform: translateY(-5px);
}

/* Фото */
.author-list-img {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    border: 2px solid var(--dim);
    overflow: hidden;
    /* Можно сделать круглым, если хочешь: border-radius: 50%; */
}
.author-card-link:hover .author-list-img {
    border-color: var(--matrix);
}

.pixel-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    image-rendering: pixelated;
    transition: filter 0.2s;
}
.author-card-link:hover .pixel-avatar {
    filter: grayscale(0%); /* Цвет при наведении */
}

/* Заглушка без фото */
.no-avatar {
    width: 100%; height: 100%;
    background: #111;
    color: var(--dim);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: bold;
}

/* Текст */
.author-name {
    font-size: 14px;
    color: var(--fg) !important;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.author-card-link:hover .author-name { color: var(--matrix) !important; }

.author-role-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 20px;
}

/* Кнопка внизу */
.author-go-btn {
    margin-top: auto; /* Прижать к низу */
    font-size: 10px;
    color: var(--dim);
    font-family: var(--font-header);
}
.author-card-link:hover .author-go-btn {
    color: var(--matrix);
}
/* =========================================================
   35) ФИКС ЗАГОЛОВКА КАРТОЧКИ (Убираем подчеркивание)
   ========================================================= */

   .blog-card__title a,
   .blog-card__title a:hover,
   .blog-card__title a:focus,
   .blog-card__title a:visited {
       border: none !important;         /* Убираем рамку */
       border-bottom: none !important;  /* Убираем нижнюю линию */
       text-decoration: none !important; /* Убираем стандартное подчеркивание */
       outline: none !important;
   }
   
   /* При наведении оставляем только смену цвета текста на зеленый */
   .blog-card:hover .blog-card__title a {
       color: var(--matrix) !important;
       border-bottom: none !important;
   }
   /* =========================================================
   36) СТРАНИЦА "О ПРОЕКТЕ" (About Us) - FINAL
   ========================================================= */

.about-wrapper {
  max-width: 860px; /* Чуть уже контейнера, чтобы смотрелось собранно */
  margin: 0 auto;
}

/* --- ТЕРМИНАЛЬНОЕ ОКНО --- */
.pixel-window {
  border: 2px solid var(--dim);
  background: #000;
  margin-bottom: 50px;
  box-shadow: 12px 12px 0 var(--dim); /* Жесткая тень */
}

/* Шапка окна */
.window-header {
  background: var(--dim);
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
}

.window-buttons { display: flex; gap: 8px; }
.win-btn {
  width: 12px; height: 12px;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
}
.win-btn.close { background: #ff5555; }
.win-btn.min   { background: #ffff55; }
.win-btn.max   { background: #55ff55; }

.window-title {
  font-family: var(--font-header);
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.window-body {
  background: #000;
  position: relative;
}

/* --- КАРТИНКА ВНУТРИ ОКНА --- */
.terminal-screen-img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated; /* Делает пиксели резкими */
  border-bottom: 1px solid #222;
}

/* Заглушка (если нет фото) */
.terminal-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(0deg, #000, #000 2px, #0a0a0a 2px, #0a0a0a 4px);
  color: var(--dim);
  font-family: var(--font-header);
  text-align: center;
}

/* Логи под картинкой */
.boot-log-container {
  padding: 20px;
  background: #080808;
  border-top: 1px solid #222;
}
.boot-log {
  font-family: 'Courier New', monospace; /* Моноширинный шрифт */
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.log-line { display: block; }
.ok { color: var(--matrix); float: right; }

/* --- ТЕКСТОВАЯ ЧАСТЬ --- */
.about-text-block h1 {
  font-size: 32px;
  color: var(--matrix);
  margin-bottom: 25px;
  text-transform: uppercase;
}

.content-body {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 60px;
  color: #ddd;
}

/* --- СЕТКА ФИЧ (3 колонки) --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 60px;
  border-top: 1px dashed var(--dim);
  padding-top: 40px;
}
@media (max-width: 700px) { .features-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: #050505;
  border: 1px solid #222;
  padding: 20px;
  transition: 0.2s;
}
.feature-card:hover {
  border-color: var(--matrix);
  transform: translateY(-3px);
}

.f-icon {
  color: var(--dim);
  font-family: var(--font-header);
  margin-bottom: 15px;
  font-size: 12px;
}
.feature-card h3 {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.feature-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

/* --- КОНТАКТЫ --- */
.about-contacts {
  background: #111;
  padding: 30px;
  border-left: 4px solid var(--matrix);
}
.contact-terminal-line {
  font-family: var(--font-header);
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--muted);
}
.contact-terminal-line a {
  color: #fff !important;
  text-decoration: underline !important;
  margin-left: 10px;
}
.contact-terminal-line a:hover {
  color: var(--matrix) !important;
  text-decoration: none !important;
}
/* --- КАРТИНКА ВНУТРИ ОКНА --- */
.terminal-screen-img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated; 
  border-bottom: 1px solid #222;
  
  /* ДОБАВИЛИ ЭФФЕКТЫ СЮДА: */
  filter: grayscale(100%) contrast(1.2); 
  /* Если вдруг полосы были частью фона самого элемента */
  background-color: #000; 
}
/* =========================================================
   37) СТРАНИЦА КОНТАКТОВ (Contacts)
   ========================================================= */

   .contact-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Картинка уже, текст шире */
    gap: 50px;
    align-items: center;
}

/* --- ЛЕВАЯ КОЛОНКА (Окно) --- */
.sm-window {
    border: 2px solid var(--dim);
    box-shadow: 8px 8px 0 var(--dim);
}

.window-status {
    color: #ff5555;
    font-size: 10px;
    animation: blink-rec 2s infinite;
}
@keyframes blink-rec { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }

.contact-screen-img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
    
    /* ЧБ эффект средствами CSS (без белых полос) */
    filter: grayscale(100%) contrast(1.1) brightness(0.9);
    border-bottom: 1px solid #222;
}

/* Сетка поверх картинки (эффект камеры) */
.screen-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 30px; /* Отступ под футер окна */
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 2;
}

.window-footer {
    background: #000;
    color: var(--dim);
    font-family: var(--font-header);
    font-size: 10px;
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
}

/* --- ПРАВАЯ КОЛОНКА (Инфо) --- */
.contact-title {
    font-size: 36px;
    color: var(--matrix) !important;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.contact-desc {
    color: var(--fg);
    margin-bottom: 40px;
    font-size: 16px;
    opacity: 0.9;
}

.connection-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.connection-item {
    background: #050505;
    border-left: 2px solid var(--dim);
    padding: 15px 20px;
    transition: 0.2s;
}
.connection-item:hover {
    border-left-color: var(--matrix);
    background: #0a0a0a;
}

.conn-label {
    font-family: var(--font-header);
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 5px;
}

.conn-link {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--fg) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
.connection-item:hover .conn-link {
    color: var(--matrix) !important;
    text-shadow: 0 0 5px rgba(0,255,0,0.5);
}

/* Статус снизу */
.system-status-box {
    font-family: 'Courier New', monospace;
    color: var(--dim);
    font-size: 12px;
    border-top: 1px dashed var(--dim);
    padding-top: 15px;
}
.blink { animation: blink-cursor 1s infinite; }
@keyframes blink-cursor { 0%, 100% {opacity: 1;} 50% {opacity: 0;} }

/* --- МОБИЛКА --- */
@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 30px;
    }
    .contact-visual-col {
        order: -1; /* Картинка сверху */
    }
}
/* =========================================================
   38) ГЛОБАЛЬНЫЙ ЭФФЕКТ ТЕРМИНАЛА (Мигающий курсор)
   ========================================================= */

/* Применяем ко всем главным заголовкам */
h1::after {
    content: '_';           /* Символ: нижнее подчеркивание */
    display: inline-block;
    margin-left: 5px;       /* Отступ от последней буквы */
    color: var(--matrix);   /* Делаем курсор ярко-зеленым */
    
    /* Анимация мигания */
    animation: terminal-blink 1s step-end infinite;
    
    /* Чтобы курсор не подчеркивался, если заголовок ссылка */
    text-decoration: none !important;
    border: none !important;
    opacity: 1;
}

/* Сама анимация (Вкл/Выкл) */
@keyframes terminal-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* --- ИСКЛЮЧЕНИЯ (Где курсор НЕ НУЖЕН) --- */

/* Например, в логотипе в футере, если там используется H-тег */
.site-footer h1::after,
.site-footer h2::after {
    content: none !important;
}

/* Внутри карточек блога (если заголовок - ссылка, курсор может выглядеть странно, 
   но можно оставить. Если захочешь убрать - раскомментируй ниже): */
/* .blog-card__title::after {
    content: none !important; 
} 
*/
/* =========================================================
   39) ГЛОБАЛЬНЫЙ ПРОМПТ (Значок ">" перед заголовками)
   ========================================================= */

   h1::before,
   h2::before {
       content: '> ';          /* Сам значок и пробел */
       color: var(--matrix);   /* Зеленый цвет */
       margin-right: 8px;      /* Отступ от значка до текста */
       display: inline-block;
       
       /* Если хочешь, чтобы он был жирным */
       font-weight: bold; 
       
       /* Если хочешь, чтобы он тоже не подчеркивался в ссылках */
       text-decoration: none !important; 
   }
   
   /* --- ИСКЛЮЧЕНИЯ (Где стрелочка НЕ НУЖНА) --- */
   
   /* Например, если не хочешь стрелочку в логотипе или футере */
   .site-logo::before,
   .site-footer h1::before, 
   .site-footer h2::before {
       content: none !important;
   }
   /* =========================================================
   40) СИСТЕМА ОТЗЫВОВ (Reviews)
   ========================================================= */

.reviews-section {
  max-width: 800px;
  margin: 0 auto;
  border-bottom: 0 !important;
}

/* --- ФИЛЬТРЫ --- */
.reviews-filter-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--dim);
  padding-bottom: 15px;
}

.filter-btn {
  background: transparent;
  border: none !important;
  color: var(--muted);
  font-family: var(--font-header);
  font-size: 12px;
  cursor: pointer;
  padding: 5px 10px;
}
.filter-btn:hover { color: var(--fg); }
.filter-btn.active { 
  background: var(--dim); 
  color: #fff;
  box-shadow: inset 2px 2px 0 #000;
}

/* Цвета кнопок */
.filter-btn.text-green:hover, 
.filter-btn.text-green.active { color: var(--matrix); }
.filter-btn.text-red:hover, 
.filter-btn.text-red.active { color: #ff5555; }


/* --- КАРТОЧКА ОТЗЫВА --- */
.review-card {
  border: 2px solid var(--dim);
  background: #050505;
  padding: 20px;
  margin-bottom: 20px;
  display: none; /* Скрыто по умолчанию (JS включает) */
}

/* Стиль ХОРОШЕГО отзыва */
.review-card.type-good {
  border-left: 4px solid var(--matrix);
}

/* Стиль ПЛОХОГО отзыва */
.review-card.type-bad {
  border-left: 4px solid #ff5555;
}

.review-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--dim);
  padding-bottom: 8px;
}

.pixel-badge {
  padding: 2px 6px;
  color: #000;
  font-weight: bold;
}
.pixel-badge.green { background: var(--matrix); }
.pixel-badge.red   { background: #ff5555; }

.review-title {
  font-size: 14px;
  margin-bottom: 10px;
  color: #fff;
}

.review-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: #ddd;
}


/* --- ПАГИНАЦИЯ --- */
.reviews-pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  align-items: center;
}
.reviews-pagination button {
  border: 1px solid var(--dim) !important;
  height: 30px !important;
  padding: 0 15px !important;
  font-size: 10px !important;
}
.page-count {
  font-family: var(--font-header);
  font-size: 10px;
  color: var(--muted);
}

/* --- ФОРМА --- */
.add-review-box {
  margin-top: 60px;
  border-top: 2px solid var(--dim);
  padding-top: 30px;
}
html {
  scroll-behavior: smooth;
}
/* Ретро пагинация */
.pagination-retro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: 'Press Start 2P', monospace; /* Твой пиксельный шрифт */
  font-size: 12px;
}

.pagination-retro .page-btn, 
.pagination-retro .page-num {
  background: #000;
  color: #0f0; /* Зеленый терминал */
  border: 2px solid #0f0;
  padding: 8px 12px;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}

.pagination-retro .page-btn:hover,
.pagination-retro .page-num:hover {
  background: #0f0;
  color: #000;
}

.pagination-retro .page-num.active {
  background: #0f0;
  color: #000;
  font-weight: bold;
}

.pagination-retro .disabled {
  opacity: 0.3;
  cursor: default;
  border-color: #555;
  color: #555;
}
.pagination-retro .disabled:hover {
  background: #000;
  color: #555;
}
/* =========================================================
   41) ФИНАЛЬНЫЙ ФИКС (Отступы, Выравнивание, Интервалы)
   ========================================================= */

/* 1. Глобально выравниваем ВСЕ заголовки влево (и ПК, и Мобилка) */
h1, h2, h3, h4, h5, h6,
.retro-hero__h1,
.retro-h2,
.catalog-categories-wrapper h1,
.category-header-block,
.section-title {
    text-align: left !important;
}

/* 2. Мобильные правки */
@media (max-width: 900px) {

    /* --- Исправляем боковые отступы (было 0, стало 20px) --- */
    
    /* Шапка */
    #header .navbar {
        width: 100% !important;
        padding: 10px 20px !important; /* 20px по бокам */
    }

    /* Hero блок (Первый экран) */
    .retro-hero {
        /* Было: 120px 0 50px */
        /* Стало: 120px верх, 20px бока, 50px низ */
        padding: 120px 20px 50px !important; 
    }

    /* Обычные секции (Категории, О проекте) */
    .retro-section {
        /* Отступ между блоками: 50px */
        /* Отступ по бокам: 20px */
        padding: 20px 20px !important; 
    }

    /* Контейнеры внутри секций */
    .container, 
    .container.grid-lg {
        width: 100% !important; /* Растягиваем на всю ширину */
        padding-left: 0 !important; /* Отступы уже заданы в .retro-section */
        padding-right: 0 !important;
    }
    
    /* Дополнительная страховка для текстов */
    .retro-hero__sub, 
    .about-text,
    .cat-desc {
        text-align: left !important;
    }
}
/* =========================================================
   42) ФИКС СТРАНИЦЫ КАТАЛОГА (Catalog Page Fix)
   ========================================================= */

/* 1. Убиваем принудительное центрирование на странице каталога */
.catalog-categories-wrapper h1,
.catalog-categories-wrapper h2,
.catalog-categories-wrapper .modular-title {
    text-align: left !important;
}

/* 2. Добавляем отступы по бокам для мобильных устройств */
@media (max-width: 900px) {
    
    /* Обращаемся к блоку через обертку, чтобы перебить специфичность */
    .catalog-categories-wrapper .retro-section,
    .catalog-categories-wrapper .categories-section {
        padding-left: 5px !important;
        padding-right: 5px !important;
        
        /* Если нужно убрать лишние отступы сверху/снизу, регулируйте тут: */
        /* padding-top: 20px !important; */
        /* padding-bottom: 20px !important; */
    }

    /* На всякий случай проверяем, чтобы сама обертка не сжималась */
    .catalog-categories-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* =========================================================
   44) ФИКС ОТСТУПОВ В ШАПКЕ И ФУТЕРЕ (Mobile Header/Footer Padding)
   ========================================================= */

@media (max-width: 900px) {

    /* 1. ШАПКА: Добавляем отступы по бокам для всего контейнера меню */
    #header .navbar {
        /* Было padding: 10px 0; из-за чего логотип прилипал */
        /* Стало: 10px сверху/снизу, 20px слева/справа */
        padding: 10px 20px !important;
        width: 100% !important; /* На всякий случай растягиваем */
    }

    /* 2. ФУТЕР: Добавляем отступы по бокам для всего подвала */
    .site-footer {
        /* У футера тоже были нулевые боковые отступы. */
        /* Добавляем 20px слева и справа для всего содержимого */
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
/* =========================================================
   45) ОТСТУП ЛОГОТИПА ТОЛЬКО В ШАПКЕ (Header Logo Fix)
   ========================================================= */

@media (max-width: 900px) {
    /* Обращаемся строго к #header, чтобы не задеть футер */
    #header .navbar-brand {
        margin-left: 0px !important;
    }
}
/* =========================================================
   46) ФИКС ФИЛЬТРОВ НА МОБИЛКЕ (Mobile Filters Style)
   ========================================================= */

@media (max-width: 900px) {
    
    /* 1. Контейнер фильтров: прижимаем влево */
    .ai-filters {
        display: flex !important;
        flex-wrap: wrap !important;      /* Разрешаем перенос на след. строку */
        justify-content: flex-start !important; /* ВЫРАВНИВАНИЕ ПО ЛЕВОМУ КРАЮ */
        gap: 10px !important;            /* Расстояние между кнопками */
        padding-left: 20px !important;   /* Отступ от левого края экрана */
        padding-right: 20px !important;
    }

    /* 2. Сами кнопки фильтров */
    .filter-btn {
        /* Делаем видимую рамку */
        border: 2px solid var(--dim) !important; 
        
        /* Белый текст, чтобы не сливался с фоном */
        color: var(--fg) !important;
        
        /* Черный фон внутри */
        background: #000 !important;
        
        /* Размер кнопки */
        padding: 8px 16px !important;
        font-size: 11px !important;
        
        /* Убираем растягивание */
        flex: 0 0 auto !important; 
        width: auto !important;
    }

    /* 3. Активная кнопка (которая нажата) */
    .filter-btn.active {
        background: var(--matrix) !important; /* Зеленый фон */
        color: #000 !important;               /* Черный текст */
        border-color: var(--matrix) !important;
        font-weight: bold !important;
        box-shadow: 0 0 10px var(--matrix) !important; /* Небольшое свечение */
    }
}
/* =========================================================
   47) ФИКС СТРАНИЦЫ АВТОРА (Mobile Author Page Fix)
   ========================================================= */

@media (max-width: 900px) {

    /* 1. Исправляем "наезжание" текста на фото */
    .author-photo-wrap {
        /* Самое важное: сбрасываем фиксированный flex-basis */
        flex: 0 0 auto !important; 
        width: 100% !important;
        
        /* Добавляем отступ снизу, чтобы текст не прилипал */
        margin-bottom: 30px !important; 
    }

    /* 2. Центрируем карточку для красоты */
    .author-card-pixel {
        flex-direction: column !important; /* Убеждаемся, что блоки друг под другом */
        align-items: center !important;    /* Центрируем фото и тексты */
        padding: 30px 20px !important;     /* Комфортные отступы внутри рамки */
        text-align: center !important;     /* Текст по центру */
    }

    /* 3. Ограничиваем ширину фото, чтобы не было гигантским */
    .author-photo {
        max-width: 280px !important;       /* Оптимальный размер для мобилки */
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* 4. Выравниваем заголовок имени */
    .author-info h1 {
        text-align: center !important;     /* Принудительно по центру */
        margin-top: 0 !important;
        font-size: 22px !important;        /* Чуть меньше шрифт, чтобы влезал */
    }

    /* 5. Кнопки внизу ставим в колонку на всю ширину */
    .author-contacts {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .author-contacts .btn {
        width: 100% !important;            /* Растягиваем кнопки */
        justify-content: center !important;
    }
    
    /* Убираем стрелочку ">" перед именем, если она мешает центрированию (по желанию) */
    /* .author-info h1::before { content: none !important; } */
}