/* ============================================================
   Cart Drawer
   ============================================================ */

/* ── Variables ── */
:root {
  --cd-width: min(500px, 92vw);
  --cd-radius: 0 0 0 16px;
  --cd-header-h: 64px;
  --cd-overlay-bg: rgba(0, 0, 0, 0.5);
  --cd-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --cd-accent: #e62ca1;
  --cd-accent-light: #fdf2f9;
  --cd-accent-hover: #c91f8a;
  --cd-danger: #ef4444;
  --cd-success: #16a34a;
  --cd-border: #e5e7eb;
  --cd-text: #111827;
  --cd-muted: #6b7280;
  --cd-bg: #ffffff;
  --cd-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ── Body lock when drawer open (version simple : overflow only)
   Le JS ne touche PLUS au body.position pour éviter tout effet de bord
   (containing block, stacking context selon plugins). ── */
html.cart-drawer-open,
body.cart-drawer-open {
  overflow: hidden !important;
  /* Empêche le bounce iOS sur le body */
  overscroll-behavior: none;
  /* Préserve la largeur si une scrollbar disparaît */
  -ms-scroll-chaining: none;
}

/* ── Root wrapper
   Le wrapper lui-même est l'élément full-screen positionné qui contient
   tout le drawer dans UN seul stacking context au-dessus de TOUT
   (header sticky, banner, mega-menu, mobile sticky bar, etc.).
   En fermé : invisible + non interactif. En ouvert : visible + interactif.
   Toutes les valeurs forcées en !important pour battre tout override. ── */
#cart-drawer,
html body #cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483600 !important; /* near max int — au-dessus de tout */
  visibility: hidden;
  pointer-events: none;
  /* Sécurité : on isole le stacking context AU-DESSUS de tout le reste,
     mais sans transform/filter/etc. qui piégerait nos enfants fixed. */
  isolation: isolate;
  /* Pas de transform / pas de filter / pas de will-change ici ! */
}

#cart-drawer.is-open,
html body #cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* ── Overlay — backdrop sombre, posé dans le wrapper ── */
#cart-drawer .cart-drawer__overlay {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: var(--cd-overlay-bg);
  opacity: 0;
  transition: opacity var(--cd-transition);
  cursor: pointer;
  z-index: 0;
  pointer-events: auto;
}

#cart-drawer.is-open .cart-drawer__overlay {
  opacity: 1;
}

/* ── Panel — slides in from right, AU-DESSUS de l'overlay (même contexte)
   Pas de transform initial (sinon stacking context piégé). On utilise
   translate via une variable + transition GPU sans changer la nature.
   Le panel est au-dessus de l'overlay grâce à z-index:2 (overlay = 0). ── */
#cart-drawer .cart-drawer__panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--cd-width);
  max-width: 100vw;
  background: var(--cd-bg);
  border-radius: var(--cd-radius);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--cd-transition);
  overflow: hidden;
  z-index: 2 !important; /* au-dessus de l'overlay (z:0) */
  box-shadow: var(--cd-shadow);
  pointer-events: auto;
  /* iOS : empêche le scroll du body via le panel */
  overscroll-behavior: contain;
}

#cart-drawer.is-open .cart-drawer__panel {
  transform: translateX(0) !important;
}

/* ── Header ── */
.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--cd-header-h);
  border-bottom: 1px solid var(--cd-border);
  flex-shrink: 0;
  background: var(--cd-bg);
}

.cart-drawer__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cd-text);
}

.cart-drawer__title-icon {
  font-size: 20px;
  color: var(--cd-accent);
  flex-shrink: 0;
}

.cart-drawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--cd-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cd-muted);
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
}

.cart-drawer__close:hover {
  background: #e5e7eb;
  color: var(--cd-text);
}

.cart-drawer__close svg {
  width: 18px;
  height: 18px;
}

/* ── Body — zone scrollable du panel ── */
.cart-drawer__body {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  /* Empêche le scroll-chaining vers la page derrière (Chrome, Firefox, Safari 16+) */
  overscroll-behavior: contain;
  /* Autorise uniquement le pan vertical à l'intérieur du panel */
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.cart-drawer__body::-webkit-scrollbar {
  width: 4px;
}

.cart-drawer__body::-webkit-scrollbar-track {
  background: transparent;
}

.cart-drawer__body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

/* ── Shipping bar ── */
.cart-drawer__shipping-bar {
  padding: 14px 20px 16px;
  background: var(--cd-accent-light);
  border-bottom: 1px solid #f9c8e8;
}

.cart-drawer__shipping-bar--hidden {
  display: none;
}

.cart-drawer__shipping-msg {
  font-size: 0.82rem;
  color: #9c1666;
  margin: 0 0 8px;
  line-height: 1.4;
}

.cart-drawer__shipping-msg--unlocked {
  color: var(--cd-success);
  font-weight: 600;
}

.cart-drawer__shipping-msg--unlocked strong {
  color: var(--cd-success);
}

.cart-drawer__shipping-msg strong {
  color: var(--cd-accent);
}

.cart-drawer__progress-track {
  position: relative;
  height: 8px;
  background: #f5bde2;
  border-radius: 999px;
  overflow: hidden;
}

/* Le fill = couleur de fond (gradient rose qui shimmer doucement)
   Les rayures diagonales sont posées en overlay via ::after pour un défilement
   continu indépendant. Donne l'impression que la barre "avance" tout le temps. */
.cart-drawer__progress-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--cd-accent) 0%,
    #f472c0 45%,
    var(--cd-accent) 100%
  );
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
  animation: cd-shimmer 3s linear infinite;
  overflow: hidden;
}

/* Rayures diagonales / / / / qui défilent vers la droite */
.cart-drawer__progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    transparent 75%,
    transparent
  );
  background-size: 16px 16px;
  animation: cd-stripes 0.9s linear infinite;
  pointer-events: none;
}

@keyframes cd-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes cd-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 16px 0;
  }
}

.cart-drawer__shipping-msg--unlocked
  ~ .cart-drawer__progress-track
  .cart-drawer__progress-fill,
.cart-drawer__progress-track[aria-valuenow="100"] .cart-drawer__progress-fill {
  background: linear-gradient(
    90deg,
    var(--cd-success) 0%,
    #4ade80 50%,
    var(--cd-success) 100%
  );
  background-size: 200% 100%;
  animation: cd-shimmer 3s linear infinite;
}

/* ── Items list ── */
.cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-drawer__item {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cd-border);
  transition: background 0.15s;
}

.cart-drawer__item:last-child {
  border-bottom: none;
}

.cart-drawer__item:hover {
  background: #fafafa;
}

.cart-drawer__item-img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--cd-border);
  display: block;
}

.cart-drawer__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-drawer__item-details {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cart-drawer__item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.cart-drawer__item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
}

.cart-drawer__item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cd-text);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-drawer__item-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cd-text);
  margin: 0;
  white-space: nowrap;
}

/* ── Qty stepper ── */
.cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--cd-border);
  border-radius: 8px;
  overflow: hidden;
  height: 32px;
}

.cart-drawer__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--cd-text);
  transition: background 0.15s;
  line-height: 1;
}

.cart-drawer__qty-btn:hover {
  background: #f3f4f6;
}

.cart-drawer__qty-val {
  min-width: 28px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cd-text);
  padding: 0 4px;
}

/* ── Remove btn ── */
.cart-drawer__item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #9ca3af;
  border-radius: 6px;
  transition:
    background 0.15s,
    color 0.15s;
  padding: 0;
}

.cart-drawer__item-remove:hover {
  background: #fee2e2;
  color: var(--cd-danger);
}

.cart-drawer__item-remove svg {
  width: 16px;
  height: 16px;
}

/* ── Reassurance — 3 colonnes
   Sélecteurs très spécifiques + reset complet pour battre tout style global
   éventuel sur les SVG (le parent thème impose certaines tailles). ── */
#cart-drawer .cart-drawer__reassurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cd-border);
  border-top: 1px solid var(--cd-border);
  border-bottom: 1px solid var(--cd-border);
}

#cart-drawer .cart-drawer__reassurance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 8px;
  background: #fafafa;
}

#cart-drawer .cart-drawer__reassurance-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  flex-shrink: 0;
  background: var(--cd-accent-light);
  border-radius: 50%;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important; /* tue tout fallback FontAwesome <i> */
  line-height: 1 !important;
}

#cart-drawer .cart-drawer__reassurance-icon svg,
#cart-drawer .cart-drawer__reassurance-icon i,
#cart-drawer .cart-drawer__reassurance-icon img {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  color: var(--cd-accent) !important;
  fill: none !important;
  flex-shrink: 0;
  display: block;
}

#cart-drawer .cart-drawer__reassurance-text {
  font-size: 0.72rem;
  color: var(--cd-muted);
  line-height: 1.4;
}

#cart-drawer .cart-drawer__reassurance-text strong {
  color: var(--cd-text);
  font-weight: 600;
  display: block;
}

/* ── Upsells — grille 3 colonnes ── */
.cart-drawer__upsells {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--cd-border);
  background: #fafafa;
}

.cart-drawer__upsells-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cd-muted);
  margin: 0 0 12px;
}

.cart-drawer__upsells-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cart-drawer__upsell-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--cd-bg);
  border: 1px solid var(--cd-border);
  border-radius: 10px;
  padding: 10px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.cart-drawer__upsell-card:hover {
  border-color: #f0abdc;
  box-shadow: 0 0 0 3px var(--cd-accent-light);
}

.cart-drawer__upsell-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--cd-border);
  background: #f9f9f9;
}

.cart-drawer__upsell-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-drawer__upsell-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--cd-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.2;
}

.cart-drawer__upsell-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cd-text);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-drawer__upsell-prices {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cart-drawer__upsell-reg {
  font-size: 0.7rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.cart-drawer__upsell-price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cd-text);
}

.cart-drawer__upsell-price--sale {
  color: var(--cd-accent);
}

.cart-drawer__upsell-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 6px 4px;
  margin-top: auto;
  border: 1.5px solid var(--cd-accent);
  background: var(--cd-accent-light);
  color: var(--cd-accent);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  transition:
    background 0.15s,
    color 0.15s;
}

.cart-drawer__upsell-add:hover {
  background: var(--cd-accent);
  color: #fff;
}

.cart-drawer__upsell-add svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Empty state ── */
.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 16px;
  text-align: center;
}

/* Quand le panier est vide, la réassurance et les cross-sells (rendus
   toujours dans le template pour éviter qu'ils manquent après un ajout
   AJAX) doivent être cachés. Dès que `.cart-drawer__empty` disparaît
   (= un item a été ajouté), ils réapparaissent automatiquement. */
.cart-drawer__empty ~ .cart-drawer__reassurance,
.cart-drawer__empty ~ .cart-drawer__upsells {
  display: none;
}

.cart-drawer__empty-icon {
  font-size: 56px;
  color: #d1d5db;
}

.cart-drawer__empty p {
  font-size: 1rem;
  color: var(--cd-muted);
  margin: 0;
  font-weight: 500;
}

.cart-drawer__continue-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--cd-accent);
  color: #fff !important;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.1s;
}

.cart-drawer__continue-btn:hover {
  background: var(--cd-accent-hover);
  color: #fff !important;
  transform: translateY(-1px);
}

/* ── Footer ── */
.cart-drawer__footer {
  flex-shrink: 0;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cd-border);
  background: var(--cd-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-drawer__footer-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-drawer__footer-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--cd-text);
}

.cart-drawer__footer-line span:first-child {
  color: var(--cd-muted);
}

.cart-drawer__footer-line span:last-child {
  font-weight: 600;
}

.cart-drawer__footer-savings {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cd-success);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  padding: 7px 10px;
}

.cart-drawer__footer-savings svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: #86efac;
  stroke: var(--cd-success);
}

/* ── Checkout CTA ── */
.cart-drawer__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  background: var(--cd-accent);
  color: #fff !important;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 25px;
  transition:
    background 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
  box-shadow: 0 4px 15px rgba(230, 44, 161, 0.35);
  text-align: center;
}

.cart-drawer__checkout-btn:hover {
  background: var(--cd-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 44, 161, 0.5);
}

/* ── Security line ── */
.cart-drawer__security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.73rem;
  color: var(--cd-muted);
  text-align: center;
}

.cart-drawer__security svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #9ca3af;
}

.cart-drawer__security strong {
  color: var(--cd-text);
}

/* ── Footer hidden when cart empty ── */
.cart-drawer__footer--hidden {
  display: none;
}

/* ── Loader ── */
.cart-drawer__loader {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  backdrop-filter: blur(2px);
}

.cart-drawer__loader.is-loading {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--cd-accent);
  border-radius: 50%;
  animation: cd-spin 0.7s linear infinite;
}

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

/* ── Suppression des notices/modales legacy WooCommerce + parent theme ── */
.woocommerce-message:has(.button.wc-forward),
.woocommerce-notices-wrapper .woocommerce-message,
ul.woocommerce-notices-wrapper,
#tooltip-mini-cart,
#modal-add-to-cart,
.modal-backdrop,
.mobile-cart-notification {
  display: none !important;
}

/* ── Item removing animation ── */
.cart-drawer__item.is-removing {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.25s,
    transform 0.25s;
  pointer-events: none;
}

/* ── Top loading bar (style YouTube/GitHub)
      Indicateur fin et discret en haut du panel pour signaler
      qu'une action est en cours, sans bloquer l'UI. ── */
.cart-drawer__topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(230, 44, 161, 0.08);
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cart-drawer__topbar.is-loading {
  opacity: 1;
}

.cart-drawer__topbar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cd-accent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: cd-topbar 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-play-state: paused;
}

.cart-drawer__topbar.is-loading::before {
  animation-play-state: running;
}

@keyframes cd-topbar {
  0% {
    transform: translateX(-100%);
  }
  60% {
    transform: translateX(250%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* ── Spinner inline sur la quantité quand on +/-
      Remplace temporairement le chiffre par un mini spinner pour que
      l'utilisateur voie clairement que ça travaille. ── */
.cart-drawer__qty-val.is-updating {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.cart-drawer__qty-val.is-updating::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #f3d4e8;
  border-top-color: var(--cd-accent);
  border-radius: 50%;
  animation: cd-spin 0.6s linear infinite;
}

/* Pulse subtile sur la ligne pendant un update */
.cart-drawer__item.is-updating {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cd-accent-light) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: cd-pulse-bg 1.2s ease-in-out infinite;
}

@keyframes cd-pulse-bg {
  0%,
  100% {
    background-position: 200% 0;
  }
  50% {
    background-position: -200% 0;
  }
}

/* ── Confettis au déblocage de la livraison gratuite 🎉
      Spawn 60 divs colorés qui tombent avec rotation aléatoire.
      Les variables --x, --r, --d, --col sont injectées en JS. ── */
.cd-confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.cd-confetto {
  position: absolute;
  top: -20px;
  left: var(--x, 50%);
  width: 8px;
  height: 14px;
  background: var(--col, var(--cd-accent));
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-20px) rotate(0deg);
  animation: cd-fall var(--d, 2s) cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes cd-fall {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(110vh) rotate(var(--r, 720deg));
  }
}

/* Bandeau "livraison gratuite débloquée" qui pulse une fois après l'unlock */
.cart-drawer__shipping-msg--unlocked.cd-just-unlocked {
  animation: cd-celebrate 0.8s ease-out;
}

@keyframes cd-celebrate {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.08);
    color: var(--cd-success);
    text-shadow: 0 0 20px rgba(22, 163, 74, 0.4);
  }
  100% {
    transform: scale(1);
  }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  :root {
    --cd-width: 100vw;
    --cd-radius: 0;
  }

  .cart-drawer__panel {
    border-radius: 0;
  }
}


/* Ligne « Livraison » du pied — toujours rendue, même sans adresse saisie */
.cart-drawer__footer-line--shipping .cart-drawer__footer-hint {
  font-style: normal;
  font-size: 0.82em;
  color: #9aa1a9;
}