/** Shopify CDN: Minification failed

Line 140:0 All "@import" rules must come first

**/
/* ====================================================
   ZIYARA – Personnalisations visuelles
   1. Couleur hero (rouge plus chaud)
   2. Hauteur hero réduite d'1/4
   3. Boutons de navigation en "cases"
   4. Animations hover (desktop) + tap (mobile)
   5. Correctif : blocage du scroll horizontal parasite
   6. Éclaircissement léger des fonds sombres (mobile uniquement)
==================================================== */

/* ── 5 : FIX SCROLL HORIZONTAL PARASITE (mobile) ──
 * Les carrousels "swipe" (packs rituels, ingrédients) utilisent
 * des marges négatives (margin: 0 -20px / -24px) pour déborder
 * jusqu'aux bords de l'écran. Sans cette règle, ce débordement
 * élargit légèrement le document entier et rend TOUTE la page
 * scrollable horizontalement (le header/logo se décale quand on
 * glisse le doigt). On bloque ce débordement au niveau global
 * tout en gardant le scroll vertical intact.
 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── 1 & 2 : HERO ────────────────────────────────── */
.hero-premium {
  background: #7B2D1E !important;
  min-height: 75vh !important;
  padding: 70px 24px 40px !important;
}

/* ── 3 : BOUTONS DU MENU EN CASES ────────────────── */

/*
 * Supprime le gap entre les items pour que les
 * bordures se touchent et forment des cases.
 */
.overflow-menu::part(list) {
  gap: 0 !important;
  margin-inline: 0 !important;
}

/*
 * Chaque lien devient une "case" :
 * - bordure droite en séparateur
 * - padding harmonisé
 * - position relative pour le pseudo-élément d'animation
 */
.menu-list__list-item:not([slot='overflow']) {
  border-right: 1px solid rgba(255, 255, 255, 0.20);
  position: relative;
}

.menu-list__list-item:not([slot='overflow']):first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.20);
}

.menu-list__link {
  padding-inline: 20px !important;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.menu-list__link-title {
  padding-inline: 0 !important;
  position: relative;
  z-index: 2;
  transition: color 0.25s ease;
}

/* ── 4 : ANIMATION HOVER (desktop) ───────────────── */

/*
 * Pseudo-élément doré qui monte de bas en haut au hover.
 * z-index: 1 pour être sous le texte (z-index: 2).
 */
.menu-list__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #C9A84C 0%, #D4A93A 100%);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.menu-list__list-item:hover .menu-list__link::before,
.menu-list__list-item:focus-within .menu-list__link::before {
  transform: scaleY(1);
}

/* Texte passe en brun foncé quand le fond doré est visible */
.menu-list__list-item:hover .menu-list__link-title,
.menu-list__list-item:focus-within .menu-list__link-title {
  color: #4A1A0A;
}

/* Léger lift du lien au hover */
.menu-list__list-item:hover .menu-list__link {
  transform: translateY(-1px);
}

/* ── 4b : ANIMATION TAP (mobile / touch) ─────────── */

/*
 * Sur écrans tactiles (hover: none), on utilise :active
 * pour un retour visuel immédiat au toucher.
 */
@media (hover: none) {
  .menu-list__list-item:active .menu-list__link {
    transform: scale(0.95);
    transition: transform 0.10s ease;
  }

  .menu-list__list-item:active .menu-list__link::before {
    transform: scaleY(1);
    transition: transform 0.10s ease;
  }

  .menu-list__list-item:active .menu-list__link-title {
    color: #4A1A0A;
  }

  /* Barre de navigation mobile (menu-list--mobile) */
  .menu-list--mobile .menu-list__item:active {
    background: rgba(201, 168, 76, 0.25);
    border-radius: 4px;
    transition: background 0.10s ease;
  }
}

/* ── LOGO ZIYARA – police Cormorant, taille standard ─────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700&display=swap');

.header-logo {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-foreground) !important;
  text-decoration: none !important;
  justify-content: center !important;
}

.header-logo .header-logo__image-container {
  font-family: 'Cormorant Garamond', serif !important;
}


/* ── 6 : ÉCLAIRCISSEMENT DES FONDS SOMBRES (MOBILE UNIQUEMENT) ──
 * Sur mobile, les blocs bruns/bordeaux (hero, bandeau rituels,
 * ingrédients, barre de confiance, header/footer/annonce) occupent
 * toute la largeur de l'écran sans espace clair autour, ce qui donne
 * une impression de page plus sombre que sur desktop. On éclaircit
 * légèrement ces fonds, uniquement en dessous de 750px, sans toucher
 * au rendu desktop.
 */
@media (max-width: 749px) {
  .hero-premium { background: #9C3926 !important; }
  .rp-hero { background: #9C3926 !important; }
  .rp-strip { background: #7E2919 !important; }
  .rp-trust { background: #4A2C1B !important; }
  .ingredients-spotlight { background: #7E2919 !important; }
  .ingredient-card { background: #7E2919 !important; }

  .color-scheme-header-brand {
    --color-background: rgb(156, 57, 38) !important;
    --color-background-rgb: 156, 57, 38 !important;
  }
  .color-scheme-footer-brand {
    --color-background: rgb(126, 41, 25) !important;
    --color-background-rgb: 126, 41, 25 !important;
  }
  .color-scheme-announcement-brand {
    --color-background: rgb(126, 41, 25) !important;
    --color-background-rgb: 126, 41, 25 !important;
  }
}