/*
 * Theme — Main CSS
 * Only design tokens (CSS variables) + minimal base.
 * All project-specific styles are written per project.
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Colors — overridden via Customizer inline CSS */
    --color-primary:   #000000;
    --color-secondary: #ffffff;
    /* Приглушений червоний замість чистого #ff0000 (запит Viktor). Чистий
       червоний на великих заливках кричить і одночасно гірше читається:
       білий текст на #ff0000 дає 4.0:1, тобто НЕ проходить WCAG AA (4.5:1),
       а на #d62828 — 5.0:1. Тобто колір став тихішим і доступнішим одразу. */
    --color-accent:    #d62828;
    /* Колір кнопки купівлі й шапок таблиць — цегляний, тихіший за акцент
       (запит Viktor: чистий червоний на цих елементах надто різкий). Окремий
       токен, а не --color-accent: акцент лишається за ціною, плашкою «Акція»
       і рисками, а «дія» отримує свій відтінок тієї ж родини. Білий текст на
       ньому — 5.94:1, AA проходить. */
    --color-action:    #a8442f;
    --color-text:      #111111;
    --color-muted:     #666666;
    --color-border:    #e0e0e0;
    --color-bg:        #ffffff;
    --color-bg-alt:    #f5f5f5;
    /* Насиченіші відповідники двох попередніх — для таблиць. #e0e0e0 і
       #f5f5f5 підібрані під тонкі роздільники й ледь помітні підкладки, і
       в таблиці з даними вони зникають: сітка не читається, смуги через
       рядок майже не видно. Ці два — та сама роль, але з контрастом, який
       у таблиці потрібен. Окремі токени, а не хардкод на місці: таблиці в
       проєкті не одні. */
    --color-border-strong: #999999;
    --color-bg-muted:      #ececec;

    /* Typography — ЗАФІКСОВАНО з живого сайту 2026-08-24 (docs/00-rules.md, правило №1).
       Змінювати заборонено без узгодження з Viktor. */
    --font-body:    'Roboto', sans-serif;
    --font-heading: 'Open Sans', sans-serif;
    --line-height:  1.6;

    /* Layout */
    --container-width:   1320px;
    --container-padding: 1.5rem;

    /* UI */
    --radius:     4px;
    --transition: 0.2s ease;
    --shadow:     0 4px 12px rgba(0, 0, 0, .12);

    /* Header / Footer */
    --header-height: 70px;
    --header-bg:     #ffffff;
    --footer-bg:     #111111;
    --footer-color:  #7a7a7a;

    /* Z-indexes */
    --z-dropdown:        100;
    --z-sticky:          200;
    /* Для дропдаунів усередині <header> (сиблінга .nav-bar, а не його
       нащадка) — інакше .nav-bar своїм --z-sticky перекриває їх зверху. */
    --z-header-dropdown: 300;
    --z-modal:           400;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-padding-top: var(--header-height);
}
/* Заборона прокрутки сторінки під відкритим мобільним меню (js/main.js,
   mobileMenu() → .has-locked-scroll на <html>). padding-right компенсує
   ширину смуги прокрутки, що зникає разом з overflow: hidden — інакше
   контент під меню «сіпається» вправо на її ширину. */
html.has-locked-scroll {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
}

body {
    font-family:      var(--font-body);
    /* 500, а не браузерні 400: сайт читають і люди старшого віку, тонкий
       текст їм важко розрізняти (запит Viktor). Roboto підключений змінним
       шрифтом 300–700, тож це та сама гарнітура, без нових файлів. */
    font-weight:      500;
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
}

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 20px;
    margin:    0 auto;
}

/* Screen reader text — required by WordPress */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}

/* ── Header: announcement bar ──────────────────────────────────────────────
   Смуга пройшла три стани, і кожен наступний лікував те, чого не долікував
   попередній. Була чорна над шапкою — і її не помічали взагалі: чорне над
   білою шапкою око читає як елемент інтерфейсу браузера. Стала акцентною —
   помітність зросла, але лишалась друга причина: смуга стояла серед
   службових елементів угорі екрана, де на неї не дивляться.

   Тепер вона під .nav-bar і біжить. Обидва рішення — за запитом Viktor.
   Позиція: на межі шапки й контенту, тобто там, куди око вже опустилось.
   Рух: єдине, що неможливо ігнорувати, — але саме тому він і вимкнений там,
   де людина попросила про це в системі (prefers-reduced-motion нижче). */
.header-note {
    overflow: hidden;
    background: var(--color-accent);
}
/* Дві однакові групи поспіль — щоб зсув на половину ширини стрічки
   (translateX(-50%)) повертав картинку рівно в початковий стан: розриву в
   місці склейки не видно, і цикл можна крутити нескінченно. */
.header-note__marquee {
    display: flex;
    /* max-content, а не 100%: translateX(-50%) рахує відсоток від ВЛАСНОЇ
       ширини елемента. При width:100% стрічка була б завширшки з екран,
       половина від неї — пів групи, і на склейці циклу картинка стрибала б.
       З max-content стрічка дорівнює двом групам, а -50% — рівно одній. */
    width: max-content;
    animation: header-note-slide 30s linear infinite;
}
/* min-width у vw, а не у %: відсоток тут рахувався б від ширини стрічки, а
   вона сама рахується від умісту — вийшла б циклічна залежність. vw від
   в'юпорта й такої проблеми не має.

   Сам мінімум потрібен, щоб на широкому моніторі група розтяглась на всю
   ширину, а не лишила порожнє місце в кінці; space-around тоді розкладає
   повторення рівномірно. На вузькому екрані група й так ширша за екран. */
.header-note__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
}
.header-note__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
    color: var(--color-secondary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* Рядок, що біжить, не має переноситись: перенос розірвав би стрічку по
       висоті просто посеред руху. */
    white-space: nowrap;
}
.header-note__icon {
    flex: 0 0 auto;
}
@keyframes header-note-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Навів — зупинилось. Рухомий текст читається повільніше за нерухомий, тож
   людині треба дати спосіб його дочитати. */
.header-note:hover .header-note__marquee {
    animation-play-state: paused;
}
/* Системне «менше руху» — стрічка стає звичайною статичною плашкою з одним
   повідомленням по центру. Саме вимкнути анімацію мало: без цього на екрані
   лишились би вісім копій тексту підряд. */
@media (prefers-reduced-motion: reduce) {
    .header-note__marquee {
        animation: none;
    }
    .header-note__group + .header-note__group {
        display: none;
    }
    .header-note__group {
        justify-content: center;
    }
    .header-note__item + .header-note__item {
        display: none;
    }
}

/* ── Header: shell ──────────────────────────────────────────────────────── */
.site-header {
    background: var(--header-bg);
}


.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
}

.site-logo {
    flex: 0 0 auto;
}
/* .custom-logo — власний клас WordPress (get_custom_logo()), не наш БЕМ:
   тег/розмітку тут задає ядро, іншого гачка на неї немає. */
.site-logo .custom-logo {
    display: block;
    height: 48px;
    width: auto;
}

/* ── Header: actions row ───────────────────────────────────────────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.header-actions__promo {
    color: var(--color-accent);
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.header-actions__promo:hover,
.header-actions__promo:focus-visible {
    text-decoration: underline;
}

.header-search {
    position: relative;
}
.header-search__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}
.header-search__toggle:hover,
.header-search__toggle:focus-visible {
    color: var(--color-accent);
}
/* .search-form — самостійний блок (searchform.php), не залежить від того,
   де його підключили: у хедері, в сайдбарі чи на сторінці результатів. */
.search-form {
    display: flex;
    gap: 8px;
}
.search-form__field {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 15px;
}
.search-form__submit {
    padding: 10px 16px;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ── Панель пошуку — випадає з-під .nav-primary, на всю ширину ─────────────
   grid-template-rows 0fr → 1fr замість max-height: плавно й без вигадування
   довільної граничної висоти під динамічний список результатів. */
/* position: absolute — панель не задає власну висоту (auto), тож анімувати є
   лише сенс через opacity/transform, не через height/grid-rows: той трюк
   потребує визначеного простору для розподілу fr, якого в abspos-елемента
   з height:auto немає. */
.search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.search-panel--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.search-panel .container {
    padding-top: 16px;
    padding-bottom: 16px;
}

.search-results {
    margin-top: 12px;
}
.search-results__message {
    margin: 0;
    padding: 8px 0;
    color: var(--color-muted);
    font-size: 14px;
}
.search-results__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 60vh;
    overflow-y: auto;
}
.search-result__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
}
.search-result__link:hover,
.search-result__link:focus-visible {
    background: var(--color-bg-alt);
}
.search-result__image {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
}
.search-result__title {
    font-family: var(--font-body);
    font-size: 15px;
}

/* Кабінет — така сама кнопка-іконка, як пошук і кошик: 40px, колір тексту,
   на ховері акцент. Тримаємо їх однаковими, щоб ряд у хедері читався як один. */
.account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text);
    text-decoration: none;
}
.account-icon:hover,
.account-icon:focus-visible {
    color: var(--color-accent);
}

.cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text);
    text-decoration: none;
}
.cart-icon:hover,
.cart-icon:focus-visible {
    color: var(--color-accent);
}
.cart-icon__count {
    position: absolute;
    top: -2px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ── Header: language dropdown (Theme\WPML\dropdown()) ─────────────────── */
.lang-dropdown {
    position: relative;
}
.lang-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}
.lang-dropdown__toggle:hover,
.lang-dropdown__toggle:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.lang-dropdown__chevron {
    flex: 0 0 auto;
    transition: transform var(--transition);
}
.lang-dropdown.is-open .lang-dropdown__chevron {
    transform: rotate(180deg);
}
.lang-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: var(--z-header-dropdown);
    display: none;
    flex-direction: column;
    min-width: 80px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.lang-dropdown.is-open .lang-dropdown__menu {
    display: flex;
}
.lang-dropdown__link {
    display: block;
    padding: 6px 8px;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
}
.lang-dropdown__item--active .lang-dropdown__link,
.lang-dropdown__link:hover {
    background: var(--color-bg-alt);
}

/* ── Header: mobile toggle ─────────────────────────────────────────────── */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.menu-toggle__line {
    display: block;
    height: 2px;
    background: var(--color-text);
    transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle.is-active .menu-toggle__line--1 { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle__line--2 { opacity: 0; }
.menu-toggle.is-active .menu-toggle__line--3 { transform: translateY(-7px) rotate(-45deg); }

/* ── Header: primary navigation ────────────────────────────────────────── */
.nav-bar {
    position: relative;
}

.nav-primary {
    background: var(--color-bg);
}

/* ПК/планшет — рядок категорій лишається видимим при прокрутці. На мобайлі
   .nav-primary стає off-canvas-панеллю (position: fixed, див. медіа-запит
   нижче) — sticky там не потрібен. */
@media (min-width: 769px) {
    .nav-bar {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }
    body.admin-bar .nav-bar {
        top: 32px;
    }
    .nav-primary {
        border-bottom: 1px solid transparent;
        transition: border-color var(--transition), box-shadow var(--transition);
    }
    .nav-primary--stuck {
        border-bottom-color: var(--color-border);
        box-shadow: var(--shadow);
    }
}
/* Вузький діапазон, де адмінбар уже 46px (WP-брейкпоінт 782px), а наш
   .nav-bar ще sticky (наш брейкпоінт — 769px). */
@media (min-width: 769px) and (max-width: 782px) {
    body.admin-bar .nav-bar {
        top: 46px;
    }
}

.primary-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px clamp(6px, 1.2vw, 16px);
    margin: 0;
    padding: 10px 0;
    list-style: none;
}

/* .nav-extra — акційне посилання/телефон/соцмережі всередині бургер-меню.
   На десктопі це вже є в .header-actions — тут не потрібно (медіа-запит
   для мобайлу нижче вмикає видимість). */
.nav-extra {
    display: none;
}

.primary-nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.primary-nav__link {
    padding: 6px 0;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: clamp(12px, 1.63vw - 0.5px, 22px);
    font-weight: 600;
    white-space: nowrap;
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible {
    color: var(--color-accent);
}

.primary-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(16px, 1.5vw, 24px);
    height: clamp(16px, 1.5vw, 24px);
    margin-left: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-muted);
    cursor: pointer;
}
.primary-nav__chevron {
    transition: transform var(--transition);
}
.primary-nav__item--has-children.is-open .primary-nav__chevron {
    transform: rotate(180deg);
}

.primary-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    display: none;
    flex-direction: column;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.primary-nav__item--has-children:hover > .primary-nav__submenu,
.primary-nav__item--has-children.is-open > .primary-nav__submenu {
    display: flex;
}

.primary-nav__subitem {
    display: flex;
}
.primary-nav__sublink {
    flex: 1;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 500;
}
.primary-nav__sublink:hover,
.primary-nav__sublink:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-accent);
}

/* ── Header: responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }
    /* ≤768px завжди в межах ≤782px-брейкпоінта WP для адмінбару — там він
       завжди 46px, без додаткового поділу. */
    body.admin-bar .site-header {
        top: 46px;
    }
    .header-actions__promo {
        display: none;
    }
    .header-note__item {
        gap: 8px;
        padding: 8px 18px;
        font-size: 15px;
        letter-spacing: .03em;
    }
    /* На телефоні іконка дрібнішає разом із текстом — інакше вона починає
       важити більше за саме повідомлення. */
    .header-note__icon {
        width: 16px;
        height: 16px;
    }
    /* Та сама швидкість на вузькому екрані означала б удвічі швидший рух
       відносно ширини екрана — текст не встигали б прочитати. */
    .header-note__marquee {
        animation-duration: 20s;
    }
    .header-inner {
        gap: 12px;
    }
    .site-logo .custom-logo {
        height: 34px;
    }
    .header-actions {
        gap: 8px;
    }
    .header-search__toggle,
    .account-icon,
    .cart-icon,
    .menu-toggle {
        width: 34px;
        height: 34px;
    }
    .menu-toggle {
        display: flex;
    }
    .nav-primary {
        position: fixed;
        /* --mobile-header-offset — сумарна висота .header-note + .site-header,
           рахує js/main.js (setMobileHeaderOffset). Меню починається під ними,
           не поверх — фолбек 0px, якщо JS ще не встиг відпрацювати. */
        inset: var(--mobile-header-offset, 0px) 0 0 0;
        z-index: var(--z-modal);
        width: 100%;
        padding: 20px 0;
        overflow-y: auto;
        border-top: 0;
        box-shadow: var(--shadow);
        transform: translateX(100%);
        transition: transform var(--transition);
    }
    .nav-primary.is-open {
        transform: translateX(0);
    }
    .primary-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }
    .primary-nav__item {
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid var(--color-border);
    }
    .primary-nav__link {
        flex: 1;
        padding: 12px 0;
        font-size: 18px;
    }
    .primary-nav__toggle {
        position: absolute;
        top: 4px;
        right: 0;
        width: 40px;
        height: 40px;
    }
    .primary-nav__submenu {
        position: static;
        display: none;
        width: 100%;
        margin: 0 0 8px;
        padding: 0 0 0 12px;
        border: 0;
        box-shadow: none;
    }
    .primary-nav__item--has-children.is-open > .primary-nav__submenu {
        display: flex;
    }

    .nav-extra {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
    }
    .nav-extra__promo {
        color: var(--color-accent);
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
    }
    .nav-extra__phone {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
    }
    .nav-extra__socials {
        display: flex;
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .nav-extra__social {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: 50%;
    }
    .nav-extra__social:hover,
    .nav-extra__social:focus-visible {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }
}

/* ── Хлібні крихти (глобальні — на всіх сторінках, крім головної) ────────── */
.breadcrumbs {
    padding: 16px 0;
}
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-muted);
}
.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Роздільник — на самому елементі, а не окремим вузлом у розмітці:
   у DOM він не потрібен ні скрінрідеру, ні мікроданим. */
.breadcrumbs__item + .breadcrumbs__item::before {
    content: '›';
    color: var(--color-border);
}
.breadcrumbs__link {
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}
.breadcrumbs__current {
    color: var(--color-text);
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: 12px 0;
    }
    .breadcrumbs__list {
        font-size: 15px;
    }
    /* Остання ланка — повна назва сторінки, яка на мобайлі займала три
       рядки й дублювала h1 одразу під собою. Обрізаємо трикрапкою, а не
       ховаємо: у структурованих даних має лишитись те саме, що видно. */
    .breadcrumbs__item--current {
        min-width: 0;
    }
    .breadcrumbs__current {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-color);
    padding: 56px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 32px;
    padding-bottom: 40px;
}

.footer-brand__logo {
    max-width: 160px;
}
.footer-brand__logo img {
    display: block;
    max-width: 100%;
    height: auto;
}
.footer-brand__tagline {
    margin: 16px 0 0;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}

.footer-nav__title {
    margin: 0 0 16px;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.6;
}
/* Заголовки футера стояли тим самим білим, що й усе під ними, і через це не
   читались як заголовки — колонки зливались у білу масу. Виділяємо акцентною
   рискою знизу, а не кольором самого тексту: червоний на майже чорному тлі
   дає 4.7:1 проти 17:1 у білого, тобто заголовок став би помітнішим і
   водночас гіршим для читання. Риска дає акцент малою дозою й нічого не псує.

   inline-block — щоб риска йшла по ширині тексту, а не на всю колонку: на всю
   колонку вона читалась би як роздільник між блоками, а не як підкреслення.

   Правило спільне, а не скопійоване в кожен блок: заголовки рівноправні, і
   копія неминуче з'їхала б в одному з них на наступній правці. Кеглі при
   цьому лишаються різні — вони зняті з живого сайту. */
.footer-nav__title,
.footer-contact__title {
    display: inline-block;
    position: relative;
    padding-bottom: 8px;
}
.footer-nav__title::after,
.footer-contact__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: var(--color-accent);
}
.footer-contact__title {
    margin: 0 0 16px;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    line-height: 42px;
}
.footer-nav__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-nav__list a {
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    transition: color var(--transition);
}
.footer-nav__list a:hover,
.footer-nav__list a:focus-visible {
    color: var(--footer-color);
}

.footer-contact__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.6;
}
.footer-contact__hours {
    color: var(--color-secondary);
}
.footer-contact__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
}
.footer-contact__note {
    margin: 0 0 20px;
    color: var(--color-secondary);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.footer-contact__socials {
    display: flex;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.footer-contact__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-secondary);
    transition: color var(--transition);
}
.footer-contact__social:hover,
.footer-contact__social:focus-visible {
    color: var(--footer-color);
}

.footer-contact__locations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Тут стояло text-decoration: none, і через це представництва читались як
   список адрес, а не як посилання — клікати по них ніхто не здогадувався.
   Повертаємо підкреслення, але акцентним кольором: текст лишається білим
   (17:1), а червона лінія і позначає посилання, і тримає той самий акцент,
   що й риски під заголовками вище. */
.footer-contact__locations-list a {
    color: var(--color-secondary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
/* На ховері лінія йде за кольором тексту — інакше червоне підкреслення
   лишалось би висіти під посірілим словом. */
.footer-contact__locations-list a:hover,
.footer-contact__locations-list a:focus-visible {
    color: var(--footer-color);
    text-decoration-color: currentColor;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.footer-bottom__copyright {
    margin: 0;
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 1.6;
}
.footer-bottom__menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-bottom__menu a {
    color: var(--color-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition);
}
.footer-bottom__menu a:hover,
.footer-bottom__menu a:focus-visible {
    color: var(--footer-color);
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 40px;
    }
    .footer-contact__line {
        font-size: 18px;
    }
    .footer-contact__note {
        font-size: 18px;
        line-height: 1.22;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: 40px;
    }
    .footer-brand__tagline {
        font-size: 18px;
    }
    .footer-nav__title {
        font-size: 22px;
    }
    .footer-contact__title {
        font-size: 20px;
        line-height: 32px;
    }
    .footer-nav__title,
    .footer-contact__title {
        padding-bottom: 6px;
    }
    .footer-nav__title::after,
    .footer-contact__title::after {
        width: 40px;
    }
    .footer-contact__line {
        font-size: 17px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 32px;
    }
}

/* ── Картка товару (глобальна — використовується на всіх сторінках) ───────── */
.product-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.product-card__image {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.product-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-card__title {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}
.product-card__title a {
    color: var(--color-text);
    text-decoration: none;
}
.product-card__title a:hover,
.product-card__title a:focus-visible {
    text-decoration: underline;
}
/* Ціна стояла тим самим кольором і майже тією ж вагою, що й назва над нею,
   і в картці губилась: найгучнішим елементом була темна кнопка «Придбати»,
   а не те, заради чого людина в картку дивиться. Даємо ціні акцентний колір
   і на два пункти більший кегль — тепер у картці три різні рівні: назва
   (текстовий), ціна (акцент), кнопка (темна заливка).

   Контраст #d62828 на білому — 5.0:1, тобто AA проходить із запасом. */
.product-card__price {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-accent);
}
/* Стара ціна лишається сірою й дрібнішою — червоною має бути та, яку
   людина заплатить, інакше акція читається навпаки. */
.product-card__price del {
    margin-right: 6px;
    font-size: .82em;
    font-weight: 500;
    color: var(--color-muted);
}
/* WooCommerce віддає нову ціну в <ins>, а браузер за замовчуванням малює
   його підкресленим (а Firefox ще й підсвічує) — гасимо обидва. */
.product-card__price ins {
    background: none;
    text-decoration: none;
}
.product-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 12px;
    padding: 5px 20px;
    background: var(--color-action);
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 22px;
    text-decoration: none;
    border-radius: 50px;
    transition: background var(--transition);
}
.product-card__btn:hover,
.product-card__btn:focus-visible {
    background: color-mix(in srgb, var(--color-action) 82%, #000);
}

@media (max-width: 768px) {
    .product-card__title {
        font-size: 18px;
    }
    .product-card__price {
        font-size: 18px;
    }
    .product-card__btn {
        font-size: 17px;
        padding: 5px 16px;
    }
}

/* ── Картка категорії (глобальна — використовується на всіх сторінках) ────── */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    text-align: center;
}
.category-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 207 / 180;
}
.category-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.category-card__title {
    margin: 5px 0 10px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 600;
}
.category-card__title a {
    color: var(--color-text);
    text-decoration: none;
}
.category-card__title a:hover,
.category-card__title a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .category-card__title {
        font-size: 17px;
    }
}

/* ── Повідомлення WooCommerce (глобальні — кошик, картка товару, чекаут) ─────
   Розмітку віддає плагін: `.woocommerce-message` (успіх),
   `.woocommerce-info` (інформація), `.woocommerce-error` (помилка, це <ul>
   зі списком). Свої класи туди повісити нема куди, тому селектори — по
   класах плагіна.

   Стилі саме тут, а не в css/pages/cart.css: обгортка .woocommerce-notices-wrapper
   рендериться і в кошику, і на сторінці товару (перевірено в сирому HTML
   обох сторінок), а cart.css вантажиться лише на /cart/.

   Дефолт WooCommerce — сірувато-бузковий блок із 3px смугою згори й
   іконкою свого шрифту. Замість нього: рамка, лівий кольоровий кант і
   типографіка сайту. Палітра монохром + червоний (як на проді), тому успіх
   позначаємо нейтральним темним кантом, помилку — червоним; окремий
   зелений колір не вигадуємо. */
.woocommerce-notices-wrapper:empty {
    display: none;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
/* Сторінка подяки має власний клас замість .woocommerce-message — вигляд
   той самий, тож просто дописуємо його сюди, а не заводимо копію стилів. */
.woocommerce-notice--success {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 24px;
    /* Скидаємо падінг під іконку плагіна — саму іконку прибираємо нижче. */
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-text);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    list-style: none;
}
/* Іконка з власного шрифту WooCommerce — прибираємо разом із місцем під неї. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice--success::before {
    content: none;
}
.woocommerce-info {
    border-left-color: var(--color-muted);
}
.woocommerce-error {
    border-left-color: var(--color-accent);
}
/* Помилок може бути кілька — плагін віддає їх пунктами списку. */
.woocommerce-error li {
    display: list-item;
    width: 100%;
    margin: 0;
}

/* Кнопка всередині повідомлення («Переглянути кошик») — другорядна дія
   поруч із текстом, тому контурна, а не чорна: головна дія на сторінці
   інша. Праворуч, щоб не розривати речення. */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.woocommerce-message a.button.wc-forward,
.woocommerce-info a.button.wc-forward,
.woocommerce-error a.button.wc-forward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-left: auto;
    padding: 8px 20px;
    border: 1px solid var(--color-text);
    border-radius: 50px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--transition), color var(--transition);
}
.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-info .button:hover,
.woocommerce-notices-wrapper .woocommerce-error .button:hover,
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover,
.woocommerce-error a.button.wc-forward:hover {
    background: var(--color-text);
    color: var(--color-secondary);
}

@media (max-width: 768px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        padding: 14px 16px;
        font-size: 16px;
    }
    /* На телефоні кнопка під текстом і на всю ширину — поруч вона лишала
       тексту менше за половину рядка. */
    .woocommerce-notices-wrapper .woocommerce-message .button,
    .woocommerce-notices-wrapper .woocommerce-info .button,
    .woocommerce-notices-wrapper .woocommerce-error .button,
    .woocommerce-message a.button.wc-forward,
    .woocommerce-info a.button.wc-forward,
    .woocommerce-error a.button.wc-forward {
        width: 100%;
        margin-left: 0;
    }
}

/* ── Попап акції (pages/global/popup.php) ────────────────────────────────────
   Нативний <dialog>: підложку малює ::backdrop, закриття по Esc і фокус
   усередині — від браузера. Тому тут лише вигляд.

   Дизайн свідомо мовчазний: банер уже яскравий сам по собі, і обрамляти
   його ще чимось означало б змагатися з ним за увагу. Біла картка, той
   самий радіус 16px, що в підсумку кошика й на сторінці подяки, і один
   помітний хрестик. */
.popup {
    max-width: 480px;
    /* Не більше висоти екрана з полями: банер вертикальний, і на
       невисокому вікні він мусить вміщатися цілком, а не вимагати
       прокрутки всередині діалогу. */
    max-height: 88vh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    overflow: visible;
}
.popup::backdrop {
    background: rgba(0, 0, 0, .6);
}
.popup__inner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-bg);
    line-height: 0;
}
.popup__link {
    display: block;
}
.popup__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 88vh;
    /* contain, а не cover: банер — цілісний макет із текстом і цінами,
       обрізати його по краях означає з'їсти частину повідомлення. */
    object-fit: contain;
}
/* Хрестик усередині картки, а не поруч: поза нею він на вузькому екрані
   вилазив би за край підложки. Чорне коло — щоб читався на будь-якому
   банері, а не лише на світлому. */
.popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-text);
    color: var(--color-secondary);
    cursor: pointer;
    transition: opacity var(--transition);
}
.popup__close:hover {
    opacity: .85;
}
.popup__close:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .popup {
        max-width: calc(100vw - 40px);
    }
}

@media (max-width: 480px) {
    .popup {
        max-width: calc(100vw - 32px);
    }
    .popup__close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
}

/* ── Мобільний: крупніший дрібний текст ─────────────────────────────────────
   Сайт читає багато людей старшого віку, їм має бути зрозуміло, де і що
   (запит Viktor). Тому на ≤768px усі шрифти дрібніше 18px піднято за єдиною
   шкалою: 12→14, 13→15, 14→16, 15→16, 16→17, 17→18. Десктоп не чіпали.
   Правила, що вже були у мобільних медіа-блоках, підвищено на місці; сюди
   зібрано ті, що задавались лише для великих екранів. */
@media (max-width: 768px) {
    html { font-size: 17px; }
    .search-form__field { font-size: 16px; }
    .search-form__submit { font-size: 16px; }
    .search-results__message { font-size: 16px; }
    .search-result__title { font-size: 16px; }
    .product-card__price del { font-size: .9em; }
    .lang-dropdown__toggle { font-size: 16px; }
    .lang-dropdown__link { font-size: 16px; }
    .footer-bottom__copyright { font-size: 17px; }
    .footer-bottom__menu a { font-size: 16px; }
    .woocommerce-notice--success { font-size: 17px; }
    .woocommerce-notices-wrapper .woocommerce-message .button, .woocommerce-notices-wrapper .woocommerce-info .button, .woocommerce-notices-wrapper .woocommerce-error .button, .woocommerce-message a.button.wc-forward, .woocommerce-info a.button.wc-forward, .woocommerce-error a.button.wc-forward { font-size: 16px; }
}

/* ── Плаваючі іконки зв'язку (global/float-contacts) ───────────────────── */
/* Розміри й анімація промо-іконки — з прода (Elementor: 100px десктоп,
   75px планшет ≤1024, 50px мобільний ≤767; @keyframes spinWithDelay 4s —
   оберт за першу половину циклу, друга половина — пауза). */
.float-contacts {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.float-contacts__link {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    transition: transform .15s ease;
}
.float-contacts__link:hover,
.float-contacts__link:focus-visible {
    transform: scale(1.08);
}
.float-contacts__link svg {
    display: block;
    width: 100%;
    height: 100%;
}
.float-contacts__link--promo {
    width: 100px;
    height: 100px;
    animation: float-contacts-spin 4s linear infinite;
}
.float-contacts__link--promo:hover,
.float-contacts__link--promo:focus-visible {
    transform: none;
}
@keyframes float-contacts-spin {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}
@media (max-width: 1024px) {
    .float-contacts {
        right: 20px;
        bottom: 20px;
    }
    .float-contacts__link--promo {
        width: 75px;
        height: 75px;
    }
}
@media (max-width: 767px) {
    .float-contacts {
        gap: 8px;
    }
    .float-contacts__link {
        width: 48px;
        height: 48px;
    }
    .float-contacts__link--promo {
        width: 50px;
        height: 50px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .float-contacts__link,
    .float-contacts__link--promo {
        transition: none;
        animation: none;
    }
}