/*
 * Wishlist — Mes Favoris — Feuille de style dédiée
 *
 * @file        assets/css/wishlist.css
 * @package     LovelyLili
 * @version     1.1.0
 * @guide-step  Étape 8 — Pages custom (hors WooCommerce)
 * @depends     assets/css/main.css      (tokens CSS — chargé avant)
 *              assets/css/woocommerce.css (cards produit — chargé en même temps)
 * @used-by     inc/setup.php — enqueue conditionnel sur is_page('wishlist')
 *
 * Organisation :
 *   1. Breadcrumb (avant le hero)
 *   2. Hero — modificateur wishlist
 *   3. Corps de page
 *   4. Action bar
 *   5. Grille produits
 *   6. Footer / CTA retour boutique
 *   7. État vide
 *   8. Toast notification
 *   9. Responsive — mobile (≤ 768px)
 *
 * RÈGLE ABSOLUE : aucune valeur en dur — uniquement var(--*) de main.css
 */

/* ====================================================================
   1. BREADCRUMB — Zone avant le hero
   ==================================================================== */

.ll-wishlist-page__breadcrumb {
    padding-top: var(--space-lg);
    padding-bottom: 0;
}

/* ====================================================================
   2. HERO — MODIFICATEUR WISHLIST
   Étend [class*="ll-page-header--"] défini dans main.css.
   ==================================================================== */

.ll-page-header--wishlist {
    background: linear-gradient(
        145deg,
        var(--rose-50)    0%,
        var(--warm-white) 55%,
        var(--gold-50)    100%
    );
    padding-top: var(--space-xl);
    padding-bottom: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

/* Décoration floue en arrière-plan */
.ll-page-header--wishlist::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rose-100) 0%, transparent 70%);
    top: -140px;
    right: -80px;
    pointer-events: none;
    z-index: 0;
}

.ll-page-header--wishlist .ll-container {
    position: relative;
    z-index: 1;
}

.ll-page-header--wishlist .ll-page-header__subtitle {
    font-size: 15px;
    font-style: italic;
    margin-bottom: 0;
}

/* ====================================================================
   3. CORPS DE PAGE
   ==================================================================== */

.ll-wishlist-page__body {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-3xl, 96px);
}

/* ====================================================================
   4. ACTION BAR — "Tout effacer" aligné à droite
   ==================================================================== */

.ll-wishlist-page__bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.ll-wishlist-page__clear-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--border);
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.ll-wishlist-page__clear-all:hover {
    color: var(--rose-700);
    text-decoration-color: var(--rose-300);
}

.ll-wishlist-page__clear-all svg {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.ll-wishlist-page__clear-all:hover svg {
    opacity: 1;
}

/* ====================================================================
   5. GRILLE PRODUITS
   Alignée sur la PLP : 4 colonnes desktop → 2 colonnes mobile
   ==================================================================== */

.ll-wishlist-page__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

.ll-wishlist-page__item {
    display: block;
    min-width: 0;
}

/* ====================================================================
   6. FOOTER — CTA "Continuer mes achats"
   ==================================================================== */

.ll-wishlist-page__footer {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
}

/* ====================================================================
   7. ÉTAT VIDE
   ==================================================================== */

.ll-wishlist-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3xl, 96px) var(--space-lg);
    gap: var(--space-md);
    background: linear-gradient(135deg, var(--rose-50) 0%, var(--gold-50) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.ll-wishlist-page__empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--rose-100);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    margin-bottom: var(--space-sm);
    color: var(--rose-300);
}

.ll-wishlist-page__empty-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 0;
}

.ll-wishlist-page__empty-text {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 340px;
    line-height: 1.65;
    font-weight: 300;
    margin-bottom: var(--space-sm);
}

/* ====================================================================
   8. TOAST NOTIFICATION
   ==================================================================== */

.ll-wishlist-toast {
    position: fixed;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 24px));
    background: var(--text-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-hover);
    z-index: 9999;
    white-space: nowrap;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.ll-wishlist-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.ll-wishlist-toast--error {
    background: var(--rose-700);
}

/* ====================================================================
   9. RESPONSIVE
   ==================================================================== */

/* Tablet (≤ 1024px) : 3 colonnes */
@media (max-width: 1024px) {
    .ll-wishlist-page__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {

    /* Breadcrumb */
    .ll-wishlist-page__breadcrumb {
        padding-top: var(--space-md);
    }

    /* Hero */
    .ll-page-header--wishlist {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-xl);
    }

    .ll-page-header--wishlist::before {
        width: 260px;
        height: 260px;
        top: -80px;
        right: -60px;
    }

    /* Corps */
    .ll-wishlist-page__body {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-2xl);
    }

    /* Action bar */
    .ll-wishlist-page__bar {
        margin-bottom: var(--space-lg);
    }

    /* Grille : 2 colonnes — identique à la PLP mobile */
    .ll-wishlist-page__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Footer */
    .ll-wishlist-page__footer {
        margin-top: var(--space-xl);
        padding-top: var(--space-lg);
    }

    /* État vide */
    .ll-wishlist-page__empty {
        padding: var(--space-2xl) var(--space-md);
        border-radius: var(--radius-lg);
    }

    .ll-wishlist-page__empty-icon {
        width: 64px;
        height: 64px;
    }

    /* Toast */
    .ll-wishlist-toast {
        bottom: var(--space-md);
        font-size: 13px;
        padding: 10px 20px;
        max-width: calc(100vw - 48px);
        white-space: normal;
        text-align: center;
    }
}

/* Très petits écrans (≤ 380px) */
@media (max-width: 380px) {
    .ll-wishlist-page__grid {
        gap: var(--space-sm);
    }
}