/* teklabels — bollini e blocchi. I colori per etichetta sono inline nell'header (#tl-colors). */

/* --- Bollino: testo --- */
.product-flag[class*="tl-"] {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --- Bollino: quando la lista flag contiene una nostra etichetta, i flag si impilano (niente sovrapposizione col -X% / Risparmi) --- */
.product-flags:has(.product-flag[class*="tl-"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}
/* forma */
.product-flag.tl-shape-pill { border-radius: 999px !important; padding-left: 11px !important; padding-right: 11px !important; }
.product-flag.tl-shape-rect { border-radius: 6px !important; }
/* posizione a destra: la lista si allarga su tutta la foto (senza catturare i clic) e il nostro bollino si allinea a destra;
   gli altri flag (-X%, Nuovo) restano a sinistra */
.product-flags:has(.product-flag.tl-pos-right) {
  right: 10px !important;
  width: auto !important;
  pointer-events: none !important;
}
.product-flags:has(.product-flag.tl-pos-right) > .product-flag { pointer-events: auto; }
.product-flags .product-flag.tl-pos-right { align-self: flex-end !important; }
body#product .product-cover .product-flags:has(.product-flag.tl-pos-right) { right: 1rem !important; }

/* --- Card categoria / ricerca: il tema del sito mette .product-flags in flusso sotto l'immagine (clippato da overflow hidden).
       Con una nostra etichetta la lista torna sopra l'immagine. --- */
body#category #js-product-list article.product-miniature .product-flags:has(.product-flag[class*="tl-"]),
body.advancedsearch-seo #js-product-list article.product-miniature .product-flags:has(.product-flag[class*="tl-"]),
body#manufacturer #js-product-list article.product-miniature .product-flags:has(.product-flag[class*="tl-"]),
body.page-teklabels #js-product-list article.product-miniature .product-flags:has(.product-flag[class*="tl-"]) {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 9 !important;
}

/* --- Scheda prodotto: il tema nasconde i flag al passaggio del mouse sulla foto (zoom). Con una nostra etichetta restano visibili. --- */
body#product .product-cover:hover .product-flags:has(.product-flag[class*="tl-"]) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Blocco prodotti --- */
.tl-block { margin: 32px 0; }
.tl-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tl-block__title { font-size: 1.35rem; margin: 0; }
.tl-block__more { font-size: .9rem; white-space: nowrap; }

/* griglia propria (CSS grid) invece delle colonne bootstrap: in home il CSS del sito azzera i padding dei wrapper */
.tl-block__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--tl-cols, 4), minmax(0, 1fr)) !important;
  gap: 16px !important;
  overflow: visible !important;
  margin: 0 !important;
}
.tl-block__grid > .js-product-miniature-wrapper {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}
.tl-block__grid article.product-miniature { height: 100%; }

/* --- Immagine: quadrato con immagine centrata (come i caroselli della home), su tutte le pagine --- */
html body .tl-block article.product-miniature .thumbnail-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  padding: 100% 0 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #e4e7ec !important;
  overflow: hidden !important;
}
html body .tl-block article.product-miniature .thumbnail-container a.product-thumbnail {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  width: auto !important;
  height: auto !important;
}
html body .tl-block article.product-miniature .thumbnail-container a.product-thumbnail picture { display: contents !important; }
html body .tl-block article.product-miniature .thumbnail-container a.product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
}
html body .tl-block article.product-miniature .thumbnail-container a.product-thumbnail picture + picture,
html body .tl-block article.product-miniature .thumbnail-container img.product-thumbnail-second { display: none !important; }

/* --- Prezzo a sinistra, "Disponibile" a destra sulla stessa riga, sempre visibile --- */
html body .tl-block article.product-miniature .product-price-and-shipping {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 5px 8px !important;
  text-align: left !important;
}
html body .tl-block article.product-miniature .product-price-and-shipping .product-availability,
html body .tl-block article.product-miniature .product-availability.tl-availability {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  width: auto !important;
  min-height: 0 !important;
  font-size: 11px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
html body .tl-block article.product-miniature .thumbnail-container .product-availability { display: none !important; }

/* --- Fuori dalla home (blog, pagine CMS, categoria, scheda): stessa card dei caroselli della home --- */
body:not(#index) .tl-block article.product-miniature {
  background: #fff !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  text-align: left !important;
  font-family: inherit !important;
  white-space: normal !important;
}
body:not(#index) .tl-block .thumbnail-container {
  position: relative !important;
  height: 0 !important;
  padding: 100% 0 0 !important;
  border-bottom: 1px solid #e4e7ec !important;
  overflow: hidden !important;
  background: #fff !important;
}
body:not(#index) .tl-block .thumbnail-container > a.product-thumbnail {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}
body:not(#index) .tl-block .thumbnail-container img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}
body:not(#index) .tl-block .thumbnail-container picture + picture,
body:not(#index) .tl-block .product-functional-buttons,
body:not(#index) .tl-block .product-description-short,
body:not(#index) .tl-block .product-category-name,
body:not(#index) .tl-block .estimateddelivery { display: none !important; }
body:not(#index) .tl-block .product-description {
  padding: 12px 14px 14px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
body:not(#index) .tl-block .product-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  min-height: 38px !important;
  margin: 0 0 6px !important;
  font-family: inherit !important;
}
body:not(#index) .tl-block .product-title a { color: #3e5c76 !important; text-decoration: none !important; }
body:not(#index) .tl-block .product-reference { font-size: 11px !important; color: #9aa1ad !important; margin: 0 0 6px !important; }
body:not(#index) .tl-block .product-price-and-shipping {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  font-size: 12px !important;
  margin-top: auto !important;
}
body:not(#index) .tl-block .product-price-and-shipping .price { font-size: 18px !important; font-weight: 800 !important; color: #54585c !important; }
body:not(#index) .tl-block .product-price-and-shipping .regular-price { font-size: 12px !important; color: #9aa1ad !important; text-decoration: line-through !important; }
body:not(#index) .tl-block .product-price-and-shipping .discount-percentage {
  font-size: 11px !important; font-weight: 800 !important; color: #fff !important; background: #ff6600 !important; padding: 2px 6px !important; border-radius: 5px !important;
}
body:not(#index) .tl-block .product-availability { position: static !important; opacity: 1 !important; transform: none !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; }
body:not(#index) .tl-block .product-availability:not(:has(*))::after { content: "● Disponibile"; color: #16a34a; font-weight: 600; font-size: 11px; }
body:not(#index) .tl-block .product-add-cart { display: none !important; }
/* il blocco dentro un articolo del blog non deve ereditare font monospazio o sfondo del contenitore */
.tl-block, .tl-block * { font-family: inherit; }
.tl-block__head .tl-block__title { font-family: inherit !important; font-weight: 700 !important; }

.tl-landing__desc { margin: 8px 0 12px; }
.tl-landing__count { color: #6b7280; font-size: .9rem; }
.tl-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 24px 0; }

@media (max-width: 991px) {
  .tl-block__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .tl-block { margin: 20px 0; }
  .tl-block__title { font-size: 1.1rem; }
  .tl-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}