/* Storto — ANTEPRIMA intestazione unica (solo pagina anteprima-home).
   Nasconde le tre intestazioni attuali e mostra .storto-hdr. Il sito live non e' toccato. */

/* via header del tema, barra Natale separata, navigazione interna del design */
body.storto-unified header.wp-block-template-part { display: none !important; }
body.storto-unified .storto-natale-bar { display: none !important; }
body.storto-unified .entry-content nav { display: none !important; }
/* anche il cappellino sul logo del tema non serve: l'header del tema e' nascosto */

/* Pulizia layer decorativo (prova): le lettere sono sfondo, mai sopra testi e pulsanti.
   Via il layer globale del plugin (lettere sparse su tutta la pagina) e tetto alle lettere del design. */
body.storto-unified .storto-falling-letters { display: none !important; }
body.storto-unified .falling-letter { opacity: .2 !important; }

/* intestazione unica */
.storto-hdr {
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: 'Archivo', system-ui, sans-serif;
  box-shadow: 0 1px 0 rgba(20,20,20,.08);
}
body.admin-bar .storto-hdr { top: 32px; }
@media (max-width: 782px) { body.admin-bar .storto-hdr { top: 46px; } }

.storto-hdr .sh-strip {
  background: #14532d;
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 14.5px;
  line-height: 1.4;
}
.storto-hdr .sh-strip a { color: #ffd97a; font-weight: 800; text-decoration: underline; }

.storto-hdr .sh-main {
  background: #f7f3ec;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 28px;
  flex-wrap: wrap;
}
.storto-hdr .sh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0a0a0a;
}
.storto-hdr .sh-brand img { height: 38px; width: auto; display: block; }
.storto-hdr .sh-brand span { font-size: 25px; font-weight: 800; letter-spacing: -.01em; }

.storto-hdr .sh-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-left: 8px;
}
.storto-hdr .sh-links a {
  color: #0a0a0a;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.storto-hdr .sh-links a:hover { color: #FF6B2B; }

.storto-hdr .sh-actions {
  margin-left: auto;
  display: flex;
  gap: 18px;
  align-items: center;
}
.storto-hdr .sh-actions a {
  color: #0a0a0a;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.storto-hdr .sh-cart {
  background: #0a0a0a;
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700 !important;
}

@media (max-width: 760px) {
  .storto-hdr .sh-main { gap: 14px; padding: 10px 16px; }
  .storto-hdr .sh-links { gap: 14px; order: 3; width: 100%; }
  .storto-hdr .sh-links a, .storto-hdr .sh-actions a { font-size: 15px; }
}

/* Blocca le animazioni a comparsa (Extendify) nelle anteprime: pagine ferme e subito visibili. */
body.storto-unified .ext-animate--on, body.storto-unified [class*="ext-animate"] {
  opacity: 1 !important; transform: none !important; animation: none !important;
}
body.storto-unified .entry-content [style*="opacity"] { opacity: 1 !important; }
body.storto-unified .entry-content * { transition: none !important; }

/* Il blocco "nessun risultato" del tema compare anche quando i prodotti ci sono: nascosto. */
.wp-block-query-no-results { display: none !important; }

/* Pelle negozio (in linea con le anteprime approvate): foto arrotondate, prezzi netti, pulsanti coerenti. */
.wc-block-components-product-image img,
.woocommerce ul.products li.product img { border-radius: 16px; }
.wc-block-components-product-price, .woocommerce .price { font-weight: 700; }
.woocommerce a.button, .woocommerce button.button,
.wc-block-components-product-button .wp-block-button__link {
  background: #0a0a0a !important; color: #fff !important; border-radius: 999px !important;
}
.woocommerce .single_add_to_cart_button {
  background: #FF6B2B !important; color: #fff !important; border-radius: 999px !important;
}
/* Galleria scheda: al massimo 4 miniature visibili (la Tazza ne aveva 24). */
.woocommerce .flex-control-thumbs li:nth-child(n+5) { display: none; }

/* Footer del tema nascosto: al suo posto il footer Storto (tranne in home, dove resta quello del design). */
body.storto-unified footer.wp-block-template-part { display: none !important; }

.storto-footer { background: #0a0a0a; color: #f7f3ec; font-family: 'Archivo', system-ui, sans-serif; margin-top: 70px; }
.storto-footer .sf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; max-width: 1240px; margin: 0 auto; padding: 52px 28px 34px; }
.storto-footer .sf-logo { display: flex; align-items: center; gap: 10px; }
.storto-footer .sf-logo img { height: 36px; width: auto; }
.storto-footer .sf-logo span { font-size: 24px; font-weight: 800; }
.storto-footer .sf-claim { font-size: 19px; font-weight: 700; color: #FF6B2B; margin: 14px 0 8px; }
.storto-footer p { font-size: 14.5px; line-height: 1.6; color: #cfc8ba; margin: 0; max-width: 300px; }
.storto-footer h4 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #8a8378; margin: 4px 0 14px; }
.storto-footer .sf-col a { display: block; color: #f7f3ec; text-decoration: none; font-size: 15.5px; margin-bottom: 10px; }
.storto-footer .sf-col a:hover { color: #FF6B2B; }
.storto-footer .sf-bottom { border-top: 1px solid #2c2c2c; padding: 18px 28px; text-align: center; font-size: 13.5px; color: #8a8378; }
@media (max-width: 860px) { .storto-footer .sf-grid { grid-template-columns: 1fr 1fr; } }

/* Schermatura: il documento del design usa selettori nudi (nav, footer, a) che si attaccavano
   all'intestazione e al footer nuovi. Reset espliciti. */
.storto-hdr .sh-links {
  position: static !important; inset: auto !important; transform: none !important;
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  justify-content: flex-start !important; padding: 0 !important; height: auto !important; width: auto !important;
  box-shadow: none !important; border: 0 !important;
}
.storto-hdr { overflow: visible !important; }
.storto-hdr .sh-main { overflow: visible !important; }
.storto-hdr .sh-cart { line-height: 1.25 !important; white-space: nowrap; }
.storto-hdr a { position: static !important; }
.storto-footer { position: static !important; transform: none !important; padding: 0 !important; width: auto !important; }

/* Correzioni mirate: pulsante acquisto scheda davvero arancione (la regola generica lo copriva)
   e galleria prodotto visibile subito (Woo la tiene a opacita 0 finche parte il suo script). */
.woocommerce button.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt { background: #FF6B2B !important; color: #fff !important; }
.woocommerce-product-gallery { opacity: 1 !important; }
.woocommerce .flex-control-thumbs li:nth-child(n+5) { display: none !important; }

/* ===== Audit §7/§8/§9: wordmark nel font, hamburger mobile, footer completo ===== */
@font-face { font-family:'StortoDisplay'; src:url('/wp-content/uploads/crea-tazza/Aquilone.woff2') format('woff2'); font-display:swap; }
html, body { overflow-x: clip; }
.storto-hdr .sh-strip { display: none !important; }
.sh-wordmark, .sf-wordmark { font-family:'StortoDisplay', cursive; font-size:34px; line-height:1; color:#0a0a0a; letter-spacing:.01em; }
.storto-hdr .sh-logo { text-decoration:none; display:inline-flex; align-items:center; }
.sh-o { color:#FF6B2B; }
.sh-burger { display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px 4px; cursor:pointer; }
.sh-burger span { display:block; width:24px; height:2px; background:#0a0a0a; border-radius:2px; }
.sh-links-account { display:none; }
.sf-wordmark { color:#fafaf8; font-size:38px; }
.sf-news { max-width:1180px; margin:0 auto; padding:38px 22px 8px; }
.sf-news-t { font-family:'StortoDisplay', cursive; font-size:32px; color:#fafaf8; }
.sf-news-s { color:#b9b9b9; margin:6px 0 14px; font-size:15.5px; }
.sf-news-f { display:flex; gap:10px; flex-wrap:wrap; }
.sf-news-f input { flex:1 1 260px; max-width:420px; padding:12px 16px; border-radius:999px; border:1px solid #333; background:#171717; color:#fafaf8; font-size:15px; }
.sf-news-f button { padding:12px 22px; border-radius:999px; border:0; background:#FF6B2B; color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
.sf-news-ok { color:#fafaf8; font-weight:600; }
.sf-news-err { color:#ff9c66; }
.sf-fond { color:#b9b9b9; font-size:13.5px; }
.sf-legal-links a { color:#b9b9b9; }
@media (max-width: 900px) {
  .sh-burger { display:flex; }
  .storto-hdr .sh-account { display:none; }
  .storto-hdr .sh-links { display:none; }
  .storto-hdr.open .sh-links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:16px; background:#fafaf8; padding:18px 22px 20px; border-bottom:1px solid #e7e2d6; box-shadow:0 18px 30px rgba(0,0,0,.12); z-index:1002; margin:0; }
  .sh-links-account { display:block; }
  .storto-hdr .sh-main { position:relative; flex-wrap:nowrap; }
  .sh-wordmark { font-size:29px; }
}

/* Logo ufficiale (disegno) in header e footer (2026-10-21) */
.sh-logo-img { height: 34px; width: auto; display: block; }
.sf-logo-img { height: 42px; width: auto; display: block; }

/* Misure logo blindate: non dipendono dalla cache (2026-10-21) */
.sh-logo-img { height: 34px !important; width: auto !important; max-height: 34px; }
.sf-logo-img { height: 42px !important; width: auto !important; max-height: 42px; }

/* Menu definitivo: voce attiva e tocchi comodi (2026-10-21) */
.storto-hdr .sh-links a { padding: 10px 2px; }
.storto-hdr .sh-links a.sh-active {
  color: #0a0a0a;
  box-shadow: inset 0 -3px 0 #FF6B2B;
}
@media (max-width: 1150px) {
  .sh-burger { display: flex; }
  .storto-hdr .sh-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fafaf8; padding: 8px 20px 16px;
    box-shadow: 0 18px 30px rgba(10, 10, 10, .12);
  }
  .storto-hdr.open .sh-links { display: flex; }
  .storto-hdr .sh-links a {
    padding: 14px 4px; min-height: 48px; display: flex; align-items: center;
    border-bottom: 1px solid rgba(10, 10, 10, .08); font-size: 16px;
  }
  .storto-hdr .sh-links a:last-child { border-bottom: 0; }
}

/* Bottoni importanti arancioni, foglio globale (2026-10-21) */
.wc-block-components-product-button__button,
.wp-block-button__link.wc-block-components-product-button__button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce .checkout-button,
.woocommerce ul.products li.product .button, .spx-add {
  background: #FF6B2B !important; color: #fafaf8 !important; border-color: #FF6B2B !important;
}

/* Carrello a blocchi: bottone pagamento arancione */
.wc-block-cart__submit-button, .wc-block-components-checkout-button,
a.wc-block-cart__submit-button, .wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block a {
  background: #FF6B2B !important; color: #fafaf8 !important; border-color: #FF6B2B !important;
}

/* Footer rifatto: contenitore, niente maiuscole imposte, riga legale vera (2026-10-21) */
.storto-footer { display: block !important; width: 100%; text-transform: none !important; }
.storto-footer p, .storto-footer a, .storto-footer span, .storto-footer h4 { text-transform: none !important; }
.storto-footer .sf-news { max-width: 1240px; margin: 0 auto; padding: 48px 28px 8px; }
.storto-footer .sf-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: 40px; max-width: 1240px; margin: 0 auto; padding: 40px 28px 40px;
}
.storto-footer .sf-col p { color: #d8d2c4; font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
.storto-footer .sf-col h4 { color: #8a8378; font-size: 12.5px; letter-spacing: .14em; margin: 4px 0 16px; font-weight: 700; }
.storto-footer .sf-col a { line-height: 1.35; }
.storto-footer .sf-legal {
  display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: 20px 28px 28px;
  border-top: 1px solid #2c2c2c; color: #8a8378; font-size: 13.5px; line-height: 1.5;
}
.storto-footer .sf-legal-links a { color: #b9b9b9; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .storto-footer .sf-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .storto-footer .sf-legal { flex-direction: column; align-items: flex-start; }
}

/* Solo il simbolo (o arancione) nel menu, richiesta Marco 2026-10-22 */
.sh-logo-simbolo { height: 32px !important; width: auto !important; display: block; }

/* ===== Menu mobile a tutta larghezza (2026-10-24, Claude Code tazza-email) =====
   Causa: la "Schermatura" sopra mette su .sh-links position:static, width:auto, padding:0,
   background:transparent con !important, che vincevano sulle regole mobile (900px e 1150px,
   senza !important). Il pannello restava dentro .sh-main (flex-wrap:nowrap) come colonna
   stretta accanto al logo, e trasparente. Qui il dropdown riprende il sopravvento sotto 1150px. */
@media (max-width: 1150px) {
  .storto-hdr .sh-main { position: relative !important; }
  .storto-hdr .sh-burger { display: flex !important; }
  .storto-hdr .sh-links { display: none !important; }
  .storto-hdr.open .sh-links {
    display: flex !important; position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: 100% !important; height: auto !important; margin: 0 !important;
    box-sizing: border-box !important;
    flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important;
    justify-content: flex-start !important; gap: 0 !important;
    padding: 0 0 8px !important;
    background: #fafaf8 !important;
    border-top: 1px solid rgba(10, 10, 10, .08) !important;
    border-bottom: 1px solid #e7e2d6 !important;
    box-shadow: 0 18px 30px rgba(10, 10, 10, .12) !important;
    z-index: 1002 !important;
    max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain;
  }
  .storto-hdr.open .sh-links a {
    display: flex !important; align-items: center; width: 100% !important; box-sizing: border-box;
    min-height: 52px; padding: 14px 22px !important; margin: 0 !important;
    border-bottom: 1px solid rgba(10, 10, 10, .08); font-size: 16px;
  }
  .storto-hdr.open .sh-links a:last-child { border-bottom: 0; }
  .storto-hdr.open .sh-links a.sh-active { box-shadow: inset 4px 0 0 #FF6B2B; }
}

/* ===== Footer: bottone Instagram + impilamento mobile (2026-10-24, Claude Code tazza-email) ===== */
.storto-footer .sf-col a.sf-ig {
  display: inline-flex !important; align-items: center; gap: 10px;
  margin: 16px 0 0; padding: 12px 20px; border-radius: 999px;
  background: #FF6B2B !important; color: #fff !important;
  font-weight: 700; font-size: 15.5px; line-height: 1.2; text-decoration: none !important;
}
.storto-footer .sf-col a.sf-ig:hover, .storto-footer .sf-col a.sf-ig:focus-visible { background: #e85a1f !important; color: #fff !important; }
.storto-footer .sf-col a.sf-ig svg { flex: none; display: block; }
@media (max-width: 860px) {
  .storto-footer .sf-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 32px 22px; }
  .storto-footer .sf-brand { grid-column: 1 / -1; }
  .storto-footer p { max-width: none; }
}
@media (max-width: 420px) {
  .storto-footer .sf-grid { grid-template-columns: 1fr; }
  .storto-footer .sf-legal { padding: 20px 22px 28px; }
}

/* ===== Foto "Hai una frase tua?" (pagina Chi siamo): intera, mai gigante (2026-10-24) =====
   Chi siamo usa il markup .storto-home ma non carica storto-home.css: l'immagine usciva a
   1920px e overflow-x:clip la tagliava in un primo piano da telefono. */
.storto-home .crea-band img {
  width: 280px; max-width: 100%; height: auto; aspect-ratio: auto;
  object-fit: contain; border-radius: 14px; display: block;
}
@media (max-width: 640px) {
  .storto-home .crea-band img { width: 100%; max-width: 320px; margin: 0 auto 8px; }
}