/* ============================================================
   TECHTRONIC THEME
   main.css
   ============================================================ */


/* ============================================================
   1. VARIABILI
   ============================================================ */

:root{
    --tt-navy:#071f33;
    --tt-navy-light:#102d42;
    --tt-blue:#0c4da2;
    --tt-orange:#ff7a18;

    --tt-ink:#15191e;
    --tt-soft:#f4f6f8;
    --tt-line:#dbe2e8;

    --tt-content-width:1480px;
}


/* ============================================================
   2. BASE
   ============================================================ */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
}


/* ============================================================
   3. BARRA SUPERIORE
   ============================================================ */

.tt-utility{
    border-top:4px solid var(--tt-orange);
    background:#eef5f9;
    font-size:.86rem;
}

.tt-utility-inner{
    min-height:38px;
}

.tt-utility p{
    margin:.35rem 0;
}


/* ============================================================
   4. HEADER
   ============================================================ */

.tt-header-main,
.editor-styles-wrapper .tt-header-main{
    background:var(--tt-navy)!important;
    color:#fff!important;
    border-bottom:3px solid var(--tt-orange);
}

.tt-header-inner,
.editor-styles-wrapper .tt-header-inner{
    min-height:86px;

    display:flex;
    align-items:center;

    flex-wrap:nowrap!important;

    gap:24px;
}


/* ============================================================
   5. LOGO
   ============================================================ */

.tt-brand,
.editor-styles-wrapper .tt-brand{
    flex:0 0 320px;

    width:320px;
    min-width:320px;
    min-height:60px;

    display:flex;
    align-items:center;
}

.tt-site-logo,
.editor-styles-wrapper .tt-site-logo{
    flex:0 0 auto;
}

.tt-site-logo img,
.editor-styles-wrapper .tt-site-logo img{
    display:block;

    width:auto!important;
    height:auto!important;

    max-width:220px!important;
    max-height:65px!important;

    object-fit:contain;
}


/* ============================================================
   6. NAVIGAZIONE PRINCIPALE
   ============================================================ */

.tt-main-nav,
.editor-styles-wrapper .tt-main-nav{
    margin-left:auto!important;

    flex:1 1 auto;

    width:auto!important;

    color:#fff!important;
}

.tt-main-nav .wp-block-navigation__container,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation__container{
    display:flex!important;

    align-items:stretch!important;
    justify-content:flex-end!important;

    flex-wrap:nowrap!important;

    gap:0!important;
}

.tt-main-nav .wp-block-navigation-item,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-item{
    margin:0!important;

    color:#fff!important;
    background:transparent;

    white-space:nowrap;
}

.tt-main-nav .wp-block-navigation-item__content,
.tt-main-nav .wp-block-navigation-item__label,
.tt-main-nav .wp-block-navigation-submenu__toggle,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-item__content,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-item__label,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-submenu__toggle{
    color:#fff!important;
}

.tt-main-nav .wp-block-navigation-item__content,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-item__content{
    display:flex;
    align-items:center;

    min-height:58px;

    padding:.8rem .9rem!important;

    font-weight:700;

    transition:
        background-color .22s ease,
        color .22s ease,
        transform .22s ease;
}

.tt-main-nav .wp-block-navigation-item__content:hover,
.tt-main-nav .wp-block-navigation-item__content:focus,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-item__content:hover,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-item__content:focus{
    background:var(--tt-navy)!important;
    color:#fff!important;

    transform:translateY(-1px);
}


/* ============================================================
   7. SOTTOMENU
   ============================================================ */

.tt-main-nav .wp-block-navigation-submenu__toggle,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation-submenu__toggle{
    background:transparent!important;
}

.tt-main-nav .wp-block-navigation__submenu-icon,
.tt-main-nav .wp-block-navigation__submenu-icon svg,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation__submenu-icon,
.editor-styles-wrapper .tt-main-nav .wp-block-navigation__submenu-icon svg{
    color:#fff!important;
    fill:#fff!important;
    stroke:#fff!important;
}


/* Dropdown desktop */

@media (min-width:1001px){

    .tt-main-nav .wp-block-navigation__submenu-container{
        width:340px!important;
        min-width:340px!important;

        padding:8px 0!important;

        background:var(--tt-navy)!important;
        color:#fff!important;

        border:1px solid rgba(255,255,255,.18)!important;

        box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
    }


    /* singola voce */

    .tt-main-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item{
        width:100%!important;
        min-height:0!important;
        margin:0!important;
    }


    .tt-main-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content{
        box-sizing:border-box!important;

        width:100%!important;
        min-width:0!important;
        min-height:0!important;

        padding:9px 16px!important;

        font-size:.93rem!important;
        font-weight:600!important;
        line-height:1.25!important;

        color:#fff!important;
        background:transparent!important;

        transform:none!important;
    }


    /* hover */

    .tt-main-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover,
    
    .tt-main-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:focus{
        background:rgba(255,255,255,.10)!important;
        color:#fff!important;

        transform:none!important;
    }
}


/* ============================================================
   8. ICONE HEADER / WOOCOMMERCE
   ============================================================ */

.tt-main-nav button,
.tt-main-nav svg,
.editor-styles-wrapper .tt-main-nav button,
.editor-styles-wrapper .tt-main-nav svg{
    color:#fff!important;
}

.tt-header-main .wc-block-mini-cart__button,
.tt-header-main .wc-block-customer-account a,
.tt-header-main .wc-block-customer-account__account-icon,
.editor-styles-wrapper .tt-header-main .wc-block-mini-cart__button,
.editor-styles-wrapper .tt-header-main .wc-block-customer-account a{
    color:#fff!important;
}

.tt-header-main .wc-block-mini-cart__icon,
.tt-header-main .wc-block-customer-account svg,
.editor-styles-wrapper .tt-header-main .wc-block-mini-cart__icon,
.editor-styles-wrapper .tt-header-main .wc-block-customer-account svg{
    fill:currentColor!important;
    color:#fff!important;
}


/* ============================================================
   9. HERO
   ============================================================ */

.tt-hero{
    background:
        linear-gradient(
            105deg,
            var(--tt-navy),
            var(--tt-navy-light)
        );

    color:#fff;

    padding:40px 24px;
}

.tt-hero-columns{
    gap:48px;
    align-items:center;
}

.tt-hero-copy h1{
    font-size:clamp(2.25rem, 3vw, 3.4rem);
    line-height:1.08;
}

.tt-hero-copy > p:not(.tt-kicker){
    font-size:clamp(1.15rem, 1.35vw, 1.4rem);
    line-height:1.55;
}

.tt-hero p{
    line-height:1.55;
}

.tt-kicker{
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--tt-orange);
}


/* ============================================================
   10. SHOWCASE
   ============================================================ */

.tt-showcase{
    border:1px solid rgba(255,255,255,.20);
    padding:18px 20px;
    min-height:0;
    background:rgba(255,255,255,.035);
}

.tt-showcase h2{
    font-size:clamp(1.75rem, 2vw, 2.25rem);
    line-height:1.15;
}


/* ============================================================
   11. PULSANTI
   ============================================================ */

.wp-block-button__link,
.tt-hero .wp-block-button__link{
    font-size:1rem;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease,
        background-color .22s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus{
    transform:translateY(-3px);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.18);

    filter:brightness(1.04);
}


/* ============================================================
   12. SLOT MEDIA / SLIDER
   ============================================================ */

.tt-media-slot{
    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    min-height:0;

    overflow:hidden;

    border:1px dashed rgba(255,255,255,.36);

    background:rgba(255,255,255,.06);

    display:flex;
    flex-direction:column;

    justify-content:center;
}

.tt-media-slot >
.wp-block-image,

.tt-media-slot >
.wp-block-video,

.tt-media-slot >
.wp-block-cover,

.tt-media-slot >
.wp-block-gallery{
    width:100%;
    height:100%;

    margin:0;
}

.tt-media-slot >
.wp-block-image img,

.tt-media-slot >
.wp-block-video video,

.tt-media-slot >
.wp-block-cover img,

.tt-media-slot
.wp-block-gallery
.wp-block-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}


/* ============================================================
   13. SLIDER
   ============================================================ */

.tt-media-slot
.wp-block-gallery.tt-slider-ready{
    position:absolute;

    inset:0;

    display:block;

    overflow:hidden;
}

.tt-media-slot
.wp-block-gallery.tt-slider-ready >
.wp-block-image{
    position:absolute;

    inset:0;

    width:100%!important;
    height:100%!important;

    margin:0!important;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .55s ease,
        visibility .55s ease;
}

.tt-media-slot
.wp-block-gallery.tt-slider-ready >
.wp-block-image.is-active{
    opacity:1;
    visibility:visible;
}


/* ============================================================
   14. CONTROLLI SLIDER
   ============================================================ */

.tt-slider-controls{
    position:absolute;

    inset:0;

    z-index:4;

    pointer-events:none;
}

.tt-slider-arrow{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    border:1px solid rgba(255,255,255,.65);

    border-radius:50%;

    background:rgba(7,31,51,.62);

    color:#fff;

    font-size:2rem;
    line-height:1;

    cursor:pointer;

    pointer-events:auto;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.tt-slider-arrow:hover,
.tt-slider-arrow:focus{
    background:rgba(12,77,162,.9);

    transform:
        translateY(-50%)
        scale(1.05);
}

.tt-slider-prev{
    left:14px;
}

.tt-slider-next{
    right:14px;
}

.tt-slider-dots{
    position:absolute;

    left:50%;
    bottom:14px;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

    pointer-events:auto;
}

.tt-slider-dot{
    width:9px;
    height:9px;

    padding:0;

    border:1px solid #fff;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    cursor:pointer;
}

.tt-slider-dot.is-active{
    background:var(--tt-orange);
    border-color:var(--tt-orange);
}


/* ============================================================
   15. CATALOGO
   ============================================================ */

.tt-catalog{
    padding:46px 24px 58px;
}


/* ============================================================
   16. TESTATA SEZIONE CATALOGO
   ============================================================ */

.tt-section-head{
    width:100%;
    max-width:none;
    margin:0 0 30px;
    padding:0;
}

.tt-section-head .tt-kicker{
    margin:0 0 10px;
    font-size:.75rem;
}

.tt-section-head h2{
    font-size:clamp(1.75rem, 2.1vw, 2.3rem);
    line-height:1.12;
    margin:0 0 12px;
    max-width:none;
}

.tt-section-head p{
    font-size:.95rem;
    line-height:1.5;
    margin:0;
    max-width:none;
}


/* ============================================================
   17. RIGHE CARD
   ============================================================ */

.tt-card-row{
    gap:20px;

    margin-bottom:20px;
}


/* ============================================================
   18. CARD
   ============================================================ */

.tt-card{
    overflow:hidden;

    border:1px solid var(--tt-line);

    border-radius:14px;

    background:var(--tt-soft);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease;
}

.tt-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 42px
        rgba(7,31,51,.12);

    border-color:#c2ced8;
}


/* ============================================================
   19. IMMAGINE CARD
   ============================================================ */

.tt-card-media{
    height:170px;

    background:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#8798a8;

    overflow:hidden;
}

.tt-card-media img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center;

    transition:transform .28s ease;
}

.tt-card:hover .tt-card-media img{
    transform:scale(1.035);
}


/* ============================================================
   20. CORPO CARD
   ============================================================ */

.tt-card-body{
    padding:22px 24px 24px;

    background:var(--tt-soft);
}

.tt-card-body h3{
    font-size:1.12rem;

    line-height:1.25;

    margin:0 0 14px;
}

.tt-card-body p{
    font-size:.94rem;

    line-height:1.5;

    margin-top:0;
}

.tt-card-link{
    margin-top:18px;
}

.tt-card-link a{
    font-weight:800;
}

.tt-card:hover .tt-card-link a{
    color:var(--tt-orange);
}


/* ============================================================
   21. SEZIONE AZIENDA
   ============================================================ */

.tt-company{
    background:var(--tt-soft);

    padding:54px 24px;
}

.tt-company-media{
    min-height:300px;

    background:#dfe6eb;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:24px;
}

.tt-company h2{
    font-size:clamp(2rem,3vw,3.2rem);

    line-height:1.1;

    margin:.3rem 0 1rem;
}

.tt-company p{
    line-height:1.55;
}


/* ============================================================
   22. CALL TO ACTION
   ============================================================ */

.tt-cta{
    background:var(--tt-navy);

    color:#fff;

    padding:34px 24px;
}

.tt-cta h2{
    margin:0;

    font-size:clamp(1.7rem,2.5vw,2.5rem);

    line-height:1.15;
}


/* ============================================================
   23. FOOTER
   ============================================================ */

.tt-footer{
    background:#061f31;
    color:#fff;
    padding:34px 30px 16px;
}

.tt-footer a{
    color:inherit;
    text-decoration:none;
}

.tt-footer a:hover{
    color:var(--tt-orange);
}

.tt-footer-cols{
    margin:0;
    gap:50px;
    align-items:flex-start;
}

.tt-footer h4{
    margin:0 0 12px;
    font-size:1rem;
    line-height:1.2;
}

.tt-footer-brand .wp-block-site-logo{
    margin:0 0 16px;
}

.tt-footer-company{
    margin:0;
    font-size:.92rem;
    line-height:1.55;
}

.tt-footer-links p,
.tt-footer-legal{
    margin:0;
    font-size:.92rem;
    line-height:1.65;
}

.tt-footer-social{
    margin:0 0 14px;
    gap:12px;
}

.tt-footer-social .wp-social-link{
    margin:0;
}

.tt-footer-social .wp-social-link a{
    padding:7px;
}

.tt-footer-bottom{
    margin-top:26px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.14);
    font-size:.8rem;
}

.tt-footer-bottom p{
    margin:0;
}


/* ============================================================
   24. TECHTRONIC LIVE - COMPATTATO
   ============================================================ */

.tt-live-slider{
    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;

    padding:2px 0 0;

    background:transparent;
}

.tt-live-slide{
    display:none;

    flex-direction:column;

    gap:4px;
}

.tt-live-slide.is-active{
    display:flex;
}

.tt-live-content{
    width:94%;
    max-width:720px;

    margin:0 auto;
}

.tt-live-title{
    margin:0 0 1px;

    font-size:clamp(1.2rem, 1.5vw, 1.6rem);
    line-height:1.1;
}

.tt-live-title a{
    color:#fff;
    text-decoration:none;
}

.tt-live-title a:hover{
    color:var(--tt-orange);
}

.tt-live-image-link{
    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:12px;
}

.tt-live-image{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 99.5%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            black 99.5%,
            transparent 100%
        );
}

.tt-live-image-placeholder{
    width:100%;
    height:100%;

    background:
        linear-gradient(
            135deg,
            #17384f,
            #0b2639
        );
}

.tt-live-footer{
    width:100%;

    margin:1px 0 0;

    text-align:right;
}

.tt-live-footer a{
    color:#fff;
    text-decoration:none;

    font-size:.95rem;
    font-weight:700;
}

.tt-live-footer a:hover{
    color:var(--tt-orange);
}

.tt-live-empty{
    width:100%;
    min-height:200px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:6px;

    color:#fff;
    text-align:center;
}

.tt-live-empty strong{
    color:var(--tt-orange);
}


/* ============================================================
   25. SINGOLO ARTICOLO
   ============================================================ */

.tt-single{
    padding:48px 24px 72px;
}

.tt-single-header{
    width:100%;
    max-width:1100px;
    margin:0 auto 28px;
}

.tt-single-category{
    margin:0 0 12px;

    color:var(--tt-orange);

    font-size:.78rem;
    font-weight:800;
    line-height:1.2;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.tt-single-category a{
    color:inherit;
    text-decoration:none;
}

.tt-single-title{
    max-width:900px;

    margin:0;

    font-size:clamp(2rem, 3vw, 3rem);
    line-height:1.08;
}

.tt-single-meta{
    margin-top:14px;

    color:#667783;

    font-size:.9rem;
}


/* Immagine principale */

.tt-single-featured{
    width:100%;
    max-width:1100px;

    margin:0 auto 42px;
}

.tt-single-featured img{
    display:block;

    width:100%;
    max-height:560px;

    object-fit:cover;
    object-position:center;

    border-radius:12px;
}


/* Contenuto */

.tt-single-content-wrap{
    width:100%;
    max-width:820px;

    margin:0 auto;
}

.tt-single-content{
    font-size:1.08rem;
    line-height:1.75;
}

.tt-single-content p{
    margin-top:0;
    margin-bottom:1.4em;
}

.tt-single-content h2{
    margin-top:2em;
    margin-bottom:.7em;

    font-size:1.75rem;
    line-height:1.2;
}

.tt-single-content h3{
    margin-top:1.8em;
    margin-bottom:.6em;

    font-size:1.4rem;
    line-height:1.25;
}


/* Le immagini inserite nel testo non diventano gigantesche */

.tt-single-content figure{
    margin-top:32px;
    margin-bottom:32px;
}

.tt-single-content img{
    max-width:100%;
    height:auto;

    border-radius:8px;
}


/* ============================================================
   26. TABLET / DESKTOP COMPATTO
   ============================================================ */

@media(max-width:1200px){

    .tt-brand,
    .editor-styles-wrapper .tt-brand{
        flex-basis:190px;

        width:190px;
        min-width:190px;
    }

    .tt-site-logo img,
    .editor-styles-wrapper .tt-site-logo img{
        max-width:185px!important;
        max-height:58px!important;
    }

    .tt-main-nav
    .wp-block-navigation-item__content,

    .editor-styles-wrapper
    .tt-main-nav
    .wp-block-navigation-item__content{
        padding:.75rem .65rem!important;

        font-size:.92rem;
    }

    .tt-hero{
        padding-top:36px;
        padding-bottom:36px;
    }

    .tt-hero-columns{
        gap:36px;
    }

    .tt-catalog{
        padding-top:52px;
        padding-bottom:60px;
    }

    /* FOOTER - DESKTOP COMPATTO */
    .tt-footer{
        padding:30px 24px 16px;
    }

    .tt-footer-cols{
        gap:36px;
    }
}


/* ============================================================
   27. MOBILE (≤1000px)
   ============================================================ */

@media(max-width:1000px){

    /* 27.1 Nascondi il menu desktop */
    .tt-main-nav > .wp-block-navigation__container{
        display:none!important;
    }

    .tt-main-nav > .wp-block-navigation-item{
        display:none!important;
    }


    /* 27.2 Header mobile */
    .tt-header-inner,
    .editor-styles-wrapper .tt-header-inner{
        min-height:76px!important;
        padding:8px 16px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        flex-wrap:nowrap!important;
        gap:12px!important;
    }

    .tt-brand,
    .editor-styles-wrapper .tt-brand{
        flex:1 1 auto!important;
        width:auto!important;
        min-width:0!important;
        min-height:56px!important;
    }

    .tt-site-logo img,
    .editor-styles-wrapper .tt-site-logo img{
        max-width:min(210px,64vw)!important;
        max-height:58px!important;
    }

    .tt-main-nav,
    .editor-styles-wrapper .tt-main-nav{
        flex:0 0 auto!important;
        width:auto!important;
        margin-left:auto!important;
    }


    /* 27.3 Pulsante hamburger */
    .tt-main-nav .wp-block-navigation__responsive-container-open,
    .editor-styles-wrapper .tt-main-nav .wp-block-navigation__responsive-container-open{
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:44px!important;
        height:44px!important;
        margin:0!important;
        padding:7px!important;
        border:1px solid rgba(255,255,255,.32)!important;
        border-radius:7px!important;
        background:transparent!important;
        color:#fff!important;
    }

    .tt-main-nav .wp-block-navigation__responsive-container-open svg,
    .editor-styles-wrapper .tt-main-nav .wp-block-navigation__responsive-container-open svg{
        width:27px!important;
        height:27px!important;
        color:#fff!important;
        fill:currentColor!important;
    }


    /* 27.4 Overlay full‑screen */
    .tt-nav-overlay{
        width:100%;
        min-height:100dvh;
        box-sizing:border-box;
        background:var(--tt-navy)!important;
        color:#fff!important;
    }

    .tt-nav-overlay-head{
        width:100%;
        min-height:58px;
        margin:0!important;
    }

    .tt-overlay-logo img{
        display:block;
        width:auto!important;
        height:auto!important;
        max-width:190px!important;
        max-height:56px!important;
        object-fit:contain;
    }

    .tt-nav-overlay .wp-block-navigation-overlay-close{
        margin-left:auto!important;
        color:#fff!important;
    }

    .tt-nav-overlay .wp-block-navigation-overlay-close button,
    .tt-nav-overlay .wp-block-navigation-overlay-close svg{
        color:#fff!important;
    }

    .tt-overlay-separator{
        width:100%!important;
        height:2px!important;
        margin:10px 0 12px!important;
        border:0!important;
        opacity:1!important;
    }


    /* 27.5 Navigazione overlay – WordPress gestisce struttura e apertura */
    .tt-overlay-nav{
        width:100%!important;
        margin:0!important;
        color:#fff!important;
    }

    /* Solo il contenitore principale */
    .tt-overlay-nav > .wp-block-navigation__container{
        width:100%!important;
        gap:0!important;
    }

    /* Voci principali */
    .tt-overlay-nav > .wp-block-navigation__container >
    .wp-block-navigation-item{
        width:100%!important;
        margin:0!important;
        border-bottom:1px solid rgba(255,255,255,.13);
        color:#fff!important;
    }

    /* IMPORTANTE: niente width:100% sul link */
    .tt-overlay-nav .wp-block-navigation-item__content{
        min-height:0!important;
        padding:8px 4px!important;

        background:transparent!important;
        color:#fff!important;

        font-size:1rem!important;
        font-weight:700!important;
        line-height:1.25!important;

        transform:none!important;
    }

    .tt-overlay-nav .wp-block-navigation-item__content:hover,
    .tt-overlay-nav .wp-block-navigation-item__content:focus,
    .tt-overlay-nav .current-menu-item >
    .wp-block-navigation-item__content{
        background:transparent!important;
        color:var(--tt-orange)!important;
        transform:none!important;
    }

    /* Pulsante sottomenu */
    .tt-overlay-nav .wp-block-navigation-submenu__toggle{
        color:#fff!important;
        background:transparent!important;
    }

    .tt-overlay-nav .wp-block-navigation__submenu-icon,
    .tt-overlay-nav .wp-block-navigation__submenu-icon svg{
        color:#fff!important;
        fill:#fff!important;
        stroke:#fff!important;
    }

    /* Solo estetica dei figli.
       NON tocchiamo display, visibility, position ecc. */
    .tt-overlay-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item{
        border-bottom:0!important;
    }

    .tt-overlay-nav
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content{
        padding:7px 4px!important;
        color:rgba(255,255,255,.82)!important;
        font-size:.91rem!important;
        font-weight:600!important;
    }

/* ============================================================
   27.6 ACCORDION SOTTOMENU MOBILE
   ============================================================ */

.tt-overlay-nav .tt-has-accordion{
    position:relative!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;

    width:100%!important;
    margin:0!important;

    align-items:center!important;
}

/* Link Prodotti */
.tt-overlay-nav
.tt-has-accordion >
.wp-block-navigation-item__content{
    grid-column:1!important;
    grid-row:1!important;

    width:auto!important;

    margin:0!important;
    padding:8px 4px!important;
}

/* Elimina eventuale freccia nativa WP */
.tt-overlay-nav
.tt-has-accordion >
.wp-block-navigation__submenu-icon{
    display:none!important;
}

/* Nostro pulsante */
.tt-overlay-nav .tt-submenu-toggle{
    grid-column:2!important;
    grid-row:1!important;

    width:42px!important;
    height:100%!important;
    min-height:38px!important;

    margin:0!important;
    padding:0!important;

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

    border:0!important;
    background:transparent!important;

    color:#fff!important;
    cursor:pointer;
}

/* Freccia */
.tt-overlay-nav .tt-submenu-toggle span{
    display:block;

    width:7px;
    height:7px;

    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;

    transform:rotate(45deg);
    transition:transform .2s ease;
}


/* ----------------------------
   SOTTOMENU CHIUSO
   ---------------------------- */

.tt-overlay-nav
.tt-has-accordion >
.wp-block-navigation__submenu-container{
    display:none!important;

    position:static!important;

    grid-column:1 / -1!important;
    grid-row:2!important;

    width:100%!important;
    min-width:0!important;

    margin:0!important;
    padding:2px 0 8px 20px!important;

    background:transparent!important;

    border:0!important;
    box-shadow:none!important;
}


/* ----------------------------
   SOTTOMENU APERTO
   ---------------------------- */

.tt-overlay-nav
.tt-has-accordion.tt-submenu-open >
.wp-block-navigation__submenu-container{
    display:flex!important;
    flex-direction:column!important;
}


/* Freccia aperta */
.tt-overlay-nav
.tt-has-accordion.tt-submenu-open >
.tt-submenu-toggle span{
    transform:rotate(225deg);
}


    /* 27.6 Metadati overlay */
    .tt-overlay-meta{
        gap:2px!important;
        margin-top:18px!important;
        padding-top:14px!important;
        border-top:1px solid rgba(255,255,255,.13);
        color:rgba(255,255,255,.72);
        font-size:.78rem;
    }

    .tt-overlay-meta p{
        margin:0!important;
    }


    /* 27.7 Altre regolazioni mobile (tablet, smartphone) */
    .tt-hero{
        padding:32px 20px;
    }

    .tt-hero-columns{
        gap:30px;
    }

    .tt-card-row{
        flex-wrap:wrap;
    }

    .tt-card-row > .wp-block-column{
        flex-basis:calc(50% - 10px)!important;
    }

    .tt-card-media{
        height:165px;
    }

    .tt-company{
        padding:48px 20px;
    }

    .tt-single{
        padding:36px 20px 52px;
    }

    .tt-single-featured img{
        max-height:420px;
    }

    .tt-footer{
        padding:28px 20px 16px;
    }

    .tt-footer-cols{
        gap:30px;
    }

    .tt-footer-bottom{
        margin-top:22px;
        flex-direction:column;
        text-align:center;
        gap:4px;
    }


    /* 27.8 Smartphone (≤781px) */
    @media(max-width:781px){
        .tt-footer{
            padding:28px 20px 16px;
        }

        .tt-footer-cols{
            gap:28px;
        }

        .tt-footer-brand,
        .tt-footer-links,
        .tt-footer-social-column{
            flex-basis:100% !important;
        }

        .tt-footer-bottom{
            margin-top:22px;
        }
    }


    /* 27.9 Smartphone (≤700px) */
    @media(max-width:700px){
        .tt-utility-inner{
            padding:5px 16px;
        }

        .tt-header-inner,
        .editor-styles-wrapper .tt-header-inner{
            min-height:68px;
            padding:8px 16px;
        }

        .tt-brand,
        .editor-styles-wrapper .tt-brand{
            flex:0 0 155px;
            width:155px;
            min-width:155px;
        }

        .tt-site-logo img,
        .editor-styles-wrapper .tt-site-logo img{
            max-width:150px!important;
            max-height:48px!important;
        }

        .tt-hero{
            padding:28px 18px;
        }

        .tt-hero-columns{
            display:block;
        }

        .tt-hero-copy{
            margin-bottom:24px;
        }

        .tt-hero-copy h1{
            font-size:clamp(2rem,7.5vw,2.6rem);
            line-height:1.08;
        }

        .tt-showcase{
            min-height:0;
            padding:16px 16px;
        }

        .tt-media-slot{
            aspect-ratio:4 / 3;
        }

        .tt-slider-arrow{
            width:36px;
            height:36px;
            font-size:1.65rem;
        }

        .tt-live-content{
            width:100%;
            max-width:100%;
        }

        .tt-live-title{
            font-size:clamp(1.1rem,4.5vw,1.4rem);
        }

        .tt-live-image-link{
            aspect-ratio:4 / 3;
        }

        .tt-live-footer{
            margin-top:1px;
        }

        .tt-live-empty{
            min-height:150px;
        }

        .tt-catalog{
            padding:42px 18px 48px;
        }

        .tt-section-head{
            margin-bottom:26px;
        }

        .tt-section-head h2{
            font-size:clamp(1.65rem,7vw,2.1rem);
            line-height:1.1;
        }

        .tt-section-head p{
            font-size:.95rem;
        }

        .tt-card-row{
            display:block;
            margin-bottom:0;
        }

        .tt-card{
            margin-bottom:18px;
        }

        .tt-card-media{
            height:190px;
        }

        .tt-company{
            padding:42px 18px;
        }

        .tt-company h2{
            font-size:2rem;
        }

        .tt-cta{
            padding:28px 18px;
        }

        .tt-single{
            padding:32px 18px 48px;
        }

        .tt-single-header{
            margin-bottom:22px;
        }

        .tt-single-featured{
            margin-bottom:30px;
        }

        .tt-single-featured img{
            max-height:320px;
            border-radius:8px;
        }

        .tt-single-content{
            font-size:1rem;
            line-height:1.7;
        }

        .tt-single-content h2{
            font-size:1.5rem;
        }

        .tt-single-content h3{
            font-size:1.2rem;
        }

        .tt-nav-overlay{
            padding:16px!important;
        }

        .tt-overlay-logo img{
            max-width:180px!important;
            max-height:52px!important;
        }

        .tt-overlay-nav .wp-block-navigation-item__content{
            padding:8px 2px!important;
            font-size:.95rem!important;
        }
    }


    /* 27.10 Smartphone piccoli (≤480px) */
    @media(max-width:480px){
        .tt-brand,
        .editor-styles-wrapper .tt-brand{
            flex:0 0 140px;
            width:140px;
            min-width:140px;
        }

        .tt-site-logo img,
        .editor-styles-wrapper .tt-site-logo img{
            max-width:135px!important;
            max-height:42px!important;
        }

        .tt-hero{
            padding-left:16px;
            padding-right:16px;
        }

        .tt-catalog{
            padding-left:16px;
            padding-right:16px;
        }

        .tt-card-body{
            padding:20px;
        }

        .tt-live-title{
            font-size:.95rem;
        }

        .tt-live-footer a{
            font-size:.85rem;
        }

        .tt-footer{
            padding:24px 16px 14px;
        }

        .tt-footer-cols{
            gap:20px;
        }

        .tt-footer h4{
            font-size:.9rem;
        }

        .tt-footer-company,
        .tt-footer-links p,
        .tt-footer-legal{
            font-size:.85rem;
        }

        .tt-footer-bottom{
            font-size:.72rem;
        }

        .tt-footer-bottom p{
            font-size:.72rem;
        }
    }
}



/* ============================================================
   28. ACCESSIBILITA' / RIDUZIONE ANIMAZIONI
   ============================================================ */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .wp-block-button__link,
    .tt-card,
    .tt-card-media img,
    .tt-main-nav
    .wp-block-navigation-item__content,
    .tt-media-slot
    .wp-block-gallery.tt-slider-ready >
    .wp-block-image,
    .tt-slider-arrow,
    .tt-live-slide{
        transition:none!important;
    }

    .wp-block-button__link:hover,
    .tt-card:hover,
    .tt-main-nav
    .wp-block-navigation-item__content:hover{
        transform:none!important;
    }
}