/* Product card badge and highlights (set in Product Studio; frontend/views/product/_productCard.php).
   Loaded only on pages with such a card. The site's palette: black, #5a5a5b, the light greys. */

/* A list with badges or highlights (class from ProductCardInfo::listClass). The site gives cards a fixed
   height on narrow screens (380/400px) and centres them vertically below 1200px; here every card in a row
   takes the row's height instead, "Где купить" stays at the bottom, and nothing spills out of the card.
   !important: the site's own card rules use long selectors (7 classes) that would win otherwise. */
.pc-list { align-items: stretch !important; }
.pc-list .product__card {
  height: auto !important; min-height: 100%; display: flex; flex-direction: column;
  container-type: inline-size;   /* the highlights pick their columns from the card's width */
}
/* Natural height (never stretched): the picture area is a percentage of it and would grow along. */
.pc-list .product__card .wrapper-link { display: block; height: auto !important; flex: 0 0 auto; }
.pc-list .product__card .links { margin-top: auto; }
/* Names take the room of two lines on every card (one line sits in the middle; a longer name ends in "…",
   whole in its title), so a long name does not make its card taller than the others. */
.pc-list .product__card .wrapper-link .heading {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; -webkit-box-pack: center;
  line-height: 1.5; height: 3em; overflow: hidden;
}
/* The site's fixed heights leave room under "Где купить"; with the height following the content, the card
   keeps that room itself (below 992px the site's card has no bottom padding). */
.pc-list .product__card { padding-bottom: 18px !important; }
/* Picture area as on the site's own cards: 0.8 x the card's width, at most 250px, the same in every card of a
   row, so the names line up and the cards stay as short as the site's (the fallback is the tallest picture,
   230px + its 2rem top margin, for browsers without container units). */
.pc-list .product__card .wrapper-link .image-wrapper { height: calc(230px + 2rem) !important; height: min(250px, 80cqw) !important; }
.pc-list .product__card .wrapper-link .image-wrapper img { max-height: calc(100% - 2rem) !important; object-fit: contain; }
/* Up to 992px the site's card has no top padding: the picture starts lower, clear of the badge (14px + its
   height) on every card of the list. */
@media (max-width: 992px) {
  .pc-list .product__card .wrapper-link .image-wrapper img { margin-top: 42px !important; max-height: calc(100% - 42px) !important; }
}

/* The badge sits in the card's corner, the same distance from the top and the side at every width (the
   site's card has no top padding below 992px). */
.pc-list .product__card { position: relative; }

.product__card .pc-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  max-width: 70%; padding: 5px 10px; border-radius: 6px;
  background: #000000; color: #ffffff;
  font-family: gilroy-bold, sans-serif; font-size: 12px; line-height: 1.2; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Highlights: always the same 2-column grid (3 = two on top, one below), at every card width, and always
   room for two rows (--pc-row: a value line + a label line), so every card of the list is the same size,
   with 4 highlights, fewer or none (pc-info--n0: an empty area). Narrow cards get smaller icons and text
   instead of a single column. */
.product__card .pc-info {
  --pc-row: 32px; --pc-gap: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(var(--pc-row), auto);
  align-content: start; gap: var(--pc-gap) 12px;
  box-sizing: border-box; min-height: calc(15px + 2 * var(--pc-row) + var(--pc-gap));
  margin: -12px 0 22px; padding: 14px 0 0; border-top: 1px solid #e9e9e9;
  list-style: none; text-align: left;
}
.product__card .pc-info--n1 { grid-template-columns: minmax(0, 1fr); }
.product__card .pc-info--n0 { border-top-color: transparent; }
.product__card .pc-info__item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.product__card .pc-info__icon { width: 22px; height: 22px; flex: none; color: #000000; }
.product__card .pc-info__text { display: flex; flex-direction: column; min-width: 0; }
/* One line each (the row keeps its height on every card); a longer text ends in "…", whole in the title. */
.product__card .pc-info__text b, .product__card .pc-info__text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product__card .pc-info__text b { color: #000000; font-family: gilroy-bold, sans-serif; font-weight: normal; font-size: 14px; line-height: 1.25; }
.product__card .pc-info__text small { color: #5a5a5b; font-size: 11px; line-height: 1.3; }

/* The site turns a hovered card black (white name, white "Где купить"): everything here follows,
   with the site's own .3s timing. */
.product__card .pc-badge, .product__card .pc-info, .product__card .pc-info__icon,
.product__card .pc-info__text b, .product__card .pc-info__text small {
  transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
}
.product__card:hover .pc-badge { background: #ffffff; color: #000000; }
.product__card:hover .pc-info { border-top-color: #3a3a3a; }
.product__card:hover .pc-info--n0 { border-top-color: transparent; }
.product__card:hover .pc-info__icon, .product__card:hover .pc-info__text b { color: #ffffff; }
.product__card:hover .pc-info__text small { color: #c8c8c8; }

@media (max-width: 576px) {
  .product__card .pc-info__icon { width: 20px; height: 20px; }
  .product__card .pc-badge { font-size: 11px; padding: 4px 8px; }
}
/* Narrow cards (the card's own width, wherever it sits): smaller, so two columns still fit. */
@container (max-width: 259px) {
  .product__card .pc-info { --pc-row: 28px; --pc-gap: 8px; column-gap: 8px; }
  .product__card .pc-info__item { gap: 6px; }
  .product__card .pc-info__icon { width: 18px; height: 18px; }
  .product__card .pc-info__text b { font-size: 12px; }
  .product__card .pc-info__text small { font-size: 10px; }
}
@container (max-width: 199px) {
  .product__card .pc-info { --pc-row: 26px; --pc-gap: 6px; column-gap: 6px; }
  .product__card .pc-info__item { gap: 4px; }
  .product__card .pc-info__icon { width: 15px; height: 15px; }
  .product__card .pc-info__text b { font-size: 11px; }
  .product__card .pc-info__text small { font-size: 9px; }
}