/* Бічні поля статей і категорій як у шапки. Статті 2026-09-11 (файл d),
   категорії додано 2026-09-11 (файл e).
   Окремий файл із датою в імені: LiteSpeed лишає бандлу старе ім'я при
   зміні вмісту, а браузер тримає його рік. Нова правка = нове ім'я файлу.
   ВІДКАТ: прибрати підключення в functions.php (tma_page_gutter_enqueue). */

/* Видимий край шапки = --tma-pad-x-* + 5px:
   Woodmart .container дає 15px, колонка шапки забирає -10px.
   Разом 37 (>900), 25 (601-900), 21 (<=600). */
:root {
    --tma-gutter: calc(var(--tma-pad-x) + 5px);
}

@media (max-width: 900px) {
    :root {
        --tma-gutter: calc(var(--tma-pad-x-tab) + 5px);
    }
}

@media (max-width: 600px) {
    :root {
        --tma-gutter: calc(var(--tma-pad-x-mob) + 5px);
    }
}

/* ---------- Стаття блогу ---------- */

/* Стаття (макет Woodmart 27896 UA / 27899 RU, зібраний в Elementor).
   В Elementor брейкпоінти 768/1024, а шапка міняється на 900/600, тому
   точного збігу налаштуваннями макета не отримати, лише так. */
:is(.elementor-27896, .elementor-27899) {
    padding-left: var(--tma-gutter);
    padding-right: var(--tma-gutter);
}

/* Kit 46 на мобільному дає кожному .e-con 10px збоку, і текст стояв
   на 10px правіше за шапку. Поле тепер задає обгортка вище. */
:is(.elementor-27896, .elementor-27899) .e-con {
    --container-default-padding-left: 0px;
    --container-default-padding-right: 0px;
}

:is(.elementor-27896, .elementor-27899) .wd-blog-element {
    padding-left: 0;
    padding-right: 0;
}

/* Обкладинка: файли 675px, а на 768 колонка 703px, тому праворуч
   лишалась порожня смуга. Обгортка .wd-post-image стоїть inline-block
   і стискається до файлу, тому на всю ширину треба і її, і картинку. */
:is(.elementor-27896, .elementor-27899) .wd-single-post-thumb .wd-post-image {
    display: block;
    width: 100%;
}

:is(.elementor-27896, .elementor-27899) .wd-single-post-thumb img {
    width: 100%;
    height: auto;
}

/* Рівно 768px: мобільні ширини колонок Elementor уже діють, а перенос
   рядка вмикається тільки з 767px, тому hero з'їжджав за лівий край. */
@media (max-width: 768px) {
    :is(.elementor-27896, .elementor-27899) .elementor-element-ca6f476 {
        --flex-wrap: wrap;
    }
}

/* ---------- Каталог і категорії ---------- */

/* Макет архіву 25179 UA / 27525 RU, один на /shop/ і всі категорії.
   Блоки макета розтягнуті Woodmart на всю ширину (wd-section-stretch)
   і мають лише 15px поля, тому на планшеті текст і товари стояли
   на 7.5px від краю, а шапка на 25.
   Розтягнутий блок зсунутий вліво на половину різниці між 100vw і
   шириною сторінки (у браузера зі смугою прокрутки це 7.5px, на iPad 0).
   Друга частина формули цей зсув повертає, і край стає рівно по шапці
   на будь-якому пристрої. На широкому екрані вміст і далі обмежений
   1140px по центру, там нічого не змінюється. */
:is(.elementor-25179, .elementor-27525) > .e-con.e-parent.wd-section-stretch {
    --padding-left: calc(var(--tma-gutter) + (100vw - var(--wd-scroll-w, 0px) - var(--wd-sticky-nav-w, 0px) - 100%) / 2);
    --padding-right: calc(var(--tma-gutter) + (100vw - var(--wd-scroll-w, 0px) - var(--wd-sticky-nav-w, 0px) - 100%) / 2);
}

/* Карусель статей унизу мала ще 15px власного поля і стояла правіше
   за товари. Як і в статті, поле задає блок вище. */
:is(.elementor-25179, .elementor-27525) .wd-blog-element {
    padding-left: 0;
    padding-right: 0;
}