/* =========================================
= COMPOSANT — PANIER (modale du header, .nl-cart--*) — header/header-cart/
= Sous-composants : header-cart-coupon/ (code promo) · header-cart-freeship/
= (barre livraison gratuite), chacun avec son CSS.
========================================= */
.nl-cart--overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9997;
}
.nl-cart--panel {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: min(28rem, calc(100vw - 2rem));
  height: calc(100dvh - 2rem);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.875);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9998;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  font-family: var(--SR);
}

.nl-cart--sep {
  margin: 0 1rem;
  border: 0;
  height: 1px;
  background: var(--muted);
}
.nl-cart--sep--inline { margin: 0; }

/* Le panier utilise SR par défaut et SM pour les éléments forts */
.nl-cart--panel strong,
.nl-cart--panel b,
.nl-cart--total {
  font-family: var(--SM);
  font-weight: 500;
}
.nl-cart--panel .nl-cart--item-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-sm);
}

/* Header */
.nl-cart--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem;
}
.nl-cart--title {
  font-size: var(--text-lg);
  font-weight: 500;
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1;
}

.nl-cart--close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: opacity .2s ease, color .2s ease;
}
.nl-cart--close svg { display: block; }
.nl-cart--close:hover { opacity: 0.65; }
.nl-cart--close:focus-visible {
  outline: 0.125rem solid var(--primary-40);
  outline-offset: 0.1875rem;
}

/* Body */
.nl-cart--body {
  padding: 1.25rem 1rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.nl-cart--items {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
.nl-cart--item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: stretch;
}
.nl-cart--item.is-pending { pointer-events: none; }

.nl-cart--item-thumb {
  width: 3.5rem;
  aspect-ratio: 0.65 / 1;
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: block;
}
.nl-cart--item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nl-cart--item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* head en haut / meta en bas, sur la hauteur de la vignette */
}
.nl-cart--item-head {
  display: grid;
  gap: 0.25rem; /* titre-row ↔ catégorie */
}
.nl-cart--item-category {
  font-size: var(--text-xxs);
  color: var(--primary-60);
}
.nl-cart--item-title {
  display: block;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.nl-cart--item-title-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.nl-cart--item-title-row .nl-cart--item-title { min-width: 0; }
.nl-cart--item-subtitle {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--primary-60);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  white-space: nowrap;
}
.nl-cart--item-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.625rem;
  font-size: var(--text-xxs);
  color: var(--primary-60);
}
.nl-cart--item-remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-xxs);
  color: var(--primary-60);
  transition: color .15s ease;
  text-transform: uppercase;
}
.nl-cart--item-remove:hover { color: var(--danger); }

/* Empty state */
.nl-cart--empty {
  text-align: center;
  color: var(--primary-60);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  /* Apparition douce quand l'état vide s'affiche (dernier item retiré) */
  animation: nl-cart-empty-in 0.4s ease-out both;
}
.nl-cart--empty[hidden] { display: none !important; }
@keyframes nl-cart-empty-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-cart--empty { animation: none; }
}

.nl-cart--empty p {
  font-style: italic;
  font-size: var(--text-lg);
  font-family: var(--font-display);
}

/* Footer */
.nl-cart--footer {
  padding: 1.25rem 1rem;
  display: grid;
  gap: 0.625rem;
}

/* Panier vide : masque tout le body sauf le message (articles, code promo…),
   le footer et le séparateur entre body et footer */
.nl-cart--panel.is-empty .nl-cart--body > :not(.nl-cart--empty),
.nl-cart--panel.is-empty .nl-cart--footer,
.nl-cart--panel.is-empty .nl-cart--body + .nl-cart--sep { display: none !important; }

/* Panier vide : centre verticalement le message */
.nl-cart--panel.is-empty .nl-cart--body {
  justify-content: center;
  align-items: center;
}
.nl-cart--panel.is-empty .nl-cart--empty { width: 100%; }

.nl-cart--row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-xs);
}
/* L'attribut [hidden] est écrasé par display:flex de .nl-cart--row : on force
   display:none (ligne Réduction sans code, ligne Livraison sans expédition). */
.nl-cart--row[hidden] { display: none !important; }
.nl-cart--discount-row { color: var(--success); }

.nl-cart--actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

.nl-cart--secure {
  text-align: center;
  font-size: var(--text-xxs);
  color: var(--primary-60);
}

/* Bouton Commander : même style que le bouton d'ouverture du panier (header)
   + icône panier révélée au hover */
.nl-cart--checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-xs);
  background: var(--primary);
  color: var(--secondary);
  font-family: var(--SM);
  font-size: var(--text-xs);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    gap .3s ease;
}
.nl-cart--checkout:hover,
.nl-cart--checkout:focus-visible {
  background: transparent;
  color: var(--primary);
  transform: translateY(-0.0625rem);
  gap: 0.625rem;
}
.nl-cart--checkout:focus-visible {
  outline: 0.125rem solid var(--primary-40);
  outline-offset: 0.1875rem;
}

.nl-cart--checkout-icon {
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-0.25rem);
  transition: width .3s ease, max-width .3s ease, opacity .3s ease, transform .3s ease, color .2s ease;
}
.nl-cart--checkout:hover .nl-cart--checkout-icon,
.nl-cart--checkout:focus-visible .nl-cart--checkout-icon {
  width: 12px;
  max-width: 12px;
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 48rem) {
  .nl-cart--panel { width: min(24rem, calc(100vw - 2rem)); }
}