/* ==========================================================================
   Negozio / categorie: barra laterale, barra strumenti, griglia/elenco prodotti, paginazione
   ========================================================================== */
.negozio { display: flex; align-items: flex-start; padding: 0 30px; }
.negozio__laterale { width: 350px; flex: 0 0 350px; margin: 36px 0 100px; }
.negozio__principale { flex: 1 1 auto; min-width: 0; margin-left: 30px; padding-top: 10px; margin-bottom: 113px; }

/* widget della barra laterale */
.widget { margin: 0 0 35.58px; padding: 0 0 14px; background: var(--verde); border: 1px solid var(--verde); border-radius: var(--r); overflow: hidden; position: relative; }
.negozio__laterale > .widget:last-child { margin-bottom: 0; }
.widget__titolo { display: inline-block; width: 348px; margin: 0 0 12px; padding: 14px 16px; background: #D7E6CF; border-radius: var(--r) var(--r) 0 0; font: 400 24px/30px var(--f-titoli); text-transform: capitalize; color: var(--testo); }
.cerca { position: relative; padding: 0 16px; }
.cerca__campo { display: block; width: 100%; height: 62.8px; padding: 16px 70px 16px 28px; background: #fff; border: 1px solid #3A4A2E; border-radius: var(--r); font: 400 18px/28.8px var(--f-testo); color: #2B3A24; transition: border-color .3s, box-shadow .3s; }
.cerca__campo::placeholder { color: #757575; }
.cerca__campo:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 2px rgba(138, 154, 91, .35); }
.cerca__invio { position: absolute; left: 284px; top: 6.4px; width: 60px; height: 50px; padding: 0; border: 0; border-radius: var(--r); background: transparent; color: #2D2D2D; display: grid; place-items: center; }
.cat-lista { padding: 0 16px; }
.cat-lista li { padding-bottom: .25px; position: relative; color: #C9C0A3; font: 400 18px/32.4px var(--f-testo); }
.cat-lista a { display: inline-block; width: 100%; padding: 10px 0; color: #E8E0C9; font: 400 18px/28.8px var(--f-testo); transition: color .3s; }
html[lang="en"] .cat-lista a { padding-right: 38px; }
.cat-lista a:hover, .cat-lista li.attiva a { color: var(--accento); }
.cat-lista .conta { position: absolute; left: 294px; top: 0; width: 22px; height: 44px; font: 400 18px/44px var(--f-testo); color: #C9C0A3; }
.prezzo-filtro { padding: 0 16px; }
.pf__barra { position: relative; height: 9px; margin: 0 9px 27px; background: #4E3C31; border-radius: var(--r); }
.pf__intervallo { position: absolute; inset: 0; background: #E8E0C9; border-radius: var(--r); }
.pf__maniglia { position: absolute; top: -9.9px; width: 27px; height: 27px; margin-left: -9px; border-radius: var(--r); background: #E8E0C9; border: 1px solid #E8E0C9; z-index: 2; cursor: pointer; }
.pf__maniglia--min { left: 0; } .pf__maniglia--max { left: 100%; }
.pf__riga { display: flex; align-items: center; justify-content: space-between; }
.pf__etichetta { font: 400 16px/38.4px var(--f-testo); color: #E8E0C9; }
.pf__invio { width: 133px; height: 48.6px; padding: 12px 36px; border: 1px solid #E8E0C9; border-radius: var(--r); background: #E8E0C9; color: var(--verde); font: 600 18.11px/22.64px var(--f-ui); text-transform: uppercase; transition: .3s; }
.pf__invio:hover { background: var(--accento); border-color: var(--accento); color: #fff; }

/* barra strumenti sopra i prodotti */
.barra-negozio { position: relative; height: 70px; display: flex; align-items: center; box-sizing: content-box; padding-bottom: 20px; border-bottom: 1px solid var(--grigio-bordo); }
.conteggio { font: 400 16px/18px var(--f-testo); color: var(--testo-2); }
.vista { position: absolute; left: 435px; top: 13px; display: flex; gap: 8px; }
.vista span { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(78, 60, 49, .25); color: rgba(78, 60, 49, .35); cursor: pointer; transition: .3s; }
.vista span.attiva { border-color: var(--verde); color: var(--verde); }
.ordina { position: absolute; right: 0; top: 0; width: 289px; height: 70px; background: #D7E6CF; border: 1px solid rgba(79, 101, 59, .24); border-radius: var(--r); }
.ordina select { appearance: none; -webkit-appearance: none; display: block; width: 287px; height: 68px; padding: 8px 50px 8px 22px; border: 1px solid var(--grigio-bordo); border-radius: var(--r); background: transparent; font: 400 16px/50px var(--f-testo); color: var(--testo); cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%232D2D2D'/%3E%3C/svg%3E") no-repeat right 30px center; }
.ordina select:focus { outline: 2px solid var(--accento); outline-offset: 1px; }

/* griglia prodotti */
.prodotti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 44px; }
.prodotto { position: relative; display: flex; flex-direction: column; background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(45, 45, 45, .08); transition: transform .3s, box-shadow .3s; }
.prodotto:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(45, 45, 45, .14); }
.prodotto__foto { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #fff; }
.prodotto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prodotto:hover .prodotto__foto img { transform: scale(1.04); }
.prodotto__dettagli { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; background: var(--verde); text-align: center; font: 400 18px/32.4px var(--f-testo); }
.prodotto__titolo { margin-top: 6px; }
.prodotto__titolo h5 { font: 400 22.82px/27.39px var(--f-titoli); text-transform: capitalize; }
.prodotto__titolo a { display: inline-block; color: #fff; transition: color .3s; }
.prodotto__titolo a:hover { color: var(--accento); }
.prodotto__breve { display: none; }
.prodotto__prezzo { margin-top: 6px; line-height: 32.4px; }
.prezzo { display: inline-block; margin-top: -1px; font: 400 16px/28.8px var(--f-testo); color: #E8E0C9; }

/* vista a elenco */
.prodotti.elenco { grid-template-columns: 1fr; }
.prodotti.elenco .prodotto { flex-direction: row; display: grid; grid-template-columns: 1fr 2fr; }
.prodotti.elenco .prodotto__dettagli { align-items: flex-start; text-align: left; padding: 15px 30px; }
.prodotti.elenco .prodotto__breve { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; width: 439.6px; max-width: 100%; margin-top: 6px; font: 400 15.2px/22.8px var(--f-testo); color: #E8E0C9; }
.prodotti.elenco .prodotto__dettagli > * { width: 100%; }
.prodotti.elenco .prodotto__breve { width: 439.6px; }

/* paginazione */
.paginazione { margin-top: 25px; text-align: center; }
.paginazione ul { display: inline-flex; margin: 1px; }
.paginazione li { width: 50px; height: 50px; }
.paginazione .page-numbers { display: block; width: 50px; height: 50px; font: 400 18px/46px var(--f-testo); text-align: center; text-transform: uppercase; color: var(--testo); border-bottom: 4px solid var(--grigio-bordo); transition: color .3s; }
.paginazione .current, .paginazione .dots { color: var(--accento); border-bottom-color: var(--verde); }
.paginazione a.page-numbers:hover { color: var(--accento); }
.paginazione .next { border-bottom-color: transparent; display: grid; place-items: center; line-height: 1; }

@media (max-width: 1024px) {
  .negozio { flex-direction: column; padding: 0 20px; }
  .negozio__laterale { width: 100%; flex: none; margin: 24px 0 0; order: 2; }
  .negozio__principale { margin: 0; width: 100%; order: 1; }
  .prodotti { grid-template-columns: repeat(2, 1fr); }
}


/* occhio e filtri compatti: solo telefono */
.prodotto__occhio, .filtri-mobile { display: none; }
@media (max-width: 767px) {
  .negozio { padding: 0 36px; }
  .negozio__laterale { display: none; }
  .negozio__principale { padding-top: 16px; margin-bottom: 59px; }
  .filtri-mobile { display: block; }
  .fm-cerca { position: relative; }
  .fm-cerca input { display: block; width: 100%; height: 46px; padding: 0 56px 0 14px; border: 1px solid rgba(79, 101, 59, .35); border-radius: var(--r); background: #fff; color: #2f4a2f; font: 400 15.2px/24.32px var(--f-testo); }
  .fm-cerca input::placeholder { color: #757575; }
  .fm-cerca button { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; border-radius: var(--r); background: transparent; color: #2f4a2f; display: grid; place-items: center; }
  .fm-selezioni { display: flex; gap: 10px; margin-top: 11px; }
  .fm-selezioni select { flex: 1 1 0; width: 154px; height: 57px; padding: 0 28px 0 10px; border: 1px solid rgba(79, 101, 59, .35); background: #E6EFE1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232F4A2F' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 8px center; color: #2f4a2f; font: 400 12.48px/14.98px var(--f-testo); appearance: none; -webkit-appearance: none; border-radius: 0; }
  .barra-negozio { height: auto; display: block; text-align: center; padding: 21px 0 22px; margin-top: 0; }
  .conteggio { font-size: 16px; line-height: 18px; }
  .vista, .ordina { display: none; }
  .prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
  .prodotto__titolo h5 { font-size: 20.2451px; line-height: 25.3063px; }
  .prodotto__occhio { display: grid; place-items: center; position: absolute; z-index: 3; left: 94px; top: 39px; width: 48px; height: 48px; background: #F7F4ED; color: #4E3C31; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
  .paginazione { margin-top: 25px; }
  .paginazione li, .paginazione .page-numbers { width: 45px; height: 45px; }
  .paginazione .page-numbers { line-height: 41px; }
}