/*
Theme Name: Woostify Child
Theme URI: https://woostify.com/
Description: Child theme for Woostify - ULTRA-PREMIUM TOP 1% UX/UI
Author: DirectSourcePro
Template: woostify
Version: 5.7 - NO STRETCH HEIGHT
*/

/* ==========================================================================
   SINGLE PRODUCT ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Å“ Custom layout (DSP template)
   ========================================================================== */

/* Reset & base wrapper */
.custom-product-wrapper,
.custom-product-wrapper * { box-sizing: border-box; }

.custom-product-wrapper{
  max-width: 1300px;
  margin: auto;
  padding: 30px 20px;
  background: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

/* Breadcrumb */
.custom-product-wrapper .breadcrumb{
  font-size: 12px;
  color: #666;
  margin-bottom: 20px;
}

/* Sticky cart bar */
.sticky-cart{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 2px solid #FF8C00;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
}

body.cart-drawer-open .sticky-cart{
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 1;
}

.sticky-stock{ font-size: 12px; font-weight: 700; color: #27ae60; }
.sticky-price{ font-size: 22px; font-weight: 700; color: #1a3a52; }

.sticky-actions{ display:flex; align-items:center; gap:10px; }
.sticky-actions input{
  width: 55px;
  padding: 6px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn-sticky-add{
  background: #FF8C00;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}
.btn-sticky-add:hover{ background: #e67e00; }

/* Main layout */
.main-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Gallery */
.dsp-gallery{
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 20px;
}

.dsp-main-image{
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}
.dsp-main-image img{
  width: 100%;
  height: auto;
  display: block;
}

.dsp-thumbs{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dsp-thumb{
  width: 100%;
  aspect-ratio: 1;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s;
}
.dsp-thumb:hover, .dsp-thumb.active{
  border-color: #FF8C00;
}
.dsp-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Info */
.dsp-product-info h1{
  font-size: 28px;
  font-weight: 700;
  color: #1a3a52;
  margin: 0 0 12px 0;
}

.dsp-price{
  font-size: 32px;
  font-weight: 700;
  color: #1a3a52;
  margin-bottom: 20px;
}

.dsp-short-desc{
  color: #555;
  line-height: 1.6;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 6px;
}

.dsp-add-to-cart{
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.dsp-qty-input{
  width: 70px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
}

.dsp-add-btn{
  flex: 1;
  background: #FF8C00;
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}
.dsp-add-btn:hover{
  background: #e67e00;
}

.dsp-meta{
  border-top: 1px solid #eee;
  padding-top: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

/* Product Tabs */
.dsp-tabs{
  margin-top: 40px;
}

.dsp-tab-buttons{
  display: flex;
  gap: 0;
  border-bottom: 2px solid #eee;
  margin-bottom: 24px;
}

.dsp-tab-button{
  background: none;
  border: none;
  padding: 12px 24px;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  position: relative;
}
.dsp-tab-button.active{
  color: #1a3a52;
}
.dsp-tab-button.active::after{
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #FF8C00;
}

.dsp-tab-content{
  display: none;
  animation: fadeIn 0.3s;
}
.dsp-tab-content.active{
  display: block;
}

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

.dsp-attributes-table{
  width: 100%;
  border-collapse: collapse;
}
.dsp-attributes-table tr{
  border-bottom: 1px solid #eee;
}
.dsp-attributes-table td{
  padding: 12px 0;
}
.dsp-attributes-table td:first-child{
  font-weight: 600;
  color: #1a3a52;
  width: 35%;
}

/* Mobile product */
@media (max-width: 768px) {
  .main-content{
    grid-template-columns: 1fr;
  }
  
  .dsp-gallery{
    grid-template-columns: 1fr;
  }
  
  .dsp-thumbs{
    flex-direction: row;
    overflow-x: auto;
  }
  
  .dsp-thumb{
    min-width: 80px;
  }
}

/* ==========================================================================
   PRODUCT ARCHIVES - ULTRA-PREMIUM TOP 1% UX/UI
   ========================================================================== */

/* --- 1. GLOBAL ARCHIVE SETUP --- */
body.dsp-archive-premium .woocommerce-breadcrumb {
    display: none !important;
}

body.dsp-archive-premium .woocommerce {
    max-width: 100% !important;
    padding: 0 !important;
}

body.dsp-archive-premium .site-content {
    padding-top: 0 !important;
}

/* --- 2. CUSTOM BREADCRUMB --- */
.dsp-crumb {
    max-width: 1300px;
    margin: 0 auto 24px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dsp-crumb a {
    color: rgba(15, 31, 45, 0.6);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.dsp-crumb a:hover {
    color: #FF6B35;
}

.dsp-crumb .breadcrumb_last {
    color: #1A3A52;
    font-weight: 800;
}

/* --- 3. HERO SECTION (ULTRA-AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â° TOP 1%) --- */
.dsp-hero {
    background: radial-gradient(
        ellipse at top,
        rgba(255, 107, 53, 0.08) 0%,
        rgba(26, 58, 82, 0.03) 50%,
        transparent 100%
    );
    padding: 48px 0 56px;
    position: relative;
    overflow: hidden;
}

.dsp-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.05) 0%,
        transparent 70%
    );
    pointer-events: none;
    animation: heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.dsp-hero-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.dsp-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items: start;
}

/* Hero Tag (AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â° AVEC ANIMATION) */
.dsp-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    background: linear-gradient(135deg, 
        rgba(255, 107, 53, 0.1) 0%, 
        rgba(255, 107, 53, 0.05) 100%);
    border: 1.5px solid rgba(255, 107, 53, 0.3);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #FF6B35;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.dsp-hero-tag::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: translate(-50%, -50%) rotate(0deg);
    animation: tagShine 3s linear infinite;
}

@keyframes tagShine {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.dsp-hero-tag .tag-icon {
    font-size: 16px;
    animation: tagIconPulse 2s ease-in-out infinite;
}

@keyframes tagIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.tag-pulse {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    background: #FF6B35;
    border-radius: 50%;
    opacity: 0;
    animation: tagPulseAnimation 2s ease-out infinite;
}

@keyframes tagPulseAnimation {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Hero Title (GRADIENT TEXT) */
.dsp-hero-title {
    font-size: 58px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px 0;
    background: linear-gradient(135deg, 
        #1A3A52 0%, 
        #2d5266 50%,
        #FF6B35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

/* Hero Description */
.dsp-hero-desc {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(15, 31, 45, 0.75);
    margin: 0 0 28px 0;
    max-width: 680px;
}

/* NOUVEAU : Hero Stats Bar (TOP 1% FEATURE) */
.dsp-hero-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-number {
    font-size: 28px;
    font-weight: 900;
    color: #1A3A52;
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 31, 45, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(0, 0, 0, 0.1);
}

/* Hero Badges (AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â°) */
.dsp-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.dsp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1.5px solid rgba(255, 107, 53, 0.2);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #1A3A52;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.dsp-hero-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 107, 53, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.dsp-hero-badge:hover::before {
    left: 100%;
}

.dsp-hero-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.15);
    border-color: rgba(255, 107, 53, 0.4);
}

.dsp-hero-badge .badge-icon {
    font-size: 18px;
}

/* Hero CTA Card (ULTRA-AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â° TOP 1%) */
.dsp-hero-cta {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
    transition: all 0.3s ease;
}

.dsp-hero-cta:hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* NOUVEAU : Status Online (TOP 1%) */
.cta-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 999px;
    align-self: flex-start;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #4CAF50;
    border-radius: 50%;
    position: relative;
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #4CAF50;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: statusRipple 2s ease-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes statusRipple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.status-text {
    font-size: 12px;
    font-weight: 700;
    color: #4CAF50;
}

.dsp-cta-title {
    font-size: 20px;
    font-weight: 900;
    color: #1A3A52;
    margin: 0;
}

.dsp-cta-subtitle {
    font-size: 14px;
    color: rgba(15, 31, 45, 0.65);
    margin: 0;
    line-height: 1.5;
}

.dsp-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

/* CTA Buttons (ULTRA-AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â°) */
.dsp-btn-primary,
.dsp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.dsp-btn-primary::before,
.dsp-btn-secondary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.dsp-btn-primary:hover::before,
.dsp-btn-secondary:hover::before {
    width: 300px;
    height: 300px;
}

.dsp-btn-primary {
    background: linear-gradient(135deg, #FF6B35 0%, #ff8c5a 100%);
    color: white;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.25);
}

.dsp-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(255, 107, 53, 0.35);
}

.dsp-btn-secondary {
    background: transparent;
    color: #1A3A52;
    border: 2px solid rgba(26, 58, 82, 0.2);
}

.dsp-btn-secondary:hover {
    background: rgba(26, 58, 82, 0.05);
    border-color: rgba(26, 58, 82, 0.3);
    transform: translateY(-2px);
}

.btn-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.btn-text {
    flex: 1;
    text-align: left;
}

.btn-arrow {
    font-size: 18px;
    font-weight: 900;
    transition: transform 0.3s ease;
}

.dsp-btn-primary:hover .btn-arrow,
.dsp-btn-secondary:hover .btn-arrow {
    transform: translateX(4px);
}

/* NOUVEAU : CTA Features (TOP 1%) */
.dsp-cta-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(15, 31, 45, 0.7);
}

.feature-icon {
    font-size: 16px;
}

.feature-text {
    font-weight: 600;
}

/* --- 4. VALUE PROPOSITIONS (ULTRA-AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â° AVEC ANIMATIONS) --- */
.dsp-value-props {
    max-width: 1300px;
    margin: 0 auto 48px;
    padding: 0 20px;
}

.dsp-value-grid {
    display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.dsp-value-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: valueCardFadeIn 0.6s ease forwards;
}

.dsp-value-card[data-animation-delay="0"] { animation-delay: 0s; }
.dsp-value-card[data-animation-delay="100"] { animation-delay: 0.1s; }
.dsp-value-card[data-animation-delay="200"] { animation-delay: 0.2s; }
.dsp-value-card[data-animation-delay="300"] { animation-delay: 0.3s; }

@keyframes valueCardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dsp-value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35, #ff8c5a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.dsp-value-card:hover::before {
    transform: scaleX(1);
}

.dsp-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 107, 53, 0.3);
}

.value-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, 
        rgba(255, 107, 53, 0.1) 0%, 
        rgba(255, 107, 53, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.dsp-value-card:hover .value-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, 
        rgba(255, 107, 53, 0.15) 0%, 
        rgba(255, 107, 53, 0.08) 100%);
}

.dsp-value-icon {
    font-size: 40px;
}

.dsp-value-title {
    font-size: 17px;
    font-weight: 800;
    color: #1A3A52;
    margin: 0 0 8px 0;
}

.dsp-value-desc {
    font-size: 14px;
    color: rgba(15, 31, 45, 0.65);
    line-height: 1.6;
    margin: 0;
}

/* --- 5. SUBCATEGORIES GRID (STYLE IDENTIQUE AUX PRODUITS - TOP 1%) --- */
.dsp-subcats {
    max-width: 1300px;
    margin: 0 auto 48px;
    padding: 0 20px;
}

/* NOUVEAU : Section Header (TOP 1% - IDENTIQUE PARTOUT) */
.section-header {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
}

.section-header::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35, #ff8c5a);
    margin: 16px auto 0;
    border-radius: 2px;
}

.dsp-section-title {
    font-size: 36px;
    font-weight: 900;
    color: #1A3A52;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    letter-spacing: -0.5px;
}

.title-icon {
    font-size: 40px;
}

.dsp-section-subtitle {
    font-size: 16px;
    color: rgba(15, 31, 45, 0.6);
    margin: 0;
    font-weight: 600;
}

.dsp-subcats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.dsp-subcat-card {
    position: relative;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: block;
}

.dsp-subcat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35, #ff8c5a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2;
}

.dsp-subcat-card:hover::before {
    transform: scaleX(1);
}

.dsp-subcat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    border-color: rgba(255, 107, 53, 0.3);
}

.dsp-subcat-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f8fafc;
}

.dsp-subcat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dsp-subcat-card:hover .dsp-subcat-image img {
    transform: scale(1.1);
}

.dsp-subcat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px;
}

.dsp-subcat-card:hover .dsp-subcat-overlay {
    opacity: 1;
}

.dsp-subcat-view {
    color: white;
    font-weight: 800;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 107, 53, 0.95);
    border-radius: 999px;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.dsp-subcat-card:hover .dsp-subcat-view {
    transform: translateY(0);
    background: #FF6B35;
}

.view-arrow {
    font-size: 18px;
    font-weight: 900;
    transition: transform 0.3s ease;
}

.dsp-subcat-card:hover .view-arrow {
    transform: translateX(4px);
}

.dsp-subcat-content {
    padding: 20px 24px;
}

.dsp-subcat-name {
    font-size: 18px;
    font-weight: 800;
    color: #1A3A52;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.dsp-subcat-count {
    font-size: 14px;
    color: rgba(15, 31, 45, 0.6);
    margin: 0;
    font-weight: 600;
}

.count-number {
    color: #FF6B35;
    font-weight: 800;
}

/* --- 6. PRODUCTS SECTION (ULTRA-AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â° - ALIGNÃƒÆ’Ã¢â‚¬Â° AVEC CATEGORIES) --- */
.dsp-products-section {
    max-width: 1300px;
    margin: 48px auto 32px;
    padding: 0 20px;
}

/* --- 7. PRODUCTS HEADER (COUNT + SORTING) --- */
.dsp-products-header {
    max-width: 1300px;
    margin: 0 auto 28px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.woocommerce-result-count {
    font-size: 14px;
    color: rgba(15, 31, 45, 0.6);
    font-weight: 600;
    margin: 0 !important;
}

.woocommerce-ordering {
    margin: 0 !important;
}

.woocommerce-ordering select {
    padding: 10px 36px 10px 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: white;
    font-size: 14px;
    font-weight: 600;
    color: #1A3A52;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231A3A52' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.woocommerce-ordering select:hover {
    border-color: #FF6B35;
}

.woocommerce-ordering select:focus {
    outline: none;
    border-color: #FF6B35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* --- 8. PRODUCTS GRID (STYLE IDENTIQUE AUX SUBCATEGORIES - TOP 1%) --- */
.woocommerce ul.products {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
}

/* --- 9. PRODUCT CARD (ULTRA-PREMIUM - IDENTIQUE AUX SUBCATEGORIES) --- */
.woocommerce ul.products li.product {
    position: relative !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35, #ff8c5a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2;
}

.woocommerce ul.products li.product:hover::before {
    transform: scaleX(1);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
    border-color: rgba(255, 107, 53, 0.3) !important;
}

/* Product Badges (AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â°) */
.dsp-badges-wrapper {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.dsp-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.dsp-badge-new {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: white;
}

.dsp-badge-sale {
    background: linear-gradient(135deg, #FF6B35, #ff8c5a);
    color: white;
}

.badge-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: badgePulse 2s ease-out infinite;
}

@keyframes badgePulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Image Container (IDENTIQUE AUX SUBCATEGORIES) */
.dsp-card-media {
    position: relative;
    width: 100%;
    height: 260px;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce ul.products li.product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.08) !important;
}

/* Product Content */
.woocommerce ul.products li.product a {
    text-decoration: none;
    color: inherit;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 17px;
    font-weight: 800;
    color: #1A3A52;
    line-height: 1.4;
    margin: 0;
    padding: 18px 20px 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 68px;
}

.woocommerce ul.products li.product .price {
    font-size: 20px;
    font-weight: 900;
    color: #1A3A52;
    padding: 0 20px 16px;
    margin: 0;
}

.woocommerce ul.products li.product .price del {
    opacity: 0.5;
    font-weight: 600;
    font-size: 15px;
    margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: #e74c3c;
}

/* Add to Cart Button (ULTRA-AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â°) */
.woocommerce ul.products li.product .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: calc(100% - 40px) !important;
    margin: 0 20px 16px !important;
    padding: 14px 24px !important;
    background: linear-gradient(135deg, #FF6B35, #ff8c5a) !important;
    color: white !important;
    border: none !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.woocommerce ul.products li.product .button::before {
    content: 'ÃƒÂ°Ã…Â¸Ã¢â‚¬ÂºÃ¢â‚¬â„¢';
    font-size: 16px;
}

.woocommerce ul.products li.product .button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.woocommerce ul.products li.product .button:hover::after {
    width: 300px;
    height: 300px;
}

.woocommerce ul.products li.product .button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35) !important;
}

/* Quick View Link (ULTRA-AMÃƒÆ’Ã¢â‚¬Â°LIORÃƒÆ’Ã¢â‚¬Â°) */
.dsp-quick-view-wrapper {
    padding: 0 20px 20px;
    margin-top: -8px;
}

.dsp-quick-view {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: 1.5px solid rgba(26, 58, 82, 0.15) !important;
    border-radius: 12px !important;
    color: rgba(15, 31, 45, 0.7) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.dsp-quick-view:hover {
    background: rgba(26, 58, 82, 0.05) !important;
    border-color: #1A3A52 !important;
    color: #1A3A52 !important;
}

.quick-icon {
    font-size: 16px;
}

.quick-arrow {
    font-size: 16px;
    font-weight: 900;
    transition: transform 0.3s ease;
}

.dsp-quick-view:hover .quick-arrow {
    transform: translateX(4px);
}

/* --- 10. PAGINATION (ULTRA-PREMIUM) --- */
.woocommerce nav.woocommerce-pagination {
    max-width: 1300px;
    margin: 48px auto 80px !important;
    padding: 0 20px;
}

.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    background: white;
    color: #1A3A52;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: #FF6B35;
    color: #FF6B35;
    transform: translateY(-2px);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: linear-gradient(135deg, #FF6B35, #ff8c5a);
    border-color: #FF6B35;
    color: white;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.3);
}

/* --- 11. RESPONSIVE DESIGN (ULTRA-OPTIMISÃƒÆ’Ã¢â‚¬Â°) --- */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .dsp-hero-inner,
    .dsp-value-props,
    .dsp-subcats,
    .dsp-products-section,
    .dsp-products-header,
    .woocommerce ul.products {
        max-width: 1400px;
    }
}

/* Tablet (1024px) */
@media (max-width: 1024px) {
    .dsp-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .dsp-hero-cta {
        position: static;
    }
    
    .dsp-hero-title {
        font-size: 44px;
    }
    
    .dsp-hero-stats {
        gap: 16px;
        padding: 18px 20px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .dsp-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    .dsp-hero-inner {
        padding: 32px 24px;
    }
    
    .dsp-hero-title {
        font-size: 36px;
    }
    
    .dsp-hero-desc {
        font-size: 16px;
    }
    
    .dsp-hero-stats {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .stat-item {
        min-width: calc(50% - 6px);
    }
    
    .stat-divider {
        display: none;
    }
    
    .dsp-section-title {
        font-size: 28px;
    }
    
    .title-icon {
        font-size: 32px;
    }
    
    .dsp-value-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .dsp-products-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .woocommerce-ordering select {
        width: 100%;
    }
    
    .dsp-card-media {
        height: 200px;
    }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
    .dsp-hero-inner {
        padding: 24px 20px;
    }
    
    .dsp-hero-title {
        font-size: 28px;
    }
    
    .dsp-hero-badges {
        flex-direction: column;
    }
    
    .dsp-hero-badge {
        width: 100%;
        justify-content: center;
    }
    
    .dsp-hero-stats {
        padding: 16px 18px;
    }
    
    .stat-number {
        font-size: 20px;
    }
    
    .stat-label {
        font-size: 10px;
    }
    
    .dsp-cta-buttons .dsp-btn-primary,
    .dsp-cta-buttons .dsp-btn-secondary {
        width: 100%;
    }
    
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .dsp-subcats-grid {
        grid-template-columns: 1fr;
    }
}

/* Extra Small (420px) */
@media (max-width: 420px) {
    .dsp-hero-title {
        font-size: 24px;
    }
    
    .dsp-section-title {
        font-size: 24px;
    }
    
    .title-icon {
        font-size: 28px;
    }
}

/* ==========================================================================
   SMOOTH SCROLL BEHAVIOR (TOP 1% UX)
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Loading Animation for Images */
.dsp-card-media img,
.dsp-subcat-image img {
    animation: imageLoad 0.6s ease;
}

@keyframes imageLoad {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Focus States for Accessibility (TOP 1% A11Y) */
a:focus-visible,
button:focus-visible,
select:focus-visible {
    outline: 3px solid #FF6B35;
    outline-offset: 2px;
}

/* Reduced Motion Support (TOP 1% A11Y) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* MODIFICATION : Container avec marge gauche fixe */
.dsp-hero-inner,
.dsp-value-props,
.dsp-subcats,
.dsp-products-section,
.dsp-products-header,
.woocommerce ul.products {
    max-width: 1300px;
    margin-left: 40px; /* Marge fixe ÃƒÆ’  gauche */
    margin-right: auto;
    padding-left: 0; /* Remove padding gauche car marge dÃƒÆ’Ã‚Â©jÃƒÆ’  prÃƒÆ’Ã‚Â©sente */
    padding-right: 40px; /* Garde padding droite */
}

/* Responsive : Sur mobile, centrer */
@media (max-width: 768px) {
    .dsp-hero-inner,
    .dsp-value-props,
    .dsp-subcats,
    .dsp-products-section,
    .dsp-products-header,
    .woocommerce ul.products {
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}


.dsp-subcats-grid,
.woocommerce ul.products {
    justify-content: center;  /* Centre les COLONNES */
    justify-items: center;    /* Centre les ITEMS */
}

.dsp-subcat-card,
.woocommerce ul.products li.product {
    width: 100%;
    max-width: 400px; /* Largeur optimale */
}

/* ============================================================================
   CATEGORY THUMBNAIL - Option 1: Next to Title
   AjoutÃƒÆ’Ã‚Â© le 15/01/2026 pour DirectSourcePro
   ============================================================================ */

/* Container principal pour le thumbnail + titre */
.dsp-title-with-thumbnail {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

/* Wrapper du thumbnail */
.dsp-category-thumbnail-wrapper {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* L'image thumbnail elle-mÃƒÆ’Ã‚Âªme */
.dsp-category-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid #fff;
    background: #f5f5f5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet hover sur le thumbnail */
.dsp-category-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Placeholder si pas d'image dÃƒÆ’Ã‚Â©finie */
.dsp-category-thumbnail-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A3A52 0%, #2d5266 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid #fff;
}

.dsp-category-thumbnail-placeholder .placeholder-icon {
    font-size: 36px;
    line-height: 1;
}

/* Wrapper pour le contenu du titre */
.dsp-title-content {
    flex: 1;
}

/* Assurer que le titre H1 reste stylÃƒÆ’Ã‚Â© correctement quand wrappÃƒÆ’Ã‚Â© */
.dsp-title-with-thumbnail h1,
.dsp-title-with-thumbnail .dsp-hero-title {
    margin: 0;
    line-height: 1.2;
}

/* RESPONSIVE - MOBILE */
@media (max-width: 768px) {
    /* Sur mobile, rÃƒÆ’Ã‚Â©duire la taille */
    .dsp-category-thumbnail,
    .dsp-category-thumbnail-placeholder {
        width: 60px;
        height: 60px;
        border-radius: 10px;
    }
    
    .dsp-category-thumbnail-placeholder .placeholder-icon {
        font-size: 28px;
    }
    
    /* RÃƒÆ’Ã‚Â©duire le gap */
    .dsp-title-with-thumbnail {
        gap: 15px;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    /* Sur trÃƒÆ’Ã‚Â¨s petits ÃƒÆ’Ã‚Â©crans, garder horizontal mais plus petit */
    .dsp-category-thumbnail,
    .dsp-category-thumbnail-placeholder {
        width: 50px;
        height: 50px;
    }
    
    .dsp-category-thumbnail-placeholder .placeholder-icon {
        font-size: 24px;
    }
    
    .dsp-title-with-thumbnail {
        gap: 12px;
    }
}

/* Animation au chargement (optionnel) */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.dsp-category-thumbnail {
    animation: fadeInScale 0.5s ease-out;
}

/* END OF CATEGORY THUMBNAIL */

/* ==========================================================================
   FREE SHIPPING / PROGRESS BAR (DSP)
   ========================================================================== */
.dsp-free-shipping-bar{
  margin: 0 0 50px 0 !important;
  padding: 40px 50px !important;
  background: linear-gradient(135deg, #1A3A52 0%, #2d5266 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(26, 58, 82, 0.35) !important;
  position: relative !important;
  overflow: hidden !important;
}
.woocommerce-checkout .dsp-free-shipping-bar{
  width: 100% !important;
  margin: 0 0 40px 0 !important;
}

.dsp-free-shipping-bar::before{
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%) !important;
  animation: shimmer 4s infinite !important;
  z-index: 1 !important;
}

@keyframes shimmer{ 0%{left:-100%;} 100%{left:100%;} }

.dsp-progress-header{ position: relative !important; z-index: 2 !important; margin-bottom: 25px !important; }
.dsp-progress-title{
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-align: center !important;
  text-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
  line-height: 1.4 !important;
}
.dsp-progress-title strong{
  color: #FF6B35 !important;
  font-size: 32px !important;
  text-shadow: 0 0 20px rgba(255,107,53,0.6) !important;
}

.dsp-progress-bar-container{ position: relative !important; z-index: 2 !important; margin: 30px 0 !important; }

.dsp-progress-bar{
  position: relative !important;
  height: 50px !important;
  background: #ffffff !important;
  border: 4px solid rgba(255,255,255,0.9) !important;
  border-radius: 30px !important;
  overflow: visible !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.15), 0 4px 15px rgba(0,0,0,0.2) !important;
}

.dsp-progress-fill{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  background: linear-gradient(90deg, #FF6B35 0%, #FF8C00 50%, #FFA500 100%) !important;
  border-radius: 26px !important;
  transition: width 1s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: 0 0 25px rgba(255,107,53,0.7), inset 0 2px 5px rgba(255,255,255,0.3) !important;
  animation: progressPulse 2.5s ease-in-out infinite !important;
}

@keyframes progressPulse{
  0%,100%{ box-shadow: 0 0 25px rgba(255,107,53,0.7), inset 0 2px 5px rgba(255,255,255,0.3); }
  50%{ box-shadow: 0 0 40px rgba(255,107,53,1), inset 0 2px 5px rgba(255,255,255,0.5); }
}

.dsp-progress-percentage{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1A3A52 !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8) !important;
  z-index: 3 !important;
  letter-spacing: 1px !important;
}

.dsp-progress-footer{ position: relative !important; z-index: 2 !important; margin-top: 25px !important; text-align: center !important; }

.dsp-progress-subtitle{
  font-size: 18px !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.6 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}
.dsp-progress-subtitle strong{
  color: #FF6B35 !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  text-shadow: 0 0 15px rgba(255,107,53,0.6) !important;
}

.dsp-progress-amounts{
  font-size: 17px !important;
  color: rgba(255,255,255,0.95) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.dsp-free-shipping-bar.unlocked{
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
  animation: successBounce 0.6s ease-out !important;
}

@keyframes successBounce{ 0%{transform:scale(0.95);} 50%{transform:scale(1.03);} 100%{transform:scale(1);} }

.dsp-shipping-success{
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  justify-content: center !important;
}

.dsp-success-icon{
  font-size: 60px !important;
  animation: successPulse 1.5s ease-in-out infinite !important;
}

@keyframes successPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}

.dsp-success-content{
  text-align: left !important;
}

.dsp-success-title{
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  text-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
}

.dsp-success-subtitle{
  font-size: 16px !important;
  color: rgba(255,255,255,0.95) !important;
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   CART ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Å“ Totals styling
   ========================================================================== */
.woocommerce-cart{
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.woocommerce-cart .cart_totals{
  background: #ffffff !important;
  border: 3px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 30px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

.woocommerce-cart .cart_totals h2{
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1A3A52 !important;
  margin-bottom: 25px !important;
  text-transform: uppercase !important;
}

.woocommerce-cart .cart_totals .order-total{
  background: linear-gradient(135deg, #fff7ef 0%, #fff 100%) !important;
  border: 4px solid #FF6B35 !important;
  border-left: 10px solid #FF6B35 !important;
  border-radius: 10px !important;
  padding: 15px !important;
  margin-top: 15px !important;
}

.woocommerce-cart .cart_totals .order-total th{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1A3A52 !important;
  text-transform: uppercase !important;
}

.woocommerce-cart .cart_totals .order-total td{
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #FF6B35 !important;
}

/* Trust badges */
.dsp-cart-trust-message{
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 20px !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

.dsp-cart-trust-message .trust-item{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A3A52 !important;
}

.dsp-cart-trust-message .trust-icon{
  font-size: 20px !important;
}

.woocommerce-checkout .woocommerce-checkout-payment{
  background: #ffffff !important;
  border: 3px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 25px !important;
}

.woocommerce-checkout #payment{
  background: transparent !important;
}

.woocommerce-checkout #place_order{
  width: 100% !important;
  padding: 18px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C00 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: 0 4px 15px rgba(255,107,53,0.4) !important;
  margin-top: 20px !important;
}

.woocommerce-checkout #place_order:hover{
  background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255,107,53,0.6) !important;
}

/* Payment plan box */
.dsp-manual-deposit-box{
  background: linear-gradient(135deg, #fff7ef 0%, #ffffff 100%) !important;
  border: 3px solid #FF6B35 !important;
  border-left: 8px solid #FF6B35 !important;
  padding: 28px 22px !important;
  margin: 30px 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(255,107,53,0.25) !important;
  width: 100% !important;
  max-width: 100% !important;
}

.dsp-manual-deposit-box h3{
  color: #1A3A52 !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 3px solid #FF6B35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dsp-payment-grid{ display: grid !important; gap: 11px !important; margin-bottom: 18px !important; }

.dsp-payment-row{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px !important;
  background: #fff !important;
  border-radius: 10px !important;
  border-left: 5px solid #4CAF50 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  gap: 10px !important;
}
.dsp-payment-row.future{ border-left-color: #FFC107 !important; opacity: 0.9 !important; }

.dsp-payment-label{ flex: 1 !important; }

.dsp-payment-label-main{
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1A3A52 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dsp-payment-label-sub{
  font-size: 12px !important;
  color: #666 !important;
  margin-top: 4px !important;
}

.dsp-today-badge{
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
  color: #fff !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 9px !important;
}

.dsp-payment-amount{
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #FF6B35 !important;
  white-space: nowrap !important;
}
.dsp-payment-row.future .dsp-payment-amount{ font-size: 18px !important; color: #666 !important; }

.dsp-security-box{
  margin-top: 16px !important;
  padding: 15px 18px !important;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%) !important;
  border-radius: 10px !important;
  border: 2px solid #4CAF50 !important;
  border-left: 5px solid #4CAF50 !important;
}
.dsp-security-box p{
  font-size: 12px !important;
  color: #2e7d32 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 10px !important;
}

.dsp-security-icon{
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* Responsive (shared) */
@media (max-width: 768px){
  .dsp-free-shipping-bar{ padding: 30px 25px !important; }
  .dsp-progress-title{ font-size: 22px !important; }
  .dsp-progress-bar{ height: 40px !important; }
  .dsp-cart-trust-message{ 
    flex-direction: column !important; 
    gap: 10px !important;
  }
  .dsp-manual-deposit-box{
    padding: 20px 15px !important;
  }
  .dsp-shipping-success{
    flex-direction: column !important;
    text-align: center !important;
  }
  .dsp-success-content{
    text-align: center !important;
  }
}
@media (max-width: 576px){
  .dsp-payment-row{ flex-direction: column !important; align-items: flex-start !important; }
  .dsp-payment-amount{ align-self: flex-end !important; margin-top: 8px !important; }
  .dsp-progress-title{ font-size: 20px !important; }
  .dsp-progress-title strong{ font-size: 24px !important; }
  .dsp-success-title{ font-size: 22px !important; }
}


/* Cacher "Explore Popular Categories" sur les archives */
.woocommerce-page section:has(h2:contains("Explore Popular Categories")) {
    display: none !important;
}

/* Alternative si ÃƒÆ’Ã‚Â§a ne marche pas */
.related-categories,
.popular-categories,
.woocommerce .product-categories-section {
    display: none !important;
}

/* ============================================================================
   UX IMPROVEMENTS v2.0 - Janvier 2026
   ============================================================================ */

/* MODIF 2: Hero plus compact - Description retirÃƒÆ’Ã‚Â©e */
.dsp-hero {
    padding: 30px 0 !important; /* RÃƒÆ’Ã‚Â©duit de 60px ÃƒÆ’  30px */
}

.dsp-hero-desc {
    display: none; /* Description cachÃƒÆ’Ã‚Â©e du hero */
}

.dsp-hero-main {
    gap: 20px; /* RÃƒÆ’Ã‚Â©duit l'espacement */
}

/* MODIF 2: Section description aprÃƒÆ’Ã‚Â¨s les produits */
.dsp-category-description {
    max-width: 1300px;
    margin: 60px auto 40px;
    padding: 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    border-left: 6px solid #FF6B35;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.description-inner {
    max-width: 900px;
}

.description-title {
    font-size: 24px;
    font-weight: 800;
    color: #1A3A52;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.description-title .title-icon {
    font-size: 28px;
}

.description-content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.description-content p {
    margin-bottom: 16px;
}

/* MODIF 5: Avatars techniciens dans CTA card */
.dsp-cta-team {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(26,58,82,0.05) 0%, rgba(255,107,53,0.05) 100%);
    border-radius: 10px;
    margin: 20px 0;
    border: 1px solid rgba(26,58,82,0.1);
}

.team-avatars {
    display: flex;
    margin-right: 5px;
}

.team-avatars .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    border: 3px solid white;
    margin-left: -12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.team-avatars .avatar:first-child {
    margin-left: 0;
    z-index: 3;
}

.team-avatars .avatar:nth-child(2) {
    z-index: 2;
}

.team-avatars .avatar:nth-child(3) {
    z-index: 1;
}

.team-avatars .avatar:hover {
    transform: translateY(-3px) scale(1.1);
    z-index: 10;
}

.team-text {
    font-size: 14px;
    color: #1A3A52;
    line-height: 1.4;
}

.team-text strong {
    font-weight: 700;
    color: #FF6B35;
}

/* MODIF 6: Breadcrumb avec fond colorÃƒÆ’Ã‚Â© */
.dsp-crumb {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff7ef 100%);
    padding: 15px 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(26,58,82,0.1);
    transition: all 0.3s ease;
}

.dsp-crumb-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    font-size: 14px;
    color: #666;
}

.dsp-crumb a {
    color: #1A3A52;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.dsp-crumb a:hover {
    color: #FF6B35;
}

/* MODIF 6: Breadcrumb sticky au scroll */
.dsp-crumb.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* MODIF 9: Sidebar search sticky en haut */
.dsp-sidebar-search-wrapper {
    position: sticky;
    top: 20px;
    z-index: 10;
    margin-bottom: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 20px;
}

.dsp-search-form {
    width: 100%;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.dsp-search-form .search-field {
    width: 100%;
    padding: 14px 50px 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.dsp-search-form .search-field:focus {
    outline: none;
    border-color: #FF6B35;
    background: white;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
}

.dsp-search-form .search-field::placeholder {
    color: #999;
}

.dsp-search-form .search-submit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #FF6B35 0%, #FF8C00 100%);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsp-search-form .search-submit:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(255,107,53,0.4);
}

.dsp-search-form .search-icon {
    font-size: 18px;
}

/* Responsive pour les nouvelles modifs */
@media (max-width: 768px) {
    .dsp-category-description {
        margin: 40px 20px 20px;
        padding: 25px 20px;
    }
    
    .description-title {
        font-size: 20px;
    }
    
    .description-content {
        font-size: 14px;
    }
    
    .dsp-cta-team {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .team-avatars {
        justify-content: center;
    }
    
    .dsp-crumb-inner {
        padding: 0 20px;
        font-size: 13px;
    }
    
    .dsp-sidebar-search-wrapper {
        padding: 15px;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .team-avatars .avatar {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }
    
    .team-text {
        font-size: 13px;
    }
    
    .dsp-search-form .search-field {
        padding: 12px 45px 12px 15px;
        font-size: 14px;
    }
    
    .dsp-search-form .search-submit {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================================
   UX IMPROVEMENTS v2.1 - Janvier 2026
   Photo + Titre horizontal | Value Props optimisÃƒÆ’Ã‚Â©e | "Why choose our"
   ============================================================================ */

/* MODIF 1: Photo + Titre layout horizontal */
.dsp-title-with-thumbnail-v21 {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 0; /* Pas de marge car stats intÃƒÆ’Ã‚Â©grÃƒÆ’Ã‚Â©s */
}

.dsp-category-thumbnail-wrapper-v21 {
    flex-shrink: 0;
}

.dsp-category-thumbnail-v21 {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 4px solid #fff;
    background: #f5f5f5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dsp-category-thumbnail-v21:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.dsp-category-thumbnail-placeholder-v21 {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A3A52 0%, #2d5266 100%);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 4px solid #fff;
}

.dsp-category-thumbnail-placeholder-v21 .placeholder-icon {
    font-size: 80px;
    line-height: 1;
}

.dsp-title-stats-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dsp-hero-title-v21 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1A3A52 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Stats bar v2.1 - sous le titre */
.dsp-hero-stats-v21 {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-top: 2px solid rgba(26,58,82,0.1);
    border-bottom: 2px solid rgba(26,58,82,0.1);
}

.dsp-hero-stats-v21 .stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dsp-hero-stats-v21 .stat-number {
    font-size: 28px;
    font-weight: 800;
    color: #FF6B35;
    line-height: 1;
    margin-bottom: 5px;
}

.dsp-hero-stats-v21 .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dsp-hero-stats-v21 .stat-divider {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, rgba(26,58,82,0.2) 50%, transparent 100%);
}

/* MODIF 2: Value Props - padding optimisÃƒÆ’Ã‚Â© */
.dsp-value-props {
    padding: 40px 0 !important; /* RÃƒÆ’Ã‚Â©duit de 60px ÃƒÆ’  40px */
}

.dsp-value-grid {
    gap: 20px !important; /* RÃƒÆ’Ã‚Â©duit de 30px ÃƒÆ’  20px */
}

/* MODIF 3: Description title - "Why choose our" avec icon ÃƒÂ°Ã…Â¸Ã¢â‚¬â„¢Ã‚Â¡ */
.dsp-category-description .description-title {
    color: #1A3A52;
}

.dsp-category-description .title-icon {
    color: #FF6B35;
}

/* Hide old version styles (v2.0) si prÃƒÆ’Ã‚Â©sents */
.dsp-title-with-thumbnail {
    display: none !important;
}

.dsp-hero-stats:not(.dsp-hero-stats-v21) {
    display: none !important;
}

.dsp-hero-badges {
    display: none !important;
}

/* Responsive v2.1 */
@media (max-width: 992px) {
    .dsp-title-with-thumbnail-v21 {
        gap: 20px;
    }
    
    .dsp-category-thumbnail-v21,
    .dsp-category-thumbnail-placeholder-v21 {
        width: 150px;
        height: 150px;
    }
    
    .dsp-category-thumbnail-placeholder-v21 .placeholder-icon {
        font-size: 60px;
    }
    
    .dsp-hero-title-v21 {
        font-size: 28px !important;
    }
    
    .dsp-hero-stats-v21 {
        gap: 15px;
    }
    
    .dsp-hero-stats-v21 .stat-number {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .dsp-title-with-thumbnail-v21 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .dsp-category-thumbnail-v21,
    .dsp-category-thumbnail-placeholder-v21 {
        width: 120px;
        height: 120px;
        border-radius: 12px;
    }
    
    .dsp-category-thumbnail-placeholder-v21 .placeholder-icon {
        font-size: 48px;
    }
    
    .dsp-title-stats-content {
        width: 100%;
        align-items: center;
    }
    
    .dsp-hero-title-v21 {
        font-size: 24px !important;
        text-align: center;
    }
    
    .dsp-hero-stats-v21 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 20px;
        padding: 15px 0;
    }
    
    .dsp-hero-stats-v21 .stat-item {
        align-items: center;
    }
    
    .dsp-hero-stats-v21 .stat-number {
        font-size: 22px;
    }
    
    .dsp-hero-stats-v21 .stat-label {
        font-size: 11px;
    }
    
    .dsp-hero-stats-v21 .stat-divider {
        display: none; /* Cache dividers sur mobile */
    }
    
    .dsp-value-props {
        padding: 30px 0 !important;
    }
}

@media (max-width: 576px) {
    .dsp-category-thumbnail-v21,
    .dsp-category-thumbnail-placeholder-v21 {
        width: 100px;
        height: 100px;
    }
    
    .dsp-category-thumbnail-placeholder-v21 .placeholder-icon {
        font-size: 40px;
    }
    
    .dsp-hero-title-v21 {
        font-size: 20px !important;
    }
    
    .dsp-hero-stats-v21 .stat-number {
        font-size: 20px;
    }
    
    .dsp-hero-stats-v21 .stat-label {
        font-size: 10px;
    }
}
/* ============================================================================
   UX v2.2 FINAL - Photo+Title | Stats Bulles | Badges Hero
   ============================================================================ */

/* 1. PHOTO + TITLE horizontal */
.dsp-photo-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
    margin-bottom: 30px !important;
}

.dsp-category-thumbnail-wrapper-v22 {
    flex-shrink: 0 !important;
}

.dsp-category-thumbnail-v22 {
    width: 200px !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    border: 4px solid #fff !important;
    transition: transform 0.3s ease !important;
}

.dsp-category-thumbnail-v22:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
}

.dsp-category-thumbnail-placeholder-v22 {
    width: 200px !important;
    height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1A3A52 0%, #2d5266 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    border: 4px solid #fff !important;
}

.dsp-category-thumbnail-placeholder-v22 .placeholder-icon {
    font-size: 80px !important;
}

.dsp-hero-title-v22 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #1A3A52 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* 2. STATS CARDS - 4 bulles design */
.dsp-hero-stats-cards {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    flex-wrap: wrap !important;
}

.stat-card {
    flex: 1 !important;
    min-width: 120px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 16px !important;
    padding: 25px 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

.stat-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    border-color: #FF6B35 !important;
}

.stat-card .stat-number {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #1A3A52 !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
}

.stat-card .stat-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* 3. BADGES HERO */
.dsp-hero-badges-v22 {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.hero-badge-item {
    flex: 1 !important;
    min-width: 180px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 20px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

.hero-badge-item:hover {
    border-color: #FF6B35 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(255,107,53,0.2) !important;
}

.hero-badge-item .badge-icon {
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

.hero-badge-item .badge-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1A3A52 !important;
    line-height: 1.3 !important;
}

/* Hide old versions */
.dsp-title-with-thumbnail,
.dsp-title-with-thumbnail-v21,
.dsp-title-stats-content {
    display: none !important;
}

.dsp-hero-stats-v21 {
    display: none !important;
}

/* Responsive v2.2 */
@media (max-width: 768px) {
    .dsp-photo-title-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }
    
    .dsp-category-thumbnail-v22,
    .dsp-category-thumbnail-placeholder-v22 {
        width: 120px !important;
        height: 120px !important;
    }
    
    .dsp-hero-title-v22 {
        font-size: 24px !important;
        text-align: center !important;
    }
    
    .stat-card {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: 0 !important;
        padding: 20px 15px !important;
    }
    
    .stat-card .stat-number {
        font-size: 32px !important;
    }
    
    .hero-badge-item {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 0 !important;
        padding: 12px 15px !important;
    }
    
    .hero-badge-item .badge-icon {
        font-size: 20px !important;
    }
    
    .hero-badge-item .badge-text {
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    .dsp-category-thumbnail-v22,
    .dsp-category-thumbnail-placeholder-v22 {
        width: 100px !important;
        height: 100px !important;
    }
    
    .dsp-hero-title-v22 {
        font-size: 20px !important;
    }
    
    .stat-card .stat-number {
        font-size: 28px !important;
    }
    
    .stat-card .stat-label {
        font-size: 10px !important;
    }
}

/* ============================================================================
   v2.3 CORRECTIVE - Centrage + Suppression Value Props + Alignements
   ============================================================================ */

/* 1. HERO CONTAINER CENTRÃƒÆ’Ã¢â‚¬Â° avec padding */
.dsp-hero-inner {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* 2. SUPPRIMER Value Props (redondance) */
.dsp-value-props {
    display: none !important;
}

/* 3. ALIGNEMENTS GÃƒÆ’Ã¢â‚¬Â°NÃƒÆ’Ã¢â‚¬Â°RAUX */

/* Hero section padding */
.dsp-hero {
    padding: 40px 0 !important;
}

/* Hero grid centrÃƒÆ’Ã‚Â© */
.dsp-hero-grid {
    max-width: 100% !important;
    margin: 0 !important;
}

/* Photo + Title wrapper - meilleur espacement */
.dsp-photo-title-wrapper {
    margin-bottom: 35px !important;
}

/* Stats cards - meilleur espacement */
.dsp-hero-stats-cards {
    margin-bottom: 35px !important;
}

/* Badges - meilleur espacement */
.dsp-hero-badges-v22 {
    margin-bottom: 0 !important;
}

/* Container gÃƒÆ’Ã‚Â©nÃƒÆ’Ã‚Â©ral pour subcategories et products */
.woocommerce-page .site-content,
.woocommerce-page #primary {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* Browse Products section centrÃƒÆ’Ã‚Â© */
section:has(h2:contains("Browse Products")) {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* Description section centrÃƒÆ’Ã‚Â© (dÃƒÆ’Ã‚Â©jÃƒÆ’  bon mais on force) */
.dsp-category-description {
    max-width: 1300px !important;
    margin: 60px auto 40px !important;
    padding: 40px !important;
}

/* Responsive v2.3 */
@media (max-width: 1366px) {
    .dsp-hero-inner {
        max-width: 1200px !important;
        padding: 0 30px !important;
    }
}

@media (max-width: 992px) {
    .dsp-hero-inner {
        padding: 0 25px !important;
    }
    
    .woocommerce-page .site-content,
    .woocommerce-page #primary {
        padding: 0 25px !important;
    }
}

@media (max-width: 768px) {
    .dsp-hero-inner {
        padding: 0 20px !important;
    }
    
    .dsp-hero {
        padding: 30px 0 !important;
    }
    
    .woocommerce-page .site-content,
    .woocommerce-page #primary {
        padding: 0 20px !important;
    }
    
    .dsp-category-description {
        margin: 40px 20px 20px !important;
        padding: 25px 20px !important;
    }
}

@media (max-width: 576px) {
    .dsp-hero-inner {
        padding: 0 15px !important;
    }
    
    .woocommerce-page .site-content,
    .woocommerce-page #primary {
        padding: 0 15px !important;
    }
}

/* ============================================================================
   v2.4 FINAL - Centrage complet + Gradient stats
   ============================================================================ */

/* 1. BROWSE PRODUCTS - Titre + sous-titre centrÃƒÆ’Ã‚Â©s */
.woocommerce-products-header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.woocommerce-products-header h1,
.woocommerce-products-header h2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto 10px !important;
}

/* IcÃƒÆ’Ã‚Â´ne caddie + texte Browse Products */
.woocommerce-products-header h2::before,
.woocommerce-products-header h1::before {
    margin-right: 10px !important;
}

/* Sous-titre "Showing X premium..." */
.woocommerce-result-count,
.woocommerce-products-header .woocommerce-result-count {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Si le titre est dans une section */
section h2:contains("Browse"),
.products-header h2 {
    text-align: center !important;
    justify-content: center !important;
}

/* 2. PRODUITS GRID - Centrer les produits */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.columns-4,
ul.products {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
}

/* Produit individuel centrÃƒÆ’Ã‚Â© */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 auto 30px !important;
}

/* Si 1 seul produit, le centrer vraiment */
.woocommerce ul.products:has(li.product:only-child),
.woocommerce-page ul.products:has(li.product:only-child) {
    justify-content: center !important;
}

/* 3. WHY CHOOSE - Titre centrÃƒÆ’Ã‚Â© + Container centrÃƒÆ’Ã‚Â© + Texte ÃƒÆ’  gauche */
.dsp-category-description {
    max-width: 900px !important;
    margin: 60px auto 40px !important;
    padding: 40px !important;
    text-align: center !important;
}

.dsp-category-description .description-title {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    margin: 0 auto 20px !important;
}

.dsp-category-description .description-inner {
    max-width: 100% !important;
    margin: 0 auto !important;
}

.dsp-category-description .description-content {
    text-align: left !important;
    margin-top: 20px !important;
}

.dsp-category-description .description-content p {
    text-align: left !important;
}

/* 4. STATS NUMBERS - Gradient bleuÃƒÂ¢Ã¢â‚¬ Ã¢â‚¬â„¢orange FORCÃƒÆ’Ã¢â‚¬Â° */
.stat-card .stat-number {
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
    background: linear-gradient(135deg, #1A3A52 0%, #FF6B35 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Support Safari */
@supports (-webkit-background-clip: text) {
    .stat-card .stat-number {
        background: linear-gradient(135deg, #1A3A52 0%, #FF6B35 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* Fallback pour navigateurs anciens */
@supports not (-webkit-background-clip: text) {
    .stat-card .stat-number {
        color: #FF6B35 !important;
    }
}

/* Responsive v2.4 */
@media (max-width: 768px) {
    .dsp-category-description {
        margin: 40px 20px 20px !important;
        padding: 25px 20px !important;
        text-align: center !important;
    }
    
    .dsp-category-description .description-title {
        font-size: 20px !important;
        text-align: center !important;
    }
    
    .dsp-category-description .description-content {
        text-align: left !important;
        font-size: 14px !important;
    }
    
    .woocommerce ul.products li.product {
        margin: 0 auto 20px !important;
    }
}

@media (max-width: 576px) {
    .stat-card .stat-number {
        font-size: 28px !important;
    }
}

/* ============================================================================
   v2.5 FINAL - Centrage ABSOLU de tout
   ============================================================================ */

/* A. TOUT CENTRER - Renforcement */

/* Browse by Category - Titre + Grid */
.category-grid-header,
h2:contains("Browse by Category"),
.woocommerce-page h2:contains("Browse"),
section h2 {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto 20px !important;
}

/* C2. SUBCATEGORIES - Flex centered */
.subcategories,
.subcategories-grid,
.product-categories,
ul.products.columns-4,
.woocommerce .products,
.category-grid {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Subcategory items */
.subcategory-item,
.product-category {
    margin: 0 !important;
}

/* E. PAGE LAYOUT GLOBAL - Container centrÃƒÆ’Ã‚Â© PARTOUT */
.woocommerce-page .site-content,
.woocommerce-page #primary,
.woocommerce-page .content-area,
.woocommerce-page main {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
}

/* Force container centrÃƒÆ’Ã‚Â© sur archives */
.archive.woocommerce .site-content,
.tax-product_cat .site-content {
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* Products section container */
.woocommerce-page .woocommerce,
.woocommerce-page .products-wrapper {
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* Browse Products - Renforcement centrage */
.woocommerce-products-header,
.products-header,
section:has(.products) > h2 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 0 auto 30px !important;
}

/* Browse Products heading specific */
h2:contains("Browse Products"),
.products-heading {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Icon + Text inline centered */
h2 .icon,
h2 svg {
    margin-right: 10px !important;
}

/* Products grid - Centrage absolu */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* Individual product item */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 10px 30px !important;
}

/* Why choose - Renforcement */
.dsp-category-description {
    max-width: 900px !important;
    margin: 60px auto 40px !important;
    padding: 40px !important;
    text-align: center !important;
}

.dsp-category-description .description-title {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
}

/* Override theme layouts */
.woocommerce-page.columns-2 #primary {
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* Remove sidebar conflicts */
.woocommerce-page .sidebar-active #primary {
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* Force fullwidth container on category pages */
.tax-product_cat .site-content,
.post-type-archive-product .site-content {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* Responsive v2.5 */
@media (max-width: 1366px) {
    .woocommerce-page .site-content,
    .woocommerce-page #primary {
        max-width: 1200px !important;
        padding: 0 30px !important;
    }
}

@media (max-width: 992px) {
    .woocommerce-page .site-content,
    .woocommerce-page #primary {
        padding: 0 25px !important;
    }
    
    .subcategories-grid,
    ul.products {
        gap: 15px !important;
    }
}

@media (max-width: 768px) {
    .woocommerce-page .site-content,
    .woocommerce-page #primary {
        padding: 0 20px !important;
    }
    
    .dsp-category-description {
        margin: 40px 20px 20px !important;
        padding: 25px 20px !important;
    }
}

@media (max-width: 576px) {
    .woocommerce-page .site-content,
    .woocommerce-page #primary {
        padding: 0 15px !important;
    }
}


/* v2.6 - Fix alignement hero */
.dsp-hero-inner {
    max-width: 100% !important;  /* Suit le parent */
    margin: 0 !important;
    padding: 0 !important;  /* Pas de padding propre */
}

/* Hero content hÃƒÆ’Ã‚Â©rite du padding de #primary */
.dsp-hero {
    padding: 40px 0 !important;  /* Vertical seulement */
}

/* Container global gÃƒÆ’Ã‚Â¨re TOUT */
.woocommerce-page #primary {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* =========================================================
   ALIGN HERO WITH WOOCOMMERCE CONTENT (Browse by Category)
   Added by ChatGPT (non-destructive overrides)
   ========================================================= */

/* 1) Single source of truth for horizontal alignment */
.woocommerce-page #primary{
  max-width:1300px;
  margin:0 auto;
  padding:0 40px;
}

/* 2) Hero should inherit container alignment (no extra offsets) */
.dsp-hero{
  padding:40px 0;
}

.dsp-hero-inner{
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   ALIGNMENT FIX v2 (undo #primary override; align hero to existing theme container)
   ========================================================= */

/* Undo previous #primary override that affected shop layout */
.woocommerce-page #primary{
  max-width:unset !important;
  margin:0 !important;
  padding:0 !important;
}

/* Align hero content to the same horizontal rhythm as theme content */
.dsp-hero{
  padding:40px 0;
}

.dsp-hero-inner{
  max-width:1300px !important;
  margin:0 auto !important;
  padding:0 40px !important;
  box-sizing:border-box;
}

/* Optional: ensure the hero background can still be full-bleed */
.dsp-hero{
  width:100%;
}

/* Image produit dans les cartes (archive) */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px !important;
}

.woocommerce ul.products li.product a img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display:block;
  border-radius: 16px;
}
/* Card layout produit */
.dsp-product-card-wrapper{
  overflow: hidden;
}

/* Zone image */
.woocommerce ul.products li.product a img{
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;   /* mets cover si tu veux remplir */
  background: #ffffff;
  padding: 18px;
  border-radius: 16px;
  display: block !important;
  margin: 0 !important;
}

/* Si tu prÃƒÂ©fÃƒÂ¨res un rendu "plein" */
.woocommerce ul.products li.product a img.is-cover{
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent;
}

/* Espace/alignements */
.woocommerce ul.products li.product .product-loop-content{
  padding-top: 12px;
}

/* Prix alignÃƒÂ© et propre */
.woocommerce ul.products li.product .price{
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  align-items: baseline;
}
.woocommerce ul.products li.product .price del{
  opacity: .5;
}
.product-loop-image-wrapper.has-equal-image-height{
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}
.product-loop-image-wrapper.has-equal-image-height a img{
  height: 220px !important;
}
/* 1) Ne pas rÃƒÂ©server une ÃƒÂ©norme hauteur sous l'image */
.product-loop-image-wrapper,
.product-loop-wrapper {
  height: auto !important;
  min-height: 0 !important;
}

/* 2) Assurer que le bouton Add to cart est visible */
.woocommerce ul.products li.product .loop-add-to-cart-btn,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  margin-top: 12px;
}

/* 3) Mise en page simple : Nom -> Prix -> Bouton */
.woocommerce ul.products li.product .product-loop-meta {
  padding: 14px 18px 18px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 8px 0;
}

.woocommerce ul.products li.product .price {
  margin: 0 0 12px 0;
  display: block;
}

/* 4) Ãƒâ€°viter que le bouton soit masquÃƒÂ© par un overflow */
.dsp-product-card-wrapper,
.woocommerce ul.products li.product {
  overflow: visible !important;
}
/* Add to cart : toujours visible */
.woocommerce ul.products li.product .loop-add-to-cart-btn,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.ajax_add_to_cart,
.woocommerce ul.products li.product a.button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  height: auto !important;
  width: auto !important;
  margin: 12px auto 0 !important;
  z-index: 5;
}

/* Ãƒâ€°vite quÃ¢â‚¬â„¢un parent coupe le bouton */
.woocommerce ul.products li.product,
.dsp-product-card-wrapper,
.product-loop-meta,
.product-loop-content {
  overflow: visible !important;
}


/* Image naturelle (pas de hauteur fixe) */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain;
  background: #ffffff;
  padding: 14px;
  border-radius: 14px;
}

/* Espacement simple */
.product-loop-meta { 
  padding: 12px 16px 16px !important; 
}

/* =========================================================
   DSP WooCommerce archive: simple card layout
   Image -> Title -> Price -> Add to cart (always visible)
   Scoped to avoid impacting other pages
   ========================================================= */

.dsp-products-section + .woocommerce ul.products li.product,
.tax-product_cat .woocommerce ul.products li.product,
.post-type-archive-product .woocommerce ul.products li.product {
    overflow: visible !important;
}

/* Ensure media wrapper shows the thumbnail nicely */
.tax-product_cat .dsp-card-media,
.post-type-archive-product .dsp-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f6f6f6;
    border-radius: 16px;
}

.tax-product_cat .dsp-card-media img,
.post-type-archive-product .dsp-card-media img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain;
    padding: 18px;
}

/* Add to cart button: force visible (some themes hide on hover) */
.tax-product_cat .woocommerce ul.products li.product a.add_to_cart_button,
.tax-product_cat .woocommerce ul.products li.product a.ajax_add_to_cart,
.tax-product_cat .woocommerce ul.products li.product a.button,
.post-type-archive-product .woocommerce ul.products li.product a.add_to_cart_button,
.post-type-archive-product .woocommerce ul.products li.product a.ajax_add_to_cart,
.post-type-archive-product .woocommerce ul.products li.product a.button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    margin: 12px auto 0 !important;
    width: auto !important;
    justify-content: center !important;
    z-index: 5;
}

/* Reduce empty space: do not force equal-height image blocks */
.tax-product_cat .product-loop-image-wrapper.has-equal-image-height,
.post-type-archive-product .product-loop-image-wrapper.has-equal-image-height {
    height: auto !important;
    min-height: 0 !important;
}


/* =========================================================
   DESIGN: cartes produits en colonne (image -> titre -> prix -> bouton)
   Scoped WooCommerce archives
   ========================================================= */
.post-type-archive-product .dsp-product-card-wrapper,
.tax-product_cat .dsp-product-card-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Supprime le layout gauche/droite */
.post-type-archive-product .dsp-card-media,
.tax-product_cat .dsp-card-media {
  width: 100% !important;
  height: 240px !important;              /* ajuste si tu veux */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f6f6f6;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
}

/* Image bien calÃ©e */
.post-type-archive-product .dsp-card-media img,
.tax-product_cat .dsp-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;        /* ou cover si tu veux remplir */
  padding: 14px !important;
  display: block !important;
}

/* Contenu centrÃ© sous l'image */
.post-type-archive-product .product-loop-content,
.tax-product_cat .product-loop-content {
  text-align: center !important;
  padding: 14px 16px 16px !important;
}

/* Titre + prix + bouton espacÃ©s */
.post-type-archive-product .woocommerce-loop-product__title,
.tax-product_cat .woocommerce-loop-product__title {
  margin: 8px 0 10px !important;
}

.post-type-archive-product .price,
.tax-product_cat .price {
  margin: 0 0 14px !important;
}

/* Bouton normal (pas Ã©norme) */
.post-type-archive-product a.add_to_cart_button,
.post-type-archive-product a.ajax_add_to_cart,
.tax-product_cat a.add_to_cart_button,
.tax-product_cat a.ajax_add_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ã‰vite que le bouton soit coupÃ© */
.post-type-archive-product .dsp-product-card-wrapper,
.tax-product_cat .dsp-product-card-wrapper {
  overflow: visible !important;
}
/* Stop le contenu injectÃ© (qui affiche des caractÃ¨res bizarres) */
.loop-add-to-cart-btn::before,
.loop-add-to-cart-btn::after,
.woocommerce ul.products li.product a.add_to_cart_button::before,
.woocommerce ul.products li.product a.add_to_cart_button::after,
.woocommerce ul.products li.product a.ajax_add_to_cart::before,
.woocommerce ul.products li.product a.ajax_add_to_cart::after {
  content: none !important;
}

/* Force une police normale sur le bouton */
.loop-add-to-cart-btn,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.ajax_add_to_cart {
  font-family: inherit !important;
  letter-spacing: normal !important;
}
/* FIX: stop contenu cassÃ© injectÃ© dans les boutons WooCommerce */
.woocommerce ul.products li.product .button:before,
.woocommerce ul.products li.product a.button:before,
.woocommerce ul.products li.product a.add_to_cart_button:before,
.woocommerce ul.products li.product a.ajax_add_to_cart:before {
  content: "" !important;   /* ou none */
}

/* Optionnel: si un ::after existe aussi */
.woocommerce ul.products li.product .button:after,
.woocommerce ul.products li.product a.button:after,
.woocommerce ul.products li.product a.add_to_cart_button:after,
.woocommerce ul.products li.product a.ajax_add_to_cart:after {
  content: "" !important;
}

/* ============================================================================
   DIRECTSOURCEPRO - PRODUCT CARDS FIX v5.5
   BASÃ‰ SUR LA VRAIE STRUCTURE WOOSTIFY
   
   Structure HTML Woostify:
   <li class="product">
     <div class="product-loop-wrapper">
       <div class="product-loop-image-wrapper has-equal-image-height">
         <span class="woostify-tag-on-sale onsale">-2%</span>
         <div class="product-loop-action"></div>
         <a class="woocommerce-loop-product__link"><img></a>
       </div>
       <div class="product-loop-content">
         <h2 class="woocommerce-loop-product__title"><a>Titre</a></h2>
         <div class="product-loop-meta">Prix + Bouton</div>
       </div>
     </div>
   </li>
   ============================================================================ */

/* ==========================================================================
   1. RESET
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce ul.products li.product * {
    box-sizing: border-box !important;
}

/* ==========================================================================
   2. GRILLE PRODUITS - DÃ©sactiver l'alignement stretch
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    margin: 30px auto !important;
    padding: 0 20px !important;
    max-width: 1300px !important;
    list-style: none !important;
    align-items: start !important; /* EmpÃªche l'Ã©tirement des cartes */
}

/* ==========================================================================
   3. CARTE PRODUIT <li> - Hauteur auto, pas d'espace vide
   ========================================================================== */

.woocommerce ul.products li.product {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important; /* Ne pas Ã©tirer cette carte */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    border-color: #FF6B35 !important;
}

/* ==========================================================================
   4. PRODUCT-LOOP-WRAPPER - Hauteur auto
   ========================================================================== */

.woocommerce ul.products li.product .product-loop-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    flex-grow: 0 !important; /* Ne pas grandir */
}

/* ==========================================================================
   5. PRODUCT-LOOP-IMAGE-WRAPPER - DÃ‰SACTIVER has-equal-image-height !
   C'est Ã‡A qui cause la zone grise Ã©norme !
   ========================================================================== */

.woocommerce ul.products li.product .product-loop-image-wrapper,
.woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    background: #f8f9fa !important;
    /* Forcer une hauteur raisonnable */
    height: 180px !important;
    overflow: hidden !important;
}

/* Le lien contenant l'image */
.woocommerce ul.products li.product .product-loop-image-wrapper a.woocommerce-loop-product__link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* L'image elle-mÃªme */
.woocommerce ul.products li.product .product-loop-image-wrapper img {
    width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 15px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.3s ease !important;
}

.woocommerce ul.products li.product:hover .product-loop-image-wrapper img {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   6. BADGE PROMO - woostify-tag-on-sale
   ========================================================================== */

.woocommerce ul.products li.product .woostify-tag-on-sale,
.woocommerce ul.products li.product .onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    background: linear-gradient(135deg, #FF6B35 0%, #ff8c5a 100%) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
}

/* Badge NEW (notre custom) */
.woocommerce ul.products li.product > .badge-new {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
    line-height: 1.2 !important;
}

/* Cacher product-loop-action si vide */
.woocommerce ul.products li.product .product-loop-action:empty {
    display: none !important;
}

/* ==========================================================================
   7. PRODUCT-LOOP-CONTENT - Titre + Meta - Compact
   ========================================================================== */

.woocommerce ul.products li.product .product-loop-content {
    padding: 12px 12px 15px 12px !important; /* padding-bottom pour espace sous bouton */
    text-align: center !important;
    background: #fff !important;
}

/* TITRE */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a3a52 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    max-height: 38px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: inherit !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #FF6B35 !important;
}

/* ==========================================================================
   8. PRODUCT-LOOP-META - Prix
   ========================================================================== */

.woocommerce ul.products li.product .product-loop-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

/* PRIX */
.woocommerce ul.products li.product .price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #FF6B35 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.woocommerce ul.products li.product .price del {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    margin-right: 5px !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    font-weight: 800 !important;
    background: none !important;
}

/* ==========================================================================
   9. BOUTON ADD TO CART - Taille uniforme
   ========================================================================== */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 160px !important; /* Largeur FIXE pour uniformitÃ© */
    margin: 8px auto 0 !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #FF6B35 0%, #ff8c5a 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px rgba(255, 107, 53, 0.25) !important;
    line-height: 1.4 !important;
}

.woocommerce ul.products li.product .button:hover {
    background: linear-gradient(135deg, #e85d2a 0%, #ff7a42 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4) !important;
}

.woocommerce ul.products li.product .button.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.woocommerce ul.products li.product .button.added {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
}

/* Supprimer les pseudo-Ã©lÃ©ments du bouton */
.woocommerce ul.products li.product .button::before,
.woocommerce ul.products li.product .button::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   10. STAR RATING
   ========================================================================== */

.woocommerce ul.products li.product .star-rating {
    font-size: 12px !important;
    margin: 4px 0 !important;
    color: #fbbf24 !important;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 16px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-image-wrapper,
    .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height {
        height: 160px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-image-wrapper img {
        height: 160px !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 12px !important;
    }
    
    .woocommerce ul.products li.product {
        border-radius: 10px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-image-wrapper,
    .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height {
        height: 140px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-image-wrapper img {
        height: 140px !important;
        padding: 10px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-content {
        padding: 10px !important;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px !important;
        max-height: 32px !important;
        margin-bottom: 6px !important;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 14px !important;
    }
    
    .woocommerce ul.products li.product .price del {
        font-size: 11px !important;
    }
    
    .woocommerce ul.products li.product .button {
        padding: 8px 12px !important;
        font-size: 12px !important;
        margin-top: 6px !important;
    }
    
    .woocommerce ul.products li.product .woostify-tag-on-sale,
    .woocommerce ul.products li.product .onsale {
        top: 8px !important;
        left: 8px !important;
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        gap: 10px !important;
        padding: 0 10px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-image-wrapper,
    .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height {
        height: 120px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-image-wrapper img {
        height: 120px !important;
        padding: 8px !important;
    }
    
    .woocommerce ul.products li.product .product-loop-content {
        padding: 8px !important;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 11px !important;
        max-height: 28px !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 13px !important;
    }
    
    .woocommerce ul.products li.product .button {
        padding: 7px 10px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   12. ACCESSIBILITÃ‰
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product,
    .woocommerce ul.products li.product img,
    .woocommerce ul.products li.product .button {
        transition: none !important;
    }
}
/* =========================================================
   DSP COMPACT PRODUCT CARDS (Jan 2026)
   Objectif: rÃ©duire la hauteur des cartes sur les pages archives
   (catÃ©gories + shop) sans impacter le reste du site.
   Place ce bloc TOUT EN BAS du CSS.
   ========================================================= */

/* 0) Scope strict: uniquement archives WooCommerce */
.tax-product_cat .woocommerce ul.products,
.post-type-archive-product .woocommerce ul.products{
  align-items: start !important; /* Ã©vite l'Ã©tirement des items */
}

/* 1) Carte: pas de stretch, padding rÃ©duit */
.tax-product_cat .woocommerce ul.products li.product,
.post-type-archive-product .woocommerce ul.products li.product{
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

/* 2) Woostify: wrapper global en colonne, mais SANS forcer le contenu Ã  remplir */
.tax-product_cat .woocommerce ul.products li.product .product-loop-wrapper,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-wrapper{
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

/* IMPORTANT: Woostify met souvent un <a> qui prend tout l'espace (flex:1)
   => Ã§a crÃ©e une grande zone vide sous le bouton.
   On neutralise Ã§a uniquement sur les archives. */
.tax-product_cat .woocommerce ul.products li.product a,
.post-type-archive-product .woocommerce ul.products li.product a{
  flex: 0 0 auto !important;
}

/* 3) Zone image: hauteur plus faible + pas de "equal height" gÃ©ant */
.tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper,
.tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height{
  height: 160px !important;        /* <= ajuste ici si besoin (ex: 140px) */
  min-height: 0 !important;
  padding: 0 !important;
  background: #f8fafc !important;
}

.tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper a.woocommerce-loop-product__link,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper a.woocommerce-loop-product__link{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper img,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper img{
  position: static !important;      /* annule le position:absolute (source de bugs) */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 12px !important;
  margin: 0 !important;
}

/* 4) Contenu: compact (Titre -> Prix -> Bouton) */
.tax-product_cat .woocommerce ul.products li.product .product-loop-content,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-content{
  padding: 12px 14px 14px !important;
  text-align: center !important;
}

/* Titre: plus compact + aucune min-height */
.tax-product_cat .woocommerce ul.products li.product .woocommerce-loop-product__title,
.post-type-archive-product .woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding: 0 !important;
  margin: 8px 0 8px !important;
  min-height: 0 !important;
  max-height: none !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2;
}

/* Prix: marges rÃ©duites */
.tax-product_cat .woocommerce ul.products li.product .product-loop-meta,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-meta{
  padding: 0 !important;
  margin: 0 !important;
}

.tax-product_cat .woocommerce ul.products li.product .price,
.post-type-archive-product .woocommerce ul.products li.product .price{
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* 5) Bouton: taille normale, pas Ã©norme, pas de pseudo-icÃ´nes */
.tax-product_cat .woocommerce ul.products li.product a.add_to_cart_button,
.tax-product_cat .woocommerce ul.products li.product a.ajax_add_to_cart,
.tax-product_cat .woocommerce ul.products li.product a.button,
.post-type-archive-product .woocommerce ul.products li.product a.add_to_cart_button,
.post-type-archive-product .woocommerce ul.products li.product a.ajax_add_to_cart,
.post-type-archive-product .woocommerce ul.products li.product a.button{
  width: auto !important;
  max-width: 220px !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1.2 !important;
}

.tax-product_cat .woocommerce ul.products li.product a.add_to_cart_button::before,
.tax-product_cat .woocommerce ul.products li.product a.ajax_add_to_cart::before,
.tax-product_cat .woocommerce ul.products li.product a.button::before,
.tax-product_cat .woocommerce ul.products li.product a.add_to_cart_button::after,
.tax-product_cat .woocommerce ul.products li.product a.ajax_add_to_cart::after,
.tax-product_cat .woocommerce ul.products li.product a.button::after,
.post-type-archive-product .woocommerce ul.products li.product a.add_to_cart_button::before,
.post-type-archive-product .woocommerce ul.products li.product a.ajax_add_to_cart::before,
.post-type-archive-product .woocommerce ul.products li.product a.button::before,
.post-type-archive-product .woocommerce ul.products li.product a.add_to_cart_button::after,
.post-type-archive-product .woocommerce ul.products li.product a.ajax_add_to_cart::after,
.post-type-archive-product .woocommerce ul.products li.product a.button::after{
  content: none !important;
}

/* 6) SÃ©curitÃ©: Ã©viter que le bouton soit coupÃ© */
.tax-product_cat .woocommerce ul.products li.product,
.tax-product_cat .woocommerce ul.products li.product .product-loop-content,
.tax-product_cat .woocommerce ul.products li.product .product-loop-meta,
.post-type-archive-product .woocommerce ul.products li.product,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-content,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-meta{
  overflow: visible !important;
}

/* 7) Responsive: encore plus compact */
@media (max-width: 768px){
  .tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper,
  .tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height,
  .post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper,
  .post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height{
    height: 140px !important;
  }
}

/* =========================================================
   PATCH v2.1 (archives only)
   - Fix badges full-width
   - Reduce card height (remove stretch/min-height)
   ========================================================= */

/* 1) Prevent stretched rows/cards */
.tax-product_cat .woocommerce ul.products,
.post-type-archive-product .woocommerce ul.products{
  align-items: start !important;
}

/* 2) Allow cards to be auto-height */
.tax-product_cat .woocommerce ul.products li.product,
.post-type-archive-product .woocommerce ul.products li.product{
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

.tax-product_cat .woocommerce ul.products li.product .product-loop-wrapper,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-wrapper{
  height: auto !important;
  min-height: 0 !important;
}

/* 3) Reduce big reserved blocks (image/title spacing) */
.tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper,
.tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height{
  height: 180px !important;
}

.tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper img,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper img{
  height: 180px !important;
  padding: 12px !important;
}

/* Title: remove any old min-height that forces extra white space */
.tax-product_cat .woocommerce ul.products li.product .woocommerce-loop-product__title,
.post-type-archive-product .woocommerce ul.products li.product .woocommerce-loop-product__title{
  min-height: 0 !important;
  padding: 10px 12px 6px !important;
}

/* Meta spacing tighter */
.tax-product_cat .woocommerce ul.products li.product .product-loop-content,
.post-type-archive-product .woocommerce ul.products li.product .product-loop-content{
  padding: 10px 12px 12px !important;
}

/* 4) Badges: force pill, no full-width */
.tax-product_cat .woocommerce ul.products li.product .woostify-tag-on-sale,
.tax-product_cat .woocommerce ul.products li.product .onsale,
.post-type-archive-product .woocommerce ul.products li.product .woostify-tag-on-sale,
.post-type-archive-product .woocommerce ul.products li.product .onsale{
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  left: 10px !important;
  top: 10px !important;
  right: auto !important;
}

/* If you have a custom NEW badge element, keep it small too */
.tax-product_cat .woocommerce ul.products li.product .badge-new,
.post-type-archive-product .woocommerce ul.products li.product .badge-new{
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  right: 10px !important;
  top: 10px !important;
  left: auto !important;
}

/* 5) Responsive heights */
@media (max-width: 768px){
  .tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper,
  .tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height,
  .post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper,
  .post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper.has-equal-image-height{
    height: 150px !important;
  }
  .tax-product_cat .woocommerce ul.products li.product .product-loop-image-wrapper img,
  .post-type-archive-product .woocommerce ul.products li.product .product-loop-image-wrapper img{
    height: 150px !important;
  }
}


/* =========================================================
   Image product card: fond BLANC (catégories WooCommerce)
   ========================================================= */

/* Wrapper image principal */
.post-type-archive-product .dsp-card-media,
.tax-product_cat .dsp-card-media {
  background: #ffffff !important;
}

/* Sécurité : si un wrapper interne existe */
.post-type-archive-product .dsp-card-media a,
.post-type-archive-product .dsp-card-media .product-loop-image-wrapper,
.tax-product_cat .dsp-card-media a,
.tax-product_cat .dsp-card-media .product-loop-image-wrapper {
  background: #ffffff !important;
}

/* Image elle-même (au cas où) */
.post-type-archive-product .dsp-card-media img,
.tax-product_cat .dsp-card-media img {
  background: #ffffff !important;
}


/* =========================================================
   FIX FINAL : fond BLANC derrière les images produits
   ========================================================= */

/* Conteneur principal de l'image */
.post-type-archive-product .dsp-card-media,
.tax-product_cat .dsp-card-media {
  background-color: #ffffff !important;
}

/* Lien autour de l'image (souvent responsable du gris) */
.post-type-archive-product .dsp-card-media a,
.tax-product_cat .dsp-card-media a {
  background-color: #ffffff !important;
}

/* Sécurité absolue : image */
.post-type-archive-product .dsp-card-media img,
.tax-product_cat .dsp-card-media img {
  background-color: #ffffff !important;
}

/* =========================================================
   ARCHIVES Wooostify : fond BLANC derrière les images
   (zone grise = .product-loop-image-wrapper.has-equal-image-height)
   ========================================================= */
.tax-product_cat .product-loop-image-wrapper,
.tax-product_cat .product-loop-image-wrapper.has-equal-image-height,
.post-type-archive-product .product-loop-image-wrapper,
.post-type-archive-product .product-loop-image-wrapper.has-equal-image-height{
  background: #fff !important;
}

/* parfois le <a> a aussi un background */
.tax-product_cat .product-loop-image-wrapper a,
.post-type-archive-product .product-loop-image-wrapper a{
  background: #fff !important;
}

/* si le thème met une couleur via pseudo-element */
.tax-product_cat .product-loop-image-wrapper::before,
.tax-product_cat .product-loop-image-wrapper::after,
.post-type-archive-product .product-loop-image-wrapper::before,
.post-type-archive-product .product-loop-image-wrapper::after{
  background: transparent !important;
}


.tax-product_cat .product-loop-image-wrapper,
.post-type-archive-product .product-loop-image-wrapper{
  border-bottom: 1px solid #eee !important;
}

/* Fond blanc derrière les thumbnails produits (archive/catégories) */
.tax-product_cat .woocommerce ul.products li.product a img,
.post-type-archive-product .woocommerce ul.products li.product a img {
  background: #ffffff !important;
    background: transparent !important;

}
/* =========================================================
   FIX FINAL – fond blanc derrière les images produits
   (Wooostify – archives WooCommerce)
   ========================================================= */

/* Wrapper image */
.tax-product_cat .product-loop-image-wrapper,
.tax-product_cat .product-loop-image-wrapper.has-equal-image-height,
.post-type-archive-product .product-loop-image-wrapper,
.post-type-archive-product .product-loop-image-wrapper.has-equal-image-height {
  background: #ffffff !important;
}

/* Image elle-même */
.tax-product_cat .product-loop-image,
.tax-product_cat .woocommerce ul.products li.product a img,
.post-type-archive-product .product-loop-image,
.post-type-archive-product .woocommerce ul.products li.product a img {
  background: #ffffff !important;
}

/* Sécurité : pseudo-elements éventuels */
.tax-product_cat .product-loop-image-wrapper::before,
.tax-product_cat .product-loop-image-wrapper::after,
.post-type-archive-product .product-loop-image-wrapper::before,
.post-type-archive-product .product-loop-image-wrapper::after {
  background: transparent !important;
  content: none !important;
}

/* ==========================================================================
   MEGA MENU — Desktop (5 colonnes) + Mobile fix
   Ce code gère l'affichage du menu "Shop by Category"
   ========================================================================== */

/* Variable de couleur orange de la marque */
:root{ --brand: #ff6b36; }

/* 
   IMPORTANT: On cible .nav-item:first-child car "Shop by Category" 
   est le PREMIER élément du menu. Cela évite d'affecter "Shop by Brand"
*/
.main-nav .nav-item:first-child{ position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP : Le dropdown mega menu
   - position: fixed + left: 50% + transform = centré sur l'écran
   - z-index: 9999 = toujours au-dessus de tout
   - max-height: 75vh = ne dépasse pas 75% de la hauteur de l'écran
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .nav-item:first-child .mega-menu{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(1600px, calc(100vw - 30px)); /* Largeur max 1600px ou 100% - 30px */
  padding: 14px;
  max-height: 75vh;
  overflow-y: auto;    /* Scroll vertical si contenu trop long */
  overflow-x: hidden;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENU DU MEGA MENU : Grille de 5 colonnes
   - backdrop-filter: blur = effet de flou en arrière-plan (glassmorphism)
   - grid-template-columns: repeat(5, ...) = 5 colonnes égales
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .nav-item:first-child .mega-menu-content{
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);  /* Pour Safari */
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 24px 70px rgba(15,31,45,0.18);
  border-radius: 18px;
  padding: 14px;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 COLONNES */
  gap: 14px;
  align-items: start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAQUE COLONNE (.mega-column)
   - Excavators, Wheel Loaders, etc. = chaque bloc est une colonne
   - Effet hover : légère élévation + ombre
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .mega-column{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,31,45,0.08);
  border-radius: 16px;
  padding: 12px 12px 10px;
  box-shadow: 0 10px 26px rgba(15,31,45,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.main-nav .mega-column:hover{
  transform: translateY(-2px);  /* Monte légèrement au survol */
  box-shadow: 0 16px 40px rgba(15,31,45,0.10);
  border-color: rgba(255,107,54,0.22);  /* Bordure orange au survol */
}

/* ═══════════════════════════════════════════════════════════════════════════
   TITRE DE NIVEAU 1 (h3) - Ex: "Excavators", "Wheel Loaders"
   - Ligne orange en dessous (::after)
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .mega-column h3{
  position: relative;
  margin: 0 0 10px;
  padding: 2px 2px 10px;
  color: #0f1f2d;
  font-size: 14.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Ligne orange sous le titre */
.main-nav .mega-column h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), rgba(255,107,54,0.25));
}

/* Reset des listes */
.main-nav .mega-column ul{ list-style: none; margin: 0; padding: 0; }
.main-nav .mega-column ul li{ margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIENS DE NIVEAU 2 - Ex: "Mini Excavators", "Small Excavators"
   - Liens cliquables vers les catégories
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .mega-column > ul > li > a{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(15,31,45,0.86);
  text-decoration: none;
  transition: background .16s ease, transform .16s ease, color .16s ease;
}
.main-nav .mega-column > ul > li > a:hover{
  background: rgba(255,107,54,0.10);  /* Fond orange clair au survol */
  color: #0f1f2d;
  transform: translateX(2px);  /* Petit décalage à droite */
}

/* Headers de catégorie (non cliquables, ont des sous-menus) */
.main-nav .mega-column > ul > li > a.category-header{
  background: transparent;
  padding: 8px 8px 4px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,31,45,0.92);
  cursor: default;  /* Pas de curseur pointer car non cliquable */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOUS-MENU NIVEAU 3 (.sub-sub-menu)
   - Ex: Sous "Buckets" → "Compact Buckets", "Rock Buckets", etc.
   - Bordure gauche pour montrer la hiérarchie
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .mega-column .sub-sub-menu{
  margin: 6px 0 10px 14px;
  padding-left: 12px;
  border-left: 2px solid rgba(15,31,45,0.08);  /* Ligne verticale */
}
.main-nav .mega-column .sub-sub-menu a{
  display: block;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: rgba(91,103,116,0.95);
  text-decoration: none;
}
.main-nav .mega-column .sub-sub-menu a:hover{
  background: rgba(15,31,45,0.05);
  color: rgba(15,31,45,0.90);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURED BOX - La boîte "Need Help?" à droite
   - Fond sombre avec dégradé
   - Ligne orange en haut (::before)
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .featured-box{
  background: linear-gradient(180deg, rgba(15,31,45,0.92), rgba(15,31,45,0.80));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15,31,45,0.18);
  overflow: hidden;
  position: relative;
  color: #fff;
  padding: 14px;
}
.main-nav .featured-box::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), rgba(255,107,54,0.25));
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR PERSONNALISÉE
   - Plus jolie que la scrollbar par défaut
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav .mega-menu::-webkit-scrollbar{ width: 10px; }
.main-nav .mega-menu::-webkit-scrollbar-thumb{
  background: rgba(15,31,45,0.14);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.60);
}
.main-nav .mega-menu::-webkit-scrollbar-track{ background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE : Adaptation du nombre de colonnes selon la largeur d'écran
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1400px){
  /* Écran < 1400px : 4 colonnes */
  .main-nav .nav-item:first-child .mega-menu-content{ 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
  }
}
@media (max-width: 1100px){
  /* Écran < 1100px : 3 colonnes */
  .main-nav .nav-item:first-child .mega-menu-content{ 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
  }
}
@media (max-width: 900px){
  /* Écran < 900px : 2 colonnes */
  .main-nav .nav-item:first-child .mega-menu-content{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (< 768px) : Menu en 1 colonne verticale
   - On enlève le positionnement fixe
   - On passe en flexbox colonne
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  body .main-nav .mega-menu{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  body .main-nav .mega-menu-content{
    display: flex !important;
    flex-direction: column !important;  /* Colonnes empilées verticalement */
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body .main-nav .mega-menu-content > *{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
  }

  /* Cache la Featured Box sur mobile (prend trop de place) */
  body .main-nav .mega-menu-content .featured-box{ 
    display: none !important; 
  }

  /* Texte qui peut revenir à la ligne */
  body .main-nav .mega-menu-content h3,
  body .main-nav .mega-menu-content a{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Liens plus grands sur mobile (plus faciles à toucher) */
  body .main-nav .mega-column > ul > li > a{
    padding: 10px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}
/* FIX: mega menu "Shop by Category" (1er item) - ne pas utiliser position:fixed */
@media (min-width: 992px){
  .main-nav .nav-item:first-child{
    position: relative !important;
  }

  .main-nav .nav-item:first-child .mega-menu{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  /* Important: garantir que le menu devient visible au hover/focus */
  .main-nav .nav-item:first-child:hover > .mega-menu,
  .main-nav .nav-item:first-child:focus-within > .mega-menu{
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
}
/* =========================================================
   FIX MEGA MENU HEADER – Shop by Category
   (maintenir le hover entre le lien et le mega-menu)
   ========================================================= */

@media (min-width: 992px){

  /* Le <li> doit être le référent */
  .main-nav .nav-item{
    position: relative;
  }

  /* Mega menu correctement positionné */
  .main-nav .nav-item > .mega-menu{
    position: absolute !important;
    top: 100% !important;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9999;
  }

  /* OUVERTURE au hover OU focus */
  .main-nav .nav-item:hover > .mega-menu,
  .main-nav .nav-item:focus-within > .mega-menu{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }
}
.nav-item.has-dropdown:hover > .dropdown-menu,
.nav-item.has-mega:hover > .mega-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* =========================
   DSP HEADER (ULTRA PREMIUM)
   ========================= */

/* Prevent theme defaults from messing spacing */
.dsp-header, .dsp-header * { box-sizing: border-box; }
.dsp-header a { text-decoration: none; }

/* Wrapper */
.dsp-header{
  position: relative;
  z-index: 9999;
  width: 100%;
  background: #ffffff;
}

/* Topbar */
.dsp-topbar{
  background: #0b2235;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}
.dsp-topbar-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.dsp-topbar-left, .dsp-topbar-right{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.dsp-topbar-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.dsp-topbar-link{
  color: rgba(255,255,255,.9);
}
.dsp-topbar-link:hover{ color: #fff; }
.dsp-topbar-sep{ opacity:.5; }

/* Main bar */
.dsp-main{
  background: radial-gradient(1200px at 30% 0%, rgba(255,106,61,.10), transparent 55%),
              #ffffff;
  border-bottom: 1px solid rgba(12, 36, 55, .08);
}
.dsp-main-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 18px;
  display: grid;
  grid-template-columns: 180px 1fr 340px;
  align-items: center;
  gap: 18px;
}

/* Logo */
.dsp-logo img{
  max-height: 44px;
  width: auto;
  display:block;
}

/* Search + popular */
.dsp-search-wrap{ display:flex; flex-direction:column; gap:10px; }
.dsp-search{
  background: #fff;
  border-radius: 999px;
  border: 1px solid rgba(12,36,55,.10);
  box-shadow: 0 10px 30px rgba(12,36,55,.08);
  padding: 6px 10px;
}

/* Popular chips */
.dsp-popular{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color: rgba(12,36,55,.65);
  font-size: 13px;
}
.dsp-popular-label{ font-weight: 600; }
.dsp-popular-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(12,36,55,.10);
  background: rgba(255,255,255,.75);
  color: rgba(12,36,55,.80);
  transition: all .2s ease;
}
.dsp-popular-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(255,106,61,.35);
  box-shadow: 0 10px 22px rgba(12,36,55,.10);
}

/* Actions */
.dsp-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 10px;
}
.dsp-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(12,36,55,.12);
  color: rgba(12,36,55,.86);
  background: rgba(255,255,255,.85);
  transition: all .2s ease;
}
.dsp-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(12,36,55,.10);
}
.dsp-cart-count{
  margin-left: 8px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,106,61,.18);
  color: #ff6a3d;
  font-weight: 700;
  font-size: 12px;
}
.dsp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ff6a3d;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(255,106,61,.25);
  transition: all .2s ease;
}
.dsp-cta:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* Nav bar */
.dsp-nav{
  background: radial-gradient(1200px at top, #103b55 0%, #0b2235 65%, #071a28 100%);
}
.dsp-nav-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
}
.nav-menu{
  list-style:none;
  margin:0; padding: 0;
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 16px 12px;
  color: rgba(255,255,255,.92);
  font-weight: 650;
  letter-spacing: .2px;
}
.nav-link:hover{ color: #fff; }
.chev{ opacity:.8; font-size: 12px; transform: translateY(-1px); }

/* Dropdowns */
.dropdown-menu{
  position:absolute;
  top: calc(100% - 2px);
  left: 0;
  min-width: 260px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(13, 33, 50, .98);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: all .18s ease;
}
.dropdown-menu a{
  display:block;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.88);
}
.dropdown-menu a:hover{
  background: linear-gradient(90deg, rgba(255,106,61,.18), transparent);
  color:#fff;
}

/* Mega menu */
.mega-menu{
  position:absolute;
  top: calc(100% - 2px);
  left: 0;
  width: min(1120px, 92vw);
  padding: 16px;
  border-radius: 18px;
  background: rgba(13, 33, 50, .98);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events:none;
  transform: translateY(10px);
  transition: all .18s ease;
}
.mega-inner{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 16px;
}
.mega-col{
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.mega-col h4{
  margin: 0 0 10px 0;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
.mega-col a{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,.84);
}
.mega-col a:hover{
  background: linear-gradient(90deg, rgba(255,106,61,.18), transparent);
  color:#fff;
}

/* Mega CTA */
.mega-cta-card{
  height: 100%;
  padding: 16px;
  border-radius: 16px;
  background: radial-gradient(700px at 20% 0%, rgba(255,106,61,.18), transparent 55%),
              rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}
.mega-cta-kicker{
  color: rgba(255,255,255,.70);
  font-size: 13px;
}
.mega-cta-title{
  margin-top: 8px;
  font-size: 18px;
  color:#fff;
  font-weight: 800;
}
.mega-cta-text{
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}
.mega-cta-btn{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: #ff6a3d;
  color:#fff;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(255,106,61,.25);
}
.mega-cta-btn:hover{ filter: brightness(1.03); transform: translateY(-1px); }

/* Hover triggers */
.nav-item.has-dropdown:hover > .dropdown-menu,
.nav-item.has-mega:hover > .mega-menu{
  opacity: 1;
  visibility: visible;
  pointer-events:auto;
  transform: translateY(0);
}

/* Mobile */
.dsp-nav-toggle{ display:none; }
@media (max-width: 1100px){
  .dsp-main-inner{
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto auto;
  }
  .dsp-actions{ grid-column: 2; justify-content:flex-end; }
}
@media (max-width: 860px){
  .dsp-topbar-inner{ justify-content:center; text-align:center; }
  .dsp-topbar-right{ display:none; }

  .dsp-main-inner{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dsp-actions{ justify-content:space-between; }
  .nav-menu{ flex-wrap:wrap; gap: 8px; }
  .mega-inner{ grid-template-columns: 1fr; }
  .mega-menu{ left: 0; width: 92vw; }
}
/* --- FIX DROPDOWN OVER HERO --- */
.dsp-header,
.dsp-nav,
.dsp-nav-inner,
.nav-item { position: relative; z-index: 9999; }

.mega-menu,
.dropdown-menu{
  position: absolute;
  z-index: 100000 !important;
}


/* Parents must allow dropdown to overflow */
.dsp-header,
.dsp-nav,
.dsp-nav-inner{
  overflow: visible !important;
}

/* =========================================================
   FIX HOVER dropdown-menu (Resources / Company / Contact)
   - permet de "glisser" la souris vers le sous-menu sans qu'il disparaisse
   ========================================================= */
@media (min-width: 992px){

  /* Le <li> doit être le référent (déjà le cas chez toi, mais safe) */
  .main-nav .nav-item{
    position: relative;
  }

  /* Base dropdown: caché + non cliquable */
  .main-nav .nav-item > .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* IMPORTANT: éviter tout gap */
    margin-top: 0 !important;
    transform: none !important;

    transition: opacity .18s ease, visibility .18s ease;
  }

  /* Ouverture au hover OU focus clavier */
  .main-nav .nav-item:hover > .dropdown-menu,
  .main-nav .nav-item:focus-within > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* "Pont" invisible au-dessus du dropdown pour traverser le gap */
  .main-nav .nav-item > .dropdown-menu::before{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -10px;
    height: 10px;
  }
}
/* =========================================================
   TOP 1% NAV DESIGN (Desktop-first)
   - meilleure hiérarchie
   - hover premium
   - dropdown panel moderne
   ========================================================= */

:root{
  --nav-bg: #0f2e44;          /* ton bleu */
  --nav-fg: rgba(255,255,255,.92);
  --nav-fg-dim: rgba(255,255,255,.70);
  --nav-accent: #ff6b35;      /* ton orange */
  --nav-radius: 14px;
  --nav-shadow: 0 14px 40px rgba(0,0,0,.18);
  --nav-border: rgba(255,255,255,.10);
}

/* Barre nav : légèrement plus “premium” */
.main-nav{
  background: var(--nav-bg);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.15);
}

/* Items */
.main-nav .nav-item{
  position: relative;
}

/* Liens : typo + spacing + zone cliquable */
.main-nav .nav-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px;                 /* + confortable */
  color: var(--nav-fg);
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  border-radius: 12px;                /* hover “chip” */
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

/* Hover : chip subtil + micro lift */
@media (hover:hover){
  .main-nav .nav-item:hover > .nav-link{
    background: rgba(255,255,255,.08);
    transform: translateY(-1px);
  }
}

/* Indication active (si tu as une classe active/current) */
.main-nav .nav-item.current-menu-item > .nav-link,
.main-nav .nav-item.current_page_item > .nav-link,
.main-nav .nav-item.current-menu-ancestor > .nav-link{
  background: rgba(255,255,255,.10);
  color: #fff;
}

/* Chevron ▼ : plus discret + animation */
.main-nav .nav-link .icon,
.main-nav .nav-link i{
  opacity: .85;
}
.main-nav .nav-item:hover > .nav-link .icon,
.main-nav .nav-item:hover > .nav-link i{
  opacity: 1;
}
.main-nav .nav-item:hover > .nav-link .dropdown-arrow,
.main-nav .nav-item:hover > .nav-link i{
  transform: translateY(1px);
}

/* Trait accent “premium” sous l’item hover (optionnel mais top) */
.main-nav .nav-item::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nav-accent), transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
@media (hover:hover){
  .main-nav .nav-item:hover::after{
    opacity: .9;
    transform: translateY(0);
  }
}

/* =========================================================
   DROPDOWN : panel moderne (top 1%)
   ========================================================= */
@media (min-width: 992px){

  /* Dropdown container (déjà fixé côté hover) : on le stylise */
  .main-nav .nav-item > .dropdown-menu{
    min-width: 240px;
    padding: 10px;
    border-radius: var(--nav-radius);
    background: rgba(255,255,255,.98);
    box-shadow: var(--nav-shadow);
    border: 1px solid rgba(15,46,68,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* animation d’apparition premium */
    transform-origin: top;
    transform: translateY(6px) scale(.98);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  }

  .main-nav .nav-item:hover > .dropdown-menu,
  .main-nav .nav-item:focus-within > .dropdown-menu{
    transform: translateY(0) scale(1);
  }

  /* Petite flèche (caret) */
  .main-nav .nav-item > .dropdown-menu::after{
    content:"";
    position:absolute;
    top: -7px;
    left: 22px;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,.98);
    border-left: 1px solid rgba(15,46,68,.10);
    border-top: 1px solid rgba(15,46,68,.10);
    transform: rotate(45deg);
  }

  /* Liens dropdown */
  .main-nav .dropdown-menu a{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 12px;
    border-radius: 12px;

    color: #0f1f2d;
    font-weight: 650;
    text-decoration: none;

    transition: background .18s ease, color .18s ease, transform .18s ease;
  }

  /* Hover dropdown : highlight premium */
  .main-nav .dropdown-menu a:hover{
    background: rgba(255,107,53,.10);
    color: #0f1f2d;
    transform: translateX(2px);
  }

  /* Séparateurs (si tu as des <li> ou des items groupés) */
  .main-nav .dropdown-menu li + li{
    margin-top: 4px;
  }
}

/* =========================================================
   ACCESSIBILITÉ : focus clavier visible
   ========================================================= */
.main-nav a:focus-visible{
  outline: 3px solid rgba(255,107,53,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* =========================================================
   MOBILE : touch-friendly (sans changer ton comportement)
   ========================================================= */
@media (max-width: 991px){
  .main-nav .nav-link{
    padding: 14px 14px;
  }
}
/* =========================================================
   NAV TOP 1% (Premium polish)
   Colle tout en bas du CSS enfant
   ========================================================= */

:root{
  --nav-bg: #0f2e44;
  --nav-fg: rgba(255,255,255,.92);
  --nav-dim: rgba(255,255,255,.72);
  --nav-accent: #ff6b35;

  --nav-h: 56px;                 /* barre plus fine */
  --r-12: 12px;
  --r-14: 14px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.18);
  --shadow-2: 0 18px 60px rgba(0,0,0,.22);
  --line: rgba(255,255,255,.10);
}

/* Barre nav : plus “premium” + sheen subtil */
.main-nav{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , var(--nav-bg);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.18);
}

/* Aligne la barre et donne un rythme (si ton thème a déjà un container, ça s’applique sans casser) */
.main-nav .main-nav-inner,
.main-nav .container,
.main-nav .wrap{
  min-height: var(--nav-h);
  display:flex;
  align-items:center;
}

/* Items : moins “boutons”, plus “navigation premium” */
.main-nav .nav-link{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 8px;

  height: var(--nav-h);
  padding: 0 16px;

  color: var(--nav-fg);
  font-weight: 720;
  letter-spacing: .2px;
  text-decoration:none;

  transition: color .18s ease, transform .18s ease;
}

/* Hover: micro lift + texte plus blanc */
@media (hover:hover){
  .main-nav .nav-item:hover > .nav-link{
    color: #fff;
    transform: translateY(-1px);
  }
}

/* Underline animé (top 1% feel) */
.main-nav .nav-link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--nav-accent), transparent);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

@media (hover:hover){
  .main-nav .nav-item:hover > .nav-link::after{
    opacity: .95;
    transform: translateY(0);
  }
}

/* État actif: pill gradient + shadow (remplace l’onglet massif) */
.main-nav .nav-item.current-menu-item > .nav-link,
.main-nav .nav-item.current_page_item > .nav-link,
.main-nav .nav-item.current-menu-ancestor > .nav-link{
  color: #fff;
}

.main-nav .nav-item.current-menu-item > .nav-link::before,
.main-nav .nav-item.current_page_item > .nav-link::before,
.main-nav .nav-item.current-menu-ancestor > .nav-link::before{
  content:"";
  position:absolute;
  left: 8px; right: 8px;
  top: 10px; bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,107,53,.95), rgba(255,140,0,.95));
  box-shadow: 0 10px 26px rgba(255,107,53,.28);
  z-index: -1;
}

/* Option : évite que l’underline s’ajoute au pill */
.main-nav .nav-item.current-menu-item > .nav-link::after,
.main-nav .nav-item.current_page_item > .nav-link::after,
.main-nav .nav-item.current-menu-ancestor > .nav-link::after{
  opacity: 0 !important;
}

/* Chevron plus discret */
.main-nav .nav-link .dropdown-arrow,
.main-nav .nav-link i{
  opacity: .85;
  transition: transform .18s ease, opacity .18s ease;
}

@media (hover:hover){
  .main-nav .nav-item:hover > .nav-link .dropdown-arrow,
  .main-nav .nav-item:hover > .nav-link i{
    opacity: 1;
    transform: translateY(1px);
  }
}

/* =========================================================
   DROPDOWN (Panel premium)
   ========================================================= */
@media (min-width: 992px){

  .main-nav .nav-item{
    position: relative;
  }

  .main-nav .nav-item > .dropdown-menu{
    position:absolute;
    top: 100%;
    left: 0;
    z-index: 9999;

    min-width: 280px;              /* plus “haut de gamme” */
    padding: 10px;
    margin-top: 10px;              /* espace élégant (on garde le pont) */

    border-radius: var(--r-14);
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,46,68,.10);
    box-shadow: var(--shadow-2);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(6px) scale(.985);
    transform-origin: top;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  }

  .main-nav .nav-item:hover > .dropdown-menu,
  .main-nav .nav-item:focus-within > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  /* Pont anti-gap (tu l’as déjà en fix, ici on l’aligne avec margin-top:10px) */
  .main-nav .nav-item > .dropdown-menu::before{
    content:"";
    position:absolute;
    left:0; right:0;
    top:-12px;
    height:12px;
  }

  /* Petit caret clean */
  .main-nav .nav-item > .dropdown-menu::after{
    content:"";
    position:absolute;
    top: -8px;
    left: 22px;
    width: 16px;
    height: 16px;
    background: rgba(255,255,255,.98);
    border-left: 1px solid rgba(15,46,68,.10);
    border-top: 1px solid rgba(15,46,68,.10);
    transform: rotate(45deg);
  }

  /* Items dropdown: plus de présence */
  .main-nav .dropdown-menu a{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 12px;
    border-radius: 12px;

    color: #0f1f2d;
    font-weight: 650;
    text-decoration:none;

    transition: background .18s ease, transform .18s ease, color .18s ease;
  }

  /* Détail top 1% : léger trait accent à gauche au hover */
  .main-nav .dropdown-menu a{
    position: relative;
  }
  .main-nav .dropdown-menu a::before{
    content:"";
    position:absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 999px;
    background: var(--nav-accent);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .main-nav .dropdown-menu a:hover{
    background: rgba(255,107,53,.10);
    transform: translateX(3px);
  }
  .main-nav .dropdown-menu a:hover::before{
    opacity: 1;
    transform: translateX(0);
  }

  .main-nav .dropdown-menu li + li{
    margin-top: 4px;
  }
}

/* Focus clavier */
.main-nav a:focus-visible{
  outline: 3px solid rgba(255,107,53,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ================================
   POPULAR SEARCH LINKS (premium)
   ================================ */
.search-popular-links{
  margin-top: 8px;
  font-size: 14px;
  color: rgba(15,46,68,.65);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.search-popular-links span{
  font-weight: 600;
  color: rgba(15,46,68,.85);
  margin-right: 6px;
}

.search-popular-links a{
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--nav-accent, #ff6b35);
  background: rgba(255,107,53,.08);
  transition: background .2s ease, color .2s ease, transform .18s ease;
}

.search-popular-links a:hover{
  background: rgba(255,107,53,.15);
  color: #ff4f1a;
  transform: translateY(-1px);
}

@media (max-width: 767px){
  .search-popular-links{
    font-size: 13px;
    gap: 10px;
  }
}

/* ===========================
   SEARCH HUB (FiboSearch)
   =========================== */

.search-hub{
  max-width: 980px;
  margin: 0 auto;
  padding: 6px 0 4px;
}

.search-input-wrap{
  position: relative;
}

/* Badge */
.search-badge{
  position: absolute;
  top: -10px;
  left: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #ff6b35;
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 5;
}

/* Cible FiboSearch input */
.search-hub .dgwt-wcas-search-input,
.search-hub input.dgwt-wcas-search-input{
  width: 100%;
  height: 56px !important;
  padding: 0 22px 0 52px !important;
  font-size: 16px !important;
  font-weight: 650 !important;

  border-radius: 999px !important;
  border: 2px solid rgba(15,46,68,.15) !important;
  background: #fff !important;

  transition: border .2s ease, box-shadow .2s ease;
}

.search-hub .dgwt-wcas-search-input:focus{
  outline: none !important;
  border-color: #ff6b35 !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.18) !important;
}


/* Quick links */
.search-quick-links{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-quick-links .label{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,46,68,.75);
  margin-right: 4px;
}

.search-quick-links a{
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: #ff6b35;
  background: rgba(255,107,53,.08);
  transition: background .2s ease, transform .18s ease;
}

.search-quick-links a:hover{
  background: rgba(255,107,53,.18);
  transform: translateY(-1px);
}

/* =====================================================
   PREMIUM SEARCH HUB (Top 1% polish)
   ===================================================== */

.search-hub{
  max-width: 820px;                 /* plus “premium”, moins étiré */
  margin: 0 auto;
  padding: 6px 0 10px;
}

.search-input-wrap{
  position: relative;
}

/* Badge devient une caption fine (fini l'effet sticker) */
.search-badge{
  position: absolute;
  top: -8px;
  left: 22px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;

  color: rgba(15,46,68,.85);
  background: rgba(255,255,255,.92);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border: 1px solid rgba(15,46,68,.10);
  z-index: 10;
}

/* Input FiboSearch */
.search-hub .dgwt-wcas-search-input{
  height: 56px !important;
  border-radius: 999px !important;

  padding: 0 56px 0 56px !important;
  font-size: 16px !important;
  font-weight: 650 !important;

  border: 1px solid rgba(15,46,68,.12) !important;
  background: #fff !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

/* Focus = premium */
.search-hub .dgwt-wcas-search-input:focus{
  outline: none !important;
  border-color: rgba(255,107,53,.55) !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.14), 0 18px 50px rgba(0,0,0,.14) !important;
  transform: translateY(-1px);
}

/* Icônes (loupe / clear) mieux intégrées */
.search-hub .dgwt-wcas-ico-magnifier,
.search-hub .dgwt-wcas-ico-loupe{
  opacity: .7;
}
.search-hub .dgwt-wcas-search-submit,
.search-hub .dgwt-wcas-search-icon{
  opacity: .8;
}

/* Quick access : plus chic et compact */
.search-quick-links{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.search-quick-links .label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,46,68,.72);
  margin-right: 2px;
}

.search-quick-links a{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;

  color: rgba(15,46,68,.90);
  background: rgba(15,46,68,.06);
  border: 1px solid rgba(15,46,68,.08);

  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.search-quick-links a:hover{
  background: rgba(255,107,53,.12);
  border-color: rgba(255,107,53,.25);
  transform: translateY(-1px);
}

/* =====================================================
   FIBOSEARCH DROPDOWN (le vrai "top 1%")
   ===================================================== */

/* Container dropdown */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-suggestions-wrapp *{
  box-sizing: border-box;
}

.dgwt-wcas-suggestions-wrapp{
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,46,68,.10) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.22) !important;
  background: #fff !important;
}

/* Titres "CATEGORIES" etc */
.dgwt-wcas-tax-header,
.dgwt-wcas-suggestion-headline{
  font-size: 11px !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  color: rgba(15,46,68,.55) !important;
  padding: 12px 16px !important;
  background: rgba(15,46,68,.03) !important;
  border-bottom: 1px solid rgba(15,46,68,.06) !important;
}

/* Items suggestions */
.dgwt-wcas-suggestion{
  padding: 12px 16px !important;
  transition: background .15s ease, transform .15s ease;
}

/* Hover item : glide premium */
.dgwt-wcas-suggestion:hover{
  background: rgba(255,107,53,.08) !important;
  transform: translateX(3px);
}

/* Liens dans dropdown */
.dgwt-wcas-suggestion a{
  font-weight: 700 !important;
  color: rgba(15,46,68,.92) !important;
}

/* Texte secondaire */
.dgwt-wcas-suggestion .dgwt-wcas-suggestion-product-price,
.dgwt-wcas-suggestion .dgwt-wcas-suggestion-extra{
  color: rgba(15,46,68,.55) !important;
}

/* Mobile */
@media (max-width: 768px){
  .search-hub{ max-width: 100%; padding: 4px 0 8px; }
  .search-hub .dgwt-wcas-search-input{ height: 52px !important; }
}

/* =========================================================
   DirectSourcePRO — My Account (Top-tier / "Command Center")
   Target: [woocommerce_my_account]
   ========================================================= */

.woocommerce-account .site-main,
.woocommerce-account .content-area,
.woocommerce-account .woocommerce{
  overflow: visible !important;
}

/* Container */
.woocommerce-account .woocommerce{
  --ink:#0b1b2a;
  --muted:rgba(11,27,42,.62);
  --line:rgba(11,27,42,.10);
  --card:#ffffff;
  --accent:#ff6b35;
  --shadow: 0 28px 90px rgba(0,0,0,.10);
  --radius: 22px;

  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 26px 18px 70px !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Grid 2 columns */
.woocommerce-account .woocommerce .u-columns{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 22px !important;
  align-items: start !important;
}

/* Each card */
.woocommerce-account .woocommerce .u-column1,
.woocommerce-account .woocommerce .u-column2{
  position: relative !important;
  background:
    radial-gradient(1000px 320px at 20% 0%, rgba(255,107,53,.12), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfcfe) !important;
  border: 1px solid rgba(11,27,42,.10) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 22px 22px 18px !important;
  min-width: 0 !important;
}

/* Card top "badge" line */
.woocommerce-account .woocommerce .u-column1::before,
.woocommerce-account .woocommerce .u-column2::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(255,107,53,.95), rgba(255,140,0,.85));
  opacity: .95;
}

/* Titles */
.woocommerce-account .woocommerce .u-column1 > h2,
.woocommerce-account .woocommerce .u-column2 > h2{
  margin: 8px 0 14px !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: -0.35px !important;
  color: var(--ink) !important;
}

/* Make all form fields full width (fix "tiny" inputs) */
.woocommerce-account .woocommerce form,
.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce form .form-row-wide{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
}

.woocommerce-account .woocommerce form .form-row{
  margin: 0 0 14px !important;
  padding: 0 !important;
}

/* Turn labels into subtle captions */
.woocommerce-account .woocommerce form label{
  display:block !important;
  margin: 0 0 7px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .35px !important;
  color: rgba(11,27,42,.70) !important;
}

/* Inputs – premium */
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="password"]{
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(11,27,42,.12) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.06) !important;
  color: rgba(11,27,42,.92) !important;
  font-weight: 750 !important;
  outline: none !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

.woocommerce-account .woocommerce input:focus{
  border-color: rgba(255,107,53,.40) !important;
  box-shadow: 0 22px 55px rgba(255,107,53,.14) !important;
  transform: translateY(-1px) !important;
}

/* Password eye icon spacing (theme dependent) */
.woocommerce-account .woocommerce .password-input{
  width: 100% !important;
}
.woocommerce-account .woocommerce .show-password-input{
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 14px !important;
}

/* Remember me row */
.woocommerce-account .woocommerce .woocommerce-form__label-for-checkbox{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  margin: 6px 0 14px !important;
  font-weight: 800 !important;
  color: rgba(11,27,42,.68) !important;
}
.woocommerce-account .woocommerce input[type="checkbox"]{
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--accent);
}

/* Buttons row spacing */
.woocommerce-account .woocommerce form .form-row:last-of-type{
  margin-bottom: 8px !important;
}

/* Primary buttons (Login/Register) */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button{
  width: 100% !important;
  height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,107,53,.25) !important;
  background: linear-gradient(135deg, #ff6b35, #ff8c00) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 22px 60px rgba(255,107,53,.22) !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
}

.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 30px 80px rgba(255,107,53,.28) !important;
  filter: saturate(1.05);
}

/* Lost password link */
.woocommerce-account .woocommerce .lost_password{
  margin-top: 10px !important;
}
.woocommerce-account .woocommerce .lost_password a{
  display:inline-block !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(11,27,42,.72) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(11,27,42,.18) !important;
  padding-bottom: 2px !important;
}
.woocommerce-account .woocommerce .lost_password a:hover{
  color: rgba(11,27,42,.95) !important;
  border-color: rgba(255,107,53,.30) !important;
}

/* Register side: make the long legal text look premium and compact */
.woocommerce-account .woocommerce .u-column2 p{
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: rgba(11,27,42,.60) !important;
  font-weight: 650 !important;
  margin: 10px 0 !important;
}

/* Turn the privacy paragraphs into a soft "info panel" feel */
.woocommerce-account .woocommerce .u-column2 form.register{
  position: relative !important;
}
.woocommerce-account .woocommerce .u-column2 form.register p:not(.form-row){
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(11,27,42,.03) !important;
  border: 1px solid rgba(11,27,42,.08) !important;
}

/* Links inside register block */
.woocommerce-account .woocommerce .u-column2 a{
  color: rgba(11,27,42,.78) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(11,27,42,.18) !important;
}
.woocommerce-account .woocommerce .u-column2 a:hover{
  border-color: rgba(255,107,53,.30) !important;
}

/* Remove any theme weird outlines / borders */
.woocommerce-account .woocommerce .u-column1 *,
.woocommerce-account .woocommerce .u-column2 *{
  outline: none !important;
}

/* Responsive */
@media (max-width: 980px){
  .woocommerce-account .woocommerce .u-columns{
    grid-template-columns: 1fr !important;
  }
}

/* Optional: subtle page background for wow (if your theme allows) */
.woocommerce-account{
  background:
    radial-gradient(1200px 420px at 20% 0%, rgba(255,107,53,.08), transparent 55%),
    linear-gradient(180deg, rgba(246,248,251,.85), rgba(255,255,255,1)) !important;
}

/* ============================
   FIX: forms too narrow inside cards
   Add AFTER previous CSS
   ============================ */

/* Force the actual Woo forms to fill the card */
.woocommerce-account .woocommerce .u-column1 .woocommerce-form-login,
.woocommerce-account .woocommerce .u-column2 .woocommerce-form-register,
.woocommerce-account .woocommerce .u-column2 form.register{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
}

/* Some themes set inner "form" wrapper widths */
.woocommerce-account .woocommerce .u-column1 form,
.woocommerce-account .woocommerce .u-column2 form{
  width: 100% !important;
  max-width: none !important;
}

/* Form rows and inputs must not be inline / constrained */
.woocommerce-account .woocommerce form .form-row{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row input[type="text"],
.woocommerce-account .woocommerce form .form-row input[type="email"],
.woocommerce-account .woocommerce form .form-row input[type="password"]{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

/* If your theme wraps inputs in spans/divs with fixed width */
.woocommerce-account .woocommerce form .form-row span,
.woocommerce-account .woocommerce form .form-row div{
  max-width: none !important;
}

/* Make register text blocks not squeeze the layout */
.woocommerce-account .woocommerce .u-column2 form.register p:not(.form-row){
  max-width: none !important;
}

/* Optional: give a nicer reading width on desktop (not too wide) */
@media (min-width: 981px){
  .woocommerce-account .woocommerce .u-column1,
  .woocommerce-account .woocommerce .u-column2{
    padding: 26px 26px 20px !important;
  }
}

/* ============================
   Woo My Account — fix narrow columns
   Put AFTER all your current CSS
   ============================ */

/* 1) Make the 2 columns layout modern + wide */
.woocommerce-account .woocommerce .u-columns{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1200px !important;   /* increase if you want even wider */
  margin: 0 auto !important;
  padding: 0 18px !important;
}

/* 2) Kill any theme floats / fixed widths on columns */
.woocommerce-account .woocommerce .u-column1.col-1,
.woocommerce-account .woocommerce .u-column2.col-2{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* 3) Ensure forms inside columns fill the card */
.woocommerce-account .woocommerce .u-column1.col-1 form,
.woocommerce-account .woocommerce .u-column2.col-2 form{
  width: 100% !important;
  max-width: none !important;
}

/* 4) Inputs always full width */
.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row input[type="text"],
.woocommerce-account .woocommerce form .form-row input[type="email"],
.woocommerce-account .woocommerce form .form-row input[type="password"]{
  width: 100% !important;
  max-width: none !important;
}

/* 5) Mobile: stack */
@media (max-width: 900px){
  .woocommerce-account .woocommerce .u-columns{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 12px !important;
  }
}

/* =========================================================
   DSP — Woo Password Reset (Ultra Premium)
   Targets: /password-reset/ WooCommerce lost password form
   ========================================================= */

/* Background */
body.woocommerce-lost-password{
  --ink:#0b1b2a;
  --muted:rgba(11,27,42,.62);
  --line:rgba(11,27,42,.10);
  --card:#fff;
  --bg:#f5f7fb;
  --accent:#ff6b35;

  background:
    radial-gradient(900px 320px at 20% 12%, rgba(255,107,53,.10), transparent 60%),
    radial-gradient(900px 320px at 85% 20%, rgba(11,27,42,.08), transparent 62%),
    linear-gradient(180deg, var(--bg), #ffffff) !important;
}

/* Remove ugly default spacing */
body.woocommerce-lost-password .site-content,
body.woocommerce-lost-password .content-area,
body.woocommerce-lost-password .woocommerce{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Center wrapper */
body.woocommerce-lost-password .woocommerce{
  max-width: 720px;
  margin: 34px auto 70px !important;
  padding: 0 18px !important;
}

/* The form block */
body.woocommerce-lost-password .woocommerce-ResetPassword{
  background:
    radial-gradient(820px 220px at 18% 0%, rgba(255,107,53,.10), transparent 60%),
    linear-gradient(180deg, rgba(250,251,253,.96), #ffffff);
  border: 1px solid rgba(11,27,42,.10);
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(0,0,0,.10);
  padding: 22px 22px 18px;
}

/* Title (we emulate a title using the first paragraph) */
body.woocommerce-lost-password .woocommerce-ResetPassword > p:first-of-type{
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(11,27,42,.08);
  color: rgba(11,27,42,.78);
  font-weight: 750;
  line-height: 1.55;
  position: relative;
}

/* Add a “headline” before the text */
body.woocommerce-lost-password .woocommerce-ResetPassword > p:first-of-type::before{
  content: "Reset your password";
  display: block;
  font-size: 26px;
  font-weight: 980;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 6px;
}

/* Label */
body.woocommerce-lost-password .woocommerce-ResetPassword label{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(11,27,42,.55);
  margin-bottom: 8px;
}

/* Input */
body.woocommerce-lost-password .woocommerce-ResetPassword input[type="text"],
body.woocommerce-lost-password .woocommerce-ResetPassword input[type="email"]{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(11,27,42,.14) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  font-weight: 750;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  transition: box-shadow .15s ease, border-color .15s ease;
}

body.woocommerce-lost-password .woocommerce-ResetPassword input:focus{
  outline: none !important;
  border-color: rgba(255,107,53,.40) !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.14) !important;
}

/* Button row */
body.woocommerce-lost-password .woocommerce-ResetPassword .form-row{
  margin-top: 14px !important;
}

/* Primary button */
body.woocommerce-lost-password .woocommerce-ResetPassword button,
body.woocommerce-lost-password .woocommerce-ResetPassword .button{
  height: 46px !important;
  width: 100%;
  border-radius: 14px !important;
  border: 1px solid rgba(255,107,53,.22) !important;
  background: linear-gradient(135deg, var(--accent), #ff8c5a) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 18px 44px rgba(255,107,53,.25) !important;
  transition: transform .14s ease, box-shadow .14s ease;
}

body.woocommerce-lost-password .woocommerce-ResetPassword button:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 56px rgba(255,107,53,.30) !important;
}

/* Links under form (Sign in / Signup) */
body.woocommerce-lost-password .woocommerce-ResetPassword + p,
body.woocommerce-lost-password .woocommerce-ResetPassword ~ p{
  max-width: 720px;
  margin: 10px auto 0 !important;
  padding: 0 6px !important;
  color: rgba(11,27,42,.62);
  font-weight: 700;
}

body.woocommerce-lost-password .woocommerce-ResetPassword + p a,
body.woocommerce-lost-password .woocommerce-ResetPassword ~ p a{
  color: rgba(11,27,42,.82);
  font-weight: 950;
  text-decoration: none;
  border-bottom: 1px solid rgba(11,27,42,.18);
  padding-bottom: 2px;
}

body.woocommerce-lost-password .woocommerce-ResetPassword + p a:hover,
body.woocommerce-lost-password .woocommerce-ResetPassword ~ p a:hover{
  border-color: rgba(255,107,53,.35);
}

/* Woo notices */
body.woocommerce-lost-password .woocommerce-notices-wrapper > *{
  border-radius: 14px !important;
  border: 1px solid rgba(11,27,42,.10) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
}

/* =========================================================
   DSP — Password Reset (Elementor + shortcode)
   Works even if body class is missing.
   ========================================================= */

body{
  --ink:#0b1b2a;
  --muted:rgba(11,27,42,.62);
  --line:rgba(11,27,42,.10);
  --bg:#f5f7fb;
  --accent:#ff6b35;
}

/* (A) Page background (safe) */
body:has(a[href*="/password-reset/"]),
body:has(form.woocommerce-ResetPassword),
body.woocommerce-lost-password{
  background:
    radial-gradient(900px 320px at 20% 12%, rgba(255,107,53,.10), transparent 60%),
    radial-gradient(900px 320px at 85% 20%, rgba(11,27,42,.08), transparent 62%),
    linear-gradient(180deg, var(--bg), #ffffff) !important;
}

/* (B) Elementor columns width fix
   -> forces full available width for your form column */
.elementor-section .elementor-container{
  max-width: 1320px !important;
}

/* If your template uses Ultimate Addons / U-Columns (u-column1 / u-column2),
   force them to behave 50/50 and not shrink */
.u-column1.col-1,
.u-column2.col-2{
  width: 50% !important;
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

/* On mobile stack */
@media (max-width: 960px){
  .u-column1.col-1,
  .u-column2.col-2{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* (C) Center + premium card for the reset form inside Elementor */
.elementor .woocommerce,
.elementor-page .woocommerce{
  max-width: 820px;
  margin: 28px auto 70px !important;
  padding: 0 18px !important;
  background: transparent !important;
}

/* The form itself */
.elementor .woocommerce-ResetPassword,
.elementor-page .woocommerce-ResetPassword{
  background:
    radial-gradient(820px 220px at 18% 0%, rgba(255,107,53,.10), transparent 60%),
    linear-gradient(180deg, rgba(250,251,253,.96), #ffffff);
  border: 1px solid rgba(11,27,42,.10);
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(0,0,0,.10);
  padding: 22px 22px 18px;
}

/* Headline from first paragraph */
.elementor .woocommerce-ResetPassword > p:first-of-type,
.elementor-page .woocommerce-ResetPassword > p:first-of-type{
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(11,27,42,.08);
  color: rgba(11,27,42,.78);
  font-weight: 750;
  line-height: 1.55;
  position: relative;
}

.elementor .woocommerce-ResetPassword > p:first-of-type::before,
.elementor-page .woocommerce-ResetPassword > p:first-of-type::before{
  content: "Reset your password";
  display: block;
  font-size: 26px;
  font-weight: 980;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 6px;
}

/* Labels */
.elementor .woocommerce-ResetPassword label,
.elementor-page .woocommerce-ResetPassword label{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(11,27,42,.55);
  margin-bottom: 8px;
}

/* Inputs */
.elementor .woocommerce-ResetPassword input[type="text"],
.elementor .woocommerce-ResetPassword input[type="email"],
.elementor-page .woocommerce-ResetPassword input[type="text"],
.elementor-page .woocommerce-ResetPassword input[type="email"]{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(11,27,42,.14) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  font-weight: 750;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.elementor .woocommerce-ResetPassword input:focus,
.elementor-page .woocommerce-ResetPassword input:focus{
  outline: none !important;
  border-color: rgba(255,107,53,.40) !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.14) !important;
}

/* Button row */
.elementor .woocommerce-ResetPassword .form-row,
.elementor-page .woocommerce-ResetPassword .form-row{
  margin-top: 14px !important;
}

/* Primary button */
.elementor .woocommerce-ResetPassword button,
.elementor .woocommerce-ResetPassword .button,
.elementor-page .woocommerce-ResetPassword button,
.elementor-page .woocommerce-ResetPassword .button{
  height: 46px !important;
  width: 100%;
  border-radius: 14px !important;
  border: 1px solid rgba(255,107,53,.22) !important;
  background: linear-gradient(135deg, var(--accent), #ff8c5a) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 18px 44px rgba(255,107,53,.25) !important;
  transition: transform .14s ease, box-shadow .14s ease;
}

.elementor .woocommerce-ResetPassword button:hover,
.elementor-page .woocommerce-ResetPassword button:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 56px rgba(255,107,53,.30) !important;
}

/* Links under form */
.elementor .woocommerce-ResetPassword + p,
.elementor .woocommerce-ResetPassword ~ p,
.elementor-page .woocommerce-ResetPassword + p,
.elementor-page .woocommerce-ResetPassword ~ p{
  max-width: 820px;
  margin: 10px auto 0 !important;
  padding: 0 6px !important;
  color: rgba(11,27,42,.62);
  font-weight: 700;
}

.elementor .woocommerce-ResetPassword + p a,
.elementor .woocommerce-ResetPassword ~ p a,
.elementor-page .woocommerce-ResetPassword + p a,
.elementor-page .woocommerce-ResetPassword ~ p a{
  color: rgba(11,27,42,.82);
  font-weight: 950;
  text-decoration: none;
  border-bottom: 1px solid rgba(11,27,42,.18);
  padding-bottom: 2px;
}

.elementor .woocommerce-ResetPassword + p a:hover,
.elementor .woocommerce-ResetPassword ~ p a:hover,
.elementor-page .woocommerce-ResetPassword + p a:hover,
.elementor-page .woocommerce-ResetPassword ~ p a:hover{
  border-color: rgba(255,107,53,.35);
}

/* Notices */
.elementor .woocommerce-notices-wrapper > *,
.elementor-page .woocommerce-notices-wrapper > *{
  border-radius: 14px !important;
  border: 1px solid rgba(11,27,42,.10) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
}