/* Хлібні крихти Rank Math (з octolab-auth-popup.php). Винесено з inline 26.10.2026 — кешується браузером. */
    .rank-math-breadcrumb,
    .rank-math-breadcrumb p {
        font-family: "e-Ukraine","Inter",system-ui,-apple-system,sans-serif;
        font-weight: 200;
        font-size: 14px;
        line-height: 150%;
        letter-spacing: -0.154px;
        color: #9A9A9A;
        margin: 0;
    }
    /* Last breadcrumb segment is the only true "current"; others marked .last by Rank Math
       are intermediate non-link segments — treat them as gray non-active too */
    .rank-math-breadcrumb .last:not(:last-of-type) {
        color: #9A9A9A !important;
    }
    /* Links (clickable parents) — gray; current page (last) — white */
    .rank-math-breadcrumb a {
        color: #9A9A9A !important;
        text-decoration: none;
        transition: color .15s ease;
    }
    .rank-math-breadcrumb a:hover { color: #F9F9F9 !important; }
    .rank-math-breadcrumb .last {
        color: #F9F9F9 !important;
    }
    /* Replace " - " with " › " separator */
    .rank-math-breadcrumb .separator {
        font-size: 0;
        margin: 0 4px;
        opacity: 1;
        color: #9A9A9A !important;
    }
    .rank-math-breadcrumb .separator::before {
        content: "›";
        font-size: 14px;
        padding: 0 4px;
        color: #9A9A9A;
    }

    /* Loop Grid layout: 1 big card (left, spans 2 rows) + 2 small (right). Apply class "octolab-posts-31" on Loop Grid. */
    .octolab-posts-31 .elementor-loop-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 282px 282px;
        gap: 17px;
    }
    .octolab-posts-31 .elementor-loop-container > .e-loop-item:first-of-type {
        grid-row: span 2;
    }
    .octolab-posts-31 .elementor-loop-container .elementor-element {
        --min-height: 0;
    }
    .octolab-posts-31 .elementor-loop-container > .e-loop-item,
    .octolab-posts-31 .elementor-loop-container > .e-loop-item > .elementor-element,
    .octolab-posts-31 .elementor-loop-container > .e-loop-item > * {
        height: 100%;
    }
    @media (max-width: 768px) {
        .octolab-posts-31 .elementor-loop-container {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
        .octolab-posts-31 .elementor-loop-container > .e-loop-item:first-of-type { grid-row: auto; }
    }

    /* Loop Grid list layout — horizontal card (image left, text right). Apply class "octolab-blog-list". */
    .octolab-blog-list .elementor-loop-container {
        grid-template-rows: auto !important;
        grid-auto-rows: auto !important;
        gap: 24px;
    }
    .octolab-blog-list .elementor-loop-container > .e-loop-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 40px !important;
        height: 356px !important;
        min-height: 356px !important;
        max-height: 356px !important;
        border-radius: 24px;
        overflow: hidden;
    }
    .octolab-blog-list .elementor-loop-container > .e-loop-item > .elementor-element:first-child {
        flex: 0 0 560px !important;
        width: 560px !important;
        max-width: 560px !important;
        height: 100% !important;
        min-height: 0 !important;
    }
    .octolab-blog-list .elementor-loop-container > .e-loop-item > .elementor-element:last-child {
        flex: 1 1 auto !important;
        width: auto !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        overflow: hidden;
    }
    @media (max-width: 768px) {
        .octolab-blog-list .elementor-loop-container > .e-loop-item {
            flex-direction: column !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }
        .octolab-blog-list .elementor-loop-container > .e-loop-item > .elementor-element:first-child {
            flex: 0 0 auto !important;
            width: 100% !important;
            max-width: none !important;
            height: 240px !important;
        }
    }

    /* Taxonomy Filter — pill buttons. Apply class "octolab-blog-filter". */
    .octolab-blog-filter .e-filter,
    .octolab-blog-filter ul.e-filter,
    .octolab-blog-filter .elementor-widget-container > ul,
    .octolab-blog-filter .elementor-widget-container > div {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 40px 0 !important;
    }
    .octolab-blog-filter .e-filter-item,
    .octolab-blog-filter li.e-filter-item {
        margin: 0 !important;
        padding: 0 !important;
    }
    .octolab-blog-filter .e-filter-item a,
    .octolab-blog-filter button.e-filter-item,
    .octolab-blog-filter .e-filter-item > span,
    .octolab-blog-filter li > a,
    .octolab-blog-filter li > button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 24px !important;
        border: 1px solid #5B49F3 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #F9F9F9 !important;
        font-family: "e-Ukraine","Inter",sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: -0.176px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: background-color .2s ease, color .2s ease !important;
        box-sizing: border-box !important;
    }
    .octolab-blog-filter .e-filter-item a:hover,
    .octolab-blog-filter button.e-filter-item:hover,
    .octolab-blog-filter li > a:hover,
    .octolab-blog-filter li > button:hover {
        background: rgba(91, 73, 243, 0.15) !important;
    }
    .octolab-blog-filter .e-filter-item-active a,
    .octolab-blog-filter .e-filter-item[aria-pressed="true"] a,
    .octolab-blog-filter .e-filter-item[aria-pressed="true"],
    .octolab-blog-filter button.e-filter-item[aria-pressed="true"],
    .octolab-blog-filter li.current a,
    .octolab-blog-filter li.active > a {
        background: #5B49F3 !important;
        color: #F9F9F9 !important;
        border-color: #5B49F3 !important;
    }
    @media (max-width: 768px) {
        .octolab-blog-filter .e-filter,
        .octolab-blog-filter ul.e-filter,
        .octolab-blog-filter .elementor-widget-container > ul,
        .octolab-blog-filter .elementor-widget-container > div {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }
    }

    /* Elementor Loop Grid pagination — Figma node 174:12853. */
    nav.elementor-pagination {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 40px !important;
        padding: 0 !important;
    }
    /* Prev pinned to left, Next pinned to right; numbers stay grouped in center. */
    nav.elementor-pagination .page-numbers.prev { margin-right: auto; }
    nav.elementor-pagination .page-numbers.next { margin-left: auto; }

    /* Number base — 64×64 circle, e-Ukraine 18/500, solid white. */
    nav.elementor-pagination .page-numbers {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 64px;
        min-width: 64px;
        height: 64px;
        border: none !important;
        border-radius: 1000px;
        font-family: "e-Ukraine", sans-serif !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        color: #F9F9F9 !important;
        text-decoration: none !important;
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0;
        transition: background-color .2s, color .2s;
    }
    nav.elementor-pagination a.page-numbers:not(.prev):not(.next):hover {
        background: rgba(91, 73, 243, 0.15) !important;
    }
    /* Active page — solid Purple #5B49F3. */
    nav.elementor-pagination .page-numbers.current {
        background: #5B49F3 !important;
        color: #F9F9F9 !important;
    }
    /* Dots "…" — Roboto 20/400, Purple, transparent bg. */
    nav.elementor-pagination .page-numbers.dots {
        background: transparent !important;
        color: #5B49F3 !important;
        font-family: "Roboto", "e-Ukraine", sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        cursor: default;
    }

    /* Prev / Next pills — 64px tall, 100px radius, e-Ukraine 18/500, asymmetric padding. */
    nav.elementor-pagination .page-numbers.prev,
    nav.elementor-pagination .page-numbers.next {
        width: auto;
        min-width: 0;
        height: 64px;
        border-radius: 100px !important;
        gap: 8px;
        font-size: 18px !important;
        font-weight: 500 !important;
        white-space: nowrap;
    }
    nav.elementor-pagination .page-numbers.prev {
        background: rgba(124, 124, 255, 0.3) !important;
        color: rgba(249, 249, 249, 0.6) !important;
        padding: 12px 24px 12px 16px !important;
    }
    nav.elementor-pagination a.page-numbers.prev:hover {
        background: rgba(124, 124, 255, 0.45) !important;
        color: #F9F9F9 !important;
    }
    nav.elementor-pagination .page-numbers.next {
        background: #5B49F3 !important;
        color: #F9F9F9 !important;
        padding: 12px 16px 12px 24px !important;
    }
    nav.elementor-pagination a.page-numbers.next:hover {
        background: #4A39E0 !important;
    }
    /* Disabled prev/next on first/last page. */
    nav.elementor-pagination span.page-numbers.prev,
    nav.elementor-pagination span.page-numbers.next {
        opacity: .35;
        pointer-events: none;
    }

    /* Arrow icons — SVG via mask, currentColor (≈20.36px, stroke 2.4). */
    nav.elementor-pagination .page-numbers.prev::before,
    nav.elementor-pagination .page-numbers.next::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
    }
    nav.elementor-pagination .page-numbers.prev::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='M12 19l-7-7 7-7'/></svg>");
                mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='M12 19l-7-7 7-7'/></svg>");
    }
    nav.elementor-pagination .page-numbers.next::after {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5l7 7-7 7'/></svg>");
                mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5l7 7-7 7'/></svg>");
    }

    /* Hide Elementor's screen-reader helper span so numbers look clean */
    nav.elementor-pagination .page-numbers .elementor-screen-only {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0,0,0,0); border: 0;
    }
    @media (max-width: 767px) {
        nav.elementor-pagination,
        ul.page-numbers {
            gap: 8px !important;
            margin-top: 24px !important;
        }
        /* Non-current numbers — text only, no circle box */
        nav.elementor-pagination a.page-numbers:not(.prev):not(.next),
        ul.page-numbers li a.page-numbers:not(.prev):not(.next) {
            width: auto !important;
            min-width: 0 !important;
            height: auto !important;
            padding: 0 6px !important;
            font-size: 16px !important;
            background: transparent !important;
            border-radius: 0 !important;
        }
        nav.elementor-pagination a.page-numbers:not(.prev):not(.next):hover,
        ul.page-numbers li a.page-numbers:not(.prev):not(.next):hover {
            background: transparent !important;
            color: #7C7CFF !important;
        }
        /* Current — Figma 299:16041: 40×40 round, fully circular */
        nav.elementor-pagination .page-numbers.current,
        ul.page-numbers li .page-numbers.current {
            width: 40px !important;
            min-width: 40px !important;
            height: 40px !important;
            padding: 12px !important;
            font-size: 16px !important;
            background: #5B49F3 !important;
            border-radius: 1000px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        /* Dots */
        nav.elementor-pagination .page-numbers.dots,
        ul.page-numbers li .page-numbers.dots {
            width: auto !important;
            min-width: 0 !important;
            height: auto !important;
            padding: 0 4px !important;
            font-size: 18px !important;
            background: transparent !important;
        }
        /* Prev / Next — Figma: 46×46, padding 8.625 11.5, border-radius 71.875 (round) */
        nav.elementor-pagination .page-numbers.prev,
        nav.elementor-pagination .page-numbers.next,
        ul.page-numbers li .page-numbers.prev,
        ul.page-numbers li .page-numbers.next {
            width: 46px !important;
            min-width: 46px !important;
            height: 46px !important;
            padding: 8.625px 11.5px !important;
            gap: 0 !important;
            border-radius: 71.875px !important;
            font-size: 0 !important;
            line-height: 0 !important;
            text-indent: -9999px !important;
            overflow: hidden !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #F9F9F9 !important;
            position: relative !important;
        }
        ul.page-numbers li .page-numbers.prev {
            background: rgba(124, 124, 255, 0.3) !important;
        }
        ul.page-numbers li .page-numbers.next {
            background: #5B49F3 !important;
        }
        /* Hide unicode arrow span — pseudo arrow icon will be shown instead */
        nav.elementor-pagination .page-numbers.prev .octo-pag-arrow,
        nav.elementor-pagination .page-numbers.next .octo-pag-arrow,
        ul.page-numbers li .page-numbers.prev .octo-pag-arrow,
        ul.page-numbers li .page-numbers.next .octo-pag-arrow {
            display: none !important;
        }
        /* Pseudo arrow icon — Figma content box 23×28.75 */
        nav.elementor-pagination .page-numbers.prev::before,
        nav.elementor-pagination .page-numbers.next::after,
        ul.page-numbers li .page-numbers.prev::before,
        ul.page-numbers li .page-numbers.next::after {
            content: "" !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 23px !important;
            height: 28.75px !important;
            text-indent: 0 !important;
            background-color: #ffffff !important;
            -webkit-mask-position: center !important;
                    mask-position: center !important;
            -webkit-mask-repeat: no-repeat !important;
                    mask-repeat: no-repeat !important;
            -webkit-mask-size: contain !important;
                    mask-size: contain !important;
        }
        ul.page-numbers li .page-numbers.prev::before {
            -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='M12 19l-7-7 7-7'/></svg>") !important;
                    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='M12 19l-7-7 7-7'/></svg>") !important;
        }
        ul.page-numbers li .page-numbers.next::after {
            -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5l7 7-7 7'/></svg>") !important;
                    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5l7 7-7 7'/></svg>") !important;
        }
        /* Disabled prev (first page) — span instead of a */
        ul.page-numbers li span.page-numbers.prev,
        ul.page-numbers li span.page-numbers.next {
            opacity: 0.35 !important;
            pointer-events: none !important;
        }
    }

    /* Single post content — subheadings (Bebas Neue Cyrillic) + spacing. */
    body.single-post .elementor-widget-theme-post-content h2,
    body.single-post .elementor-widget-theme-post-content h3,
    body.single-post .elementor-widget-theme-post-content h4 {
        font-family: "Bebas Neue Cyrillic", "Bebas Neue", "e-Ukraine", sans-serif !important;
        font-weight: 400 !important;
        font-size: 46px !important;
        line-height: 130% !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
        color: #F9F9F9 !important;
        margin-top: 30px !important;
        margin-bottom: 25px !important;
    }
    body.single-post .elementor-widget-theme-post-content p {
        margin-top: 30px !important;
    }
    body.single-post .elementor-widget-theme-post-content hr,
    body.single-post .elementor-widget-theme-post-content .wp-block-separator {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    body.single-post .elementor-widget-theme-post-content > *:first-child,
    body.single-post .elementor-widget-theme-post-content .elementor-widget-container > *:first-child {
        margin-top: 0 !important;
    }
    @media (max-width: 767px) {
        body.single-post .elementor-widget-theme-post-content h2,
        body.single-post .elementor-widget-theme-post-content h3,
        body.single-post .elementor-widget-theme-post-content h4 {
            font-size: 32px !important;
        }
    }