/* ZanzarPro — la testata unica del computer (14/11/2026).
   Angelo, dopo i consigli grafici: «Sì, sistemali». Prima il sito aveva tre testate diverse: la home (ricerca grande,
   menu su una seconda riga con il fondo quasi trasparente: scorrendo, i testi della pagina si leggevano dietro al menu),
   la collezione (tre voci) e le pagine dei modelli e delle informazioni (senza striscia dorata, con altri caratteri).
   Ora una sola: striscia dorata · logo · menu · cerca · area riservata · carrello, identica su tutte.

   Come è fatta. Ogni testata ha id="zt-testata" e dentro gli stessi pezzi con le stesse classi (zt-striscia, zt-logo,
   zt-menu, zt-azioni); le classi di prima restano accanto, perché le usa il telefono. Questo foglio vale SOLO dal
   computer in su (761 px): sul telefono la testata la disegna css/zp-mobile.css e resta com'era. Si carica dopo i fogli
   della pagina e prima di zp-mobile.css. L'id serve a vincere i vecchi fogli (amazon-theme, zp-luxury-signature,
   brand-motion, customer-pages), che fissano altezze e colori con !important.

   Il fondo è pieno, non in trasparenza: ciò che scorre sotto non si vede più dietro al menu. */

:root {
  --zt-fondo: #080807;
  --zt-oro: #d8bd83;
  --zt-oro-chiaro: #f0d79e;
  --zt-avorio: #f3eee4;
  --zt-tenue: #b7b0a3;
  --zt-linea: rgba(216, 189, 131, .24);
  --zt-linea-tenue: rgba(243, 238, 228, .09);
  --zt-striscia: 34px;
  --zt-riga: 88px;
  --zt-bordo: max(28px, calc((100vw - 1480px) / 2 + 34px));
  --zt-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --zt-titoli: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* «Offerte» spento da Admin → Homepage sparisce dal menu su tutte le pagine: sul computer lo toglie js/zp-testata.js,
   nel menu del telefono (costruito da js/zp-mobile.js) questa regola. */
html.zt-senza-offerte body .zpm-menu-nav a[href$="offerte.html"] { display: none !important; }

/* Sul telefono i pezzi aggiunti per il computer nelle pagine dei modelli e delle informazioni non si vedono: lì la
   testata resta menu · logo · carrello. */
@media (max-width: 760px) {
  html body.customer-page #zt-testata > .zt-striscia,
  html body.customer-page #zt-testata > .zt-azioni { display: none !important; }
}

@media (min-width: 761px) {

  /* ---------- Il contenitore: resta in alto mentre si scorre ---------- */
  html body #zt-testata {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-rows: var(--zt-striscia) var(--zt-riga) !important;
    grid-template-areas: "striscia striscia striscia" "logo menu azioni" !important;
    align-items: center !important;
    gap: 0 clamp(16px, 2vw, 40px) !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--zt-linea) !important;
    border-radius: 0 !important;
    background: var(--zt-fondo) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--zt-avorio) !important;
    font-family: var(--zt-sans) !important;
    line-height: 1.2 !important;
    /* Stessa resa delle scritte su tutte le pagine (home e collezione la chiedevano già, le altre no). */
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    transform: none !important;
  }
  html body #zt-testata::before, html body #zt-testata::after,
  html body #zt-testata > .zt-riga::before, html body #zt-testata > .zt-riga::after { content: none !important; display: none !important; }
  /* La riga della home e della collezione è un contenitore in più: i suoi pezzi si dispongono come figli della testata. */
  html body #zt-testata > .zt-riga { display: contents !important; }

  /* ---------- Striscia dorata ---------- */
  html body #zt-testata > .zt-striscia {
    grid-area: striscia !important;
    align-self: stretch !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: var(--zt-striscia) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(7, 7, 6, .22) !important;
    background: linear-gradient(90deg, #a8844c 0%, #e3cc98 48%, #a8844c 100%) !important;
    text-align: center !important;
  }
  /* Il riflesso che ogni tanto attraversa la striscia: c'era su home e collezione, ora è lo stesso su tutte le pagine. */
  html body #zt-testata > .zt-striscia::before { content: none !important; display: none !important; }
  html body #zt-testata > .zt-striscia::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .24) 46%, transparent 62%) !important;
    opacity: 1 !important;
    /* Senza !important: chi spegne le animazioni (preferenze del computer, «Testi e animazioni» dell'admin) lo ferma. */
    transform: translateX(-110%);
    animation: zt-riflesso 11s ease-in-out infinite;
  }
  html body #zt-testata .zt-striscia-voci {
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    animation: none !important;
    transform: none !important;
    color: #14130f !important;
    font: 700 11px/1 var(--zt-sans) !important;
    letter-spacing: .17em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  html body #zt-testata .zt-striscia-voci > * {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html body #zt-testata .zt-striscia-voci > *::after { content: none !important; }
  /* Il puntino fra un messaggio e l'altro è disegnato (non un carattere): uguale su tutte le pagine. */
  html body #zt-testata .zt-striscia-voci > *::before {
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 3px !important;
    height: 3px !important;
    margin: 0 clamp(12px, 1.9vw, 28px) 1px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    opacity: .6 !important;
  }
  html body #zt-testata .zt-striscia-voci > *:first-child::before { content: none !important; display: none !important; }

  /* ---------- Logo ---------- */
  html body #zt-testata .zt-logo {
    grid-area: logo !important;
    justify-self: start !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--zt-riga) !important;
    margin: 0 0 0 var(--zt-bordo) !important;
    padding: 0 !important;
    overflow: visible !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }
  html body #zt-testata .zt-logo::before, html body #zt-testata .zt-logo::after { content: none !important; display: none !important; }
  html body #zt-testata .zt-logo img {
    display: block !important;
    width: 100px !important;
    height: 76px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
  }
  html body #zt-testata .zt-logo .logo-text { display: none !important; }

  /* ---------- Menu ---------- */
  html body #zt-testata .zt-menu {
    grid-area: menu !important;
    justify-self: center !important;
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 2.3vw, 42px) !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  html body #zt-testata .zt-menu::before, html body #zt-testata .zt-menu::after { content: none !important; display: none !important; }
  html body #zt-testata .zt-menu .nav-links { display: contents !important; }
  /* «display» senza !important: la home spegne «Offerte» con uno stile in linea (display:none) quando Angelo lo
     nasconde da Admin → Homepage, e deve poter vincere. */
  html body #zt-testata .zt-menu a[hidden] { display: none !important; }
  html body #zt-testata .zt-menu a {
    position: relative !important;
    display: inline-flex;
    align-items: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--zt-tenue) !important;
    font: 600 clamp(11px, .8vw, 12px)/1 var(--zt-sans) !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
    transition: color .2s ease !important;
  }
  html body #zt-testata .zt-menu a::before { content: none !important; display: none !important; }
  html body #zt-testata .zt-menu a::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 7px 0 !important;
    display: block !important;
    width: auto !important;
    height: 1px !important;
    background: var(--zt-oro) !important;
    opacity: 1 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .25s ease !important;
  }
  html body #zt-testata .zt-menu a.zt-offerte { color: var(--zt-oro) !important; }
  /* aria-current: «page» sulla voce che è la pagina aperta, «true» sulla voce a cui la pagina appartiene (un modello
     sta nella collezione). */
  html body #zt-testata .zt-menu a:hover,
  html body #zt-testata .zt-menu a:focus-visible,
  html body #zt-testata .zt-menu a[aria-current] { color: var(--zt-avorio) !important; text-decoration: none !important; }
  html body #zt-testata .zt-menu a.zt-offerte:hover,
  html body #zt-testata .zt-menu a.zt-offerte:focus-visible,
  html body #zt-testata .zt-menu a.zt-offerte[aria-current] { color: var(--zt-oro-chiaro) !important; }
  html body #zt-testata .zt-menu a:hover::after,
  html body #zt-testata .zt-menu a:focus-visible::after,
  html body #zt-testata .zt-menu a[aria-current]::after { transform: scaleX(1) !important; }

  /* ---------- A destra: cerca, area riservata, carrello ---------- */
  html body #zt-testata .zt-azioni {
    grid-area: azioni !important;
    justify-self: end !important;
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    margin: 0 var(--zt-bordo) 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  html body #zt-testata .zt-icona {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--zt-tenue) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transform: none !important;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease !important;
  }
  html body #zt-testata .zt-icona::before, html body #zt-testata .zt-icona::after { content: none !important; display: none !important; }
  html body #zt-testata .zt-icona svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  /* Il nome dell'icona resta per chi usa un lettore di schermo, non si vede. */
  html body #zt-testata .zt-icona span {
    position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  html body #zt-testata .zt-icona:hover,
  html body #zt-testata .zt-icona:focus-visible,
  html body #zt-testata .zt-icona[aria-expanded="true"] { border-color: var(--zt-linea) !important; background: rgba(216, 189, 131, .08) !important; color: var(--zt-oro) !important; }

  html body #zt-testata .zt-carrello {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 42px !important;
    min-height: 0 !important;
    margin: 0 0 0 8px !important;
    padding: 0 13px 0 18px !important;
    border: 1px solid var(--zt-linea) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--zt-avorio) !important;
    font: 700 11px/1 var(--zt-sans) !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease !important;
  }
  html body #zt-testata .zt-carrello::before, html body #zt-testata .zt-carrello::after { content: none !important; display: none !important; }
  html body #zt-testata .zt-carrello svg { display: none !important; }
  html body #zt-testata .zt-carrello > span:not(.zt-conta) {
    position: static !important; display: inline !important; margin: 0 !important; padding: 0 !important;
    color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important;
  }
  html body #zt-testata .zt-carrello .zt-conta {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    order: 2 !important;
    width: auto !important;
    min-width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border: 1px solid var(--zt-linea) !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--zt-oro) !important;
    font: 700 11px/1 var(--zt-sans) !important;
    letter-spacing: 0 !important;
    transform: none !important;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease !important;
  }
  html body #zt-testata .zt-carrello:hover,
  html body #zt-testata .zt-carrello:focus-visible { border-color: var(--zt-oro) !important; background: var(--zt-oro) !important; color: #070706 !important; text-decoration: none !important; }
  html body #zt-testata .zt-carrello:hover .zt-conta,
  html body #zt-testata .zt-carrello:focus-visible .zt-conta { border-color: #070706 !important; background: #070706 !important; color: var(--zt-oro) !important; }

  html body #zt-testata a:focus-visible, html body #zt-testata button:focus-visible { outline: 2px solid var(--zt-oro) !important; outline-offset: 3px !important; }

  /* ---------- Ricerca della home: si apre sotto la testata con la lente, come sul telefono ---------- */
  html body #zt-testata .search-bar { display: none !important; }
  html body.zt-cerca-aperta #zt-testata .search-bar {
    position: absolute !important;
    z-index: 2 !important;
    inset: 100% 0 auto 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px max(28px, calc((100vw - 760px) / 2)) 18px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid var(--zt-linea-tenue) !important;
    border-bottom: 1px solid var(--zt-linea) !important;
    border-radius: 0 !important;
    background: var(--zt-fondo) !important;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .42) !important;
  }
  html body #zt-testata .search-bar .search-category { display: none !important; }
  html body #zt-testata .search-bar #searchInput {
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--zt-linea) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: #11110f !important;
    box-shadow: none !important;
    color: var(--zt-avorio) !important;
    font: 400 16px/1.2 var(--zt-sans) !important;
    letter-spacing: 0 !important;
    outline: 0 !important;
  }
  html body #zt-testata .search-bar #searchInput::placeholder { color: #8d877c !important; opacity: 1 !important; }
  html body #zt-testata .search-bar #searchInput:focus { border-color: var(--zt-oro) !important; }
  html body #zt-testata .search-bar #searchButton {
    flex: 0 0 56px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 56px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--zt-oro) !important;
    border-radius: 0 !important;
    background: var(--zt-oro) !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html body #zt-testata .search-bar #searchButton svg { width: 20px !important; height: 20px !important; fill: #14130f !important; }
  html body #zt-testata .search-bar #searchDropdown {
    inset: calc(100% - 18px) max(28px, calc((100vw - 760px) / 2)) auto !important;
    border: 1px solid var(--zt-linea) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: #11110f !important;
    box-shadow: 0 22px 40px rgba(0, 0, 0, .5) !important;
    font-family: var(--zt-sans) !important;
  }

  /* Il carrello a scomparsa di home e collezione sta fuori schermo a destra, ma la sua ombra rientrava nella pagina:
     scuriva l'angolo destro della striscia dorata solo su quelle due pagine. Da chiuso non ha ombra. */
  html body .zp-cart-panel:not(.open) { box-shadow: none !important; }

  /* ---------- Le pagine dei modelli e delle informazioni ---------- */
  /* Con la testata che resta in alto, un'ancora (#chi-siamo, #pagamenti…) non deve finirci sotto. */
  html body.customer-page [id] { scroll-margin-top: calc(var(--zt-striscia) + var(--zt-riga) + 22px); }
}

/* Schermi stretti (tablet, finestre piccole): logo e pulsanti sopra, menu su una riga sua. */
@media (min-width: 761px) and (max-width: 1239px) {
  html body #zt-testata {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: var(--zt-striscia) 72px 46px !important;
    grid-template-areas: "striscia striscia" "logo azioni" "menu menu" !important;
  }
  html body #zt-testata .zt-logo { height: 72px !important; }
  html body #zt-testata .zt-logo img { width: 86px !important; height: 64px !important; }
  html body #zt-testata .zt-menu {
    justify-self: stretch !important;
    align-self: stretch !important;
    gap: clamp(14px, 3vw, 40px) !important;
    padding: 0 20px !important;
    border-top: 1px solid var(--zt-linea-tenue) !important;
  }
  html body #zt-testata .zt-menu a::after { bottom: 9px !important; }
  html body.customer-page [id] { scroll-margin-top: calc(var(--zt-striscia) + 72px + 46px + 22px); }
}
@media (min-width: 761px) and (max-width: 1060px) {
  /* La striscia tiene i messaggi che ci stanno interi: mai una frase tagliata. */
  html body #zt-testata .zt-striscia-voci > *:nth-child(n+4) { display: none !important; }
}
@media (min-width: 761px) and (max-width: 860px) {
  html body #zt-testata .zt-striscia-voci > *:nth-child(n+3) { display: none !important; }
  html body #zt-testata .zt-menu a { font-size: 10.5px !important; letter-spacing: .1em !important; }
}

@keyframes zt-riflesso {
  0%, 55% { transform: translateX(-110%); }
  76%, 100% { transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
  html body #zt-testata > .zt-striscia::after { animation: none !important; }
  html body #zt-testata .zt-menu a, html body #zt-testata .zt-menu a::after,
  html body #zt-testata .zt-icona, html body #zt-testata .zt-carrello, html body #zt-testata .zt-carrello .zt-conta { transition: none !important; }
}

@media print {
  html body #zt-testata { position: static !important; box-shadow: none !important; }
  html body #zt-testata .zt-menu, html body #zt-testata .zt-azioni, html body #zt-testata .zt-striscia { display: none !important; }
}