:root{
  --accent:#06B6D4;--accent-700:#0891B2;--bg:#F8FAFC;--panel:#FFFFFF;
  --text:#0F172A;--muted:#64748B;--line:#E2E8F0;--success:#22C55E;--danger:#EF4444;
  --radius:16px;--shadow:0 6px 24px rgba(2,6,23,.08);
}

  .container{width:min(var(--container),100%);margin-inline:auto;padding:0 16px}

/* CARD */
.product-card-pro{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
  will-change:transform;
}
.product-card-pro:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(2,6,23,.12);
}

/* IMAGE AREA */
.product-image-pro{
  position:relative;
  aspect-ratio:4/3;                 /* стабільне співвідношення для сітки */
  background:var(--bg);
  overflow:hidden;
}
.product-image-pro img{
  width:100%;height:100%;object-fit:contain;display:block;
  transform:scale(1.001);transition:transform .25s ease;
}
.product-card-pro:hover .product-image-pro img{ transform:scale(1.03); }

/* DISCOUNT BADGE (ви підставляєте {discount_badge}) */
.badge-discount-pro{
  position:absolute;top:10px;left:10px;
  background:var(--danger);color:#fff;font-weight:800;font-size:12px;
  padding:6px 10px;border-radius:999px;
}

/* WISHLIST */
.wishlist-btn-pro{
  position:absolute;top:10px;right:10px;
  appearance:none;border:1px solid var(--line);background:#fff;
  color:#111;border-radius:999px;width:34px;height:34px;line-height:32px;
  text-align:center;cursor:pointer;font-size:16px;
  transition:background .15s,border-color .15s,transform .08s;
}
.wishlist-btn-pro:hover{ border-color:var(--accent); }
.wishlist-btn-pro:active{ transform:scale(.96); }
.wishlist-btn-pro.is-active{ background:var(--accent);border-color:var(--accent);color:#fff; }
.wishlist-btn-pro:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* BODY */
.product-info-pro{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.product-articul{ font-size:12px; color:var(--muted); }
.product-title-pro{
  margin:2px 0 0; font-size:18px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-info-pro > a{ text-decoration:none; color:inherit; }
.product-info-pro > a:hover .product-title-pro{ color:var(--accent); }

.product-desc-pro{
  color:#111827; opacity:.9; font-size:14px; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:38px;
}

/* BOTTOM ROW */
.product-bottom-pro{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.price-box-pro{ display:flex; align-items:baseline; gap:8px; }
.old-price-pro{ color:var(--muted); text-decoration:line-through; }
.old-price-pro:empty{ display:none; }            /* якщо стара ціна порожня — не показуємо */
.price-pro{ font-weight:800; font-size:18px; color:#0f172a; }

/* Кнопка(и) з {button_html}: охоплюємо найтиповіші варіанти розмітки */
.product-bottom-pro .btn,
.product-bottom-pro .button,
.product-bottom-pro button,
.product-bottom-pro a.button,
.product-bottom-pro a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 12px; border-radius:12px; text-decoration:none;
  border:1px solid var(--accent); background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
  transition:filter .15s, transform .08s;
}
.product-bottom-pro .btn:hover,
.product-bottom-pro .button:hover,
.product-bottom-pro button:hover,
.product-bottom-pro a.button:hover,
.product-bottom-pro a.btn:hover{
  filter:brightness(.95);
}
.product-bottom-pro .btn:active,
.product-bottom-pro .button:active,
.product-bottom-pro button:active,
.product-bottom-pro a.button:active,
.product-bottom-pro a.btn:active{
  transform:translateY(1px);
}

/* Додатково: якщо у {button_html} є “вже в кошику” (secondary) — стилізуємо як ghost */
.product-bottom-pro .btn--ghost,
.product-bottom-pro .button--ghost{
  background:#fff; color:var(--accent); border-color:var(--accent);
}
.product-bottom-pro .btn--ghost:hover,
.product-bottom-pro .button--ghost:hover{ background:#ecfeff; }