/*
 * Etele_MobileNavDrawer: the mobile nav-sections drawer hosts the category
 * list (always open, submenus collapsible) above the Informații links, with
 * the close button in its own blank top row.
 */

@media (min-width: 768px) {
    .etele-nav-drawer__top,
    .etele-nav-drawer__categories {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .nav-sections.etele-nav-drawer {
        --emnd-orange: #eb5800;
        --emnd-orange-dark: #cc4a00;
        --emnd-ink: #2c2c33;
        --emnd-line: #eef0f2;
        --emnd-tint: #fff3ea;
        --emnd-panel: #f1f3f5;
        --emnd-card-line: #e2e5ea;

        background: #fff;
        overscroll-behavior: contain;
        -webkit-tap-highlight-color: transparent;
    }

    /* ---- Close row ---------------------------------------------------- */

    .etele-nav-drawer__top {
        height: 56px;
        padding: 4px 6px;
        background: #fff;
    }

    /* Theme button rules (orange border/text on focus) must not reach it. */
    .nav-sections .etele-nav-drawer__top .etele-nav-drawer__close {
        position: relative;
        display: block;
        width: 48px;
        height: 48px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0 !important;
        border-radius: 5px;
        background: none !important;
        box-shadow: none !important;
        color: #4f4e4c !important;
        cursor: pointer;
    }

    .etele-nav-drawer__close::before,
    .etele-nav-drawer__close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 26px;
        height: 3px;
        margin: -1.5px 0 0 -13px;
        border-radius: 1px;
        background: currentColor;
        transform: rotate(45deg);
    }

    .etele-nav-drawer__close::after {
        transform: rotate(-45deg);
    }

    .nav-sections .etele-nav-drawer__top .etele-nav-drawer__close:active {
        background: var(--emnd-tint) !important;
        color: var(--emnd-orange-dark) !important;
    }

    .etele-nav-drawer__close:focus {
        outline: none;
    }

    .etele-nav-drawer__close:focus-visible {
        outline: 2px solid var(--emnd-orange-dark);
        outline-offset: -2px;
    }

    /* The header toggle's bars turn into an X while open; the drawer has its own. */
    html.nav-open .page-header .nav-toggle::before,
    html.nav-open .page-header .nav-toggle > span::before,
    html.nav-open .page-header .nav-toggle > span::after,
    html.nav-before-open .page-header .nav-toggle::before,
    html.nav-before-open .page-header .nav-toggle > span::before,
    html.nav-before-open .page-header .nav-toggle > span::after {
        visibility: hidden !important;
    }

    /*
     * Inner pages: the removed in-page menu used to push content below the
     * fixed header (110px tall, 95px placeholder). Keep that offset.
     */
    body:not(.cms-index-index) .page-header + .nav-sections + .breadcrumbs,
    body:not(.cms-index-index) .page-header + .nav-sections + .page-main,
    /* Product pages hide their breadcrumbs on mobile (Magento_Catalog _extend.less),
       so the offset has to move on to the content. */
    body.product-view-style-04.c-pr .page-header + .nav-sections + .breadcrumbs + .page-main {
        margin-top: 15px;
    }

    /* Homepage: the removed menu template also carried the banner's offset. */
    body.cms-index-index:not(.cms-bf-promo-home) .container.k-body-top-panel-wrapper {
        margin-top: 29px !important;
    }

    /* Promo homepage: the slider row is hidden, so the same offset goes on the page content
       (otherwise the promo banner starts under the 110px fixed header). */
    body.cms-index-index.cms-bf-promo-home .page-main > .columns > .column.main {
        padding-top: 29px;
    }

    /* ---- Informații section ------------------------------------------ */

    .nav-sections.etele-nav-drawer .informations-menu {
        display: none !important;
    }

    /* Untitled sections: drop the tab layout's title offset and grey backdrop. */
    .nav-sections.etele-nav-drawer .nav-sections-items {
        border-top: 8px solid #e8e8e8;
        background: #fff !important;
    }

    .nav-sections.etele-nav-drawer .nav-sections-item-content {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 10px;
    }

    /* ---- Category list ------------------------------------------------- */

    .etele-nav-drawer__categories {
        display: block;
        border-top: 1px solid var(--emnd-line);
        background: #fff;
    }

    .etele-nav-drawer__categories[aria-busy="true"] {
        min-height: 48px;
    }

    .etele-nav-drawer__categories *,
    .etele-nav-drawer__categories *::before,
    .etele-nav-drawer__categories *::after {
        box-sizing: border-box;
    }

    .etele-nav-drawer__categories .cdz-menu,
    .etele-nav-drawer__categories .cdz-menu .groupmenu,
    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item {
        position: static;
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        list-style: none;
        float: none;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 {
        position: relative;
        border-top: 1px solid var(--emnd-line);
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0:first-child {
        border-top: 0;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0::before,
    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0::after {
        display: none !important;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link {
        position: relative;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 7px 40px 7px 16px !important;
        border: 0;
        color: var(--emnd-ink);
        background: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3 !important;
        text-decoration: none;
        text-transform: none;
        cursor: pointer;
        transition: background 160ms ease, color 160ms ease;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link > span {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 !important;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link i.menu-icon.img-icon {
        display: inline-flex !important;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        margin: 0 !important;
        padding: 0;
        background: none;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link i.menu-icon.img-icon img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: contain;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link:active {
        color: var(--emnd-orange-dark);
        background: var(--emnd-tint);
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0.is-open > .menu-link {
        color: var(--emnd-orange-dark);
        box-shadow: inset 3px 0 0 var(--emnd-orange);
    }

    /* Chevron on the row (not the <li>, which grows with its open submenu). */
    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-top: 2px solid #8c8d96;
        border-right: 2px solid #8c8d96;
        transform: rotate(45deg);
        transition: transform 180ms ease, border-color 160ms ease;
        pointer-events: none;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0.parent > .menu-link::after {
        transform: rotate(135deg);
        margin-top: -6px;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0.parent.is-open > .menu-link::after {
        margin-top: -2px;
        border-color: var(--emnd-orange);
        transform: rotate(-45deg);
    }

    /* ---- Submenus ------------------------------------------------------ */

    /* Extra prefix classes: Codazon's equal-specificity mega-menu rules load later. */
    .nav-sections.etele-nav-drawer .etele-nav-drawer__categories .cdz-menu .groupmenu-drop {
        position: static !important;
        display: none;
        width: auto !important;
        min-width: 0;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: var(--emnd-panel);
        box-shadow: inset 3px 0 0 var(--emnd-orange), inset 0 1px 0 rgba(23, 23, 30, 0.07);
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        list-style: none;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop > li.item {
        display: block;
        padding: 2px 12px 12px 15px !important;
    }

    /* Desktop mega-menu width (min-width: 700px) must not reach the drawer. */
    .nav-sections.etele-nav-drawer .etele-nav-drawer__categories .cdz-menu .groupmenu-drop-content {
        display: block !important;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .row,
    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop [class*="col-sm-"] {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .nav-sections .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        margin: 18px 2px 8px;
        padding: 0;
        border: 0;
        color: #55565f;
        font-size: 13.5px;
        font-weight: 700 !important;
        line-height: 1.4;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-title::before {
        content: "";
        flex: 0 0 auto;
        width: 3px;
        height: 13px;
        border-radius: 1px;
        background: var(--emnd-orange);
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-title::after {
        content: "";
        flex: 1 1 0;
        min-width: 0;
        height: 1px;
        background: #dfe2e7;
    }

    .nav-sections .etele-nav-drawer__categories .cdz-menu .groupmenu-drop [class*="col-sm-"]:first-child .groupdrop-title {
        margin-top: 10px;
    }

    /* Some admin-pasted menus (Laptopuri, Componente, …) use their own
       .container-* grid instead of col-sm-* columns; drop its desktop gap and
       nowrap so the drawer spacing matches the standard menus. */
    .nav-sections .etele-nav-drawer__categories .groupmenu-drop-content > [class*="container-"] {
        gap: 0;
        padding: 0;
    }

    .nav-sections .etele-nav-drawer__categories .groupmenu-drop-content > [class*="container-"] .groupdrop-title {
        white-space: normal;
    }

    .nav-sections .etele-nav-drawer__categories .cdz-menu .groupmenu-drop-content > [class*="container-"] > :first-child .groupdrop-title {
        margin-top: 10px;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        columns: auto;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link li.item {
        display: block !important;
        margin: 0;
        padding: 0;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link li.item > a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 44px;
        margin: 0 0 6px;
        padding: 8px 34px 8px 13px !important;
        border: 1px solid var(--emnd-card-line);
        border-radius: 4px;
        color: #33343c;
        background: #fff;
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link li.item:last-child > a {
        margin-bottom: 0;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link li.item > a::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 7px;
        height: 7px;
        margin: -3.5px 0 0;
        border-top: 2px solid #bfc1ca;
        border-right: 2px solid #bfc1ca;
        background: none;
        transform: rotate(45deg);
        pointer-events: none;
    }

    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link li.item > a:active,
    .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link li.item > a:focus-visible {
        color: var(--emnd-orange-dark);
        border-color: #f2a877;
        background: var(--emnd-tint);
    }

    .etele-nav-drawer__categories .cdz-menu .groupdrop-banner-pos,
    .etele-nav-drawer__categories .cdz-menu .link-prefix,
    .etele-nav-drawer__categories .cdz-menu .item.tablet-item,
    .etele-nav-drawer__categories .cdz-menu .paging-column,
    .etele-nav-drawer__categories .cdz-menu .cdz-nav-paging,
    .etele-nav-drawer__categories .cdz-menu .overflow-items-container,
    .etele-nav-drawer__categories .switchpage-control {
        display: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link,
        .etele-nav-drawer__categories .cdz-menu .groupmenu > li.item.level0 > .menu-link::after,
        .etele-nav-drawer__categories .cdz-menu .groupmenu-drop .groupdrop-link li.item > a {
            transition: none !important;
        }
    }
}