/*
Theme Name: PmonTheme Child
Template: pedicure-makeup-store
Author: Sonia
Version: 9.0 - LAYOUT PRODUIT CORRIGÉ
Description: Thème enfant Jewels Spirit - Layout propre page produit
*/

/* ============================================================
   BLOC FIXE — NE PLUS TOUCHER
   Nettoyage complet du layout WooCommerce du thème
   ============================================================ */

/* 1) Neutralise Bootstrap UNIQUEMENT autour du produit */
.single-product div.product,
.single-product div.product > .row,
.single-product div.product .summary,
.single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* 2) Pas de règle col-8 nécessaire si on ne touche que div.product */

/* 3) Fix absolu — écrase le conteneur inline WooCommerce */
.single-product div[id^="product-"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* =========================
   1. COULEURS / BASE
   ========================= */
:root {
  --parme-clair:#E9DDF4;
  --parme-fonce:#A586C9;
}

#jewels-spirit-header,
#custom-header {
  background-image: url('https://jewel-spirit.com/wp-content/uploads/2025/10/cropped-Sans-titre-1200-x-300-px.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body {
  background-color: var(--parme-clair) !important;
}

.page-title,
.page-title.style1,
.page-title.style2 {
  background: linear-gradient(180deg, #E9DDF4 0%, #A586C9 100%) !important;
  color: #fff !important;
}

.footer-copyright,
.footer-copyrights-wrapper,
.copyrights,
.copyrg-link {
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}

.cart-container .product-card {
  background: var(--parme-clair) !important;
  color:#3c2f4d !important;
}
.cart-container .product-card:nth-child(-n+3)::after {
  background: var(--parme-fonce) !important;
  opacity:.9;
  z-index:-1;
}
.cart-container a.button,
.hover-cart-btn a.button {
  background: var(--parme-fonce) !important;
  color:#fff !important;
  border-radius:12px;
}
.cart-container h6,
.cart-container .product-card h6 {
  color:#5a4973 !important;
}
.product-card img {
  border:3px solid rgba(165,134,201,.3);
  border-radius:18%;
  box-shadow:0 4px 10px rgba(165,134,201,.25);
}

/* =========================
   2. SUPPRESSION POINTS BLANCS
   ========================= */
.js-grid-gallery a::before,
.js-grid-gallery a::after,
.single-product .woocommerce-product-gallery__image::before,
.single-product .woocommerce-product-gallery__image::after,
.single-product .woocommerce-product-gallery__wrapper::after,
.single-product .woocommerce-product-gallery__image a::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0 !important;
  transition: none !important;
  animation: none !important;
  display: none !important;
}

.js-grid-gallery a:hover::after,
.single-product .woocommerce-product-gallery__image:hover::after {
  content: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* =========================
   3. PAILLETTES
   ========================= */
.falling-glitter {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: visible;
}

.glitter-dot {
  position: absolute;
  top: -12px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(rgba(255,223,128,.95), rgba(255,223,128,0) 60%);
  filter: drop-shadow(0 0 3px rgba(255,210,90,.85));
  animation: glitter-fall var(--dur,2400ms) linear forwards;
  opacity: .95;
}

.glitter-star {
  width:8px;
  height:8px;
  background:conic-gradient(from 0deg,
    rgba(255,235,150,1) 0 10%, transparent 10% 20%,
    rgba(255,235,150,1) 20% 30%, transparent 30% 40%,
    rgba(255,235,150,1) 40% 50%, transparent 50% 60%,
    rgba(255,235,150,1) 60% 70%, transparent 70% 80%,
    rgba(255,235,150,1) 80% 90%, transparent 90% 100%);
  -webkit-mask:radial-gradient(circle,#000 55%,transparent 56%);
  mask:radial-gradient(circle,#000 55%,transparent 56%);
  filter:drop-shadow(0 0 4px rgba(255,210,90,.9));
}

@keyframes glitter-fall {
  0%   { transform: translate(var(--dx,0),-12px) scale(var(--s,1)); opacity:.95; }
  100% { transform: translate(var(--dxEnd,0),110vh) scale(calc(var(--s,1)*.7)); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .glitter-dot { animation-duration:1ms; opacity:0; }
}

.pixie-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pixie-overlay { display:none !important; }
}


/* =========================
   5. IMAGES CATÉGORIES
   ========================= */
ul.products li.product-category {
  text-align: center !important;
}
ul.products li.product-category img {
  width: 250px !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

/* =========================
   6. NOS COLLECTIONS
   ========================= */
.featured {
  background-image: linear-gradient(0deg,#E9DDF4 0%,#A586C9 100%) !important;
}

.featured .service-box img {
  width: 130px !important;
  height: 130px !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 130px !important;
  max-width: 130px !important;
  min-height: 130px !important;
  max-height: 130px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
}

.featured .service-box {
  position: relative !important;
  overflow: visible !important;
  text-align: center !important;
}

.featured .service-box::before {
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.05) 35%,
    rgba(230,230,230,0.40) 60%,
    rgba(200,200,200,0.25) 75%,
    rgba(180,180,180,0.00) 100%);
  opacity:0;
  transform:scale(0.7);
  transition:opacity .35s ease, transform .35s ease;
  z-index:0;
}

.featured .service-box::after {
  content:"";
  position:absolute;
  inset:-25px;
  border-radius:50%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 3px),
    radial-gradient(circle, rgba(220,220,220,0.8) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.7) 2px, transparent 3px);
  background-size:22px 22px, 30px 30px, 38px 38px;
  background-position:center;
  opacity:0;
  transform:scale(0.5);
  transition:opacity .4s ease, transform .4s ease;
  z-index:0;
  pointer-events:none !important;
}

.featured .service-box:hover::before {
  opacity:0.55;
  transform:scale(1.15);
}
.featured .service-box:hover::after {
  opacity:0.60;
  transform:scale(1.25);
}
.featured .service-box:hover img {
  transform:scale(1.05);
}

.featured .service-box a {
  position:relative;
  z-index:2;
}

@media (min-width: 769px) {
  .featured .owl-stage-outer {
    overflow: visible !important;
  }
  .featured .owl-stage {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    transform: none !important;
    width: 100% !important;
  }
  .featured .owl-item {
    float: none !important;
    width: auto !important;
  }
  .featured .owl-nav,
  .featured .owl-dots {
    display: none !important;
  }
  
  /* Masquer doublons */
  .featured .owl-item.cloned {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .featured .owl-carousel {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 15px !important;
  }
  .featured .service-box {
    text-align: center !important;
    margin-bottom: 25px !important;
  }
  .featured .service-box img {
    margin: 0 auto 10px auto !important;
    width: 130px !important;
    height: 130px !important;
  }
}

/* Masquer sous-catégories - VERSION PLUS FORTE */
.featured .owl-item:has(a[href*="bracelets"]),
.featured .owl-item:has(a[href*="colliers"]),
.featured .owl-item:has(a[href*="boucles-doreilles"]),
.featured .owl-item:has(a[href*="bague"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* FORCER AFFICHAGE COLLECTIONS PC */
@media (min-width: 769px) {
  .featured .owl-item {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .featured .owl-stage-outer {
    overflow: visible !important;
  }
  
  .featured .owl-stage {
    display: flex !important;
    gap: 40px !important;
    justify-content: center !important;
  }
}

/* =========================
   7. SOUS-CATÉGORIES
   ========================= */
body.tax-product_cat ul.products:has(> li.product-category) {
  display:block !important;
  text-align:center !important;
  padding:0 !important;
  margin:40px auto !important;
}

body.tax-product_cat ul.products li.product-category {
  display:inline-block !important;
  vertical-align:top !important;
  width:45% !important;
  max-width:360px !important;
  margin:0 2% 40px 2% !important;
  text-align:center !important;
  float:none !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  padding: 25px 20px 40px 20px !important;
}

body.tax-product_cat ul.products li.product-category img {
  width:100% !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
  border-radius:6px !important;
  object-fit:cover !important;
}

body.tax-product_cat ul.products li.product-category .count {
    display: none !important;
}

/* =========================
   8. PAGES PRODUITS (GRILLE 3 COLONNES)
   ========================= */
body.tax-product_cat ul.products:not(:has(> li.product-category)) {
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:40px !important;
  justify-items:center !important;
  align-items:start !important;
  max-width:1200px !important;
  margin:40px auto !important;
  padding:0 !important;
}

body.tax-product_cat ul.products:not(:has(> li.product-category)) li.product {
  width:100% !important;
  max-width:350px !important;
  text-align:center !important;
  float:none !important;
}

body.tax-product_cat ul.products:not(:has(> li.product-category)) li.product img {
  width:260px !important;
  height:260px !important;
  object-fit:cover !important;
  border-radius:6px !important;
  margin:0 auto 10px auto !important;
  display:block !important;
}

@media (max-width: 1024px) {
  body.tax-product_cat ul.products:not(:has(> li.product-category)) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  body.tax-product_cat ul.products:not(:has(> li.product-category)) {
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   9. MESSAGE + BLOC TRI
   ========================= */
.message-categorie-js {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin: 20px 0 25px 0;
  color: #5d4c77;
  background: rgba(255,255,255,0.4);
  padding: 15px 20px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.woocommerce-result-count {
  display: none !important;
}

body.tax-product_cat .woocommerce-ordering {
  display: block !important;
  float: none !important;
  margin: 10px 0 20px 0 !important;
  text-align: left !important;
}
body.tax-product_cat .woocommerce-ordering select {
  display: inline-block !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid #d7c5ea !important;
}

body.tax-product_cat .woocommerce-ordering + ul.products {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  body.tax-product_cat .woocommerce-ordering {
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  body.tax-product_cat .woocommerce-ordering select {
    width: 80% !important;
    max-width: 260px !important;
  }
  
  body.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 10px !important;
  }
  
  body.tax-product_cat ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
  }
  
  body.tax-product_cat ul.products li.product img {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    margin: 0 auto !important;
  }
}


/* ================================================
   11. ICÔNES HEADER - VERSION FINALE
   ================================================ */

/* Masquer cœur favori */
.wish-btn {
    display: none !important;
}

/* Masquer panier + trait dans le menu */
nav#site-navigation .tbr2-cart,
.navigation_header .tbr2-cart,
nav .menu-item.cart,
nav li.cart-icon {
    display: none !important;
}

nav#site-navigation .vr,
.navigation_header .vr,
nav hr {
    display: none !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .hdr-icns {
        display: flex !important;
        justify-content: center !important;
        gap: 32px !important;
    }
    
    .hdr-icns a {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .hdr-icns a i {
        font-size: 40px !important;
        color: #000 !important;
    }
}

/* PC */
@media (min-width: 769px) {
    /* Conteneur */
    .hdr-icns,
    #jewels-spirit-header .hdr-icns {
        display: flex !important;
        gap: 28px !important;
        align-items: center !important;
    }
    
    /* Liens sans ronds */
    .hdr-icns a,
    #jewels-spirit-header .hdr-icns a {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 10px !important;
    }
    
    /* Icône panier */
    .hdr-icns a i,
    #jewels-spirit-header .hdr-icns a i {
        font-size: 34px !important;
        color: #000 !important;
    }
    
    /* ICÔNE COMPTE - VERSION QUI MARCHE */
    .tbr2-account a.my-account,
    #jewels-spirit-header .tbr2-account a.my-account {
        font-size: 0 !important;
        position: relative !important;
        display: inline-block !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .tbr2-account a.my-account::before,
    #jewels-spirit-header .tbr2-account a.my-account::before {
        content: "\f4e1";
        font-family: "bootstrap-icons" !important;
        font-size: 34px !important;
        color: #000 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* Hover */
    .hdr-icns a:hover i,
    .tbr2-account a.my-account:hover::before,
    #jewels-spirit-header .hdr-icns a:hover i,
    #jewels-spirit-header .tbr2-account a.my-account:hover::before {
        color: #a586c9 !important;
    }
}
/* MOBILE - ICÔNE COMPTE */
@media (max-width: 768px) {
    .tbr2-account a.my-account {
        font-size: 0 !important;
        position: relative !important;
        display: inline-block !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .tbr2-account a.my-account::before {
        content: "\f4e1";
        font-family: "bootstrap-icons" !important;
        font-size: 40px !important;
        color: #000 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}
/* Masquer le lien "Achetez maintenant" bande violette */
a.topbar-btn {
    display: none !important;
}
/* Aligner icône compte avec icône panier - PC */
@media (min-width: 769px) {
    .tbr2-account {
        display: flex !important;
        align-items: center !important;
    }
}

/* Aligner icône compte avec icône panier - MOBILE */
@media (max-width: 768px) {
    .tbr2-account {
        display: flex !important;
        align-items: center !important;
    }
}
/* Menu principal - texte plus grand et gras - PC uniquement */
@media (min-width: 769px) {
    #site-navigation .menu-item a {
        font-size: 18px !important;
        font-weight: 700 !important;
    }
}
/* Masquer panier et éléments dans la barre menu - PC */
@media (min-width: 769px) {
    .btn-detail,
    .main-header-btn,
    .text-center.translate-btn {
        display: none !important;
    }
}
/* Masquer panier et éléments dans la barre menu - MOBILE */
@media (max-width: 768px) {
    .btn-detail,
    .main-header-btn,
    .text-center.translate-btn {
        display: none !important;
    }
}

/* ============================================
   GALERIE PRODUIT — LAYOUT PROPRE V2
   ============================================ */

/* CONTENEUR PRINCIPAL PAGE PRODUIT */
.single-product div.product {
    display: block !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    width: 100% !important;
}

/* SECTION HAUT : GALERIE + RÉSUMÉ */
.single-product .product-top-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 40px !important;
    margin-bottom: 50px !important;
}

/* GALERIE 2×2 GAUCHE */
.single-product .js-grid-gallery {
    width: 40% !important;
    max-width: 480px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.single-product .js-grid-gallery img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
}

/* RÉSUMÉ DROITE (titre, prix, bouton) */
.single-product .summary.entry-summary {
    width: 55% !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* DESCRIPTION COMPLÈTE SOUS LA GALERIE */
.single-product .woocommerce-tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin: 50px 0 !important;
    clear: both !important;
}

/* PRODUITS SIMILAIRES TOUT EN BAS - PAGE PRODUIT UNIQUEMENT */
body.single-product section.related.products {
    width: 100% !important;
    max-width: 100% !important;
    margin: 50px 0 0 0 !important;
    clear: both !important;
}

body.single-product section.related.products ul.products {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

body.single-product section.related.products ul.products li.product {
    width: calc(25% - 23px) !important;
    max-width: 260px !important;
    margin: 0 !important;
}

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

    /* Tout en colonne */
    .single-product .product-top-section {
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Galerie 2×2 en largeur totale */
    .single-product .js-grid-gallery {
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        padding: 0 10px !important;
    }

    .single-product .summary.entry-summary {
        width: 100% !important;
    }

    .single-product .woocommerce-tabs {
        margin-top: 30px !important;
    }
    
    body.single-product section.related.products {
        margin-top: 30px !important;
    }
    
    body.single-product section.related.products ul.products {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }
    
    body.single-product section.related.products ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
    }
}