/* ================================
   MOBILE HEADER
   ================================ */

@media (max-width: 768px) {

    .ct-header,
    .ct-header [data-row],
    .ct-header [data-row] > div {
        min-height: 78px !important;
    }

    .site-logo-container,
    [data-device="mobile"] .site-logo-container,
    .ct-header [data-id="logo"],
    .ct-header [data-id="logo"] a {
        width: 155px !important;
        max-width: 155px !important;
        min-width: 155px !important;

        display: flex !important;
        align-items: center !important;
    }

    .site-logo-container img,
    [data-device="mobile"] .site-logo-container img,
    .ct-header [data-id="logo"] img,
    .ct-header [data-id="logo"] .site-logo-container img {
        width: 145px !important;
        max-width: 145px !important;
        min-width: 145px !important;

        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .ct-header-trigger,
    .ct-header-cart,
    .ct-header-search {
        transform: scale(1.04);
    }

    .mobile-menu-toggle {
        transform: scale(1.08);
    }
}


/* ================================
   MOBILE OFFCANVAS MENU STYLE ONLY
   НЕ чіпаємо напрямок відкривання
   ================================ */

@media (max-width: 768px) {

    .ct-panel,
    .ct-header-panel,
    .ct-drawer-canvas,
    .ct-drawer-inner,
    #offcanvas {
        background: rgba(13, 15, 20, 0.97) !important;
    }

    .ct-panel,
    .ct-header-panel,
    #offcanvas {
        border-radius: 26px 0 0 26px !important;
        box-shadow: -22px 0 60px rgba(0,0,0,0.42) !important;
    }

    .ct-panel-content,
    .ct-header-panel .ct-panel-content,
    #offcanvas .ct-panel-content {
        padding: 76px 24px 50px !important;
        box-sizing: border-box !important;
    }

    /*
       НЕ ховаємо data-id="html", widget, form і т.д.
       Бо Blocksy може тримати меню саме в одному з цих контейнерів.
    */

    .ct-panel .mobile-menu,
    .ct-header-panel .mobile-menu,
    .ct-panel nav,
    .ct-header-panel nav,
    .ct-panel [data-id="mobile-menu"],
    .ct-header-panel [data-id="mobile-menu"],
    #offcanvas .mobile-menu,
    #offcanvas nav,
    #offcanvas [data-id="mobile-menu"] {
        width: 100% !important;
        text-align: center !important;
    }

    .ct-panel .mobile-menu ul,
    .ct-header-panel .mobile-menu ul,
    .ct-panel nav ul,
    .ct-header-panel nav ul,
    #offcanvas .mobile-menu ul,
    #offcanvas nav ul {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .ct-panel .mobile-menu li,
    .ct-header-panel .mobile-menu li,
    .ct-panel nav li,
    .ct-header-panel nav li,
    #offcanvas .mobile-menu li,
    #offcanvas nav li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .ct-panel .mobile-menu a,
    .ct-header-panel .mobile-menu a,
    .ct-panel nav a,
    .ct-header-panel nav a,
    #offcanvas .mobile-menu a,
    #offcanvas nav a {
        width: 100% !important;
        min-height: 48px !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        padding: 10px 8px !important;

        color: #ffffff !important;
        text-align: center !important;
        font-size: 24px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;

        text-decoration: none !important;
    }

    .ct-panel .mobile-menu a:hover,
    .ct-header-panel .mobile-menu a:hover,
    .ct-panel nav a:hover,
    .ct-header-panel nav a:hover,
    #offcanvas .mobile-menu a:hover,
    #offcanvas nav a:hover {
        color: var(--primary) !important;
    }

    .ct-panel .current-menu-item > a,
    .ct-header-panel .current-menu-item > a,
    #offcanvas .current-menu-item > a {
        color: var(--primary) !important;
    }

    .ct-panel .ct-toggle-close,
    .ct-header-panel .ct-toggle-close,
    .ct-panel .close-button,
    .ct-header-panel .close-button,
    #offcanvas .ct-toggle-close,
    #offcanvas .close-button {
        position: absolute !important;
        right: 22px !important;
        top: 22px !important;
        color: #ffffff !important;
        z-index: 10 !important;
    }
}