/*
 * SuperStampaSprint — Header Mobile Fix 1.5
 * CSS limitato a <=767px per proteggere la versione PC.
 * Selettori verificati nell'header pubblico del tema sss-foundation.
 * Nessun JS, nessuna modifica a WooCommerce, prezzi, prodotti o checkout.
 */
@media only screen and (max-width: 767px) {

  .sss-header,
  .sss-header .sss-header-main,
  .sss-header .sss-container,
  .sss-header .sss-sector-wrap,
  .sss-header .sss-sector-wrap > .sss-container {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Riga 1: logo + account/carrello. Riga 2: campo ricerca. */
  .sss-header .sss-container.sss-header-main,
  .sss-header .sss-header-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: 'logo actions' 'search search' !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 9px 10px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 10px 14px 12px !important;
  }

  .sss-header .sss-logo {
    grid-area: logo !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    max-width: 122px !important;
    width: min(122px, 38vw) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sss-header .sss-logo img {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 64px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Supporto presente su desktop; su telefono lascia spazio alle azioni principali. */
  .sss-header .sss-header-info { display: none !important; }

  .sss-header .sss-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sss-header .sss-actions .sss-action {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 43px !important;
    width: 43px !important;
    min-width: 43px !important;
    height: 43px !important;
    min-height: 43px !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Solo i testi; il numerino del carrello rimane visibile. */
  .sss-header .sss-actions .sss-action > span:not(.sss-cart-badge) {
    display: none !important;
  }

  .sss-header .sss-actions .sss-action svg,
  .sss-header .sss-actions .sss-action .sss-action-svg {
    display: block !important;
    flex: 0 0 23px !important;
    width: 23px !important;
    height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
  }

  .sss-header .sss-actions .sss-cart-badge {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    top: 0 !important;
    right: 0 !important;
    min-width: 17px !important;
    width: auto !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .sss-header .sss-search {
    grid-area: search !important;
    display: block !important;
    justify-self: stretch !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sss-header .sss-search form {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 26px !important;
  }

  .sss-header .sss-search input[type='search'] {
    display: block !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    width: 1px !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .sss-header .sss-search button[type='submit'] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 0 26px 26px 0 !important;
    box-sizing: border-box !important;
  }

  /* Barra smartphone compatta: 8 categorie in 2 righe di 4.
     I nomi restano completi, ma non vengono spezzati a metà parola.
     Nuove categorie in futuro creano ulteriori righe senza scroll laterale.
  */
  .sss-header .sss-sector-wrap,
  .sss-header .sss-sector-wrap > .sss-container {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sss-header .sss-sector-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(52px, auto) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 5px 5px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 8px !important;
    white-space: normal !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .sss-header .sss-sector-nav > .sss-sector-item {
    position: relative !important;
    display: flex !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    scroll-snap-align: none !important;
  }

  .sss-header .sss-sector-nav > .sss-sector-item > a {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 1px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    text-align: center !important;
    font-size: clamp(9px, 2.58vw, 10.5px) !important;
    line-height: 1.21 !important;
    font-weight: 700 !important;
    color: #102e54 !important;
    text-decoration: none !important;
    background: #f5f8fc !important;
    border: 1px solid #e3eaf3 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease;
  }

  .sss-header .sss-sector-nav > .sss-sector-item > a:hover,
  .sss-header .sss-sector-nav > .sss-sector-item > a:focus-visible,
  .sss-header .sss-sector-nav > .sss-sector-item > a[aria-current="page"] {
    background: #e8f3ff !important;
    color: #0070cf !important;
    border-color: #a8d2fb !important;
  }

  /* Disattiva COMPLETAMENTE le tendine desktop nei riquadri mobili. */
  .sss-header .sss-sector-nav > .sss-sector-item > .sss-sector-mega,
  .sss-header .sss-sector-nav > .sss-sector-item:hover > .sss-sector-mega,
  .sss-header .sss-sector-nav > .sss-sector-item:focus-within > .sss-sector-mega {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .sss-header .sss-sector-nav > .sss-sector-item > a.sss-mobile-sector-active {
    background: #e8f3ff !important;
    border-color: #a8d2fb !important;
    color: #006ec6 !important;
  }

  /* Il nuovo sottomenu sta FUORI dalla griglia, nella normale pagina. */
  .sss-header .sss-mobile-sector-panel:not(.is-open) {
    display: none !important;
  }
  .sss-header .sss-mobile-sector-panel.is-open {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    transform: none !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-height: min(50vh, 360px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 8px 10px !important;
    padding: 8px 10px 12px !important;
    background: #fff !important;
    border: 1px solid #e0e8f3 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(18, 48, 90, 0.10) !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .sss-header .sss-mobile-sector-controls {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 0 5px !important;
  }
  .sss-header .sss-mobile-sector-close {
    border: 0 !important;
    background: transparent !important;
    color: #163b70 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
    cursor: pointer;
  }
  .sss-header .sss-mobile-sector-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 7px !important;
  }
  .sss-header .sss-mobile-sector-links > .sss-mobile-sector-subitem {
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    color: #183b65 !important;
    text-decoration: none !important;
    background: #f5f8fc !important;
    padding: 9px 10px !important;
    border-radius: 7px !important;
    border: 1px solid #eaf0f7 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: none !important;
  }
  .sss-header .sss-mobile-sector-footer {
    margin-top: 9px !important;
    padding-top: 8px !important;
    border-top: 1px solid #eaf0f7 !important;
    text-align: right !important;
  }
  .sss-header .sss-mobile-sector-all {
    display: inline-block !important;
    color: #0071ce !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }


}

@media only screen and (max-width: 350px) {
  .sss-header .sss-container.sss-header-main,
  .sss-header .sss-header-main { padding-left: 10px !important; padding-right: 10px !important; }
  .sss-header .sss-logo { max-width: 104px !important; }
  .sss-header .sss-actions { gap: 4px !important; }
}

@media only screen and (max-width: 350px) {
  .sss-header .sss-sector-nav {
    padding: 6px 4px !important;
    gap: 3px !important;
  }
  .sss-header .sss-sector-nav > .sss-sector-item > a {
    font-size: 9.2px !important;
    padding: 4px 1px !important;
  }
}

/* Versione 1.8 — Catalogo mobile: prodotti prima, navigazione e filtri dopo.
 * Cambia solo la disposizione VISIVA: non sposta né duplica i prodotti nel DOM.
 * Questo selettore e' circoscritto al template sss-ci-shop.
 * Desktop e Home non vengono modificati.
 */
@media only screen and (max-width: 767px) {
  main.sss-shop.sss-ci-shop > .sss-container > .sss-ci-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  main.sss-shop.sss-ci-shop > .sss-container > .sss-ci-layout > .sss-ci-main {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  main.sss-shop.sss-ci-shop > .sss-container > .sss-ci-layout > .sss-ci-sidebar {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}


/* v1.9: CORREZIONE per il NUOVO catalogo SSSCE effettivamente in uso.
 * Struttura verificata: div.sss-shop-layout.sssce-shop-layout
 *   > aside.sss-sidebar.sssce-shop-sidebar
 *   > section.sss-shop-main.sssce-shop-main
 * Visualizzazione SOLO mobile: galleria prima, sidebar dopo.
 * Nessuna modifica alla Home, al PC, ai dati WooCommerce o al carrello.
 */
@media screen and (max-width: 767px) {
  body main .sss-shop-layout.sssce-shop-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 14px !important;
  }
  body main .sss-shop-layout.sssce-shop-layout > .sss-shop-main.sssce-shop-main {
    order: -1 !important;
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
  }
  body main .sss-shop-layout.sssce-shop-layout > .sss-sidebar.sssce-shop-sidebar {
    order: 1 !important;
    display: block !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    top: auto !important;
  }
  body main .sss-shop-layout.sssce-shop-layout .sssce-server-explorer,
  body main .sss-shop-layout.sssce-shop-layout .sssce-server-grid {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* v2.0: after the real DOM reorder, avoid fixed/sticky sidebar on phones */
@media screen and (max-width:767px) {
  .sssce-shop-layout { display: flex !important; flex-direction: column !important; }
  .sssce-shop-layout > .sssce-shop-main,
  .sssce-shop-layout > .sssce-shop-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    float: none !important;
  }
  .sssce-shop-layout > .sssce-shop-main { order: 0 !important; }
  .sssce-shop-layout > .sssce-shop-sidebar { order: 1 !important; }
}


/* v2.1: actual Home structure (Home HERO is outside .sss-home-catalog).
   Only on phones; keep original desktop order and layout. */
@media only screen and (max-width: 767px) {
  main.sss-home .sss-home-catalog {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  main.sss-home .sss-home-catalog > .sss-home-products {
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  main.sss-home .sss-home-catalog > aside.sss-sidebar {
    order: 1 !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* v2.2 — Correzione del comando X nativo di Safari nei campi ricerca
 * dell'header mobile. Il pulsante blu con la lente rimane invariato.
 * Non tocca la ricerca del catalogo, il desktop o il carrello.
 */
@media screen and (max-width: 767px) {
  .sss-header .sss-search input[type="search"] {
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .sss-header .sss-search input[type="search"]::-webkit-search-cancel-button,
  .sss-header .sss-search input[type="search"]::-webkit-search-decoration,
  .sss-header .sss-search input[type="search"]::-webkit-search-results-button,
  .sss-header .sss-search input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }
}


/* v2.3 — Ricerca mobile: un unico pulsante blu diviso X | lente.
 * La X svuota il testo, la lente continua a inviare il modulo.
 * Nessuna modifica alla versione PC. */
.sss-header .sss-search .sss-search-clear {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .sss-header .sss-search form > button.sss-search-clear {
    display: flex !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #103579 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .sss-header .sss-search form > button.sss-search-clear:disabled {
    opacity: .62 !important;
    cursor: default !important;
  }
  .sss-header .sss-search form > button.sss-search-clear:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -3px !important;
  }
  .sss-header .sss-search form > button[type="submit"] {
    flex: 0 0 46px !important;
    border-radius: 0 26px 26px 0 !important;
    background: #103579 !important;
  }
}

/* v2.4: reset degli stili globali dei pulsanti che impilavano X e lente. */
@media screen and (max-width:767px) {
 .sss-header .sss-search form {
   display: flex !important;
   flex-direction: row !important;
   flex-wrap: nowrap !important;
   align-items: stretch !important;
   justify-content: flex-start !important;
   position: relative !important;
 }
 .sss-header .sss-search form > input[type="search"] {
   order: 0 !important;
   flex: 1 1 0% !important;
   min-width: 0 !important;
 }
 .sss-header .sss-search form > button.sss-search-clear,
 .sss-header .sss-search form > button[type="submit"] {
   position: relative !important;
   inset: auto !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
   transform: none !important;
   float: none !important;
   display: inline-flex !important;
   vertical-align: middle !important;
   align-self: stretch !important;
   box-sizing: border-box !important;
   min-height: 46px !important;
   max-height: 46px !important;
   margin: 0 !important;
 }
 .sss-header .sss-search form > button.sss-search-clear {
   order: 1 !important;
   flex: 0 0 36px !important;
   width: 36px !important;
   min-width: 36px !important;
   max-width: 36px !important;
   border-radius: 0 !important;
   border-right: 1px solid rgba(255,255,255,.65) !important;
 }
 .sss-header .sss-search form > button[type="submit"] {
   order: 2 !important;
   flex: 0 0 46px !important;
   width: 46px !important;
   min-width: 46px !important;
   max-width: 46px !important;
   border-radius: 0 26px 26px 0 !important;
 }
}
