/* ============================================================
   plomba (WP-тема) — home.css

   Підключається ОСТАННІМ у каскаді (після base.css), див.
   plomba_enqueue_assets() у functions.php. Тут лежить лише те, чого
   немає в оригінальних CSS бойового, але що бойовий домальовує
   окремо (inline-<style> у <head>), плюс ширини колонок і кілька
   точкових перекриттів base.css (сам base.css веде інший агент —
   правити його не можна, тому «останнє слово» лишається за цим файлом).

   1) МАРКЕРИ «■» у лівому меню каталогу.
   2) ШИРИНИ КОЛОНОК (сайтвайд: головна, категорія, товар, чекаут, статті).
   3) ЗАГОЛОВОК КАТЕГОРІЇ/СТОРІНКИ (.category-name / .pl-cat-title).
   4) ХЛІБНІ КРИХТИ.
   5) ПЕРЕКРИТТЯ base.css, які лишились від старої (спрощеної) шапки.
   ============================================================ */

/* ------------------------------------------------------------
   1. Чорні маркери для пунктів першого рівня лівого меню «Продукція»

   На бойовому це кастомний CSS шаблону asplomb, який Joomla друкує
   inline у <head> з коментарем «Чорні маркери для пунктів першого
   рівня лівого меню "Продукція"» — див.
   design-reference/html-snapshots/home.html, рядки 138-151 (той самий
   блок є і в category.html/product.html, тобто діє на ВСІХ сторінках).
   Скопійовано один-в-один.
   ------------------------------------------------------------ */
.bd-menuitem-23 > .bd-menu-24-popup > ul.bd-menu-24 > li.bd-menuitem-24 > a:before {
    content: "" !important;
    font-family: inherit !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    background: #444444 !important;
    border-radius: 0 !important;
    margin-right: 9px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   2. ШИРИНИ КОЛОНОК — як на бойовому, НА ВСЬОМУ САЙТІ.

   На бойовому ліва колонка — .bd-sidebararea-3-column (template.css):
   width:25%, ≤991px — 33.33%, ≤767px — 100%, padding:0 5px; права
   колонка — решта 75% з таким самим padding. Виміри 22.08.2026 при
   1440px, ОДНАКОВІ на головній, категорії, картці товару й чекауті:
       контейнер x=75 w=1290 → сайдбар x=80 w=313, контент x=403 w=958.
   (base.css дає 250px + gap 20px → сайдбар 250, контент з x=345 —
   саме ця розбіжність і правиться тут.)

   Раніше правило було звужене до .pl-layout--home (головна), поки
   внутрішні сторінки правив інший агент; тепер вмикаємо сайтвайд —
   .pl-layout--home лишається в розмітці front-page.php як маркер, але
   селектори на нього більше не спираються.

   Брейкпоінти узгоджені з base.css: там мобільна розкладка в одну
   колонку задана @media(max-width:768px), тому наші правила
   починаються з 769px і НЕ ламають мобільний акордеон каталогу.
   ------------------------------------------------------------ */
/* 5px бічних padding'ів у КОЛОНОК — на всіх ширинах, включно з мобільною
   (на бойовому це .bd-margins: контент усередині сторінки завжди відступає
   на 10px від краю контейнера — 5px дає .container теми + 5px ці правила).
   Виміри 22.08.2026 при 390px: бойові плитки/товари/тоглер каталогу
   x=10 w=370, у нас без цього було x=5 w=380. */
.pl-layout > .pl-sidebar-toggle,
.pl-layout > .pl-sidebar,
.pl-layout > .pl-main {
    padding-left: 5px;
    padding-right: 5px;
}
@media (min-width: 769px) {
    .pl-layout {
        grid-template-columns: 33.333333% minmax(0, 66.666667%);
        gap: 0;
    }
}
@media (min-width: 992px) {
    .pl-layout {
        grid-template-columns: 25% minmax(0, 75%);
    }
}

/* Верхній відступ блоку контенту.
   Бойова модель однакова на десктопі й мобільному: після попереднього
   блоку рівно 10px (.bd-block{margin:10px 0}), а на сторінці БЕЗ крихт
   (головна) — 20px (10px .bd-sheetstyles + 10px .bd-block).
   Виміри 1440: категорія — крихти 160..181, сайдбар/меню 191;
   головна — шапка 0..150, сайдбар/меню 170.
   base.css дає 18px (десктоп) / 12px (мобільний) — перекриваємо. */
.pl-layout {
    padding-top: 10px;
}
.pl-layout.pl-layout--home {
    padding-top: 20px;
    /* Знизу теж 20px: на бойовому між низом колонок головної і секцією
       «Наші послуги» (bd-section-9) рівно 20px, base.css дає 18px. */
    padding-bottom: 20px;
}
@media (max-width: 768px) {
    .pl-layout {
        padding-top: 10px;
    }
    .pl-layout.pl-layout--home {
        padding-top: 20px;
    }
}

/* ------------------------------------------------------------
   3. ЗАГОЛОВОК КАТЕГОРІЇ / СТОРІНКИ

   Бойовий (виміряно на /plombirovochnye-naklejki, 1440 і 390 — однаково):
       p.category-name { font-size:24px; font-weight:400; color:#555;
                         line-height:34.29px (1.42857); margin:0 0 10px }
   без нижньої рамки. 24px дає style.css (p.category-name{font-size:24px}),
   решта — успадковані типографські значення бойового.

   base.css:176 малює його жирним (font-weight:700), темнішим (#333),
   з рамкою знизу і margin-bottom:18px, а на ≤768px ще й зменшує до 20px —
   перекриваємо все це тут (base.css правити не можна).

   .pl-cat-title — той самий візуальний елемент на сторінці/статті/пошуку
   (page.php, single.php, index.php, search.php). Додатково знімаємо
   text-transform:uppercase, який тягнеться з template.css h1 (бойовий
   на цих сторінках взагалі не друкує окремий заголовок шаблону —
   див. звіт; лишаємо його, але у стилі назви категорії).
   H1 всередині самого контенту (СЕО-текст категорії, тіло статті)
   правила НЕ чіпають — там лишається бойовий вигляд template.css
   (32px/700/uppercase/#555, margin-top:35px).
   ------------------------------------------------------------ */
.pl-cat-title,
.category-name,
p.category-name {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4285714;
    color: #555;
    margin: 0 0 10px;
    padding-bottom: 0;
    border-bottom: 0 none;
    text-transform: none;
}
@media (max-width: 768px) {
    .pl-cat-title,
    .category-name,
    p.category-name {
        font-size: 24px;
        margin-bottom: 10px;
    }
}

/* ------------------------------------------------------------
   4. ХЛІБНІ КРИХТИ

   Розмітка — woocommerce/global/breadcrumb.php теми (1:1 з бойовим),
   оформлення дають оригінальні template.css/style.css:
       .bd-breadcrumbslink-1 a  { font-size:12px; color:#fa8b23 }
       .bd-breadcrumbstext-1 span { font-size:12px; color:#777 }
       .bd-breadcrumbs-1 .breadcrumb li + li:before { content:"/" }
       .bd-breadcrumbs-1 .breadcrumb { white-space:nowrap; overflow-x:auto;
                                       padding-right:15px } + градієнт :after

   Тут лишається тільки геометрія обгортки. Бойові виміри при 1440:
       .bd-breadcrumbs-1  x=80  w=1280   (контейнер 1300 + bd-margins 10px)
       ol.breadcrumb      x=90  w=1260   (ще 10px від того ж .bd-margins)
   У нашій розмітці .bd-margins над крихтами немає, тому ті самі 5px+10px
   ставимо явно. font-size/color base.css (12px/#999) знімаємо — бойовий
   лишає 14px/#555 на <li>, а розміри тексту задають класи вище.
   ------------------------------------------------------------ */
.pl-breadcrumbs {
    padding: 10px 5px 0;
    font-size: 14px;
    color: #555;
}
.pl-breadcrumbs .breadcrumb {
    margin-left: 10px;
    margin-right: 10px;
}

/* ------------------------------------------------------------
   5. ПЕРЕКРИТТЯ base.css, які лишились від старої (спрощеної) шапки

   Шапку (header.php) 22.08.2026 перебрано клас-в-клас із бойовим, тож
   більшість милиць base.css просто перестала збігатися селекторами.
   Дві з них усе ще влучають у бойову розмітку й ламають її — знімаємо:

   а) base.css ≤768px: .bd-section-3 .row{flex-direction:column;
      align-items:center}. Бойовий ряд другої смуги — це
      .row.bd-row-flex{flex-direction:row;flex-wrap:wrap} (template.css),
      а порядок «мін.замовлення → лого» задають order:1..4 на
      .bd-columnwrapper-34/23/9/31. З flex-direction:column колонка
      «Мінімальне замовлення…» переставала розтягуватись на всю ширину
      і зсувалась праворуч (x=105 замість бойових 10 при 390px).

   б) base.css ≤768px: .pl-mobile-menu .col-xs-6{padding:14px 10px} і
      .pl-mobile-menu p:last-child{margin-bottom:0}. На бойовому цей блок
      («Контакти / Доставка та оплата») — звичайний .bd-block з
      margin:10px 0, колонка без вертикальних padding'ів, а нижній <p>
      зберігає margin-bottom:10px. Через це смуга була 98px замість 80px.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .bd-section-3 .row.bd-row-flex {
        flex-direction: row;
        align-items: stretch;
    }
    .pl-mobile-menu .col-xs-6 {
        padding: 0 5px;
    }
    .pl-mobile-menu p,
    .pl-mobile-menu p:last-child {
        margin: 0 0 10px;
    }
}

/* в) base.css: .header-top-wrapper .bd-joomlaposition-6 .header-phone
   {display:flex}. На бойовому це звичайний <p> (display:block) з інлайновим
   вмістом, і пробіли між телефоном та іконками ДАЮТЬ ширину: бойовий блок
   218px, у flex-контейнері пробільні текстові вузли зникають і виходило
   210px. Повертаємо block. */
.header-top-wrapper .bd-joomlaposition-6 .header-phone {
    display: block;
}

/* г) Тоглер дерева категорій на мобільному «Каталог товаров/товарів».
   Бойовий (su-spoiler Shortcodes Ultimate, виміряно 22.08.2026 при 390px):
   .su-spoiler-title{padding:10px 0 10px 38px} з <h3> усередині
   (font-size:14px, font-weight:700, text-transform:uppercase,
   line-height:1.2) → загальна висота смуги 37px.
   У нас це <button> (base.css) — жирність і великі літери там уже такі
   самі, лишається привести padding і line-height (base.css дає 12px/16px
   і line-height 20px, звідки виходило 44px).
   Текст у DOM — «Каталог товаров»/«Каталог товарів» (як на бойовому),
   великі літери домальовує CSS. */
.pl-sidebar-toggle .pl-sidebar-toggle__btn {
    padding: 10px 0 10px 38px;
    line-height: 1.2; /* 14px*1.2 + 10 + 10 = 37px — бойова висота смуги */
}

/* ------------------------------------------------------------
   6. ОБГОРТКИ МОДУЛІВ ГОЛОВНОЇ (bd-section-7/8/9)

   front-page.php тепер повторює бойові обгортки модулів
   (.bd-block.bd-own-margins > .bd-blockcontent, section.bd-section-*),
   щоб працювали ОРИГІНАЛЬНІ правила template.css:
       .bd-block            { margin:10px 0 }              — рядок 5644
       .bd-section-8        { padding:60px 0 }             — рядок 15096
       .bd-section-9        { border-top:10px solid #ededed } — 15102
       .bd-margins > div > .bd-own-margins { margin:0 10px } — 932
   Без них уся головна стояла на 10px вище бойової, а новини/СЕО —
   на 70-160px (замір 22.08.2026, 1440 і 390).

   Єдина потрібна поправка: у бойовому шаблоні .bd-container-inner
   всередині секцій має ширину 1300px, а в успадкованому template.css
   лишились бутстрапівські max-width (750/970/1170px). У нас роль
   контейнера вже грає .container.pl-main (70..1370 = 1300px), тож
   всередині головної max-width знімаємо — інакше «Наші послуги»
   стиснулись би до 1170px і поїхали з бойових x=80 w=1280.
   ------------------------------------------------------------ */
.pl-front .bd-container-inner,
.bd-footerarea-1 .bd-container-inner {
    width: 100%;
    max-width: 1300px; /* бойова ширина контейнера (base.css:544), а не
                          бутстрапівські 1170px з успадкованого template.css */
    margin-left: auto;
    margin-right: auto;
}

/* Секція «Наші послуги» (bd-section-9) виводиться поза .pl-layout, прямо в
   .container.pl-main. У контейнера 5px внутрішніх padding'ів, а на бойовому
   .bd-container-inner секції має рівно ширину контейнера (1300px, 70..1370) —
   компенсуємо ці 5px, інакше блок стояв на x=85 w=1270 замість бойових
   x=80 w=1280 (і 15/360 замість 10/370 при 390px). */
.pl-front > .bd-section-9 {
    margin-left: -5px;
    margin-right: -5px;
}

/* ------------------------------------------------------------
   7. ФУТЕР — ланцюжок обгорток бойового (footer.php, 22.08.2026).

   Геометрію й типографіку задає оригінальний template.css:15062
   (.bd-section-2{padding:30px 0;border-top/bottom:10px solid #ededed;
   font-size:13px;line-height:18.57px}) — тому тут лише те, чого
   в успадкованому CSS не лишилось:

   а) логотип студії — по центру колонки (на бойовому x=1100 при 1440,
      тобто рівно центр третьої колонки 940..1360). Сам розмір дає
      template.css:14244 .bd-imagelink-5{width:100px};
   б) старі правила футера з base.css (.bd-footerarea-1 .container/.row)
      більше не діють — розмітка тепер .container-fluid/.row всередині
      .bd-container-inner, як на бойовому.
   ------------------------------------------------------------ */
.bd-footerarea-1 .bd-imagelink-5 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

/* Пункти нижнього меню: бойовий рядок 21.25px (8 пунктів = 170px) —
   .bd-section-2 дає line-height:18.57px, а <a> усередині лишається
   інлайновим. base.css:316 робить його inline-block з padding:3px 0,
   через що рядок виріс до 27px, а вся колонка — з 235 до 275px.
   Повертаємо бойову поведінку. */
.bd-footerarea-1 .botmenu > li > a {
    display: inline;
    padding: 0;
}

/* Вертикальний ритм футера: бойовий (обчислені стилі, 22.08.2026)
   p{margin-bottom:10px} і ul.botmenu{margin-bottom:10px}; у нас base.css
   давав 12px абзацам і 0 списку — через це колонка «Меню» була на 8px
   нижча, а контакти й соцмережі з'їжджали на 2-6px. */
.bd-footerarea-1 p:not(.header-phone) {
    margin-bottom: 10px; /* .header-phone виключено: original/style.css дає
                            йому margin:0, і на бойовому пошта стоїть
                            одразу під телефоном (dy 204 → 224). */
}
.bd-footerarea-1 .botmenu {
    margin-bottom: 10px;
}

/* ------------------------------------------------------------
   8. НЕТОВАРНІ СТОРІНКИ (сторінка, стаття, стрічка новин, пошук, 404)

   На бойовому текст таких сторінок лежить у
   .bd-postcontent-3.bd-tagstyles.bd-contentlayout-offset — блок із
   бічними відступами 10px від правої колонки і БЕЗ верхнього padding'у
   (заміри 1440 на /o-kompanii і /news/pochemu-…: h1 контенту 413,938,
   верх контенту рівно 246 — далі 35px власного margin-top у h1).
   base.css:293 дає .pl-content{padding:6px 0 26px} без бічних відступів,
   через що весь текст був на 403..1361 (958) і на 6px нижче бойового.
   ------------------------------------------------------------ */
.pl-content {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 0;
}

/* Стрічка новин: на бойовому вона побудована на іншому contentlayout
   (bd-contentlayout-5) — крихти там стоять на 10px вище, ніж на
   сторінках/товарах (y=150 проти 160 при 1440). */
.pl-breadcrumbs--news {
    padding-top: 0;
}

/* 404: крихт на бойовому немає взагалі, а контент починається там само,
   де на головній — y=170 (10px .bd-sheetstyles + 10px .bd-block).
   base.css дає .pl-layout{padding-top:10px} → було 160. */
body.error404 .pl-layout {
    padding-top: 20px;
}

/* Заголовок стрічки новин і текст 404 на бойовому НЕ мають тих 10px з боків
   (вони лежать не в .bd-postcontent-3, а в .bd-container-119 / .bd-content-2
   на всю ширину правої колонки: 403 w=958). Знімаємо відступи точково. */
.pl-content > .bd-container-119,
.pl-content > .bd-blog {
    margin-left: -10px;
    margin-right: -10px;
}
body.error404 .pl-content {
    margin-left: 0;
    margin-right: 0;
}

/* Картинки в тілі статей/сторінок — не ширші за колонку, як на бойовому.
   Бойовий .bd-postcontent-3 img{max-width:100%} → зображення 1192x854
   малюється як 937x672. У нас .pl-content img мав лише height:auto
   (base.css:295), і картинки з імпорту виїжджали за межі сторінки:
   заміри 22.08.2026 на /ru/pochemu-sovremennye-… — body.scrollWidth 1605
   при вікні 1440 і 1212 при вікні 390 (горизонтальний зсув на мобільному). */
.pl-content img,
.pl-content .entry-content img {
    max-width: 100%;
    height: auto;
}
