/* ================================================
   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;
  --primary-dark-color: #0e0e0e;
  --secondary-color:    #7a4d20;
}

/* ================================================
   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 sticky
   ================================================ */
header.header-area {
  position: sticky;
  top:      0;
  z-index:  999;
}

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

/* ================================================
   Barre style LV — desktop (>= lg)
   ================================================ */
.vg-lv-bar {
  display:     flex;
  align-items: center;
  width:       100%;
  height:      80px;
}

.vg-lv-left,
.vg-lv-right {
  flex:        1;
  display:     flex;
  align-items: center;
}
.vg-lv-right  { justify-content: flex-end; }
.vg-lv-center { flex-shrink: 0; padding: 0 20px; text-align: center; }

/* Marque */
.vg-lv-brand-text {
  font-size:       21px;
  font-weight:     400;
  letter-spacing:  0.28em;
  color:           #fff;
  text-decoration: none;
  text-transform:  uppercase;
  white-space:     nowrap;
  transition:      opacity .2s;
  font-family:     Georgia, 'Times New Roman', serif;
}
.vg-lv-brand-text:hover { color: rgba(255,255,255,.75); }

/* Séparateur vertical */
.vg-lv-sep {
  display:     block;
  width:       1px;
  height:      14px;
  background:  rgba(255,255,255,.2);
  margin:      0 4px;
  flex-shrink: 0;
}

/* Bouton hamburger + libellé "Menu" */
.vg-lv-menu-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  background:     none;
  border:         none;
  color:          rgba(255,255,255,.88);
  padding:        0 16px;
  height:         80px;
  cursor:         pointer;
  font-size:      12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight:    400;
  transition:     color .2s;
}
.vg-lv-menu-btn:hover { color: #fff; }

/* Lignes hamburger */
.vg-lv-lines {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  width:          20px;
  flex-shrink:    0;
}
.vg-lv-lines span {
  display:      block;
  width:        100%;
  height:       1.5px;
  background:   currentColor;
  border-radius: 1px;
  transition:   background .2s;
}

/* Lien texte (Accueil, Contactez-nous) */
.vg-lv-nav-link {
  display:        inline-flex;
  align-items:    center;
  color:          rgba(255,255,255,.78);
  text-decoration: none;
  font-size:      12px;
  letter-spacing: 0.06em;
  padding:        0 14px;
  height:         80px;
  transition:     color .2s;
  white-space:    nowrap;
  font-weight:    400;
}
.vg-lv-nav-link:hover,
.vg-lv-nav-link.is-active { color: #fff; }

/* Bouton recherche */
.vg-lv-search-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     none;
  border:         none;
  color:          rgba(255,255,255,.58);
  padding:        0 14px;
  height:         80px;
  cursor:         pointer;
  font-size:      12px;
  letter-spacing: 0.04em;
  font-weight:    400;
  transition:     color .2s;
}
.vg-lv-search-btn:hover { color: rgba(255,255,255,.9); }
.vg-lv-search-btn i     { font-size: 13px; }

/* Boutons icône (cœur, compte, panier) */
.vg-lv-icon-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  color:          rgba(255,255,255,.88);
  padding:        0 12px;
  height:         80px;
  font-size:      17px;
  text-decoration: none;
  cursor:         pointer;
  position:       relative;
  background:     none;
  border:         none;
  transition:     color .2s;
}
.vg-lv-icon-btn:hover { color: #fff; }

/* Badge compteur wishlist */
.vg-lv-badge {
  position:       absolute;
  top:            18px;
  right:          4px;
  width:          15px;
  height:         15px;
  background:     #fff;
  color:          #111;
  border-radius:  50%;
  font-size:      9px;
  font-weight:    700;
  display:        flex;
  align-items:    center;
  justify-content: center;
  line-height:    1;
}

/* Compteur panier desktop */
.vg-lv-cart .icon  { position: relative; }
.vg-lv-cart .pro-count {
  position:       absolute;
  top:            -6px;
  right:          -8px;
  width:          17px;
  height:         17px;
  background:     #fff;
  color:          #111;
  border-radius:  50%;
  font-size:      10px;
  font-weight:    700;
  display:        flex;
  align-items:    center;
  justify-content: center;
  line-height:    1;
}

/* ── Tiroir navigation desktop ─────────────── */
.vg-dnav {
  display:  none;
  position: fixed;
  inset:    0;
  z-index:  9100;
}
.vg-dnav.is-open { display: block; }

.vg-dnav-panel {
  position:    absolute;
  top:         0; left: 0; bottom: 0;
  width:       320px;
  background:  #111;
  color:       #fff;
  overflow-y:  auto;
  transform:   translateX(-100%);
  transition:  transform .32s cubic-bezier(.25,.46,.45,.94);
  display:     flex;
  flex-direction: column;
  padding:     0 0 40px;
  z-index:     2;
}
.vg-dnav.is-open .vg-dnav-panel { transform: translateX(0); }

.vg-dnav-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.55);
  opacity:    0;
  transition: opacity .32s;
  z-index:    1;
}
.vg-dnav.is-open .vg-dnav-backdrop { opacity: 1; }

.vg-dnav-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         28px 28px 24px;
  border-bottom:   1px solid rgba(255,255,255,.1);
  flex-shrink:     0;
}
.vg-dnav-brand {
  font-family:     Georgia, 'Times New Roman', serif;
  font-size:       15px;
  font-weight:     400;
  letter-spacing:  0.22em;
  color:           #fff;
  text-decoration: none;
  text-transform:  uppercase;
}
.vg-dnav-close {
  background: none;
  border:     none;
  color:      rgba(255,255,255,.55);
  font-size:  18px;
  cursor:     pointer;
  padding:    4px;
  line-height: 1;
  transition: color .15s;
}
.vg-dnav-close:hover { color: #fff; }

.vg-dnav-menu { padding: 16px 0; }
.vg-dnav-menu ul { list-style: none; margin: 0; padding: 0; }
.vg-dnav-menu li a {
  display:        block;
  padding:        13px 28px;
  color:          rgba(255,255,255,.78);
  text-decoration: none;
  font-size:      14px;
  letter-spacing: 0.06em;
  font-weight:    400;
  transition:     color .15s, background .15s;
}
.vg-dnav-menu li a:hover,
.vg-dnav-menu li.is-active a {
  color:      #fff;
  background: rgba(255,255,255,.06);
}

.vg-dnav-cats {
  padding:    8px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 8px;
}
.vg-dnav-section-label {
  padding:        12px 28px 6px;
  font-size:      10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.35);
  margin:         0;
}
.vg-dnav-cats ul { list-style: none; margin: 0; padding: 0; }
.vg-dnav-cats li a {
  display:        block;
  padding:        10px 28px;
  color:          rgba(255,255,255,.65);
  text-decoration: none;
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0.04em;
  transition:     color .15s, background .15s;
}
.vg-dnav-cats li a:hover { color: #fff; background: rgba(255,255,255,.05); }

/* ── Overlay recherche desktop ────────────────── */
.vg-lv-search-overlay {
  position:       absolute;
  top:            100%;
  left:           0;
  right:          0;
  background:     var(--vg-black);
  border-top:     1px solid rgba(255,255,255,.12);
  padding:        28px 0;
  z-index:        600;
  opacity:        0;
  pointer-events: none;
  transform:      translateY(-6px);
  transition:     opacity .2s ease, transform .2s ease;
}
.vg-lv-search-overlay.is-open {
  opacity:        1;
  pointer-events: all;
  transform:      translateY(0);
}
.vg-lv-search-form {
  display:        flex;
  align-items:    center;
  gap:            14px;
  max-width:      640px;
  margin:         0 auto;
  border-bottom:  1px solid rgba(255,255,255,.28);
  padding-bottom: 10px;
  color:          rgba(255,255,255,.55);
}
.vg-lv-search-form > i { font-size: 16px; flex-shrink: 0; }
.vg-lv-search-input {
  flex:           1;
  background:     none;
  border:         none;
  color:          #fff;
  font-size:      18px;
  font-weight:    300;
  letter-spacing: 0.03em;
  outline:        none;
}
.vg-lv-search-input::placeholder { color: rgba(255,255,255,.32); }
.vg-lv-search-close-btn {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,.5);
  font-size:   16px;
  cursor:      pointer;
  padding:     4px;
  line-height: 1;
  transition:  color .15s;
  flex-shrink: 0;
}
.vg-lv-search-close-btn:hover { 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;
}

/* ── Barre mobile : hauteur réduite + marque plus petite ── */
@media (max-width: 991px) {
  .vg-lv-bar                         { height: 64px; }
  .vg-lv-menu-btn, .vg-lv-icon-btn   { height: 64px; }
  .vg-lv-brand-text                  { font-size: 15px; letter-spacing: 0.2em; }
}

/* Override thème — burger intégré dans la barre mobile */
.vg-lv-menu-btn.navbar-toggler {
  background: none;
  border:     none;
  outline:    none;
  box-shadow: none;
  padding:    0 16px;
}
.vg-lv-menu-btn.navbar-toggler .vg-lv-lines span {
  background:    currentColor !important;
  width:         100% !important;
  height:        1.5px !important;
  display:       block !important;
  border-radius: 1px !important;
}

/* 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: 14px;
  overflow:      hidden;
  box-shadow:    0 2px 16px rgba(0,0,0,.07);
  transition:    box-shadow .25s ease, transform .25s ease;
  margin-bottom: 20px;
}
.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: 11px 13px 13px;
}
.vg-card-title {
  font-size:   14px;
  font-weight: 700;
  margin:      0 0 3px;
  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:       4px 11px;
  font-size:     12px;
  font-weight:   700;
  color:         #111;
  white-space:   nowrap;
}
.vg-card-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  background:      var(--vg-black);
  color:           #fff;
  border-radius:   999px;
  padding:         6px 14px;
  font-size:       12px;
  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:    6px 10px;
  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; }
}