/** Shopify CDN: Minification failed

Line 317:0 Expected "}" to go with "{"

**/
/* Cacher le bouton PayPal dans le panier */
.shopify-payment-button__button--paypal,
.additional-checkout-buttons {
  display: none !important;
}

/* Style pour la liste déroulante */
select,
select:focus,
select:hover {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

/* Options dans la liste déroulante */
select option {
  background-color: #000 !important;
  color: #fff !important;
}

/* Espace entre les catégories du menu principal */
.list-menu--inline > li {
  margin-right: 5px;
}

/* Supprimer la marge pour le dernier élément */
.list-menu--inline > li:last-child {
  margin-right: 0;
}

/* Agrandir la police d'écriture des catégories du menu principal */
.list-menu--inline > li > a {
  font-size: 18px;
}

/* Animation douce pour les boutons */
.button,
.button:hover {
  transition: all 0.3s ease;
}

/* Style boutons secondaires type Chanel */
.quick-add__submit.button--secondary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  transition: all 0.3s ease !important;
  transform: scale(1.01);
}

.quick-add__submit.button--secondary:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  letter-spacing: 0.5px !important;
}
/* Réduire la hauteur et la taille du texte des boutons "AJOUTER" et le bouton "DÉTAILS" en page collection */
.quick-add__submit.button--secondary,
.card__badge-bottom.button {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: auto !important;
}
/* Appliquer la police Poppins Semi Bold à tous les boutons */
button,
.button,
.shopify-payment-button,
.shopify-payment-button__button,
.product-form__cart-submit,
.btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important; /* équivalent de Semi Bold */
}
/* Effet Chanel sur le bouton "AJOUTER" */
#ProductSubmitButton-template--24502830137679__main:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  transform: scale(1.01);
}
/* Réduire la hauteur globale du bouton "AJOUTER" */
#ProductSubmitButton-template--24502830137679__main,
#ProductSubmitButton-template--24502830137679__main.button,
#ProductSubmitButton-template--24502830137679__main.product-form__submit,
#ProductSubmitButton-template--24502830137679__main.button--full-width {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: auto !important;
}

/* Banderole déroulante vitesse du visuel */
.custom-marquee .marquee-text {
  font-size: 10px !important;
  line-height: 1.2;
}
.custom-marquee .track {
  animation-duration: 20s !important;
}
/* Réduire la taille du titre produit dans la page produit */
.product__title,
.product__title h1 {
  font-size: 2.2rem !important; /* Ajuste la taille ici */
}
/* Ajouter un trait blanc sous le titre page produit (comme CHANEL) */
.product__title {
  display: inline-block;
  border-bottom: 4px solid white;
  padding-bottom: 2px;
  margin-bottom: 20px;
}

/* Réduire la taille du titre dans la vue rapide (Quick Add) */
.quick-add-modal h2.h1 {
  font-size: 2.2rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  border-bottom: 4px solid white;
  padding-bottom: 2px;
  margin-bottom: 20px;
  display: inline-block;
  width: fit-content;
  color: white;
  text-transform: uppercase;
}

/* Cacher le doublon de titre non cliquable */
.quick-add-modal .product__title h1 {
  display: none !important;
}

/* Supprimer le border du bloc parent pour éviter un double trait */
.quick-add-modal .product__title {
  border: none;
  padding: 0;
  margin: 0;
}


/* --- RESET : remettre l’écriture à l’horizontale et empêcher les retours par caractère --- */
.mega-menu__list a,
.header__submenu .list-menu a {
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  transform: none !important;
  display: inline-block !important;
}

/* ne pas contraindre la largeur (évite le wrap par caractère) */
.mega-menu__list li,
.header__submenu .list-menu li {
  width: auto !important;
  line-height: 1.4 !important;
}

/* Centre le panneau du méga-menu et son contenu */
.mega-menu__content,
.header__submenu {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* Liste centrée, mais texte bien horizontal */
.mega-menu__list,
.header__submenu .list-menu {
  text-align: center !important;
  display: block !important;    /* pas de flex en colonne => garde le texte normal */
  margin: 0 auto !important;
}

/* un peu d’espace et de tenue */
.mega-menu__list > li,
.header__submenu .list-menu > li {
  margin: 8px 0 !important;
  letter-spacing: .05em;
  font-weight: 600;
}

/* --- Patch méga-menu BIJOUX : titres en haut, listes sans puces --- */
.mega-menu__content #mega-bijoux.pp-mega{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr)) 420px; /* 3 colonnes + image */
  gap:32px;
  padding:32px 40px;
  max-width:1280px;
  margin:0 auto;
}

/* Titres de colonnes */
.mega-menu__content #mega-bijoux .pp-col h4{
  margin:0 0 12px !important;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#bdbdbd;
}

/* ENLÈVE puces + retrait */
.mega-menu__content #mega-bijoux .pp-col ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.mega-menu__content #mega-bijoux .pp-col li{
  margin:10px 0 !important;
  padding:0 !important;
}

/* Couleur des liens (y compris visited) + style luxe */
.mega-menu__content #mega-bijoux .pp-col a,
.mega-menu__content #mega-bijoux .pp-col a:visited{
  color:#efefef !important;
  text-decoration:none !important;
  font-weight:600;
  letter-spacing:.04em;
}
.mega-menu__content #mega-bijoux .pp-col a:hover{
  opacity:.85;
  text-decoration:underline;
}

/* ----------- Couleur du texte du menu principal ----------- */
.header__inline-menu a,
.header__inline-menu summary {
  color: #ffffff !important;  /* blanc pur */
}

/* Si tu veux aussi rendre le texte actif/survolé encore plus lumineux */
.header__inline-menu a:hover,
.header__inline-menu summary:hover,
.header__inline-menu summary[aria-expanded="true"] {
  color: #f8f8f8 !important;  /* léger contraste sur hover */
}

/* Optionnel : renforce le blanc aussi sur les titres du méga-menu */
.mega-menu__content h4,
.mega-menu__content a {
  color: #ffffff !important;
}



/* --- Sous-catégories du méga-menu : plus fin & plus élégant --- */
.header__inline-menu .mega-menu__content .list-unstyled a,
.header__inline-menu .mega-menu__content .mega-menu__link,
.header__inline-menu .mega-menu__content li > a {
  font-weight: 400 !important;         /* normal */
  font-variation-settings: "wght" 400; /* au cas où la police est variable */
  letter-spacing: 0.02em;
  font-size: 15px;                      /* ajuste si tu veux */
  color: #fff !important;               /* blanc bien franc */
  opacity: 0.95;                        /* très léger adoucissement */
}

/* Titres de colonnes (PAR CATÉGORIE, PAR COULEUR, etc.) un peu moins gras */
.header__inline-menu .mega-menu__content h4 {
  font-weight: 500 !important;          /* semi-bold/medium */
  font-variation-settings: "wght" 500;
  letter-spacing: 0.06em;
  color: #ffffff !important;
  opacity: 0.85;



/* Conteneur d’aperçu à droite */
.pp-mega-preview{
  position:absolute; top:0; right:2rem;
  width:min(22vw,340px); height:min(22vw,340px);
  overflow:hidden; border-radius:12px; z-index:1;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  line-height:0; margin:0; padding:0;
}

/* Les 2 images sont superposées */
.pp-mega-preview .pp-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity .35s ease;
}

/* État par défaut : l’image "normale" est visible */
.pp-mega-preview .pp-image-default{ opacity:1; }

/* Swap au survol du lien "Perles Hotaru" — via :has() */
@media (hover:hover){
  /* .pp-mega = ton conteneur (id="mega-bijoux" a déjà class "pp-mega") */
  .pp-mega:has(.pp-hotaru-link:hover) .pp-image-default{ opacity:0; }
  .pp-mega:has(.pp-hotaru-link:hover) .pp-image-hotaru{ opacity:1; }
}

/* Titre + sous-titre bien blancs */
.product__info-wrapper .product__title h1,
.product__info-wrapper .product__title h2,
.product__info-wrapper .product-subtitle {
  color: #fff !important;
  opacity: 1 !important;           /* casse l'opacité héritée */
  text-shadow: 0 0 1px rgba(255,255,255,.15); /* optionnel, un peu de peps */
}