/* ============================================================
   Product Card Component Styles
   Replaces inline style="" attributes in:
     - Views/Shared/_ProductItem.cshtml
   Depends on: tokens.css (CSS custom properties)
   ============================================================ */

/* ── Stock / sale badges ────────────────────────────────────── */
.badge-stock-in {
  background-color: var(--color-success);
  color: var(--color-white);
}

.badge-stock-out {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.badge-sale {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.badge-new {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}

/* ── Product image hover effect ────────────────────────────── */
.product-img-hover-wrap {
  overflow: hidden;
}

.product-img-hover-wrap img {
  transition: transform var(--transition-slow);
}

.product-img-hover-wrap:hover img {
  transform: scale(1.05);
}

/* ── Disabled (out-of-stock) card overlay ──────────────────── */
.product-out-of-stock-label {
  opacity: 0.65;
}

/* ── CSS-only no-image placeholder (zero network requests) ──── */
.product-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
}

.product-no-image i {
  font-size: 64px;
  color: #ccc;
}

/* List view: constrain placeholder height */
.products-list.list .product-no-image {
  aspect-ratio: auto;
  min-height: 180px;
}

/* ── Quickview button (BS5 modal trigger) ────────────────────── */
/* Desktop: the theme CSS handles .quickview positioning & hover in .left-block */
.quickview-btn {
  cursor: pointer;
  border: none;
}

/* Mobile quickview: text link below action buttons (not an overlay) */
.quickview-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  /* Hide the overlay quickview on touch devices */
  .left-block .quickview-btn {
    display: none !important;
  }

  /* Show the inline text link instead */
  .quickview-mobile {
    display: block;
    text-align: center;
    margin-top: 6px;
  }

  .quickview-mobile .quickview-btn {
    display: inline !important;
    background: none;
    color: #F4A137;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 0;
    text-decoration: none;
    opacity: 1 !important;
    position: static !important;
  }

  .quickview-mobile .quickview-btn:active {
    color: #c47d1a;
  }
}

/* ── Ensure product items are always visible (BS5 grid handles layout) ── */
.so-listing-tabs .ltabs-items-container .ltabs-items-selected .ltabs-item {
  opacity: 1 !important;
  filter: none !important;
}