/* ============================================================
   OrtoFiorito — homepage a blocchi

   Tutti i valori di questo foglio sono misurati sulla homepage
   online il 20 settembre 2026, non scelti: dimensioni dei
   caratteri, colori, spaziature, raggi e altezze vengono dal
   CSS generato da Elementor e dalle misure rilevate nel browser
   a 1512px di larghezza. Dove un valore sembra strano — 43px di
   spazio sopra un titolo, 11px sotto un sopratitolo — è perché
   è quello che c'è oggi.

   Si carica solo sulla pagina iniziale.
   ============================================================ */

/* ------------------------------------------------------------
   Misure e colori della pagina
   ------------------------------------------------------------ */
.of-hp-pagina{
  --of-hp-largo:1410px;      /* la wideSize del tema */
  --of-hp-gutter:15px;
  --of-hp-gap:20px;          /* lo spazio fra i riquadri */

  --of-hp-fondo:#F1F3F7;     /* il grigio delle fasce */
  --of-hp-verde:#1C3522;     /* il verde dei riquadri */
  --of-hp-giallo:#FFE802;    /* il giallo dei titoli in evidenza */
  --of-hp-bordo:#EBEBEB;
  --of-hp-scuro:#111111;
  --of-hp-testo:#444444;
  --of-hp-barrato:#666666;
  --of-hp-sconto:#d0473e;
  --of-hp-stella:#C4C4C4;

  --of-hp-titoli:var(--wp--preset--font-family--titoli);
  --of-hp-serrato:-0.034em;  /* la spaziatura dei titoli */
  --of-hp-serrato-link:-0.024em;

  --of-hp-raggio:10px;
  --of-hp-raggio-foto:5px;
  --of-hp-pillola:30px;
}

/* La homepage sta a filo dell'intestazione: la prima fascia
   grigia comincia subito sotto, senza spazio bianco in mezzo. */
.of-hp-pagina{ padding-block:0 }

.of-hp{ position:relative }
.of-hp--fondo{ background:var(--of-hp-fondo) }

/* Il contenitore dei blocchi e' IDENTICO a quello dell'intestazione, valore
   per valore: i blocchi devono cominciare dove comincia il logo, a qualunque
   larghezza di finestra.
   Prima erano 1440 con 15px di respiro. A schermo molto largo il bordo del
   contenuto cadeva nello stesso punto per caso — 1470-60 e 1440-30 fanno
   entrambi 1410 di contenuto, e centrati coincidono — ma appena la finestra
   scendeva sotto i 1440 il riquadro non era piu' centrato e la homepage
   restava 15px piu' in fuori del logo. Su un portatile da 1440 o 1280 si
   vedeva.
   Le due soglie sono quelle dell'intestazione: sopra i 1200px il contenitore
   del sito e' 1470 con 30px di respiro, sotto e' 1410 con 15. */
.of-hp__interno{
  width:100%;
  max-width:var(--of-hp-largo);
  margin-inline:auto;
  padding-inline:var(--of-hp-gutter);
}
@media (min-width:1200px){
  .of-hp__interno{
    max-width:1470px;
    padding-inline:30px;
  }
}

/* ------------------------------------------------------------
   La riga con titolo e link, in cima a tre blocchi
   ------------------------------------------------------------ */
.of-hp__testata{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--of-hp-gap);
  margin-bottom:36px;
}

.of-hp__titolo{
  margin:0;
  font-family:var(--of-hp-titoli);
  font-size:30px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:var(--of-hp-serrato);
  color:var(--of-hp-scuro);
}

/* ------------------------------------------------------------
   Il link sottolineato, nove volte in pagina.

   La riga sotto non è un border: è uno sfondo alto un pixel,
   così si può animare la larghezza senza spostare il testo, e
   l'elemento non deve essere position:relative — cosa che
   servirà, più sotto, per la variante che copre tutto il
   riquadro.
   ------------------------------------------------------------ */
.of-hp__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:3px;
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:var(--of-hp-serrato-link);
  color:var(--of-hp-scuro);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size 200ms ease;
}
.of-hp__link:hover,
.of-hp__link:focus-visible{ color:var(--of-hp-scuro) }
.of-hp__link:hover{ background-size:0 1px }

.of-hp__link--chiaro{ color:#fff;font-size:15px }
.of-hp__link--chiaro:hover,
.of-hp__link--chiaro:focus-visible{ color:#fff }

/* La parte di titolo evidenziata in giallo. Sul sito e' un <strong>: 700,
   non il 600 del resto del titolo («Gift Card» esce 138,4 e non 136,2). */
.of-hp__accento{ color:var(--of-hp-giallo) }
.of-hp-riquadro__titolo .of-hp__accento{ font-weight:700 }

/* ============================================================
   1 — Vetrina d'apertura
   ============================================================ */
.of-hp--apertura{ padding-top:30px }

.of-hp-apertura{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--of-hp-gap);
  align-items:stretch;
}

/* I 4px non sono un capriccio: sono il respiro fra la slide e
   il primo riquadro che c'è sul sito, e senza si toccano. */
.of-hp-apertura__slide{ padding-right:4px }

.of-hp-apertura__riquadri{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--of-hp-gap);
}
.of-hp-apertura__pila{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:var(--of-hp-gap);
}

/* --- la slide --- */
.of-hp-slide{
  position:relative;
  /* 5:4 è la proporzione della slide sul sito: 691px di larghezza
     danno 552,8px di altezza, ed è questa a fissare l'altezza di
     tutta la fascia — i tre riquadri a destra si allungano fin lì. */
  aspect-ratio:5/4;
  border-radius:var(--of-hp-raggio);
  overflow:hidden;
  background:var(--of-hp-verde);
}
.of-hp-slide__media{ position:absolute;inset:0 }
.of-hp-slide__media img{ width:100%;height:100%;object-fit:cover }

.of-hp-slide__testo{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  /* 30px di respiro della slide più 40px del contenuto. */
  padding:0 70px;
}

.of-hp-slide__sopratitolo{
  margin:0 0 6px;
  color:#fff;
  font-size:16px;
  line-height:1.2;
}

.of-hp-slide__titolo{
  margin:0 0 10px;
  font-family:var(--of-hp-titoli);
  font-size:44px;
  font-weight:600;
  line-height:1;
  letter-spacing:var(--of-hp-serrato);
  color:var(--of-hp-giallo);
}

.of-hp-slide__descrizione{
  margin:0 0 40px;
  color:#fff;
  font-size:16px;
}

.of-hp-slide__bottone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:200px;
  /* Asimmetrico: la lente a destra vuole meno spazio del testo. */
  padding:17px 38px 17px 46px;
  border-radius:var(--of-hp-pillola);
  background:#fff;
  color:var(--of-hp-scuro);
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:var(--of-hp-serrato-link);
  text-decoration:none;
  /* Vale anche quando e' un <button>: quello che apre la ricerca lo e'. */
  border:0;
  cursor:pointer;
  transition:background 160ms ease,color 160ms ease;
}
.of-hp-slide__bottone:hover{ background:var(--of-hp-scuro);color:#fff }

/* ============================================================
   Il riquadro con foto di fondo e testo sopra
   (tre in apertura, uno nelle promozioni, quattro nelle famiglie)
   ============================================================ */
.of-hp-riquadro{
  position:relative;
  overflow:hidden;
  border-radius:var(--of-hp-raggio);
  background:var(--of-riquadro-sfondo,var(--of-hp-verde));
  color:#fff;
  min-height:0;
}
.of-hp-riquadro__media{ position:absolute;inset:0 }
.of-hp-riquadro__media img{ width:100%;height:100%;object-fit:cover }

.of-hp-riquadro__testo{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:20px 20px 20px 30px;
}
.of-hp-riquadro--alto  .of-hp-riquadro__testo{ justify-content:flex-start }
.of-hp-riquadro--basso .of-hp-riquadro__testo{ justify-content:flex-end }

.of-hp-riquadro__sopratitolo{
  margin:0 0 11px;
  font-size:12px;
  font-weight:600;
  line-height:normal;
  text-transform:uppercase;
  color:#fff;
}

.of-hp-riquadro__azione{ line-height:27.424px }
.of-hp-riquadro__titolo{
  margin:0 0 9px;
  font-family:var(--of-hp-titoli);
  font-size:28px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:var(--of-hp-serrato);
  color:var(--of-riquadro-colore,#fff);
}

/* Il link copre tutto il riquadro, ma resta un link solo: lo
   pseudo-elemento si stende sul contenitore posizionato più
   vicino, che è .of-hp-riquadro__testo — alto quanto il
   riquadro. Un secondo <a> sovrapposto sarebbe marcatura non
   valida e un lettore di schermo leggerebbe due volte la
   stessa destinazione. */
.of-hp__link--copre::before{
  content:'';
  position:absolute;
  inset:0;
}

/* Varianti --------------------------------------------------- */

/* Apertura: titolo più grande e più aria sotto. */
.of-hp-riquadro--apertura .of-hp-riquadro__titolo{
  font-size:34px;
  line-height:32px;
  margin-bottom:29px;
}
.of-hp-riquadro--apertura.of-hp-riquadro--alto .of-hp-riquadro__testo{ padding-top:43px }

/* Promozioni: il riquadro verde in mezzo alle due colonne. */
.of-hp-riquadro--promo .of-hp-riquadro__testo{ padding:40px 20px 20px 40px }

/* Famiglie di piante. Il margine sotto il titolo cambia da riquadro a
   riquadro sul sito (impostato uno per uno in Elementor): 5, 9, 8. */
.of-hp-riquadro--famiglia .of-hp-riquadro__titolo{ margin-bottom:5px }
.of-hp-riquadro--famiglia.of-hp-riquadro--b .of-hp-riquadro__titolo{ margin-bottom:9px }
.of-hp-riquadro--famiglia.of-hp-riquadro--c .of-hp-riquadro__titolo{ margin-bottom:8px }
.of-hp-riquadro--famiglia.of-hp-riquadro--alto .of-hp-riquadro__testo{
  padding-top:32px;
  align-items:center;
  text-align:center;
}

/* Il riquadro grande della colonna destra. */
.of-hp-riquadro--grande .of-hp-riquadro__titolo{
  font-size:36px;
  margin-bottom:9px;
}
.of-hp-riquadro--famiglia.of-hp-riquadro--grande .of-hp-riquadro__testo,
.of-hp-riquadro--grande .of-hp-riquadro__testo{
  /* Con la doppia classe: prima perdeva contro i 32 dei riquadri «alti» e
     il testo del riquadro grande saliva di 20px. */
  padding-top:49px;
  align-items:center;
  text-align:center;
}

/* Niente velatura sopra le foto: sul sito non c'è, e metterla
   scurirebbe immagini scelte apposta luminose. Il contrasto del
   testo bianco dipende quindi dalla foto caricata — vale la pena
   guardarla prima di pubblicarla. */

/* ============================================================
   La giostra: categorie, prodotti, articoli
   ------------------------------------------------------------
   Senza JavaScript resta una lista che si scorre di lato, con
   l'aggancio ai bordi: funziona al dito, alla rotella e alle
   frecce della tastiera. Lo script aggiunge solo i pallini e
   le due frecce.
   ============================================================ */
.of-hp-giostra{
  position:relative;
  --of-giostra-gap:30px;
  /* Quanti elementi per schermata: il numero lo sceglie chi modifica la
     homepage e arriva come --of-per-schermo-desktop, scritto sul tag. Qui
     diventa --of-per-schermo, che le media query possono abbassare: uno
     style inline non si potrebbe correggere da CSS. */
  --of-per-schermo:var(--of-per-schermo-desktop,5);
}
.of-hp-giostra--categorie{ --of-giostra-gap:20px }

.of-hp-giostra__pista{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc(
    (100% - (var(--of-per-schermo) - 1) * var(--of-giostra-gap)) / var(--of-per-schermo)
  );
  gap:var(--of-giostra-gap);
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.of-hp-giostra__pista::-webkit-scrollbar{ display:none }
.of-hp-giostra__elemento{ scroll-snap-align:start;min-width:0 }

/* --- frecce --- */
.of-hp-giostra__freccia{
  position:absolute;
  top:var(--of-freccia-y,40%);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--of-hp-bordo);
  border-radius:50%;
  background:#fff;
  color:var(--of-hp-scuro);
  cursor:pointer;
  opacity:0;
  transition:opacity 160ms ease,background 160ms ease,color 160ms ease;
}
/* 8px e non 22: il respiro laterale del contenitore e' 15px, e una freccia
   spostata di 22px esce dalla finestra. Sopra i 1480px di larghezza non si
   vede perche' i margini automatici bastano a contenerla; fra 1200 e 1480 no,
   e bastano 7px fuori per far comparire la barra di scorrimento orizzontale
   su tutta la pagina. Dentro i 15px del respiro non puo' succedere a nessuna
   larghezza. */
.of-hp-giostra__freccia--prec{ left:-8px }
.of-hp-giostra__freccia--succ{ right:-8px }
.of-hp-giostra:hover .of-hp-giostra__freccia,
.of-hp-giostra__freccia:focus-visible{ opacity:1 }
.of-hp-giostra__freccia:hover{ background:var(--of-hp-scuro);color:#fff }
.of-hp-giostra__freccia[disabled]{ opacity:0;pointer-events:none }

/* --- pallini --- */
.of-hp-giostra__punti{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:30px;
}
/* Come i pallini di Swiper sul sito: 25x25 attaccati (19 sul telefono), un
   puntino da 5 al 40% e, su quello attivo, un anello da 1px che si allarga
   da 0,3 a 1. */
.of-hp-giostra__punto{
  position:relative;
  width:25px;
  height:25px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  cursor:pointer;
}
.of-hp-giostra__punto::before{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid var(--of-hp-scuro);
  border-radius:50%;
  opacity:0;
  transform:scale(.3);
  transition:all .4s cubic-bezier(.3,1,.3,1);
}
.of-hp-giostra__punto::after{
  content:'';
  position:absolute;
  inset:0;
  width:5px;
  height:5px;
  margin:auto;
  border-radius:50%;
  background:var(--of-hp-scuro);
  opacity:.4;
  transition:all .4s cubic-bezier(.3,1,.3,1);
}
.of-hp-giostra__punto[aria-current="true"]::before{ opacity:1;transform:scale(1) }
.of-hp-giostra__punto[aria-current="true"]::after{ opacity:1 }
@media(min-width:1025px){
  .of-hp-giostra[data-punti="telefono"] .of-hp-giostra__punti{ display:none }
}

/* ============================================================
   2 — Cerca per categoria
   ============================================================ */
.of-hp--categorie{
  /* Sul sito fra le frecce delle categorie e il titolo dei Nuovi arrivi ci
     sono 165px: 30 + 25 di pallini, 30 di fascia, 80 di margine. */
  padding:50px 0 30px;
  margin-bottom:80px;
}
.of-hp--categorie .of-hp__testata{ margin-bottom:30px }

.of-hp-categoria{
  display:block;
  text-align:center;
  text-decoration:none;
  color:var(--of-hp-scuro);
}
.of-hp-categoria__media{ display:block;margin-bottom:16px }
.of-hp-categoria__media img{
  width:120px;
  height:120px;
  margin-inline:auto;
  border-radius:150px;
  object-fit:cover;
  transition:transform 300ms ease;
}
.of-hp-categoria:hover .of-hp-categoria__media img{ transform:scale(1.05) }

.of-hp-categoria__riga{ display:block }

.of-hp-categoria__nome{
  margin:0;
  font-family:var(--of-hp-titoli);
  /* 14px sul sito (interlinea 16,94), non 16. */
  font-size:14px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  color:var(--of-hp-scuro);
}
/* Come glozin: l'h3 e' a 16 (interlinea 19,36) e il nome dentro a 14, quindi
   ogni riga e' alta 19,36 e non 16,94 — a tutte le larghezze. */
.of-hp-categoria__nome{ font-size:16px;line-height:19.36px }
.of-hp-categoria__testo{ font-size:14px;line-height:16.94px }
.of-hp-categoria__conteggio{
  margin-left:5px;
  font-size:12px;
  vertical-align:top;
}

.of-hp-categoria__freccia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--of-hp-pillola);
  background:#fff;
  color:var(--of-hp-scuro);
  transition:background 160ms ease,color 160ms ease;
}
.of-hp-categoria:hover .of-hp-categoria__freccia{
  background:var(--of-hp-scuro);
  color:#fff;
}
.of-hp-giostra--categorie{ --of-freccia-y:38px }

/* ============================================================
   3 — Nuovi arrivi
   ============================================================ */
.of-hp--arrivi{ margin-bottom:80px }
.of-hp-giostra--prodotti{ --of-freccia-y:35% }

.of-hp-prodotto{ position:relative }

/* La scatola e' il contenitore: i due comandi al passaggio ci si appoggiano
   sopra (sono fuori dal link, che non puo' contenerli). Il link la riempie. */
.of-hp-prodotto__foto{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--of-hp-raggio-foto);
  background:var(--of-hp-fondo);
}
.of-hp-prodotto__media{
  position:relative;
  display:block;
  height:100%;
  border-radius:var(--of-hp-raggio-foto);
  overflow:hidden;
}
.of-hp-prodotto__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 320ms ease,transform 420ms ease;
}
.of-hp-prodotto__seconda{ position:absolute;inset:0;opacity:0 }
.of-hp-prodotto__media--doppia:hover .of-hp-prodotto__seconda,
.of-hp-prodotto:focus-within .of-hp-prodotto__seconda{ opacity:1 }
.of-hp-prodotto:hover .of-hp-prodotto__media img{ transform:scale(1.05) }

.of-hp-prodotto__nome{
  margin:15px 0 0;
  color:var(--of-hp-scuro);
  font-family:var(--of-hp-titoli);
  font-size:15px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  /* Una riga sola: è la scelta del catalogo, e qui le card
     stanno affiancate — due titoli di altezza diversa
     sfaserebbero prezzi e pulsanti. */
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}
.of-hp-prodotto__nome a{
  color:var(--of-hp-scuro);
  text-decoration:none;
}
/*
 * Qui c'era un link steso su tutta la card (`::after` con `inset:0 0 70px`)
 * per renderla cliccabile per intero. E' stato tolto: copriva la foto, e
 * siccome quel pseudo-elemento appartiene al titolo — che sta FUORI da
 * `.of-foto` — passare il puntatore sulla foto non era piu' un passaggio
 * sulla foto. I due comandi (preferiti e sguardo rapido) comparivano solo
 * nella striscia in basso, dove sporgono sopra di lui a z-index 2.
 *
 * Ora i link sono due, come nella card del catalogo: la foto e il titolo.
 * La foto e' un <a> che riempie il suo contenitore, quindi cliccarla porta
 * alla scheda e passarci sopra accende i comandi.
 */

.of-hp-prodotto__prezzo{
  margin:11px 0 0;
  font-size:16px;
  font-weight:600;
  line-height:1.05;
  color:var(--of-hp-scuro);
}
.of-hp-prodotto__prezzo del{
  margin-right:5px;
  color:var(--of-hp-barrato);
  font-weight:400;
  text-decoration:line-through;
}
.of-hp-prodotto__prezzo ins{
  color:var(--of-hp-sconto);
  text-decoration:none;
  font-weight:600;
}

.of-hp-prodotto__azione{ position:relative;z-index:2 }
.of-hp-prodotto__azione .button,
.of-hp-prodotto__carrello{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:20px;
  padding:15.5px 20px;
  border:2px solid var(--of-hp-bordo);
  border-radius:var(--of-hp-pillola);
  background:transparent;
  color:var(--of-hp-scuro);
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:var(--of-hp-serrato-link);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.of-hp-prodotto__azione .button:hover,
.of-hp-prodotto__carrello:hover{
  border-color:var(--of-hp-scuro);
  background:var(--of-hp-scuro);
  color:#fff;
}
.of-hp-prodotto__azione .added_to_cart{ display:none }

/* ============================================================
   4 — In promozione
   ============================================================ */
/* 50px e non 80: le promozioni stanno piu' vicine alla fascia che
   segue di quanto non stiano gli altri blocchi. E' cosi' sul sito. */
.of-hp--promo{ margin-bottom:50px }

.of-hp-promo{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--of-hp-gap);
  align-items:stretch;
}
.of-hp-promo__colonna{
  display:flex;
  flex-direction:column;
  gap:30px;
  margin:0;
  /* 30 anche dopo l'ultima riga, come il margine delle card sul sito: e' lui
     a fare il riquadro verde alto 356 invece di 326. */
  padding:0 0 30px;
  list-style:none;
}

/* Le card crescono per riempire la colonna: cosi' le due colonne laterali
   finiscono esattamente dove finisce il riquadro verde in mezzo, invece di
   fermarsi qualche pixel piu' su. */
.of-hp-riga{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:15px;
  padding:33px 15px;
  border:1px solid var(--of-hp-bordo);
  border-radius:var(--of-hp-raggio);
  background:#fff;
}
.of-hp-riga__media{ flex:0 0 80px }
.of-hp-riga__media img{
  width:80px;
  height:80px;
  border-radius:var(--of-hp-raggio-foto);
  object-fit:cover;
}
.of-hp-riga__testo{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;
}
.of-hp-riga__nome{
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  color:var(--of-hp-scuro);
  text-decoration:none;
}
.of-hp-riga__nome:hover{ color:var(--of-hp-sconto) }

/* Le cinque stelle sono un fondo ripetuto, non cinque immagini:
   il riempimento parziale è una larghezza in percentuale, e il
   voto "4,2 su 5" si vede davvero invece di arrotondarsi. */
.of-hp-riga__stelle{
  position:relative;
  width:54px;
  height:11.5px;
  margin-top:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='%23C4C4C4'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-size:11px 10px;
  background-repeat:repeat-x;
  background-position:0 center;
}
.of-hp-riga__stelle-piene{
  position:absolute;
  inset:0 auto 0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='%23111111'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-size:11px 10px;
  background-repeat:repeat-x;
  background-position:0 center;
}

.of-hp-riga__prezzo{
  /* Prima il prezzo scontato, poi quello barrato: l'ordine del sito. */
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  margin-top:11px;
  font-size:16px;
  font-weight:600;
  line-height:1.22;
  color:var(--of-hp-scuro);
}
.of-hp-riga__prezzo del{
  color:var(--of-hp-barrato);
  font-weight:400;
  text-decoration:line-through;
}
.of-hp-riga__prezzo ins{
  order:-1;
  margin-right:5px;
  color:var(--of-hp-sconto);
  text-decoration:none;
  font-weight:600;
}

/* ============================================================
   5 — Le famiglie di piante
   ============================================================ */
.of-hp--famiglie{
  padding:80px 0;
  margin-bottom:80px;
}
.of-hp-famiglie{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--of-hp-gap);
  align-items:stretch;
}
.of-hp-famiglie__sinistra{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:var(--of-hp-gap);
}
.of-hp-famiglie__coppia{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--of-hp-gap);
}
/* La colonna destra è alta quanto le due file di sinistra
   messe insieme: 612px con i riquadri del sito. */
.of-hp-famiglie > .of-hp-riquadro--grande{ min-height:612px }

/* ============================================================
   6 — Il blog
   ============================================================ */
/* Il blocco del blog, misurato sul sito: 80 di respiro sopra (oltre agli 80
   di margine della fascia precedente), 46 fra testata e articoli, e in fondo
   il divisore — 64 sotto gli articoli, alto 31 con un filo #ebebeb al
   centro — subito prima di «Perché sceglierci». Prima qui mancavano respiro
   e filo, e la homepage finiva 200px prima. */
.of-hp--blog{ padding-top:80px }
.of-hp--blog .of-hp__testata{ margin-bottom:46px }
.of-hp-divisore{
  height:31px;
  margin-top:64px;
  background:linear-gradient(#ebebeb,#ebebeb) center/100% 1px no-repeat;
}
.of-hp-giostra--blog{ --of-freccia-y:35% }

.of-hp-articolo{
  display:flex;
  flex-direction:column;
  gap:30px;
}
.of-hp-articolo__media{
  display:block;
  aspect-ratio:100/57;
  border-radius:var(--of-hp-raggio-foto);
  overflow:hidden;
  background:var(--of-hp-fondo);
}
.of-hp-articolo__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 420ms ease;
}
.of-hp-articolo:hover .of-hp-articolo__media img{ transform:scale(1.05) }

.of-hp-articolo__testo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.of-hp-articolo__categoria{
  margin:0 0 15px;
  font-size:0;
}
.of-hp-articolo__categoria span{
  display:inline-flex;
  align-items:center;
  padding:8px 20px;
  border:1px solid var(--of-hp-bordo);
  border-radius:var(--of-hp-pillola);
  font-size:13px;
  font-weight:500;
  line-height:normal;
  color:var(--of-hp-scuro);
}

.of-hp-articolo__titolo{
  margin:0 0 10px;
  font-family:var(--of-hp-titoli);
  font-size:20px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:var(--of-hp-serrato);
}
.of-hp-articolo__titolo a{
  color:var(--of-hp-scuro);
  text-decoration:none;
}
.of-hp-articolo__titolo a:hover{ color:var(--of-hp-sconto) }

.of-hp-articolo__estratto{
  margin:0;
  font-size:16px;
  line-height:1.714;
  color:var(--of-hp-testo);
}
.of-hp-articolo__data{
  /* 20 sotto l'estratto, come sul sito. */
  margin:20px 0 0;
  font-size:16px;
  line-height:normal;
  color:var(--of-hp-testo);
}

/* ============================================================
   7 — Perché sceglierci
   ============================================================ */
.of-hp--perche{
  padding:60px 0;
  background:var(--of-perche-sfondo,#EFE9E5);
}
.of-hp-perche{
  display:grid;
  /* 493,5px su 1410: è la proporzione del sito. */
  grid-template-columns:35% 65%;
  align-items:center;
}
.of-hp-perche__intro{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.of-hp-perche__bottone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:3px;
  background:#69727D;
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  transition:background 160ms ease;
}
.of-hp-perche__bottone:hover{ background:var(--of-hp-scuro);color:#fff }

.of-hp-perche__titolo{
  margin:0;
  font-family:var(--of-hp-titoli);
  font-size:58px;
  font-weight:400;
  line-height:.945;
  letter-spacing:-2.7px;
  color:#000;
}

.of-hp-perche__motivi{
  display:flex;
  justify-content:space-evenly;
  gap:0 96px;
  margin:0;
  padding:0;
  list-style:none;
}
.of-hp-motivo{
  flex:0 1 33%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.of-hp-motivo__icona{
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
  margin-bottom:15px;
  color:#69727D;
}
.of-hp-motivo__icona svg,
.of-hp-motivo__icona img{
  width:auto;
  height:50px;
  max-width:60px;
}
.of-hp-motivo__titolo{
  /* I 19,48px sotto il titolo sono quelli del sito: nascono da
     un margine in em del tema precedente. */
  margin:0 0 19.48px;
  font-family:var(--of-hp-titoli);
  font-size:14px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  text-transform:uppercase;
  color:var(--of-hp-scuro);
}
.of-hp-motivo__testo{
  margin:0;
  font-size:16px;
  line-height:1.714;
  color:#000;
}

/* ============================================================
   Nel Customizer: i blocchi spenti restano visibili, spenti.
   Fuori dal Customizer non esistono proprio nel documento.
   ============================================================ */
.of-hp-blocco--spento{
  position:relative;
  opacity:.4;
  filter:grayscale(1);
}
.of-hp-blocco--spento::after{
  content:attr(data-blocco) ' — nascosto';
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  padding:6px 14px;
  border-radius:var(--of-hp-pillola);
  background:var(--of-hp-scuro);
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  pointer-events:none;
}

/* ============================================================
   Schermi più stretti
   ------------------------------------------------------------
   Le soglie sono quelle del sito: 1024px per il tablet,
   767px per il telefono.
   ============================================================ */
@media(max-width:1199px){
  .of-hp-giostra__freccia{ display:none }
}

@media(max-width:1024px){
  /* Sei cerchi affiancati su un tablet diventano sei francobolli. */
  .of-hp-giostra--categorie{ --of-per-schermo:4 }
  .of-hp-giostra--prodotti{ --of-per-schermo:3 }
  .of-hp-giostra--blog{ --of-per-schermo:2 }

  .of-hp-apertura{ grid-template-columns:1fr }
  .of-hp-apertura__slide{ padding-right:0 }
  .of-hp-slide{ aspect-ratio:16/10 }
  .of-hp-slide__testo{ padding:40px 20px }
  .of-hp-slide__titolo{ font-size:49px }

  .of-hp-apertura__riquadri{ grid-template-columns:1fr 1fr }
  .of-hp-riquadro--apertura.of-hp-riquadro--colonna{ min-height:340px }
  .of-hp-riquadro--apertura .of-hp-riquadro__titolo{ font-size:28px;line-height:1.1 }

  .of-hp-promo{ grid-template-columns:1fr }
  .of-hp-riga{ padding:15px }
  .of-hp-riga__media{ flex-basis:61px }
  .of-hp-riga__media img{ width:61px;height:61px }

  .of-hp-famiglie{ grid-template-columns:1fr }
  .of-hp-famiglie > .of-hp-riquadro--grande{ min-height:400px }
  .of-hp-riquadro--famiglia .of-hp-riquadro__titolo,
  .of-hp-riquadro--promo .of-hp-riquadro__titolo{ font-size:24px }
  .of-hp-riquadro--grande .of-hp-riquadro__titolo{ font-size:31px }

  .of-hp-perche{ grid-template-columns:1fr;gap:40px }
  .of-hp-perche__motivi{ flex-direction:column;gap:40px }
  .of-hp-motivo{ flex:1 1 auto }
  .of-hp--perche{ padding:60px 20px }
}

@media(max-width:767px){
  /* Il mezzo elemento che avanza non è un errore di conto: è il modo in cui
     si vede che la fila continua oltre il bordo. Senza, sembra finita. */
  .of-hp-giostra--prodotti{ --of-per-schermo:1.5 }

  /* Apertura, misurata a 375: slide quadrata 345x345 col testo centrato
     in verticale e 15 di lato; «Begonie» alto 565,8 e la pila a fianco
     alta uguale, due riquadri da 272,5 con 20 in mezzo. Sul sito le altezze
     «da telefono» salvate in Elementor (501 e 200) non valgono: restano
     quelle da computer. */
  .of-hp--apertura{ padding-top:25px }
  .of-hp-slide{ aspect-ratio:1/1 }
  .of-hp-slide__testo{ padding:20px 15px }
  .of-hp-slide__titolo{ font-size:38px }
  .of-hp-slide__descrizione{ margin-bottom:30px }
  /* Testo e lente vicini (2,6: lo spazio fra le parole), alto 52,5. */
  .of-hp-slide__bottone{ min-width:180px;min-height:52.5px;padding:17px 30px;gap:2.6px }

  .of-hp-apertura__riquadri{ grid-template-columns:1fr }
  .of-hp-apertura__pila{ grid-template-rows:1fr 1fr;height:565.8px }
  .of-hp-riquadro--apertura.of-hp-riquadro--colonna{ min-height:565.8px }
  .of-hp-riquadro{ min-height:220px }
  .of-hp-apertura__pila .of-hp-riquadro{ min-height:0 }
  .of-hp-riquadro--apertura .of-hp-riquadro__testo{ padding-inline:30px }
  .of-hp-riquadro--apertura.of-hp-riquadro--alto .of-hp-riquadro__testo{ padding-top:32px }
  .of-hp-riquadro--apertura .of-hp-riquadro__titolo{ font-size:34px;line-height:32px }

  /* I titoli di sezione a 28 (33,88 di interlinea); il link a destra non
     va mai a capo. */
  .of-hp__titolo{ font-size:28px }
  /* Titolo al 70%, link nel 30% a destra (Nuovi arrivi, Blog): se non ci
     sta va a capo, come «Vedi Tutte le News» sul sito. */
  .of-hp__testata .of-hp__link{ max-width:30% }
  .of-hp__testata .of-hp__titolo{ flex:0 0 70% }

  /* Nuovi arrivi: schede da 235 con 15 fra l'una e l'altra, e la fila
     arriva fino al bordo destro dello schermo (360 di pista). */
  .of-hp-giostra--prodotti{ margin-right:-15px }
  .of-hp-giostra--prodotti .of-hp-giostra__pista{ grid-auto-columns:235px;--of-giostra-gap:15px;gap:15px }
  .of-hp-giostra--prodotti .of-hp-giostra__punti{ margin-right:15px }

  /* Cerca per categoria: sul telefono sono DUE fasce grigie a tutta
     larghezza, con 50 di bianco in mezzo — titolo e link uno sotto l'altro
     (25 sopra, 48 sotto), poi i cerchi (25 sopra, 45 sotto). */
  .of-hp--categorie{ padding:0;margin-bottom:50px;background:none }
  .of-hp--categorie .of-hp__testata .of-hp__titolo{ flex:none }
  .of-hp--categorie .of-hp__testata .of-hp__link{ max-width:none }
  .of-hp--blog .of-hp__testata .of-hp__link{ flex:0 0 30% }
  .of-hp--categorie .of-hp__testata{
    flex-direction:column;
    align-items:flex-start;
    gap:25.4px;
    margin:0 -15px 50px;
    padding:25px 15px 48px;
    background:var(--of-hp-fondo);
  }
  .of-hp-giostra--categorie{
    --of-per-schermo:3;
    --of-giostra-gap:15px;
    margin-inline:-15px;
    padding:25px 15px 45px;
    background:var(--of-hp-fondo);
  }
  .of-hp-categoria__media img{ width:100%;height:auto;aspect-ratio:1 }
  .of-hp-giostra__punti{ margin-top:20px }
  .of-hp-giostra__punto{ width:19px;height:19px }
  .of-hp--arrivi{ margin-bottom:60px }
  .of-hp--famiglie{ margin-bottom:50px }

  /* Promozioni: colonne una sotto l'altra con 20 in mezzo, il riquadro
     verde alto 262,7 col testo in alto (33 e 16 dal bordo, titolo 28) e
     30 sotto; 20 dopo tutta la fascia. */
  .of-hp--promo{ margin-bottom:20px }
  .of-hp-riquadro--promo{ min-height:262.7px;margin-bottom:30px }
  .of-hp-riquadro--promo .of-hp-riquadro__testo{ justify-content:flex-start;padding:33px 16px }
  .of-hp-riquadro--promo .of-hp-riquadro__titolo{ font-size:28px }
  /* Famiglie: le quattro una sotto l'altra, 20 in mezzo, 70 sopra e sotto
     la fascia. Altezze del sito: 303,8 · 304,3 · 156 · 303,6. Il testo a
     16 dal bordo (15 + il filo), in alto a 35/18 in «Esterno» e a 32/15 nel
     grande. */
  .of-hp--famiglie{ padding:70px 0 }
  .of-hp-famiglie__sinistra{ grid-template-rows:auto }
  .of-hp-famiglie__coppia{ grid-template-columns:1fr }
  .of-hp-riquadro--famiglia.of-hp-riquadro--a{ min-height:303.8px }
  .of-hp-riquadro--famiglia.of-hp-riquadro--b{ min-height:304.3px }
  .of-hp-riquadro--famiglia.of-hp-riquadro--c{ min-height:156px }
  .of-hp-famiglie > .of-hp-riquadro--grande{ min-height:303.6px }
  .of-hp-riquadro--famiglia .of-hp-riquadro__testo{ padding:20px 16px }
  .of-hp-riquadro--famiglia.of-hp-riquadro--alto .of-hp-riquadro__testo{ padding:35px 18px 20px }
  .of-hp-riquadro--famiglia.of-hp-riquadro--grande .of-hp-riquadro__testo,
  .of-hp-riquadro--grande .of-hp-riquadro__testo{ padding:32px 15px 20px }

  /* Blog: 55 sopra (si fonde coi 50 delle famiglie), 50 di respiro, un
     articolo per schermata con 30 fra l'uno e l'altro, pallini a 25; il filo
     cade 55 sotto i pallini. */
  .of-hp--blog{ margin-top:55px;padding-top:50px }
  .of-hp-giostra--blog{ --of-per-schermo:1;--of-giostra-gap:30px }
  .of-hp-giostra--blog .of-hp-giostra__punti{ margin-top:25px }
  .of-hp-divisore{ margin-top:40px }

  /* Perche' sceglierci: 30 tutto intorno (piu' i 15 del contenitore),
     bottone e titolo centrati, titolo 38 su 54,84, i tre motivi attaccati
     l'uno all'altro e 30 dopo l'ultimo. */
  .of-hp--perche{ padding:30px }
  .of-hp-perche{ gap:0 }
  .of-hp-perche__intro{ align-items:center;text-align:center }
  .of-hp-perche__titolo{ font-size:38px;line-height:54.84px;letter-spacing:-2.7px }
  .of-hp-perche__motivi{ gap:0 }
  .of-hp-motivo:last-child{ margin-bottom:30px }
}

/* Chi ha chiesto meno animazioni le ha tolte tutte. */
@media(prefers-reduced-motion:reduce){
  .of-hp-categoria__media img,
  .of-hp-prodotto__media img,
  .of-hp-articolo__media img,
  .of-hp-giostra__pista{ transition:none }
  .of-hp-categoria:hover .of-hp-categoria__media img,
  .of-hp-prodotto:hover .of-hp-prodotto__media img,
  .of-hp-articolo:hover .of-hp-articolo__media img{ transform:none }
  .of-hp-giostra__pista{ scroll-behavior:auto }
}

/* Nel riquadro grande il link e' scuro (#111) sul sito, non bianco. */
.of-hp-riquadro--grande .of-hp__link.of-hp__link--chiaro{ color:var(--of-hp-scuro) }