/* ============================================================
   ВАЖНО: тут НЕТ сброса стилей и НЕТ своей сетки (.row/.col-*) — их даёт
   оригинальный bootstrap.css боевого сайта. Свои правила ломали каскад:
   .row > [class*="col-"]{width:100%} перебивал .col-md-4 → всё в одну колонку.
   Держим тут ТОЛЬКО то, чего нет в оригинале (WP/Woo-специфика, pl-* блоки).
   plomba (WP-тема) — base.css
   Сітка, шапка, футер, ліва колонка каталогу, головна.
   Відтворено за design-reference/css/asplomb/{template,style}.css
   та html-snapshots/{home,category}.html бойового сайту.
   Кольори/змінні — ті самі, що в redesign.css (:root нижче
   продубльовано, щоб base.css працював самостійно).
   ============================================================ */

:root{
    --pl-orange:#fa8b23;
    --pl-orange-d:#e8641b;
    --pl-orange-txt:#f47906;   /* заголовки-акценти старої теми */
    --pl-green:#5cad1b;
    --pl-green-d:#4e9916;
    --pl-instock:#1e9e3e;
    --pl-preorder:#c50a0a;
    --pl-ready:#1f6fe0;
    --pl-text:#555;
    --pl-head:#2b2b2b;
    --pl-muted:#8a8a8a;
    --pl-border:#ececec;
    --pl-bg-card:#f6f6f6;
    --pl-shadow:0 4px 18px rgba(0,0,0,.07);
}

/* Фірмовий іконочний шрифт старої теми (стрілки меню футера, гліф кнопки
   «наверх») тут БІЛЬШЕ НЕ оголошуємо: точно такий самий @font-face
   'Billion Web Font' уже є в assets/css/original/template.css (файл поруч,
   assets/css/original/BillionWebFonts.woff) — рівно як на бойовому
   (/templates/asplomb/css/BillionWebFonts.woff). Два однакові оголошення з
   різними шляхами змушували Chrome тягнути ОБИДВА файли на сторінці товару
   (замір 03.09.2026, ~73 КБ зайвих). Копія в assets/fonts/ лишається на диску
   як резерв, але не підключена. */

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

/* ── контейнер і мінімальна сітка (замість bootstrap) ── */
.pl-container{max-width:1300px;margin:0 auto;padding:0 15px;}

/* ============================================================
   ШАПКА  (за html-snapshots/home.html: верхня полоса
   email | телефон+соцмережі | пошук | мови | меню+кошик,
   нижче — лого | телефон | мін.замовлення)
   ============================================================ */
.pl-header{border-bottom:1px solid var(--pl-border);}

/* верхня полоса */
.pl-topbar{padding:8px 0;border-bottom:1px solid #f3f3f3;}
.pl-topbar__inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.pl-topbar__mail a{color:#000;font-size:13px;}
.pl-topbar__mail a:hover{color:var(--pl-orange-txt);}
.pl-topbar__phone{margin:0;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.pl-topbar__phone a{font-weight:700;font-size:16px;color:#333;}
.pl-topbar__phone a:hover{color:var(--pl-orange-txt);}
.pl-topbar__phone img{width:20px;height:20px;vertical-align:middle;}

/* пошук (форма як у старої теми: інпут + оранжева кнопка впритул) */
.pl-search{position:relative;flex:1 1 260px;max-width:420px;}
.pl-search input[type=search]{
    width:100%;height:36px;padding:0 76px 0 12px;border:1px solid #ccc;border-radius:0;
    background:#fff;color:#333;
}
.pl-search input[type=search]:focus{outline:none;border-color:var(--pl-orange);}
.pl-search button{
    position:absolute;top:0;right:0;height:36px;padding:0 16px;border:0;border-radius:0;
    background:var(--pl-orange);color:#fff;font-weight:700;cursor:pointer;transition:background .15s;
}
.pl-search button:hover{background:var(--pl-orange-d);}

/* мови (заглушка — робимо пізніше разом з даними) */
.pl-langs{display:flex;gap:10px;list-style:none;margin:0;padding:0;}
.pl-langs a{color:#555;font-size:13px;}
.pl-langs .lang-active a{font-weight:700;color:#000;}

/* верхнє меню */
.pl-topmenu{margin-left:auto;}
.pl-topmenu ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.pl-topmenu a{
    display:block;padding:8px 14px;color:#333;font-size:14px;border-radius:0;transition:.15s;
}
.pl-topmenu li.current-menu-item > a,
.pl-topmenu a:hover{background:var(--pl-orange);color:#fff;}

/* міні-кошик «Моя корзина» (оранжевий блок + темний квадрат з іконкою) */
.pl-minicart{position:relative;display:flex;align-items:stretch;max-width:240px;min-width:190px;}
.pl-minicart:hover{box-shadow:0 2px 4px rgba(0,0,0,.15);}
.pl-minicart__txt{
    flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:40px;padding:2px 8px;background:#f3a016;color:#000;
    font-size:15px;font-weight:700;position:relative;
}
.pl-minicart__txt:after{
    content:"";position:absolute;top:0;left:100%;width:0;height:0;border-style:solid;
    border-width:20px 0 20px 5px;border-color:transparent transparent transparent #f39e16;
}
.pl-minicart__ic{
    flex:0 0 50px;display:flex;align-items:center;justify-content:center;background:#444;
}
.pl-minicart__ic img{width:24px;height:24px;}
.pl-minicart__info{display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:400;}
.pl-minicart__count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 5px;border-radius:50%;
    background:#fff;color:#333;font-size:12px;font-weight:700;
}
.pl-minicart__total{white-space:nowrap;}

/* другий рядок шапки: лого + телефон + мін. замовлення */
.pl-headmain{padding:10px 0;}
.pl-headmain__inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.pl-logo{flex:0 0 auto;max-width:140px;display:block;}
.pl-logo img{display:block;width:100%;height:auto;}
.pl-headmain__phone{margin:0;}
.pl-headmain__phone a{font-weight:700;font-size:20px;color:#333;}
.pl-headmain__phone a:hover{color:var(--pl-orange-txt);}
.pl-headmain__info{font-size:14px;color:#333;}
.pl-headmain__socials{display:flex;align-items:center;gap:8px;}
.pl-headmain__socials img{width:24px;height:24px;}

/* сіра смуга під шапкою, як .bd-section-5 старої теми */
.pl-header__strip{background:var(--pl-bg-card);min-height:10px;}

/* мобільна кнопка меню-бургер */
.pl-burger{
    display:none;align-items:center;gap:10px;background:var(--pl-orange);color:#fff;border:0;
    padding:10px 14px;font-size:14px;font-weight:700;cursor:pointer;border-radius:4px;
}
.pl-burger:before{
    content:"";width:18px;height:14px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ============================================================
   РОЗКЛАДКА КОНТЕНТУ: ліва колонка каталогу + контент
   (як на бойовій сторінці категорії, прото proto/index.html)
   ============================================================ */
.pl-layout{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:18px 0;}
.pl-layout--full{grid-template-columns:1fr;}
/* Grid-елементи за замовчуванням не стискаються тісніше за min-content
   свого вмісту (min-width:auto). На сторінці товару всередині .pl-main
   є нестискний вміст — ряд каруселі "З цим товаром купують"
   (.related_products{display:flex;flex-wrap:nowrap} на 4 картки без
   переносу) — без цього правила його min-content розпирав усю .pl-layout
   ширше за viewport на мобільних (сайдбар і меню виїжджали за 768px при
   390px екрані). На інших сторінках (категорія тощо) такого вмісту нема,
   тому правило на них не впливає. */
.pl-main{min-width:0;}

/* ліве меню категорій (bd-vmenu-1/bd-menu-23/bd-menu-24) — розмітка й
   зовнішній вигляд (сірий фон при ховері, тонкі роздільники, заголовок
   «Продукція» БЕЗ заливки) дає оригінальний CSS боевого
   (assets/css/original/template.css: .bd-menuitem-23 > a, .bd-menuitem-24 > a
   і т.д.) — тут своїх правил під ці класи більше немає (раніше були
   .pl-sidebar__title/.catmenu — прибрані разом з переходом functions.php
   на справжню розмітку боевого, див. звіт агента).
   Єдине, чого немає без Joomla-скрипта layout.core.js (він у WP не
   підключений) — розкриття bd-menu-24-popup за data-responsive-levels="all
   open": в оригіналі це робить JS, тут просто тримаємо їх завжди видимими. */
.bd-vmenu-1 .bd-menu-24-popup{
    display:block!important;position:static!important;
    visibility:visible!important;pointer-events:auto!important;
}

/* Блок «Телефони» під деревом категорій сайдбара (дефект 1).

   Геометрія 1:1 з бойовим (заміри 03.09.2026, /o-kompanii, 1440px). На
   бойовому це три вкладені блоки:
     .bd-joomlaposition-15  margin:20px 0;  background:#ededed
       .bd-block-8          margin:20px 0
         .bd-blockcontent   padding:10px 0; font-size:13px; line-height:18.571px
   разом — 20px + 139.7px сірої плашки + 20px, тобто 179.7px від низу меню
   до низу сайдбара. У нас було 143.2px (біла плашка з рамкою, шрифт 14px,
   padding 14/6, margin-top 16) — сайдбар виходив на 36.5px коротший, і
   оскільки на «коротких» сторінках (о компанії, доставка, контакти, стаття,
   404, порожній кошик) саме сайдбар — найвища колонка, футер стояв на 38.5px
   вище за бойовий (дефект «футер −38px»).

   Два вкладені margin'и бойового згортаємо в padding:30px 0 (20+10), сірий
   фон — з .bd-joomlaposition-15, рамку прибираємо (на бойовому її немає).
   Нижній margin 22px, а не 20px: решта 2px — різниця нижнього padding'а
   .pl-layout (18px) і бойового .bd-contentlayout (20px). Правити .pl-layout
   не можна: це зсунуло б на 2px УСІ сторінки, зокрема категорії й картки
   товарів, у яких найвища колонка — контентна (у них розбіжність висоти
   інша й не пов'язана з сайдбаром). */
.pl-sidebar__phones{
    margin:20px 0 22px;padding:30px 0;background:#ededed;border:0;
    /* line-height саме в px, як на бойовому (.bd-blockcontent → 18.5714px):
       успадковується дочірніми ЛІТЕРАЛЬНО. З безрозмірним значенням (1.43)
       вкладені <span style="font-size:14pt"> і <a> телефона рахували б
       line-height від СВОГО кегля й давали +14px висоти блоку. */
    font-size:13px;line-height:18.5714px;
}
.pl-sidebar__phones p{margin:0 0 10px;}
/* на бойовому у рядка з телефоном нижнього відступу немає */
.pl-sidebar__phones p.header-phone{margin-bottom:0;}

/* заголовок категорії/сторінки */
.pl-cat-title,.category-name{
    font-size:24px;color:#333;border-bottom:1px solid #eee;padding-bottom:12px;margin:0 0 18px;font-weight:700;
}

/* хлібні крихти */
.pl-breadcrumbs{font-size:12px;color:#999;padding:10px 0 0;white-space:nowrap;overflow-x:auto;}
.pl-breadcrumbs a{color:#777;}
.pl-breadcrumbs a:hover{color:var(--pl-orange);}

/* пагінація Woo */
.woocommerce-pagination{margin:20px 0;text-align:center;}
.woocommerce-pagination ul{display:inline-flex;gap:6px;list-style:none;margin:0;padding:0;}
.woocommerce-pagination a,.woocommerce-pagination span{
    display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;
    padding:0 10px;border:1px solid #e0e0e0;color:#555;
}
.woocommerce-pagination span.current{background:var(--pl-orange);border-color:var(--pl-orange);color:#fff;}
.woocommerce-pagination a:hover{border-color:var(--pl-orange);color:var(--pl-orange);}

/* повідомлення Woo (додано в кошик тощо) */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
    list-style:none;margin:0 0 16px;padding:12px 16px;border-radius:8px;font-size:14px;
}
.woocommerce-message{background:#eef8e6;border:1px solid #cfe9b8;color:#3c763d;}
.woocommerce-info{background:#f0f7ff;border:1px solid #d3e6fb;color:#2c5a8c;}
.woocommerce-error{background:#fdeaea;border:1px solid #f5c6cb;color:#b02a37;}
.woocommerce-message .button{float:right;color:var(--pl-green-d);font-weight:700;}

/* ============================================================
   ГОЛОВНА СТОРІНКА
   ============================================================ */
/* банер-заглушка (застаріле — лишено на випадок сторінок без слайдера) */
.pl-hero{
    background:linear-gradient(120deg,#fff7ee,#fdeeda);
    border:1px solid #f6e2c5;padding:44px 30px;margin:18px 0;text-align:center;
}
.pl-hero h1{font-size:28px;color:var(--pl-head);margin-bottom:10px;}
.pl-hero p{font-size:15px;color:#7a5b2e;margin:0;}

/* прихований заголовок (для SEO/скрінрідерів) */
.pl-vh{
    position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
    clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* слайдер головної: банери бойового (1170x525), fade-автозміна */
.pl-slider{position:relative;margin:18px 0;overflow:hidden;border-radius:6px;}
.pl-slider__track{position:relative;aspect-ratio:1170/525;}
.pl-slider .pl-slide{
    position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.pl-slider .pl-slide.is-active{opacity:1;pointer-events:auto;}
.pl-slider .pl-slide img{display:block;width:100%;height:100%;object-fit:cover;}
.pl-slider__arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.85);color:#444;font-size:18px;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:.15s;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.pl-slider__arrow:hover{background:#fff;color:var(--pl-orange);}
.pl-slider__arrow--prev{left:14px;}
.pl-slider__arrow--next{right:14px;}
.pl-slider__dots{
    position:absolute;left:0;right:0;bottom:12px;z-index:3;
    display:flex;justify-content:center;gap:8px;
}
.pl-slider__dot{
    width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;
    background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s;
}
.pl-slider__dot.is-active{background:var(--pl-orange);}
@media(max-width:600px){
    .pl-slider__arrow{width:34px;height:34px;font-size:15px;}
    .pl-slider__dots{bottom:7px;}
    .pl-slider__dot{width:9px;height:9px;}
}

/* плитки категорій */
.pl-home-cats{margin:10px 0 26px;}
.pl-home-cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pl-cat-tile{
    display:flex;flex-direction:column;background:var(--pl-bg-card);border:1px solid #ededed;
    transition:box-shadow .2s;
}
.pl-cat-tile:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);}
.pl-cat-tile__img{position:relative;width:100%;padding-bottom:100%;background:#fff;overflow:hidden;}
.pl-cat-tile__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;}
.pl-cat-tile__img .noimg{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:12px;
}
.pl-cat-tile__name{
    padding:10px;font-size:14px;font-weight:700;color:#333;text-transform:uppercase;text-align:center;
}
.pl-cat-tile:hover .pl-cat-tile__name{color:var(--pl-orange);}

/* секційний заголовок головної (оранжевий по центру, як h1.title) */
.pl-hometitle{color:var(--pl-orange);text-align:center;font-size:24px;margin:26px 0 18px;}

/* блог: «Актуальні статті з блогу» (як .news-category бойового) */
.pl-home-blog{margin:0 0 30px;}
.pl-home-blog__grid{display:flex;flex-wrap:wrap;margin:0 -5px;}
.pl-post-card__col{width:33.33%;padding:0 5px;}
.pl-post-card{border:1px solid #ddd;height:100%;overflow:hidden;background:#fff;}
.pl-post-card__img{height:180px;background:#f4f4f4;}
.pl-post-card__img img{height:100%;width:100%;object-fit:cover;}
.pl-post-card__info{padding:0 10px 14px;}
.pl-post-card__date{font-size:12px;color:#666;margin:10px 0;}
.pl-post-card__name{font-size:14px;font-weight:700;margin-bottom:10px;min-height:44px;}
.pl-post-card__name a{color:#333;}
.pl-post-card__name a:hover{color:var(--pl-orange-txt);}
.pl-post-card__more a{color:#555;transition:.3s;}
.pl-post-card__more a:hover{color:#f60;}

/* ============================================================
   СТАТТІ / СТОРІНКИ (index, page, single)
   ============================================================ */
.pl-content{padding:6px 0 26px;}
.pl-content .entry-title{margin-top:20px;}
.pl-content img{height:auto;}
.pl-post-list article{border-bottom:1px solid var(--pl-border);padding:16px 0;}
.pl-post-list h2{font-size:18px;margin-bottom:6px;}
.pl-post-list h2 a{color:#333;}
.pl-post-list h2 a:hover{color:var(--pl-orange-txt);}
.pl-post-meta{font-size:12px;color:#999;margin-bottom:8px;}

/* ============================================================
   ФУТЕР (3 колонки: меню | контакти | копірайт+оплата)
   ============================================================ */
.pl-footer{border-top:3px solid var(--pl-orange);margin-top:30px;padding:26px 0 18px;background:#fff;}
.pl-footer__grid{display:flex;flex-wrap:wrap;margin:0 -15px;}
.pl-footer__col{width:33.33%;padding:0 15px;}
/* заголовок колонки — оранжевий, з підкресленням (як .border-bot p) */
.border-bot p{
    color:var(--pl-orange-txt);text-transform:uppercase;font-weight:600;font-size:18px;
    padding-bottom:5px;border-bottom:1px solid var(--pl-orange-txt);margin-bottom:12px;
}
/* меню футера зі стрілкою фірмового шрифту */
.botmenu{padding:0;margin:0;list-style:none;}
.botmenu > li{list-style:none;}
.botmenu > li > a{color:#555;transition:.3s;font-size:12px;display:inline-block;padding:3px 0;}
.botmenu > li > a:before{
    display:inline-block;vertical-align:middle;font-style:normal;font-weight:400;text-align:center;
    font-family:'Billion Web Font';margin-right:10px;transition:.3s;content:"\011F";
}
.botmenu > li > a:hover{color:var(--pl-orange-txt);}
.botmenu > li > a:hover:before{margin-left:10px;}
.pl-footer__contacts{font-size:13px;color:#555;}
.pl-footer__contacts .header-phone a{font-weight:700;font-size:20px;color:#333;}
.pl-footer__contacts .header-phone a:hover{color:var(--pl-orange-txt);}
.pl-footer__contacts .work-note{color:var(--pl-orange-txt);font-weight:700;font-size:15px;}
.pl-footer__socials{display:flex;gap:8px;margin-top:10px;}
.pl-footer__socials img{width:28px;height:28px;}
.pl-footer__messengers{display:flex;gap:8px;margin-top:10px;}
.pl-footer__messengers img{width:32px;height:32px;}
.pl-footer__copy{font-size:13px;color:#555;margin-bottom:14px;}
.pl-footer__pay img{display:block;margin:0 auto 10px;}

/* плаваючі месенджери справа знизу (як на бойовому) */
.pl-floating{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;}
.pl-floating a{
    display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;
    box-shadow:0 2px 5px rgba(0,0,0,.2);transition:all .3s;
}
.pl-floating a:hover{box-shadow:0 4px 10px rgba(0,0,0,.4);transform:scale(1.1);}
.pl-floating img{width:50px;height:50px;border-radius:50%;}

/* ============================================================
   МОБІЛЬНІ СТИЛІ
   ============================================================ */
/* Мобільний блок «Контакти / Доставка та оплата» (bd-section-5 у header.php,
   item 8 брифу) — за замовчуванням (десктоп) схований, показуємо лише
   ≤767px нижче. Неоскоплене правило — щоб не лишалось «дірки» між
   max-width:767 і min-width:769. */
.pl-mobile-menu{display:none;}
@media(max-width:991px){
    .pl-topmenu{display:none;order:10;width:100%;margin-left:0;}
    .pl-topmenu.open{display:block;}
    .pl-topmenu ul{flex-direction:column;gap:0;}
    .pl-burger{display:flex;}
    .pl-layout{grid-template-columns:220px 1fr;}
}
@media(max-width:768px){
    .pl-topbar__inner{gap:10px;}
    .pl-topbar__mail{display:none;}
    .pl-search{order:5;flex:1 1 100%;max-width:none;}
    .pl-minicart{min-width:0;}
    .pl-minicart__txt{font-size:0;gap:0;padding:2px 10px;}
    .pl-minicart__txt .pl-minicart__info{font-size:12px;}
    .pl-headmain__inner{gap:14px;}
    .pl-headmain__info{flex:1 1 100%;font-size:12px;}
    .pl-layout{grid-template-columns:1fr;gap:0;padding:12px 0;}
    .pl-sidebar{display:none;margin-bottom:14px;}
    .pl-sidebar.open{display:block;}
    /* Тоглер «+ КАТАЛОГ ТОВАРОВ/ТОВАРІВ» — розмітка su-spoiler/su-spoiler-style-default
       (plomba_render_sidebar_toggle() у functions.php) уже дає фон rgba(250,139,35,.2),
       колір #fa8b23 і padding-left:38px з оригінального style.css (без жодного власного
       правила на це) — тут лише те, чого в оригіналі нема: скидання <button>,
       сам значок «+/−» і базовий layout (бойовий тоглер — це JS-плагін Shortcodes
       Ultimate, якого в WP нема). */
    .pl-sidebar-toggle{margin-bottom:14px;}
    .pl-sidebar-toggle .pl-sidebar-toggle__btn{
        display:block;position:relative;width:100%;border:0;margin:0;cursor:pointer;
        background:transparent;color:inherit;font:inherit;text-align:left;
        padding-top:12px;padding-right:16px;padding-bottom:12px;
        font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
    }
    .pl-sidebar-toggle__icon{
        position:absolute;top:50%;width:14px;height:14px;transform:translateY(-50%);
    }
    .pl-sidebar-toggle__icon:before,.pl-sidebar-toggle__icon:after{
        content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%);
    }
    .pl-sidebar-toggle__icon:before{width:14px;height:2px;}
    .pl-sidebar-toggle__icon:after{width:2px;height:14px;transition:opacity .15s;}
    /* розкрито (клас додає theme.js) — вертикальна риска ховається, «+» стає «−» */
    .pl-sidebar-toggle.pl-open .pl-sidebar-toggle__icon:after{opacity:0;}
    .pl-cat-title,.category-name{font-size:20px;margin-bottom:14px;}
    /* ── шапка на мобільному ──────────────────────────────────────────
       Верхній рядок: email + телефон/іконки в одну лінію (item 1).
       Обидва блоки — прямі діти .col-sm-3 (email + мобільна копія
       телефону з plomba_render_phone_socials(), див. header.php) —
       justify-content:space-between як в оригінальному
       .header-top-wrapper{display:flex;justify-content:space-between}
       (там на нього ж і розрахований, просто в іншому місці DOM). */
    /* Оригінальний .header-top-wrapper{display:flex} (style.css, без медіа-
       запиту, діє завжди) на бойовому розрахований на пару email+телефон
       ВСЕРЕДИНІ col-sm-3, а не на весь верхній ряд — у нашій розмітці в
       header-top-wrapper потрапляє весь ряд (email+пошук+мови+меню+кошик)
       одним .container. Без явної ширини .container як flex-елемент
       стискався до contentу (форма пошуку/мовний блок/оранжева плашка
       ставали вужчими за контейнер і не доходили до країв, як на бойовому).
       Лише ≤767px — на десктопі в цю властивість втручатись не можна
       (там .container має власну фіксовану ширину з bootstrap.css). */
    .header-top-wrapper > .container{width:100%;}
    .header-top-wrapper .col-sm-3{display:flex;align-items:center;justify-content:space-between;gap:8px;}
    .header-top-wrapper .col-sm-3 .header-top{flex:0 1 auto;min-width:0;overflow:hidden;}
    .header-top-wrapper .col-sm-3 .header-top__mail-item a{
        display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .header-top-wrapper .bd-joomlaposition-6{flex:0 0 auto;}
    .header-top-wrapper .bd-joomlaposition-6 .header-phone{display:flex;align-items:center;white-space:nowrap;}
    .header-top-wrapper .bd-joomlaposition-6 .header-phone img{width:24px;height:24px;}
    /* Позиціонування самого кошика на мобільному — окремим unscoped-правилом
       у самому кінці файлу (після десктопного .header-top-wrapper
       .ajax_cart_wl{display:inline-block}), щоб напевно виграти каскад
       (та сама специфічність селектора, тому важливий порядок у файлі —
       див. коментар там: «Кошик на мобільному»). */

    /* Друга біла смуга шапки: спочатку «Мінімальне замовлення…» (item 6),
       потім лого по центру (item 7) — на десктопі порядок і розкладка
       в рядок не чіпаються (тут лише ≤767px). Телефон біля лого
       (.pl-col-phone) на мобільному ховає бойове правило
       .bd-joomlaposition-6{display:none} (max-width:768px) — колонку
       ховаємо теж, щоб не лишався порожній стовпець. */
    .bd-section-3 .row{flex-direction:column;align-items:center;}
    /* .bd-logo-3{display:inline-block} (оригінальний template.css) — margin:auto
       не центрує inline-block (звична пастка), і колонку намагатись стиснути
       flex-shrink теж не вийде: bootstrap.css рядок 259 дає ВСІМ .col-* без
       медіа-запиту width:100% (це нормальна поведінка bootstrap, той самий
       рядок діє й на бойовому) — тому центруємо якір text-align:center на
       колонці, а не звуженням самої колонки. */
    .pl-col-logo{order:2;width:100%;text-align:center;}
    .pl-col-minorder{order:1;width:100%;text-align:center;}
    .pl-col-phone,.pl-col-spacer{display:none;}
    /* Оригінальний .top-info{position:relative;top:60px;margin-bottom:60px}
       (template.css, @media max-width:768px) — на бойовому це частина ЙОГО
       механізму переупорядкування колонок (bd-row-flex + -webkit-box-ordinal
       на bd-columnwrapper-*, яких у нас нема — переставляємо через flex
       order вище). top:60px тут просто зсуває блок вниз (не наверх), а
       margin-bottom:60px додає зайві 60px висоти ряду — обнуляємо, бо
       переставляння вже робить order:1 вище. */
    .pl-col-minorder .top-info{position:static;top:auto;margin-bottom:0;width:auto;}

    /* Мобільний блок «Контакти / Доставка та оплата» (item 8) — bd-section-5
       з header.php. На десктопі схований (правило нижче), тут — показуємо. */
    .pl-mobile-menu{display:block;}
    .pl-mobile-menu .col-xs-6{padding:14px 10px;}
    .pl-mobile-menu p{margin:0 0 10px;}
    .pl-mobile-menu p:last-child{margin-bottom:0;}
    .pl-mobile-menu a{font-size:13px;color:var(--pl-orange-txt);}

    /* Другорядне меню bd-menu-5 (Доставка и оплата / Главная / О компании /
       Новости / Контакты / Акционные %) — на бойовому мобільному його НЕМА
       (перевірено прямим оглядом DOM бойового при 390px), замість нього —
       .pl-mobile-menu вище. На десктопі лишається як є (не чіпаємо). */
    .bd-sidebararea-2,.bd-menu-5{display:none;}
    .pl-home-cats__grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .pl-post-card__col{width:100%;margin-bottom:10px;}
    .pl-footer__col{width:100%;margin-bottom:20px;}
    .pl-hero{padding:28px 16px;}
    .pl-hero h1{font-size:22px;}
}
@media(min-width:769px){
    .pl-sidebar-toggle{display:none;}
}
@media(max-width:440px){
    .pl-headmain__phone a{font-size:16px;}
    .pl-hometitle{font-size:20px;}
}

/* ============================================================
   СТОРІНКА ТОВАРУ — розкладка колонок (у Joomla це були
   bootstrap col-md-6; тут — власна сітка .pf-grid).
   Декор елементів — у redesign.css (.productfull ...).
   ============================================================ */
.productfull{padding:10px 0 26px;}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
@media(max-width:900px){.pf-grid{grid-template-columns:1fr;}}
/* margin-bottom: на бойовому у .prod_price його немає взагалі (замір
   03.09.2026: прод 0px, dev 10px) — блок ціни щільно притиснутий до
   наступного. Було 10px, через що все нижче ціни їхало на 10px. */
.productfull .prod_price{margin-bottom:0;}
.productfull .old_price{margin-left:10px;}
.productfull .visa-mc img{display:block;}
/* лічильник кількості на сторінці товару (спільний з картками .atcounter) */
.productfull .atcounter{
    display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:10px;background:#fff;overflow:hidden;
}
.productfull .atcounter button{
    width:46px;height:52px;border:0;background:#fff;color:#666;font-size:20px;cursor:pointer;transition:.12s;
}
.productfull .atcounter button:hover{background:#f4f4f4;color:var(--pl-orange);}
.productfull .atcounter input{
    width:88px;height:52px;border:0;border-left:1px solid #eee;border-right:1px solid #eee;
    text-align:center;font-size:18px;font-weight:700;color:var(--pl-head);background:#fff;margin:0;
}
/* відгуки Woo у вкладці */
.pl-tabs__pane .commentlist{list-style:none;margin:0;padding:0;}
.pl-tabs__pane .comment_container{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--pl-border);}
.pl-tabs__pane .comment_container img.avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;}
.pl-tabs__pane .comment-form-rating{margin-bottom:10px;}
.pl-tabs__pane .comment-form input[type=text],
.pl-tabs__pane .comment-form input[type=email],
.pl-tabs__pane .comment-form textarea{
    width:100%;max-width:520px;border:1px solid #e4e4e4;background:#f6f6f6;border-radius:9px;
    padding:10px 13px;margin-bottom:10px;
}
.pl-tabs__pane .form-submit .submit{
    height:44px;padding:0 22px;border:0;border-radius:6px;background:var(--pl-green);color:#fff;
    font-weight:700;cursor:pointer;
}
.pl-tabs__pane .form-submit .submit:hover{background:var(--pl-green-d);}

/* ── міні-кошик у шапці ──────────────────────────────────────────────
   Бойовий style.css робить .ajax_cart_wl.type_view.cart_view абсолютним
   (position:absolute; top:35px; width:100%) — там він лежить у власній
   колонці шапки з position:relative, тому 100% = ширина колонки.
   У нашій flex-шапці такого предка-якоря немає: відлік ішов від <body>,
   width:100% дорівнювало ширині вікна → кошик вилазив за правий край,
   тягнув горизонтальну прокрутку і «зсував» меню вліво.
   Робимо його звичайним елементом ряду; випадашка .extern_wrap лишається
   absolute відносно .mycart_wrapp (так і в оригіналі). */
.header-top-wrapper .ajax_cart_wl.type_view.cart_view{
	position:relative; top:0; left:auto; right:auto;
	width:auto; flex:0 0 auto; margin-left:auto;
	display:inline-block; /* блок-контейнер вужчий за колонку (col-md-4 ~120px) —
	                          без inline-block він розтягувався на 100% ширини
	                          батька (звичайний блок), стискаючи .mycart_wrapp
	                          нижче за суму його дітей (текст 190px + іконка 50px)
	                          і текст «наїжджав» на квадрат з іконкою кошика. */
}
.header-top-wrapper .ajax_cart_wl .mycart_wrapp{margin:0;width:240px;}

/* ── ширина макета ───────────────────────────────────────────────────
   Бойовий тримає контент у .bd-container-inner{max-width:1300px}
   (при ≤1200px — 100%). Стандартний bootstrap .container дає лише
   1170px, тому весь контент був вужчим за оригінал, а правий блок
   шапки (посилання + кошик) не доходив до тієї точки, де він на бойовому.
   Прирівнюємо .container до бойової ширини. */
@media (min-width: 1200px) {
	.container { width: 100%; max-width: 1300px; }
}

/* Сіра смуга під верхнім рядком шапки. На бойовому фон дає
   section.bd-section-6{background:#f6f6f6} на всю ширину вікна —
   у нашій розмітці цю роль виконує .header-top-wrapper. */
.header-top-wrapper { background: #f6f6f6; }

/* Кошик «звисає» під сірою смугою, як на бойовому:
   посилання T=0..39, кошик T=52..92 при висоті смуги 40px.
   Якщо лишити кошик у потоці ряду, смуга виростає до 84px і вся шапка
   з логотипом з’їжджає вниз на 44px. Робимо absolute відносно ряду
   (у ряду є position:relative — тому за екран він не вилізе).
   ТІЛЬКИ ДЕСКТОП (≥768px) — на мобільному рядок «Продукція/Що
   опломбувати?» + мовний блок стоять один під одним (а не в один
   рядок, як на десктопі), тому «висота смуги 40px» там не діє: той
   самий absolute-відлік top:52px на мобільному попадав просто на
   логотип нижче в потоці (дефект «корзина наїжджає на логотип»,
   звіт агента). Мобільна розкладка кошика — правило одразу нижче. */
.header-top-wrapper .row { position: relative; }
@media (min-width: 768px) {
	.header-top-wrapper .ajax_cart_wl.type_view.cart_view {
		position: absolute; top: 52px; right: 0; left: auto;
		width: 240px; margin: 0; z-index: 20;
	}
}
/* Кошик на мобільному: НЕ absolute — інакше накриває лого нижче
   (дефект «корзина наїжджає на логотип», звіт агента). Повертаємо
   в потік, окремим рядком під оранжевою плашкою «Продукція / Що
   опломбувати?», притиснутим праворуч (margin-left:auto), ширина
   як на бойовому (~65% — 240px з ширини контейнера ~370px,
   .mycart_wrapp{width:240px} задано вище й тут не дублюється).
   Розташовано ПІСЛЯ десктопного правила (той самий селектор, та сама
   специфічність) — щоб виграти каскад саме на мобільному за порядком
   у файлі, а не покладатись на порядок медіа-запитів. */
@media (max-width: 767px) {
	.header-top-wrapper .ajax_cart_wl.type_view.cart_view {
		position: static; display: block; width: 240px; max-width: 65%;
		margin: 10px 0 10px auto; z-index: auto;
	}
}

/* Зразок кольору — ЛІВОРУЧ від списку (звірено з бойовим 22.08:
   /aktsionnye-tovary-… картка «ПЛОМБА-НАКЛЕЙКА 20х66мм»).
   У розмітці спершу <select>, потім <img>, а міняє їх місцями CSS самого
   плагіна: cartajaxattributes_plugin.css → .cartajaxattributes-fieldset-wrapper
   select{order:2}. Раніше тут стояло зворотне (select:1 / img:2) з поміткою
   «праворуч, як на бойовому» — це була помилка, base.css підключається
   останнім і перебивав плагін. Порядок більше не перевизначаємо, лишаємо
   тільки flex-поведінку й скидання float. */
.cartajaxattributes-fieldset-wrapper {
	display: flex; align-items: center;
}
.cartajaxattributes-fieldset-wrapper select { flex: 1 1 auto; }
.cartajaxattributes-fieldset-wrapper img.cartajax-color-swatch { flex: 0 0 auto; float: none; }

/* Мобільний: перемикач мов UK/RU по центру, як на бойовому
   (на десктопі лишається у своїй колонці, правило лише для ≤767px). */
@media (max-width: 767px) {
	.header-top-wrapper .mod-languages { text-align: center; }
	.header-top-wrapper .mod-languages ul.lang-inline {
		display: inline-flex; justify-content: center; float: none; margin: 0 auto;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Матриця кольорів #newAttr — CSS аддона deployed_list_attribut бойового.

   На бойовому цей блок приходить окремим inline <style> у тілі сторінки (його
   друкує сам аддон), і саме він домальовує рамку навколо назви кольору,
   ширину лічильника 130×35 та ДВОКОЛОНКОВУ шапку «Кількість | Весь асортимент
   расцветок». У міграцію потрапив лише plomba-redesign.css, тому на dev шапка
   лягала в два рядки, а назви кольорів були без рамок (звірено 22.08 на
   /plombirovochnye-naklejki/indikatornye-plomby-nakleyki-20h35mm).

   Перенесено ЛИШЕ ті властивості, які на бойовому реально виграють каскад:
   решту (display/align/border/розміри кнопок, font-size, розмір зразка) там
   перекриває більш специфічний .productfull #newAttr … з redesign.css.
   Селектори звужені до .productfull #newAttr, щоб узагальнені імена класів
   (.item, .label, .counter) не зачепили нічого іншого на сайті.
   Щоб відкотити — видалити цей блок цілком.
   ────────────────────────────────────────────────────────────────────────── */
.productfull #newAttrTitle{display:flex;justify-content:center;padding:10px;}
.productfull #newAttr .newAttrTitle1{width:140px;text-align:center;}
.productfull #newAttr .newAttrTitle2{width:calc(100% - 140px);text-align:center;}
.productfull #newAttr .scroll-box{background:#fff;padding:22px 11px;}
.productfull #newAttr .scroll-box .item input{cursor:default!important;}
.productfull #newAttr .item{margin-bottom:11px;}
.productfull #newAttr .counter{width:130px;height:35px;margin-right:10px;}
.productfull #newAttr .counter button{padding:5px 10px;}
.productfull #newAttr .counter button:first-child{border-right:1px solid #ccc;}
.productfull #newAttr .counter button:last-child{border-left:1px solid #ccc;}
.productfull #newAttr .counter input{width:50%!important;}
.productfull #newAttr .color-box{padding-right:10px;}
.productfull #newAttr .label{flex-grow:1;border:1px solid #ccc;padding:5px 10px;text-align:center;min-height:35px;}
.productfull #newAttr{width:100%!important;}
.productfull .prod-info{width:100%!important;}
.productfull .prod_details_container{margin-bottom:0!important;}

/* ── 02.09.2026, прохання замовника (те саме на бойовому в plomba-redesign.css v15):
   мобільна картка товару — заголовок першим і меншим шрифтом, блок переваг
   (.pl-features) під кнопкою «Купити». display:contents розчиняє колонки,
   діти отримують order; десктоп (≥768px) без змін. */
@media (max-width: 767px) {
	.productfull form.row { display: flex; flex-direction: column; }
	.productfull form.row > .col-md-6 { display: contents; }
	.productfull form.row > .col-md-6 > * { order: 4; }
	.productfull form.row .product_title_h1 { order: 1; font-size: 16px; line-height: 1.3; margin-top: 0; }
	.productfull form.row .jshop.product_image_wrapper { order: 2; }
	.productfull form.row .prod_buttons { order: 5; }
	.productfull form.row .pl-features { order: 6; margin-top: 15px; }
}

/* ── 03.09.2026: відступ картки каталогу 12px, як на бойовому.
   На бойовому в plomba-redesign.css діє
     :is(#comjshop_list_product, .related_products) .product{padding:12px}
   — завдяки ID усередині :is() селектор має вищу вагу за
   .jshop_list_product .product{padding:10px} з original/style.css.
   У нас той самий блок у redesign.css написаний через клас (.pl-catalog),
   вага збігається, і виграє пізніший style.css → картка мала 10px, через що
   внутрішня ширина була на 4px більша, а кнопки «В корзину» / «Подробнее» —
   на 2px ширші за бойові. base.css підключається після style.css, тож
   повертаємо бойове значення тут. */
:is(.pl-catalog, .related_products) .product { padding: 12px; }

/* Штатна Woo-кнопка «Переглянути кошик» після AJAX-додавання — на бойовому
   її немає (там модалка «Товари у кошику»). 04.09.2026 */
.productfull .added_to_cart.wc-forward{display:none!important;}

/* Хрестик модалки «Товари у кошику» — computed-стилі бойового (04.09.2026):
   оранжевий квадрат з opacity .2 (виглядає світло-оранжевим). */
.modal.dop .close{position:absolute;top:10px;right:10px;background:#fa8b23;color:#fff;font-size:21px;font-weight:700;line-height:21px;padding:7px 20px;opacity:.2;border:0;border-radius:0;text-shadow:0 1px 0 #fff;}
.modal.dop .close:hover{opacity:.5;}

/* ── 04.09.2026, п.11 SEO-аудиту: іконка кошика в шапці більше не <a href>,
   а <span class="pl-cart-jump" role="button"> з переходом через theme.js
   (див. plomba_render_cart_widget_inner() у functions.php).
   Оригінальний CSS цілиться в `a` (assets/css/original/style.css:
   .mycart_wrapp.externtwo_wrapp .mini_cart_img a{width:100%;height:100%;
   display:block;background:url(../images/icons/cart.svg) center center
   no-repeat;background-size:24px}), тому повторюємо те саме правило для
   нового елемента — вигляд лишається 1:1 (темний квадрат 50x40 з іконкою).
   Шлях до іконки відносно ЦЬОГО файла: assets/css/images/icons/cart.svg. */
.mycart_wrapp.externtwo_wrapp .mini_cart_img .pl-cart-jump{width:100%;height:100%;display:block;background:url(images/icons/cart.svg) center center no-repeat;background-size:24px;cursor:pointer;}

/* ── 04.09.2026, п.10 SEO-аудиту: блок «Що необхідно опломбувати?» на
   сторінках /uk/shcho-oplombuvaty і /ru/chto-oplombirovat (перенесено з
   Joomla-модулів #121/#99 скриптом scripts/import/import_module_pages.php).
   На бойовому рамку картинці плитки давало правило
     .mucntr>div>a>img{border:1px solid #ccc}   (original/style.css)
   де <a> лежав прямо в .col-md-4. У нас посилання-картинка загорнуте в
   .mucntr-pic (інакше wpautop лишає непарний </p> — див. коментар у
   скрипті), тому рамку повертаємо тут. */
.mucntr .mucntr-pic > a > img { border: 1px solid #ccc; }

/* «Оформити замовлення» у міні-кошику тепер span.pl-cart-jump (не <a>) —
   повторюємо стилі бойового `.extern_wrap .gotocart a` (07.09.2026). */
.extern_wrap .gotocart .pl-cart-jump{display:block;line-height:1.8;color:#fff;cursor:pointer;text-decoration:none;background-color:#fa8b23;margin:5px 0;padding:6px;font-weight:700;text-align:center}
.extern_wrap .gotocart .pl-cart-jump:hover,.extern_wrap .gotocart .pl-cart-jump:focus{background-color:#e57a12;box-shadow:0 0 10px #ccc;outline:0}
/* Блок «Товарів N шт. на суму …» у шапці теж веде в кошик (прохання клієнта 09.09.2026) */
.mycart_wrapp .mycart_mini_txt.pl-cart-jump{cursor:pointer}
button.checkout-button.pl-btn{font:inherit;border:0;cursor:pointer}