/* ==========================================================================
   NadPoint — shared product card
   Styles the output of includes/homepage/templates/cards/_product-card.php.
   That partial is used well beyond the homepage now (shop/category/search
   grids, cart cross-sell, the vendor storefront, the 404 page's "recently
   added" strip), so its CSS lives here and is enqueued globally rather than
   only alongside the homepage — previously this was bundled into
   homepage.css and only loaded on the front page, which meant every one of
   those other pages' product cards were rendering unstyled.
   ========================================================================== */

.ndp-section-empty { color: #999; padding: 30px 0; text-align: center; }

.ndp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.ndp-product-card { display: block; text-decoration: none; color: #1b3022; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: transform 0.25s, box-shadow 0.25s; }
.ndp-product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.1); }
.ndp-product-card-img { position: relative; aspect-ratio: 1/1; background: #f5f5f5; }
.ndp-product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ndp-product-card-img .no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 2rem; }
.ndp-flash-badge { position: absolute; top: 8px; left: 8px; background: #e63946; color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.ndp-product-card-body { padding: 12px 14px; }
.ndp-product-card-body h4 { font-size: 0.88rem; margin: 0 0 6px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndp-product-card-price { font-weight: 700; color: #c59b27; font-size: 0.95rem; }
.ndp-product-card-price del { color: #999; font-weight: 400; font-size: 0.82rem; margin-left: 6px; }

/* ── Card enhancements: wishlist heart, quick-add, badges, vendor/rating ── */
.ndp-product-card-wrap { position: relative; }
.ndp-product-card.is-out-of-stock .ndp-product-card-img img,
.ndp-product-card.is-out-of-stock .ndp-product-card-img picture { opacity: 0.5; }
.ndp-discount-badge { position: absolute; top: 8px; left: 8px; background: #1b3022; color: #fff; font-size: 0.7rem; font-weight: 800; padding: 3px 8px; border-radius: 20px; }
.ndp-outofstock-ribbon { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(17,24,39,0.85); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.ndp-card-wishlist-btn {
    position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.92); border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.9rem;
    cursor: pointer; transition: transform 0.15s, color 0.15s; z-index: 2;
}
.ndp-card-wishlist-btn:hover { transform: scale(1.1); color: #e63946; }
.ndp-card-wishlist-btn.is-active { color: #e63946; }
.ndp-card-quick-add-btn {
    position: absolute; left: 10px; right: 10px; bottom: 10px; background: #1b3022; color: #fff; border: none;
    border-radius: 8px; padding: 8px 10px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s, background 0.2s; z-index: 2;
}
.ndp-card-quick-add-btn:hover { background: #c59b27; }
.ndp-card-quick-add-btn.is-added { background: #10b981; }
.ndp-product-card-wrap:hover .ndp-card-quick-add-btn { opacity: 1; transform: translateY(0); }
@media (hover: none) {
    /* Touch devices can't hover — keep the button reachable rather than hidden forever */
    .ndp-card-quick-add-btn { opacity: 1; transform: none; position: static; margin-top: 8px; width: 100%; }
}
.ndp-product-card-vendor { display: block; font-size: 0.72rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.ndp-product-card-rating { font-size: 0.78rem; color: #f59e0b; font-weight: 600; margin: 2px 0 6px; }
.ndp-product-card-rating-count { color: #9ca3af; font-weight: 400; }