/* Casa Marcus - Menu Movil v2.0 */
@media (max-width: 768px) {

    /* Panel y contenido */
    .nav-sections,
    .nav-sections .nav-sections-items {
        background: #ffffff !important;
    }

    .nav-sections .nav-sections-item-title {
        display: none !important;
    }

    .nav-sections .nav-sections-item-content[id="store.menu"] {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .nav-sections .nav-sections-item-content:not([id="store.menu"]) {
        display: none !important;
    }

    /* Encabezado azul */
    #cm-mobile-nav-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 80px !important;
        padding: 16px 20px !important;
        background: #252666 !important;
        border-bottom: 4px solid #ffb700 !important;
        box-sizing: border-box !important;
    }

    #cm-mobile-nav-header .cm-nav-heading {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #cm-mobile-nav-header strong {
        color: #ffffff !important;
        font-size: 21px !important;
        font-weight: 700 !important;
    }

    #cm-mobile-nav-header .cm-nav-heading span {
        color: #d9dcf6 !important;
        font-size: 12px !important;
    }

    /* Nueva X */
    #cm-mobile-nav-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        background: rgba(255,255,255,.12) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    /* Ocultar visualmente la X anterior */
    html.nav-open
    #header-middle .header-panel-left .action.nav-toggle {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Acceso Mi cuenta */
    #cm-mobile-account-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 14px 12px !important;
        padding: 14px 12px !important;
        background: #f6f7fb !important;
        border: 1px solid #e3e7f0 !important;
        border-radius: 12px !important;
        color: #252666 !important;
        text-decoration: none !important;
    }

    #cm-mobile-account-link .cm-account-text {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 4px;
    }

    #cm-mobile-account-link strong {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    #cm-mobile-account-link small {
        color: #667085 !important;
        font-size: 12px !important;
    }

    #cm-mobile-account-link svg {
        flex-shrink: 0;
    }

    #cm-mobile-account-link .cm-account-arrow {
        font-size: 26px !important;
        line-height: 1 !important;
    }

    /* Lista principal */
    #mobi_menu-container ul.cm-mobile-menu-v2 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 0 12px 18px !important;
        box-sizing: border-box !important;
    }

    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0 {
        display: block !important;
        position: relative !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Eliminar el nivel adicional Categorias (+) */
    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0 > a.menu-link,
    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0 > .dropdown-toggle {
        display: none !important;
    }

    /* Titulo de categorias */
    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0::before {
        content: "Categorías de productos";
        display: block !important;
        padding: 18px 8px 12px !important;
        color: #252666 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 24px !important;
    }

    /* Categorias siempre accesibles */
    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Filas de categorias */
    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop > li {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #edf0f5 !important;
        box-sizing: border-box !important;
    }

    /* Ilustraciones */
    #mobi_menu-container
    .cm-category-thumb-v2 {
        display: block !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        object-fit: contain !important;
        border-radius: 5px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Enlaces principales con iconos */
    #mobi_menu-container
    li.cat-tree.level0 > ul.cat-tree.groupmenu-drop
    > li > a.menu-link:has(.cm-category-thumb-v2) {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 56px !important;
        padding: 7px 48px 7px 7px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-transform: none !important;
        box-sizing: border-box !important;
    }

    /* Categoria desplegada */
    #mobi_menu-container
    li.cat-tree.level0 > ul.cat-tree.groupmenu-drop
    > li:has(> ul.level1.groupmenu-drop.open)
    > a.menu-link {
        background: #fff4d6 !important;
        color: #252666 !important;
        font-weight: 700 !important;
        border-left: 3px solid #ffb700 !important;
        border-radius: 8px !important;
        padding-left: 12px !important;
    }

    /* Panel de subcategorias */
    #mobi_menu-container
    li.cat-tree.level0 > ul.cat-tree.groupmenu-drop
    > li > ul.level1.groupmenu-drop.open {
        background: #f7f8fb !important;
        border: 1px solid #e5e9f2 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        margin: 4px 0 10px !important;
        padding: 6px 8px !important;
        box-sizing: border-box !important;
    }

    #mobi_menu-container
    ul.level1.groupmenu-drop.open > li {
        position: relative !important;
        border-bottom: 1px solid #e5e9f2 !important;
    }

    #mobi_menu-container
    ul.level1.groupmenu-drop.open > li:last-child {
        border-bottom: 0 !important;
    }

    #mobi_menu-container
    ul.level1.groupmenu-drop.open > li > a.menu-link {
        display: block !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 11px 42px 11px 10px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #344054 !important;
        white-space: normal !important;
        text-transform: none !important;
        box-sizing: border-box !important;
    }

    /* Flechas nativas de Codazon */
    #mobi_menu-container .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    #mobi_menu-container .dropdown-toggle::before {
        content: "" !important;
        display: block !important;
        position: static !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
        border: 0 !important;
        border-top: 2px solid #252666 !important;
        border-right: 2px solid #252666 !important;
        background: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: rotate(45deg) !important;
        transition: transform .2s ease !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }

    #mobi_menu-container
    li:has(> ul.groupmenu-drop.open)
    > .dropdown-toggle::before {
        transform: rotate(135deg) !important;
    }

    #mobi_menu-container
    li.cat-tree.level0 ul.groupmenu-drop
    > li.parent {
        position: relative !important;
    }

    #mobi_menu-container
    li.cat-tree.level0 ul.groupmenu-drop
    > li.parent > .dropdown-toggle {
        position: absolute !important;
        top: 7px !important;
        right: 2px !important;
        bottom: auto !important;
        left: auto !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        transform: none !important;
        z-index: 5 !important;
    }

    #mobi_menu-container
    li.cat-tree.level0 ul.groupmenu-drop
    > li.parent > a.menu-link {
        padding-right: 48px !important;
    }

    /* Enlaces Ir a... */
    #mobi_menu-container li.tablet-item > a.menu-go-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 38px !important;
        margin: 5px 0 !important;
        padding: 10px 12px !important;
        background: #f3f5f9 !important;
        border: 1px solid #e5e9f2 !important;
        border-radius: 8px !important;
        color: #252666 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-transform: none !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    #mobi_menu-container
    li.tablet-item > a.menu-go-link::after {
        content: "↗" !important;
        display: inline-block !important;
        margin-left: auto !important;
        font-size: 17px !important;
        line-height: 1 !important;
        color: #252666 !important;
    }

    /* Solo cinco categorias inicialmente */
    #mobi_menu-container
    ul.cm-category-preview:not(.cm-expanded)
    > li.cm-extra-category,
    #mobi_menu-container
    ul.cm-category-preview:not(.cm-expanded)
    > li.cm-category-route {
        display: none !important;
    }

    /* Ir a categorias queda al final */
    #mobi_menu-container
    li.cat-tree.level0 > ul.cat-tree.groupmenu-drop
    > li.cm-category-route {
        order: 99 !important;
        border-bottom: 0 !important;
    }

    /* Ver todas las categorias */
    #cm-mobile-show-categories {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: calc(100% - 16px) !important;
        min-height: 46px !important;
        margin: 12px 8px 4px !important;
        padding: 0 15px !important;
        background: #f3f5f9 !important;
        border: 1px solid #e5e9f2 !important;
        border-radius: 10px !important;
        color: #252666 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        cursor: pointer !important;
    }

    #cm-mobile-show-categories .cm-preview-arrow {
        font-size: 22px !important;
        font-weight: 400 !important;
    }

    /* Titulo Otros accesos */
    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0::after {
        content: "Otros accesos";
        display: block !important;
        padding: 20px 8px 8px !important;
        color: #252666 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
    }

    /* Cuatro tarjetas */
    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0 ~ li {
        flex: 0 0 calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
        border: 0 !important;
    }

    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0
    ~ li > a.menu-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 100px !important;
        height: 100% !important;
        padding: 12px 8px !important;
        background: #f5f7fb !important;
        border: 1px solid #e5e9f2 !important;
        border-radius: 12px !important;
        color: #252666 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-transform: none !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    #mobi_menu-container
    .cm-mobile-menu-v2 > li.cat-tree.level0
    ~ li > a.menu-link::after {
        content: none !important;
        display: none !important;
    }

    #mobi_menu-container .cm-access-icon {
        display: block !important;
        width: 29px !important;
        height: 29px !important;
        flex-shrink: 0 !important;
    }

    /* Ocultar WhatsApp mientras el menu esta abierto */
    html.nav-open .ammessenger-widget-component {
        display: none !important;
    }

    /* Oscurecer el exterior del panel */
    html.nav-open .nav-sections {
        box-shadow: 0 0 0 100vmax rgba(0,0,0,.35) !important;
    }
}

/* CM Mobile Menu v2.0 - Correccion de categorias colapsadas */
@media (max-width: 768px) {

    /* Mostrar solo las primeras cinco categorias */
    #mobi_menu-container
    ul.cm-mobile-menu-v2
    > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop.cm-category-preview:not(.cm-expanded)
    > li.cm-extra-category,

    /* Ocultar Ir a Categorias mientras esta colapsado */
    #mobi_menu-container
    ul.cm-mobile-menu-v2
    > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop.cm-category-preview:not(.cm-expanded)
    > li.cm-category-route {
        display: none !important;
    }
}

/* Casa Marcus - Menu Movil v2.1 - Navegacion simplificada */
@media (max-width: 768px) {

    /* Icono de categorias */
    #mobi_menu-container
    ul.cm-mobile-menu-v2 > li.cat-tree.level0::before {
        padding-left: 36px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBB50B' stroke-width='2.4'%3E%3Crect x='2' y='2' width='8' height='8' rx='1.5'/%3E%3Crect x='14' y='2' width='8' height='8' rx='1.5'/%3E%3Crect x='2' y='14' width='8' height='8' rx='1.5'/%3E%3Crect x='14' y='14' width='8' height='8' rx='1.5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: 24px 24px !important;
    }

    /* Icono de otros accesos */
    #mobi_menu-container
    ul.cm-mobile-menu-v2 > li.cat-tree.level0::after {
        padding-left: 36px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBB50B' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-2 2'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l2-2'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: 24px 24px !important;
    }

    /* Sin flechas ni subcategorias desplegables */
    #mobi_menu-container
    ul.cm-mobile-menu-v2 > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop > li.level1 > .dropdown-toggle,
    #mobi_menu-container
    ul.cm-mobile-menu-v2 > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop > li.level1 > ul.groupmenu-drop {
        display: none !important;
    }

    /* Eliminar boton Ir a Categorias */
    #mobi_menu-container
    ul.cm-mobile-menu-v2 > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop > li.cm-category-route {
        display: none !important;
    }

    /* Categorias como enlaces directos */
    #mobi_menu-container
    ul.cm-mobile-menu-v2 > li.cat-tree.level0
    > ul.cat-tree.groupmenu-drop > li.level1 > a.menu-link {
        padding-right: 4px !important;
        cursor: pointer !important;
    }
}