/* =====================================================
   PIPRO STORE PREMIUM CSS
===================================================== */

:root {
    --pipro-dark: #0f0a06;
    --pipro-brown: #2d1b0f;
    --pipro-gold: #c4a77d;
    --pipro-green: #3aada0;
    --pipro-light: #f8f6f3;
}


/* ==============================
   BODY STORE
============================== */

.store-page {
    background: #fff;
    overflow-x: hidden;
}


/* ==============================
   HERO
============================== */

.store-hero {
    position: relative;
}

.store-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(196,167,125,.25), transparent 35%);
    pointer-events: none;
}

.store-label {
    display: inline-block;
    color: var(--pipro-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: .85rem;
    font-weight: 600;
}


/* ==============================
   BOUTONS HERO
   (manquaient entièrement dans le CSS d'origine,
   ce qui laissait les boutons sans style)
============================== */

.store-btn-primary,
.store-btn-outline {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 14px;
    font-weight: 600;
    transition: all .35s ease;
    text-decoration: none;
}

.store-btn-primary {
    background: var(--pipro-gold);
    color: var(--pipro-brown);
}

.store-btn-primary:hover {
    transform: translateY(-3px);
    filter: brightness(.92);
}

.store-btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
}

.store-btn-outline:hover {
    background: rgba(255,255,255,.1);
    transform: translateY(-3px);
}


/* ==============================
   CATÉGORIES (boutons - non utilisés
   dans la version fusionnée mais gardés
   au cas où vous en ayez encore ailleurs)
============================== */

.category-btn {
    padding: .6rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--pipro-gold);
    color: var(--pipro-brown);
    background: transparent;
    font-weight: 500;
    transition: all .3s ease;
    cursor: pointer;
}

.category-btn:hover,
.category-btn.active {
    background: var(--pipro-gold);
    color: #fff;
}


/* ==============================
   BARRE DE RECHERCHE
============================== */

.store-search-box {
    max-width: 720px;
    margin: 0 auto;
}

.store-search {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e0da;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    outline: none;
    transition: all .3s ease;
}

.store-search:focus {
    border-color: var(--pipro-gold);
    box-shadow: 0 0 0 4px rgba(196,167,125,.2);
}


/* ==============================
   PRODUCT CARDS
============================== */

.product-card {
    position: relative;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.05);
    transition: transform .45s ease, box-shadow .45s ease;
    animation: fadeProduct .6s ease both;
}

.product-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0,0,0,.15);
}

.product-image {
    position: relative;
    height: 15rem;
    overflow: hidden;
    background: #f3f1ee;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.product-card:hover .product-image img {
    transform: scale(1.12);
}

.product-content {
    padding: 1.5rem;
}

.product-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pipro-brown);
    margin-bottom: .5rem;
}

.product-content p {
    color: #6b6b6b;
    font-size: .9rem;
    margin-bottom: 1rem;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--pipro-brown);
    margin-bottom: .75rem;
}


/* ==============================
   BADGES
   -----------------------------------------------------
   BUG CORRIGÉ : le HTML utilise class="badge available"
   / class="badge order" (2 classes séparées par un
   espace), mais l'ancien CSS ciblait .badge-available /
   .badge-order (une seule classe avec tiret) → les
   badges n'étaient donc JAMAIS colorés. On cible
   maintenant .badge.available et .badge.order.
============================== */

.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.badge.available {
    background: rgba(34,197,94,.15);
    color: #16a34a;
}

.badge.order {
    background: rgba(234,179,8,.15);
    color: #ca8a04;
}


/* ==============================
   BOUTONS PRODUIT (Voir / Panier)
============================== */

.store-btn {
    padding: .75rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    transition: all .3s ease;
    cursor: pointer;
    border: none;
}

.store-btn-ghost {
    background: transparent;
    border: 1px solid var(--pipro-gold);
    color: var(--pipro-brown);
}

.store-btn-ghost:hover {
    background: var(--pipro-gold);
    color: #fff;
}

.add-cart {
    background: var(--pipro-brown);
    color: #fff;
}

.add-cart:hover {
    background: #5e3f2a;
}

.quote-product {
    display: block;
    text-align: center;
    margin-top: 1rem;
    background: #16a34a;
    color: #fff;
    padding: .8rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: background .3s ease;
}

.quote-product:hover {
    background: #15803d;
}


/* ==============================
   MODAL
============================== */

#productModal {
    backdrop-filter: blur(12px);
}

#productModal > div {
    animation: modalShow .4s ease;
}

@keyframes modalShow {
    from { opacity: 0; transform: translateY(40px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ==============================
   CART SIDEBAR
============================== */

#cartSidebar {
    box-shadow: -20px 0 60px rgba(0,0,0,.2);
}

#cartSidebar h2 {
    font-family: Galgony, serif;
}

#cartItems > div {
    transition: all .3s ease;
}

#cartItems > div:hover {
    background: #faf7f2;
    transform: translateX(-5px);
}

#cartItems::-webkit-scrollbar {
    width: 6px;
}

#cartItems::-webkit-scrollbar-thumb {
    background: var(--pipro-gold);
    border-radius: 20px;
}


/* ==============================
   ANIMATION APPARITION
============================== */

@keyframes fadeProduct {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ==============================
   PANIER FLOTTANT
   Toujours visible en bas à droite, avec
   compteur temps réel et animation au clic/ajout.
============================== */

.floating-cart {
    position: fixed;
    bottom: 28px;
    left: 28px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pipro-brown);
    color: #fff;
    font-size: 1.6rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(45,27,15,.35);
    z-index: 90;
    transition: transform .3s ease, box-shadow .3s ease;
}

.floating-cart:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 18px 40px rgba(45,27,15,.45);
}

.floating-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: #e11d48;
    color: #fff;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.floating-cart-badge.bump {
    animation: bumpBadge .4s ease;
}

@keyframes bumpBadge {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}


/* ==============================
   BOUTON FERMER LE PANIER (sidebar)
============================== */

.cart-close-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #f3f1ee;
    border: none;
    color: var(--pipro-brown);
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .3s ease;
}

.cart-close-btn:hover {
    background: #e8e3dc;
}


/* ==============================
   TOASTS / NOTIFICATIONS
============================== */

.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.toast {
    background: #1f2937;
    color: #fff;
    padding: .9rem 1.4rem;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    animation: toastIn .35s ease, toastOut .4s ease 2.6s forwards;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.toast.success { background: #15803d; }
.toast.info { background: #2d1b0f; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateX(40px); }
}


/* ==============================
   FAVORIS (wishlist)
============================== */

.wishlist-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    border: none;
    font-size: 1.1rem;
    color: var(--pipro-brown);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: transform .25s ease, color .25s ease;
}

.wishlist-btn:hover {
    transform: scale(1.12);
}

.wishlist-btn.active {
    color: #e11d48;
}


/* ==============================
   REVEAL AU SCROLL
   (remplace l'animation fadeProduct qui se
   jouait immédiatement au chargement — désormais
   les cartes apparaissent au fil du scroll,
   ce qui rend la page plus vivante)
============================== */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
    animation: none;
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}


/* ==============================
   FILTRES STICKY AU SCROLL
============================== */

.filters-sticky {
    position: sticky;
    top: 0;
    z-index: 40;
    transition: box-shadow .3s ease;
}

.filters-sticky.scrolled {
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}


/* ==============================
   QUANTITÉ PANIER (+/-)
============================== */

.qty-control {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.qty-control button {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid #e5e0da;
    background: #fff;
    cursor: pointer;
    font-weight: 700;
    color: var(--pipro-brown);
}

.qty-control button:hover {
    background: var(--pipro-gold);
    color: #fff;
}


/* ==============================
   CORRECTIF LISIBILITÉ
   -----------------------------------------------------
   Si le thème global du site (header.php) définit le
   texte en blanc (thème sombre), tout texte non stylé
   hérite de ce blanc et devient invisible sur les fonds
   clairs de la boutique (recherche, cartes produits,
   panier, modal). On force ici une couleur lisible,
   avec une spécificité suffisante pour passer devant
   l'héritage global.
============================== */

#catalogue,
#catalogue *,
#products,
#products *,
#cartSidebar,
#cartSidebar *,
#productModal,
#productModal * {
    color: var(--pipro-brown);
}

/* on restaure ensuite les exceptions volontaires
   (texte blanc sur fond coloré, gris pour les
   descriptions, couleurs des badges, etc.) */

.store-btn-primary { color: var(--pipro-brown) !important; }
.store-btn-outline { color: #fff !important; }

.product-content p { color: #6b6b6b !important; }
#modalDescription { color: #6b6b6b !important; }

.badge.available { color: #16a34a !important; }
.badge.order { color: #ca8a04 !important; }

.add-cart { color: #fff !important; }
.quote-product { color: #fff !important; }
.wishlist-btn { color: var(--pipro-brown) !important; }
.wishlist-btn.active { color: #e11d48 !important; }

#cartSidebar .text-red-500 { color: #ef4444 !important; }
#cartItems .text-gray-500 { color: #6b7280 !important; }

.store-search,
.store-search-box label {
    color: var(--pipro-brown);
}

.store-search::placeholder {
    color: #9c9187;
}


/* ==============================
   MOBILE
============================== */

@media (max-width: 768px) {

    .product-card {
        border-radius: 20px;
    }

    .product-content h3 {
        font-size: 1.1rem;
    }

    #cartSidebar {
        width: 100%;
    }

}

.product-card.reveal {
    opacity:1 !important;
    transform:none !important;
}