/* Product card styles (ProductComponent). The card is mostly Bootstrap utilities; these
   are the few things Bootstrap has no class for: fixed button sizes, the two-line name,
   the heart's colours and the hover effect. Loaded after style.css; see layouts/_head. */

/* The card lifts a little and its picture zooms in on hover (not on touch screens, where
   hover sticks after a tap). */
.product-card {
  transition: box-shadow 0.2s ease-out;
}
.product-card-media img {
  transition: transform 0.3s ease-out;
}
@media (hover: hover) {
  .product-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
  }
  .product-card:hover .product-card-media img {
    transform: scale(1.05);
  }
}

/* Names get two lines, then "…", so every card's price row lines up (the full name is
   on the product's page and in the picture's tooltip). */
.product-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* The round add button (or the arrow to choose a flavor), and the watch list heart. */
.product-card-action,
.product-card .btn-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.product-card .btn-wishlist {
  width: 36px;
  height: 36px;
  background: #fff;
  color: #222724;
  transition: color 0.2s ease-out;
}
/* Only the heart turns red: on hover, and filled in once the product is saved (.active,
   set by WatchButtonComponent). Bootstrap's red is pale pink in this theme, so it's set
   here. */
.product-card .btn-wishlist:hover,
.product-card .btn-wishlist.active {
  background: #fff;
  color: rgb(240, 56, 56);
}

@media (max-width: 575.98px) {
  .product-card-action {
    width: 36px;
    height: 36px;
  }
  .product-card .btn-wishlist {
    width: 32px;
    height: 32px;
  }
  .product-card .btn-wishlist svg {
    width: 18px;
    height: 18px;
  }
}