/**
 * ELBIN Design System v1.0 — Redesign 2 (R2)
 * Дизайн-токени для нової версії сайту.
 * Префікс усіх змінних: --elbin-r2-*
 *
 * Цей файл підключається через inc/elbin-redesign/enqueue.php
 * Не редагувати style.css батьківської теми.
 */

/* Шрифти селфхостяться (variable woff2, latin+cyrillic+cyrillic-ext — ₴ у cyr-ext):
   без запиту на fonts.googleapis.com (GDPR/швидкість) і без каскаду @import.
   Два основні файли прелоудяться в enqueue.php → свап до першого рендеру, CLS ~0. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/manrope-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('assets/fonts/jbmono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('assets/fonts/jbmono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('assets/fonts/jbmono-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
    /* === БРЕНДОВІ КОЛЬОРИ === */
    /* Звірено з фінальним дизайн-пакетом elbin-final-v1 (tokens.css дизайну) */
    --elbin-r2-accent: #1AD0CA;
    --elbin-r2-accent-50: #E8FBFA;       /* = --accent-tint у дизайні */
    --elbin-r2-accent-100: #C9F5F3;
    --elbin-r2-accent-600: #16B8B2;      /* = --accent-hover у дизайні */
    --elbin-r2-accent-700: #0E9994;      /* = --accent-deep у дизайні */
    --elbin-r2-accent-hover: #16B8B2;    /* alias до фінального дизайну */
    --elbin-r2-ink-on-accent: #063D2E;

    /* === СПІЛЬНИЙ ТЕМНИЙ ФОН ШАПКИ/ПІДВАЛУ ===
       Єдина точка правди для темного фону: ОСНОВНИЙ ряд хедера + футер
       (рішення 10.07: обидва #0D0D0D, світліша лише верхня смуга хедера —
       окремий токен нижче). Хедер фактично фарбувався #000000 з Customizer
       (інлайн перекривав токен) — перебиваємо токеном у header-main.css. */
    --elbin-surface-dark: #0D0D0D;

    /* === ТЕМНА ПАЛІТРА ХЕДЕРА (top-bar / account / основний рядок) ===
       Спільні дефолти темного хедера фінального дизайну. Елементи білдера
       (top-bar тощо) беруть їх як дефолти в dynamic-styles; Customizer-опції
       перекривають per-element. Звірено з дизайн-tokens.css (--header-*). */
    /* Верхня смуга хедера — світліша за решту темних поверхонь (10.07). */
    --elbin-r2-header-top-bg: #1A1A1A;
    --elbin-r2-header-bg: var(--elbin-r2-header-top-bg);   /* топбар читає це */
    /* Основний (middle) ряд хедера = спільний темний (стікі-бар і кільця
       бейджів-лічильників читають цей самий токен). */
    --elbin-r2-header-mid-bg: var(--elbin-surface-dark);
    --elbin-r2-header-text: #F4F4F5;        /* основний текст/іконки */
    --elbin-r2-header-text-3: #A1A1A6;      /* приглушений сервіс-текст/лінки */
    --elbin-r2-header-line: #2C2C2C;        /* розділювачі/бордер */
    /* Hover лінків хедера = наявний бренд-акцент (новий accent НЕ вводимо) */
    --elbin-r2-header-accent: var(--elbin-r2-accent);

    /* === ВИСОТА НИЖНІХ ШТОРОК (моб.) ===
       Спільна стартова висота bottom-sheet'ів (каталог/кошик/обране/акаунт).
       Ручка `__handle` тягне цю змінну наживо (mobile-nav.js), значення
       памʼятається у localStorage і застосовується до ВСІХ шторок.
       ponytail: константа-дефолт; винести в Customizer, якщо знадобиться. */
    --elbin-sheet-h: 55vh;

    /* === НЕЙТРАЛЬНІ === */
    --elbin-r2-surface: #FFFFFF;
    --elbin-r2-surface-2: #FAFAFB;
    --elbin-r2-surface-3: #F5F6F7;
    --elbin-r2-line: #E4E6E9;
    --elbin-r2-border: #E4E6E9;          /* alias: частина CSS використовує -border */
    --elbin-r2-text-3: #6C757D;
    --elbin-r2-text-2: #474E54;
    --elbin-r2-text: #1A1A1A;            /* фінальний дизайн: --text #1A1A1A */
    --elbin-r2-ink: var(--elbin-surface-dark);   /* спільний темний фон (= #0D0D0D з 10.07) */

    /* === СЕМАНТИЧНІ === */
    --elbin-r2-success: #0F9D58;
    --elbin-r2-warning: #F4B400;
    --elbin-r2-error: #DB4437;
    --elbin-r2-info: #2563EB;
    --elbin-r2-sale: #DB4437;
    --elbin-r2-hit: #F4B400;

    /* === ТИПОГРАФІКА === */
    --elbin-r2-font-ui: 'Manrope', system-ui, -apple-system, sans-serif;
    --elbin-r2-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    --elbin-r2-fs-display: 48px;
    --elbin-r2-fs-h2: 32px;
    --elbin-r2-fs-h3: 24px;
    --elbin-r2-fs-h4: 18px;
    --elbin-r2-fs-body: 16px;
    --elbin-r2-fs-small: 14px;
    --elbin-r2-fs-caption: 12px;

    /* === ПЛАВНІ (FLUID) РОЗМІРИ ЗАГОЛОВКІВ — clamp(min, vw, max) ===
       Замінюють фіксовані «сходинки» з медіа-запитів: плавно покривають
       проміжні ширини + автоматично доростають до max на ultrawide.
       min = старий мобільний розмір, max = старий десктопний, vw — нахил.
       Орієнтир нахилу: viewport 360→1440px. */
    /* Hero title: 56px (моб) → 112px (десктоп) */
    /* 56px @375 → 112px @1440 (лінійно). Стара формула 4rem+4.2vw давала
       ~80px на мобільному (підлога 56px була недосяжна), через що довге
       «Інструмент» не влазило й переносилось із дефісом. */
    --elbin-r2-fs-hero-title: clamp(40px, 2.27rem + 5.26vw, 112px);
    /* Hero metric-value: 24px → 40px */
    --elbin-r2-fs-hero-metric: clamp(24px, 1.2rem + 1.4vw, 40px);
    /* Секційні H2 категорій (cat-card headline): 32px → 48px */
    --elbin-r2-fs-h2-fluid: clamp(32px, 1.8rem + 1.4vw, 48px);
    /* Заголовки сторінок (page-info, contacts, archive): 30px → 40px */
    --elbin-r2-fs-page-title: clamp(30px, 1.7rem + 0.9vw, 40px);
    /* Заголовок кошика: 26px → 32px */
    --elbin-r2-fs-cart-title: clamp(26px, 1.5rem + 0.5vw, 32px);

    --elbin-r2-fw-display: 800;
    --elbin-r2-fw-heading: 700;
    --elbin-r2-fw-medium: 500;
    --elbin-r2-fw-body: 400;

    --elbin-r2-lh-display: 1.1;
    --elbin-r2-lh-heading: 1.25;
    --elbin-r2-lh-body: 1.5;

    --elbin-r2-ls-display: -0.02em;
    --elbin-r2-ls-eyebrow: 0.08em;

    /* === ВІДСТУПИ (4-pt scale) === */
    --elbin-r2-s-4: 4px;
    --elbin-r2-s-8: 8px;
    --elbin-r2-s-12: 12px;
    --elbin-r2-s-16: 16px;
    --elbin-r2-s-20: 20px;
    --elbin-r2-s-24: 24px;
    --elbin-r2-s-32: 32px;
    --elbin-r2-s-48: 48px;
    --elbin-r2-s-64: 64px;

    /* === РАДІУСИ === */
    --elbin-r2-r-control: 6px;
    --elbin-r2-r-card: 8px;
    --elbin-r2-r-pill: 999px;

    /* === ТІНІ === */
    --elbin-r2-sh-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --elbin-r2-sh-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
    --elbin-r2-sh-modal: 0 16px 40px rgba(0, 0, 0, 0.14);

    /* === ЛАЙАУТ === */
    /* Фул-width 2026-06-12: контейнер R2 слідує за шириною теми Blocksy —
       min(edge-spacing у vw, cap із Customizer maxSiteWidth). Свідомо беремо
       --theme-container-width-base (vw), а НЕ --theme-container-width (містить
       100%, що ламало б absolute-елементи типу дропдауна мегаменю).
       Fallback 1280px — стара фіксована ширина дизайну. */
    --elbin-r2-container: min(var(--theme-container-width-base, 90vw), var(--elbin-r2-container-cap, 1280px));
    --elbin-r2-gutter: 16px;

    /* Вирівнювання по краю ХЕДЕРА (2026-06-24). Хедер .ct-container-fluid на
       ≥1000px тягнеться на calc(100vw - 60px) → рівно 30px бічного поля НА ВСІХ
       ширинах (без капу — тому хедер на 2560 теж 30/30). Цей токен повторює ту
       саму геометрію ОДИН-В-ОДИН (без min() зі стелею), щоб бредкрамбс/H1 архіву,
       грід каталогу і контент футера ставали в одну лінію з лого хедера (30px)
       на БУДЬ-ЯКІЙ ширині, у т.ч. ultrawide 2560+. Overflow не виникає: width
       (не min-width) + body{overflow-x:hidden} (база Blocksy) — та сама модель,
       що дає хедеру чисті 30/30 без скролу. ЛИШЕ для цільових оверрайдів
       (archive-category, footer) — НЕ чіпає вужчий --elbin-r2-container, яким
       користуються чекаут/вішліст/таби single (там читабельний вузький кап). */
    --elbin-r2-edge-container: calc(100vw - 60px);

    /* Стеля ширини контейнера R2. На звичайних екранах = 1280px (стара межа
       дизайну). На ultrawide (≥1920px) піднімається, щоб контент не «капився
       острівцем» серед порожніх полів. Споживається у формулі --elbin-r2-container
       нижче через media-перевизначення. Центрування зберігається margin:0 auto. */
    --elbin-r2-container-cap: var(--theme-normal-container-max-width, 1280px);

    /* === АНІМАЦІЇ === */
    --elbin-r2-transition-fast: 0.15s ease;
    --elbin-r2-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --elbin-r2-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   УЗГОДЖЕННЯ ГЛОБАЛЬНОЇ ПАЛІТРИ ТЕМИ З R2-АКЦЕНТОМ
   Кнопки WC-архіву, ghost-кнопка «Каталог» у хедері тощо
   беруть колір з палітри Customizer (#2872fa — синій).
   Перемаповуємо на бірюзовий акцент фінального дизайну.
   ========================================================= */

:root {
    --theme-palette-color-1: var(--elbin-r2-accent);
    --theme-palette-color-2: var(--elbin-r2-accent-600);
    --theme-button-background-initial-color: var(--elbin-r2-accent);
    --theme-button-background-hover-color: var(--elbin-r2-accent-hover);
    --theme-button-text-initial-color: var(--elbin-r2-ink-on-accent);
    --theme-button-text-hover-color: var(--elbin-r2-ink-on-accent);
}

/* === УТИЛІТАРНІ КЛАСИ === */

.elbin-r2-mono {
    font-family: var(--elbin-r2-font-mono);
    font-feature-settings: 'tnum' on;
}

.elbin-r2-tabular {
    font-variant-numeric: tabular-nums;
}

.elbin-r2-eyebrow {
    font-family: var(--elbin-r2-font-ui);
    font-size: var(--elbin-r2-fs-caption);
    font-weight: var(--elbin-r2-fw-heading);
    letter-spacing: var(--elbin-r2-ls-eyebrow);
    text-transform: uppercase;
    color: var(--elbin-r2-accent-700);
}

.elbin-r2-container {
    max-width: var(--elbin-r2-container);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 768px) {
    .elbin-r2-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Tablet/mobile: R2-секції займають всю ширину (як у затвердженому дизайні),
   формула з edge-spacing діє лише на десктопі ≥1000px (брейкпоінт Blocksy) */
@media (max-width: 999.98px) {
    :root {
        --elbin-r2-container: 100%;
    }
}

/* Ultrawide: на дуже широких екранах піднімаємо стелю контейнера, щоб контент
   не виглядав вузьким острівцем. Центрування зберігається (margin:0 auto).
   Нижні екрани (<1920) не зачіпаються — там працює дефолтний cap 1280px.
   Гейт min-width:1920 зі шкали брейкпоінтів. */
@media (min-width: 1920px) {
    :root {
        --elbin-r2-container-cap: 1440px;
    }
}

@media (min-width: 2560px) {
    :root {
        --elbin-r2-container-cap: 1600px;
    }
}

/* =========================================================
   ЗАХИСТ ВІД ГОРИЗОНТАЛЬНОГО СКРОЛУ НА ВУЗЬКИХ ЕКРАНАХ (320–360px)
   R2-секції ніколи не повинні бути ширшими за viewport. overflow-x:clip
   (не hidden — clip не створює scroll-контейнер і не ламає sticky всередині).
   Гейт ≤360 зі шкали; обмежено R2-обгортками, щоб не зачіпати інші сторінки. */
@media (max-width: 360px) {
    .elbin-r2-hero,
    .elbin-r2-categories,
    .elbin-r2-hits,
    .elbin-r2-about,
    .elbin-r2-mosaic {
        overflow-x: clip;
    }

    .elbin-r2-container {
        max-width: 100%;
    }
}

/* =========================================================
   ВИРІВНЮВАННЯ КОНТЕНТ-СТОРІНОК ПО КРАЮ ХЕДЕРА (30px)
   ─────────────────────────────────────────────────────────
   Рішення 2026-06-25 (Данило): інфо-сторінки, контакти й секції
   головної тягнуться на той самий край, що хедер/футер/каталог
   (--elbin-r2-edge-container = 100vw-60px → рівно 30px поля), щоб
   не було розбіжності «десь повна ширина, десь боксед 1280px».
   Той самий патерн, що для каталогу (archive-category.css §edge).
   Внутрішні читабельні колонки (стаття інфо тощо) мають власний
   max-width, тож рядок тексту не розтягується. Форми checkout/
   wishlist СВІДОМО не чіпаємо — там вузький кап доречний.
   Лише десктоп ≥1000px; на планшеті/мобільному контейнер уже 100%.
   ========================================================= */
@media (min-width: 1000px) {
    .elbin-r2-info .elbin-r2-container,
    .elbin-r2-contacts .elbin-r2-container,
    .elbin-r2-hero .elbin-r2-container,
    .elbin-r2-categories .elbin-r2-container,
    .elbin-r2-hits .elbin-r2-container,
    .elbin-r2-about .elbin-r2-container {
        max-width: var(--elbin-r2-edge-container);
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================
   ГЛОБАЛЬНЕ ПЕРЕВИЗНАЧЕННЯ ШРИФТУ ДЛЯ R2-КОМПОНЕНТІВ
   ========================================================= */

.elbin-r2-hero,
.elbin-r2-hero *,
.elbin-r2-categories,
.elbin-r2-categories *,
.elbin-r2-mosaic,
.elbin-r2-mosaic *,
.elbin-r2-hits,
.elbin-r2-hits *,
.elbin-r2-card,
.elbin-r2-card * {
    font-family: var(--elbin-r2-font-ui) !important;
}

.elbin-r2-hero__metrics,
.elbin-r2-hero__metabar,
.elbin-r2-card__sku,
.elbin-r2-card__stock,
.elbin-r2-mosaic__count {
    font-family: var(--elbin-r2-font-mono) !important;
}

/* =========================================================
   ГЛОБАЛЬНА СТРАХОВКА ВІД ГОРИЗОНТАЛЬНОГО ПЕРЕПОВНЕННЯ
   ─────────────────────────────────────────────────────────
   Будь-який R2-компонент може отримати нерозривний рядок
   (артикул, IBAN/РНОКПП, email, ТТН, URL, купон) з даних чи
   редактора. overflow-wrap ламає такий рядок ЛИШЕ коли він
   інакше виліз би за межі — на звичайний текст і на елементи
   з white-space:nowrap (труси/еліпсиси) не впливає, тож
   безпечно для всіх розкладок. Грідам додатково потрібен
   minmax(0,1fr) на трек (див. page-info/contacts/тощо).
   ========================================================= */
[class^="elbin-r2-"],
[class*=" elbin-r2-"] {
    overflow-wrap: break-word;
}

/* =========================================================
   ГЛОБАЛЬНА СТРАХОВКА ВІД iOS-ЗУМУ НА ПОЛЯХ ВВОДУ
   ─────────────────────────────────────────────────────────
   iOS Safari автоматично зумить сторінку при фокусі на будь-яке
   редаговане поле з computed font-size < 16px (баг Данила 03.07:
   зум при логіні в акаунт-панелі). У темі такі поля розкидані
   (акаунт 14px, чекаут 14px, контакти 14px, фільтр ціни 13px,
   пошук-сторінка 14px…) — замість латати кожен файл тримаємо
   один глобальний floor. !important свідомий: правило-запобіжник
   має перебивати будь-який компонентний розмір на мобільному.
   Кнопок/радіо/чекбоксів не стосується — вони не зумляться.
   ========================================================= */
@media (max-width: 999.98px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}