/* ================================================
   Vilain Garçon — Brand Overrides for Pesco
   Charge APRÈS default.css et style.css
   ================================================ */

/* ---- Variables ---- */
:root {
  --vg-accent:          #5e3916;
  --vg-accent-light:    #7a4d20;
  --vg-black:           #0e0e0e;
  --vg-white:           #fdfeff;

  /* Remplace rouge + bleu nuit Pesco par les tons VG */
  --primary-color:      #5e3916;   /* tous les accents : liens hover, badges, sous-titres… */
  --primary-dark-color: #0e0e0e;   /* fonds sombres : nav, boutons, pagination active… */
  --secondary-color:    #7a4d20;   /* accent secondaire */
}

/* ================================================
   Boutons
   ================================================ */
.theme-btn.style-one,
.theme-btn.style-one:focus {
  background-color: var(--vg-accent);
  border-color:     var(--vg-accent);
  color:            #fff;
}
.theme-btn.style-one:hover {
  background-color: var(--vg-accent-light);
  border-color:     var(--vg-accent-light);
}

/* ================================================
   Header navigation — fond sombre VG
   ================================================ */
.header-navigation.style-one {
  background-color: var(--vg-black);
  color:            #fff;
}

/* Liens du menu principal */
.header-navigation .main-menu ul > li > a {
  color: rgba(255, 255, 255, 0.88);
}
.header-navigation .main-menu ul > li:hover > a {
  color: #fff;
}

/* Bouton hamburger (mobile) */
.header-navigation .navbar-toggler span {
  background-color: #fff;
}
.header-navigation .navbar-toggler.active span {
  background-color: #fff;
}

/* Panneau nav mobile (fond blanc → texte sombre) */
@media (max-width: 991px) {
  .header-navigation .pesco-nav-menu .main-menu ul li a,
  .header-navigation .pesco-nav-menu .main-menu ul li .sub-menu li a {
    color: var(--vg-black);
  }
}

/* Sous-menus desktop (fond blanc → texte sombre déjà via --primary-dark-color) */
.header-navigation .main-menu ul > li .sub-menu li a {
  color: var(--vg-black);
}

/* Icônes droite (user, heart, cart) + séparateurs → blancs sur fond noir */
.header-navigation.style-one .nav-right-item.style-one i,
.header-navigation.style-one .nav-right-item.style-one ul li:not(:last-child):after {
  color: #fff;
}

/* Mobile : le thème met un fond blanc sur le bloc panier → l'icône doit être sombre */
@media (max-width: 991px) {
  /* Icône panier : sombre sur fond blanc */
  .header-navigation.style-one .nav-right-item.style-one .cart-button .icon i {
    color: var(--vg-black);
  }
  /* Compteur panier : le thème le cache sur mobile (display:none) — on le réaffiche */
  .header-navigation.style-one .nav-right-item.style-one .cart-button .pro-count {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -8px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    background: var(--vg-black);
    color: #fff;
    line-height: 1;
  }
  .header-navigation.style-one .nav-right-item.style-one .cart-button .icon {
    position: relative;
  }
  /* Icône compte : toujours blanche sur fond sombre du header */
  .header-navigation.style-one .nav-right-item.style-one .vg-account-mobile i {
    color: #fff;
    font-size: 22px;
  }
  .header-navigation.style-one .nav-right-item.style-one .vg-account-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }
}

/* Bouton catégories — fond blanc, texte sombre (lisible sur la nav noire) */
.header-navigation.style-one .main-categories-wrap .categories-btn-active {
  color: var(--vg-black);
}

/* Hero bouton : tient sur une ligne */
.hero-content.style-one .theme-btn {
  white-space: nowrap;
}

/* Hero slider : flèches centrées sur l'image (col droite) */
.hero-wrapper-one {
  position: relative;
}
.hero-arrows {
  position:        absolute;
  top:             60%;
  transform:       translateY(-50%);
  left:            56%;
  right:           10%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  z-index:         10;
  pointer-events:  none;
}
/* Cercles — même look que les flèches testimonial */
.hero-arrows .prev,
.hero-arrows .next {
  pointer-events:  all;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      #fff;
  box-shadow:      0 4px 16px rgba(0,0,0,.12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       16px;
  color:           var(--vg-black);
  transition:      background .2s, color .2s;
  flex-shrink:     0;
}
.hero-arrows .prev:hover,
.hero-arrows .next:hover {
  background: var(--vg-accent);
  color:      #fff;
}
/* Masque l'image décorative Pesco, garde l'icône flaticon */
.hero-arrows .prev img,
.hero-arrows .next img {
  display: none;
}
@media (max-width: 991px) {
  .hero-arrows {
    left:  2%;
    right: 2%;
    top:   auto;
    bottom: 16px;
    transform: none;
  }
}

/* vg-card dans un slider : retire la marge basse interne */
.trending-products-slider .vg-card {
  margin-bottom: 0;
}

/* Trending card : image ne déborde pas */
.product-item.style-two .product-thumbnail {
  overflow: hidden;
}

/* Footer : étoiles bullet → taille fixe */
.footer-widget .widget-menu li img {
  width:  14px;
  height: 14px;
  margin-right: 8px;
  flex-shrink: 0;
}
.footer-widget .widget-menu li {
  display: flex;
  align-items: center;
}

/* ================================================
   Liens hover globaux → brun VG
   ================================================ */
a:hover,
.main-menu li a:hover,
.footer-widget .widget-menu li a:hover,
.footer-dark .footer-nav-widget .widget-content ul.widget-menu li a:hover {
  color: var(--vg-accent);
}

/* ================================================
   Preloader
   ================================================ */
.preloader .loader img {
  max-width: 60px;
}

/* ================================================
   Auth multi-étapes → brun VG (vg-account.css)
   ================================================ */
.vg-auth-progress span.is-active {
  background-color: var(--vg-accent);
  border-color:     var(--vg-accent);
  color:            #fff;
}

/* ================================================
   Nav compte (sidebar) — lien actif → brun VG
   ================================================ */
.vg-account-nav-link.is-active {
  background-color: var(--vg-accent);
  color:            #fff;
}
.vg-account-nav-link.is-active:hover {
  background-color: var(--vg-accent-light);
  color:            #fff;
}

/* ================================================
   Badge tracking commande → brun VG
   ================================================ */
.vg-tracking-badge {
  background-color: var(--vg-accent);
}

/* ================================================
   Back-to-top (hérite déjà de --primary-dark-color)
   mais on renforce avec l'accent VG
   ================================================ */
.back-to-top:hover {
  background-color: var(--vg-accent);
}

/* ================================================
   Carte produit VG
   ================================================ */
.vg-card {
  background:    #fff;
  border-radius: 18px;
  overflow:      hidden;
  box-shadow:    0 4px 24px rgba(0,0,0,.08);
  transition:    box-shadow .25s ease, transform .25s ease;
  margin-bottom: 30px;
}
.vg-card:hover {
  box-shadow:    0 8px 36px rgba(0,0,0,.14);
  transform:     translateY(-3px);
}
.vg-card-img-wrap {
  position:      relative;
  overflow:      hidden;
  aspect-ratio:  1 / 1;
  background:    #f5f5f5;
}
.vg-card-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .35s ease;
}
.vg-card:hover .vg-card-img {
  transform: scale(1.04);
}
.vg-card-wishlist {
  position:         absolute;
  top:              12px;
  right:            12px;
  width:            38px;
  height:           38px;
  border-radius:    50%;
  background:       #fff;
  border:           none;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  box-shadow:       0 2px 8px rgba(0,0,0,.15);
  font-size:        15px;
  color:            #555;
  transition:       color .2s, background .2s;
  z-index:          2;
}
.vg-card-wishlist:hover,
.vg-card-wishlist.is-active {
  color:       var(--vg-accent);
  background:  #fdf6ef;
}
.vg-card-body {
  padding: 16px 18px 18px;
}
.vg-card-title {
  font-size:   16px;
  font-weight: 700;
  margin:      0 0 4px;
  line-height: 1.35;
}
.vg-card-title a {
  color:           #111;
  text-decoration: none;
}
.vg-card-title a:hover {
  color: var(--vg-accent);
}
.vg-card-sub {
  font-size:   13px;
  color:       #888;
  margin:      0 0 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.vg-card-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         8px;
  margin-top:  12px;
}
.vg-card-price {
  display:       inline-block;
  background:    #f0f0f0;
  border-radius: 999px;
  padding:       5px 14px;
  font-size:     13px;
  font-weight:   700;
  color:         #111;
  white-space:   nowrap;
}
.vg-card-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      var(--vg-black);
  color:           #fff;
  border-radius:   999px;
  padding:         8px 18px;
  font-size:       13px;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .2s;
}
.vg-card-btn:hover {
  background: var(--vg-accent);
  color:      #fff;
}
.vg-card-btn--cart {
  padding:    8px 12px;
  background: rgba(0,0,0,.07);
  color:      #111;
  border:     none;
  cursor:     pointer;
}
.vg-card-btn--cart:hover {
  background: var(--vg-black);
  color:      #fff;
}

/* ================================================
   Navigation sidebar légal / aide
   ================================================ */
.vg-legal-nav {
  background:    #fafafa;
  border:        1px solid #ececec;
  border-radius: 12px;
  padding:       16px;
  position:      sticky;
  top:           100px;
}
.vg-legal-nav-link {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 12px;
  border-radius:   8px;
  font-size:       14px;
  font-weight:     500;
  color:           #181a1f;
  text-decoration: none;
  transition:      background 0.2s, color 0.2s;
}
.vg-legal-nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color:      #0e0e0e;
}
.vg-legal-nav-link.is-active {
  background: var(--vg-accent);
  color:      #fff;
}
.vg-legal-nav-icon {
  width:      18px;
  text-align: center;
  flex-shrink: 0;
  font-size:  13px;
}

/* ================================================
   Shop — barre filtre + chips + panneau
   ================================================ */
.vg-shop-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         16px 0 20px;
  border-bottom:   1px solid #e8e8e8;
  margin-bottom:   20px;
  flex-wrap:       wrap;
  position:        relative;
  z-index:         20;
}
#vg-shop-filters {
  position: relative;
  z-index:  15;
}
.shop-page-wrapper {
  position: relative;
  z-index:  1;
  margin-top: 32px;
}
.vg-shop-count {
  font-size:  14px;
  color:      #666;
  min-width:  160px;
}
.vg-shop-count strong {
  color: #111;
}
.vg-filter-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  padding:     10px 24px;
  border:      1.5px solid #222;
  border-radius: 999px;
  background:  transparent;
  font-size:   14px;
  font-weight: 600;
  color:       #222;
  cursor:      pointer;
  transition:  background .2s, color .2s;
  white-space: nowrap;
}
.vg-filter-toggle:hover,
.vg-filter-toggle.is-open {
  background: #222;
  color:      #fff;
}
/* vg-sort-select: ciblage du <select> original (caché par Nice Select) + du div rendu */
.vg-sort-select {
  display: none; /* Nice Select le cache — on le laisse */
}
.vg-sort-wrap .nice-select {
  border:        1.5px solid #e0e0e0;
  border-radius: 10px;
  height:        42px;
  line-height:   40px;
  font-size:     14px;
  padding:       0 38px 0 14px;
  background:    #fff;
  color:         #222;
  min-width:     160px;
}
.vg-sort-wrap .nice-select:hover {
  border-color: var(--vg-accent);
}
.vg-sort-wrap .nice-select.open {
  border-color: var(--vg-accent);
  box-shadow:   0 0 0 3px rgba(94,57,22,.1);
}
.vg-sort-wrap {
  position: relative;
  z-index:  25;
}

/* Active filter chips */
.vg-filter-chips {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px;
  padding:     14px 0 8px;
  align-items: center;
}
.vg-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  background:      #1a1a1a;
  color:           #fff;
  border-radius:   999px;
  padding:         6px 14px;
  font-size:       13px;
  font-weight:     500;
  text-decoration: none;
  transition:      background .2s;
}
.vg-chip:hover {
  background: var(--vg-accent);
  color:      #fff;
}
.vg-chip-clear {
  font-size:       13px;
  color:           #888;
  text-decoration: none;
  margin-left:     6px;
  font-weight:     500;
}
.vg-chip-clear:hover {
  color: var(--vg-accent);
}

/* Filter panel */
.vg-filter-panel {
  background:    #f7f5f2;
  border-radius: 16px;
  padding:       28px 28px 22px;
  margin-bottom: 32px;
}
.vg-filter-panel .form-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          #555;
  margin-bottom:  7px;
  display:        block;
}
.vg-filter-panel .form-control {
  border:        1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size:     14px;
  padding:       10px 14px;
  background:    #fff;
}
.vg-filter-panel .form-control:focus {
  border-color: var(--vg-accent);
  box-shadow:   0 0 0 3px rgba(94,57,22,.1);
}
/* Nice Select overrides inside filter panel */
.vg-filter-panel .nice-select {
  width:         100%;
  float:         none;
  height:        46px;
  line-height:   44px;
  font-size:     14px;
  padding:       0 40px 0 14px;
  border:        1.5px solid #e0e0e0;
  border-radius: 10px;
  background:    #fff;
  color:         #222;
}
.vg-filter-panel .nice-select.open,
.vg-filter-panel .nice-select:focus {
  border-color: var(--vg-accent);
  box-shadow:   0 0 0 3px rgba(94,57,22,.1);
}
.vg-filter-panel .nice-select .list {
  width:         100%;
  border-radius: 10px;
  z-index:       200;
}
/* Nice Select z-index fix global (default=9, needs to be above vg-card z-index:2 + transforms) */
.nice-select .list {
  z-index: 9999;
}
.nice-select.open {
  z-index: 9998;
}
.vg-filter-apply {
  background:    var(--vg-accent);
  color:         #fff;
  border:        none;
  border-radius: 10px;
  padding:       10px 24px;
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .2s;
}
.vg-filter-apply:hover {
  background: var(--vg-accent-light);
}
.vg-filter-reset {
  display:         inline-block;
  border:          1.5px solid #ccc;
  border-radius:   10px;
  padding:         9px 22px;
  font-size:       14px;
  font-weight:     500;
  color:           #555;
  text-decoration: none;
  transition:      border-color .2s, color .2s;
}
.vg-filter-reset:hover {
  border-color: var(--vg-accent);
  color:        var(--vg-accent);
}

@media (max-width: 575px) {
  .vg-shop-topbar { gap: 10px; }
  .vg-filter-toggle { padding: 9px 18px; font-size: 13px; }
  .vg-filter-panel { padding: 20px 16px 16px; }
}

/* ================================================
   Cart Page
   ================================================ */
.vg-cart-card {
  background:    #fff;
  border-radius: 16px;
  border:        1px solid #eee;
}
.vg-cart-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px;
  border-bottom:   1px solid #f0f0f0;
}
.vg-cart-card-title {
  font-size:   18px;
  font-weight: 700;
  margin:      0;
}
.vg-cart-clear-btn {
  background:   none;
  border:       1px solid #e0e0e0;
  border-radius: 8px;
  padding:      6px 14px;
  font-size:    13px;
  color:        #666;
  cursor:       pointer;
  transition:   border-color .2s, color .2s;
}
.vg-cart-clear-btn:hover { border-color: #e53935; color: #e53935; }
.vg-cart-ship-bar { padding: 16px 24px 0; }
.vg-cart-ship-bar-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       13px;
  color:           #666;
  margin-bottom:   8px;
}
.vg-cart-ship-progress { height: 5px; background: #eee; border-radius: 3px; }
.vg-cart-ship-fill {
  height:     100%;
  background: var(--vg-accent);
  border-radius: 3px;
  transition: width .4s ease;
}
.vg-cart-items-wrap { padding: 0 24px; }
.vg-cart-item {
  display:       flex;
  gap:           16px;
  padding:       20px 0;
  border-bottom: 1px solid #f5f5f5;
}
.vg-cart-item:last-child { border-bottom: none; }
.vg-cart-item-img {
  width:       88px;
  height:      88px;
  object-fit:  cover;
  border-radius: 12px;
  flex-shrink: 0;
}
.vg-cart-item-info {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  min-width:       0;
}
.vg-cart-item-top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             8px;
}
.vg-cart-item-name {
  font-size:     15px;
  font-weight:   600;
  margin:        0 0 4px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.vg-cart-item-name a { color: #111; text-decoration: none; }
.vg-cart-item-name a:hover { color: var(--vg-accent); }
.vg-cart-item-variant { font-size: 12px; color: #999; margin: 0; }
.vg-cart-item-del {
  background: none;
  border:     none;
  color:      #ccc;
  font-size:  16px;
  cursor:     pointer;
  padding:    2px 6px;
  flex-shrink: 0;
  transition: color .2s;
}
.vg-cart-item-del:hover { color: #e53935; }
.vg-cart-item-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      10px;
}
.vg-cart-item-price { font-weight: 700; font-size: 15px; color: #111; }

/* Qty control */
.vg-qty {
  display:     flex;
  align-items: center;
  border:      1.5px solid #e0e0e0;
  border-radius: 10px;
  overflow:    hidden;
  height:      38px;
}
.vg-qty-btn {
  background: none;
  border:     none;
  padding:    0 13px;
  font-size:  18px;
  line-height: 1;
  cursor:     pointer;
  color:      #333;
  height:     100%;
  transition: background .15s;
}
.vg-qty-btn:hover { background: #f5f5f5; }
.vg-qty-input {
  width:        42px;
  text-align:   center;
  border:       none;
  border-left:  1.5px solid #e0e0e0;
  border-right: 1.5px solid #e0e0e0;
  padding:      4px;
  font-size:    14px;
  font-weight:  700;
  height:       100%;
  outline:      none;
}

/* Cart empty */
.vg-cart-empty-state { text-align: center; padding: 60px 24px; }
.vg-cart-empty-state i { font-size: 48px; color: #ddd; display: block; margin-bottom: 16px; }
.vg-cart-empty-state p { color: #888; margin-bottom: 20px; }
.vg-cart-empty-btn {
  display:         inline-block;
  background:      var(--vg-accent);
  color:           #fff;
  border-radius:   10px;
  padding:         12px 28px;
  text-decoration: none;
  font-weight:     600;
}
.vg-cart-empty-btn:hover { background: var(--vg-accent-light); color: #fff; }
.vg-cart-card-footer { padding: 16px 24px; border-top: 1px solid #f0f0f0; }
.vg-cart-continue { font-size: 14px; color: #666; text-decoration: none; }
.vg-cart-continue:hover { color: var(--vg-accent); }

/* Promo card */
.vg-cart-promo-card {
  background:    #fff;
  border-radius: 16px;
  border:        1px solid #eee;
  padding:       20px;
  margin-bottom: 16px;
}
.vg-cart-promo-card h5 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.vg-cart-promo-row { display: flex; gap: 8px; }
.vg-cart-promo-input {
  flex:          1;
  border:        1.5px solid #e0e0e0;
  border-radius: 10px;
  padding:       10px 14px;
  font-size:     14px;
  outline:       none;
}
.vg-cart-promo-input:focus { border-color: var(--vg-accent); }
.vg-cart-promo-btn {
  background:    var(--vg-accent);
  color:         #fff;
  border:        none;
  border-radius: 10px;
  padding:       10px 18px;
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background .2s;
}
.vg-cart-promo-btn:hover { background: var(--vg-accent-light); }
.vg-cart-promo-fb { font-size: 12px; color: #888; margin: 8px 0 0; }
.vg-cart-promo-remove {
  background:      none;
  border:          none;
  color:           #999;
  font-size:       12px;
  cursor:          pointer;
  padding:         0;
  margin-top:      6px;
  text-decoration: underline;
}

/* Summary card */
.vg-cart-summary-card {
  background:    #fff;
  border-radius: 16px;
  border:        1px solid #eee;
  padding:       24px;
  position:      sticky;
  top:           100px;
}
.vg-cart-summary-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.vg-cart-summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       14px;
  color:           #555;
  margin-bottom:   12px;
}
.vg-cart-summary-divider { border-top: 1px solid #eee; margin: 16px 0; }
.vg-cart-summary-total {
  display:         flex;
  justify-content: space-between;
  font-size:       18px;
  font-weight:     700;
  color:           #111;
  margin-bottom:   20px;
}
.vg-cart-checkout-btn {
  display:         block;
  background:      var(--vg-accent);
  color:           #fff;
  text-align:      center;
  padding:         14px;
  border-radius:   12px;
  text-decoration: none;
  font-weight:     700;
  font-size:       15px;
  transition:      background .2s;
}
.vg-cart-checkout-btn:hover { background: var(--vg-accent-light); color: #fff; }

@media (max-width: 767px) {
  .vg-cart-item-img { width: 70px; height: 70px; }
  .vg-cart-card-header, .vg-cart-items-wrap { padding-left: 16px; padding-right: 16px; }
}