/** Shopify CDN: Minification failed

Line 293:8 Expected identifier but found whitespace
Line 293:9 Unexpected "300px"
Line 519:8 Expected identifier but found whitespace
Line 519:9 Unexpected "300px"
Line 535:0 Unexpected "}"

**/
.stars {
  color: #FFD700 !important;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Aligne horizontalement au centre */
  align-items: center;
  text-align: center;      /* Force le texte renvoyé à la ligne à se centrer */
  gap: 10px 15px;          /* Gère l'espace entre les liens (haut/bas et gauche/droite) */
  max-width: 100%;
  margin: 0 auto;
}
/* HAMBURGER */
.az-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-self: start;
}
.az-menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(255,255,255,.85);
  transition: background .2s;
  border-radius: 2px;
}
.az-menu-btn:hover span { background: #ffffffff; }

/* DRAWER OVERLAY */
.az-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.az-drawer-overlay.open { opacity: 1; pointer-events: all; }

/* DRAWER */
.az-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: #0a0a0a;
  z-index: 201;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  padding: 28px 28px 40px;
  display: flex;
  flex-direction: column;
}
.az-drawer.open { transform: translateX(0); }
.az-drawer-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: 1.1rem;
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 28px;
  padding: 4px;
  transition: color .2s;
  line-height: 1;
}
.az-drawer-close:hover { color: #ffffff; }
.az-drawer-logo {
  font-family: var(--az-font-sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.az-drawer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.az-drawer-nav li a {
  display: block;
  padding: 14px 0;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-weight: 400;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color .2s;
}
.az-drawer-nav li a:hover { color: #ffffffff; }


/* ARAZA BEAUTY PRODUCT PAGE */

:root {

  --az-bg: #FDFCFA;

  --az-white: #ffffff;

  --az-cream: #F5EFE8;

  --az-nude: #B87B5E;

  --az-dark: #1E1E1E;

  --az-mid: #5C5450;

  --az-light: #9E9590;

  --az-border: #E8DDD5;

  --az-badge-bg: #F9F4F0;

  --az-font-serif: 'Cormorant Garamond', Georgia, serif;

  --az-font-sans: 'Jost', system-ui, sans-serif;

}

/* Empêche les icônes d'être géantes au chargement */

.az-ann-icon {

  width: 16px !important;

  height: 16px !important;

  display: block;

  flex-shrink: 0;

  /* Optionnel : rend l'affichage plus fluide */

  opacity: 1;

}



/* Force l'affichage immédiat sans transition bizarre */

.az-announcement-bar svg {

  display: block;

}



/* Fix pour éviter l'affichage géant des icônes au chargement */

.az-ann-icon {

  width: 16px !important;

  height: 16px !important;

  display: block; /* Force le bloc à prendre sa taille immédiatement */

  flex-shrink: 0;

}



/* Masque les icônes tant que le CSS n'est pas prêt */

.az-ann-icon {

  animation: fadeIn 0.5s;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



/* BARRE D'ANNONCE DÉFILANTE */

.az-announcement-bar {

  background: #ffffffff;

  overflow: hidden;

  padding: 10px 0 8px 0;

  border-bottom: 1px solid rgba(0,0,0,.07);

  height: 42px; /* DÉFINISSEZ UNE HAUTEUR FIXE ICI */

  box-sizing: border-box;

}



.az-announcement-track {

  display: inline-flex;

  align-items: center;

  gap: 50px;

  white-space: nowrap;

  animation: az-marquee 40s linear infinite;

  will-change: transform;

}



.az-announcement-item {

  /* Changement pour Montserrat avec solutions de secours modernes */

  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;

 

  /* Ajustement du gras pour un effet épuré et semi-bold comme sur l'image */

  font-weight: 500 !important;

 

  /* Taille ajustée pour être lisible et élégante */

  font-size: 1rem;

 

  /* Grand espacement des lettres pour le style premium */

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: #000000;

  display: inline-flex;

  align-items: center;

  gap: 20px;

}



/* Ajoutez cette ligne pour donner de l'espace uniforme à chaque élément */

  width: 300px;

  text-align: center;

}



  .az-announcement-track {

    display: flex;

    width: max-content; /* Force le conteneur à prendre la largeur de son contenu */

  }





html {

  -webkit-text-size-adjust: 100%; /* Empêche Safari iPhone de modifier la taille du texte */

}

.az-ann-icon {

  width: 16px;

  height: 16px;

  stroke: #000000ff;

  flex-shrink: 0;

}



/* Cache les boutons de paiement dynamique ajoutés par des applications ou Shopify */

.shopify-payment-button,

.shopify-payment-button__button,

[data-shopify="payment-button"] {

  display: none !important;

}



@keyframes az-marquee {

  0%   { transform: translateX(-50%); }

  100% { transform: translateX(0); }

} 


/* ================================================
   DARK HEADER — override site-wide (dawn-main)
   ================================================ */

/* Background header */

/* Le menu est hors écran par défaut */
.az-drawer {
  position: fixed;
  top: 0;
  left: -300px; /* Ou -100% selon la largeur voulue */
  width: 300px;
  height: 100%;
  background: white;
  transition: 0.3s ease;
  z-index: 1000;
  visibility: hidden;
}

/* Empêche les icônes d'être géantes au chargement */

.az-ann-icon {

  width: 16px !important;

  height: 16px !important;

  display: block;

  flex-shrink: 0;

  /* Optionnel : rend l'affichage plus fluide */

  opacity: 1;

}



/* Force l'affichage immédiat sans transition bizarre */

.az-announcement-bar svg {

  display: block;

}



/* Fix pour éviter l'affichage géant des icônes au chargement */

.az-ann-icon {

  width: 16px !important;

  height: 16px !important;

  display: block; /* Force le bloc à prendre sa taille immédiatement */

  flex-shrink: 0;

}



/* Masque les icônes tant que le CSS n'est pas prêt */

.az-ann-icon {

  animation: fadeIn 0.5s;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



/* BARRE D'ANNONCE DÉFILANTE */

.az-announcement-bar {

  background: #ffffffff;

  overflow: hidden;

  padding: 10px 0 8px 0;

  border-bottom: 1px solid rgba(0,0,0,.07);

  height: 42px; /* DÉFINISSEZ UNE HAUTEUR FIXE ICI */

  box-sizing: border-box;

}



.az-announcement-track {

  display: inline-flex;

  align-items: center;

  gap: 50px;

  white-space: nowrap;

  animation: az-marquee 40s linear infinite;

  will-change: transform;

}



.az-announcement-item {

  /* Changement pour Montserrat avec solutions de secours modernes */

  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;

 

  /* Ajustement du gras pour un effet épuré et semi-bold comme sur l'image */

  font-weight: 500 !important;

 

  /* Taille ajustée pour être lisible et élégante */

  font-size: 1rem;

 

  /* Grand espacement des lettres pour le style premium */

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: #000000;

  display: inline-flex;

  align-items: center;

  gap: 20px;

}



/* Ajoutez cette ligne pour donner de l'espace uniforme à chaque élément */

  width: 300px;

  text-align: center;

}



  .az-announcement-track {

    display: flex;

    width: max-content; /* Force le conteneur à prendre la largeur de son contenu */

  }

}



html {

  -webkit-text-size-adjust: 100%; /* Empêche Safari iPhone de modifier la taille du texte */

}

.az-ann-icon {

  width: 16px;

  height: 16px;

  stroke: #000000ff;

  flex-shrink: 0;

}



/* Cache les boutons de paiement dynamique ajoutés par des applications ou Shopify */

.shopify-payment-button,

.shopify-payment-button__button,

[data-shopify="payment-button"] {

  display: none !important;

}



@keyframes az-marquee {

  0%   { transform: translateX(-50%); }

  100% { transform: translateX(0); }

} 



/* Quand on ajoute la classe 'open' en JS */
.az-drawer.open {
  left: 0;
  visibility: visible;
}

/* L'overlay (fond grisé) */
.az-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none; /* Masqué par défaut */
  z-index: 999;
}

.az-drawer-overlay.open {
  display: block; /* Affiché quand la classe 'open' est ajoutée */
}

/* ARAZA BEAUTY PRODUCT PAGE */
:root {
  --az-bg: #FDFCFA;
  --az-white: #ffffff;
  --az-cream: #F5EFE8;
  --az-nude: #B87B5E;
  --az-dark: #1E1E1E;
  --az-mid: #5C5450;
  --az-light: #9E9590;
  --az-border: #E8DDD5;
  --az-badge-bg: #F9F4F0;
  --az-font-serif: 'Cormorant Garamond', Georgia, serif;
  --az-font-sans: 'Jost', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Barre d'annonce : icônes fixes dès le chargement */
.az-ann-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  stroke: #000000;
  visibility: visible !important;
  opacity: 1 !important;
}



/* --- DRAWER (Le menu latéral) --- */
.az-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: #0a0a0a;
    z-index: 201;
    transform: translateX(-100%); /* Masqué par défaut à gauche */
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    padding: 28px 28px 40px;
    display: flex;
    flex-direction: column;
}

/* La classe ajoutée par ton JS pour l'ouvrir */
.az-drawer.open { 
    transform: translateX(0); 
}

/* --- OVERLAY (Le fond grisé) --- */
.az-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 200;
    opacity: 0;
    pointer-events: none; /* Clic traverse le fond quand il est fermé */
    transition: opacity .3s;
}
.az-drawer-overlay.open { 
    opacity: 1; 
    pointer-events: all; 
}




body.az-layout {
  font-family: var(--az-font-sans);
  background: var(--az-bg);
  color: var(--az-dark);
  overflow-x: hidden;
  margin: 0;
}

/* BARRE D'ANNONCE FIXE ET PROPRE */
.az-announcement-bar {
  background: #ffffff;
  overflow: hidden;
  height: 42px; /* Hauteur fixe absolue */
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-sizing: border-box;
  width: 100%;
}

.az-announcement-track {
  display: inline-flex;
  align-items: center;
  gap: 50px;
  white-space: nowrap;
  animation: az-marquee 40s linear infinite;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


.az-announcement-item {
  /* Changement pour Montserrat avec solutions de secours modernes */
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
  
  /* Ajustement du gras pour un effet épuré et semi-bold comme sur l'image */
  font-weight: 500 !important; 
  
  /* Taille ajustée pour être lisible et élégante */
  font-size: 1rem; 
  
  /* Grand espacement des lettres pour le style premium */
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #000000;
  display: inline-flex;
  align-items: center;
  gap: 20px;
}


html {
  -webkit-text-size-adjust: 100%; /* Empêche Safari iPhone de modifier la taille du texte */
}

/* Cache les boutons de paiement dynamique ajoutés par des applications ou Shopify */
.shopify-payment-button, 
.shopify-payment-button__button,
[data-shopify="payment-button"] {
  display: none !important;
}

@keyframes az-marquee {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* HEADER */
.az-header {
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  height: 70px;
  position: sticky;
  top: -2px;
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 100;
}

.az-menu-btn {
  justify-self: start;
}

.az-logo {
  justify-self: center;
  margin-left: -25px; /* Ajustez cette valeur pour décaler vers la gauche */
  margin-right: auto; /* Permet de repousser les éléments à droite si besoin */
}

.az-header-icons {
  justify-self: end;
}

@media screen and (min-width: 750px) {
  .az-header {
    padding: 0 48px;
  }
}

.az-announcement-track {
    display: flex;
    width: max-content; /* Force le conteneur à prendre la largeur de son contenu */
  }

/* Ajoutez ceci à votre fichier CSS */
.az-header-menu-button {
  margin-right: auto; /* Pousse tout le reste vers la droite et ancre le menu à gauche */
}

/* --- HAMBURGER --- */
.az-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-self: start;
}
.az-menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(255,255,255,.85);
  transition: background .2s;
  border-radius: 2px;
}
.az-menu-btn:hover span { background: #ffffff; }

/* --- LOGO --- */
.az-logo {
  font-family: var(--az-font-sans);
  font-size: 1.5rem;
  font-weight: 900 !important; 
  -webkit-text-stroke: 1.6px #ffffff; 
  letter-spacing: .35em;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.az-logo-gem {
  width: 26px;
  height: 26px;
  stroke: #ffffff;
  flex-shrink: 0;
}

/* --- ICONS --- */
.az-header-icons { display: flex; gap: 18px; align-items: center; justify-self: end; }
.az-header-icons a { display: flex; }
.az-header-icons svg { width: 20px; height: 20px; stroke: #ffffff; fill: none; cursor: pointer; transition: stroke .2s; }
.az-header-icons a:hover svg { stroke: rgba(255,255,255,.85); }


.az-drawer-logo {
  font-family: var(--az-font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- NAVIGATION DRAWER (Texte agrandi) --- */
.az-drawer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* --- NAVIGATION DRAWER (Texte agrandi au maximum) --- */
.az-drawer-nav li a {
  display: block;
  padding: 24px 0; /* Plus d'espace vertical pour aérer le grand texte */
  font-size: 1.2rem; /* Augmentation significative de la taille */
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #ffffff; /* Couleur plus vive pour un meilleur contraste */
  text-decoration: none;
  font-weight: 600; /* Texte plus épais */
  border-bottom: 1px solid rgba(255,255,255,.1); /* Ligne légèrement plus visible */
  transition: all .2s;
}

.az-drawer-nav li a:hover { 
  color: #ffffffff; /* Ajout d'une couleur de survol pour une touche pro */
  padding-left: 10px; /* Petit effet de mouvement au survol */
}


/* BREADCRUMB */
.az-breadcrumb {
  padding: 12px 48px;
  font-size: .72rem;
  color: var(--az-light);
  letter-spacing: .05em;
  border-bottom: 1px solid var(--az-border);
  background: var(--az-white);
}
.az-breadcrumb a { color: var(--az-light); text-decoration: none; }
.az-breadcrumb a:hover { color: var(--az-dark); }
.az-breadcrumb span { margin: 0 8px; }




/* Force le logo au centre sur mobile */
.header--middle-left .header__heading {
  margin: 0 auto !important;
  text-align: center;
}

/* 3. Ajustement des icônes (loupe, panier, menu) */
.header__icons {
  display: flex;
  align-items: center;
}

.header__icon {
  color: #ffffff !important;
}

/* 4. Suppression de la bordure inutile */
.header-wrapper {
  border-bottom: none !important;
}
.header-wrapper {
  background: #0a0a0a !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.08) !important;
}
.header-wrapper.gradient {
  background-image: none !important;
}

/* Liens nav desktop */
.header .header__menu-item,
.header .list-menu__item--link {
  color: rgba(255,255,255,.75) !important;
}
.header .header__menu-item:hover,
.header .list-menu__item--link:hover {
  color: #ffffffff !important;
  opacity: 1 !important;
}

/* Icônes (loupe + panier) — teal */
.header-wrapper .header__icon {
  color: #ffffffff !important;
}
.header-wrapper .header__icon svg {
  stroke: #ffffffff !important;
  fill: none !important;
}
.header-wrapper .header__icon:hover {
  color: rgba(255,255,255,.85) !important;
}
.header-wrapper .header__icon:hover svg {
  stroke: rgba(255,255,255,.85) !important;
}

/* Mega/dropdown menu */
.header__submenu {
  background: #111111 !important;
}
.header__submenu .list-menu__item--link {
  color: rgba(255,255,255,.7) !important;
}

/* Masquer tous les boutons de paiement dynamique */
.shopify-payment-button, 
.dynamic-checkout__content, 
.shopify-payment-button__button {
  display: none !important;
}