/* ====================================================================
   PERFECTO CUSTOM WISHLIST CARDS
   ==================================================================== */

.pf-wishlist-page { max-width: 1400px; margin: 0 auto; padding: 60px 20px 100px; }

/* The Grid */
.pf-custom-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* The Card Wrapper */
.pf-wishlist-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pf-wishlist-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    transform: translateY(-5px);
}

/* ==============================================================
   PREMIUM HEART TOGGLE UI
   ============================================================== */

.pf-wishlist-remove-btn {
    position: absolute;
    top: 15px; right: 15px;
    z-index: 100;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #d63031; /* Controls the SVG Fill/Stroke */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Default State: Solid Red */
.pf-wishlist-remove-btn svg {
    fill: #d63031;
    stroke: #d63031;
    transition: all 0.2s ease;
}

/* HOVER STATE: Heart becomes empty and black (Indicates REMOVE) */
.pf-wishlist-remove-btn:hover {
    color: #111; 
}
.pf-wishlist-remove-btn:hover svg {
    fill: transparent !important;
    stroke: #111 !important;
    transform: scale(0.9); /* Slight shrink creates a tactile feel */
}

/* Loading State: Hides icon and shows spinner */
.pf-wishlist-remove-btn.is-loading svg { display: none; }
.pf-wishlist-remove-btn.is-loading::after {
    content: '';
    display: block;
    width: 14px; height: 14px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: #111;
    border-radius: 50%;
    animation: pf-spin 0.6s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Image */
.pf-card-img { aspect-ratio: 4 / 5; overflow: hidden; background: #f5f5f5; }
.pf-card-img img { width: 100%; height: 100%; object-fit: cover; }

/* Info */
.pf-card-info { padding: 20px; text-align: center; }
.pf-card-title { display: block; font-size: 16px; font-weight: 600; color: #111; margin-bottom: 8px; text-decoration: none; }
.pf-card-price { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 15px; }

/* 2. Standard Add to Cart Button UI */
.pf-btn-add-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #111;
    color: #fff;
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

/* Button Hover State */
.pf-btn-add-cart:hover { 
    background: #d63031; 
    color: #fff; 
}

/* 3. AJAX LOADING STATE (Shows Spinner Only) */
.pf-btn-add-cart.loading {
    pointer-events: none; /* Stops double-clicking */
    color: transparent !important; /* Hides text temporarily */
}

/* The Spinner */
.pf-btn-add-cart.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px; 
    height: 16px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pf-spin 0.6s linear infinite;
}

/* ==============================================================
   5. NUKE WOOCOMMERCE DEFAULT GREEN SUCCESS STATE
   ============================================================== */

/* Forces the button to stay Black after adding */
.pf-wishlist-card .pf-btn-add-cart.added {
    background: #111 !important; 
    color: #fff !important; 
    border: #111 !important; 

}

/* Keeps the Red hover effect working after adding */
.pf-wishlist-card .pf-btn-add-cart.added:hover {
    background: #d63031 !important; 
        border: #111 !important; 

}


/* Empty State */
.pf-empty-state { text-align: center; padding: 100px 0; }
.pf-btn-primary { display: inline-block; background: #111; color: #fff; padding: 12px 30px; font-weight: 700; text-decoration: none; border-radius: 4px; }

/* Responsive */
@media (max-width: 1024px) { .pf-custom-wishlist-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .pf-custom-wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } }