/* =========================================================
   Improntae Blocks — riscrittura stile: pagina categoria
   Agisce sul markup di Warehouse + ps_facetedsearch 5.
   Le classi bersaglio sono quelle reali del tema 4.8.2:
   .facet, .products-selection, .product-miniature, ecc.
   Caricato solo quando l'area categoria è attiva.
   ========================================================= */

:root {
  --impb-sk-ink: #0F231B;
  --impb-sk-ink-soft: #4A5B52;
  --impb-sk-brand: #12513A;
  --impb-sk-brand-deep: #0B3527;
  --impb-sk-accent: #FF6A2B;
  --impb-sk-sale: #E23D2E;
  --impb-sk-surface: #EFF3EE;
  --impb-sk-card: #FFFFFF;
  --impb-sk-line: #DFE5DE;
  --impb-sk-radius: 14px;
  --impb-sk-card-radius: 16px;
  --impb-sk-btn-radius: 999px;
}

/* ---------------------------------------------------------
   Titolo nativo: lo sostituisce la nostra banda categoria.
   Si nasconde solo se la banda è davvero in pagina, così
   disattivando il blocco il titolo del tema ritorna.
   --------------------------------------------------------- */
#main:has(.impb-catban) #js-product-list-header { display: none; }

/* ---------------------------------------------------------
   COLONNA FILTRI
   --------------------------------------------------------- */
/* La card la disegna un solo contenitore. In colonna il markup è
   #search_filters_wrapper > #search_filters: dandola a entrambi si otteneva
   un riquadro dentro l'altro. Al centro pagina il wrapper non c'è. */
#left-column .block-categories,
#left-column #search_filters_wrapper,
#facets_search_center #search_filters {
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-card-radius);
  background: var(--impb-sk-card);
  padding: 4px 16px 8px;
  margin-bottom: 16px;
}
#left-column #search_filters_wrapper #search_filters {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
}

#search_filters .facet {
  border: 0;
  border-top: 1px solid var(--impb-sk-line);
  padding: 16px 0 4px;
  margin: 0;
}
#search_filters .facet:first-child { border-top: 0; }

/* La lista dei marchi è alta e scorre: barra sottile invece di quella
   di sistema, che con il verde del tema risultava un blocco pieno. */
#search_filters .facet ul {
  list-style: none;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--impb-sk-line) transparent;
}
#search_filters .facet ul::-webkit-scrollbar { width: 6px; }
#search_filters .facet ul::-webkit-scrollbar-track { background: transparent; }
#search_filters .facet ul::-webkit-scrollbar-thumb {
  background: var(--impb-sk-line);
  border-radius: 999px;
}
#search_filters .facet ul::-webkit-scrollbar-thumb:hover { background: var(--impb-sk-ink-soft); }

#search_filters .facet-title,
#search_filters .facet .h6,
#left-column .block-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--impb-sk-ink-soft);
  margin-bottom: 10px;
}

#search_filters .facet li { margin-bottom: 1px; }

/* La riga è label > [checkbox] + <a>. Con flex la voce prende lo spazio e il
   conteggio finisce a destra: .magnitude sta dentro il link, quindi float
   non poteva funzionare. */
#search_filters .facet-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 5px 0;
  cursor: pointer;
}
#search_filters .facet-label > a,
#search_filters .facet-label .search-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--impb-sk-ink);
  text-decoration: none;
}
/* il tema schiarisce il testo con _gray-darker: qui serve contrasto */
#search_filters .facet-label a._gray-darker { color: var(--impb-sk-ink); }
#search_filters .facet-label:hover > a { color: var(--impb-sk-brand); }
#search_filters .facet-label.active > a { color: var(--impb-sk-brand); font-weight: 650; }

#search_filters .magnitude {
  flex: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--impb-sk-ink-soft);
  background: none;
  padding: 0;
}

/* caselle di spunta: quadrato arrotondato con spunta piena */
#search_filters .custom-checkbox,
#search_filters .custom-radio {
  flex: none;
  display: inline-flex;
  margin: 0;
  line-height: 0;
}

#search_filters .custom-checkbox input[type="checkbox"] + span,
#search_filters .custom-radio input[type="radio"] + span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--impb-sk-line);
  border-radius: 6px;
  background: var(--impb-sk-card);
  transition: background .12s ease, border-color .12s ease;
}
#search_filters .custom-radio input[type="radio"] + span { border-radius: 50%; }

#search_filters .custom-checkbox input[type="checkbox"]:checked + span,
#search_filters .custom-radio input[type="radio"]:checked + span {
  background: var(--impb-sk-brand);
  border-color: var(--impb-sk-brand);
}
#search_filters .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
  color: #fff;
  font-size: 10px;
}
#search_filters .custom-radio input[type="radio"]:checked + span { box-shadow: inset 0 0 0 3px var(--impb-sk-card); }
#search_filters .facet-label:hover .custom-checkbox input + span { border-color: var(--impb-sk-brand); }

/* ---------------------------------------------------------
   ALBERO CATEGORIE IN COLONNA
   --------------------------------------------------------- */
#left-column .block-categories .block-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--impb-sk-ink-soft);
  padding: 12px 0 10px;
  margin: 0;
  border-bottom: 1px solid var(--impb-sk-line);
}

#left-column .category-top-menu { padding: 6px 0; margin: 0; list-style: none; }
#left-column .category-sub-menu { list-style: none; margin: 0; }

/* Solo i livelli annidati rientrano: il primo livello no, altrimenti si
   stacca dal titolo del blocco. */
#left-column .category-top-menu > .category-sub-menu { padding-left: 0; }
#left-column .category-sub-menu .category-sub-menu { padding-left: 15px; }

/* Il tema mette la freccia in a::before con position:absolute e left:0,
   contando su un padding sinistro del link per farle spazio. Azzerandolo
   la freccia finiva sopra la prima lettera. */
#left-column .block-categories li a {
  display: block;
  padding: 6px 22px 6px 16px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--impb-sk-ink);
  text-decoration: none;
}
#left-column .block-categories li a:hover { color: var(--impb-sk-brand); }
#left-column .block-categories .category-sub-link { font-size: 13.5px; color: var(--impb-sk-ink-soft); }

/* La freccia è un a::before assoluto ancorato a top:0 con line-height proprio:
   con il padding del link il glifo finiva ~9px più in alto del testo.
   Allineandola al padding-top si centra sulla prima riga, anche quando la voce
   va a capo.

   Nota: `line-height: inherit` non basta, perché eredita il *numero* 1.35 e il
   pseudo-elemento lo ricalcola sul proprio font-size (10px) ottenendo 13.5px
   invece dei 18.9px della riga del link. Serve il valore esplicito. */
#left-column .block-categories li > a::before {
  top: 6px;
  height: auto;
  line-height: 18.9px; /* = 14px x 1.35, la riga del link qui sopra */
}

/* le frecce del tema restano funzionali ma smettono di pesare visivamente */
#left-column .block-categories .arrows,
#left-column .block-categories .collapse-icons {
  color: var(--impb-sk-ink-soft);
  cursor: pointer;
}
#left-column .block-categories .collapse-icons:hover { color: var(--impb-sk-brand); }

/* slider prezzo — il tema usa noUiSlider, non jQuery UI */
.faceted-slider .noUi-target,
#search_filters .noUi-target {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--impb-sk-line);
  box-shadow: none;
}
.faceted-slider .noUi-connect,
#search_filters .noUi-connect { background: var(--impb-sk-brand); }

.faceted-slider .noUi-handle,
#search_filters .noUi-handle {
  width: 16px;
  height: 16px;
  right: -8px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid var(--impb-sk-card);
  background: var(--impb-sk-brand);
  box-shadow: 0 1px 4px rgba(15, 35, 27, .28);
  cursor: pointer;
}
/* noUiSlider disegna due trattini dentro la maniglia: non servono */
.faceted-slider .noUi-handle::before,
.faceted-slider .noUi-handle::after,
#search_filters .noUi-handle::before,
#search_filters .noUi-handle::after { display: none; }

/* filtri attivi come pillole */
.active_filters {
  background: none;
  padding: 0;
  margin-bottom: 14px;
}
.active_filters .filter-block {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--impb-sk-surface);
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-btn-radius);
  padding: 6px 12px;
  margin: 0 6px 6px 0;
  font-size: 13px;
  color: var(--impb-sk-ink);
  box-shadow: none;
}

/* ---------------------------------------------------------
   BARRA ORDINAMENTO E VISTA
   --------------------------------------------------------- */
.products-selection {
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-card-radius);
  background: var(--impb-sk-card);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.products-selection .showing,
.products-selection .col-left-sort { font-size: 13.5px; color: var(--impb-sk-ink-soft); }

.products-selection .btn,
.products-selection .select-title,
.products-selection .filter-button .btn {
  border-radius: var(--impb-sk-btn-radius);
  border: 1px solid var(--impb-sk-line);
  background: var(--impb-sk-card);
  color: var(--impb-sk-ink);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
}
.products-selection .btn:hover { border-color: var(--impb-sk-brand); color: var(--impb-sk-brand); }

.view-switcher .btn.active,
.view-switcher .btn:active {
  background: var(--impb-sk-brand);
  border-color: var(--impb-sk-brand);
  color: #fff;
}

/* ---------------------------------------------------------
   SPAZIO FRA LE CARD

   La riga dichiara --bs-gutter-x: 1.5rem, ma il tema azzera il padding delle
   colonne con priorità: agire sulla variabile non basta, il padding resta 0.
   Finché le card non avevano bordo la cosa non si notava; ora che ne hanno uno
   si toccavano fra loro.

   Verificato dal vivo: senza !important lo spazio orizzontale resta 0, con
   !important torna a 16px e le card passano da 264 a 248px, allineate al bordo
   del contenitore.
   --------------------------------------------------------- */
.products-grid.row {
  margin-left: -8px;
  margin-right: -8px;
}
.products-grid > .js-product-miniature-wrapper {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------
   MINIATURA PRODOTTO
   Stessa lingua visiva delle card dei widget: cornice tenue,
   immagine su fondo neutro, prezzo grande, marca in alto.
   --------------------------------------------------------- */
.product-miniature .thumbnail-container {
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-card-radius);
  background: var(--impb-sk-card);
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.product-miniature:hover .thumbnail-container {
  border-color: var(--impb-sk-brand);
  transform: translateY(-2px);
}

.product-miniature .product-thumbnail { background: var(--impb-sk-surface); display: block; }
.product-miniature .product-thumbnail img { border-radius: 0; }

.product-miniature .product-brand,
.product-miniature .product-category-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--impb-sk-ink-soft);
}

/* ATTENZIONE alla forma del selettore: nel tema il titolo È il link
   (`<a class="h3 product-title d-block">`), non un contenitore con un link
   dentro. Scrivere `.product-title a` non aggancia nulla — verificato sul DOM
   dello staging il 30/07/2026. Si tengono entrambe le forme perché altri
   layout della miniatura potrebbero annidare il link. */
.product-miniature .product-title,
.product-miniature a.product-title,
.product-miniature .product-title > a {
  display: block;
  margin: 2px 0 4px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--impb-sk-ink);
  text-decoration: none;
  text-transform: none;
}
/* Il colore va dichiarato a parte con più peso: custom_s_1.css impone
   `a:link:not(.nav-link):not(.btn){color:#777}`, che è (0,3,1) e batteva la
   regola sopra, (0,2,0). Aggiungendo :link/:visited si arriva a (0,3,1) e,
   caricandosi dopo, vince. */
.product-miniature a.product-title:link,
.product-miniature a.product-title:visited,
.product-miniature .product-title > a:link,
.product-miniature .product-title > a:visited { color: var(--impb-sk-ink); }

.product-miniature:hover .product-title,
.product-miniature:hover a.product-title:link,
.product-miniature:hover a.product-title:visited,
.product-miniature:hover .product-title > a:link { color: var(--impb-sk-brand); }

/* Prezzo: vecchio barrato sopra, nuovo grande sotto, come nelle card dei
   widget. Il tema annida .product-price dentro un <a>, quindi la colonna la
   fa il contenitore. */
.product-miniature .product-price-and-shipping {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin-top: auto;
  padding-top: 8px;
}
.product-miniature .product-price-and-shipping > a { text-decoration: none; }

.product-miniature .product-price,
.product-miniature .price {
  font-size: 21px;
  font-weight: 780;
  color: var(--impb-sk-ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.product-miniature .regular-price {
  order: -1;
  font-size: 13px;
  font-weight: 500;
  color: var(--impb-sk-ink-soft);
  text-decoration: line-through;
}
/* in offerta il prezzo passa al colore dello sconto */
.product-miniature .has-discount .product-price,
.product-miniature .product-price.has-discount,
.product-miniature .price.has-discount,
.product-miniature .discount-percentage { color: var(--impb-sk-sale); }

/* ---------------------------------------------------------
   MINIATURA: allineamento al progetto delle card dei widget
   --------------------------------------------------------- */

/* STRUTTURA — verificata sul DOM il 30/07/2026.
   .product-description è figlia di .product-miniature, NON di
   .thumbnail-container:

     article.product-miniature
       ├── div.thumbnail-container      (immagine + badge e pulsanti assoluti)
       └── div.product-description      (testi, prezzo, carrello)

   Dare `height:100%` al thumbnail-container gli faceva occupare tutta la card
   e la descrizione debordava di ~85px sulla riga sotto. La colonna flex va
   messa sulla miniatura, che è il vero contenitore di entrambe. */
.product-miniature {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-miniature .thumbnail-container {
  position: relative;
  display: block;
  height: auto;
}
.product-miniature .product-description,
.products-grid .product-miniature .product-description {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 14px 14px;
  text-align: left;
}

/* immagine su fondo neutro, area quadrata */
.product-miniature .product-thumbnail {
  display: block;
  background: var(--impb-sk-surface);
  padding: 10px;
}
.product-miniature .product-thumbnail img { mix-blend-mode: normal; }

/* badge sconto: pillola in alto a sinistra */
.product-miniature .product-flags {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

/* preferiti in alto a destra, tondo; confronta e anteprima restano
   ma solo al passaggio del mouse, per non affollare la card */
/* Il tema dà a questo contenitore uno sfondo bianco, un bordo e un'altezza
   propria: da lì la fascia bianca lunga dietro le icone. Va reso del tutto
   trasparente, perché lo sfondo tondo lo mette ogni singola icona.
   Ha anche 100px fissi di larghezza: su una card mobile da 178px occupava
   più di metà riga. */
.product-miniature .product-functional-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 3;
  opacity: 1;
  transform: none;
  /* Il contenitore resta 100x108 anche da trasparente e catturava i click
     sopra l'immagine: solo le icone devono essere cliccabili. */
  pointer-events: none;
}
.product-miniature .product-functional-buttons-links > a { pointer-events: auto; }
/* Il tema dà 100px fissi anche a questa lista, e `width:auto` non basta perché
   li dichiara esplicitamente. Con align-items:flex-end i pulsanti si
   appoggiano al bordo destro invece di restare a 79px da esso — verificato
   dal vivo: da 79px a 11px dal bordo della card. */
.product-miniature .product-functional-buttons-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
}
.product-miniature .product-functional-buttons-links > a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--impb-sk-line);
  color: var(--impb-sk-ink);
  font-size: 13px;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.product-miniature .product-functional-buttons-links > a:hover {
  background: var(--impb-sk-brand);
  border-color: var(--impb-sk-brand);
  color: #fff;
}
.product-miniature .btn-iqitwishlist-add.js-iqitwishlist-add.added,
.product-miniature .btn-iqitwishlist-add:hover { color: var(--impb-sk-sale); }
.product-miniature .btn-iqitwishlist-add:hover { background: #fff; border-color: var(--impb-sk-sale); }

.product-miniature .btn-iqitcompare-add,
.product-miniature .js-quick-view-iqit { opacity: 0; }
.product-miniature:hover .btn-iqitcompare-add,
.product-miniature:hover .js-quick-view-iqit { opacity: 1; }

/* la scheda mostra il marchio due volte: basta una riga */
.product-miniature .product-reference,
.product-miniature .product-brand { display: none; }

/* Disponibilità: pallino + testo, come nelle card dei widget.
   Il tema usa due badge distinti dentro .product-availability:
   .product-last-items ("Ultimi articoli in magazzino") e
   .product-unavailable (l'etichetta di non disponibilità, sul sito
   "ordinabile"). Vanno trattati entrambi. */
.product-miniature .product-availability { margin: 0; padding: 0 14px; }

.product-miniature .product-availability .badge,
.product-miniature .product-availability .product-last-items,
.product-miniature .product-availability .product-unavailable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.product-miniature .product-availability .product-last-items { color: var(--impb-sk-sale); }
.product-miniature .product-availability .product-unavailable { color: var(--impb-sk-ink-soft); }

.product-miniature .product-availability .badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* aggiunta al carrello: pulsante tondo, quantità nascosta.
   iqitthemeeditor scrive in custom_s_1.css:
     .products-grid .product-miniature .product-add-cart{display:none !important}
   Con !important la specificità non basta: l'unico modo di riportarlo in pagina
   è pari flag. È l'unico !important del foglio, e serve a scavalcare una
   personalizzazione del negozio, non il tema. */
.products-grid .product-miniature .product-add-cart,
#products .product-miniature .product-add-cart,
.product-miniature .product-add-cart { display: block !important; }

.product-miniature .product-add-cart { margin-top: 10px; }
.product-miniature .product-add-cart .input-qty { display: none; }
.product-miniature .product-add-cart .input-group-add-cart {
  display: flex;
  justify-content: flex-end;
  width: auto;
}
/* Il pulsante del tema contiene anche l'etichetta "Aggiungi al carrello" come
   nodo di testo nudo, non dentro uno span: non è selezionabile. Con font-size:0
   sul pulsante il testo scompare e la dimensione si ripristina solo sulle
   icone. Il display delle icone non si tocca, così lo spinner resta gestito
   dal tema. */
/* Il testo del pulsante, essendo un nodo nudo, dentro un grid o un flex diventa
   comunque un elemento del layout e sposta il centro anche a font-size 0. Le
   icone vengono quindi togliete dal flusso e centrate in assoluto: così il
   posizionamento non dipende da cosa altro c'è dentro il pulsante. */
.product-miniature .btn-product-list.add-to-cart {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--impb-sk-brand);
  color: #fff;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
  overflow: hidden;
  transition: background .16s ease, transform .16s ease;
}
.product-miniature .btn-product-list.add-to-cart > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 15px;
  line-height: 1;
  width: auto;
}
/* Stessi valori di .impb-add nella card dei widget: hover arancione e
   scale(1.06), non un semplice scurimento. Così il pulsante in categoria e
   quello in home sono lo stesso pulsante. */
.product-miniature .btn-product-list.add-to-cart:hover:not([disabled]) {
  background: var(--impb-sk-accent);
  color: #fff;
  transform: scale(1.06);
}
.product-miniature .btn-product-list.add-to-cart[disabled] {
  background: var(--impb-sk-line);
  color: var(--impb-sk-ink-soft);
  cursor: not-allowed;
}
.product-miniature .btn-product-list.add-to-cart[disabled]:hover { transform: none; }

/* Quando il prodotto non è ordinabile il tema sostituisce il pulsante con
   <a class="btn btn-product-list">View</a>, senza .add-to-cart: le regole qui
   sopra non lo toccavano e restava il rettangolo nero del tema. Stessa forma
   tonda, con una freccetta disegnata in CSS al posto dell'etichetta — così non
   dipende da un font di icone né dalla traduzione, che nel tema è ancora
   in inglese. */
/* La freccia e' un SVG di sfondo centrato con background-position, non un
   quadrato ruotato: quello ha il centro ottico spostato rispetto a quello
   geometrico e richiederebbe compensazioni a occhio. Cosi' e' esatta, e non
   dipende dal nodo di testo "View" che resta dentro il link. */
.product-miniature a.btn-product-list:not(.add-to-cart) {
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--impb-sk-line);
  border-radius: 999px;
  background-color: var(--impb-sk-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.product-miniature a.btn-product-list:not(.add-to-cart):hover {
  border-color: var(--impb-sk-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312513A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* prezzo e pulsante affiancati: vedi la media query in fondo al foglio,
   perche' su colonna stretta il posizionamento assoluto non tiene. */

/* badge sconto e novità */
.product-miniature .product-flags .product-flag {
  border-radius: var(--impb-sk-btn-radius);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 11px;
  box-shadow: none;
  background: var(--impb-sk-brand);
  color: #fff;
}
.product-miniature .product-flags .product-flag.discount,
.product-miniature .product-flags .product-flag.on-sale { background: var(--impb-sk-sale); }
.product-miniature .product-flags .product-flag.new { background: var(--impb-sk-highlight, #C4E538); color: var(--impb-sk-ink); }

/* pulsanti su immagine: tondi e discreti */
.product-miniature .product-functional-buttons-links .btn,
.product-miniature .product-functional-buttons a {
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--impb-sk-line);
  color: var(--impb-sk-ink);
  box-shadow: none;
}
.product-miniature .product-functional-buttons-links .btn:hover {
  background: var(--impb-sk-brand);
  border-color: var(--impb-sk-brand);
  color: #fff;
}

/* ---------------------------------------------------------
   PAGINAZIONE
   --------------------------------------------------------- */
.pagination .page-list { gap: 5px; display: flex; flex-wrap: wrap; }
.pagination .page-list li a,
.pagination .page-list li span {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--impb-sk-line);
  border-radius: 10px;
  background: var(--impb-sk-card);
  color: var(--impb-sk-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.pagination .page-list li.current a,
.pagination .page-list li.current span {
  background: var(--impb-sk-brand);
  border-color: var(--impb-sk-brand);
  color: #fff;
}

/* ---------------------------------------------------------
   TESTO SEO IN FONDO
   --------------------------------------------------------- */
.category-description-bottom,
#category-description-bottom {
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-card-radius);
  background: var(--impb-sk-card);
  padding: 24px 26px;
}
.category-description-bottom hr { display: none; }

@media (max-width: 767px) {
  .products-selection { padding: 8px 10px; }
  .product-miniature .product-price,
  .product-miniature .price { font-size: 17px; }

  /* su colonna stretta il pulsante assoluto si sovrapponeva al prezzo:
     torna nel flusso, allineato a destra sotto di esso */
  .products-grid .product-miniature .product-description { padding: 10px 11px 12px; }
  .product-miniature .product-add-cart {
    position: static;
    align-self: flex-end;
    margin-top: 8px;
  }
  .product-miniature .btn-product-list.add-to-cart { width: 40px; height: 40px; }
  .product-miniature .product-functional-buttons-links > a { width: 28px; height: 28px; font-size: 12px; }
  .product-miniature .product-availability { padding: 0 11px; }

  /* le voci della colonna categorie sono più compatte: la freccia segue */
  #left-column .block-categories li > a { padding: 7px 20px 7px 15px; }
}

/* La riga prezzo + pulsante affiancati vale solo dove c'è spazio: sopra i
   768px la descrizione riserva la colonna del pulsante. */
@media (min-width: 768px) {
  .product-miniature .product-description { position: relative; padding-right: 66px; }
  .product-miniature .product-add-cart { position: absolute; right: 12px; bottom: 14px; margin: 0; }
}

/* ---------------------------------------------------------
   FRECCE DEI CAROSELLI DI PRODOTTI
   (accessori, "altri prodotti della stessa categoria", correlati)

   Il tema le disegna come rettangoli 37×56 grigio scuro centrati
   verticalmente sulle slide: misurato, cadono esattamente sopra
   l'immagine della prima e dell'ultima card (freccia a x=27, card
   a x=27). Con le miniature ridisegnate la sovrapposizione stona.

   Si spostano in una fascia dedicata sopra il carosello, riprendendo
   i valori di .impb-rnav, i pulsanti dei caroselli dei widget.
   La fascia si crea con margin-top sul contenitore, così le frecce
   non finiscono mai sul titolo del blocco qualunque sia la sua altezza.

   Lo scope comprende .swiper-default-carousel perché le stesse classi
   swiper-button-* le usano anche la galleria della scheda prodotto
   (#product-images-large) e la quick view, che non vanno toccate.
   --------------------------------------------------------- */
.products.swiper-default-carousel { margin-top: 48px; }

.products.swiper-default-carousel .swiper-button-prev,
.products.swiper-default-carousel .swiper-button-next {
  top: -48px;
  bottom: auto;
  margin-top: 0;
  width: 38px;
  height: 38px;
  /* il tema mette padding 1rem .7rem: dentro un cerchio da 38 con box-sizing
     border-box lascia 15×6px di area utile e l'icona esce dal centro */
  padding: 0;
  opacity: 1;
  border: 1.5px solid var(--impb-sk-line);
  border-radius: 999px;
  background: var(--impb-sk-card);
  color: var(--impb-sk-ink);
}
.products.swiper-default-carousel .swiper-button-prev { left: auto; right: 46px; }
.products.swiper-default-carousel .swiper-button-next { left: auto; right: 0; }

/* l'icona è un ::after in FontAwesome a 30px: fuori scala in un cerchio da 38 */
.products.swiper-default-carousel .swiper-button-prev::after,
.products.swiper-default-carousel .swiper-button-next::after {
  font-size: 16px;
  color: inherit;
}

.products.swiper-default-carousel .swiper-button-prev:hover,
.products.swiper-default-carousel .swiper-button-next:hover {
  border-color: var(--impb-sk-brand);
  background: var(--impb-sk-brand);
  color: #fff;
}
.products.swiper-default-carousel .swiper-button-disabled { opacity: .3; }

/* Sotto i 768px la fascia non c'è: il titolo del blocco occupa tutta la
   larghezza e lascia 12px prima delle card. Le frecce si tolgono e resta
   lo scorrimento a dito, che su touch è il gesto naturale. */
@media (max-width: 767.98px) {
  .products.swiper-default-carousel { margin-top: 0; }
  .products.swiper-default-carousel .swiper-button-prev,
  .products.swiper-default-carousel .swiper-button-next { display: none; }
}