/*
Theme Name: Open Electronics — Verge
Theme URI: https://www.open-electronics.org/
Description: Variante editoriale del tema di Open Electronics, con l'impaginazione
             del giornale rifatta sul linguaggio della Verge: filetti invece di
             schede, titoli in condensato pesante, sommari in serif, e la colonna
             "Latest" a destra. Il NEGOZIO e' identico al tema gemello
             "Open Electronics": cambia solo la parte editoriale. Si attiva a
             turno col gemello per confrontarli.
Author: Futura Group
Template: kadence
Version: 0.1.0
Text Domain: openelectronics
*/

/* ============================================================
   1. FONDAMENTA
   ============================================================ */
:root{
  /* Verde del marchio. #1E9C43 e' quello del sito vivo; #15803D e' la
     versione che regge il testo bianco sopra (5,03:1 invece di 3,62:1). */
  --oe-verde:#15803D;
  --oe-verde-chiaro:#1E9C43;
  --oe-verde-scuro:#0B4A24;
  --oe-verde-petrolio:#0E5F55;
  --oe-verde-velo:#E7F3EB;

  /* Secondo colore: usato SOLO per novita' e promozioni, mai per l'acquisto. */
  --oe-accento:#C2410C;

  --oe-inchiostro:#0F1713;
  --oe-grigio:#4B5563;
  --oe-grigio-tenue:#6B7280;
  --oe-bordo:#E1E9E4;
  --oe-fondo:#F6F9F7;

  --oe-r:12px;
  --oe-ombra:0 1px 2px rgba(15,23,19,.05), 0 10px 26px rgba(15,23,19,.06);
  --oe-ombra-alta:0 2px 6px rgba(15,23,19,.07), 0 18px 44px rgba(21,128,61,.16);

  --oe-font:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --oe-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

body{ font-family:var(--oe-font); color:var(--oe-grigio); background:var(--oe-fondo); }
h1,h2,h3,h4,h5,h6{ font-family:var(--oe-font); color:var(--oe-inchiostro); letter-spacing:-.022em; }
.custom-logo{ max-height:40px; width:auto; }
.wp-custom-logo .site-title-wrap{ display:none; }
::selection{ background:var(--oe-verde); color:#fff; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--oe-verde); outline-offset:2px; }

.oe-contenitore{ max-width:1290px; margin-inline:auto; padding-inline:1.25rem; }

/* ============================================================
   2. BARRA SUPERIORE — la riga che manca oggi rispetto al vivo
   ============================================================ */
.oe-barra{ background:var(--oe-inchiostro); color:#9FB3A8; font-size:.8rem; }
.oe-barra .oe-contenitore{ display:flex; align-items:center; justify-content:space-between;
  min-height:38px; gap:1rem; }
.oe-barra time{ font-family:var(--oe-mono); letter-spacing:.02em; }
.oe-barra nav{ display:flex; gap:.9rem; }
.oe-barra a{ color:#9FB3A8; text-decoration:none; display:inline-flex; }
.oe-barra a:hover{ color:var(--oe-verde-chiaro); }

/* I social: marchi come SVG in linea, non parole. Il colore lo ereditano
   dal testo, quindi la stessa lista funziona sulla barra scura in alto e
   nel fondo pagina senza una seconda serie di regole. */
.oe-social{ display:flex; align-items:center; gap:.85rem; }
.oe-social a{ display:inline-flex; color:inherit; }
.oe-social svg{ width:16px; height:16px; fill:currentColor; display:block;
  transition:transform .18s ease; }
.oe-social a:hover svg{ transform:translateY(-2px); }
/* ⚠️ Su telefono l'icona da 16 px e' un bersaglio da 16 px: troppo poco
   per un dito. Il disegno resta uguale, cresce solo l'area toccabile. */
@media (max-width:860px){
  .oe-social{ gap:.35rem; }
  .oe-social a{ padding:.55rem .45rem; }
}

/* ============================================================
   3. IL SISTEMA DI SCHEDE — uno solo, per articoli E prodotti.
      E' il pezzo che impedisce a blog e negozio di sembrare
      due siti diversi: cambiano solo le ultime due righe.
   ============================================================ */
.oe-griglia{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.oe-griglia--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.oe-griglia--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1024px){ .oe-griglia--4,.oe-griglia--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .oe-griglia--4,.oe-griglia--3{ grid-template-columns:1fr; } }

/* Il wrapper degli scaffali di ricerca (oe-negozio/inc/ricerca-scaffali.php)
   porta solo la classe post-<id>, per farsi trovare da chi misura la
   ricerca. `display:contents` lo toglie dal calcolo del layout: la griglia
   vede l'<article> di oe_scheda() come se il wrapper non ci fosse, quindi
   niente cambia nella resa rispetto a uno scaffale scritto senza wrapper. */
.oe-scaffale__voce{ display:contents; }

/* La voce prodotto nell'elenco di Kadence (template-parts/content/
   entry-product.php). Qui il <li> e' la cella della griglia, che Kadence
   fa `display:flex; flex-direction:column` e in cui `article.entry` prende
   flex:1: la scheda prende lo stesso, cosi' le celle restano pari. */
.oe-voce-prodotto > .oe-scheda{ flex:1; }

.oe-scheda{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--oe-bordo); border-radius:var(--oe-r); overflow:hidden;
  box-shadow:var(--oe-ombra);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.oe-scheda:hover{ transform:translateY(-3px); box-shadow:var(--oe-ombra-alta); border-color:#C6E0D0; }

.oe-scheda__foto{ display:block; position:relative; overflow:hidden; background:#fff; }
.oe-scheda__foto img{ width:100%; display:block; transition:transform .35s ease; }
.oe-scheda:hover .oe-scheda__foto img{ transform:scale(1.04); }
/* Articoli: taglio 16:9. Prodotti: quadrato CONTENUTO, perche' ritagliare
   una scheda tecnica e' peggio che lasciare margine. */
.oe-scheda--articolo .oe-scheda__foto img{ aspect-ratio:16/9; object-fit:cover; }
.oe-scheda--prodotto .oe-scheda__foto img{ aspect-ratio:1/1; object-fit:contain; padding:.75rem; }

.oe-scheda__corpo{ display:flex; flex-direction:column; gap:.55rem; padding:1rem 1.05rem 1.15rem; flex:1; }
.oe-scheda__titolo{ font-size:1.02rem; line-height:1.34; margin:0; font-weight:650; }
.oe-scheda__titolo a{ color:var(--oe-inchiostro); text-decoration:none; }
.oe-scheda__titolo a:hover{ color:var(--oe-verde); }
.oe-scheda__estratto{ font-size:.88rem; line-height:1.55; color:var(--oe-grigio); margin:0; }
.oe-scheda__meta{ font-family:var(--oe-mono); font-size:.72rem; color:var(--oe-grigio-tenue);
  letter-spacing:.01em; margin-top:auto; }
.oe-scheda__prezzo{ font-size:1.25rem; font-weight:800; color:var(--oe-inchiostro); margin-top:auto; }
.oe-scheda__prezzo del{ font-size:.9rem; font-weight:500; color:var(--oe-grigio-tenue); margin-right:.35em; }

/* Pastiglia di categoria: uguale per articoli e prodotti */
.oe-etichette{ display:flex; flex-wrap:wrap; gap:.35rem; }
.oe-etichetta{ background:var(--oe-verde); color:#fff; border-radius:999px;
  padding:.2em .68em; font-size:.65rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; line-height:1.7; }
.oe-etichetta:hover{ background:var(--oe-verde-scuro); color:#fff; }
.oe-etichetta--novita{ background:var(--oe-accento); }

/* Bottone: verde del marchio, come deciso.
   ⚠️ Dentro una fascia verde si invertirebbe fino a sparire: vedi .oe-fascia .oe-bottone */
.oe-bottone{ display:block; width:100%; text-align:center; background:var(--oe-verde);
  color:#fff; border:0; border-radius:8px; padding:.62rem 1rem; font-weight:650;
  font-size:.92rem; text-decoration:none; cursor:pointer;
  transition:background .18s ease, transform .12s ease; }
.oe-bottone:hover{ background:var(--oe-verde-scuro); color:#fff; transform:translateY(-1px); }
/* ⚠️ Nei risultati di ricerca (e ovunque la scheda stia dentro un li.product)
   Kadence dice `.woocommerce li.product a { color:inherit }` (0,2,1), che batte
   `.oe-bottone` (0,1,0): il testo del pulsante ereditava il grigio del corpo e
   usciva grigio su verde, 2,4:1. Visto da Boris il 4/9 su ?s=raspberry+pi.
   Qui il bianco vince in tutti gli stati, con una specificita' che regge. */
.woocommerce li.product a.oe-bottone,
.woocommerce li.product a.oe-bottone:hover,
.woocommerce li.product a.oe-bottone:focus{ color:#fff; }
.oe-bottone--fantasma{ background:transparent; color:var(--oe-verde);
  border:1.5px solid var(--oe-verde); }
.oe-bottone--fantasma:hover{ background:var(--oe-verde); color:#fff; }

/* ============================================================
   4. APERTURA — l'articolo grande, alla Verge ma con la nostra scheda
   ============================================================ */
.oe-apertura{ display:grid; gap:1.5rem; grid-template-columns:2fr 1fr; margin:2rem 0 2.5rem; }
@media (max-width:1024px){ .oe-apertura{ grid-template-columns:1fr; } }

/* ⚠️ ALLINEAMENTO. La griglia rende le due COLONNE alte uguali, ma non le
   schede dentro: la scheda grande finiva piu' in alto e la colonna di
   destra sbordava sotto. Serve la catena completa — colonna in flex,
   schede con flex:1 — altrimenti le schede restano alte quanto il loro
   contenuto e i fondi non tornano. */
.oe-apertura__principale{ display:flex; }
.oe-apertura__principale > .oe-scheda{ flex:1; }
/* Lo spazio in piu' lo prende la FOTO, non il testo: allungare il blocco
   di testo lasciava un buco bianco fra l'occhiello e la data. */
.oe-apertura__principale .oe-scheda__corpo{ flex:0 0 auto; }
.oe-apertura__principale .oe-scheda__foto{ flex:1; min-height:0; }
.oe-apertura__principale .oe-scheda__foto img{ height:100%; aspect-ratio:auto; object-fit:cover; }
.oe-apertura__lato{ display:flex; flex-direction:column; gap:1.25rem; }
.oe-apertura__lato > .oe-scheda{ flex:1; }

.oe-apertura__principale .oe-scheda__foto img{ aspect-ratio:16/8; }
.oe-apertura__principale .oe-scheda__titolo{ font-size:2.1rem; line-height:1.12; font-weight:800; }
.oe-apertura__principale .oe-scheda__estratto{ font-size:1rem; }
.oe-apertura__lato .oe-scheda__titolo{ font-size:1rem; }
@media (max-width:600px){ .oe-apertura__principale .oe-scheda__titolo{ font-size:1.5rem; } }

/* ============================================================
   5. FASCE DI CATEGORIA — il tessuto connettivo.
      La stessa fascia ospita PRODOTTI o ARTICOLI: e' la ragione
      per cui blog e negozio non sembrano due siti.
   ============================================================ */
.oe-fascia{ border-radius:16px; overflow:hidden; margin:2.5rem 0;
  display:grid; grid-template-columns:300px 1fr; align-items:stretch; }
@media (max-width:1024px){ .oe-fascia{ grid-template-columns:1fr; } }

.oe-fascia__testa{ position:relative; padding:2rem 1.6rem; color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:.7rem; min-height:230px; }
.oe-fascia__testa h2{ color:#fff; font-size:1.6rem; line-height:1.15; margin:0; font-weight:800; }
.oe-fascia__testa p{ color:rgba(255,255,255,.86); font-size:.9rem; margin:0; line-height:1.5; }
/* La foto sborda dietro al testo, come nel riferimento */
.oe-fascia__sfondo{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%;
  opacity:.26; mix-blend-mode:luminosity; }
.oe-fascia__testa > *{ position:relative; z-index:1; }

.oe-fascia__contenuto{ background:rgba(255,255,255,.55); padding:1.4rem; }
.oe-fascia .oe-griglia{ gap:1.1rem; }

/* ⚠️ Il bottone verde dentro una fascia verde sparisce: qui si inverte.
   L'azione piu' importante del sito non puo' essere la meno visibile. */
.oe-fascia .oe-bottone{ background:#fff; color:var(--oe-verde-scuro); }
.oe-fascia .oe-bottone:hover{ background:var(--oe-inchiostro); color:#fff; }
.oe-fascia .oe-etichetta{ background:var(--oe-inchiostro); }

.oe-fascia--verde .oe-fascia__testa{ background:var(--oe-verde); }
.oe-fascia--verde-scuro .oe-fascia__testa{ background:var(--oe-verde-scuro); }
.oe-fascia--petrolio .oe-fascia__testa{ background:var(--oe-verde-petrolio); }
.oe-fascia--accento .oe-fascia__testa{ background:var(--oe-accento); }
.oe-fascia--verde{ background:var(--oe-verde); }
.oe-fascia--verde-scuro{ background:var(--oe-verde-scuro); }
.oe-fascia--petrolio{ background:var(--oe-verde-petrolio); }
.oe-fascia--accento{ background:var(--oe-accento); }
.oe-fascia--accento .oe-bottone{ color:var(--oe-accento); }

/* ============================================================
   6. BANNER
   ============================================================ */
.oe-banner{ margin:2.25rem 0; text-align:center; }
.oe-banner img{ max-width:100%; height:auto; border-radius:8px; }
.oe-banner--segnaposto{ border:1px dashed var(--oe-bordo); border-radius:8px;
  padding:1.5rem; background:#fff; color:var(--oe-grigio-tenue);
  font-family:var(--oe-mono); font-size:.78rem; }

/* ============================================================
   7. TITOLI DI SEZIONE
   ============================================================ */
.oe-sezione{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin:2.5rem 0 1.1rem; padding-bottom:.6rem;
  border-bottom:2px solid var(--oe-inchiostro); }
.oe-sezione h2{ font-size:1.5rem; margin:0; font-weight:800; }
.oe-sezione a{ color:var(--oe-verde); font-weight:650; font-size:.9rem; text-decoration:none;
  white-space:nowrap; }
.oe-sezione a:hover{ color:var(--oe-verde-scuro); }

/* ============================================================
   6bis. LA RICERCA
   Prima non c'era da nessuna parte, ne' sul blog ne' sullo shop.
   Sta nella barra in alto perche' e' l'unico punto presente su
   ogni pagina, e in grande nella testata del negozio.
   ============================================================ */
.oe-cerca{ display:flex; align-items:center; }
/* Campo e lente sono un blocco solo: cosi' la lente resta agganciata al
   campo anche quando accanto compare il menu delle categorie. */
.oe-cerca__campo{ position:relative; display:flex; flex:1 1 auto; min-width:0; }
.oe-cerca input[type="search"]{
  font-family:var(--oe-font); border:1px solid var(--oe-bordo);
  background:#fff; color:var(--oe-inchiostro);
  border-radius:999px; padding:.42rem 2.4rem .42rem .95rem; width:100%;
  font-size:.85rem; line-height:1.4; }
.oe-cerca input[type="search"]::placeholder{ color:var(--oe-grigio-tenue); }
.oe-cerca input[type="search"]:focus{ outline:2px solid var(--oe-verde); outline-offset:1px; }
.oe-cerca button{ position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:.3rem; cursor:pointer; display:flex;
  color:var(--oe-grigio-tenue); }
.oe-cerca button:hover{ color:var(--oe-verde); }
.oe-cerca svg{ width:18px; height:18px; fill:currentColor; }

/* Nella barra scura: piccola, e si allarga quando ci si scrive dentro. */
.oe-cerca--barra{ margin-left:auto; margin-right:1.2rem; width:210px;
  transition:width .22s ease; }
.oe-cerca--barra:focus-within{ width:300px; }
.oe-cerca--barra input[type="search"]{ background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16); color:#fff; font-size:.78rem;
  padding-block:.32rem; }
.oe-cerca--barra input[type="search"]::placeholder{ color:#7E9488; }
.oe-cerca--barra button{ color:#9FB3A8; }
.oe-cerca--barra button:hover{ color:var(--oe-verde-chiaro); }
@media (max-width:860px){ .oe-cerca--barra{ display:none; } }

/* Nella testata del negozio: e' il gesto principale della pagina. */
.oe-cerca--grande{ width:min(100%,560px); }
.oe-cerca--grande input[type="search"]{ padding:.85rem 3rem .85rem 1.3rem;
  font-size:1rem; border:0; box-shadow:0 8px 26px rgba(11,74,36,.22); }
.oe-cerca--grande button{ right:.6rem; color:var(--oe-verde-scuro); }
.oe-cerca--grande svg{ width:22px; height:22px; }

/* "Cerca dentro": tutto il negozio, o una categoria.
   ⚠️ Prima era un <select> nudo con scritto "All the shop": non si capiva
   che fosse la scelta della CATEGORIA. Ora ha la paroletta "in" davanti e
   la freccetta, cosi' si legge come "cerca … in … [categoria]". */
.oe-cerca__dove{ order:3; flex:0 0 auto; display:inline-flex; align-items:center;
  gap:.1rem; margin-left:.6rem; max-width:13rem; border-radius:999px;
  padding:.2rem .55rem .2rem .8rem; background:rgba(255,255,255,.94); }
.oe-cerca__dove-etichetta{ font-family:var(--oe-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--oe-grigio-tenue); }
.oe-cerca__dove select{ border:0; background:transparent; cursor:pointer;
  font-family:var(--oe-font); font-size:.82rem; font-weight:650;
  color:var(--oe-verde-scuro); padding:.35rem 1.4rem .35rem .4rem; max-width:10.5rem;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B4A24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .1rem center; background-size:16px; }
/* ⚠️ Il contorno del fuoco va sulla PASTIGLIA, non sul <select>: sul
   select disegnava un rettangolo verde a spigoli vivi dentro una pastiglia
   arrotondata, e sembrava un errore di disegno. */
.oe-cerca__dove select:focus{ outline:none; }
.oe-cerca__dove:focus-within{ box-shadow:0 0 0 2px var(--oe-verde-scuro); }
.oe-cerca--grande{ flex-wrap:nowrap; }
.oe-cerca--grande input[type="search"]{ flex:1 1 auto; min-width:0; }
@media (max-width:620px){
  .oe-cerca--grande{ flex-wrap:wrap; }
  .oe-cerca__dove{ margin:.6rem 0 0; max-width:100%; width:100%; }
}

/* Il titolo "Search Results for: esp32" di Kadence e' un doppione del
   nostro riquadro, che dice la stessa cosa piu' il conteggio. */
body.search .entry-header.search-archive-title{ display:none; }
/* Idem per il "Sorry, but nothing matched..." con il SECONDO campo di
   ricerca sotto: due moduli identici uno sull'altro. Solo su /?s=, non
   sul 404, dove quel blocco serve. */
body.search section.error{ display:none; }

/* La pagina dei risultati: conteggio, campo grande, e i tre ambiti. */
.oe-risultati{ margin:0 0 2rem; padding:1.5rem 1.7rem; border-radius:var(--oe-r);
  background:#fff; border:1px solid var(--oe-bordo); box-shadow:var(--oe-ombra); }
.oe-risultati__conto{ margin:0 0 1rem; font-size:1.05rem; color:var(--oe-grigio); }
.oe-risultati__conto strong{ color:var(--oe-inchiostro); font-size:1.25rem; }
.oe-cerca--risultati input[type="search"]{ border:1px solid var(--oe-bordo);
  box-shadow:none; padding-block:.7rem; }
.oe-risultati__ambiti{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.oe-risultati__ambiti a{ font-family:var(--oe-mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:.36em .9em; border-radius:999px; border:1px solid var(--oe-bordo);
  color:var(--oe-grigio); }
.oe-risultati__ambiti a:hover{ border-color:var(--oe-verde); color:var(--oe-verde); }
.oe-risultati__ambiti a.attivo{ background:var(--oe-verde); border-color:var(--oe-verde);
  color:#fff; font-weight:700; }

/* ============================================================
   6ter. LA TESTATA DELLO SHOP — impianto di Adafruit.
   Banner con la ricerca, poi tre colonne: categorie, novita',
   in evidenza. La terza compare solo se qualcuno mette la stella
   a qualche prodotto: oggi sono zero, e una colonna finta si vede.
   ============================================================ */
.oe-testa-shop{ margin:0 0 2.5rem; }
.oe-testa-shop__banner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.6rem 2.5rem; padding:2.6rem 2.2rem;
  border-radius:16px; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 88% 12%, rgba(30,156,67,.55) 0%, rgba(30,156,67,0) 55%),
    linear-gradient(105deg, var(--oe-verde-scuro) 0%, var(--oe-verde) 55%, var(--oe-verde-petrolio) 100%); }
/* La griglia tenue di sfondo: richiama una millimetrata da laboratorio. */
.oe-testa-shop__banner::before{ content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px; pointer-events:none; }
.oe-testa-shop__parole{ position:relative; z-index:1; max-width:44ch; }
.oe-testa-shop__occhiello{ font-family:var(--oe-mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72);
  margin:0 0 .5rem; }
.oe-testa-shop h1{ color:#fff; font-size:2.15rem; line-height:1.1; font-weight:800;
  margin:0 0 .6rem; letter-spacing:-.025em; }
.oe-testa-shop__sotto{ color:rgba(255,255,255,.85); font-size:.95rem; margin:0; }
.oe-testa-shop .oe-cerca{ position:relative; z-index:1; }
@media (max-width:600px){ .oe-testa-shop h1{ font-size:1.6rem; }
  .oe-testa-shop__banner{ padding:1.8rem 1.3rem; } }

.oe-pannello{ display:grid; gap:2rem 2.5rem; margin-top:1.6rem;
  grid-template-columns:1.6fr 1fr 1fr;
  background:#fff; border:1px solid var(--oe-bordo); border-radius:var(--oe-r);
  padding:1.6rem 1.8rem 1.8rem; box-shadow:var(--oe-ombra); }
.oe-pannello--due{ grid-template-columns:1.6fr 1fr; }
@media (max-width:900px){ .oe-pannello, .oe-pannello--due{ grid-template-columns:1fr; } }

.oe-pannello h2{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; font-size:1rem; font-weight:750; margin:0 0 .9rem;
  padding-bottom:.55rem; border-bottom:2px solid var(--oe-inchiostro); }
.oe-pannello h2 a{ font-size:.78rem; font-weight:650; color:var(--oe-verde);
  text-decoration:none; white-space:nowrap; }
.oe-pannello h2 a:hover{ color:var(--oe-verde-scuro); }

/* Il numero di colonne lo decide PHP (2 in testata, 4 nella tendina):
   con 29 categorie principali su 2 colonne la tendina diventava alta
   mezzo schermo. */
.oe-pannello--categorie{ grid-template-columns:1fr; }
.oe-pannello__categorie{ list-style:none; margin:0; padding:0;
  columns:2; column-gap:1.6rem; }
@media (max-width:900px){ .oe-pannello__categorie{ columns:2 !important; } }
.oe-pannello__categorie li{ break-inside:avoid; margin-bottom:.42rem; }
.oe-pannello__categorie a{ display:flex; align-items:baseline; gap:.5rem;
  color:var(--oe-verde); text-decoration:none; font-size:.88rem; }
.oe-pannello__categorie a:hover{ color:var(--oe-verde-scuro); text-decoration:underline; }
.oe-pannello__categorie span{ font-family:var(--oe-mono); font-size:.68rem;
  color:var(--oe-grigio-tenue); }

.oe-pannello__riga{ display:flex; gap:.8rem; align-items:center;
  padding:.5rem 0; text-decoration:none; }
.oe-pannello__riga img{ flex:0 0 56px; width:56px; height:56px;
  object-fit:contain; background:#fff; border:1px solid var(--oe-bordo);
  border-radius:8px; padding:3px; }
.oe-pannello__nome{ display:block; color:var(--oe-verde); font-size:.86rem;
  line-height:1.35; font-weight:600; }
.oe-pannello__riga:hover .oe-pannello__nome{ color:var(--oe-verde-scuro);
  text-decoration:underline; }
.oe-pannello__prezzo{ display:block; margin-top:.15rem; font-size:.85rem;
  font-weight:750; color:var(--oe-inchiostro); }

/* I fuori produzione chiudono l'elenco e si distinguono: non e' una
   categoria come le altre, e' l'archivio di quello che non si vende piu'. */
.oe-pannello__fuori{ margin-top:.7rem; padding-top:.6rem;
  border-top:1px solid var(--oe-bordo); }
.oe-pannello__fuori a{ color:var(--oe-grigio-tenue) !important; font-style:italic; }
.oe-pannello__fuori a:hover{ color:var(--oe-grigio) !important; }

/* ============================================================
   6ter-bis. L'AVVISO PER CHI COMPRA DALL'ITALIA
   Consiglia futuranet.it, non blocca l'acquisto. Resta nascosto
   finche' il paese non risulta IT (vedi il commento in functions.php:
   non puo' essere reso dal server per via della cache).
   ============================================================ */
.oe-avviso-it{ background:var(--oe-verde-velo); border-bottom:1px solid #C6E0D0; }
.oe-avviso-it[hidden]{ display:none; }
.oe-avviso-it__interno{ display:flex; align-items:center; gap:1rem;
  padding-block:.7rem; }
.oe-avviso-it__bandiera{ font-size:1.3rem; line-height:1; flex:0 0 auto; }
.oe-avviso-it__testo{ flex:1; min-width:0; }
.oe-avviso-it__testo p{ margin:0; font-size:.85rem; line-height:1.45;
  color:var(--oe-verde-scuro); }
.oe-avviso-it__testo p[lang="en"]{ color:var(--oe-grigio); font-size:.8rem;
  margin-top:.15rem; }
.oe-avviso-it__testo a{ color:var(--oe-verde-scuro); font-weight:700; }
.oe-avviso-it__vai{ flex:0 0 auto; background:var(--oe-verde); color:#fff;
  text-decoration:none; padding:.5rem 1.1rem; border-radius:8px;
  font-weight:650; font-size:.85rem; white-space:nowrap; }
.oe-avviso-it__vai:hover{ background:var(--oe-verde-scuro); color:#fff; }
.oe-avviso-it__chiudi{ flex:0 0 auto; background:none; border:0; cursor:pointer;
  color:var(--oe-grigio-tenue); padding:.4rem; display:flex; }
.oe-avviso-it__chiudi:hover{ color:var(--oe-inchiostro); }
.oe-avviso-it__chiudi svg{ width:18px; height:18px; fill:currentColor; }
@media (max-width:760px){
  .oe-avviso-it__interno{ flex-wrap:wrap; gap:.6rem; }
  .oe-avviso-it__testo{ flex:1 0 70%; }
  .oe-avviso-it__vai{ order:4; width:100%; text-align:center; }
}

/* ============================================================
   6quater. LA BARRA DEL NEGOZIO, con la tendina di tutte le categorie.

   ⚠️ Questa barra sta DENTRO il negozio, non nel menu in alto: cliccando
   "Shop" si deve entrare, non trovarsi una tendina sotto il puntatore.
   ============================================================ */
.oe-barra-negozio{ background:var(--oe-inchiostro); position:relative; z-index:50;
  margin-bottom:2rem; }
/* Sul giornale la barra chiude la testata: nessuno stacco sopra. */
.oe-barra-blog{ margin-top:0; }
.oe-barra-negozio__interno{ display:flex; align-items:stretch; flex-wrap:wrap;
  gap:.1rem; }
/* ⚠️ Il selettore va sui FIGLI DIRETTI. Scritto come `.oe-barra-negozio a`
   colorava anche i link dentro la tendina — che e' annidata nella barra —
   e l'elenco delle categorie usciva grigio chiaro su bianco, illeggibile,
   con le righe spaziate come voci di barra. */
.oe-barra-negozio__interno > a, .oe-barra-negozio__tutte > button{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.78rem .85rem; font-size:.85rem; font-weight:600;
  color:#C6D6CD; text-decoration:none; background:none; border:0;
  cursor:pointer; font-family:var(--oe-font); white-space:nowrap;
  border-bottom:3px solid transparent; }
.oe-barra-negozio__interno > a:hover, .oe-barra-negozio__tutte > button:hover{
  color:#fff; border-bottom-color:var(--oe-verde-chiaro); }
.oe-barra-negozio__interno > a.attivo{ color:#fff; border-bottom-color:var(--oe-verde-chiaro); }
.oe-barra-negozio__tutte > button svg{ width:16px; height:16px; fill:currentColor; }
/* "Category" apre la tendina e sta a SINISTRA: e' la voce principale
   della barra, non un ripiego in fondo. */
.oe-barra-negozio__tutte{ position:static; }
.oe-barra-negozio__tutte > button{ color:#fff; }
@media (max-width:860px){
  .oe-barra-negozio__interno{ overflow-x:auto; flex-wrap:nowrap; }
}

/* ⚠️ Lo z-index va sul PANNELLO e va alto. Interrogando la pagina viva:
   nessun antenato crea un contesto di impilamento (tutti `z-index:auto`,
   `position:static`), quindi il pannello compete nel contesto radice
   contro il contenuto della pagina. Con z-index:1 l'immagine dell'articolo
   gli finiva sopra e si vedeva il pannello in trasparenza. */
.oe-mega__pannello{
  position:absolute; left:0; right:0; top:100%; z-index:999;
  background:var(--oe-fondo); border-top:1px solid var(--oe-bordo);
  box-shadow:0 22px 44px rgba(15,23,19,.14);
  padding:.4rem 0 1.4rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.oe-barra-negozio__tutte:hover > .oe-mega__pannello,
.oe-barra-negozio__tutte:focus-within > .oe-mega__pannello{
  opacity:1; visibility:visible; transform:none; }
.oe-mega__pannello .oe-pannello{ box-shadow:none; border:0; background:none;
  margin-top:0; padding-inline:0; }
/* ⚠️ Su telefono il pannello NON va nascosto: era `display:none` sotto i
   1024 px, quindi toccare "Category" non faceva niente — un pulsante che
   non fa niente e' peggio che non averlo. Li' si apre in linea, spingendo
   il contenuto in basso invece di sovrapporsi, e si chiude togliendo il
   fuoco. Il tocco su un <button> da' il fuoco, quindi `:focus-within`
   funziona anche senza mouse. */
@media (max-width:1024px){
  .oe-mega__pannello{ position:static; box-shadow:none; padding:0;
    max-height:0; overflow:hidden; transform:none;
    transition:max-height .2s ease, opacity .2s ease; }
  .oe-barra-negozio__tutte:focus-within > .oe-mega__pannello{
    max-height:70vh; overflow-y:auto; padding:.6rem 0 1rem; }
  .oe-pannello__categorie{ columns:2 !important; }

  /* ⚠️ Reso in-flusso, il pannello prende un posto nella riga della barra
     e spinge fuori schermo la voce accanto ("New products" finiva a
     x=432 su uno schermo da 390). Va mandato su una riga sua. */
  .oe-barra-negozio__interno{ flex-wrap:wrap; }
  .oe-barra-negozio__tutte{ display:contents; }
  .oe-barra-negozio__tutte > button{ order:1; }
  .oe-barra-negozio__interno > a{ order:2; }
  .oe-mega__pannello{ order:3; flex:1 0 100%; }
}

/* Il titolo della categoria: compatto, con il conteggio. */
.oe-testa-categoria{ margin:0 0 1.3rem; }
.oe-testa-categoria h1{ font-size:2rem; font-weight:800; margin:0;
  letter-spacing:-.025em; }
.oe-testa-categoria__piu{ color:var(--oe-verde); font-weight:700; }
/* "Tagged" davanti al nome del tag: dice che genere di archivio e' senza
   rubare la scena al nome. Piu' piccolo e in maiuscoletto, non e' il titolo. */
.oe-testa-categoria__genere{ display:block; font-family:var(--oe-mono);
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--oe-grigio-tenue); margin-bottom:.15rem; }
.oe-testa-categoria__conto{ margin:.35rem 0 0; font-family:var(--oe-mono);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--oe-grigio-tenue); }
.oe-testa-categoria__testo{ margin-top:.7rem; font-size:.92rem; max-width:70ch; }

/* ============================================================
   6septies. LA COLONNA DEI FILTRI (prezzo e attributi)
   Sta a sinistra della griglia: e' il posto dove si cercano.
   ============================================================ */
/* Due colonne vere: niente float, che con una griglia non affianca. */
.oe-negozio-corpo{ display:grid; grid-template-columns:238px minmax(0,1fr);
  gap:0 2.2rem; align-items:start; }
.oe-negozio-corpo--sola{ grid-template-columns:minmax(0,1fr); }
.oe-negozio-griglia{ min-width:0; }
@media (max-width:900px){
  .oe-negozio-corpo{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
}

.oe-filtri:empty{ display:none; }
.oe-filtri{ position:sticky; top:1rem; }
.oe-filtro{ margin-bottom:1.1rem; padding:1rem 1.1rem;
  background:#fff; border:1px solid var(--oe-bordo); border-radius:var(--oe-r); }
.oe-filtro h2{ font-family:var(--oe-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--oe-grigio-tenue); margin:0 0 .75rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--oe-bordo); }

.oe-filtro__prezzo{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:flex-end; }
.oe-filtro__prezzo label{ display:flex; flex-direction:column; gap:.15rem; flex:1 1 45%; }
.oe-filtro__prezzo span{ font-family:var(--oe-mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--oe-grigio-tenue); }
.oe-filtro__prezzo input{ width:100%; padding:.35rem .5rem; font-size:.85rem;
  border:1px solid var(--oe-bordo); border-radius:6px; background:#fff; }
.oe-filtro__prezzo button{ flex:1 1 100%; margin-top:.35rem; padding:.45rem;
  background:var(--oe-verde); color:#fff; border:0; border-radius:6px;
  font-weight:650; font-size:.82rem; cursor:pointer; }
.oe-filtro__prezzo button:hover{ background:var(--oe-verde-scuro); }
.oe-filtro__nota{ margin:.55rem 0 0; font-size:.72rem; color:var(--oe-grigio-tenue); }

/* I valori sono caselle da spuntare, non un elenco di link: si vede
   quali sono accesi senza doverlo dedurre dal grassetto. */
.oe-filtro__valori{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.1rem; }
.oe-filtro__voce{ display:flex; align-items:center; gap:.55rem;
  font-size:.85rem; color:var(--oe-grigio); text-decoration:none;
  padding:.32rem .35rem; border-radius:6px; }
.oe-filtro__voce:hover{ background:var(--oe-verde-velo); color:var(--oe-inchiostro); }
.oe-filtro__casella{ flex:0 0 15px; width:15px; height:15px; border-radius:4px;
  border:1.5px solid var(--oe-bordo); background:#fff; position:relative; }
.oe-filtro__voce:hover .oe-filtro__casella{ border-color:var(--oe-verde); }
.oe-filtro__voce.attivo .oe-filtro__casella{
  background:var(--oe-verde); border-color:var(--oe-verde); }
.oe-filtro__voce.attivo .oe-filtro__casella::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.oe-filtro__nome{ flex:1; min-width:0; }
.oe-filtro__voce.attivo .oe-filtro__nome{ color:var(--oe-inchiostro); font-weight:650; }
.oe-filtro__quanti{ font-family:var(--oe-mono); font-size:.68rem;
  color:var(--oe-grigio-tenue); }

/* I filtri accesi, sopra la griglia, togliibili uno per uno. */
.oe-filtri-accesi{ display:flex; align-items:center; flex-wrap:wrap; gap:.45rem;
  margin:0 0 1rem; }
.oe-filtri-accesi > span{ font-family:var(--oe-mono); font-size:.66rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--oe-grigio-tenue);
  margin-right:.2rem; }
.oe-filtri-accesi a{ display:inline-flex; align-items:center; gap:.35rem;
  padding:.28em .7em; border-radius:999px; background:var(--oe-verde-velo);
  border:1px solid #C6E0D0; color:var(--oe-verde-scuro); font-size:.82rem;
  font-weight:650; text-decoration:none; }
.oe-filtri-accesi a:hover{ background:var(--oe-verde); border-color:var(--oe-verde); color:#fff; }
.oe-filtri-accesi svg{ width:13px; height:13px; fill:currentColor; }
.oe-filtri-accesi .oe-filtri-accesi__tutti{ background:none; border:0;
  color:var(--oe-grigio-tenue); font-weight:500; text-decoration:underline; }
.oe-filtri-accesi .oe-filtri-accesi__tutti:hover{ background:none; color:var(--oe-accento); }
.oe-filtri-accesi del, .oe-filtri-accesi ins{ text-decoration:none; }

@media (max-width:860px){
  .oe-filtri{ float:none; width:auto; margin-right:0; }
}

/* ============================================================
   6sexies. LE FACCETTE — le categorie dei prodotti trovati
   ============================================================ */
.oe-faccette{ margin:0 0 1.2rem; padding:.9rem 1.1rem; border-radius:var(--oe-r);
  background:#fff; border:1px solid var(--oe-bordo); }
.oe-faccette__titolo{ display:block; margin-bottom:.6rem;
  font-family:var(--oe-mono); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--oe-grigio-tenue); }
.oe-faccette__voci{ display:flex; flex-wrap:wrap; gap:.4rem; }
.oe-faccette__voci a{ display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.32em .8em; border-radius:999px; border:1px solid var(--oe-bordo);
  font-size:.83rem; color:var(--oe-grigio); text-decoration:none; }
.oe-faccette__voci a:hover{ border-color:var(--oe-verde); color:var(--oe-verde); }
.oe-faccette__voci a.attivo{ background:var(--oe-verde); border-color:var(--oe-verde);
  color:#fff; font-weight:650; }
.oe-faccette__voci a span{ font-family:var(--oe-mono); font-size:.68rem; color:var(--oe-grigio-tenue); }
.oe-faccette__nota{ margin:.6rem 0 0; font-size:.72rem; color:var(--oe-grigio-tenue); }
/* Nel riquadro dei risultati la faccetta e' gia' dentro una scheda bianca. */
.oe-risultati .oe-faccette{ border:0; padding:0; margin-top:1.1rem; }

/* ============================================================
   6quinquies. QUANTI PRODOTTI PER PAGINA
   ============================================================ */
.oe-per-pagina{ display:flex; align-items:center; gap:.35rem;
  font-family:var(--oe-mono); font-size:.72rem; color:var(--oe-grigio-tenue);
  margin-left:1rem; white-space:nowrap; }
.oe-per-pagina span{ letter-spacing:.08em; text-transform:uppercase; }
.oe-per-pagina a{ text-decoration:none; color:var(--oe-grigio);
  border:1px solid var(--oe-bordo); border-radius:6px; padding:.22em .55em; }
.oe-per-pagina a:hover{ border-color:var(--oe-verde); color:var(--oe-verde); }
.oe-per-pagina a.attivo{ background:var(--oe-verde); border-color:var(--oe-verde);
  color:#fff; font-weight:700; }

/* ============================================================
   7bis. IL FLUSSO COMPATTO — la densita' presa dalla Verge.
   Titoli in colonna, senza foto: in mezzo schermo ci stanno otto
   pezzi invece di tre. Due colonne su desktop, una su telefono.
   ============================================================ */
.oe-flusso{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 2.5rem; background:#fff; border:1px solid var(--oe-bordo);
  border-radius:var(--oe-r); padding:.4rem 1.4rem; box-shadow:var(--oe-ombra); }

.oe-riga{ display:flex; align-items:flex-start; gap:.85rem;
  padding:.85rem 0; text-decoration:none;
  border-bottom:1px solid var(--oe-bordo); }
/* l'ultima riga di ciascuna colonna non porta il filetto */
.oe-riga:last-child, .oe-riga:nth-last-child(2):nth-child(odd){ border-bottom:0; }

/* La miniatura: piccola e quadrata, come nelle liste di testata. Serve a
   dare un appiglio visivo, non a mostrare la foto — per quello ci sono
   le schede grandi sopra. */
.oe-riga__foto{ flex:0 0 68px; }
.oe-riga__foto img{ display:block; width:68px; height:68px; object-fit:cover;
  border-radius:8px; background:var(--oe-verde-velo);
  transition:transform .25s ease; }
.oe-riga:hover .oe-riga__foto img{ transform:scale(1.05); }
/* Chi non ha la foto rientra come gli altri, cosi' la colonna resta dritta. */
.oe-riga--senza-foto{ padding-left:calc(68px + .85rem); }

.oe-riga__corpo{ display:block; min-width:0; }
.oe-riga__titolo{ display:block; color:var(--oe-inchiostro); font-weight:650;
  font-size:.97rem; line-height:1.34; }
.oe-riga:hover .oe-riga__titolo{ color:var(--oe-verde); }
.oe-riga__meta{ display:flex; align-items:center; gap:.55rem; margin-top:.32rem;
  font-family:var(--oe-mono); font-size:.67rem; letter-spacing:.05em;
  color:var(--oe-grigio-tenue); }
.oe-riga__cat{ color:var(--oe-verde); font-weight:700; text-transform:uppercase; }
.oe-riga__cat::after{ content:"·"; margin-left:.55rem; color:var(--oe-bordo); }

/* ============================================================
   7quater. LA STRISCIA — il ponte fra giornale e negozio.
   Sta dove stava il banner pubblicitario e fa lo stesso lavoro
   ottico (una barra che spezza la colonna di articoli), ma parla
   con la nostra voce e manda allo shop invece che fuori dal sito.
   ============================================================ */
.oe-striscia{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem 1.5rem; margin:2.4rem 0;
  padding:1.15rem 1.5rem; border-radius:var(--oe-r);
  background:linear-gradient(100deg,var(--oe-verde-scuro),var(--oe-verde-petrolio)); }
.oe-striscia__testo{ display:flex; flex-direction:column; gap:.2rem; }
.oe-striscia__testo strong{ color:#fff; font-size:1.12rem; font-weight:750;
  letter-spacing:-.015em; }
.oe-striscia__testo span{ color:rgba(255,255,255,.82); font-size:.88rem; }
.oe-striscia__vai{ background:#fff; color:var(--oe-verde-scuro); text-decoration:none;
  padding:.6rem 1.3rem; border-radius:8px; font-weight:700; font-size:.9rem;
  white-space:nowrap; transition:background .18s, color .18s; }
.oe-striscia__vai:hover{ background:var(--oe-inchiostro); color:#fff; }

/* ============================================================
   7ter. LA VETRINA IN HOME
   Una sola, sobria: dice che il negozio esiste e ci manda. Le fasce
   colorate stanno nello shop, non qui. Il velo verde chiaro la
   stacca dal giornale senza spezzare la pagina in due siti.
   ============================================================ */
.oe-vetrina{ margin:3rem 0 1rem; padding:.1rem 1.6rem 1.8rem;
  background:var(--oe-verde-velo); border-radius:16px; }
.oe-vetrina .oe-sezione{ margin-top:1.6rem; border-bottom-color:var(--oe-verde-scuro); }
/* Sul velo verde il verde del marchio fa 4,39:1 (Lighthouse chiede 4,5): qui il link va scuro. */
.oe-vetrina .oe-sezione a{ color:var(--oe-verde-scuro); }

/* Le fasce dentro lo shop: attaccate al titolo dell'archivio. */
.oe-fasce-shop{ margin-bottom:1rem; }
.oe-fasce-shop .oe-fascia:first-child{ margin-top:1.2rem; }

@media (max-width:860px){
  .oe-flusso{ grid-template-columns:1fr; gap:0; }
  .oe-riga:nth-last-child(2):nth-child(odd){ border-bottom:1px solid var(--oe-bordo); }
  .oe-vetrina{ padding-inline:1rem; }
}

/* ============================================================
   8. Allineamento del resto del sito (archivi, negozio, articolo)
      alla stessa grammatica, cosi' non c'e' un salto fra la home
      e le pagine interne.
   ============================================================ */
.loop-entry, .woocommerce ul.products li.product{
  background:#fff; border:1px solid var(--oe-bordo); border-radius:var(--oe-r);
  box-shadow:var(--oe-ombra); transition:transform .2s, box-shadow .2s, border-color .2s; }
.loop-entry:hover, .woocommerce ul.products li.product:hover{
  transform:translateY(-3px); box-shadow:var(--oe-ombra-alta); border-color:#C6E0D0; }
.loop-entry .post-thumbnail img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.woocommerce ul.products li.product a img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; }
.entry-taxonomies a{ background:var(--oe-verde); color:#fff; border-radius:999px;
  padding:.2em .68em; font-size:.65rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; }
.woocommerce .price, .woocommerce ul.products li.product .price,
.woocommerce div.product p.price{ color:var(--oe-inchiostro); font-weight:800; }
.woocommerce div.product p.price{ font-size:1.9rem; }
.woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt,
.woocommerce #respond input#submit{
  background:var(--oe-verde); color:#fff; border-radius:8px; font-weight:650; }
.woocommerce a.button:hover, .woocommerce .button.alt:hover{ background:var(--oe-verde-scuro); color:#fff; }
.woocommerce .stock.in-stock{ color:var(--oe-verde); font-weight:600; }

/* La griglia dello shop deve leggersi come le schede delle fasce.
   ⚠️ Kadence esce con la classe `woo-archive-action-on-hover`: il pulsante
   "Add to cart" c'e' nel codice ma compare solo al passaggio del mouse, e
   in pagina i prodotti sembravano senza pulsante. Lo rendo sempre visibile:
   nello stile Adafruit il pulsante e' parte della scheda, non un extra. */
.woocommerce ul.products li.product{ display:flex; flex-direction:column; overflow:hidden; }
.woocommerce ul.products li.product .product-details{ display:flex; flex-direction:column;
  gap:.5rem; flex:1; padding:1rem 1.05rem 1.15rem; }
/* ⚠️ Qui c'era `order:-1`, scritto quando credevo che la pastiglia stesse
   dentro `.product-details`. Invece e' figlia DIRETTA della scheda, che e'
   flex in colonna: l'ordine negativo la spediva in cima, sopra la foto e
   incollata all'angolo, senza nessun margine. Va lasciata dov'e' nel
   codice — fra foto e titolo — e le va dato il rientro delle altre righe. */
.woocommerce ul.products li.product > .oe-etichette{
  padding:.95rem 1.05rem 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.02rem; line-height:1.34; font-weight:650; margin:0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title a{
  color:var(--oe-inchiostro); text-decoration:none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover{ color:var(--oe-verde); }
.woocommerce ul.products li.product .price{ font-size:1.25rem; margin-top:auto; }
.woocommerce ul.products li.product .product-excerpt{ font-size:.85rem; line-height:1.5;
  color:var(--oe-grigio); }
/* ⚠️ Tre errori gia' fatti su questa singola regola. Li lascio scritti
   perche' sono tutti e tre invisibili guardando solo il mio CSS:
   1. `woo-archive-action-on-hover` sta sulla UL stessa, non su un antenato:
      scritto staccato (`.woo-archive-action-on-hover ul.products`) il
      selettore non prendeva niente.
   2. Anche attaccato non bastava: Kadence scrive
      `.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap`
      e senza `.woocommerce` davanti la mia regola perdeva di una classe.
   3. `body .woocommerce` STACCATO non corrisponde a nulla: la classe
      `woocommerce` la mette WooCommerce sul <body> stesso, quindi cercare
      un `.woocommerce` dentro il body e' cercare un elemento che non
      esiste. Va attaccata: `body.woocommerce`.
   Verificato interrogando la pagina viva con element.matches(), non a occhio. */
body.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap{
  position:static; opacity:1; visibility:visible; transform:none;
  bottom:auto; left:auto; right:auto; margin-top:.2rem;
  padding:0; background:none; box-shadow:none; transition:none; }
/* Kadence esce anche con `woo-archive-btn-text`: il pulsante diventa un
   link testuale "ADD TO CART →". Nelle fasce sopra il pulsante e' un
   blocco verde: due stili di pulsante nella stessa pagina si notano. */
body.woocommerce ul.products li.product .product-action-wrap a.button{
  display:block; width:100%; text-align:center; padding:.62rem 1rem;
  background:var(--oe-verde); color:#fff; border-radius:8px;
  font-weight:650; font-size:.85rem; text-decoration:none; }
body.woocommerce ul.products li.product .product-action-wrap a.button:hover{
  background:var(--oe-verde-scuro); color:#fff; }
body.woocommerce ul.products li.product .product-action-wrap a.button::after{ content:none; }

/* ------------------------------------------------------------------
   LA VISTA A RIGA (il secondo pulsante sopra la griglia).
   ⚠️ Era rotta, e la colpa era delle mie regole della griglia:
   `li.product{flex-direction:column}` e `img{width:100%;aspect-ratio:1/1}`
   valgono per le schede affiancate, ma in riga facevano un'immagine
   827x827 dentro una scheda larga 1242. Misurato nel browser.
   In riga la foto e' una miniatura fissa a sinistra e il testo le sta
   accanto: e' tutto il senso di questa vista.

   ⚠️ E la correzione ovvia (`flex-direction:row`) NON funziona: in vista a
   riga Kadence mette `display:grid` sulla scheda, dove flex-direction non
   vuol dire niente. Inoltre la pastiglia di categoria che aggiungo io e'
   figlia DIRETTA della scheda, non dei dettagli: sono tre celle in una
   colonna sola, ecco perche' restava tutto impilato. Letto con
   getComputedStyle, non dedotto.
   Quindi: griglia esplicita a due colonne, con la foto che occupa
   entrambe le righe a sinistra.
   ------------------------------------------------------------------ */
body.woocommerce ul.products.products-list-view li.product{
  display:grid; grid-template-columns:190px minmax(0,1fr);
  column-gap:1.4rem; row-gap:.4rem; align-items:start; padding:1.1rem; }
body.woocommerce ul.products.products-list-view li.product > a:first-child{
  grid-column:1; grid-row:1 / span 2; }
body.woocommerce ul.products.products-list-view li.product > .oe-etichette{
  grid-column:2; grid-row:1; }
body.woocommerce ul.products.products-list-view li.product > .product-details{
  grid-column:2; grid-row:2; }
body.woocommerce ul.products.products-list-view li.product a img{
  width:190px; height:190px; aspect-ratio:1/1; object-fit:contain; }
body.woocommerce ul.products.products-list-view li.product .product-details{
  padding:0; flex:1 1 auto; min-width:0; }
body.woocommerce ul.products.products-list-view li.product .woocommerce-loop-product__title{
  font-size:1.15rem; }
body.woocommerce ul.products.products-list-view li.product .price{ margin-top:.3rem; }
/* Il pulsante in riga non deve prendere tutta la larghezza della scheda. */
body.woocommerce ul.products.products-list-view li.product .product-action-wrap a.button{
  display:inline-block; width:auto; min-width:200px; margin-top:.5rem; }
@media (max-width:600px){
  body.woocommerce ul.products.products-list-view li.product{ flex-direction:column; }
  body.woocommerce ul.products.products-list-view li.product > a:first-child{
    flex:0 0 auto; max-width:100%; }
  body.woocommerce ul.products.products-list-view li.product a img{ width:100%; height:auto; }
}

/* Prezzo mancante o segnaposto: si dichiara, non si finge. */
.oe-prezzo-assente{ font-size:.95rem; font-weight:650; color:var(--oe-grigio-tenue);
  font-style:italic; }
body.woocommerce ul.products li.product .product-action-wrap a.oe-bottone--fantasma{
  background:transparent; color:var(--oe-verde); border:1.5px solid var(--oe-verde); }
body.woocommerce ul.products li.product .product-action-wrap a.oe-bottone--fantasma:hover{
  background:var(--oe-verde); color:#fff; }
.woocommerce span.onsale{ background:var(--oe-accento); border-radius:999px; font-weight:700; }
.page-numbers.current{ background:var(--oe-verde); border-color:var(--oe-verde); color:#fff; }
/* ============================================================
   9. IL FONDO PAGINA
   Stesso testo del sito vivo, ma su tre colonne: sul vivo ce n'era
   una sola e non c'era nessun rimando al negozio, che qui esiste.
   ============================================================ */
.oe-fondo{ background:var(--oe-inchiostro); color:#B9C9C0; padding:3.2rem 0 2.4rem;
  border-top:4px solid var(--oe-verde); }
.oe-fondo__griglia{ display:grid; gap:2.5rem; grid-template-columns:2fr 1fr 1fr; }
@media (max-width:860px){ .oe-fondo__griglia{ grid-template-columns:1fr; gap:2rem; } }

.oe-fondo h2{ color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; margin:0 0 1rem;
  font-family:var(--oe-mono); }
.oe-fondo__chi p{ font-size:.87rem; line-height:1.65; margin:0 0 .8rem; color:#B9C9C0; }
.oe-fondo__chi strong{ color:#fff; }
.oe-fondo a{ color:#DDE8E2; text-decoration:none; }
/* Dentro un paragrafo il link si distingue solo per colore (1,37:1 col testo): sottolineato. */
.oe-fondo__chi p a{ text-decoration:underline; text-underline-offset:.15em; }
.oe-fondo a:hover{ color:var(--oe-verde-chiaro); }
.oe-fondo__colonna ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.62rem; }
.oe-fondo__colonna a{ font-size:.89rem; }
#colophon{ background:var(--oe-inchiostro); color:#B9C9C0; }
#colophon a{ color:#fff; }
#colophon a:hover{ color:var(--oe-verde-chiaro); }

/* ⛔ TUTTO IL BLOCCO QUI SOTTO NON SCATTA MAI, E NON E' UN GUASTO DA RIPARARE.
   `.woocommerce-Tabs-panel--description` e' il contenitore della vecchia
   scheda a linguette. Questo tema non lo usa: `content-single-product.php`
   scrive `<section class="oe-blocco oe-blocco--descrizione">`, e le regole
   vive sono in `verge.css` (righe 1448-1485). Verificato aprendo una scheda:
   `document.querySelector('.woocommerce-Tabs-panel--description')` da' null,
   e le immagini risultano comunque centrate -- ci pensa verge.css.

   Lo lascio scritto perche' ci ho perso un'ora: leggendolo sembra la regola
   che spegne il testo bianco sulle fasce verdi, e uno ci mette mano credendo
   di aggiustare qualcosa. Non aggiusta niente. Si puo' cancellare, ma prima
   riguardare una scheda nel browser, non solo il codice.

   Le fasce, oggi, si vedono giuste: futuranet le scrive col nostro stesso
   verde (#15803D) e testo bianco. */
/* Le descrizioni importate da OpenCart portano lo stile in linea del 2015:
   fasce verdi con testo rosso. Neutralizzate finche' non vengono riscritte. */
.woocommerce-Tabs-panel--description [style*="background"]{ background:var(--oe-verde-velo) !important; }
.woocommerce-Tabs-panel--description [style*="color:#FFFFFF"],
.woocommerce-Tabs-panel--description [style*="color: rgb(255, 255, 255)"]{ color:var(--oe-inchiostro) !important; }
.woocommerce-Tabs-panel--description table{ width:100% !important; }

/* Le immagini delle descrizioni importate: al centro e con un po' d'aria.
   Arrivavano da OpenCart appoggiate a sinistra e con larghezze scritte
   a mano nel codice del 2015, quindi una sopra l'altra sbilenche.
   ⚠️ `width:auto !important` serve a scavalcare gli attributi width/height
   in linea: senza, l'immagine resta ancorata alla misura del 2015 e il
   centraggio non si vede. Il tetto e' la larghezza naturale del file, per
   non ingrandire uno screenshot piccolo fino a sgranarlo. */
.woocommerce-Tabs-panel--description img{
  display:block; margin:1.4rem auto; max-width:100%; width:auto !important;
  height:auto !important; border-radius:8px; }
.woocommerce-Tabs-panel--description p{ text-align:left; }
/* Se l'immagine e' sola dentro il paragrafo, centra anche il paragrafo:
   cosi' non resta una riga vuota spostata a sinistra sotto la foto. */
.woocommerce-Tabs-panel--description p:has(> img:only-child){ text-align:center; }
.woocommerce-Tabs-panel--description td img{ margin-inline:auto; }

/* ==================================================================
   CARRELLO E ACCOUNT NELLA TESTATA
   Il carrello e' il pulsante piu' importante del sito: si vede.
   L'account no: e' un servizio, sta in secondo piano.
   ================================================================== */
.oe-testa-negozio{
  display:flex; align-items:center; gap:.65rem; margin-left:1rem;
}
.oe-testa-account{
  display:inline-flex; align-items:center; gap:.35rem;
  color:var(--oe-grigio); font-size:.85rem; font-weight:600;
  text-decoration:none; white-space:nowrap; padding:.35rem .1rem;
}
.oe-testa-account:hover,.oe-testa-account:focus-visible{ color:var(--oe-verde); }

.oe-testa-carrello{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .85rem; border-radius:999px;
  background:var(--oe-verde); color:#fff;
  font-size:.85rem; font-weight:700; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.oe-testa-carrello:hover,.oe-testa-carrello:focus-visible{
  background:var(--oe-verde-scuro); color:#fff; transform:translateY(-1px);
}
/* Il conto degli articoli in un tondo, come se lo aspetta chiunque abbia
   gia' comprato online una volta. */
.oe-testa-carrello__n{
  display:inline-grid; place-items:center;
  min-width:1.25rem; height:1.25rem; padding:0 .3rem;
  border-radius:999px; background:rgba(255,255,255,.22);
  font-size:.72rem; font-variant-numeric:tabular-nums;
}
.oe-testa-carrello__tot{ font-variant-numeric:tabular-nums; }
/* Carrello vuoto: resta raggiungibile ma non urla. */
.oe-testa-carrello:not(.oe-testa-carrello--pieno){
  background:var(--oe-verde-velo); color:var(--oe-verde-scuro);
}
.oe-testa-carrello:not(.oe-testa-carrello--pieno) .oe-testa-carrello__n{
  background:rgba(11,74,36,.12);
}
.oe-testa-carrello:not(.oe-testa-carrello--pieno):hover{
  background:var(--oe-verde); color:#fff;
}

/* Sotto i 600px il totale sparisce e resta il tondo col numero: il
   pulsante deve restare grande abbastanza da premerlo col pollice. */
@media (max-width:600px){
  .oe-testa-negozio{ gap:.4rem; margin-left:.5rem; }
  .oe-testa-account span{ display:none; }
  .oe-testa-carrello__tot{ display:none; }
}

/* ==================================================================
   LO SPAZIO SOPRA IL CONTENUTO
   ------------------------------------------------------------------
   La fascia verde col titolo non c'e' piu': si spegne dal tema, in
   `functions.php` (filtro `kadence_post_layout`). Qui resta solo il
   margine, perche' Kadence tiene il contenuto a 5rem dal bordo —
   che su un articolo lungo va bene, ma su «Contacts» — tre righe e
   un indirizzo — sono 80 pixel di niente subito sotto la barra nera.

   ⚠️ `body.archive` da solo prenderebbe anche il NEGOZIO, che ha una
      sua impaginazione gia' decisa e non c'entra con questa
      richiesta. Il negozio e' `post-type-archive`: si esclude per
      nome, non per caso.
   ================================================================== */
body.page:not(.home) .content-area,
body.archive:not(.post-type-archive) .content-area{
  margin-top:2.5rem;
}

/* ==================================================================
   I MODULI DI CONTATTO
   ------------------------------------------------------------------
   Il modulo veniva dal sito del 2013: era dentro un <center> (tag
   tolto dall'HTML nel 1999) e le caselle avevano ognuna la larghezza
   che le capitava — 363 pixel il nome, 1153 l'area del messaggio.
   Qui prendono tutte la stessa misura e il modulo sta in una colonna
   leggibile invece di attraversare lo schermo.
   ================================================================== */
.wpcf7{
  max-width:44rem;
  margin-inline:auto;
  text-align:left;
}
.wpcf7 p{ margin-block:0 1.15rem; }

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 input[type=number],
.wpcf7 input[type=date],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
/* Sei righe bastano per un messaggio: dieci facevano una voragine
   bianca in mezzo alla pagina, ed era la cosa che si notava di piu'. */
.wpcf7 textarea{ min-height:9.5rem; height:9.5rem; resize:vertical; }

/* L'etichetta sopra la casella, non incollata. */
.wpcf7 p > br:first-of-type{ line-height:1.9; }

.wpcf7 input[type=submit]{
  background:var(--oe-verde); color:#fff;
  border:0; border-radius:999px;
  padding:.7rem 1.9rem;
  font-weight:700; font-size:.95rem;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.wpcf7 input[type=submit]:hover,
.wpcf7 input[type=submit]:focus-visible{
  background:var(--oe-verde-scuro); transform:translateY(-1px);
}

/* I messaggi di esito: verdi se e' andata, rossi se no. Il rosso di
   Contact Form 7 e' un arancione che non si distingue dal verde di
   conferma a colpo d'occhio. */
.wpcf7 form .wpcf7-response-output{
  border-radius:var(--oe-r);
  border-width:1px;
  padding:.85rem 1.1rem;
  margin:1.25rem 0 0;
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--oe-verde); background:var(--oe-verde-velo); color:var(--oe-verde-scuro);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{
  border-color:#B91C1C; background:#FEF2F2; color:#991B1B;
}
.wpcf7 .wpcf7-not-valid-tip{ color:#B91C1C; font-size:.85rem; }