/**
 * Theme Name: Machic Child
 * Description: Child theme of Machic — refactored for maintainability & scalability.
 * Author: KlbTheme (Sinan ISIK)
 * Template: machic
 * Version: 2.0.0
 */

/* ==========================================================================
   TABLE OF CONTENTS
   1. Design Tokens (CSS Custom Properties)
   2. Reset / Base overrides
   3. Product Card
      3a. Thumbnail
      3b. Content wrapper
      3c. Title
      3d. Price & Cart button
      3e. Badges & Action buttons
      3f. List / Column variants
   4. Section Headers
   5. Navigation
      5a. Primary menu links
      5b. Underline indicator
      5c. Category / Department menus
      5d. Dropdown sub-menus
   6. Responsive — ≤ 768 px
   7. Responsive Banners Overrides
   8. WooCommerce Checkout Mobile Fix
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Change a value here → entire theme updates automatically.
   ========================================================================== */

:root {
  /* Brand colours */
  --color-primary:        #ef233c;
  --color-primary-hover:  #ef0000;
  --color-text-dark:      #111827;
  --color-text-muted:     #9ca3af;
  --color-border:         #e5e7eb;
  --color-bg-white:       #ffffff;
  --color-bg-hover:       #fafafa;

  /* Typography */
  --font-size-xs:         12px;
  --font-size-sm:         13px;
  --font-size-base:       14px;
  --font-size-price:      20px;
  --font-size-price-sm:   19px;
  --font-size-del:        13px;
  --font-size-heading:    22px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 650;
  --font-weight-bold:     700;

  --line-height-tight:    1.1;
  --line-height-snug:     1.2;
  --line-height-normal:   1.35;
  --line-height-relaxed:  1.45;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;

  /* Components */
  --cart-btn-size:        38px;
  --cart-btn-size-sm:     34px;
  --action-btn-size:      34px;
  --cart-icon-size:       18px;
  --cart-icon-size-sm:    16px;

  --radius-btn:           10px;
  --radius-action:        50%;
  --radius-badge:         999px;

  --img-max-height:       210px;
  --img-max-height-sm:    170px;

  --title-line-clamp:     2;
  --title-min-height:     38px;
  --title-max-height:     38px;

  /* Navigation */
  --nav-gap:              28px;
  --nav-link-pb:          8px;
  --nav-sub-px:           24px;
  --nav-sub-py:           11px;
  --nav-indicator-h:      2px;
  --nav-indicator-w:      70%;
}


/* ==========================================================================
   2. RESET / BASE OVERRIDES
   ========================================================================== */

/* Hide legacy product message rows that the theme injects */
.product-message {
  display:    none;
  visibility: hidden;
  height:     0;
  min-height: 0;
  margin:     0;
  padding:    0;
  overflow:   hidden;
}

/* Collapse the meta wrapper that holds the message */
.product-meta {
  margin-top: 0;
  padding-top: 0;
  min-height:  0;
  height:      0;
  overflow:    hidden;
}


/* ==========================================================================
   3. PRODUCT CARD
   ========================================================================== */

/* 3a. Thumbnail */
.thumbnail-wrapper img,
.product-card img {
  object-fit: contain;
  max-height:  var(--img-max-height);
}

/* 3b. Content wrapper */
.product-content {
  position: relative;
}

.content-wrapper {
  padding-top:    var(--space-3);
  padding-bottom: var(--space-2);
}

/* 3c. Title */
.product-title,
.product-title a {
  font-size:    var(--font-size-base);
  font-weight:  var(--font-weight-medium);
  line-height:  var(--line-height-normal);
  color:        var(--color-text-dark);
  letter-spacing: -0.1px;

  display:             -webkit-box;
  -webkit-line-clamp:  var(--title-line-clamp);
  -webkit-box-orient:  vertical;
  overflow:            hidden;
  text-overflow:       ellipsis;

  min-height:    var(--title-min-height);
  max-height:    var(--title-max-height);
  margin-bottom: var(--space-2);
}

.product-title a:hover {
  color: var(--color-primary);
}

/* 3d. Price & Cart button */
.product-price-cart {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  margin-top:      var(--space-1);
}

.price {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            5px;
  line-height:    var(--line-height-snug);
}

.price ins,
.price ins .amount,
.price ins bdi {
  font-size:       var(--font-size-price);
  font-weight:     var(--font-weight-semibold);
  color:           var(--color-primary);
  text-decoration: none;
  line-height:     var(--line-height-snug);
}

.price ins {
  margin-top: 0;
}

.price del,
.price del .amount,
.price del bdi {
  font-size:   var(--font-size-del);
  font-weight: var(--font-weight-regular);
  color:       var(--color-text-muted);
  line-height: var(--line-height-tight);
}

.price del {
  margin-bottom: 0;
}

.price > .woocommerce-Price-amount,
.price > .amount,
.price > bdi {
  font-size:   var(--font-size-price);
  font-weight: var(--font-weight-semibold);
}

.product-price-cart .button {
  width:       var(--cart-btn-size);
  height:      var(--cart-btn-size);
  min-width:   var(--cart-btn-size);
  border-radius: var(--radius-btn);
  padding:     0;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   0;
  background:  var(--color-bg-white);
  border:      1px solid var(--color-border);
  box-shadow:  none;
  transition:  background 0.2s ease, border-color 0.2s ease;
  cursor:      pointer;
}

.product-price-cart .button i {
  font-size: var(--cart-icon-size);
  color:     var(--color-primary);
  transition: color 0.2s ease;
}

.product-price-cart .button:hover {
  background:    var(--color-primary);
  border-color:  var(--color-primary);
}

.product-price-cart .button:hover i {
  color: var(--color-bg-white);
}

/* 3e. Badges & Action buttons */
.badge,
.badge.onsale,
.onsale {
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-bold);
  border-radius: var(--radius-badge);
  padding:       6px 10px;
  line-height:   1;
}

.product-buttons a,
.product-buttons .wishlist,
.product-buttons .klbcp-btn,
.product-buttons .quickview {
  width:          var(--action-btn-size);
  height:         var(--action-btn-size);
  border-radius: var(--radius-action);
  background:    var(--color-bg-white);
  border:        1px solid var(--color-border);
  box-shadow:    0 4px 12px rgba(0, 0, 0, 0.06);
}

/* 3f. List / Column product variants */
.product-list .product-title,
.product-list .product-title a,
.column-product .product-title,
.column-product .product-title a {
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-normal);

  display:             -webkit-box;
  -webkit-line-clamp: var(--title-line-clamp);
  -webkit-box-orient: vertical;
  overflow:            hidden;
  text-overflow:       ellipsis;
}

.product-list .price,
.column-product .price {
  gap: var(--space-1);
}

.product-list .price ins,
.product-list .price ins bdi,
.column-product .price ins,
.column-product .price ins bdi {
  font-size:   var(--font-size-price-sm);
  font-weight: var(--font-weight-semibold);
}

.product-list .price del,
.product-list .price del bdi,
.column-product .price del,
.column-product .price del bdi {
  font-size: var(--font-size-del);
  color:     var(--color-text-muted);
}


/* ==========================================================================
   4. SECTION HEADERS
   ========================================================================== */

.elementor-widget-container h2,
.klb-module-header h3,
.module-header h3,
.site-module-header h3 {
  font-size:   var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-dark);
}

/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

/* 5a. Primary menu — li conteneur
   -------------------------------------------------------------------------- */
.site-header nav > ul > li:not(.categories-item):not(.departments-item),
.header-nav > ul > li:not(.categories-item):not(.departments-item),
.primary-menu > li,
.main-menu > li,
.nav-menu > li {
  position: relative;
  display:  flex;
  align-items: center;
}

/* Gap entre items */
.site-header nav ul,
.header-nav ul,
.primary-menu,
.main-menu,
.nav-menu {
  gap:         var(--nav-gap);
  align-items: center;
}

/* Lien — On remet le position: relative ici pour que la barre colle au texte */
.site-header nav ul li > a:not(.category-toggle),
.header-nav ul li > a:not(.category-toggle),
.primary-menu li > a,
.main-menu li > a,
.nav-menu li > a {
  position:      relative !important; /* Devient l'ancre officielle du ::after */
  display:       inline-flex;
  align-items:   center;
  background:    transparent !important;
  box-shadow:    none !important;
  border-radius: 0;
  color:         var(--color-text-dark) !important;
  padding:       0 0 var(--nav-link-pb) 0; /* Gère précisément l'espace sous le texte via les tokens */
  min-height:    auto;
  height:        auto;
}

/* Hover + active : On force le rouge sur le lien ET sur tout ce qu'il contient (*) pour tuer le blanc */
.site-header nav ul li > a:not(.category-toggle):hover,
.site-header nav ul li > a:not(.category-toggle):hover *,
.site-header nav ul li.current-menu-item > a:not(.category-toggle),
.site-header nav ul li.current-menu-item > a:not(.category-toggle) *,
.header-nav ul li > a:not(.category-toggle):hover,
.header-nav ul li > a:not(.category-toggle):hover *,
.header-nav ul li.current-menu-item > a:not(.category-toggle),
.header-nav ul li.current-menu-item > a:not(.category-toggle) *,
.primary-menu li > a:hover,
.primary-menu li > a:hover *,
.primary-menu li.current-menu-item > a,
.primary-menu li.current-menu-item > a *,
.main-menu li > a:hover,
.main-menu li > a:hover *,
.main-menu li.current-menu-item > a,
.main-menu li.current-menu-item > a *,
.nav-menu li > a:hover,
.nav-menu li > a:hover *,
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-item > a * {
  color:      var(--color-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 5b. Indicateur rouge — Ancré sur le <a> pour coller pile sous le texte
   -------------------------------------------------------------------------- */
.site-header nav > ul > li:not(.categories-item):not(.departments-item) > a::after,
.header-nav > ul > li:not(.categories-item):not(.departments-item) > a::after,
.primary-menu > li > a::after,
.main-menu > li > a::after,
.nav-menu > li > a::after {
  content:      "";
  position:      absolute;
  left:          50%;
  bottom:        0; /* Se colle au ras du padding-bottom du texte */
  width:         0;
  height:        var(--nav-indicator-h);
  background:    var(--color-primary);
  border-radius: var(--radius-badge);
  transform:     translateX(-50%);
  transition:    width 0.25s ease;
  pointer-events: none;
  display:       block !important; /* Évite les display:none résiduels */
}

/* Affichage de la barre au hover et sur l'item actif */
.site-header nav > ul > li:not(.categories-item):not(.departments-item):hover > a::after,
.site-header nav > ul > li.current-menu-item:not(.categories-item) > a::after,
.header-nav > ul > li:not(.categories-item):not(.departments-item):hover > a::after,
.header-nav > ul > li.current-menu-item:not(.categories-item) > a::after,
.primary-menu > li:hover > a::after,
.primary-menu > li.current-menu-item > a::after,
.main-menu > li:hover > a::after,
.main-menu > li.current-menu-item > a::after,
.nav-menu > li:hover > a::after,
.nav-menu > li.current-menu-item > a::after {
  width: var(--nav-indicator-w);
}

/* 5c. Category / Department menus
   -------------------------------------------------------------------------- */
.site-header .categories-menu a,
.site-header .category-menu a,
.site-header .product-categories a,
.site-header .klb-menu-categories a,
.site-header .departments-menu a,
.site-header .header-categories a,
.category-menu-wrap a,
.klb-category-menu a,
.category-drawer a,
.categories-list a,
.mobile-menu a {
  background:    transparent;
  box-shadow:    none;
  border-radius: 0;
}

/* Nettoyage strict sur les liens de catégories pour éviter les doublons */
.site-header .categories-menu a::after,
.site-header .category-menu a::after,
.site-header .product-categories a::after,
.site-header .klb-menu-categories a::after,
.site-header .departments-menu a::after,
.site-header .header-categories a::after,
.category-menu-wrap a::after,
.klb-category-menu a::after,
.category-drawer a::after,
.categories-list a::after,
.mobile-menu a::after,
.site-header nav .categories-menu ul li a::after,
.site-header nav .category-menu ul li a::after,
.site-header nav ul li.menu-item-has-children > a.category-toggle::after {
  display: none !important;
  content: none !important;
}

/* Bouton toggle "Toutes les catégories" */
.site-header .departments-menu > a,
.site-header .header-categories > a,
.site-header .category-toggle,
.site-header .categories-button {
  background:    transparent;
  color:         var(--color-text-dark);
  box-shadow:    none;
  border-radius: 0;
  font-weight:   var(--weight-bold);
}

.site-header .departments-menu > a *,
.site-header .header-categories > a *,
.site-header .category-toggle *,
.site-header .categories-button * {
  color: var(--color-text-dark);
}

/* Icônes du menu catégories */
.site-header .categories-menu li,
.site-header .category-menu li,
.site-header .klb-menu-categories li,
.categories-list li {
  position: static;
  display:  flex;
  align-items: center;
}

.site-header .categories-menu li a,
.site-header .category-menu li a,
.site-header .klb-menu-categories li a,
.categories-list li a {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     8px 12px;
  width:       100%;
  position:    static;
}

.site-header .categories-menu li a i,
.site-header .category-menu li a i,
.site-header .klb-menu-categories li a i,
.categories-list li a i {
  flex-shrink: 0;
  font-size:   16px;
  color:       var(--color-primary);
  line-height: 1;
}

/* 5d. Dropdown sub-menus */
.site-header .sub-menu li a,
.site-header .children li a {
  padding:     var(--nav-sub-py) var(--nav-sub-px);
  font-size:   var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.site-header .sub-menu li a::after,
.site-header .children li a::after {
  display: none !important;
  content: none !important;
}

.site-header .sub-menu li + li,
.site-header .children li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.site-header .sub-menu li a:hover,
.site-header .children li a:hover {
  color:      var(--color-primary-hover);
  background: var(--color-bg-hover);
}

/* ==========================================================================
   6. RESPONSIVE — ≤ 768 px
   ========================================================================== */

@media (max-width: 768px) {

  :root {
    --font-size-price:   18px;
    --font-size-del:     12px;
    --cart-btn-size:     var(--cart-btn-size-sm);
    --cart-icon-size:    var(--cart-icon-size-sm);
    --img-max-height:    var(--img-max-height-sm);
    --title-min-height:  36px;
    --title-max-height:  36px;
  }

  .product-title,
  .product-title a {
    font-size: var(--font-size-sm);
  }

  .price {
    gap: var(--space-1);
  }
}


/* ==========================================================================
   7. RESPONSIVE BANNERS OVERRIDES (Version Épurée & Aérée)
   ========================================================================== */

/* --- TABLETTES (Entre 769px et 1024px) --- */
@media (max-width: 1024px) and (min-width: 769px) {
  .shop-banner-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 0 20px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .shop-banner-bottom::-webkit-scrollbar {
    display: none;
  }

  .shop-banner-bottom .col {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    margin-top: 0 !important;
  }

  .shop-banner-bottom .banner {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .shop-banner-bottom .banner-image img {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
  }
}

/* --- SMARTPHONES / ANDROID (≤ 768px) --- */
@media (max-width: 768px) {
  .shop-banner-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 16px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
  }

  .shop-banner-bottom .col {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .shop-banner-bottom .banner {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
  }

  .shop-banner-bottom .banner-image {
    width: 100% !important;
    height: auto !important;
  }

  .shop-banner-bottom .banner-image img {
    width: 100% !important;
    height: 115px !important;
    object-fit: cover !important;
    display: block !important;
  }
}


/* ==========================================================================
   9. FOOTER RESPONSIVE & MODERN
   ========================================================================== */

/* --- Structure principale du footer --- */
.site-footer,
.footer {
  background: #1a1e2b; /* Fond moderne foncé */
  color: #e5e7eb;
  padding: 40px 0 20px;
  margin-top: 40px;
}

/* Colonnes du footer */
.footer-widgets,
.footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Chaque widget/colonne */
.footer-widget,
.widget {
  flex: 1;
  min-width: 180px;
}

/* --- Titres des sections footer --- */
.footer-widget .widget-title,
.widget .widget-title {
  color: #2e2e2e;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

/* Petit trait sous le titre */
.footer-widget .widget-title:after,
.widget .widget-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #ef233c;
}

/* --- Liens du footer --- */
.footer-widget ul li,
.widget ul li {
  margin-bottom: 10px;
  list-style: none;
}

.footer-widget ul li a,
.widget ul li a {
  color: #e5e7eb;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 14px;
}

.footer-widget ul li a:hover,
.widget ul li a:hover {
  color: #ef233c;
  padding-left: 3px;
}

/* --- Coordonnées / Contact --- */
.footer-contact-info {
  margin-bottom: 20px;
}

.footer-contact-info p {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.footer-contact-info i {
  width: 25px;
  color: #ef233c;
  font-size: 16px;
}

/* --- Horaires --- */
.footer-hours {
  font-size: 13px;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 8px;
  margin-top: 15px;
}

/* --- Copyright / Bottom bar --- */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 30px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}

/* ==========================================================================
   10. FOOTER RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- Tablettes (≤ 1024px) --- */
@media (max-width: 1024px) {
  .footer-widgets,
  .footer-columns {
    gap: 25px;
    padding: 0 25px;
  }
  
  .footer-widget,
  .widget {
    min-width: 200px;
    flex: 1 1 calc(33.33% - 50px);
  }
}

/* --- Mobiles (≤ 768px) --- */
@media (max-width: 768px) {
  .footer-widgets,
  .footer-columns {
    flex-direction: column;
    gap: 30px;
    padding: 0 20px;
  }
  
  .footer-widget,
  .widget {
    width: 100%;
    min-width: auto;
  }
  
  /* Titres cliquables sur mobile (accordéon optionnel) */
  .footer-widget .widget-title,
  .widget .widget-title {
    cursor: pointer;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  
  /* Cache le contenu des widgets sur mobile si vous voulez un effet accordéon */
  /* .footer-widget .widget-content {
    display: none;
  }
  .footer-widget.active .widget-content {
    display: block;
  } */
  
  /* Espacement des liens */
  .footer-widget ul li,
  .widget ul li {
    margin-bottom: 12px;
  }
  
  /* Centre les infos de contact */
  .footer-contact-info p {
    justify-content: center;
  }
  
  .footer-contact-info i {
    width: 30px;
  }
  
  .footer-hours {
    text-align: center;
  }
}

/* --- Très petits mobiles (≤ 480px) --- */
@media (max-width: 480px) {
  .footer-widgets,
  .footer-columns {
    padding: 0 15px;
    gap: 25px;
  }
  
  .footer-widget .widget-title,
  .widget .widget-title {
    font-size: 16px;
  }
  
  .footer-widget ul li a,
  .widget ul li a {
    font-size: 13px;
  }
  
  .footer-contact-info p {
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
  }
  
  .footer-bottom {
    font-size: 11px;
    padding: 15px;
  }
}
/* ==========================================================================
   9. FOOTER ELEMENTOR RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   9. FOOTER — RESPONSIVE
   Tokens : utilise les variables --color-* définis en section 1.
   Sélecteurs : génériques (pas de data-id Elementor hardcodés).
   ========================================================================== */

/* ── Tokens footer (étend la section 1) ───────────────────────────────────── */
:root {
  --footer-bg:          #1a1e2b;
  --footer-bg-dark:     #0f1115;
  --footer-text:        #a0a4b8;
  --footer-text-light:  #e5e7eb;
  --footer-border:      rgba(255, 255, 255, 0.08);
  --footer-gap:         32px;
  --footer-pad-x:       24px;
}

/* ── Base — empêcher le débordement horizontal ────────────────────────────── */
.site-footer,
.elementor-location-footer {
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ── Wrapper principal du footer ──────────────────────────────────────────── */
.elementor-location-footer .e-con,
.elementor-location-footer .elementor-container {
  max-width:  100%;
  box-sizing: border-box;
}

/* ── Colonnes footer — desktop (défaut) ───────────────────────────────────── */
.elementor-location-footer .elementor-column,
.elementor-location-footer .e-con > .e-con-inner > *,
.elementor-location-footer .e-con > * {
  min-width: 0;       /* empêche le débordement des longs textes */
  box-sizing: border-box;
}

/* ── Titres des sections footer ───────────────────────────────────────────── */
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .widget-title {
  color:         var(--footer-text-light) !important;
  font-size:     17px !important;
  font-weight:   var(--font-weight-bold) !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  position:      relative;
}

/* Trait rouge sous chaque titre */
.elementor-location-footer .elementor-heading-title::after,
.elementor-location-footer .widget-title::after {
  content:       '';
  position:      absolute;
  left:          0;
  bottom:        0;
  width:         36px;
  height:        2px;
  background:    var(--color-primary);
  border-radius: var(--radius-badge);
}

/* ── Textes & liens footer ────────────────────────────────────────────────── */
.elementor-location-footer p,
.elementor-location-footer li,
.elementor-location-footer .elementor-icon-list-text {
  color:       var(--footer-text) !important;
  font-size:   var(--font-size-base) !important;
  line-height: var(--line-height-relaxed) !important;
}

.elementor-location-footer a,
.elementor-location-footer .elementor-icon-list-item a {
  color:      var(--footer-text) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.elementor-location-footer a:hover,
.elementor-location-footer .elementor-icon-list-item a:hover {
  color: var(--color-primary) !important;
}

/* ── Icônes dans les listes (contact, catégories) ─────────────────────────── */
.elementor-location-footer .elementor-icon-list-icon svg,
.elementor-location-footer .elementor-icon-list-icon i {
  fill:     var(--color-primary) !important;
  color:    var(--color-primary) !important;
  width:    16px !important;
  height:   16px !important;
}

/* ── Icônes réseaux sociaux ───────────────────────────────────────────────── */
.elementor-location-footer .elementor-social-icon {
  background:  var(--footer-border) !important;
  transition:  background 0.25s ease, transform 0.25s ease !important;
}

.elementor-location-footer .elementor-social-icon:hover {
  background: var(--color-primary) !important;
  transform:  translateY(-3px);
}

.elementor-location-footer .elementor-social-icon svg {
  fill: var(--footer-text-light) !important;
}

/* ── Menus nav verticaux (Catégories, Liens utiles) ───────────────────────── */
.elementor-location-footer .elementor-nav-menu li a {
  color:       var(--footer-text) !important;
  font-size:   var(--font-size-base) !important;
  padding:     5px 0 !important;
  transition:  color 0.2s ease, padding-left 0.2s ease !important;
}

.elementor-location-footer .elementor-nav-menu li a:hover {
  color:        var(--color-primary) !important;
  padding-left: 6px !important;
}

/* ── Barre copyright ──────────────────────────────────────────────────────── */
.elementor-location-footer .copyright-bar,
.elementor-location-footer [class*="copyright"],
.elementor-location-footer .footer-bottom {
  border-top:  1px solid var(--footer-border);
  margin-top:  24px;
  padding-top: 16px;
  text-align:  center;
  font-size:   var(--font-size-xs) !important;
  color:       var(--footer-text) !important;
}

/* ==========================================================================
   9b. FOOTER — TABLETTE (769px – 1024px) : 2 colonnes × 2 lignes
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 769px) {
  .elementor-location-footer .e-con-inner,
  .elementor-location-footer .elementor-container {
    flex-wrap: wrap !important;
    gap:       24px !important;
    padding:   0 var(--footer-pad-x) !important;
  }

  .elementor-location-footer .elementor-column,
  .elementor-location-footer .e-con-inner > * {
    flex:      0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}

/* ==========================================================================
   9c. FOOTER — MOBILE (≤ 768px) : 1 colonne, centré
   ========================================================================== */

@media (max-width: 768px) {
  /* Empilement vertical */
  .elementor-location-footer .e-con-inner,
  .elementor-location-footer .elementor-container {
    flex-direction: column !important;
    gap:            28px !important;
    padding:        0 16px !important;
    align-items:    center !important;
  }

  /* Pleine largeur */
  .elementor-location-footer .elementor-column,
  .elementor-location-footer .e-con-inner > * {
    flex:       unset !important;
    width:      100% !important;
    max-width:  100% !important;
    text-align: center !important;
  }

  /* Trait rouge centré sous les titres */
  .elementor-location-footer .elementor-heading-title::after,
  .elementor-location-footer .widget-title::after {
    left:      50% !important;
    transform: translateX(-50%);
  }

  /* Logo centré */
  .elementor-location-footer .elementor-image,
  .elementor-location-footer .elementor-image-box-img {
    margin: 0 auto 12px !important;
  }

  /* Listes de contact centrées */
  .elementor-location-footer .elementor-icon-list-items {
    display:        flex;
    flex-direction: column;
    align-items:    center;
  }

  .elementor-location-footer .elementor-icon-list-item,
  .elementor-location-footer .elementor-icon-list-item a {
    justify-content: center !important;
  }

  /* Réseaux sociaux centrés */
  .elementor-location-footer .elementor-social-icons-wrapper {
    justify-content: center !important;
  }

  /* Menus nav centrés */
  .elementor-location-footer .elementor-nav-menu {
    text-align: center !important;
  }

  .elementor-location-footer .elementor-nav-menu li a:hover {
    padding-left: 0 !important;   /* pas de décalage à gauche sur mobile */
  }

  /* Espacement items */
  .elementor-location-footer .elementor-icon-list-items li {
    margin-bottom: 10px !important;
  }
}

/* ==========================================================================
   9d. FOOTER — TRÈS PETIT MOBILE (≤ 480px)
   ========================================================================== */

@media (max-width: 480px) {
  .elementor-location-footer .elementor-heading-title {
    font-size: 15px !important;
  }

  .elementor-location-footer p,
  .elementor-location-footer li,
  .elementor-location-footer .elementor-icon-list-text,
  .elementor-location-footer .elementor-nav-menu li a {
    font-size: var(--font-size-sm) !important;
  }

  .elementor-location-footer .elementor-icon-list-icon svg {
    width:  14px !important;
    height: 14px !important;
  }
}


/* ==========================================================================
   10. TOP HEADER LEFT — Sans indicateur & sans hover
   ========================================================================== */

.top-header-left {
  /* Container */
}

/* Liens du top-header-left — pas de barre en dessous */
.top-header-left a,
.top-header-left a::after {
  /* On garde la position relative pour d'éventuels enfants, 
     mais on enlève tout indicateur */
}

/* Suppression explicite de la barre rouge */
.top-header-left a::after,
.top-header-left li > a::after {
  content: none !important;
  display: none !important;
}

/* Suppression du hover rouge */
.top-header-left a:hover,
.top-header-left a:hover *,
.top-header-left li > a:hover,
.top-header-left li > a:hover * {
  color: inherit !important;
  background: transparent !important;
}

/* On laisse le lien normal, sans changement de couleur au survol */



.klb-lowest-price-30 {
    display: none !important;
}