/*
 * Product miniatures of the theme (category, brand, search pages) and phone/WhatsApp links.
 * The file name carries its version: the Infomaniak cache ignores ?v=.
 */

/* The full name is in the HTML; two lines are shown, and two are always reserved so that
   prices line up from one card to the next. classic capitalizes Every Word: not French usage. */
.product-miniature .product-title {
  text-transform: none;
}

.product-miniature .product-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;
}

@media (hover: hover) {
  .product-miniature .product-thumbnail {
    display: block;
    overflow: hidden;
  }

  .product-miniature .product-thumbnail img {
    transition: transform .2s ease-in-out;
  }

  .product-miniature:hover .product-thumbnail img {
    transform: scale(1.08);
  }

  .product-miniature .thumbnail-container {
    transition: box-shadow .2s ease-in-out;
  }

  .product-miniature:hover .thumbnail-container {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-miniature .product-thumbnail img,
  .product-miniature .thumbnail-container {
    transition: none;
  }

  .product-miniature:hover .product-thumbnail img {
    transform: none;
  }
}

/* Lighthouse: touch targets of at least 44 px on phones. Links inside running text keep
   display: inline, so the vertical padding enlarges the target without changing the line
   height (min-height on an inline-flex link opened a gap between two lines of text). The links
   of Creative Elements icon lists are already display: flex, so min-height does the job there. */
@media (max-width: 767px) {
  a[href^="tel:"],
  a[href^="https://wa.me/"],
  a[href^="https://api.whatsapp.com/"] {
    padding-block: 14px;
  }

  .elementor-icon-list-item a[href^="tel:"],
  .elementor-icon-list-item a[href^="https://wa.me/"],
  .elementor-icon-list-item a[href^="https://api.whatsapp.com/"] {
    padding-block: 0;
    min-height: 44px;
  }
}