/*
Theme Name: PmonTheme Child
Template: pedicure-makeup-store
Author: Sonia
Version: 1.0
Description: Thème enfant Jewels Spirit pour Pedicure Makeup Store.
*/
/* ---------------------------------------------------------
   THEME ENFANT – JEWELS SPIRIT (IMAGES 280 × 280 PX)
   --------------------------------------------------------- */

/* =========================================================
   1 — PAGE PRODUIT : MISE EN PAGE + GALERIE 2×2
   ========================================================= */

.single-product .product {
    display: flex !important;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

.single-product .product .js-grid-gallery {
    flex: 0 0 560px;
    max-width: 560px;
}

.single-product .product .summary {
    flex: 1 1 420px;
}

/* === Galerie 2x2 === */

.js-grid-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 560px;
}

.js-grid-gallery a {
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.js-grid-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

/* =========================================================
   2 — HALO DORÉ + PAILLETTES
   ========================================================= */

.js-grid-gallery a:hover img {
    transform: scale(1.04);
    filter: brightness(1.08);
}

.js-grid-gallery a::after {
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    mix-blend-mode:screen;
    transition:opacity .35s ease;
    background-image:
        radial-gradient(rgba(255,223,128,.9) 1px, transparent 1.3px),
        radial-gradient(rgba(255,223,128,.75) 1px, transparent 1.2px),
        radial-gradient(rgba(255,223,128,.85) 1.2px, transparent 1.4px);
    background-size:26px 26px,34px 34px,46px 46px;
}

.js-grid-gallery a:hover::after {
    opacity:.55;
}

/* =========================================================
   3 — VIGNETTES DE CATÉGORIES
   ========================================================= */

ul.products li.product-category img {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

ul.products li.product-category {
    text-align: center !important;
    width: auto !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* =========================================================
   4 — PRODUITS : IMAGES CARRÉES 280×280 px (TOUTES CATÉGORIES)
   ========================================================= */

ul.products li.product img,
body.tax-product_cat ul.products li.product img,
body.term-bagues ul.products li.product img {
    width: 280px !important;
    height: 280px !important;
    max-width: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 6px;
}

/* Bloc produit */
ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Lien contenant l'image */
ul.products li.product a.woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* =========================================================
   5 — GRILLE UNIFORME 3 COLONNES
   ========================================================= */

.woocommerce ul.products,
body.tax-product_cat ul.products,
body.term-bagues ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* =========================================================
   6 — RESPONSIVE MOBILE (2 colonnes)
   ========================================================= */

/* === FIX ULTRA-CIBLÉ : SUPPRESSION DU CADRE VERTICAL DU THÈME === */

/* 1. Forcer le conteneur du lien à s'ajuster à l’image */
ul.products li.product .woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
}

/* 2. Supprimer la DIV interne qui garde la hauteur énorme */
ul.products li.product .woocommerce-LoopProduct-link > div,
ul.products li.product .woocommerce-LoopProduct-link figure {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Forcer l’image au sommet du bloc (évite le vide au-dessus) */
ul.products li.product .woocommerce-LoopProduct-link img {
    margin-top: 0 !important;
}

/* 4. Sécurisation : le LI s’adapte enfin à l’image */
ul.products li.product {
    height: auto !important;
    min-height: 0 !important;
}
/* FIX DÉFINITIF — CARRE PARFAIT PRODUITS BAGUES / CATÉGORIES */
ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: center !important;
}

ul.products li.product a.woocommerce-LoopProduct-link {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: auto !important;
}

/* Image carré 280x280 */
ul.products li.product a.woocommerce-LoopProduct-link img {
    width: 280px !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
}

/* Grille propre */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    padding: 0 !important;
}
/* FIX basé sur ton thème (classes réelles vues dans le HTML) */
ul.products li.product a.woocommerce-LoopProduct-link.k,
ul.products li.product a.woocommerce-loop-product__link.k {
    display: block !important;
    width: 280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Image carré 280px — sélecteur exact de ton thème */
ul.products li.product a.woocommerce-loop-product__link.k img.attachment-woocommerce_thumbnail,
ul.products li.product a.woocommerce-LoopProduct-link.k img.attachment-woocommerce_thumbnail {
    width: 280px !important;
    height: 280px !important;
    max-width: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
}

/* Conteneur LI */
ul.products li.product {
    width: 280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: auto !important;
}

/* Grille */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
}
/* ================================
   GRILLE PRODUITS (toutes catégories)
   ================================ */
body.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ================================
   BLOC PRODUIT
   ================================ */
body.tax-product_cat ul.products li.product {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ================================
   IMAGE PRODUIT — DESKTOP 260×260 px
   ================================ */
body.tax-product_cat ul.products li.product img {
    width: 260px !important;
    height: 260px !important;
    max-width: 260px !important;
    max-height: 260px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
    border-radius: 6px !important;
    padding: 0 !important;
}

/* ================================
   MOBILE — IMAGES 200×200 px
   ================================ */
@media (max-width: 768px) {
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    body.tax-product_cat ul.products li.product img {
        width: 200px !important;
        height: 200px !important;
        max-width: 200px !important;
        max-height: 200px !important;
    }
}
.home ul.products li.product-category a[href*="bagues"],
.home ul.products li.product-category img[src*="bagues"] {
    display: none !important;
}

.home ul.products li.product-category.term-bagues {
    display: none !important;
}
/* Cible le lien "Bagues" */
.owl-item .service-box h4 a[href*="bagues"] {
    display: none !important;
}

/* Cache le titre */
.owl-item .service-box h4:has(a[href*="bagues"]) {
    display: none !important;
}

/* Cache tout le bloc (image + titre) */
.owl-item:has(a[href*="bagues"]) {
    display: none !important;
}
/* ===== Grille 2 colonnes pour la catégorie Fleur de Vie ===== */
body.term-collection-fleur-de-vie ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 60px !important;
    justify-items: center !important;
    padding-top: 30px !important;
}

/* Centrage des blocs */
body.term-collection-fleur-de-vie ul.products li.product {
    margin: 0 auto !important;
    text-align: center !important;
}
/* RESET : annule le flex qui fout le bazar */
body.tax-product_cat ul.products {
    display: grid !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
}

/* CENTRAGE PARFAIT DES SOUS-CATÉGORIES (Fleur de Vie) */
body.tax-product_cat ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;   /* centre toute la grille */
    gap: 60px !important;                 /* espace propre entre blocs */
    padding: 0 !important;
}

/* Centre chaque bloc individuellement */
body.tax-product_cat ul.products li.product {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 300px !important;              /* taille uniforme */
}

/* Centre l’image dans son bloc */
body.tax-product_cat ul.products li.product a img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Centre les titres sous les images */
body.tax-product_cat ul.products li.product .woocommerce-loop-category__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
    text-align: center !important;
}
/* Remplace le texte Login/Register par l’icône personne */
.tbr2-account a.my-account {
    font-size: 0 !important; /* masque le texte */
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
}

/* Ajoute l'icône personne */
.tbr2-account a.my-account::before {
    content: "\f4e1"; /* code de l’icône bootstrap person */
    font-family: "bootstrap-icons" !important;
    font-size: 28px;
    color: #4a2b8b; /* violet fin, change si tu veux */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Zone cliquable plus grande sur mobile */
.tbr2-account a.my-account,
.wish-btn a,
.tbr2-cart a.cart-contents {
    padding: 10px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Retire les cercles violets autour des icônes */
.wish-btn a i,
.tbr2-cart a i {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
/* Uniformiser la couleur des icônes compte / favoris / panier */
.hdr-icns i,
.hdr-icns a i,
.tbr2-account i,
.wish-btn i,
.tbr2-cart i {
    color: #5e3c99 !important; /* Violet doux (tu peux changer) */
    stroke: #5e3c99 !important;
}

/* ============================================================
   ICONES HEADER — VERSION PC + MOBILE / SANS DOUBLONS
   ============================================================ */

/* ================================================
   JEWELS SPIRIT – ICÔNES COMPTE + PANIER (FINAL)
   ================================================ */

/* 1 — Supprimer le cœur partout */
.wish-btn,
.wish-btn a,
.wish-btn i {
    display: none !important;
}

/* 2 — Conteneur des 2 icônes */
.hdr-icns {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important; /* ESPACEMENT PARFAIT */
}

/* 3 — Icône COMPTE + PANIER : taille + couleur */
.hdr-icns a i,
.tbr2-account a.my-account::before,
.tbr2-cart a.cart-contents i {
    font-size: 34px !important;     /* même taille */
    color: #000 !important;          /* noir */
    line-height: 1 !important;
}

/* REMPLACE le texte Login/Register par une icône propre */
.tbr2-account a.my-account {
    font-size: 0 !important;         /* masque le texte */
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icône compte */
.tbr2-account a.my-account::before {
    content: "\f4e1"; /* Bootstrap "person" */
    font-family: "bootstrap-icons" !important;
    font-size: 34px !important;
    color: #000 !important;
}

/* Panier : zone cliquable */
.tbr2-cart a.cart-contents {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
}

/* 4 — Mobile : icônes + grosses */
@media (max-width: 768px) {
    .hdr-icns a i,
    .tbr2-account a.my-account::before,
    .tbr2-cart a.cart-contents i {
        font-size: 40px !important;
    }

    .hdr-icns {
        gap: 32px !important;
    }
}
/* ==========================================
   SLOGAN — STYLE IDENTIQUE AUX TITRES
   ========================================== */
.site-description {
    font-family: "Playfair Display", serif !important; /* même police que les titres */
    font-size: 32px !important;    /* taille PC */
    font-weight: 700 !important;   /* épaisseur des titres */
    color: #4a2b8b !important;     /* violet doux (change si tu veux) */
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; /* force sur une seule ligne */
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* Version mobile */
@media (max-width: 768px) {
    .site-description {
        font-size: 26px !important;
        white-space: normal !important; /* repasse en 2 lignes si l'écran est trop petit */
    }
}
/* ============================================
   SLOGAN HEADER – VERSION PREMIUM JEWELS SPIRIT
   ============================================ */

/* PC (largeurs > 768px) */
@media (min-width: 769px) {

    /* Style du slogan */
    .site-description,        /* fallback WordPress */
    .custom-logo + p,         /* si ton thème utilise ce modèle */
    header .site-tagline {    /* compatibilité thème */
        font-family: "Cormorant Garamond", serif !important; /* même police que les titres */
        font-size: 34px !important;   /* +35% plus grand */
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.5px !important;
        color: #351e63 !important;  /* violet profond premium */
        text-align: center !important;
        white-space: nowrap !important;   /* slogan sur une seule ligne */
        display: block !important;
        margin: 10px auto 25px auto !important;
    }
}
/* ============================================
   HEADER PC : MENU SUR 1 LIGNE (FINAL)
   ============================================ */

/* Ligne 1 : Logo | Slogan | Icônes */
#topbar > .container > .row.py-3.borders {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Logo */
.custom-logo {
    max-width: 140px !important;
}

/* Slogan */
.site-description {
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #39206b !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Icônes */
.hdr-icns {
    display: flex !important;
    gap: 24px !important;
}

/* Ligne 2 : Collections | Recherche SUR 1 LIGNE */
.topbr-search-box {
    margin-top: 10px !important;
    width: 100% !important;
}

.topbr-search-box form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* Bouton Collections */
#product_cat {
    height: 48px !important;
    font-size: 18px !important;
    width: auto !important;
}

/* Champ recherche */
.search-field-wrapper input[type="text"] {
    height: 48px !important;
    font-size: 18px !important;
    width: 280px !important;
}

/* Loupe */
.search-field-wrapper button {
    height: 48px !important;
    width: 48px !important;
}
/* ============================================
   MASQUER PANIER + AFFICHER LANGUE
   ============================================ */

/* Masquer l'icône panier */
.btn-details .main-header-btn,
.main-header-btn.me-3 {
    display: none !important;
}

/* Garder visible le sélecteur de langue */
.btn-details .translate-btn {
    display: block !important;
}
/* Afficher et styliser le sélecteur de langue */
.translate-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    color: #000 !important;
}

/* Style du drapeau + texte */
.translate-btn img {
    width: 24px !important;
    height: auto !important;
}

/* Mobile : même style */
@media (max-width: 768px) {
    .translate-btn {
        font-size: 16px !important;
    }
}
/* Masquer le trait vide */
.translate-btn {
    display: none !important;
}
/* ============================================
   MENU NAVIGATION : AGRANDI SUBTILEMENT
   ============================================ */

@media (min-width: 1024px) {
    
    /* Liens du menu : un peu plus gros */
    #site-navigation ul li a,
    .main-navigation ul li a,
    #menu-accueil li a {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    /* Menu sur une seule ligne horizontale */
    #site-navigation ul,
    .main-navigation ul,
    #menu-accueil {
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
    }
}
/* ============================================
   PAGE CATÉGORIE PRODUITS (ex: Bagues)
   ============================================ */

/* Grille 3 colonnes uniforme */
body.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    padding: 0 !important;
}

/* Titre produit : plus gros et gras */
body.tax-product_cat ul.products li.product h2,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 12px !important;
}

/* Prix : plus gros et gras */
body.tax-product_cat ul.products li.product .price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #8b7ab8 !important;
    margin: 8px 0 !important;
}

/* Effet hover sur l'image */
body.tax-product_cat ul.products li.product a img {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.tax-product_cat ul.products li.product a:hover img {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(139, 122, 184, 0.3) !important;
}

/* Mobile : 2 colonnes */
@media (max-width: 768px) {
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}
/* ============================================
   PAGE CATÉGORIE PRODUITS (ex: Bagues)
   ============================================ */

/* Grille 3 colonnes FORCÉE */
body.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 40px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Chaque produit : taille uniforme */
body.tax-product_cat ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Titre produit : plus gros et gras */
body.tax-product_cat ul.products li.product h2,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 12px !important;
}

/* Prix : plus gros et gras */
body.tax-product_cat ul.products li.product .price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #8b7ab8 !important;
    margin: 8px 0 !important;
}

/* Effet hover sur l'image */
body.tax-product_cat ul.products li.product a img {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.tax-product_cat ul.products li.product a:hover img {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(139, 122, 184, 0.3) !important;
}

/* FORCER 3 colonnes - ultra prioritaire */
body.tax-product_cat ul.products,
body.tax-product_cat ul.products.columns-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: dense !important;
    flex-wrap: unset !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.tax-product_cat ul.products li.product {
    grid-column: span 1 !important;
}
/* ============================================
   OVERRIDE FINAL : CATÉGORIES PC + MOBILE
   ============================================ */

/* PC uniquement : 3 colonnes */
@media (min-width: 769px) {
    body.tax-product_cat ul.products:not(:has(>li.product-category)) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile uniquement : 2 colonnes */
@media (max-width: 768px) {
    body.tax-product_cat ul.products:not(:has(>li.product-category)) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    body.tax-product_cat ul.products li.product img {
        width: 150px !important;
        height: 150px !important;
    }
}
/* ============================================
   PAGE PRODUIT MOBILE : GALERIE 2×2 SERRÉE
   ============================================ */

@media (max-width: 768px) {
  
  /* Conteneur galerie produit */
  .single-product .woocommerce-product-gallery,
  .single-product div.images {
    padding: 0 15px !important;
    margin-bottom: 20px !important;
  }
  
  /* Forcer grille 2×2 sur toutes les galeries */
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product .js-grid-gallery,
  .single-product .flex-viewport,
  .single-product .woocommerce-product-gallery .flex-viewport ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Items de la galerie */
  .single-product .woocommerce-product-gallery__image,
  .single-product .js-grid-gallery a,
  .single-product .flex-viewport li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Images grandes et carrées */
  .single-product .woocommerce-product-gallery__image img,
  .single-product .js-grid-gallery img,
  .single-product .flex-viewport img {
    width: 100% !important;
    height: auto !important;
    min-height: 170px !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }
}