.elementor-29689 .elementor-element.elementor-element-3cc34f8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-29689 .elementor-element.elementor-element-26739ca{width:100%;max-width:100%;}.elementor-29689 .elementor-element.elementor-element-c377f86{--display:flex;}/* Start custom CSS for html, class: .elementor-element-26739ca *//* Section gradient comme sur ton design Vercel */
.ba-coloring-hero {
  background: linear-gradient(180deg, #f3e6ff 0%, #ffeef8 40%, #ffffff 100%);
  padding: 80px 0 60px;
}

/* Conteneur centré comme Woodmart */
.ba-coloring-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Titre */
.ba-coloring-title {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;
  color: #222033;
  margin: 0 0 12px;
}

/* Sous-titre */
.ba-coloring-subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: #66627a;
  margin: 0 0 30px;
}

/* Ligne des boutons */
.ba-coloring-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Pills */
.ba-pill {
  display: inline-block;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #e4ddfb;
  background: #ffffff;
  color: #413a5f;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

/* Hover */
.ba-pill:hover {
  background: #f4ecff;
  border-color: #d3c5ff;
}

/* Pill active (violet BundleArtSVG) */
.ba-pill-active {
  background: linear-gradient(90deg, #7b3ff2 0%, #ff4fd8 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(123, 63, 242, 0.35);
}

/* Responsive */
@media (max-width: 768px) {
  .ba-coloring-title {
    font-size: 28px;
  }
  .ba-coloring-subtitle {
    font-size: 15px;
  }
  .ba-coloring-hero {
    padding: 60px 0 40px;
  }
}
/* Section */
.coloring-section {
  padding: 60px 20px;
  background: #ffffff;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.coloring-wrapper {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 40px;
  align-items: center;
}

/* Left side */
.coloring-left {
  flex: 1;
}

.coloring-image-box {
  background: #f6f1ff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.coloring-image-box img {
  width: 100%;
  border-radius: 14px;
  background: #eaeaea;
}

/* Right side */
.coloring-right {
  flex: 2;
}

.coloring-right h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
}

.coloring-desc {
  color: #555;
  margin-bottom: 24px;
  max-width: 600px;
}

/* Steps */
.coloring-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #f1f1f6;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.step-card h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.step-card h4 span {
  color: #6d4cff;
}

.step-card p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 900px) {
  .coloring-wrapper {
    flex-direction: column;
  }

  .coloring-steps {
    grid-template-columns: 1fr;
  }

  .coloring-right h2 {
    font-size: 26px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cc34f8 *//* FULL WIDTH HERO (Elementor Container Version) */
.ba-coloring-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  background: linear-gradient(180deg, #f3e6ff 0%, #ffeef8 40%, #ffffff 100%);
  padding: 90px 0 70px;
  position: relative;
  margin: 0;
}/* End custom CSS */
/* Start custom CSS for wd_products_tabs, class: .elementor-element-2d5d778 *//* =======================================================
   RESPONSIVE DESIGN (MOBILE, TABLETTE, PC)
   ======================================================= */

/* 1. CONFIGURATION GÉNÉRALE (Mobile First) */
.wd-products-tabs .products {
  display: grid !important;
  /* Mobile: 1 Colonne (Standard) */
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 16px !important; /* Espace sghir f telephone */
  padding: 15px !important;
  background-color: #FFFFFF !important;
}

/* 2. TABLETTE (Min 600px) */
@media (min-width: 600px) {
  .wd-products-tabs .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* 3. LAPTOP / PC SGHIR (Min 992px) */
@media (min-width: 992px) {
  .wd-products-tabs .products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    padding: 24px !important;
  }
}

/* 4. GRAND ÉCRAN (Min 1200px) - Bghiti 4 Hna */
@media (min-width: 1200px) {
  .wd-products-tabs .products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* =======================================================
   STYLE DE LA CARTE (Card Design)
   ======================================================= */

.wd-products-tabs .product-grid-item {
  background-color: #ffffff !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(0,0,0,0.02) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.wd-products-tabs .product-grid-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(139, 92, 246, 0.2) !important;
  border-color: #8B5CF6 !important;
}

/* --- IMAGE (Responsive Height) --- */
.wd-products-tabs .product-element-top {
  background-color: #f4f0fa !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  /* Hauteur : Sghira f Telephone, Kbira f PC */
  height: 200px !important; 
}

/* Zid chwia f hauteur dial image f PC bach tban 7ssen */
@media (min-width: 992px) {
  .wd-products-tabs .product-element-top {
    height: 240px !important;
  }
}

.wd-products-tabs .product-element-top img {
  position: static !important;
  max-width: 70% !important;
  max-height: 0% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* --- TITRE --- */
.wd-products-tabs .wd-entities-title,
.wd-products-tabs .product-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
  min-height: 40px !important; /* Bach les cartes yb9aw M9addin wakha titre twil */
}

.wd-products-tabs .wd-entities-title a {
   text-decoration: none !important;
   color: inherit !important;
}

/* =======================================================
   FOOTER: PRIX (GAUCHE) - BUTTON (DROITE)
   ======================================================= */

/* 1. Container li jame3hom bjoj */
.wd-products-tabs .product-information,
.wd-products-tabs .wrap-price,
.wd-products-tabs .price {
  display: flex !important;
  flex-direction: row !important; /* Yjiw f ster wa7ed */
  align-items: center !important; /* M9addin f lrtifa3 */
  justify-content: space-between !important; /* Wa7ed lissar, Wa7ed limen */
  width: 00% !important;
  flex-wrap: nowrap !important; /* Mayhbtouch l ster tani */
}

/* 2. Prix (Lissar) */
.wd-products-tabs .price > span:first-child, 
.wd-products-tabs .amount {
  font-size: 16px !important;
  color: #7C3AED !important;
  font-weight: 800 !important;
  margin-right: auto !important; /* Kaydfa3 l button l jiha lokhra */
  display: block !important;
}

/* 3. Button (Limen) - SIZE STANDARD */
.wd-products-tabs .wd-add-btn,
.wd-products-tabs .add_to_cart_button {
  background-color: #8B5CF6 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 0px 1px !important;
  border: none !important;
  box-shadow: 0 4px 6px rgba(139, 92, 246, 0.25) !important;
  transition: all 0.2s !important;
  
  /* Hado homa li kaydiroh f limen */
  margin-left: auto !important; /* Flexbox push to right */
  float: right !important; /* Backup method */
  
  min-width: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Maski Prix l9dim (Barré) ila kan mkhsser dikor */
.wd-products-tabs del {
    display: none !important;
}

/* Mobile Tweak: Button chwia kber bach ykon sahel fl click */
@media (max-width: 300px) {
    .wd-products-tabs .wd-add-btn,
    .wd-products-tabs .add_to_cart_button {
        padding: 10px 16px !important;
    }
}

.wd-products-tabs .wd-add-btn:hover,
.wd-products-tabs .add_to_cart_button:hover {
  background-color: #6D28D9 !important;
  transform: scale(1.05) !important;
}
/* =======================================================
   CENTERED TABS DESIGN (PILLS AU CENTRE)
   ======================================================= */

/* 1. L'Espace fin m7totin Tabs (CENTRED) */
.wd-products-tabs .wd-nav-tabs {
    display: flex !important;
    justify-content: center !important; /* Hada li kiyjibhom l'wesst */
    flex-wrap: wrap !important;
    gap: 12px !important;
    border-bottom: none !important;
    margin-bottom: 30px !important;
    padding: 0 5px !important;
}

/* 2. Style dyal Button (Inactive) */
.wd-products-tabs .wd-nav-tabs > li > a {
    background-color: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 50px !important; /* Pill Shape */
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-transform: capitalize !important;
    transition: all 0.2s ease !important;
}

/* 3. Style dyal Button Active (Mov) */
.wd-products-tabs .wd-nav-tabs > li.active > a,
.wd-products-tabs .wd-nav-tabs > li > a:hover {
    background-color: #8B5CF6 !important;
    color: #ffffff !important;
    border-color: #8B5CF6 !important;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3) !important;
}

/* 4. Hide underline */
.wd-nav-tabs-style-underline .nav-link-text:after {
    display: none !important;
}

/* 5. Center Header wrapper */
.wd-products-tabs .wd-tabs-header,
.wd-products-tabs .title-wrapper {
    display: block !important;
    text-align: center !important; /* Centrer le container */
}

/* Hide Big Title */
.wd-products-tabs .tabs-name, 
.wd-products-tabs .wd-entities-title {
    display: none !important;
}
/* 7. HIDE TAB TITLE */
.wd-products-tabs .wd-tabs-header,
.wd-products-tabs .title-wrapper {
    display: none !important;
}/* End custom CSS */