/* ============================================================
   product-cards.css — обложка-карточка ПРОДУКТА (фон + затемнение + текст поверх).
   Тот же приём, что у карточек статей блога (.cover-card): картинка фоном всей
   карточки, нижний градиент-скрим для читаемости, контент над фоном (z-index:1).

   Применяется через модификатор .pcard.has-cover (его ставит prices.js на десктопе
   и mobile-home.js на мобиле, когда у продукта есть обложка). Без обложки .pcard
   остаётся как раньше (тёмная карточка + иконка-заглушка). style.css не трогаем.

   Подключается на index.html и prices.html. Десктоп-логику не меняет — только КАК
   показывается картинка.
   ============================================================ */

/* Обложка — фон на всю площадь карточки (cover), скругление наследуется от .pcard. */
.pcard.has-cover{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0f1113;        /* подложка, если у картинки есть прозрачность */
}

/* Затемнение снизу — чтобы белый текст читался на любой обложке (как .cc-scrim в блоге). */
.pcard.has-cover::before{
  /* z-index:1 — скрим должен лежать НАД .pc-img (z-index:0). Псевдоэлемент идёт
     первым в порядке отрисовки, поэтому равного z-index тут недостаточно.
     Текстовые слои ниже тоже z-index:1, но они дальше по DOM и рисуются поверх. */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(10,11,13,.94) 0%,
    rgba(10,11,13,.6) 42%,
    rgba(10,11,13,.1) 74%,
    rgba(10,11,13,0) 100%);
}

/* Мелкий значок-уголок не нужен — обложка уже несёт бренд. */
.pcard.has-cover .pc-icon{display:none}

/* Текстовый слой: название + описание ПОВЕРХ нижнего градиента-скрима — читается
   на любом арте (низ затемнён до .94, верхние ~60% обложки остаются чистыми).
   Описание клампится в 2 строки, чтобы не наезжать на цену/кнопку (.pc-foot ниже). */
.pcard.has-cover .pc-body{position:relative;z-index:1}
.pcard.has-cover .pc-body h3{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.pcard.has-cover .pc-body p{
  color:rgba(255,255,255,.78);text-shadow:0 1px 6px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* «Название уже на картинке» (Product.title_on_cover, чекбокс в админке):
   текст не выводим — только арт, статус, цена и кнопка. Класс ставит prices.js. */
.pcard.has-cover.title-on-art .pc-body{display:none}

/* Плашка статуса (pc-top) и цена (pc-foot) — поверх скрима. */
.pcard.has-cover .pc-top,
.pcard.has-cover .pc-foot{position:relative;z-index:1}

/* Цена белым с тенью — читаемо поверх картинки. */
.pcard.has-cover .price{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pcard.has-cover .price small{color:rgba(255,255,255,.8)}