/* ===========================================================================
   VKLADOVKE — 20-card: the product card (oct_promo look)
   Owned by the promo-card agent. Spec: DESIGN_SPEC.md §3.
   Markup: catalog/view/template/product/thumb.twig
     .product-thumb.pr-module-item.content-block
   NOTE: legacy vkladovke-skin.css still loads before this file and styles
   .product-thumb — every rule here that doubles a skin rule exists to win
   that override (higher specificity, later order). Its .image/.description/
   .button/.price-old selectors are dead: the new markup dropped those classes.
   =========================================================================== */

.product-thumb.pr-module-item{
  display:flex;flex-direction:column;position:relative;
  background:var(--pr-white);
  border:0;border-radius:var(--pr-radius-card);
  padding:16px;height:100%;overflow:hidden;
  box-shadow:none;
  transition:box-shadow var(--pr-main-transition);
}
.product-thumb.pr-module-item:hover{
  transform:none;border-color:transparent;
  box-shadow:0 2px 24px 0 rgba(37,38,39,.12);
}

/* --- top: stickers / image / stock+model row ----------------------------- */
.pr-module-item-top{position:relative;display:flex;flex-direction:column}

.pr-module-item-stickers-box{
  position:absolute;top:0;left:0;width:100%;
  display:flex;justify-content:space-between;gap:4px;z-index:2;pointer-events:none;
}
.pr-module-item-stickers{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;margin-left:auto}
.pr-module-item-sticker{
  border-radius:var(--pr-radius-pill);padding:0 4px;
  font-size:12px;line-height:18px;font-weight:500;color:#fff;white-space:nowrap;
}
.pr-module-item-sticker.st-hit{background:#f5a623}      /* the golden «Хіт» (vk_hits) */
.pr-module-item-sticker.st-sale{background:var(--pr-red-color)}
.pr-module-item-sticker.st-new{background:var(--pr-blue-color)}

.pr-module-item-image{
  position:relative;margin:24px 0 12px;min-height:200px;
  display:flex;align-items:center;justify-content:center;
}
.pr-module-item-image a{display:flex;align-items:center;justify-content:center;width:100%}
.pr-module-item-image img{
  max-width:200px;max-height:200px;width:auto;height:auto;object-fit:contain;
  transition:transform var(--pr-main-transition);
}
.product-thumb.pr-module-item:hover .pr-module-item-image img{transform:translateY(-4px)}
/* no-image state: neutral icon block, same footprint as a photo */
.pr-noimg{
  width:200px;height:200px;max-width:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--pr-bg);border-radius:var(--pr-radius-ctl);
  color:var(--pr-grey-color);font-size:48px;
}

/* hover-revealed icon buttons (wishlist / compare) */
.pr-module-item-buttons{
  position:absolute;top:0;right:0;z-index:3;
  opacity:0;visibility:hidden;
  transition:opacity var(--pr-main-transition),visibility var(--pr-main-transition);
}
.product-thumb.pr-module-item:hover .pr-module-item-buttons,
.pr-module-item-buttons:focus-within{opacity:1;visibility:visible}
@media (hover:none){.pr-module-item-buttons{opacity:1;visibility:visible}}
.pr-module-item-buttons form{display:flex;flex-direction:column;gap:8px;margin:0}
.pr-module-item-buttons .button-light{
  width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pr-bg);border:0;border-radius:var(--pr-radius-ctl);padding:0;
  color:var(--pr-primary-dark-color);font-size:12px;cursor:pointer;
  transition:background-color var(--pr-main-transition);
}
.pr-module-item-buttons .button-light:hover{background:var(--pr-light-grey-color);color:var(--pr-primary-dark-color)}

.pr-module-item-info{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;line-height:18px;min-height:19px;
}
.pr-module-item-info .vk-pill{white-space:nowrap;flex:0 0 auto}
.grey-text{color:var(--pr-grey-color)}
.pr-module-item-model{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- bottom: title / rating / price / cart -------------------------------- */
.pr-module-item-bottom{display:flex;flex-direction:column;gap:12px;margin-top:12px;flex-grow:1}

.pr-module-item-title{
  font-size:14px;line-height:17.5px;font-weight:600;
  color:var(--pr-dark-text-color);min-height:35px;
}
.pr-module-item-title:hover{color:var(--pr-primary-dark-color)}

.pr-module-item-rating{display:flex;align-items:center;gap:2px;font-size:12px;color:#d9dde3}
.pr-module-item-rating .fa-star.on{color:var(--pr-yellow-color)}
.pr-rating-count{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--pr-grey-color)}

/* specs are list-view only (grid card has no room — spec §3) */
.pr-module-item .vk-specs{
  display:none;margin:0;padding:0;list-style:none;
  font-size:12px;line-height:18px;color:var(--pr-dark-grey-color);
}
.pr-module-item .vk-specs .sn{color:var(--pr-grey-color)}

.pr-module-item-price-box{margin-top:auto}
.pr-price-old-row{display:flex;align-items:center;gap:8px}
.pr-price-old{font-size:14px;line-height:21px;color:var(--pr-grey-color);text-decoration:line-through}
.pr-discount-pill{
  background:var(--pr-red-color);color:#fff;border-radius:var(--pr-radius-pill);
  padding:0 4px;font-size:12px;line-height:18px;font-weight:600;
}
.pr-price{font-size:20px;line-height:30px;font-weight:700;color:var(--pr-dark-text-color)}
.pr-price.sale{color:var(--pr-red-color)}

.pr-cart-form{margin:0}
.pr-add-to-cart{font-size:14px}
.pr-add-to-cart .fa-cart-shopping{font-size:16px}

/* --- mobile: the card goes horizontal (reference home-390) ---------------- */
@media (max-width:575.98px){
  .product-thumb.pr-module-item{
    display:grid;grid-template-columns:44% 1fr;column-gap:12px;padding:12px;
  }
  .pr-module-item-top{min-width:0}
  .pr-module-item-image{margin:20px 0 8px;min-height:140px}
  .pr-module-item-image img{max-width:140px;max-height:140px}
  .pr-module-item-buttons{right:auto;left:-4px}
  .pr-module-item-info{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .pr-module-item-bottom{margin-top:20px;min-width:0}
}