/* tin-mobile :: header mobile @media (max-width: 989px) */
/* Estratto da includes/header-style.php (refactor: file fisico cacheable) */

/* === STABILITÀ DIMENSIONI CROSS-BROWSER (globale, NON solo header) ===
   Impedisce a browser mobili e "in-app" (WebView di LINE/Facebook/Instagram,
   font-boosting di Android/Chrome) di AUTO-INGRANDIRE testo e icone. Senza,
   aprendo il sito da un login social il header e i testi apparivano più grossi
   delle dimensioni impostate. Regola standard dei reset CSS: blocca solo
   l'ingrandimento automatico, non rimpicciolisce nulla. Tiene le misure
   identiche su Safari, Chrome e browser in-app. */
html {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

        /* Shop/Jany link iniettati dal JS — nascosti di default (visibili solo mobile @media) */
        .tin-shop-link { display: none; }
        .tin-jany-chat-link { display: none; }

        /* FAQ iniettata nel menu: nascosta sul menu desktop, visibile solo nel drawer mobile */
        @media (min-width: 990px) { #avia-menu .tin-drawer-legal { display: none !important; } }
        /* social nel drawer: Messenger + Line, icone affiancate stile footer (beige pieno, 36px).
           NB: il drawer è un CLONE (#av-burger-menu-ul), quindi size/colore vanno per CLASSE,
           non scope-ati a #avia-menu (che è solo il menu desktop). */
        @media (max-width: 989px) {
            /* stessa riga: batte il display:block del drawer (reale + clone) */
            li.tin-drawer-social {
                display: inline-block !important;
                float: none !important;
                width: auto !important;
                vertical-align: middle !important;
                margin-top: 6px !important;
            }
            /* bullet off + link compatto */
            li.tin-drawer-social .avia-bullet { display: none !important; }
            li.tin-drawer-social > a {
                display: inline-flex !important;
                align-items: center !important;
                padding: 8px 18px 8px 6px !important;
            }
            li.tin-drawer-social .avia-menu-text { display: inline-flex !important; line-height: 0 !important; }
            /* via il border-bottom bianco (separatore Enfold: layout.min.css + dynamic-css.php)
               — specificità con #top #av-burger-menu-ul che batte le regole Enfold */
            #top .av-burger-overlay li.tin-drawer-social a,
            #top #av-burger-menu-ul li.tin-drawer-social a,
            #top .av-burger-overlay-scroll li.tin-drawer-social a,
            #avia-menu li.tin-drawer-social a {
                border: 0 !important;
                border-bottom: 0 !important;
                box-shadow: none !important;
                outline: 0 !important;
                background: transparent !important;
                text-decoration: none !important;
            }
            /* dimensione 36px (il colore è già nelle SVG a due tinte beige+verde) */
            li.tin-drawer-social svg { width: 36px !important; height: 36px !important; }
        }

        /* Icone outline account+carrello (swap via header.js): forza no-fill + stroke beige.
           Regole ad alta specificità per battere il fill:#d4a574 !important del mobile. */
        svg.tin-ic-svg, svg.tin-ic-svg * { fill: none !important; stroke: #d4a574 !important; }
        .responsive #top .av-main-nav-wrap .av-cart-container svg.tin-ic-svg,
        .responsive #top .av-main-nav-wrap .av-cart-container svg.tin-ic-svg *,
        .responsive #top .av-main-nav-wrap .cart_dropdown_first svg.tin-ic-svg,
        .responsive #top .av-main-nav-wrap .cart_dropdown_first svg.tin-ic-svg *,
        #header_main #menu-item-wc-account-icon svg.tin-ic-svg,
        #header_main #menu-item-wc-account-icon svg.tin-ic-svg * { fill: none !important; stroke: #d4a574 !important; }

        /* ====== Enfold mobile burger overlay (≤989px) ======
           Drawer 44% larghezza, slide da destra, sotto l'header. */
        @media only screen and (max-width: 989px) {
            #top .av-burger-overlay,
            #top .av-burger-overlay-scroll {
                width: 44% !important;
                min-width: 150px !important;
                max-width: 100% !important;
                left: auto !important;
                right: 0 !important;
                top: var(--tin-menu-h, 80px) !important;
                height: calc(100% - var(--tin-menu-h, 80px)) !important;
            }
            #top #av-burger-menu-ul { padding-top: 0 !important; }

            /* --- Logo → favicon 58×58 (translate per offset) --- */
            .responsive .av-logo-container .inner-container .logo img,
            .responsive .av-logo-container .logo.avia-standard-logo img {
                content: url('/wp-content/uploads/2025/05/cropped-tindoro-PRIME-LOGO-3-192x192.png') !important;
                width: 58px !important;
                height: 58px !important;
                max-width: 58px !important;
                max-height: 58px !important;
                object-fit: contain !important;
                transform: translate(-20px, -2px) !important;
            }
            .responsive .av-logo-container,
            .responsive .av-logo-container .inner-container,
            .responsive .av-logo-container .inner-container .logo,
            .responsive .av-logo-container .logo.avia-standard-logo,
            .responsive .av-logo-container .logo.avia-standard-logo a {
                overflow: visible !important;
            }
            .responsive .av-logo-container .inner-container .logo,
            .responsive .av-logo-container .logo.avia-standard-logo,
            .responsive .av-logo-container .logo.avia-standard-logo a {
                height: auto !important;
                line-height: 1 !important;
            }

            /* --- Bandiera SVG 38×25 --- */
            #header_main .tin-lang-switcher svg.tin-flag {
                width: 38px !important;
                height: 25px !important;
                display: inline-block !important;
                vertical-align: middle !important;
            }

            /* --- Omino (my-account) → glifo 30px beige #d4a574 --- */
            html body #header_main #menu-item-wc-account-icon > a,
            html body #header_main #menu-item-wc-account-icon > a *,
            html body #header_main #menu-item-wc-account-icon .avia-menu-fx,
            html body #header_main #menu-item-wc-account-icon [class*="avia-svg-icon"],
            html body #header_main #menu-item-wc-account-icon::before,
            html body #header_main #menu-item-wc-account-icon > a::before {
                color: #d4a574 !important;
                fill: #d4a574 !important;
            }
            #header_main #menu-item-wc-account-icon > a,
            #header_main #menu-item-wc-account-icon .avia-menu-fx,
            #header_main #menu-item-wc-account-icon [class*="avia-svg-icon"] {
                font-size: 30px !important;
                line-height: 1 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
                vertical-align: middle !important;
            }
            #header_main #menu-item-wc-account-icon svg,
            #header_main #menu-item-wc-account-icon svg * {
                width: 30px !important;
                height: 30px !important;
                vertical-align: middle !important;
                fill: #d4a574 !important;
            }

            /* --- Hamburger: linee 32×3, +2px verso il basso --- */
            #header_main .av-hamburger-box {
                width: 32px !important;
                height: 24px !important;
                transform: translateY(2px) !important;
            }
            #header_main .av-hamburger-inner,
            #header_main .av-hamburger-inner::before,
            #header_main .av-hamburger-inner::after {
                width: 32px !important;
                height: 3px !important;
                background-color: var(--tin-icon-color, #d4a574) !important;
            }

            /* --- Cart: 30px allineato e colorato beige --- */
            .responsive #top .av-main-nav-wrap .cart_dropdown_first,
            .responsive #top .av-main-nav-wrap .cart_dropdown_first > *,
            .responsive #top .av-main-nav-wrap .cart_dropdown_first > * > a,
            .responsive #top .av-main-nav-wrap .av-cart-container,
            .responsive #top .av-main-nav-wrap .av-cart-container > a,
            .responsive #top .av-main-nav-wrap .av-cart-container > a > * {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                line-height: 1 !important;
                padding: 0 !important;
                margin: 0 !important;
                vertical-align: middle !important;
                height: 36px !important;
            }
            .responsive #top .av-main-nav-wrap .cart_dropdown_first [class*="avia_iconbox_icon"],
            .responsive #top .av-main-nav-wrap .cart_dropdown_first [class*="entypo-icon"],
            .responsive #top .av-main-nav-wrap .av-cart-container a::before,
            .responsive #top .av-main-nav-wrap .av-cart-container svg,
            .responsive #top .av-main-nav-wrap .cart_dropdown_first svg {
                font-size: 30px !important;
                width: 30px !important;
                height: 30px !important;
                line-height: 1 !important;
                vertical-align: middle !important;
                color: #d4a574 !important;
                fill: #d4a574 !important;
            }
            html body .responsive #top .av-main-nav-wrap .cart_dropdown_first,
            html body .responsive #top .av-main-nav-wrap .cart_dropdown_first *,
            html body #top .av-main-nav-wrap .cart_dropdown_first,
            html body #top .av-main-nav-wrap .cart_dropdown_first * {
                color: #d4a574 !important;
            }

            /* === Cluster icone header (no riquadro) === */
            .responsive #top .av-main-nav-wrap {
                display: flex !important;
                align-items: center !important;
            }

            /* --- Shop link (giallo tema) --- */
            html body.responsive #top .av-main-nav-wrap .tin-shop-link {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 40px !important;
                min-width: 40px !important;
                visibility: visible !important;
                width: auto !important;
                overflow: visible !important;
            }
            html body.responsive #top .av-main-nav-wrap .tin-shop-link > a {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 40px !important;
                width: 40px !important;
                padding: 0 !important;
                margin: 0 !important;
                text-decoration: none !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            html.responsive #top .av-main-nav-wrap .tin-shop-link > a > img,
            .responsive #top .av-main-nav-wrap .tin-shop-link > a > img,
            html body.responsive #top .av-main-nav-wrap .tin-shop-link > a > img {
                width: 72px !important;
                height: 72px !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                margin: 0 !important;
                padding: 0 !important;
                vertical-align: middle !important;
            }
            /* Shop margin-top via .responsive (non body.responsive — è su html) */
            html.responsive #top .av-main-nav-wrap > .av-main-nav > .tin-shop-link,
            .responsive #top .av-main-nav-wrap > .av-main-nav > .tin-shop-link {
                margin-top: -4px !important;
                position: relative !important;
                top: 0 !important;
            }

            /* --- Jany chat link (beige) --- */
            html body.responsive #top .av-main-nav-wrap .tin-jany-chat-link {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 40px !important;
                min-width: 40px !important;
                visibility: visible !important;
                width: auto !important;
                overflow: visible !important;
            }
            html body.responsive #top .av-main-nav-wrap .tin-jany-chat-link > a {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 40px !important;
                width: 40px !important;
                padding: 0 !important;
                margin: 0 !important;
                text-decoration: none !important;
                visibility: visible !important;
                opacity: 1 !important;
                cursor: pointer !important;
            }
            html.responsive #top .av-main-nav-wrap .tin-jany-chat-link > a > img,
            .responsive #top .av-main-nav-wrap .tin-jany-chat-link > a > img {
                width: 32px !important;
                height: 32px !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                vertical-align: middle !important;
                transform: translateY(0) !important;
            }

            /* Nascondi shop/jany nel drawer (già nel cluster header) */
            #top .av-burger-overlay .tin-shop-link,
            #top #av-burger-menu-ul > li.tin-shop-link,
            #top .av-burger-overlay .tin-jany-chat-link,
            #top #av-burger-menu-ul > li.tin-jany-chat-link {
                display: none !important;
            }

            /* #menu-item-shop UL: nascosto (cart sta dentro av-main-nav post-JS) */
            .responsive #top .av-main-nav-wrap > #menu-item-shop {
                display: none !important;
            }

            /* === .av-main-nav UL: flex con gap base 13px, COMPATTATE A DESTRA === */
            /* flex-end: le icone si raggruppano a destra e NON invadono la favicon-logo a sinistra
               (così il logo resta libero e cliccabile per tornare alla home) */
            .responsive #top .av-main-nav-wrap > .av-main-nav {
                display: flex !important;
                align-items: center !important;
                justify-content: flex-end !important;
                gap: 13px !important;
                margin: 0 !important;
                padding: 0 !important;
                list-style: none !important;
                width: 100% !important;
            }
            /* Il contenitore icone è largo 100% e copre la favicon-logo a sinistra: lo rendo
               "trasparente ai tap" nelle zone vuote (così il tap sulla favicon passa al logo),
               mentre ogni icona (li) resta pienamente cliccabile. */
            .responsive #top .main_menu,
            .responsive #top .av-main-nav-wrap,
            .responsive #top .av-main-nav-wrap > .av-main-nav { pointer-events: none !important; }
            .responsive #top .av-main-nav-wrap > .av-main-nav > li,
            .responsive #top .av-main-nav-wrap > .av-main-nav > li *,
            .responsive #top .av-main-nav-wrap .cart_dropdown_first,
            .responsive #top .av-main-nav-wrap .av-burger-menu-main { pointer-events: auto !important; }
            /* Area CLICCABILE del logo limitata alla favicon (il link è largo ~265px): così
               toccando lo spazio vuoto tra le icone NON si va più in home per sbaglio.
               overflow:visible mantiene la favicon visibile per intero. */
            .responsive #top .logo a {
                display: inline-block !important;
                vertical-align: middle !important;
                position: relative !important;
                top: 11px !important;   /* riallinea la favicon in asse con le icone (inline-block la alzava) */
                width: 44px !important;
                max-width: 44px !important;
                overflow: visible !important;
            }

            /* === ORDINE icone L→R (swap shop↔omino) === */
            .responsive #top .av-main-nav-wrap > .av-main-nav > .tin-lang-switcher         { order: 1 !important; }
            .responsive #top .av-main-nav-wrap > .av-main-nav > .tin-jany-chat-link        { order: 2 !important; }
            .responsive #top .av-main-nav-wrap > .av-main-nav > .tin-shop-link             { order: 3 !important; }
            .responsive #top .av-main-nav-wrap > .av-main-nav > .cart_dropdown_first       { order: 4 !important; }
            .responsive #top .av-main-nav-wrap > .av-main-nav > #menu-item-wc-account-icon { order: 5 !important; }
            .responsive #top .av-main-nav-wrap > .av-main-nav > .av-burger-menu-main       { order: 6 !important; }

            /* Gap custom per coppia (override base 13px tramite margin) */
            .responsive #top .av-main-nav-wrap > .av-main-nav > .tin-lang-switcher       { margin-right: 12px !important; }   /* flag↔shop (chat rimossa) */
            .responsive #top .av-main-nav-wrap > .av-main-nav > .tin-jany-chat-link      { margin-right: 4px !important; }    /* jany↔shop = 17 */
            .responsive #top .av-main-nav-wrap > .av-main-nav > .tin-shop-link           { margin-left: 2px !important; margin-right: 12px !important; }   /* chat↔shop ≈ 14 */
            .responsive #top .av-main-nav-wrap > .av-main-nav > .cart_dropdown_first     { margin-left: -4px !important; margin-right: 7px !important; transform: translateY(0) !important; }
            .responsive #top .av-main-nav-wrap > .av-main-nav > #menu-item-wc-account-icon { margin-right: 5px !important; }   /* omino↔hamburger +5 */

            /* TUTTE le LI cluster: stessa box 36×36 */
            .responsive #top .av-main-nav-wrap .av-main-nav > li,
            .responsive #top .av-main-nav-wrap #menu-item-shop,
            .responsive #top .av-main-nav-wrap .cart_dropdown_first,
            .responsive #top .av-main-nav-wrap .tin-shop-link,
            .responsive #top .av-main-nav-wrap .tin-jany-chat-link {
                margin: 0 !important;
                padding: 0 !important;
                float: none !important;
                list-style: none !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 36px !important;
                min-width: 36px !important;
                line-height: 1 !important;
            }
            .responsive #top .av-main-nav-wrap .av-main-nav > li > a,
            .responsive #top .av-main-nav-wrap .cart_dropdown_first > a,
            .responsive #top .av-main-nav-wrap .cart_dropdown_first > div > a,
            .responsive #top .av-main-nav-wrap .av-burger-menu-main > a {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                height: 36px !important;
                padding: 0 !important;
                margin: 0 !important;
                line-height: 1 !important;
                vertical-align: middle !important;
            }
            .responsive #top .av-main-nav-wrap .av-hamburger-box {
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
            }

            /* Cart positioning override (anti-escape Enfold/WC) */
            .responsive #top .av-main-nav-wrap .cart_dropdown_first {
                position: relative !important;
                display: inline-flex !important;
                align-items: center !important;
                top: auto !important; right: auto !important;
                left: auto !important; bottom: auto !important;
                width: auto !important;
                height: 36px !important;
                min-width: 36px !important;
            }
            .responsive #top .av-main-nav-wrap .av-cart-container {
                position: relative !important;
                top: auto !important; right: auto !important;
                left: auto !important; bottom: auto !important;
                display: inline-flex !important;
                align-items: center !important;
                width: auto !important;
                height: 36px !important;
            }
            .responsive #top .av-main-nav-wrap .cart_dropdown_first .dropdown_widget {
                display: none !important;
            }

            /* Nasconde voci menu desktop (Home/Shop/blog) nel cluster, ma resta visibile nel drawer */
            .responsive #top .av-main-nav-wrap > .av-main-nav > li:not(.tin-lang-switcher):not(#menu-item-wc-account-icon):not(.av-burger-menu-main):not(.cart_dropdown_first):not(.tin-shop-link):not(.tin-jany-chat-link) {
                width: 0 !important;
                min-width: 0 !important;
                max-width: 0 !important;
                overflow: hidden !important;
                visibility: hidden !important;
                pointer-events: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            /* Nel drawer mobile, ripristina visibilità */
            #top .av-burger-overlay .av-main-nav > li,
            #top #av-burger-menu-ul > li,
            #top .av-burger-overlay-scroll li {
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                overflow: visible !important;
                visibility: visible !important;
                pointer-events: auto !important;
                opacity: 1 !important;
                display: block !important;
                position: relative !important;
                top: 0 !important;
                left: 0 !important;
                transform: none !important;
            }
            #top #av-burger-menu-ul {
                display: block !important;
                padding: 20px 0 !important;
                vertical-align: top !important;
                width: 100% !important;
                height: auto !important;
            }
            #top .av-burger-overlay-inner {
                display: block !important;
            }
            #top .av-burger-overlay li a {
                padding: 12px 24px !important;
                display: block !important;
                line-height: 1.4 !important;
                height: auto !important;
            }
            #top .av-burger-overlay .cart_dropdown_first,
            #top #av-burger-menu-ul > li.cart_dropdown_first,
            #top #av-burger-menu-ul > li.menu-item-shop {
                display: none !important;
            }

            /* === HEADER STICKY ===
               IMPORTANTE: .responsive sta su <html>, NON su <body>, e #top È il <body>
               (body id="top"). I vecchi selettori "html body.responsive ..." e
               "html body #top #header" NON matchavano MAI → la CSS non rendeva fisso
               l'header né riservava il padding, e ci pensava solo il JS DOPO il paint =
               il contenuto risaliva di 80px (layout shift / CLS). Selettori corretti con
               body#top (il body ha davvero id=top): applicati già al PRIMO PAINT →
               niente salto + contenuto correttamente sotto l'header fisso. La media
               query che avvolge il blocco li limita già al mobile. */
            html.responsive #top #wrap_all #header,
            html.responsive #wrap_all #header,
            html body#top #header {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                z-index: 9999 !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
            }
            html.responsive #top #wrap_all,
            html body#top #wrap_all {
                overflow: visible !important;
            }
            html body#top #main {
                padding-top: 80px !important;
            }
        }

        /* ===== Blog: thumbnail responsive su mobile =====
           Le thumbnail del blog (Enfold .slide-entry) hanno width:260px fisso + max-width:100%:
           su desktop/tablet si rimpiccioliscono e riempiono la card, ma su mobile single-column
           (card ~332px) restano 260px → lasciano margini grigi ai lati. Le faccio riempire la card.
           Innocua a 768-989px: lì l'immagine è già più piccola del link, quindi 100% = stessa size. */
        @media (max-width: 989px) {
            #top .slide-entry a.slide-image img,
            #top .slide-entry a.slide-image picture {
                width: 100% !important;
                height: auto !important;
                max-width: 100% !important;
            }
        }