/* =============================================
   BJJ LAB — CART DRAWER (panier latéral)
============================================= */

/* Overlay */
#bjj-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 3000;
}
body.bjj-drawer-open #bjj-drawer-overlay { opacity: 1; visibility: visible; }
body.bjj-drawer-open { overflow: hidden; }

/* Drawer */
#bjj-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 100%;
  background: var(--dark, #111);
  color: var(--white, #f5f5f5);
  z-index: 3001;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .35s cubic-bezier(.22, .85, .35, 1);
  border-left: 1px solid rgba(224, 0, 15, 0.25);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
}
body.bjj-drawer-open #bjj-drawer { transform: translateX(0); }

#bjj-drawer.is-busy .bjj-drawer__body,
#bjj-drawer.is-busy .bjj-drawer__footer {
  opacity: .5;
  pointer-events: none;
}

/* Header */
.bjj-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--black, #0a0a0a);
  border-bottom: 1px solid rgba(224, 0, 15, 0.25);
  flex-shrink: 0;
}
.bjj-drawer__header h3 {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white, #f5f5f5);
  margin: 0;
}
.bjj-drawer__count { color: var(--red, #e0000f); }
.bjj-drawer__close {
  background: transparent;
  border: none;
  color: var(--silver, #c8c8c8);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  transition: color .2s, transform .2s;
}
.bjj-drawer__close:hover { color: var(--red, #e0000f); transform: rotate(90deg); }

/* Body */
.bjj-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  -webkit-overflow-scrolling: touch;
}

/* Barre livraison offerte */
.bjj-drawer-shipbar {
  background: var(--dark2, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius, 4px);
  padding: 16px 16px 22px;
  margin-bottom: 20px;
}
.bjj-drawer-shipbar p {
  font-size: 14px;
  color: var(--silver, #c8c8c8);
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.5;
}
.bjj-drawer-shipbar p strong { color: var(--white, #f5f5f5); }
.bjj-drawer-shipbar.is-free p strong { color: var(--red, #e0000f); }
.bjj-drawer-shipbar__track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}
.bjj-drawer-shipbar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-dark, #a80009), var(--red, #e0000f));
  border-radius: 99px;
  transition: width .4s ease;
  box-shadow: 0 0 12px rgba(224, 0, 15, 0.5);
}
.bjj-drawer-shipbar__truck {
  position: absolute;
  top: -13px;
  transform: translateX(-50%) scaleX(-1);
  font-size: 15px;
  transition: left .4s ease;
}

/* Articles */
.bjj-drawer-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bjj-drawer-item__img {
  width: 72px; height: 72px;
  background: var(--dark2, #1a1a1a);
  border-radius: var(--radius, 4px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bjj-drawer-item__img img { width: 100%; height: 100%; object-fit: cover; }
.bjj-drawer-item__name {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--white, #f5f5f5);
  line-height: 1.2;
}
.bjj-drawer-item__price { font-size: 13px; color: var(--silver-dim, #888); margin-top: 4px; }
.bjj-drawer-item__price del { opacity: .6; margin-left: 6px; }
.bjj-drawer-item__price ins { text-decoration: none; color: var(--silver, #c8c8c8); }
.bjj-drawer-item__controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bjj-drawer-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius, 4px);
  overflow: hidden;
}
.bjj-drawer-qty__btn {
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--white, #f5f5f5);
  font-size: 16px;
  cursor: pointer;
  transition: background .2s;
}
.bjj-drawer-qty__btn:hover { background: var(--red, #e0000f); }
.bjj-drawer-qty__val {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.bjj-drawer-item__remove {
  background: transparent;
  border: none;
  color: var(--silver-dim, #888);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color .2s;
}
.bjj-drawer-item__remove:hover { color: var(--red, #e0000f); }
.bjj-drawer-item__total {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--white, #f5f5f5);
  white-space: nowrap;
}
.bjj-drawer-item__total del { display: block; font-size: 12px; font-weight: 400; color: var(--silver-dim, #888); text-align: right; }
.bjj-drawer-item__total ins { text-decoration: none; }

/* Upsell */
.bjj-drawer-upsell { margin-top: 24px; }
.bjj-drawer-upsell h4 {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--white, #f5f5f5);
  margin: 0 0 12px;
}
.bjj-drawer-upsell__row { display: flex; flex-direction: column; gap: 10px; }
.bjj-drawer-upsell__card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dark2, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius, 4px);
  padding: 12px;
}
.bjj-drawer-upsell__img {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius, 4px);
  overflow: hidden;
  background: var(--black, #0a0a0a);
}
.bjj-drawer-upsell__img img { width: 100%; height: 100%; object-fit: cover; }
.bjj-drawer-upsell__info { flex: 1; }
.bjj-drawer-upsell__name {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white, #f5f5f5);
}
.bjj-drawer-upsell__price { font-size: 13px; font-weight: 700; color: var(--red, #e0000f); margin: 2px 0 8px; }
.bjj-drawer-upsell__price del { color: var(--silver-dim, #888); font-weight: 400; margin-right: 6px; }
.bjj-drawer-upsell__price ins { text-decoration: none; }
.bjj-drawer-upsell__btn {
  background: var(--red, #e0000f);
  border: none;
  color: #fff;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s;
}
.bjj-drawer-upsell__btn:hover { background: var(--red-dark, #a80009); }

/* Panier vide */
.bjj-drawer-empty { text-align: center; padding: 60px 20px; }
.bjj-drawer-empty__icon { font-size: 48px; display: block; }
.bjj-drawer-empty p { color: var(--silver-dim, #888); margin: 16px 0 24px; }
.bjj-drawer-empty__btn {
  display: inline-block;
  background: var(--red, #e0000f);
  color: #fff !important;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: var(--radius, 4px);
  transition: background .2s;
}
.bjj-drawer-empty__btn:hover { background: var(--red-dark, #a80009); }

/* Footer */
.bjj-drawer__footer {
  flex-shrink: 0;
  padding: 18px 24px 20px;
  background: var(--black, #0a0a0a);
  border-top: 1px solid rgba(224, 0, 15, 0.25);
}
.bjj-drawer-coupon { display: flex; gap: 8px; }
.bjj-drawer-coupon input {
  flex: 1;
  background: var(--dark2, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius, 4px);
  color: var(--white, #f5f5f5);
  font-size: 14px;
  padding: 11px 14px;
  outline: none;
}
.bjj-drawer-coupon input:focus { border-color: rgba(224, 0, 15, 0.6); }
.bjj-drawer-coupon input::placeholder { color: var(--silver-dim, #888); }
.bjj-drawer-coupon button {
  background: transparent;
  border: 1px solid var(--red, #e0000f);
  color: var(--red, #e0000f);
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 18px;
  border-radius: var(--radius, 4px);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.bjj-drawer-coupon button:hover { background: var(--red, #e0000f); color: #fff; }
.bjj-drawer-coupon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4ade80;
  margin-top: 8px;
}
.bjj-drawer-coupon-chip button {
  background: transparent;
  border: none;
  color: var(--silver-dim, #888);
  cursor: pointer;
  font-size: 12px;
}
.bjj-drawer-coupon-chip button:hover { color: var(--red, #e0000f); }
.bjj-drawer-msg { font-size: 13px; color: var(--red, #e0000f); margin-top: 8px; }
.bjj-drawer-msg:empty { display: none; }
.bjj-drawer-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--silver, #c8c8c8);
  margin-top: 12px;
}
.bjj-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 14px 0;
}
.bjj-drawer-total span { font-size: 15px; color: var(--silver, #c8c8c8); }
.bjj-drawer-total strong {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 28px;
  font-weight: 900;
  color: var(--white, #f5f5f5);
}
.bjj-drawer-checkout {
  display: block;
  background: var(--red, #e0000f);
  color: #fff !important;
  text-align: center;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px;
  border-radius: var(--radius, 4px);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.bjj-drawer-checkout:hover {
  background: var(--red-dark, #a80009);
  box-shadow: var(--glow-red, 0 0 30px rgba(224, 0, 15, 0.35));
  transform: translateY(-2px);
}

/* Capsules moyens de paiement (logos SVG) */
.bjj-drawer-pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.bjj-drawer-pay .bjj-pay {
  height: 26px;
  width: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.bjj-drawer-trust {
  text-align: center;
  font-size: 12px;
  color: var(--silver-dim, #888);
  margin: 10px 0 0;
}

/* Bouton en cours d'ajout */
.is-loading { opacity: .7; pointer-events: none; }

/* ===== MOBILE ===== */
@media (max-width: 560px) {
  #bjj-drawer { width: 100%; border-left: none; }
  .bjj-drawer__body { padding: 16px; }
  .bjj-drawer__footer { padding: 14px 16px 16px; }
  .bjj-drawer__header { padding: 14px 16px; }
  .bjj-drawer-item { grid-template-columns: 64px 1fr auto; gap: 10px; }
  .bjj-drawer-item__img { width: 64px; height: 64px; }
  .bjj-drawer-total strong { font-size: 24px; }
  .bjj-drawer-pay .bjj-pay { height: 24px; }
}