/* ============================================
   MAGNIFILLES — CSS PERSONNALISÉ
   Boutique de bijoux éthiques par Lylia
   ============================================ */

/* --- IMPORT GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap');

/* --- VARIABLES COULEURS MAGNIFILLES --- */
:root {
  --mag-pink: #FF6B8A;
  --mag-orange: #FF9F43;
  --mag-yellow: #FECA57;
  --mag-green: #48DBAA;
  --mag-blue: #5B9CFF;
  --mag-purple: #C56CF0;
  --mag-bg: #FAF8F5;
  --mag-bg-warm: #FFF9F5;
  --mag-text: #2D2D2D;
  --mag-text-light: #888;
  --mag-border: #F0EDE8;
  --mag-white: #FFFFFF;
  --mag-terra: #C4956A;
}

/* --- BASE & BODY --- */
body {
  font-family: 'Quicksand', sans-serif !important;
  background-color: var(--mag-bg) !important;
  color: var(--mag-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* --- HEADER / NAVIGATION --- */
#header {
  background: var(--mag-white) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
  border-bottom: none !important;
}

.header-nav {
  background: var(--mag-white) !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(to right, var(--mag-pink), var(--mag-orange), var(--mag-yellow), var(--mag-green), var(--mag-blue), var(--mag-purple)) 1 !important;
  max-height: 40px !important;
}

.header-top {
  background: var(--mag-white) !important;
  padding: 10px 0 !important;
}

/* Menu principal */
#_desktop_top_menu .top-menu > li > a,
.top-menu > li > a {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--mag-text) !important;
  padding: 10px 18px !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
}

#_desktop_top_menu .top-menu > li > a:hover,
.top-menu > li > a:hover {
  color: var(--mag-white) !important;
  background: linear-gradient(135deg, var(--mag-pink), var(--mag-purple)) !important;
}

/* --- TITRES --- */
h1, h2, .h1, .h2,
.featured-products h2,
.products-section-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: var(--mag-text) !important;
  letter-spacing: 0.5px !important;
}

h1, .h1 {
  font-size: 2.2rem !important;
}

.featured-products h2,
.products-section-title {
  text-align: center !important;
  font-size: 1.8rem !important;
  margin-bottom: 30px !important;
  position: relative !important;
  padding-bottom: 15px !important;
}

/* Rainbow underline under section titles */
.featured-products h2::after,
.products-section-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: linear-gradient(to right, var(--mag-pink), var(--mag-orange), var(--mag-yellow), var(--mag-green), var(--mag-blue), var(--mag-purple)) !important;
}

/* --- PRODUITS / CARTES --- */
.product-miniature {
  background: var(--mag-white) !important;
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  margin-bottom: 25px !important;
}

.product-miniature:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
}

.product-miniature .thumbnail-container {
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
}

.product-miniature img {
  border-radius: 20px 20px 0 0 !important;
  transition: transform 0.5s ease !important;
}

.product-miniature:hover img {
  transform: scale(1.05) !important;
}

/* Product title */
.product-miniature .product-title a,
.product-title a {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--mag-text) !important;
  transition: color 0.3s ease !important;
}

.product-miniature .product-title a:hover,
.product-title a:hover {
  color: var(--mag-pink) !important;
  text-decoration: none !important;
}

/* Product price */
.product-miniature .price,
.product-price {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  color: var(--mag-terra) !important;
  font-size: 18px !important;
}

/* Badge "Nouveau" */
.product-flag.new {
  background: linear-gradient(135deg, var(--mag-pink), var(--mag-purple)) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  top: 12px !important;
  left: 12px !important;
}

/* Wishlist heart */
.wishlist-button-add {
  border-radius: 50% !important;
  background: var(--mag-white) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
}

.wishlist-button-add:hover {
  background: var(--mag-pink) !important;
  color: white !important;
}

/* --- BOUTONS --- */
.btn-primary,
.add-to-cart,
button.btn-primary {
  background: var(--mag-text) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

.btn-primary:hover,
.add-to-cart:hover,
button.btn-primary:hover {
  background: linear-gradient(135deg, var(--mag-pink), var(--mag-purple)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(255, 107, 138, 0.3) !important;
}

.btn-secondary {
  border-radius: 50px !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 600 !important;
  border: 2px solid var(--mag-border) !important;
  transition: all 0.3s ease !important;
}

.btn-secondary:hover {
  border-color: var(--mag-pink) !important;
  color: var(--mag-pink) !important;
}

/* --- BLOC TEXTE PERSONNALISÉ (accueil Lylia) --- */
#custom-text {
  background: var(--mag-white) !important;
  border-radius: 30px !important;
  padding: 50px 40px !important;
  margin: 40px auto !important;
  max-width: 900px !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.04) !important;
  text-align: center !important;
  position: relative !important;
  border: 2px solid var(--mag-border) !important;
}

#custom-text h2, #custom-text h3, #custom-text h4 {
  font-family: 'Playfair Display', serif !important;
  color: var(--mag-text) !important;
}

#custom-text p {
  font-family: 'Quicksand', sans-serif !important;
  color: var(--mag-text-light) !important;
  line-height: 1.8 !important;
  font-size: 15px !important;
}

/* --- SECTIONS PRODUITS --- */
.featured-products,
#content .products {
  padding: 50px 0 !important;
}

/* Espacement des cartes produit */
.products .product-miniature {
  padding: 0 !important;
  margin-bottom: 30px !important;
}

/* --- PAGE PRODUIT --- */
.product-cover img {
  border-radius: 20px !important;
}

.product-information .product-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 2rem !important;
}

.product-information .current-price .price {
  font-size: 2rem !important;
  color: var(--mag-terra) !important;
  font-weight: 700 !important;
}

.product-description {
  font-family: 'Quicksand', sans-serif !important;
  line-height: 1.8 !important;
}

.product-quantities label,
.product-variants label {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 600 !important;
}

/* Tabs produit */
.product-tabs .nav-tabs .nav-link {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
}

.product-tabs .nav-tabs .nav-link.active {
  background: var(--mag-text) !important;
  color: var(--mag-white) !important;
  border: none !important;
}

/* --- FOOTER --- */
#footer {
  background: var(--mag-text) !important;
  color: rgba(255,255,255,0.7) !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(to right, var(--mag-pink), var(--mag-orange), var(--mag-yellow), var(--mag-green), var(--mag-blue), var(--mag-purple)) 1 !important;
  margin-top: 60px !important;
}

#footer h4,
#footer .h4 {
  font-family: 'Playfair Display', serif !important;
  color: var(--mag-white) !important;
  font-size: 16px !important;
  margin-bottom: 15px !important;
}

#footer a {
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Quicksand', sans-serif !important;
  transition: color 0.3s ease !important;
}

#footer a:hover {
  color: var(--mag-pink) !important;
}

#footer .footer-container {
  padding: 50px 0 30px !important;
}

/* --- NEWSLETTER --- */
.block_newsletter {
  background: linear-gradient(135deg, var(--mag-bg-warm), #FFF5F8) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  margin: 30px 0 !important;
}

.block_newsletter input[type="email"] {
  border-radius: 50px !important;
  border: 2px solid var(--mag-border) !important;
  padding: 12px 20px !important;
  font-family: 'Quicksand', sans-serif !important;
}

.block_newsletter input[type="email"]:focus {
  border-color: var(--mag-pink) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.15) !important;
}

.block_newsletter .btn-primary {
  border-radius: 50px !important;
  background: linear-gradient(135deg, var(--mag-pink), var(--mag-purple)) !important;
}

/* --- BREADCRUMB --- */
.breadcrumb {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 13px !important;
  background: transparent !important;
}

.breadcrumb a {
  color: var(--mag-text-light) !important;
}

/* --- PANIER & CHECKOUT --- */
.blockcart .header {
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}

.cart-products-count {
  background: var(--mag-pink) !important;
  border-radius: 50% !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
}

/* --- CATÉGORIES --- */
#category #js-product-list-header h1 {
  font-family: 'Playfair Display', serif !important;
  text-align: center !important;
  font-size: 2.2rem !important;
  margin-bottom: 10px !important;
}

#category #js-product-list-header .block-category p {
  text-align: center !important;
  font-family: 'Quicksand', sans-serif !important;
  color: var(--mag-text-light) !important;
  max-width: 600px !important;
  margin: 0 auto 30px !important;
}

/* --- PAGINATION --- */
.pagination .page-link {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.pagination .page-item.active .page-link {
  background: var(--mag-text) !important;
  border-color: var(--mag-text) !important;
}

/* --- ANIMATIONS --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-miniature {
  animation: fadeInUp 0.6s ease both;
}

.product-miniature:nth-child(1) { animation-delay: 0.1s; }
.product-miniature:nth-child(2) { animation-delay: 0.2s; }
.product-miniature:nth-child(3) { animation-delay: 0.3s; }
.product-miniature:nth-child(4) { animation-delay: 0.4s; }

/* --- LIEN "TOUS LES PRODUITS" --- */
.all-product-link {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  color: var(--mag-text) !important;
  border: 2px solid var(--mag-border) !important;
  border-radius: 50px !important;
  padding: 10px 25px !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 13px !important;
}

.all-product-link:hover {
  border-color: var(--mag-pink) !important;
  color: var(--mag-pink) !important;
  text-decoration: none !important;
}

/* --- RESPONSIVE / MOBILE --- */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 1.6rem !important;
  }

  .product-miniature {
    border-radius: 15px !important;
  }

  #custom-text {
    padding: 30px 20px !important;
    border-radius: 20px !important;
    margin: 20px 15px !important;
  }

  .featured-products h2,
  .products-section-title {
    font-size: 1.4rem !important;
  }
}

/* --- SCROLLBAR PERSONNALISÉE --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--mag-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--mag-pink), var(--mag-purple));
  border-radius: 4px;
}

/* --- SELECTION TEXTE --- */
::selection {
  background: var(--mag-pink);
  color: var(--mag-white);
}