/* ================================================================
   NGP Ajax Filter v1.1.0
   ================================================================ */

:root {
  --ngp-red:     #C0162D;
  --ngp-border:  #E5E7EB;
  --ngp-muted:   #656C7B;
  --ngp-black:   #111111;
  --ngp-white:   #FFFFFF;
  --ngp-success: #1FAE5A;
  --ngp-radius:  6px;
  --ngp-card-radius: 16px;
}

/* ================================================================
   BARRE DE FILTRE
   ================================================================ */
.ngp-filter-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: var(--ngp-white) !important;
  padding: 20px !important;
  border: 1px solid var(--ngp-border) !important;
  border-radius: var(--ngp-radius) !important;
  font-family: 'Montserrat', sans-serif !important;
  box-sizing: border-box !important;
}

/* ── Séparateur ────────────────────────────────────────────── */
.ngp-filter-bar .ngp-sep {
  width: 1px !important;
  height: 24px !important;
  background: var(--ngp-border) !important;
  flex-shrink: 0 !important;
}

/* ── Recherche ─────────────────────────────────────────────── */
.ngp-filter-bar .ngp-search-wrap {
  position: relative !important;
  flex: 1 1 200px !important;
  min-width: 160px !important;
}

.ngp-filter-bar .ngp-search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.ngp-filter-bar #ngp-search-input {
  width: 100% !important;
  padding: 9px 56px 9px 34px !important;
  border: 1px solid var(--ngp-border) !important;
  border-radius: var(--ngp-radius) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  color: var(--ngp-muted) !important;
  outline: none !important;
  background: var(--ngp-white) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color .2s !important;
}
.ngp-filter-bar #ngp-search-input:focus { border-color: #aab0bb !important; }
.ngp-filter-bar #ngp-search-input::placeholder { color: var(--ngp-muted) !important; }

/* Croix effacer recherche */
.ngp-filter-bar .ngp-search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  color: var(--ngp-muted) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  transition: background .15s, color .15s !important;
}
.ngp-filter-bar .ngp-search-clear:hover {
  background: #f0f1f3 !important;
  color: var(--ngp-black) !important;
}

/* Suggestions autocomplete */
.ngp-filter-bar .ngp-suggestions {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--ngp-white) !important;
  border: 1px solid var(--ngp-border) !important;
  border-radius: var(--ngp-radius) !important;
  z-index: 9999 !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}
.ngp-filter-bar .ngp-suggestions.open { display: block !important; }

.ngp-filter-bar .ngp-suggestion-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--ngp-black) !important;
  cursor: pointer !important;
  gap: 8px !important;
  transition: background .15s !important;
}
.ngp-filter-bar .ngp-suggestion-item:hover,
.ngp-filter-bar .ngp-suggestion-item.selected { background: #f4f5f7 !important; }

.ngp-filter-bar .ngp-suggestion-parent {
  font-size: 11px !important;
  color: var(--ngp-muted) !important;
  flex-shrink: 0 !important;
}

/* ── Selects ───────────────────────────────────────────────── */
.ngp-filter-bar .ngp-select-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.ngp-filter-bar .ngp-select-group label {
  font-size: 13px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--ngp-muted) !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ngp-filter-bar .ngp-select {
  border: 1px solid var(--ngp-border) !important;
  border-radius: var(--ngp-radius) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  color: var(--ngp-muted) !important;
  padding: 7px 28px 7px 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--ngp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656C7B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}
.ngp-filter-bar .ngp-select:focus { border-color: #aab0bb !important; }

/* ── Boutons catégories ────────────────────────────────────── */
.ngp-filter-bar .ngp-cats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.ngp-filter-bar .ngp-cat-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: var(--ngp-radius) !important;
  border: 1px solid var(--ngp-border) !important;
  background: var(--ngp-white) !important;
  color: var(--ngp-black) !important;
  cursor: pointer !important;
  transition: background .2s, color .2s, border-color .2s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.ngp-filter-bar .ngp-cat-btn:hover {
  border-color: var(--ngp-red) !important;
  color: var(--ngp-red) !important;
  background: var(--ngp-white) !important;
}
.ngp-filter-bar .ngp-cat-btn.active,
.ngp-filter-bar .ngp-cat-btn[aria-pressed="true"] {
  background: var(--ngp-red) !important;
  color: var(--ngp-white) !important;
  border-color: var(--ngp-red) !important;
}

/* ── Bouton réinitialiser ──────────────────────────────────── */
.ngp-filter-bar .ngp-reset-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ngp-muted) !important;
  background: none !important;
  border: none !important;
  padding: 7px 4px !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  box-shadow: none !important;
  transition: color .2s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.ngp-filter-bar .ngp-reset-btn:hover { color: var(--ngp-red) !important; }

/* ── Tags catégories sélectionnées ─────────────────────────── */
.ngp-active-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}
.ngp-active-tags:empty { display: none !important; }

.ngp-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fef2f4 !important;
  border: 1px solid #f5c6cc !important;
  color: var(--ngp-red) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 30px !important;
}
.ngp-tag-remove {
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--ngp-red) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* ================================================================
   GRILLE & CARTES
   ================================================================ */
/* ================================================================
   LOADER
   ================================================================ */
.ngp-grid-wrapper { position: relative; font-family: 'Montserrat', sans-serif; }

.ngp-grid-wrapper.loading .ngp-grid {
  opacity: .35 !important;
  pointer-events: none !important;
  transition: opacity .2s !important;
}

/* Spinner centré au-dessus de la grille */
.ngp-loader {
  display: none;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ngp-grid-wrapper.loading .ngp-loader { display: flex; }

.ngp-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ngp-border);
  border-top-color: var(--ngp-red);
  border-radius: 50%;
  animation: ngp-spin .65s linear infinite;
}
.ngp-loader-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ngp-muted);
  letter-spacing: .04em;
}

@keyframes ngp-spin { to { transform: rotate(360deg); } }

.ngp-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.ngp-no-results {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 60px 20px !important;
  font-size: 15px !important;
  color: var(--ngp-muted) !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ── Carte ──────────────────────────────────────────────────── */
.ngp-card {
  background: var(--ngp-white) !important;
  border-radius: var(--ngp-card-radius) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 15px !important;
  gap: 10px !important;
}

/* L'image flex-grow pour occuper l'espace restant */
.ngp-card .ngp-card-img-container {
  min-height: 0 !important;
  position: relative !important;    /* Parent de référence pour badges + bouton */
  display: block !important;
  border-radius: var(--ngp-card-radius) !important;
  overflow: hidden !important;
}

/* Out of stock */
.ngp-card--outofstock .ngp-card-img-wrap img {
  filter: grayscale(60%) opacity(.75) !important;
}

/* Image wrap — lien cliquable qui remplit tout le container */
.ngp-card-img-wrap {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  background: #f6f7f8 !important;
  border-radius: var(--ngp-card-radius) !important;
  overflow: hidden !important;
}
.ngp-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--ngp-card-radius) !important;
  transition: transform .3s ease !important;
  will-change: transform !important;
  transform: scale(1) !important;
}
.ngp-card:hover .ngp-card-img-wrap img { transform: scale(1.04) !important; }
/* Empêche le zoom de rejouer pendant l'ajout au panier */
.ngp-card:has(.ajax_add_to_cart.loading) .ngp-card-img-wrap img,
.ngp-card:has(.ajax_add_to_cart.added) .ngp-card-img-wrap img { transform: scale(1) !important; transition: none !important; }

.ngp-card-no-img {
  width: 100% !important;
  height: 100% !important;
  background: var(--ngp-border) !important;
  border-radius: var(--ngp-card-radius) !important;
}

/* Badges — positionnés par rapport à ngp-card-img-container */
.ngp-badge-sale,
.ngp-badge-stock {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
}
.ngp-badge-sale  { background: var(--ngp-red) !important; color: var(--ngp-white) !important; }
.ngp-badge-stock { background: #6b7280 !important; color: var(--ngp-white) !important; right: auto !important; left: 12px !important; }

/* Badge condition (OCC / NEUF) — coin supérieur gauche de l'image */
.ngp-badge-cond {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 2 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  background: var(--ngp-red) !important;
  color: var(--ngp-white) !important;
}

/* Badge promo standalone (shortcode [ngp_sale_badge]) — même rouge, dans le flux */
.ngp-sale-badge {
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  background: var(--ngp-red) !important;
  color: var(--ngp-white) !important;
}

/* Variante grande pour la page produit : [ngp_sale_badge size="large"] */
.ngp-sale-badge--lg {
  font-size: 1rem !important;
  width: var(--container-widget-width, 23%) !important;
}

/* Bouton panier — coin inférieur droit du container image */
.ngp-cart-btn {
  position: absolute !important;
  bottom: -8px !important;
  right: 4px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform .2s !important;
}
.ngp-cart-btn:hover { transform: scale(1.1) !important; }
.ngp-cart-btn img {
  object-fit: contain !important;
  border-radius: 0 !important;
  transition: none !important;
}
.ngp-card:hover .ngp-cart-btn img { transform: none !important; }

/* Bouton Indisponible */
.ngp-cart-unavailable {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  background: #f3f4f6 !important;
  border: 1px solid var(--ngp-border) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  cursor: default !important;
  white-space: nowrap !important;
}

/* Body carte */
.ngp-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.ngp-card-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ngp-black) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: block !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}
.ngp-card-title:hover { color: var(--ngp-red) !important; }

.ngp-card-footer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
}

.ngp-card-price {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ngp-black) !important;
  line-height: 1 !important;
}
.ngp-card-price del {
  font-size: 14px !important;
  color: #9ca3af !important;
  margin-right: 6px !important;
}
.ngp-card-price ins {
  text-decoration: none !important;
  color: var(--ngp-red) !important;
}

/* ================================================================
   PAGINATION
   ================================================================ */
.ngp-pagination { margin-top: 36px; display: flex; justify-content: center; }

.ngp-pag { display: flex; align-items: center; gap: 6px; }

.ngp-pag-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 13px !important;
  border: 1px solid var(--ngp-border) !important;
  border-radius: var(--ngp-radius) !important;
  background: var(--ngp-white) !important;
  color: var(--ngp-black) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.ngp-pag-btn:hover { border-color: var(--ngp-red) !important; color: var(--ngp-red) !important; }
.ngp-pag-btn.active {
  background: var(--ngp-red) !important;
  border-color: var(--ngp-red) !important;
  color: var(--ngp-white) !important;
  cursor: default !important;
}

.ngp-pag-dots { font-size: 13px; color: var(--ngp-muted); padding: 0 4px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .ngp-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Caché sur desktop */
.ngp-filter-toggle   { display: none !important; }
.ngp-filter-dropdown { display: none !important; }

@media (max-width: 768px) {
  .ngp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ngp-card-title { -webkit-line-clamp: 3 !important; }

  /* Barre en 2 lignes */
  .ngp-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
    position: relative !important;
  }

  /* Ligne 1 : recherche pleine largeur */
  .ngp-filter-bar .ngp-search-wrap {
    flex: none !important;
    width: 100% !important;
  }

  /* Cache les éléments desktop */
  .ngp-filter-bar .ngp-sep,
  .ngp-filter-bar .ngp-select-group,
  .ngp-filter-bar .ngp-cats,
  .ngp-filter-bar .ngp-reset-btn {
    display: none !important;
  }

  /* Ligne 2 : bouton Filtres pleine largeur */
  .ngp-filter-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ngp-black) !important;
    background: var(--ngp-white) !important;
    border: 1px solid var(--ngp-border) !important;
    border-radius: var(--ngp-radius) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    transition: border-color .2s, color .2s !important;
  }
  .ngp-filter-toggle:hover,
  .ngp-filter-toggle.open {
    border-color: var(--ngp-red) !important;
    color: var(--ngp-red) !important;
  }

  /* Badge nombre de filtres actifs */
  .ngp-toggle-count {
    display: none !important;
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    background: var(--ngp-red) !important;
    color: var(--ngp-white) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .ngp-toggle-count.visible { display: flex !important; }

  /* Panneau déroulant */
  .ngp-filter-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--ngp-white) !important;
    border: 1px solid var(--ngp-border) !important;
    border-radius: var(--ngp-radius) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    z-index: 9998 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .ngp-filter-dropdown.open { display: flex !important; }

  /* Sections */
  .ngp-dd-section { display: flex !important; flex-direction: column !important; gap: 8px !important; }

  /* Variante "row" : 3 sélecteurs côte à côte (Ordre / Prix / Date) */
  .ngp-dd-section--row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: end !important;
  }
  .ngp-dd-section--row .ngp-dd-label { grid-column: 1 / -1 !important; }

  .ngp-dd-label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--ngp-muted) !important;
    display: block !important;
  }

  .ngp-filter-dropdown .ngp-select-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .ngp-filter-dropdown .ngp-select-group label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ngp-muted) !important;
    font-family: 'Montserrat', sans-serif !important;
  }
  .ngp-filter-dropdown .ngp-select { width: 100% !important; box-sizing: border-box !important; }

  .ngp-filter-dropdown .ngp-cats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .ngp-filter-dropdown .ngp-reset-btn { display: block !important; }

  .ngp-dd-sep {
    height: 1px !important;
    background: var(--ngp-border) !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .ngp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ================================================================
   WOOCOMMERCE NOTICE — restyling « Light Premium » (toast haut-droit)
   ================================================================ */

/* Wrapper : toast empilé en haut à droite de l'écran */
.woocommerce-notices-wrapper {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  z-index: 99999 !important;
  width: 360px !important;
  max-width: calc(100vw - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

/* Notice principale — carte flottante blanche */
.woocommerce-notices-wrapper .woocommerce-message {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  background: var(--ngp-white) !important;
  border: 1px solid rgba(17,17,17,.06) !important;
  border-radius: 16px !important;
  padding: 13px 14px 13px 13px !important;
  box-shadow: 0 18px 40px -12px rgba(17,17,17,.22), 0 4px 12px -4px rgba(17,17,17,.10) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ngp-black) !important;
  pointer-events: all !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
  animation: ngp-notice-in .42s cubic-bezier(.2,.9,.25,1.15) forwards !important;
}

/* Neutralise l'icône native WooCommerce posée en ::before/::after. */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message::after {
  content: none !important;
  display: none !important;
}

@keyframes ngp-notice-in {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

/* Vignette produit */
.woocommerce-notices-wrapper .ngp-notice-thumb {
  width: 52px !important;
  height: 52px !important;
  border-radius: 11px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.06) !important;
}

/* Corps texte */
.woocommerce-notices-wrapper .ngp-notice-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.woocommerce-notices-wrapper .ngp-notice-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: var(--ngp-success) !important;
  font-family: 'Montserrat', sans-serif !important;
}
/* Petite coche verte inline (remplace le badge sur vignette) */
.woocommerce-notices-wrapper .ngp-notice-label::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: var(--ngp-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 10px 10px !important;
  animation: ngp-check-pop .5s .16s cubic-bezier(.2,1.4,.4,1) both !important;
}
@keyframes ngp-check-pop {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1);  }
}

.woocommerce-notices-wrapper .ngp-notice-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--ngp-black) !important;
  font-family: 'Montserrat', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.woocommerce-notices-wrapper .ngp-notice-price {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ngp-muted) !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Bouton "Voir le panier" */
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  align-self: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ngp-white) !important;
  background: var(--ngp-red) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: transform .12s, box-shadow .15s !important;
  box-shadow: 0 4px 12px -3px rgba(192,22,45,.5) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  pointer-events: all !important;
}
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 16px -4px rgba(192,22,45,.6) !important;
  opacity: 1 !important;
}

/* Bouton fermer (✕) */
.woocommerce-notices-wrapper .ngp-notice-close {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  width: 22px !important;
  height: 22px !important;
  margin: -2px -4px 0 -2px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #b9bcc4 !important;
  cursor: pointer !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s, color .15s !important;
  pointer-events: all !important;
  line-height: 1 !important;
}
.woocommerce-notices-wrapper .ngp-notice-close:hover {
  background: #f1f1f3 !important;
  color: var(--ngp-black) !important;
}
.woocommerce-notices-wrapper .ngp-notice-close svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

/* Barre de décompte (auto-dismiss 10 s) */
.woocommerce-notices-wrapper .ngp-notice-progress {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  width: 100% !important;
  background: var(--ngp-red) !important;
  transform-origin: left !important;
  animation: ngp-notice-bar 10s linear .25s both !important;
}
@keyframes ngp-notice-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── ERREURS WooCommerce (ex. stock insuffisant) — même carte, accent rouge ── */
.woocommerce-notices-wrapper .woocommerce-error {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  list-style: none !important;
  background: var(--ngp-white) !important;
  border: 1px solid rgba(192,22,45,.14) !important;
  border-radius: 16px !important;
  padding: 15px 42px 15px 62px !important;
  box-shadow: 0 18px 40px -12px rgba(17,17,17,.22), 0 4px 12px -4px rgba(17,17,17,.10) !important;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--ngp-black) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  pointer-events: all !important;
  animation: ngp-notice-in .42s cubic-bezier(.2,.9,.25,1.15) forwards !important;
}
/* Neutralise l'icône native WC */
.woocommerce-notices-wrapper .woocommerce-error::after {
  content: none !important;
  display: none !important;
}
/* Icône d'alerte (carré arrondi teinté rouge) */
.woocommerce-notices-wrapper .woocommerce-error::before {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  background: rgba(192,22,45,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C0162D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / 20px 20px !important;
  animation: ngp-check-pop .5s .16s cubic-bezier(.2,1.4,.4,1) both !important;
}
/* Message(s) */
.woocommerce-notices-wrapper .woocommerce-error li {
  list-style: none !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--ngp-black) !important;
}
.woocommerce-notices-wrapper .woocommerce-error li:last-child { margin-bottom: 0 !important; }
/* Croix repositionnée (layout en bloc) */
.woocommerce-notices-wrapper .woocommerce-error .ngp-notice-close {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  align-self: auto !important;
  margin: 0 !important;
}

/* Respecte prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .woocommerce-notices-wrapper .woocommerce-message,
  .woocommerce-notices-wrapper .woocommerce-error,
  .woocommerce-notices-wrapper .woocommerce-error::before,
  .woocommerce-notices-wrapper .ngp-notice-label::before,
  .woocommerce-notices-wrapper .ngp-notice-progress {
    animation: none !important;
  }
}

/* Mobile : pleine largeur, padding réduit */
@media (max-width: 480px) {
  .woocommerce-notices-wrapper {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .woocommerce-notices-wrapper .woocommerce-message {
    gap: 11px !important;
    padding: 11px 12px !important;
  }
  .woocommerce-notices-wrapper .ngp-notice-thumb {
    width: 44px !important;
    height: 44px !important;
  }
  .woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
    font-size: 11px !important;
    padding: 8px 11px !important;
  }
}