/* =========================================
= WOOCOMMERCE — panier popup (.nl-cart--*)
========================================= */
.nl-cart--overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9997;
}
.nl-cart--panel {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(28rem, calc(100vw - 2rem));
  height: calc(100dvh - 2rem);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  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--title,
.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: 1rem;
}
.nl-cart--title {
  margin: 0; 
  font-size: var(--text-lg);
  font-weight: 500;
  font-family: var(--font-display);
  font-style: italic;
}

.nl-cart--close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  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: 1rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nl-cart--items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.nl-cart--item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: center;
  transition: opacity .15s ease;
}
.nl-cart--item.is-pending { opacity: 0.5; pointer-events: none; }

.nl-cart--item-thumb {
  width: 3.5rem;
  height: 4.375rem;
  aspect-ratio: 0.8 / 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: grid; gap: 0.25rem;}
.nl-cart--item-title {
  display: block;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  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;
  gap: 0.625rem;
  font-size: var(--text-xxs);
  color: var(--primary-60);
}
.nl-cart--item-remove {
  border: 0;
  background: transparent;
  padding: 0;
  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;
}
.nl-cart--empty[hidden] { display: none !important; }

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

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

/* Panier vide : masque coupon + footer + séparateur entre body et footer */
.nl-cart--panel.is-empty .nl-cart--coupon-wrap,
.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 quand la réduction est nulle. */
.nl-cart--row[hidden] { display: none !important; }

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

.nl-cart--secure {
  margin: 0;
  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)); }
}

/* Barre progression livraison gratuite */
.nouli-freeship {
  display: grid;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}
.nouli-freeship-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--text-xs);
  color: var(--primary);
}
.nouli-freeship-amount { font-family: var(--SR); }
.nouli-freeship-bar {
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.nouli-freeship-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: var(--radius-xs);
  transition: width 0.3s ease;
}

/* Popup panier — code promo / carte cadeau */
.nl-cart--coupon-wrap {
  border: 0.0625rem solid var(--primary-40);
  border-radius: var(--radius-xs);
  overflow: hidden;
  flex: 0 0 auto;
}
.nl-cart--coupon-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--SR);
  font-size: var(--text-xs);
  color: var(--primary);
  user-select: none;
}
.nl-cart--coupon-summary::-webkit-details-marker { display: none; }
.nl-cart--coupon-summary::marker { content: ''; }
.nl-cart--coupon-summary-label { flex: 1; }
.nl-cart--coupon {
  padding: 1rem;
  border-top: 0.0625rem solid var(--muted);
  display: grid;
  gap: 0.625rem;
}
.nl-cart--coupon-row {
  display: grid;
  gap: 0.625rem;
}
.nl-cart--coupon-row input {
  flex: 1;
  padding: 0.625rem 0.625rem;
  border: 0.0625rem solid var(--primary-40);
  border-radius: var(--radius-xs);
  background-color: rgba(0,0,0,0);
  font-family: var(--SR);
  font-size: var(--text-xs);
  color: var(--primary);
}
.nl-cart--coupon-row input:focus {
  outline: none;
  border-color: var(--primary);
}
.nl-cart--coupon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* animé vers 0.375rem au hover (slide-in de l'icône) */
  padding: 0.875rem 0.625rem;
  background: var(--primary);
  color: var(--secondary);
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: var(--SM);
  font-size: var(--text-xs);
  text-transform: uppercase;
  transition: opacity .15s ease;
}
.nl-cart--coupon-btn:hover {   background: transparent; color: var(--primary); border: 0.0625rem solid var(--primary);}
.nl-cart--coupon-btn:disabled { cursor: not-allowed; }

/* Icône coupon : masquée par défaut, slide-in au hover (même pattern que
   .nl-cart--checkout-icon pour cohérence visuelle). */
.nl-cart--coupon-btn-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--coupon-btn:hover .nl-cart--coupon-btn-icon,
.nl-cart--coupon-btn:focus-visible .nl-cart--coupon-btn-icon {
  width: 12px;
  max-width: 12px;
  opacity: 1;
  transform: translateX(0);
  margin-left: 0.375rem;
}
.nl-cart--coupon-hint {
  font-size: var(--text-xxs);
  color: var(--primary-60);
}

.nl-cart--notice {
  margin-top: 0;
  padding: 0;
  font-size: var(--text-xs);
}
.nl-cart--notice[data-notice-type="success"] { color: var(--success); }
.nl-cart--notice[data-notice-type="error"]   { color: var(--danger); }
.nl-cart--notice[data-notice-type="info"]    { color: var(--primary); }

/* Liste coupons/cartes appliqués */
.nl-cart--discounts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}
.nl-cart--discount {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.625rem;
  background: var(--accent);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
}
.nl-cart--discount-label {
  color: var(--primary);
  font-family: var(--SM);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nl-cart--discount-amount {
  color: var(--success);
  font-family: var(--SM);
}
.nl-cart--discount-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--primary-60);
  transition: opacity .2s ease, color .2s ease;
}
.nl-cart--discount-remove svg { display: block; }
.nl-cart--discount-remove:hover { color: var(--danger); }

.nl-cart--discount-row { color: var(--success); }