/*
 * Prodavaki Recommend — storefront block.
 *
 * The card copies the theme's own product card as closely as CSS allows: pale
 * outline stars with the review count, a blue underlined name, the theme's grey
 * availability pill, the product code, then price and a grey cart button.
 * Two blocks on one page that look different read as two different shops.
 *
 * The single deliberate difference is the name: the theme lets it run to any
 * length, which makes the cards ragged, so here it is clamped to three lines.
 *
 * Namespaced under .prec, so nothing of the theme is overwritten.
 */

.prec {
  /* Measured off the theme's own card, not chosen by eye. */
  --prec-ink: #272323;
  --prec-link: #2f6fa9;
  --prec-faint: #777;
  --prec-accent: #e12d22;
  --prec-accent-soft: #fff5f4;
  --prec-star: #f5a623;
  --prec-star-off: #d8dcdf;
  --prec-stock-bg: #f4f4f4;
  --prec-stock-ink: #27ae60;
  --prec-btn-bg: #f1f3f5;
  --prec-btn-ink: #25272b;
  --prec-card-edge: #f9f9fc;

  box-sizing: border-box;
  color: var(--prec-ink);
}

.prec *, .prec *::before, .prec *::after { box-sizing: border-box; }

/* The theme underlines only the width of the words, not the column, so the
   line belongs to the inner span. */
.prec__title { margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.prec__title span { display: inline-block; padding-bottom: 20px; border-bottom: 2px solid var(--prec-accent); }

/* auto-fill, not auto-fit: with two products left, cards keep their size
   instead of stretching across the whole row. */
.prec__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }

/* No border: the theme draws its card edge with two shadows, which reads
   lighter than a solid 1px line. Copied verbatim. */
.prec-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #fff;
  box-shadow: var(--prec-card-edge) -.5px -.5px 0 .5px, var(--prec-card-edge) -1px -1px 0 0 inset; }
.prec-card__photo { display: block; position: relative; height: 132px; border-radius: 8px; overflow: hidden; background: #fff; }

/* Жёлтый — тот же, которым корзина метит экономию, новых цветов не вводим. */
.prec-card__set {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 2px 7px; border-radius: 0 6px 0 6px;
  background: #ffe680; color: #4a3b00;
  font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.prec-card__photo img { width: 100%; height: 100%; object-fit: contain; }

.prec-card__rating { display: flex; align-items: center; gap: 8px; line-height: 1; }
.prec-card__stars { display: inline-flex; gap: 1px; font-size: 15px; }
.prec-star { color: var(--prec-star-off); }
.prec-star.is-on { color: var(--prec-star); }
.prec-card__reviews { display: inline-flex; align-items: center; gap: 3px; color: var(--prec-ink); font-size: 11px; }

.prec-card__name {
  color: var(--prec-link); font-size: 13px; font-weight: 500; line-height: 1.4;
  text-decoration: underline; text-underline-offset: 2px;
  /* The one thing not copied from the theme: three lines keeps every card the
     same height without cutting names to something unrecognisable. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prec-card__name:hover { color: var(--prec-accent); text-decoration: underline; }

.prec-card__stock {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 4px;
  padding: 0 4px; border-radius: 6px;
  background: var(--prec-stock-bg); color: var(--prec-stock-ink);
  font-size: 10px; font-weight: 400;
}

.prec-card__code { color: var(--prec-faint); font-size: 11.5px; }

.prec-card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prec-card__price { display: flex; flex-direction: column; }
.prec-card__price b { font-size: 15px; font-weight: 700; color: var(--prec-ink); }
.prec-card__price s { color: var(--prec-faint); font-size: 12px; }

.prec-card__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: 6px;
  background: var(--prec-btn-bg); color: var(--prec-btn-ink); cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.prec-card__btn:hover { background: var(--prec-accent-soft); color: var(--prec-accent); text-decoration: none; }
.prec-card__btn.is-done { background: var(--prec-stock-ink); color: #fff; }
.prec-card__btn.is-busy { opacity: .6; pointer-events: none; }

/* ---------------------------------------------------------------- compact */

/*
 * The popup keeps the type scale of the page card — same font sizes, same
 * pill, same button — because a smaller copy of the same block reads as a
 * different block. Only the photo and the spacing give way to the 480px
 * modal, and the name is cut at two lines instead of three.
 */
.prec--compact .prec__title { margin-bottom: 12px; }
/* The theme's 20px gap under the heading would eat a fifth of what the modal
   shows without scrolling. */
.prec--compact .prec__title span { padding-bottom: 10px; }
/* Fixed three, not auto-fill: the popup has one width and one sensible row,
   and auto-fill quietly reflows to two cards on a narrow phone. */
.prec--compact .prec__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prec--compact .prec-card { padding: 10px; gap: 8px; }
.prec--compact .prec-card__photo { height: 96px; }
.prec--compact .prec-card__set { font-size: 10px; padding: 1px 6px; }
.prec--compact .prec-card__name { -webkit-line-clamp: 2; }
.prec--compact .prec-card__btn { width: 36px; height: 36px; }

/* ----------------------------------------------------------------- narrow */

@media (max-width: 767px) {
  .prec__grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; }
  .prec-card { padding: 10px; }
  .prec-card__photo { height: 108px; }
}

/* ------------------------------------------------------------------ */
/* Прокрутка блока.

   В попапе корзины ширины на три карточки не хватает, и раньше лишние
   подсказки просто не было видно. Теперь сетка в тесном режиме
   превращается в ряд с прокруткой, а кнопки по краям двигают его на одну
   карточку. На сенсорных экранах ряд листается пальцем, поэтому кнопки
   там скрыты — они бы только закрывали товар. */

.prec__scroller { position: relative; }

.prec__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .96); box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  font-size: 20px; line-height: 26px; color: #222; cursor: pointer;
}

.prec__arrow--prev { left: -6px; }
.prec__arrow--next { right: -6px; }
.prec__arrow[hidden] { display: none; }

.prec--compact .prec__grid {
  display: flex; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.prec--compact .prec__grid::-webkit-scrollbar { display: none; }

.prec--compact .prec-card {
  flex: 0 0 calc(33.333% - 7px); scroll-snap-align: start;
}

@media (hover: none) {
  .prec__arrow { display: none; }
}