/* ============================================= */
/* Octolab — Mobile Header (Figma 265:9298)      */
/* Scope: @media (max-width: 768px) only.        */
/* Desktop must NOT be affected.                 */
/* ============================================= */

@media (max-width: 768px) {

    /* Outer header wrapper — let absolute children position relative to it */
    .elementor-element-d546952 {
        position: relative !important;
    }

    /* Boxed inner row — single horizontal line */
    .elementor-element-d546952 > .e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Left column with logo + search/UA — flatten into row */
    .elementor-element-982b8cf {
        flex: 1 1 auto !important;
        width: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    /* Logo */
    .elementor-element-185d278 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
    }
    .elementor-element-185d278 img,
    .elementor-element-2067c5c img {
        height: 32px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Search + language combined sub-container — push right */
    .elementor-element-074de30 {
        flex: 0 0 auto !important;
        width: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 32px !important;
        margin-left: auto !important;
        padding: 0 !important;
    }

    /* === Search widget — collapsed to icon by default === */
    .elementor-element-24a6a8f {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: none;
    }
    .elementor-element-24a6a8f .e-search,
    .elementor-element-24a6a8f .e-search-form,
    .elementor-element-24a6a8f form {
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        gap: 0 !important;
    }
    .elementor-element-24a6a8f .e-search-label,
    .elementor-element-24a6a8f label.e-search-label {
        width: 24px !important;
        height: 24px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .elementor-element-24a6a8f .e-search-label svg,
    .elementor-element-24a6a8f svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #f9f9f9 !important;
    }
    /* hide form contents (input, clear, submit) when collapsed */
    .elementor-element-24a6a8f input[type=search],
    .elementor-element-24a6a8f input[type=text],
    .elementor-element-24a6a8f .e-search-input,
    .elementor-element-24a6a8f .e-search-clear,
    .elementor-element-24a6a8f button[type=submit] {
        display: none !important;
    }

    /* While search expanded — hide the rest of the header content */
    body.octo-search-expanded .elementor-element-2329bb5,
    body.octo-search-expanded .elementor-element-982b8cf > .elementor-element-185d278,
    body.octo-search-expanded .elementor-element-fe502c1,
    body.octo-search-expanded .elementor-element-8e81638 {
        visibility: hidden !important;
    }

    /* === Search expanded — overlays whole header row, fixed to viewport === */
    body.octo-search-expanded .elementor-element-24a6a8f {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        z-index: 9999 !important;
        padding: 12px 16px !important;
        background: #000 !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
    }
    body.octo-search-expanded .elementor-element-24a6a8f .e-search {
        width: 100% !important;
        height: 48px !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
    }
    body.octo-search-expanded .elementor-element-24a6a8f .e-search-form,
    body.octo-search-expanded .elementor-element-24a6a8f form {
        width: 100% !important;
        height: 48px !important;
        background: transparent !important;
        border: 1px solid #f9f9f9 !important;
        border-radius: 24px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    body.octo-search-expanded .elementor-element-24a6a8f .e-search-label {
        width: 24px !important;
        height: 24px !important;
        flex: 0 0 24px !important;
    }
    body.octo-search-expanded .elementor-element-24a6a8f input[type=search],
    body.octo-search-expanded .elementor-element-24a6a8f input[type=text],
    body.octo-search-expanded .elementor-element-24a6a8f .e-search-input {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        color: #f9f9f9 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        letter-spacing: -0.165px !important;
        text-transform: uppercase !important;
        padding: 0 0 0 12px !important;
        margin: 0 !important;
    }

    /* Dim + blur backdrop behind the expanded search */
    body.octo-search-expanded::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 9998;
        pointer-events: none;
    }
    body.octo-search-expanded .elementor-element-24a6a8f input::placeholder {
        color: #f9f9f9 !important;
        opacity: 0.7 !important;
    }
    body.octo-search-expanded .elementor-element-24a6a8f button[type=submit] {
        display: inline-flex !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        cursor: pointer;
    }

    /* === UA language switcher — keep inline next to search === */
    .elementor-element-fe502c1 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
    }
    .elementor-element-fe502c1 nav,
    .elementor-element-fe502c1 .elementor-nav-menu__container {
        background: transparent !important;
    }
    .elementor-element-fe502c1 ul.elementor-nav-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
    .elementor-element-fe502c1 ul.elementor-nav-menu > li {
        display: flex !important;
        align-items: center !important;
    }
    .elementor-element-fe502c1 ul.elementor-nav-menu > li > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 4px 0 !important;
        font-family: 'e-Ukraine', sans-serif !important;
        font-weight: 300 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        color: #f9f9f9 !important;
        text-transform: uppercase !important;
        background: transparent !important;
    }
    .elementor-element-fe502c1 ul.elementor-nav-menu .sub-arrow {
        padding-left: 4px !important;
        margin-left: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Hide FontAwesome 320×512 chevron — Elementor child theme already supplies
       a clean chevron via .sub-arrow::before background-image */
    .elementor-element-fe502c1 ul.elementor-nav-menu .sub-arrow svg {
        display: none !important;
    }

    /* === Hamburger column on right — purple round toggle === */
    .elementor-element-8e81638 {
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        align-self: center !important;
        padding: 0 !important;
    }
    .elementor-element-cc42a2e {
        width: auto !important;
    }
    .elementor-element-cc42a2e .elementor-menu-toggle {
        width: 48px !important;
        height: 48px !important;
        background: #7C7CFF !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        border: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }
    .elementor-element-cc42a2e .elementor-menu-toggle:hover,
    .elementor-element-cc42a2e .elementor-menu-toggle:focus {
        background: #5B49F3 !important;
        color: #ffffff !important;
    }
    .elementor-element-cc42a2e .elementor-menu-toggle i,
    .elementor-element-cc42a2e .elementor-menu-toggle svg {
        display: block !important;
        width: 48px !important;
        height: 48px !important;
        color: #ffffff !important;
        font-size: 20px !important;
        overflow: visible !important;
    }
    /* Use the SVG at full button size so its built-in lines stay centered (lines sit at y=20/29 in 50×50 viewBox).      */
    /* Hide the SVG's inner circle background — the outer button already provides the #7C7CFF circle.                   */
    .elementor-element-cc42a2e .elementor-menu-toggle svg > rect {
        fill: transparent !important;
    }
    .elementor-element-cc42a2e .elementor-menu-toggle svg > path {
        fill: #ffffff !important;
        stroke: none !important;
    }

    /* Hide tagging widgets that aren't part of the top header bar.         */
    .elementor-element-da45121 {
        display: none !important;
    }

    /* ============================================= */
    /* Bottom floating nav pill (Figma 282:18191)    */
    /* Dark pill with gradient border + purple glow  */
    /* ============================================= */

    .elementor-element-0346c03,
    .elementor-element-0346c03.mobilebuttommenu {
        background-color: #131313 !important;
        background-image:
            linear-gradient(#131313, #131313),
            linear-gradient(to bottom, #4A4A99 0%, #9999E0 43%, #7C7CFF 100%) !important;
        background-origin: border-box !important;
        background-clip: padding-box, border-box !important;
        border: 2px solid transparent !important;
        border-radius: 28px !important;
        box-shadow:
            0 0 1px rgba(98, 81, 243, 1),
            0 0 10px rgba(85, 68, 229, 0.9),
            0 0 22px rgba(85, 68, 229, 0.7) !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 38px !important;
        gap: 0 !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Reset child widget paddings/margins so icons align uniformly */
    .elementor-element-0346c03 > .elementor-widget,
    .elementor-element-0346c03 > .elementor-element {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .elementor-element-0346c03 > .elementor-widget > .elementor-widget-container,
    .elementor-element-0346c03 > .elementor-widget .elementor-icon-wrapper,
    .elementor-element-0346c03 > .elementor-widget .elementor-menu-cart__wrapper {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Icon widgets inside the bottom pill — clean white outline icons */
    .elementor-element-0346c03 .elementor-widget-icon .elementor-icon,
    .elementor-element-0346c03 .elementor-widget-button .elementor-button {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        color: #f9f9f9 !important;
    }
    .elementor-element-0346c03 .elementor-widget-icon svg,
    .elementor-element-0346c03 .elementor-widget-button svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #f9f9f9 !important;
        fill: none !important;
    }
    /* Heart icon (FontAwesome) — uses fill, not stroke */
    .elementor-element-0346c03 .elementor-widget-icon svg.e-far-heart,
    .elementor-element-0346c03 .elementor-widget-icon svg[class*='e-fa'] {
        fill: none !important;
        stroke: none !important;
    }
    .elementor-element-0346c03 .elementor-widget-icon svg.e-far-heart path,
    .elementor-element-0346c03 .elementor-widget-icon svg[class*='e-fa'] path {
        fill: #f9f9f9 !important;
    }

    /* Cart widget icon — same outline style. Bag SVG content fills only 14×16 of viewBox 24×24,
       so we render it at 28×28 to match the visual size of the other icons. */
    .elementor-element-0346c03 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        color: #f9f9f9 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    /* Cart container stays at 24px (same as siblings) — SVG overflows visibly         */
    /* so all icons are visually centered at the same horizontal baseline.             */
    .elementor-element-0346c03 > .elementor-widget-woocommerce-menu-cart {
        overflow: visible !important;
        height: 24px !important;
    }
    .elementor-element-0346c03 .elementor-widget-woocommerce-menu-cart svg {
        width: 32px !important;
        height: 32px !important;
        stroke: #f9f9f9 !important;
        fill: none !important;
        overflow: visible !important;
        /* Bag content center y = 11 (in 0–24 viewBox), so visual centre sits           */
        /* 4px above siblings when SVG is enlarged to 32×32 — push down to match.       */
        transform: translateY(4px) !important;
    }
    .elementor-element-0346c03 .elementor-widget-woocommerce-menu-cart svg rect,
    .elementor-element-0346c03 .elementor-widget-woocommerce-menu-cart svg path {
        stroke-width: 1.2 !important;
    }
}

/* ============================================= */
/* Burger menu full-screen overlay (Figma 282:20418) */
/* When .elementor-menu-toggle.elementor-active, open dropdown becomes overlay */
/* ============================================= */
@media (max-width: 768px) {
    /* When toggle is active, full-screen overlay */
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background: rgba(19, 19, 19, 0.98) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        padding: 100px 24px 32px !important;
        overflow-y: auto !important;
        display: block !important;
        margin: 0 !important;
        max-height: none !important;
    }

    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active ul.elementor-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active ul.elementor-nav-menu > li > a {
        font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', sans-serif !important;
        font-size: 36px !important;
        line-height: 0.9 !important;
        letter-spacing: -0.011em !important;
        text-transform: uppercase !important;
        color: #f9f9f9 !important;
        padding: 8px 0 !important;
        background: transparent !important;
        border: 0 !important;
        text-decoration: none !important;
    }

    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li.current-menu-item > a,
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li.current-page-ancestor > a {
        color: #7c7cff !important;
    }

    /* X close icon — already provided by Elementor via .eicon-close on active toggle */
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active {
        background: #5b49f3 !important;
        z-index: 10000 !important;
        position: relative !important;
    }
}

/* ============================================= */
/* Burger overlay — OCTOLAB logo top-left + dividers between items (Figma 288:12088) */
/* ============================================= */
@media (max-width: 768px) {
    /* Logo pinned top-left of the open overlay, vertically aligned with the X
       (X: top 42 / 48px tall → centre y≈66; logo 166×32 → top 50). */
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown::before,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active::before,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown::before {
        content: "";
        position: fixed;
        top: 50px;
        left: 16px;
        width: 166px;
        height: 32px;
        background: url("https://octolab.com.ua/wp-content/uploads/2026/01/octolab_logo.svg") left center / contain no-repeat;
        z-index: 10001;
        pointer-events: none;
    }

    /* Dividers: one line under each menu item (kill the flex gap, use borders) */
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active ul.elementor-nav-menu,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown ul.elementor-nav-menu {
        gap: 0 !important;
        width: 100% !important;
    }
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active ul.elementor-nav-menu > li,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown ul.elementor-nav-menu > li {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(124, 124, 255, 0.4) !important;
    }
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active ul.elementor-nav-menu > li > a,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a {
        display: block !important;
        padding: 18px 0 !important;
    }
    /* no trailing line under the last item */
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown ul.elementor-nav-menu > li:last-child {
        border-bottom: 0 !important;
    }
}

/* ============================================= */
/* Burger overlay — glowing dividers + Catalog inline accordion (Figma 288:12088) */
/* ============================================= */
@media (max-width: 768px) {
    /* Replace the flat divider with a glowing line (design dividers have a soft glow) */
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active ul.elementor-nav-menu > li,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown ul.elementor-nav-menu > li {
        border-bottom: 0 !important;
        position: relative !important;
    }
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li::after,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown.elementor-active ul.elementor-nav-menu > li::after,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown ul.elementor-nav-menu > li::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: rgba(124, 124, 255, 0.7);
        box-shadow: 0 0 8px rgba(124, 124, 255, 0.7), 0 0 3px rgba(124, 124, 255, 0.95);
        pointer-events: none;
    }
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown ul.elementor-nav-menu > li:last-child::after {
        display: none;
    }

    /* ── Catalog inline accordion (sub-items injected via JS, indented 30px) ── */
    /* Chevron on the catalog parent row */
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown ul.elementor-nav-menu > li.octo-mcat-parent > a,
    .elementor-element-cc42a2e .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown ul.elementor-nav-menu > li.octo-mcat-parent > a,
    body .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown ul.elementor-nav-menu > li.octo-mcat-parent > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
    /* Elementor injects hover-underline rules (inline, !important):
         BASE  ...elementor-nav-menu > li > a::after { background:#7c7cff!important; opacity:0 } (0,3,5)
         FOCUS ...elementor-nav-menu > li > a:focus::after { background:#7c7cff!important; opacity:1!important } (0,4,5)
       The :focus rule (fires on TAP — mobile has no hover) TIES our old 0,4,5 override and
       wins on source order → purple fill came back on tap. Add the container class
       `.elementor-nav-menu--dropdown` so we sit at (0,5,5) and beat :hover/:focus too. */
    html body .elementor-element.elementor-element-cc42a2e .elementor-nav-menu--dropdown .elementor-nav-menu li.octo-mcat-parent > a::after {
        content: "" !important;
        position: static !important;
        flex: 0 0 auto !important;
        width: 9px !important;
        height: 9px !important;
        margin-right: 4px !important;
        background: transparent !important;
        background-color: transparent !important;
        /* Theme hides the underline `a::after` with opacity:0 until :hover/:focus
           (a:hover::after{opacity:1!important}). Mobile has no hover → force it
           always visible so the chevron is permanent, not only on tap. */
        opacity: 1 !important;
        box-shadow: none !important;
        border-top: 2px solid #f9f9f9 !important;
        border-right: 2px solid #f9f9f9 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
        transform: rotate(45deg); /* › closed — points right, like the design */
        transition: transform .25s ease;
    }
    html body .elementor-element.elementor-element-cc42a2e .elementor-nav-menu--dropdown .elementor-nav-menu li.octo-mcat-parent.octo-mcat-open > a::after {
        transform: rotate(135deg) !important; /* ⌄ open — points down */
    }
    /* SmartMenus auto-adds its own caret <span.sub-arrow> once the <li> has a
       child <ul> (our injected submenu) — hide it for the WHOLE burger overlay,
       not just .octo-mcat-parent, so it can never flash before our JS tags the li
       (the purple/left caret the user reported). Our ::after chevron is the only one. */
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown .sub-arrow,
    .elementor-element-cc42a2e .elementor-nav-menu--dropdown .sub-arrow svg,
    li.octo-mcat-parent > a .sub-arrow,
    li.octo-mcat-parent > a .sub-arrow svg {
        display: none !important;
    }
    /* Collapsible sub-list */
    ul.octo-mcat {
        display: block !important; /* override Elementor's `ul ul { display:none }` */
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    li.octo-mcat-open > ul.octo-mcat {
        max-height: 240px; /* ~3 items × 54px — tight so collapse isn't janky */
    }
    ul.octo-mcat > li {
        position: relative;
        width: 100%;
        margin: 0 !important;
    }
    ul.octo-mcat > li::after {
        content: "";
        position: absolute;
        left: 30px; right: 0; bottom: 0;
        height: 1px;
        background: rgba(124, 124, 255, 0.45);
        box-shadow: 0 0 6px rgba(124, 124, 255, 0.5);
        pointer-events: none;
    }
    ul.octo-mcat > li:last-child::after { display: none; }
    ul.octo-mcat > li > a {
        display: block !important;
        padding: 14px 0 14px 30px !important;
        font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', sans-serif !important;
        font-size: 26px !important;
        line-height: 1 !important;
        letter-spacing: -0.011em !important;
        text-transform: uppercase !important;
        color: #cfcfe8 !important;
        text-decoration: none !important;
        background: transparent !important;
    }
}