/* ============================================================================
   akacia-ui.css — общий слой оформления Akacia
   ----------------------------------------------------------------------------
   ЗАЧЕМ. На сайте жили две несовместимые системы: витрина (тёмная бирюза,
   Literata + Golos Text, переменные --p-*) и всё остальное (Bootstrap +
   custom.css, Fraunces + Manrope, фотография за шапкой). Человек, уходя
   с главной в каталог, попадал будто на другой сайт. Этот файл сводит
   вторую систему к первой.

   ПОЧЕМУ СЛОЕМ, А НЕ ПРАВКОЙ custom.css. В custom.css 53 КБ, 251 правило
   и 241 !important — правки внутри него означали бы войну селекторов
   с непредсказуемым исходом на два десятка страниц. Слой подключается
   последним и намеренно перекрывает: так поведение предсказуемо, а откат —
   это снятие одной строки в base.html.

   ПОЭТОМУ ЗДЕСЬ МНОГО !important. Это не небрежность, а следствие: слою
   приходится перебивать 241 чужой !important. Внутри самого слоя порядок
   обычный, каскад работает как надо.

   ЧЕГО ЗДЕСЬ НЕТ НАМЕРЕННО:
   — ни одного правила, меняющего содержание: заголовки, описания,
     canonical, разметка schema.org и H1 не трогаются вовсе;
   — шапка не сделана «липкой»: на страницах есть выдвижная панель
     каталога с собственными слоями, и наложение проверяется только
     глазами, а их сейчас нет.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Токены */
/* Те же имена и значения, что на витрине: словарь один на весь сайт. */
:root{
  --p-bg-deep:#0F2E2E; --p-bg-deep-2:#1A3A3A; --p-bg-deep-3:#0A2424;
  --p-mint:#7FDBB8;    --p-mint-2:#4ECDC4;    --p-white:#FFFFFF;
  --p-coral:#FF6B4A;   --p-coral-2:#FF8C69;
  --p-gray-blue:#8A9BA8; --p-gray-blue-2:#B0C4D9;
  --p-ink:#111111;     --p-paper:#FAFAF8;     --p-header-muted:#56707E;

  --surface-page:var(--p-paper);
  --surface-card:var(--p-white);
  --surface-card-border:rgba(15,46,46,0.08);
  --surface-brand:var(--p-bg-deep);
  --surface-soft:rgba(15,46,46,0.04);

  --ui-text:var(--p-bg-deep);
  --ui-text-secondary:var(--p-gray-blue);
  --ui-price:var(--p-coral);

  --radius-input:12px; --radius-card:20px; --radius-panel:24px; --radius-pill:999px;

  --shadow-card:0 1px 2px rgba(15,46,46,.04);
  --shadow-card-hover:0 24px 48px -20px rgba(15,46,46,0.35);
  --shadow-cta:0 18px 40px -14px rgba(255,107,74,0.45);

  --ui-display:"Literata","Iowan Old Style",Georgia,serif;
  --ui-sans:"Golos Text","Manrope",-apple-system,"Segoe UI",sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --dur-fast:.15s; --dur-base:.25s; --dur-slow:.4s;
}

/* ---------------------------------------------------------------- 2. Основа */
body{
  font-family:var(--ui-sans) !important;
  background:var(--surface-page) !important;
  color:var(--ui-text) !important;
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.h1,.h2{
  font-family:var(--ui-display) !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  color:var(--ui-text);
  text-wrap:balance;
}
h3,h4,h5,h6,.h3,.h4,.h5,.h6{
  font-family:var(--ui-sans) !important;
  font-weight:600 !important;
  color:var(--ui-text);
}
a{ color:var(--ui-text); text-decoration:none; }
a:hover{ color:var(--p-mint-2); }
.text-muted{ color:var(--ui-text-secondary) !important; }
main.container{ max-width:1440px; padding-inline:clamp(16px,4vw,48px); }
hr{ border-color:var(--surface-card-border); opacity:1; }

/* Цена — везде одна: коралл, цифры Golos. */
.price,.pd-price,.product-col .price,.product-col .card .price{
  font-family:var(--ui-sans) !important;
  color:var(--ui-price) !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
}
.old-price,.pd-oldprice{
  color:var(--ui-text-secondary) !important;
  text-decoration:line-through;
  font-weight:400 !important;
}

/* ----------------------------------------------------------------- 3. Шапка */
/* Было: фотография hero_bg.jpg с белым текстом поверх. Стало: светлая
   спокойная полоса, как на витрине. Разметку не трогаем — только вид. */
body .navbar,
body .navbar-dark{
  background:var(--surface-card) !important;
  background-image:none !important;
  border-bottom:1px solid var(--surface-card-border) !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  box-shadow:none !important;
}
body .navbar .container-fluid{ max-width:1440px; margin-inline:auto; gap:var(--sp-3); }

body .navbar-brand,
body .navbar-dark .navbar-brand{
  font-family:var(--ui-display) !important;
  font-weight:700 !important;
  font-size:1.35rem !important;
  color:var(--ui-text) !important;
  letter-spacing:-.01em;
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  text-shadow:none !important;
}
body .navbar-brand .brand-tree{ width:30px; height:30px; }
body .navbar-brand:hover{ color:var(--p-mint-2) !important; }

body .navbar-nav .nav-link,
body .navbar-dark .navbar-nav .nav-link,
body .navbar a[href*="/messages/"],
body .navbar .btn-logout{
  color:var(--p-header-muted) !important;
  font-family:var(--ui-sans) !important;
  font-weight:500 !important;
  font-size:.9375rem !important;
  text-shadow:none !important;
}
body .navbar-nav .nav-link:hover,
body .navbar a[href*="/messages/"]:hover,
body .navbar .btn-logout:hover{ color:var(--ui-text) !important; }

/* Круглые кнопки-иконки, как на витрине */
body .navbar .icon-nav-btn{
  width:42px; height:42px;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:0 !important;
  transition:background var(--dur-base) ease,color var(--dur-base) ease;
}
/* Заливка гасится: она была рассчитана на фотографию за шапкой.
   На светлой шапке тёмный круг с белым значком выглядел ошибкой. */
body .navbar .icon-nav-btn,
body .navbar button.icon-nav-btn,
body .navbar a.icon-nav-btn{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  color:var(--p-header-muted) !important;
  border:none !important;
}
body .navbar .icon-nav-btn i,
body .navbar .icon-nav-btn svg{ color:inherit !important; }
body .navbar .icon-nav-btn:hover{
  background:var(--surface-soft) !important;
  background-color:var(--surface-soft) !important;
  color:var(--ui-text) !important;
}
body .navbar .icon-nav-btn i{ font-size:1.05rem; }

/* «Скачать приложение» — спокойная вторичная кнопка */
body .navbar .download-app-btn{
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-pill) !important;
  padding:8px 16px !important;
  background:transparent !important;
  color:var(--p-header-muted) !important;
}
body .navbar .download-app-btn:hover{
  border-color:var(--p-bg-deep) !important;
  color:var(--ui-text) !important;
  background:var(--surface-soft) !important;
}

/* Поиск в шапке */
body .navbar .search-input,
body .navbar .mobile-search-input{
  background:var(--surface-soft) !important;
  border:1px solid transparent !important;
  border-radius:var(--radius-pill) !important;
  color:var(--ui-text) !important;
  font-family:var(--ui-sans) !important;
  font-size:.9375rem !important;
  height:44px !important;
  box-shadow:none !important;
}
body .navbar .search-input::placeholder,
body .navbar .mobile-search-input::placeholder{ color:var(--ui-text-secondary) !important; }
/* Лупа лежит внутри поля слева — без отступа текст начинался под ней. */
body .navbar .mobile-search-input{ padding-left:42px !important; }
body .navbar .mobile-search-icon{ color:var(--ui-text-secondary) !important; }
body .navbar .search-input:focus,
body .navbar .mobile-search-input:focus{
  background:var(--surface-card) !important;
  border-color:var(--p-mint-2) !important;
  box-shadow:0 0 0 3px rgba(78,205,196,.18) !important;
}
body .navbar .search-button,
body .navbar .search-button.premium-button{
  background:var(--p-coral) !important;
  color:var(--p-bg-deep-3) !important;
  border:none !important;
  border-radius:var(--radius-pill) !important;
  font-family:var(--ui-sans) !important;
  font-weight:700 !important;
  height:44px !important;
  padding:0 24px !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
body .navbar .search-button:hover{ background:var(--p-mint-2) !important; }

/* Гамбургер каталога */
body .catalog-toggle .catalog-icon span{ background:var(--p-header-muted) !important; }
body .catalog-toggle:hover .catalog-icon span{ background:var(--ui-text) !important; }
body .navbar-toggler{
  border:1px solid var(--surface-card-border) !important;
  border-radius:12px !important;
}
body .navbar-toggler-icon{
  filter:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2356707E' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* --------------------------------------------------------------- 4. Кнопки */
.btn{
  font-family:var(--ui-sans) !important;
  font-weight:600 !important;
  border-radius:var(--radius-pill) !important;
  transition:transform var(--dur-fast) ease,background var(--dur-base) ease,
             color var(--dur-base) ease,border-color var(--dur-base) ease;
}
.btn:active{ transform:scale(.96); }
.btn-primary,.premium-button{
  background:var(--p-coral) !important;
  border-color:var(--p-coral) !important;
  color:var(--p-bg-deep-3) !important;
  box-shadow:var(--shadow-cta) !important;
  text-shadow:none !important;
}
.btn-primary:hover,.premium-button:hover{
  background:var(--p-mint-2) !important;
  border-color:var(--p-mint-2) !important;
  color:var(--p-bg-deep-3) !important;
}
.btn-outline-primary,.btn-secondary{
  background:transparent !important;
  color:var(--p-bg-deep) !important;
  border:1.5px solid var(--p-bg-deep) !important;
  box-shadow:none !important;
}
.btn-outline-primary:hover,.btn-secondary:hover{
  background:rgba(15,46,46,.06) !important;
  color:var(--p-bg-deep) !important;
}
.btn-link{ color:var(--p-mint-2) !important; font-weight:600 !important; }
.btn-danger{ background:var(--p-coral) !important; border-color:var(--p-coral) !important; }
.btn-lg{ min-height:50px; padding:14px 30px !important; }

/* ---------------------------------------------------------------- 5. Формы */
.form-control,.form-select,input[type="text"],input[type="number"],
input[type="email"],input[type="password"],input[type="tel"],textarea,select{
  font-family:var(--ui-sans) !important;
  border-radius:var(--radius-input) !important;
  border:1px solid var(--surface-card-border) !important;
  background:var(--surface-card) !important;
  color:var(--ui-text) !important;
  padding:12px 14px !important;
  box-shadow:none !important;
}
.form-control:focus,.form-select:focus,textarea:focus,select:focus,
input:focus{
  border-color:var(--p-mint-2) !important;
  box-shadow:0 0 0 3px rgba(78,205,196,.18) !important;
  outline:none !important;
}
label,.form-label{ font-weight:600; font-size:.875rem; color:var(--ui-text); }
.helptext,.form-text{ color:var(--ui-text-secondary) !important; font-size:.8125rem; }

/* ------------------------------------------------ 6. Карточки каталога */
/* Сетка: сама подбирает число колонок под ширину — от одной на телефоне
   до шести на широком экране, той же плотности, что витрина. */
#products-container{
  display:grid !important;
  /* minmax(0,1fr), а не 1fr: иначе длинное слово в карточке распирает
     свою колонку, и на узком экране столбцы получаются разной ширины. */
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr)) !important;
  gap:var(--sp-4) !important;
  margin:0 !important;
}
#products-container > .product-col{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important; margin:0 !important; position:relative;
  min-width:0 !important;
}
.product-col .card{
  background:var(--surface-card) !important;
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-card) !important;
  overflow:hidden !important;
  box-shadow:var(--shadow-card) !important;
  transition:transform var(--dur-slow) ease-out,
             box-shadow var(--dur-base) ease-out,
             border-color var(--dur-base) ease-out;
}
.product-col .card:hover{
  transform:translateY(-6px);
  border-color:var(--p-coral) !important;
  box-shadow:var(--shadow-card-hover) !important;
}
.product-col .card .card-img-top{
  /* !important обязателен: в шаблоне каталога та же пропорция задана
     с !important (21/10 — широкая полоса), а важное правило бьёт
     неважное независимо от порядка в файле. */
  aspect-ratio:4/3 !important;
  height:auto !important;
  object-fit:cover !important;
  width:100% !important;
  border-radius:0 !important;
  background:var(--surface-soft);
}
.product-col .card .card-body{ padding:12px 12px 14px !important; }
.product-col .card .product-cat{
  font-size:.6875rem !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ui-text-secondary) !important;
  margin-bottom:2px !important;
}
.product-col .card .price{ font-size:1rem !important; margin-bottom:2px !important; display:block; }
.product-col .card .card-title{
  font-family:var(--ui-sans) !important;
  font-size:.8125rem !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:var(--ui-text) !important;
  margin:0 0 4px !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-col .card .product-city{
  font-size:.75rem !important;
  color:var(--ui-text-secondary) !important;
  margin-bottom:4px !important;
}
.product-col .card .product-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.6875rem;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--ui-text-secondary);
}
/* Плашка сделки: цвет по сути, а не по языку.
   bottom и right гасятся намеренно: шаблон каталога задаёт плашке
   bottom, и вместе с нашим top она растягивалась во всю высоту
   фотографии — зелёный прямоугольник на пол-карточки. */
.product-col .card .deal-badge,
.deal-badge{
  position:absolute !important;
  top:10px !important; left:10px !important;
  right:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  display:inline-flex !important; align-items:center;
  z-index:2;
  padding:4px 10px !important;
  border-radius:var(--radius-pill) !important;
  font-size:.625rem !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  line-height:1.4 !important;
  backdrop-filter:blur(6px);
  color:var(--p-bg-deep-3) !important;
}
.deal-badge--sale{ background:rgba(127,219,184,.92) !important; }
.deal-badge--rent{ background:rgba(176,196,217,.92) !important; }
.deal-badge--daily{ background:rgba(255,140,105,.94) !important; color:var(--p-white) !important; }
/* Сердечко.
   background-color, а НЕ background: само сердечко нарисовано фоновой
   картинкой (шрифтовой значок в custom.css намеренно спрятан), и
   сокращённая запись background стирает background-image — сердечко
   пропадает, остаётся пустой белый кружок. */
.wishlist-icon,.product-col .toggle-wishlist{
  width:34px !important; height:34px !important;
  border-radius:50% !important;
  background-color:rgba(255,255,255,.92) !important;
  border:none !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(15,46,46,.16) !important;
  color:var(--p-header-muted) !important;
}
.wishlist-icon:hover{ color:var(--p-coral) !important; }
.btn-wishlist-active,.btn-wishlist-active i{ color:var(--p-coral) !important; }

/* Заголовок каталога и хлебные крошки */
.catalog-head{ padding-top:var(--sp-5); }
.catalog-head h1,.catalog-head h2{ font-family:var(--ui-display) !important; }
.breadcrumb{
  background:transparent !important;
  padding:0 !important;
  font-size:.8125rem;
  margin-bottom:var(--sp-2) !important;
}
.breadcrumb a{ color:var(--ui-text-secondary) !important; }
.breadcrumb a:hover{ color:var(--p-mint-2) !important; }
.breadcrumb-item.active{ color:var(--ui-text) !important; }

/* ------------------------------------------------- 7. Фильтры каталога */
.sub-filters-bar{
  background:var(--surface-card) !important;
  border-bottom:1px solid var(--surface-card-border) !important;
  padding:var(--sp-3) clamp(16px,4vw,48px) !important;
  gap:var(--sp-2) !important;
}
.sf-btn{
  font-family:var(--ui-sans) !important;
  font-size:.875rem !important;
  font-weight:600 !important;
  border-radius:var(--radius-pill) !important;
  border:1px solid var(--surface-card-border) !important;
  background:var(--surface-card) !important;
  color:var(--ui-text) !important;
  padding:8px 16px !important;
}
.sf-btn:hover{ border-color:var(--p-bg-deep) !important; }
.sf-btn--active{
  background:var(--p-bg-deep) !important;
  border-color:var(--p-bg-deep) !important;
  color:var(--p-white) !important;
}
.sf-menu{
  border-radius:var(--radius-input) !important;
  border:1px solid var(--surface-card-border) !important;
  box-shadow:0 18px 40px -20px rgba(15,46,46,.4) !important;
  background:var(--surface-card) !important;
  padding:6px !important;
}
.sf-item{
  border-radius:10px !important;
  font-size:.875rem !important;
  color:var(--ui-text) !important;
  padding:8px 12px !important;
}
.sf-item:hover{ background:var(--surface-soft) !important; }
.sf-item--active{ background:rgba(127,219,184,.18) !important; color:var(--p-bg-deep) !important; font-weight:600; }
.sf-apply{
  background:var(--p-coral) !important;
  color:var(--p-bg-deep-3) !important;
  border:none !important;
  border-radius:var(--radius-pill) !important;
  font-weight:700 !important;
  padding:8px 18px !important;
}
.sf-reset,.sf-clear{ color:var(--ui-text-secondary) !important; font-size:.8125rem !important; }
.sf-clear:hover{ color:var(--p-coral) !important; }
.sf-price-input{ border-radius:10px !important; border:1px solid var(--surface-card-border) !important; }

/* ---------------------------------------------- 8. Страница объявления */
.pd-section{
  background:var(--surface-card);
  border:1px solid var(--surface-card-border);
  border-radius:var(--radius-panel);
  padding:var(--sp-5);
  margin-bottom:var(--sp-5);
}
.pd-section h2{
  font-family:var(--ui-display) !important;
  font-size:1.375rem !important;
  margin-bottom:var(--sp-4) !important;
}
.pd-card{
  background:var(--surface-card) !important;
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-panel) !important;
  padding:var(--sp-5) !important;
  box-shadow:var(--shadow-card) !important;
}
.pd-title{
  font-family:var(--ui-display) !important;
  font-size:1.625rem !important;
  line-height:1.2 !important;
  margin-bottom:var(--sp-3) !important;
}
.pd-tag{
  display:inline-block;
  font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ui-text-secondary) !important;
  margin-bottom:var(--sp-2);
}
.pd-price{ font-size:2rem !important; }
.pd-price-note,.pd-place,.pd-seller-meta{ color:var(--ui-text-secondary) !important; font-size:.875rem !important; }
.pd-btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  width:100%;
  border-radius:var(--radius-pill) !important;
  font-family:var(--ui-sans) !important;
  font-weight:600 !important;
  padding:14px 24px !important;
  margin-bottom:10px;
  border:1.5px solid transparent !important;
  transition:background var(--dur-base) ease,color var(--dur-base) ease;
}
.pd-btn--call{
  background:var(--p-coral) !important;
  color:var(--p-bg-deep-3) !important;
  box-shadow:var(--shadow-cta) !important;
}
.pd-btn--call:hover{ background:var(--p-mint-2) !important; }
.pd-btn--wa{
  background:transparent !important;
  color:var(--p-bg-deep) !important;
  border-color:var(--p-bg-deep) !important;
}
.pd-btn--wa:hover{ background:rgba(15,46,46,.06) !important; }
.pd-btn--edit,.pd-btn--promote{
  background:transparent !important;
  color:var(--p-bg-deep) !important;
  border-color:var(--surface-card-border) !important;
}
.pd-btn--promote{ border-color:var(--p-coral) !important; color:var(--p-coral) !important; }
.pd-fav{
  width:52px; height:52px; flex:0 0 52px;
  border-radius:50% !important;
  border:1.5px solid var(--surface-card-border) !important;
  background:var(--surface-card) !important;
  color:var(--p-header-muted) !important;
}
.pd-fav:hover{ border-color:var(--p-coral) !important; color:var(--p-coral) !important; }
.pd-row{ display:flex; gap:10px; align-items:center; }
.pd-row .pd-btn{ margin-bottom:0; }
.pd-specs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--sp-3); }
.pd-spec{
  background:var(--surface-soft);
  border-radius:var(--radius-input);
  padding:10px 14px;
}
.pd-spec--wide{ grid-column:1/-1; }
.pd-spec-k{ display:block; font-size:.75rem; color:var(--ui-text-secondary) !important; }
.pd-spec-v{ font-weight:600; color:var(--ui-text) !important; }
.pd-seller{
  display:flex; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-5); padding-top:var(--sp-4);
  border-top:1px solid var(--surface-card-border);
}
.pd-avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--p-bg-deep); color:var(--p-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; text-transform:uppercase;
}
.pd-seller-name{ font-weight:600; }
.pd-note{
  background:rgba(127,219,184,.16);
  border-radius:var(--radius-input);
  padding:10px 14px; margin-bottom:10px;
  font-size:.875rem; color:var(--p-bg-deep) !important;
  display:flex; align-items:center; gap:8px;
}
.pd-map{ border-radius:var(--radius-card); overflow:hidden; }
.pd-pcard{
  border:1px solid var(--surface-card-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--surface-card);
  transition:transform var(--dur-slow) ease-out,box-shadow var(--dur-base);
}
.pd-pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.pd-pcard-img img{ aspect-ratio:4/3; object-fit:cover; width:100%; }

/* ------------------------------------------------- 9. Вход и регистрация */
.auth-wrap{ padding:var(--sp-7) 0; }
.auth-card{
  background:var(--surface-card) !important;
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-panel) !important;
  box-shadow:0 24px 48px -32px rgba(15,46,46,.35) !important;
  padding:var(--sp-6) !important;
  max-width:440px; margin-inline:auto;
}
.auth-title{ font-family:var(--ui-display) !important; font-size:1.625rem !important; }
.auth-subtitle{ color:var(--ui-text-secondary) !important; font-size:.9375rem !important; }
.auth-submit{
  width:100%;
  background:var(--p-coral) !important;
  color:var(--p-bg-deep-3) !important;
  border:none !important;
  border-radius:var(--radius-pill) !important;
  font-weight:700 !important;
  padding:14px !important;
  box-shadow:var(--shadow-cta) !important;
}
.auth-submit:hover{ background:var(--p-mint-2) !important; }
.auth-error{
  background:rgba(255,107,74,.1) !important;
  border:1px solid rgba(255,107,74,.3) !important;
  border-radius:var(--radius-input) !important;
  color:#A8341A !important;
  padding:10px 14px !important;
  font-size:.875rem !important;
}
.auth-footer{ color:var(--ui-text-secondary) !important; font-size:.875rem !important; }
.auth-tab{ font-weight:600 !important; }
.auth-tab.active{ color:var(--p-coral) !important; border-color:var(--p-coral) !important; }
.social-btn{
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-pill) !important;
  background:var(--surface-card) !important;
  color:var(--ui-text) !important;
  font-weight:600 !important;
}
.social-btn:hover{ background:var(--surface-soft) !important; }

/* ------------------------------------------------------------ 10. Профиль */
.profile-wrap{ padding-top:var(--sp-5); }
.profile-head,.profile-card{
  background:var(--surface-card) !important;
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-panel) !important;
  padding:var(--sp-5) !important;
}
.profile-avatar{
  border-radius:50% !important;
  background:var(--p-bg-deep) !important;
  color:var(--p-white) !important;
}
.profile-name{ font-family:var(--ui-display) !important; }
.profile-chip{
  border-radius:var(--radius-pill) !important;
  background:var(--surface-soft) !important;
  color:var(--ui-text-secondary) !important;
  font-size:.8125rem !important;
  padding:5px 12px !important;
}
.pa-btn{
  border-radius:var(--radius-pill) !important;
  font-weight:600 !important;
  border:1.5px solid var(--surface-card-border) !important;
  background:var(--surface-card) !important;
  color:var(--ui-text) !important;
  padding:10px 20px !important;
}
.pa-btn:hover{ border-color:var(--p-bg-deep) !important; }
.pa-btn--primary{
  background:var(--p-coral) !important;
  border-color:var(--p-coral) !important;
  color:var(--p-bg-deep-3) !important;
  box-shadow:var(--shadow-cta) !important;
}
.pa-btn--primary:hover{ background:var(--p-mint-2) !important; border-color:var(--p-mint-2) !important; }

/* --------------------------------------------------------- 11. Сообщения */
.msg-item,.conversation-item{
  background:var(--surface-card) !important;
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-card) !important;
  padding:var(--sp-4) !important;
  margin-bottom:var(--sp-3);
  transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.msg-item:hover,.conversation-item:hover{
  border-color:var(--p-bg-deep) !important;
  box-shadow:var(--shadow-card) !important;
}
.msg-new{ background:rgba(127,219,184,.16) !important; color:var(--p-bg-deep) !important; border-radius:var(--radius-pill) !important; }

/* ------------------------------------------------------- 12. Продвижение */
.promo-section,.plan-card,.custom-input-block{
  background:var(--surface-card) !important;
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-panel) !important;
}
.promo-section__title,.plan-card__name{ font-family:var(--ui-display) !important; }
.plan-card__price{ color:var(--ui-price) !important; font-weight:700 !important; }
.plan-card__action,.custom-form__btn{
  background:var(--p-coral) !important;
  color:var(--p-bg-deep-3) !important;
  border:none !important;
  border-radius:var(--radius-pill) !important;
  font-weight:700 !important;
}
.plan-card__action:hover,.custom-form__btn:hover{ background:var(--p-mint-2) !important; }
.promo-badge{ background:rgba(255,140,105,.94) !important; color:var(--p-white) !important; border-radius:var(--radius-pill) !important; }

/* ---------------------------------- 13. Уведомления, пагинация, прочее */
.alert{
  border-radius:var(--radius-input) !important;
  border:1px solid var(--surface-card-border) !important;
  font-size:.9375rem;
}
.alert-success{ background:rgba(127,219,184,.16) !important; color:var(--p-bg-deep) !important; }
.alert-info{ background:rgba(78,205,196,.14) !important; color:var(--p-bg-deep) !important; }
.alert-warning{ background:rgba(255,140,105,.16) !important; color:#8A3B22 !important; }
.alert-danger{ background:rgba(255,107,74,.12) !important; color:#A8341A !important; }
.pagination .page-link{
  border:1px solid var(--surface-card-border) !important;
  color:var(--ui-text) !important;
  border-radius:12px !important;
  margin:0 3px;
  font-weight:600;
}
.pagination .active .page-link{
  background:var(--p-bg-deep) !important;
  border-color:var(--p-bg-deep) !important;
  color:var(--p-white) !important;
}
.badge{ border-radius:var(--radius-pill) !important; font-weight:600 !important; }
.seo-intro-block{
  background:var(--surface-card);
  border:1px solid var(--surface-card-border);
  border-radius:var(--radius-panel);
  margin-bottom:var(--sp-6);
}
.seo-intro-block h2{ font-family:var(--ui-display) !important; font-size:1.25rem !important; }
#end-message,#loading-spinner{ color:var(--ui-text-secondary) !important; }
.spinner-border{ color:var(--p-mint-2) !important; }

/* ------------------------------------------------------------ 14. Подвал */
.site-footer-inner{
  background:var(--surface-brand);
  color:var(--p-white);
  margin-top:var(--sp-8);
  padding:var(--sp-7) clamp(16px,4vw,48px) var(--sp-5);
}
.site-footer-inner .footer-grid{
  max-width:1440px; margin-inline:auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-6);
  padding-bottom:var(--sp-6);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer-inner .footer-brand{
  font-family:var(--ui-display); font-weight:700; font-size:1.35rem;
  color:var(--p-white); display:inline-flex; align-items:center; gap:8px;
}
.site-footer-inner p{ color:var(--p-gray-blue-2); font-size:.875rem; margin:var(--sp-3) 0 var(--sp-4); max-width:300px; }
.site-footer-inner h4{
  font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--p-gray-blue-2); margin-bottom:var(--sp-4);
}
.site-footer-inner ul{ list-style:none; padding:0; margin:0; }
.site-footer-inner li + li{ margin-top:10px; }
.site-footer-inner a{ color:var(--p-gray-blue-2); font-size:.875rem; }
.site-footer-inner a:hover{ color:var(--p-mint); }
.site-footer-inner .footer-social{ display:flex; gap:12px; }
.site-footer-inner .footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--p-gray-blue-2);
}
.site-footer-inner .footer-social a:hover{
  border-color:var(--p-mint); color:var(--p-mint); background:rgba(127,219,184,.1);
}
.site-footer-inner .footer-bottom{
  max-width:1440px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-3);
  padding-top:var(--sp-5);
  font-size:.75rem; color:var(--p-gray-blue);
}


/* ============================================================================
   16. Части, которые я НЕ ВИДЕЛ ГЛАЗАМИ
   ----------------------------------------------------------------------------
   Выдвижная панель каталога, нижнее меню на телефоне, список языков,
   карточки «мои объявления» в профиле и внутренности страницы продвижения
   живут за входом или за нажатием, и посмотреть их не удалось.

   Поэтому здесь ТОЛЬКО шрифт, цвет и скругление — ни одного правила
   о размерах, отступах и положении. Такими правилами нельзя сдвинуть
   раскладку, которую не видишь: худшее, что случится, — цвет окажется
   не на месте, и это видно с первого взгляда и чинится одной строкой.
   Когда дойдут руки посмотреть — можно доводить и геометрию.
   ============================================================================ */

/* Панель каталога */
.cat-item,.category-name,.cat-name{
  font-family:var(--ui-sans) !important;
  color:var(--ui-text) !important;
}
.cat-item:hover,.category-name:hover{ color:var(--p-mint-2) !important; }
.cat-count{ color:var(--ui-text-secondary) !important; font-size:.8125rem !important; }
.cat-icon{ color:var(--p-mint-2) !important; }
.btn-subcategories{
  font-family:var(--ui-sans) !important;
  color:var(--ui-text-secondary) !important;
}

/* Нижнее меню на телефоне */
.mnav-item{ font-family:var(--ui-sans) !important; color:var(--p-header-muted) !important; }
.mnav-item.active,.mnav-item:hover{ color:var(--ui-text) !important; }

/* Выбор языка */
.lang-switch-item{ font-family:var(--ui-sans) !important; border-radius:10px !important; }
.lang-switch-item.active{
  background-color:rgba(127,219,184,.18) !important;
  color:var(--p-bg-deep) !important;
}

/* «Мои объявления» в профиле */
.my-item{
  background-color:var(--surface-card) !important;
  border:1px solid var(--surface-card-border) !important;
  border-radius:var(--radius-card) !important;
}
.my-thumb{ border-radius:var(--radius-input) !important; }
.my-name{
  font-family:var(--ui-sans) !important;
  font-weight:600 !important;
  color:var(--ui-text) !important;
}
.my-price{
  font-family:var(--ui-sans) !important;
  color:var(--ui-price) !important;
  font-weight:600 !important;
}
.my-status{
  border-radius:var(--radius-pill) !important;
  font-family:var(--ui-sans) !important;
  font-size:.6875rem !important;
  font-weight:700 !important;
}
.my-edit{
  border-radius:var(--radius-pill) !important;
  font-family:var(--ui-sans) !important;
  font-weight:600 !important;
}

/* Продвижение — мелкие части */
.promo-section__title,.promo-section__header{ font-family:var(--ui-display) !important; }
.promo-section__icon{ color:var(--p-coral) !important; }
.promo-section__desc,.custom-form__hint{
  color:var(--ui-text-secondary) !important;
  font-size:.875rem !important;
}
.custom-input-block__label{ font-weight:600 !important; color:var(--ui-text) !important; }
.custom-form__input{
  border-radius:var(--radius-input) !important;
  border:1px solid var(--surface-card-border) !important;
  font-family:var(--ui-sans) !important;
}
.custom-form__total{
  font-family:var(--ui-sans) !important;
  color:var(--ui-price) !important;
  font-weight:700 !important;
}

/* ------------------------------------------------------- 15. Узкий экран */
@media (max-width:991px){
  body .navbar .container-fluid{ gap:var(--sp-2); }
  .pd-side{ margin-top:var(--sp-5); }
}
@media (max-width:767px){
  #products-container{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:var(--sp-3) !important; }
  .product-col .card .card-body{ padding:10px !important; }
  .product-col .card .price{ font-size:.9375rem !important; }
  .product-col .card .card-title{ font-size:.75rem !important; }
  .pd-title{ font-size:1.375rem !important; }
  .pd-price{ font-size:1.625rem !important; }
  .pd-section,.pd-card{ padding:var(--sp-4) !important; border-radius:var(--radius-card) !important; }
  .auth-card{ padding:var(--sp-5) !important; }
  .site-footer-inner .footer-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .site-footer-inner .footer-bottom{ justify-content:flex-start; }
  main.container{ padding-inline:16px; }
}
@media (max-width:575px){
  #products-container{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
}


/* ==========================================================================
   ШАПКА ВНУТРЕННИХ СТРАНИЦ НА ТЕЛЕФОНЕ
   ==========================================================================
   Было 168 пикселей и три этажа: логотип, ряд ссылок, поле поиска.
   Логотип (112) и список ссылок (347) вместе просят 459 при доступных 351,
   контейнер с переносом — список падает на вторую строку.
   Ужимаем ровно настолько, чтобы всё встало в одну строку, и убираем с
   телефона «Регистрацию»: она есть в нижнем меню (через «Вход») и крупной
   кнопкой на самой странице входа.
   ========================================================================== */
@media (max-width:575px){
  body .navbar > .container-fluid:not(.mobile-search-row){
    flex-wrap:nowrap !important;
    gap:4px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  body .navbar .navbar-brand{
    flex:0 0 auto !important;
    padding:0 !important;
    font-size:17px !important;
    gap:6px !important;
  }
  body .navbar .navbar-brand .brand-tree{ width:26px !important; height:26px !important; }
  body .navbar #navbarContent{ flex:1 1 auto !important; min-width:0 !important; }
  body #navbarContent .navbar-nav{
    gap:2px !important;
    flex-wrap:nowrap !important;
    justify-content:flex-end !important;
    width:100% !important;
  }
  body #navbarContent .navbar-nav .icon-nav-btn,
  body #navbarContent .navbar-nav .download-app-btn{
    width:36px !important; min-width:36px !important; height:36px !important;
    padding:0 !important; border:0 !important;
  }
  body #navbarContent .navbar-nav .nav-item > .nav-link:not(.icon-nav-btn):not(.download-app-btn){
    font-size:13.5px !important;
    padding:7px 10px !important;
    white-space:nowrap !important;
  }
  body #navbarContent .navbar-nav .nav-link[href="/register/"]{ display:none !important; }
  body #navbarContent .navbar-nav .nav-item:has(> .nav-link[href="/register/"]){ display:none !important; }

  /* Плашка «Найдено: N» имела свой серый фон с полями по 30 пикселей,
     а секция под ней — серый во всю ширину: справа была белая ступенька. */
  body .catalog-head{ background:transparent !important; }
}

/* Стрелка «раскрыть подкатегории» была шириной 23 пикселя — пальцем не
   попасть. Высота у неё уже 56, добираем ширину до 44. */
body .btn-subcategories{
  min-width:44px !important;
  width:auto !important;
  padding-left:12px !important;
  padding-right:12px !important;
}


/* ==========================================================================
   КАРТОЧКА ОБЪЕКТА НА ТЕЛЕФОНЕ: цена и заголовок сразу под фотографией
   ==========================================================================
   Было: галерея 141, характеристики 400, описание 778, карта 1027,
   ЗАГОЛОВОК 1516, ЦЕНА 1638 — почти два экрана вниз. Так вышло из-за
   вёрстки в две колонки: на телефоне правая колонка (заголовок, цена,
   кнопка связи) уезжает под всю левую (галерея и разделы).
   Разметку не трогаем: левая колонка перестаёт быть отдельной коробкой
   (display:contents), её содержимое становится соседями карточки с ценой,
   и порядок задаётся через order. Поля колонки возвращаем вручную.
   Стало: заголовок 475, цена 593. На большом экране — как было.
   ========================================================================== */
@media (max-width:991.98px){
  .product-image-section{ display:contents !important; }

  .product-image-section > .product-gallery{ order:1 !important; }
  .product-info-section{ order:2 !important; }
  .product-image-section > .pd-section{ order:3 !important; }

  .product-image-section > .product-gallery,
  .product-image-section > .pd-section{
    width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* ==========================================================
   ПРОФИЛЬ И ФОРМЫ НА ТЕЛЕФОНЕ
   Замерено на снимках страниц за входом при ширине 375.
   ========================================================== */

/* 1. Пустая плашка статуса в «Моих объявлениях»: овал 18x4 без
      текста рисовался перед каждой строкой. */
.my-status:empty{ display:none !important; }

/* 2. «Редактировать» в карточке: было 19 пикселей высоты внутри
      ссылки на само объявление — промах открывал не ту страницу. */
.my-edit{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:32px !important;
  padding:4px 0 !important;
}

/* 3. Кнопки профиля. Ряд больше не делится поровну: каждая кнопка
      берёт ширину по надписи, остаток делится между ними. Браузер
      сам переносит лишнюю кнопку на новую строку — вместо того,
      чтобы ломать надпись внутри кнопки. */
@media (max-width:575px){
  .profile-actions{ gap:10px !important; }
  .profile-actions > .pa-btn,
  .profile-actions > form{ flex:1 1 auto !important; }
  .profile-actions > form{ display:flex !important; margin:0 !important; }
  .profile-actions > form > .pa-btn{ width:100% !important; }
  .profile-actions .pa-btn{
    white-space:nowrap !important;
    font-size:13px !important;
    padding:10px 8px !important;
    gap:6px !important;
    min-height:44px !important;
  }
}

/* 4. Две .container одна в другой давали 52 пикселя отступа с каждой
      стороны: поля формы подачи сжимались до 271 из 375. */
@media (max-width:575px){
  main.container .container{ padding-left:0 !important; padding-right:0 !important; }
  main.container .card-body.p-4{ padding-left:16px !important; padding-right:16px !important; }
}

/* 5. Родное поле выбора файла имеет свою ширину 338 и вылезало за
      правый край экрана. */
input[type="file"]{ max-width:100% !important; }


/* ==========================================================
   ПЕРЕПИСКА И ГАЛОЧКИ НА ТЕЛЕФОНЕ
   ========================================================== */

/* 6. Страница диалога. Поле ввода на телефоне закреплено внизу
      экрана (fixed, bottom:68 — над нижним меню) и оказывалось
      поверх подвала сайта: переписка 323 пикселя, подвал под ней
      859. Убираю подвал именно с этой страницы и растягиваю диалог
      на высоту экрана. Ссылки подвала остаются в разметке. */
@media (max-width:991.98px){
  body:has(.chat-input-form) .site-footer-inner{ display:none !important; }
  body:has(.chat-input-form) .chat-page{
    min-height:calc(100vh - 240px) !important;
    /* 150 = поле ввода 67 + нижнее меню 68 + запас. Меньше — и
       последняя строка длинной переписки прячется под полем. */
    padding-bottom:150px !important;
  }
}

/* 7. Галочки «удалить» у фотографий объявления были 13 на 13. */
@media (max-width:575px){
  main input[type="checkbox"],
  main input[type="radio"]{
    width:20px !important;
    height:20px !important;
  }
}


/* ==========================================================
   ЗНАК АКАЦИИ — ОДИН НА ВЕСЬ САЙТ
   Знак рисуется не картинкой, а заливкой через трафарет: сам
   рисунок плоский (один цвет), поэтому цвет можно держать в
   переменной, а не в файле. Источник трафарета — крупная версия
   264x215, её же schema.org указывает как логотип организации.
   ========================================================== */
.brand-tree{
  display:inline-block;
  flex:0 0 auto;
  width:30px;
  height:30px;
  background-color:transparent;
}
@supports ((-webkit-mask-image:none) or (mask-image:none)){
  .brand-tree{
    background-color:var(--p-mint,#7FDBB8);
    -webkit-mask-image:url("/static/images/akacia_tree_logo_original.png");
            mask-image:url("/static/images/akacia_tree_logo_original.png");
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    -webkit-mask-position:center;
            mask-position:center;
    -webkit-mask-size:contain;
            mask-size:contain;
  }
}
.site-footer-inner .footer-brand .brand-tree{ width:26px; height:26px; }


/* ==========================================================
   НИЖНЯЯ ПЛАШКА ПОВЕРХ КАТАЛОГА
   Панель каталога идёт до нижнего края экрана и лежала выше
   плашки (1031 и 1030 против 1020): плашку не было видно и ни
   одна её кнопка не нажималась — все касания доставались
   панели. А выйти из каталога было больше нечем: панель во всю
   ширину, мимо не нажать, крестик спрятан отдельным правилом.
   ========================================================== */
@media (max-width:991px){
  nav.mobile-bottom-nav{ z-index:1045 !important; }
  .catalog-sidebar,
  .catalog-sidebar-dynamic{ padding-bottom:72px !important; }
}


/* ==========================================================
   ПОДВАЛ НА ТЕЛЕФОНЕ: ДВА СТОЛБЦА
   Было 859 пикселей на каждой внутренней странице: четыре блока
   в один столбец. Стало 645 — списки ссылок встали парой, поля
   ужаты. Ни одна ссылка не убрана.
   ========================================================== */
@media (max-width:575px){
  .site-footer-inner{
    padding-top:28px !important;
    padding-bottom:20px !important;
  }
  .site-footer-inner .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:18px 16px !important;
    padding-bottom:20px !important;
  }
  .site-footer-inner .footer-grid > *:first-child,
  .site-footer-inner .footer-grid > *:last-child{ grid-column:1 / -1 !important; }
  .site-footer-inner .footer-grid p{ margin:8px 0 12px !important; }
  .site-footer-inner .footer-grid h4{ margin-bottom:10px !important; }
  .site-footer-inner .footer-grid ul{ gap:6px !important; }
  .site-footer-inner .footer-bottom{ padding-top:14px !important; }
}


/* ==========================================================
   ФОТОГРАФИИ В РЕДАКТИРОВАНИИ ОБЪЯВЛЕНИЯ
   Раньше в <label> была обёрнута вся плашка вместе с картинкой,
   поэтому нажатие на ФОТО помечало его к удалению. Теперь
   кнопка — только подпись «удалить», а фото ничего не делает.
   ========================================================== */
.pd-photo-del{
  cursor:pointer;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
  line-height:1;
  padding:5px 6px !important;
}
.pd-photo:has(input[name="delete_images"]:checked) img{
  opacity:.4;
  filter:grayscale(1);
}