/* Shared product-card grid.
   Lifted from brand.php so search-result.php (and any future listing page) renders
   products identically instead of each page inventing its own card markup.
   brand.php / category.php still carry their own copy of these rules inline. */

.qbp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--q-space-4);
}
@media (max-width: 1400px) { .qbp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .qbp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .qbp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--q-space-3); } }
@media (max-width: 480px)  { .qbp-grid { grid-template-columns: 1fr; } }

/* =================== CARD =================== */
.qbp-card {
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-lg);
  background: var(--q-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--q-transition), transform var(--q-transition);
}
.qbp-card:hover { box-shadow: var(--q-shadow-md); transform: translateY(-4px); }

.qbp-brand-logo { text-align: center; padding: 10px 0 0; }
.qbp-brand-logo img { max-height: 28px; max-width: 90px; object-fit: contain; }

.qbp-image-wrapper {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--q-space-3);
  position: relative;
  overflow: hidden;
}
.qbp-image-wrapper::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, transparent 60%, var(--q-surface) 100%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}
.qbp-card:hover .qbp-image-wrapper::after { opacity: 1; }
.qbp-image-wrapper img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform 350ms ease; }
.qbp-card:hover .qbp-image-wrapper img { transform: scale(1.06); }

.qbp-body { padding: var(--q-space-4); text-align: center; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* Clamped to a fixed 2-line height so a short name and a long name leave their card's
   badge/price/icons row at the exact same vertical position — a long product name used to
   push everything below it down, making the NEW badges (and buy buttons) in the same row
   of cards land at different heights ("staircase" look). */
.qbp-title { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; min-height: 2.7em; }
.qbp-title a {
    color: var(--q-text); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qbp-title a:hover { color: var(--q-primary); }

.qbp-meta {
    font-size: 12.5px; color: var(--q-text-muted); line-height: 1.4; min-height: 1.4em;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.qbp-spec { font-size: 12.5px; color: var(--q-text-muted); line-height: 1.4; word-break: break-word; }

.qbp-price { color: var(--q-success); font-weight: 700; font-size: 16px; }
.qbp-old-price { color: var(--q-text-faint); text-decoration: line-through; font-size: 13px; margin-left: 4px; }
.qbp-vat { font-size: 11px; color: var(--q-text-muted); }
.qbp-call-for-price { color: var(--q-danger); font-weight: 700; }
.qbp-coming-soon { color: var(--q-warning); font-weight: 700; }

.qbp-icons { display: flex; justify-content: center; gap: var(--q-space-4); margin-top: auto; }
.qbp-icon-btn {
  font-size: 17px; color: var(--q-primary); width: 36px; height: 36px;
  border-radius: 50%; background: var(--q-primary-tint);
  display: flex; align-items: center; justify-content: center;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  text-decoration: none; border: none; cursor: pointer;
}
.qbp-icon-btn:hover { background: var(--q-primary); color: #fff; text-decoration: none; transform: translateY(-2px); }

.qbp-empty { text-align: center; padding: var(--q-space-16) 0; color: var(--q-text-muted); grid-column: 1/-1; }