/* =========================================================================
   Pedra Cain - Habillage de marque (couleurs issues du logo officiel)
   Ce fichier se charge APRES style.css et surcharge uniquement les variables
   de couleur + quelques ajustements esthétiques, sans modifier la structure
   du template.
   ========================================================================= */

html[data-theme-color="pedracain"] {
  --bs-body-color: #5b6472;
  --bs-heading-color: #16283F;
  --bs-heading-color-rgb: 22, 40, 63;

  /* Or/champagne : couleur d'accent (boutons, liens, icônes) */
  --bs-primary: #C9A24C;
  --bs-primary-rgb: 201, 162, 76;
  --bs-primary-text-emphasis: rgb(121, 97, 46);
  --bs-primary-bg-subtle: rgb(244, 236, 219);
  --bs-primary-border-subtle: rgb(232, 217, 185);
  --bs-primary-btn-hover-bg: rgb(171, 138, 65);
  --bs-primary-btn-hover-border-color: rgb(171, 138, 65);
  --primary-hover: rgb(171, 138, 65);

  /* Bleu marine profond : couleur secondaire (titres, fonds sombres, header) */
  --bs-secondary: #16283F;
  --bs-secondary-rgb: 22, 40, 63;
  --bs-secondary-text-emphasis: rgb(13, 24, 38);
  --bs-secondary-bg-subtle: rgb(208, 212, 217);
  --bs-secondary-border-subtle: rgb(196, 201, 208);
  --bs-secondary-btn-hover-bg: rgb(19, 34, 54);
  --bs-secondary-btn-hover-border-color: rgb(19, 34, 54);

  --bs-light: #F4EFE6;
  --bs-light-rgb: 244, 239, 230;
  --bs-light-text-emphasis: rgb(146, 143, 138);
  --bs-light-bg-subtle: rgb(250, 248, 245);
  --bs-light-border-subtle: rgb(238, 233, 224);
  --bs-light-btn-hover-bg: rgb(220, 215, 207);
  --bs-light-btn-hover-border-color: rgb(220, 215, 207);

  --border-color: #E3DFD4;
}

/* Petites retouches visuelles pour renforcer l'identité "élégante" de Pedra Cain */
html[data-theme-color="pedracain"] .site-header .logo-header img {
  max-height: 58px;
  width: auto;
}

/* Bannière intérieure des pages (À propos, Interprétation, Boutique...) :
   composant authentique .dz-bnr-inr du template, avec le bleu marine de la
   marque en teinte de superposition plutôt que le noir par défaut. */
html[data-theme-color="pedracain"] .dz-bnr-inr.overlay-black-middle:before {
  background: linear-gradient(rgba(22, 40, 63, 0.55), rgba(22, 40, 63, 0.8));
}

html[data-theme-color="pedracain"] .footer-logo img {
  max-height: 70px;
  width: auto;
}

html[data-theme-color="pedracain"] .btn-primary {
  color: #16283F;
  font-weight: 600;
}

html[data-theme-color="pedracain"] .site-footer.footer-dark {
  background-color: #16283F;
}

html[data-theme-color="pedracain"] .badge-circle {
  background-color: var(--bs-primary);
  color: #16283F;
}

/* Le slider d'accueil réutilise exactement le composant .hero-banner.style-1
   du template (hauteur fixe définie dans style.css) : on donne simplement au
   conteneur Swiper la même hauteur pour éviter tout écrasement/chevauchement
   avec l'en-tête transparent. */
.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
  height: 980px;
}
@media (max-width: 768px) {
  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide {
    height: auto;
    min-height: 700px;
  }
}
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
  background: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: 0 5px 20px rgba(22, 40, 63, .15);
}
.hero-swiper .swiper-button-next:after,
.hero-swiper .swiper-button-prev:after {
  font-size: 16px;
}
.hero-swiper .swiper-pagination-bullet-active {
  background: var(--bs-primary);
}

html[data-theme-color="pedracain"] .quote-form-card {
  background: #fff;
  border-radius: var(--radius-lg, 15px);
  box-shadow: 0 10px 30px rgba(22, 40, 63, 0.08);
  padding: 30px;
}

html[data-theme-color="pedracain"] .product-out-of-stock {
  color: var(--bs-danger, #D23636);
  font-weight: 600;
}

html[data-theme-color="pedracain"] .price-old {
  text-decoration: line-through;
  color: #9aa2ad;
  margin-right: 8px;
  font-weight: 400;
}

html[data-theme-color="pedracain"] .stars i {
  color: var(--bs-primary);
}

html[data-theme-color="pedracain"] .gallery-item {
  overflow: hidden;
  border-radius: var(--radius-md, 15px);
  position: relative;
}

html[data-theme-color="pedracain"] .gallery-item img {
  transition: transform .4s ease;
}

html[data-theme-color="pedracain"] .gallery-item:hover img {
  transform: scale(1.06);
}