/* ==========================================================
   VARIABILI COLORE
   ========================================================== */
:root {
    --automenu-tf-color-text: #000;
    --automenu-tf-color-accent: #EC0080;
    --automenu-tf-color-bg: #fff;
    --automenu-tf-color-border: rgba(0, 0, 0, 0.07);
    --automenu-tf-color-bg-active: rgba(0, 0, 0, 0.07);
    --automenu-tf-color-bg-subtle: rgba(0, 0, 0, 0.02);
    --automenu-tf-color-bg-muted: rgba(0, 0, 0, 0.1);
    --automenu-tf-color-bg-muted-hover: rgba(0, 0, 0, 0.2);
    --automenu-tf-color-shadow: rgba(0, 0, 0, 0.05);
    --automenu-tf-color-border-column: #eee;
    --automenu-tf-color-border-mobile: #e5e5e5;
    --automenu-tf-color-border-item-mobile: #f0f0f0;
    --automenu-tf-color-bg-nested-mobile: #f3f3f3;
    --automenu-tf-color-close-btn-text: #343538;
}

/* ==========================================================
   STILI BASE STRUTTURALI (Condivisi)
   ========================================================== */


.main-menu-item:has(.automenu-tf-container).open>ul {
    display: block;
}

.main-menu-item:has(.automenu-tf-container)>ul {
    width: 100% !important;
    padding: 0px !important;
}

.automenu-tf-container .automenu-tf-level .automenu-tf-item,
li.automenu-tf-item.automenu-tf-cat-item.has-children {
    padding: 0px !important;
    width: 100%;
}

.automenu-tf-container {
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.automenu-tf-container *,
.automenu-tf-container *::before,
.automenu-tf-container *::after {
    box-sizing: border-box;
}

.automenu-tf-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.automenu-tf-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--automenu-tf-color-text);
    border-bottom: 1px solid var(--automenu-tf-color-border);
    transition: color .14s ease, background .14s ease;
}


.automenu-tf-container .automenu-tf-level .automenu-tf-link {
    display: block;
    padding: 12px 15px;
    text-decoration: none;

    flex-grow: 1;

    line-height: 1.35;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500 !important;
}

.automenu-tf-item.automenu-tf-cat-item.active.open > .automenu-tf-link-wrapper > *,
.automenu-tf-container .automenu-tf-level .automenu-tf-item:has(.active, .open) > .automenu-tf-link-wrapper .automenu-tf-link {
    color: var(--automenu-tf-color-accent);
}

.automenu-tf-product-link {
    text-transform: capitalize;

}



/* Pulsante freccia per apertura colonna */
.automenu-tf-arrow-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 30px;
    font-size: 18px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.automenu-tf-arrow-btn:hover {
    opacity: 1;
}

.automenu-tf-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.automenu-tf-icon::after {
    content: '+';
    font-size: 16px;
    font-weight: bold;
}

.automenu-tf-item.open>.automenu-tf-link-wrapper .automenu-tf-icon::after {
    content: '-';
}


.automenu-tf-item.active.open > .automenu-tf-link-wrapper .automenu-tf-arrow-btn,
.automenu-tf-item.active.open > .automenu-tf-link-wrapper .automenu-tf-toggle {

    transform: rotate(180deg);

}

/* ==========================================================
   ELEMENTI FUNZIONALI (View All / Reset)
   ========================================================== */

   
.automenu-tf-view-all-btn {
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 15px;
    text-align: left;
    flex-grow: 1;
}

.automenu-tf-view-all-btn:hover {
    text-decoration: underline;
}

.automenu-tf-back-btn {
    background: var(--automenu-tf-color-bg-muted);
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 12px;
    margin-right: 10px;
}

.automenu-tf-back-btn:hover {
    background: var(--automenu-tf-color-bg-muted-hover);
}

/* ==========================================================
   DESKTOP: STRUTTURA A 4 COLONNE (>= 769px)
   ========================================================== */
@media (min-width: 769px) {
    .automenu-tf-container .automenu-tf-level .automenu-tf-cat-item:hover .automenu-tf-link-wrapper *{
        color: var(--automenu-tf-color-accent);
    }

    .main-menu-item:has(.automenu-tf-container) {
        position: static !important;
    }

    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-widget,
    /*.wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-widget-wrap,
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-column,
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-element,
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-element .htmega-megamenu .main-menu-item,
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-element .htmega-megamenu .sub-menu-item,
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-element .htmega-menu-container,
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .htmega-menu-container .sub-menu,
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .htmega-menu-container .sub-menu li,*/
    .wp-child-theme-shoptimizer-child .elementor-section:has(.automenu-tf-container) .elementor-widget-htmega-menu-inline-menu .htmega-menu-container {
        position: static !important;
    }

    .automenu-tf-toggle {
        display: none;
    }

    .automenu-tf-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 475px;
        box-shadow: 0 4px 15px var(--automenu-tf-color-shadow);
        overflow: hidden;
    }

    .automenu-tf-column {
        flex: 1 1 25%;
        width: 25%;
        min-width: 0;
        border-right: 1px solid var(--automenu-tf-color-border-column);
        overflow-y: auto;
        max-height: 475px;
        background: var(--automenu-tf-color-bg);
        position: relative;
    }

    .automenu-tf-column:last-child {
        border-right: none;
    }

    /* Livelli nelle colonne: il livello diretto della colonna è visibile */
    .automenu-tf-column>.automenu-tf-level {
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

    /* Nasconde i livelli figli annidati negli item all'interno delle colonne */
    .automenu-tf-column .automenu-tf-item>.automenu-tf-level {
        display: none !important;
    }

    /* Styling degli item del menu */
    .automenu-tf-item {
        position: relative;
    }

    .automenu-tf-item:hover>.automenu-tf-link-wrapper {
        background-color: var(--automenu-tf-color-bg-active);
    }

    .automenu-tf-item.active>.automenu-tf-link-wrapper {
        background-color: var(--automenu-tf-color-bg-active);
        font-weight: bold;
    }

    .automenu-tf-item.active>.automenu-tf-link-wrapper .automenu-tf-arrow-btn {
        opacity: 1;
        transform: translateX(3px);
    }

    .automenu-tf-container .automenu-tf-product-item:has(~ .automenu-tf-cat-item),
    .automenu-tf-container .automenu-tf-cat-item~.automenu-tf-product-item {
        display: none;
    }

    .automenu-tf-column>.automenu-tf-view-all-products-list,
    .automenu-tf-view-all-products-list .automenu-tf-product-item {
        display: block !important;
    }
}

/* ==========================================================
   MOBILE: FISARMONICA ANNIDATA AD UNA COLONNA (<= 768px)
   ========================================================== */
@media (max-width: 768px) {

    .automenu-tf-container .automenu-tf-level .automenu-tf-link {
        font-size: 15px;
        font-weight: 200 !important;
    }


    .automenu-tf-arrow-btn {
        display: none;
        /* Su mobile si usa il pulsante toggle + / - */
    }
    .automenu-tf-container {
        max-height: 60vh;
        overflow-y: scroll;
        display: block;
        width: 100%;
        border-top: 1px solid var(--automenu-tf-color-border-mobile);
        border-radius: 6px;
        background: var(--automenu-tf-color-bg);
    }

    /* Nascondi colonne 2, 3, 4 e 5 su mobile */
    .automenu-tf-col-2,
    .automenu-tf-col-3,
    .automenu-tf-col-4,
    .automenu-tf-col-5 {
        display: none !important;
    }

    .automenu-tf-col-1 {
        width: 100%;
    }

    .automenu-tf-item {
        position: relative;
        border-bottom: 1px solid var(--automenu-tf-color-border-item-mobile);
    }

    .automenu-tf-container .automenu-tf-level.automenu-tf-depth-2 .automenu-tf-link,
    .automenu-tf-container .automenu-tf-level.automenu-tf-depth-3 .automenu-tf-link,
    .automenu-tf-container .automenu-tf-level.automenu-tf-depth-4 .automenu-tf-link{
        text-transform: capitalize;
    }
    /* Livello annidato inline per fisarmonica mobile */
    .automenu-tf-item .automenu-tf-level {
        display: none;
        padding-left: 15px;
        background-color: var(--automenu-tf-color-bg-nested-mobile);
        border-top: 1px solid var(--automenu-tf-color-border-column);
    }

    /* Quando l'elemento è aperto su mobile, mostra il sotto-livello annidato */
    .automenu-tf-item.open>.automenu-tf-level,
    .automenu-tf-item.active>.automenu-tf-level {
        display: block !important;
    }
    .open.active > .automenu-tf-level > .automenu-tf-item:last-child,
    .open.active .automenu-tf-product-item > .automenu-tf-link-wrapper:last-child{
        border-bottom: 0px;
    }
    .automenu-tf-container .automenu-tf-level .automenu-tf-item.automenu-tf-product-item {
        padding: 5px 0px 5px 15px !important;
    }
}

/*=============================
  CORREZIONI MEGAMENU 
  =============================*/
#page.htoverlay-active {
    overflow: hidden !important;
    height: 100vh !important;
}

body.wp-child-theme-shoptimizer-child:has(.automenu-tf-container) .htmega-menu-container .htmobile-menu-wrap,
body.wp-child-theme-shoptimizer-child:has(.automenu-tf-container) .htbody-overlay {
    display: unset !important;
}

.wp-child-theme-shoptimizer-child .htmobile-menu-wrap {
    width: 100%;
}

.admin-bar .htmobile-menu-wrap.inside {
    top: 65px;
    padding-top: 50px;
}

/*.wp-child-theme-shoptimizer-child .htoverlay-active {
    padding: 60px 20px 50px;
}*/

.wp-child-theme-shoptimizer-child .htmobile-menu-wrap .htmobile-aside-close {
    background-color: var(--automenu-tf-color-bg);
    color: var(--automenu-tf-color-close-btn-text);
    font-size: 22px;
    height: 60px;
    left: auto;
    right: 0px;
    line-height: 60px;
    width: 60px;
}

body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area .htmobile-menu-wrap>ul>li>a,
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container .htmobile-menu-wrap ul.htmega-megamenu>li>a {
    font-size: 1.2rem !important;
}