/* ──────────────────────────────────────────────────────────────────────────
 * Product page styles.
 *
 * Audit item C5: extracted from inline <style> in product.php so the
 * rules can be browser-cached, served gzipped, and reviewed in one
 * place.  Page-level product.php now only emits unique runtime values
 * via style="..." attributes; everything reusable lives here.
 * ────────────────────────────────────────────────────────────────────────── */

/* Heart button used by the wishlist CTA in the product title area. */
.btn-wishlist {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
    flex-shrink: 0;
}
.btn-wishlist:hover { border-color: #e91e63; }
.btn-wishlist.active { background: #fff0f5; border-color: #e91e63; }
.btn-wishlist.active #wishHeart { fill: #e91e63; stroke: #e91e63; }

/* WhatsApp inquiry CTA on the product page. */
.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    transition: background 0.2s, transform 0.2s;
}
.btn-whatsapp:hover { background: #128C7E; transform: translateY(-1px); }