/* ============================================
   PANIER.CSS — SHOP.SN
   Ultra Premium · Mobile First · Conversion Psychology
   Base = 320px, enrichi progressivement
   Breakpoints : 480px → 768px → 1025px → 1280px → 1440px
   Préfixes : ct- (cart)
   
   LEVIERS PSYCHOLOGIQUES :
   - Urgence/FOMO (timer expiration, viewers live, stock faible)
   - Social proof (acheteurs récents, compteurs, avis inline)
   - Gamification (barre progression paliers, rewards, points)
   - Ancrage prix (économies, prix barré, % bien visible)
   - Upsell/Bundle (fréquemment achetés ensemble, bundle discount)
   - Loss aversion (expiration panier, prix réservé)
   - Réassurance (garanties, SSL, vendeurs vérifiés)
   - Scarcity (stock limité, dernières pièces)
   ============================================ */

/* ============================================================
   1. LAYOUT PANIER
   Mobile : colonne unique
   Desktop 1025px+ : 2 colonnes (items gauche, résumé sticky droite)
   ============================================================ */
.ct-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1025px) {
  .ct-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .ct-layout { grid-template-columns: 1fr 400px; gap: 28px; }
}
@media (min-width: 1440px) {
  .ct-layout { grid-template-columns: 1fr 420px; gap: 32px; }
}

/* ============================================================
   2. URGENCE BANNER — Timer expiration panier (Loss Aversion)
   "Votre panier expire dans..." + compteur
   ============================================================ */
.ct-urgency-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #0a0a0a;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}
.ct-urgency-banner::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(253,98,5,0.08), transparent);
  animation: ct-shimmer 3s infinite;
}
@keyframes ct-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}
.ct-urgency-banner__icon {
  font-size: 20px;
  color: #e63946;
  animation: ct-pulse 1.2s infinite;
  flex-shrink: 0;
}
@keyframes ct-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}
.ct-urgency-banner__text {
  font-size: 11px;
  color: #ccc;
  font-weight: 500;
  flex: 1;
  line-height: 1.4;
}
.ct-urgency-banner__text strong { color: #fff; }
.ct-urgency-banner__timer {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ct-urgency-banner__timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 5px;
  background: rgba(230,57,70,0.15);
  border-radius: 4px;
  min-width: 28px;
}
.ct-urgency-banner__timer-val {
  font-size: 14px;
  font-weight: 800;
  color: #e63946;
  font-family: 'Manrope', sans-serif;
  line-height: 1;
}
.ct-urgency-banner__timer-unit {
  font-size: 7px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ct-urgency-banner__timer-sep {
  font-size: 12px;
  color: #e63946;
  font-weight: 700;
  opacity: 0.6;
  padding: 0 1px;
}

/* ============================================================
   3. SOCIAL PROOF BAR — Live viewers + acheteurs récents
   ============================================================ */
.ct-social-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #f0e8dc;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  color: #555;
}
.ct-social-bar__avatars {
  display: flex;
  margin-right: 2px;
}
.ct-social-bar__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(253,98,5);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -7px;
}
.ct-social-bar__avatar:first-child { margin-left: 0; }
.ct-social-bar__avatar--blue { background: rgb(0,139,255); }
.ct-social-bar__avatar--gold { background: #c9a84c; }
.ct-social-bar__avatar--green { background: #2e7d32; }
.ct-social-bar__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e7d32;
  animation: ct-pulse 1.5s infinite;
  flex-shrink: 0;
}
.ct-social-bar__text { flex: 1; line-height: 1.3; }
.ct-social-bar strong { color: rgb(253,98,5); }
.ct-social-bar__buyers {
  font-size: 10px;
  color: #2e7d32;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ct-social-bar__buyers i { font-size: 12px; }

/* ============================================================
   4. EN-TÊTE PANIER
   ============================================================ */
.ct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ct-header__title {
  font-size: 18px;
  font-weight: 800;
  color: #0a0a0a;
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ct-header__title i { color: rgb(253,98,5); font-size: 22px; }
.ct-header__count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgb(253,98,5);
  padding: 2px 8px;
  border-radius: 10px;
}
.ct-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct-header__clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.ct-header__clear-btn:hover { color: #e63946; border-color: #e63946; background: #fef5f5; }
@media (min-width: 768px) {
  .ct-header__title { font-size: 22px; }
  .ct-header__title i { font-size: 26px; }
}

/* ============================================================
   5. BARRE DE PROGRESSION GAMIFIÉE — 3 Paliers avec rewards
   Livraison gratuite → Cadeau surprise → Points x2
   ============================================================ */
.ct-progress {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.ct-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ct-progress__text {
  font-size: 12px;
  color: #333;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ct-progress__text i { font-size: 16px; color: rgb(253,98,5); }
.ct-progress__text strong { color: rgb(253,98,5); }
.ct-progress__percent {
  font-size: 11px;
  font-weight: 700;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 2px 8px;
  border-radius: 10px;
}
.ct-progress__bar-wrap {
  position: relative;
  width: 100%;
  height: 10px;
  background: #f0f0f0;
  border-radius: 5px;
  overflow: visible;
  margin-bottom: 12px;
}
.ct-progress__bar-fill {
  height: 100%;
  background: rgb(253,98,5);
  border-radius: 5px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.ct-progress__bar-fill::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(253,98,5);
  border: 3px solid #fff;
  box-shadow: 0 0 6px rgba(253,98,5,0.5);
}
.ct-progress__milestones {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ct-progress__milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.ct-progress__milestone-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #f5f5f5;
  color: #bbb;
  border: 2px solid #e0e0e0;
  transition: all 0.3s;
}
.ct-progress__milestone.is-reached .ct-progress__milestone-icon {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
  box-shadow: 0 2px 6px rgba(46,125,50,0.3);
}
.ct-progress__milestone.is-next .ct-progress__milestone-icon {
  background: #fff3e0;
  color: rgb(253,98,5);
  border: 2px dashed rgb(253,98,5);
  animation: ct-bounce 2s infinite;
}
@keyframes ct-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.ct-progress__milestone-label {
  font-size: 9px;
  color: #888;
  font-weight: 500;
  max-width: 65px;
  line-height: 1.2;
}
.ct-progress__milestone.is-reached .ct-progress__milestone-label { color: #2e7d32; font-weight: 700; }
.ct-progress__milestone.is-next .ct-progress__milestone-label { color: rgb(253,98,5); font-weight: 700; }

/* ============================================================
   6. CARTE ARTICLE PANIER — Design premium avec FOMO
   ============================================================ */
.ct-items { display: flex; flex-direction: column; gap: 12px; }

.ct-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 12px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ct-item:hover {
  border-color: #ddd;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* Badge promo flash sur l'item */
.ct-item__flash-badge {
  position: absolute;
  top: -1px;
  left: 12px;
  background: #e63946;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px 4px;
  border-radius: 0 0 6px 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Image */
.ct-item__img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #f9f9f9;
  flex-shrink: 0;
  position: relative;
}
.ct-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ct-item__img-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: #e63946;
  color: #fff;
}

/* Infos */
.ct-item__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ct-item__brand {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(0,139,255);
}
.ct-item__name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
.ct-item__name:hover { color: rgb(253,98,5); }
.ct-item__variant {
  font-size: 11px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ct-item__variant-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  flex-shrink: 0;
}
.ct-item__seller {
  font-size: 10px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ct-item__seller i { font-size: 12px; color: rgb(0,139,255); }
.ct-item__delivery {
  font-size: 10px;
  color: #2e7d32;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.ct-item__delivery i { font-size: 12px; }

/* Scarcity — Stock faible (FOMO) */
.ct-item__scarcity {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #e63946;
  animation: ct-pulse 2s infinite;
}
.ct-item__scarcity i { font-size: 11px; }

/* Social proof inline — "Acheté X fois" */
.ct-item__popularity {
  font-size: 9px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ct-item__popularity i { font-size: 10px; color: #c9a84c; }

/* Prix + Actions — zone bottom */
.ct-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.ct-item__prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.ct-item__price {
  font-size: 16px;
  font-weight: 800;
  color: rgb(253,98,5);
  font-family: 'Manrope', sans-serif;
}
.ct-item__old-price {
  font-size: 11px;
  color: #aaa;
  text-decoration: line-through;
}
.ct-item__discount {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: #e63946;
  padding: 2px 6px;
  border-radius: 3px;
}
.ct-item__saved {
  font-size: 9px;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 2px 6px;
  border-radius: 3px;
}

/* Quantité */
.ct-item__qty {
  display: flex;
  align-items: center;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.ct-item__qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f8f8f8;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.ct-item__qty-btn:hover { background: #e8e8e8; }
.ct-item__qty-btn:active { background: #ddd; }
.ct-item__qty-btn:disabled { color: #ccc; cursor: not-allowed; }
.ct-item__qty-val {
  width: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  border-left: 1.5px solid #e0e0e0;
  border-right: 1.5px solid #e0e0e0;
  line-height: 30px;
  font-family: 'Manrope', sans-serif;
}

/* Actions item */
.ct-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ct-item__action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #fff;
  color: #888;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.ct-item__action-btn:hover { color: #e63946; border-color: #fecdd3; background: #fef5f5; }
.ct-item__action-btn--wishlist:hover { color: #e63946; }
.ct-item__action-btn--delete:hover { color: #e63946; }

/* Badge vendeur vérifié */
.ct-item__verified {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
  color: rgb(0,139,255);
}

@media (min-width: 480px) {
  .ct-item { grid-template-columns: 90px 1fr; gap: 12px; }
  .ct-item__img { width: 90px; height: 90px; }
  .ct-item__name { font-size: 14px; }
  .ct-item__price { font-size: 17px; }
}
@media (min-width: 768px) {
  .ct-item { grid-template-columns: 100px 1fr; padding: 14px; }
  .ct-item__img { width: 100px; height: 100px; }
  .ct-item__bottom { grid-column: 2; margin-top: 4px; }
}
@media (min-width: 1025px) {
  .ct-item { grid-template-columns: 110px 1fr; padding: 16px; border-radius: 14px; }
  .ct-item__img { width: 110px; height: 110px; border-radius: 10px; }
  .ct-item__name { font-size: 15px; }
}

/* ============================================================
   7. BUNDLE / UPSELL — "Souvent achetés ensemble"
   Psychologie : ancrage + social proof + économie
   ============================================================ */
.ct-bundle {
  background: #fff;
  border: 2px solid #fde8d0;
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
  position: relative;
}
.ct-bundle__badge {
  position: absolute;
  top: -10px;
  left: 14px;
  background: rgb(253,98,5);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ct-bundle__badge i { font-size: 12px; }
.ct-bundle__title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ct-bundle__title i { color: rgb(253,98,5); font-size: 16px; }
.ct-bundle__items {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.ct-bundle__items::-webkit-scrollbar { display: none; }
.ct-bundle__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  max-width: 90px;
  text-align: center;
  flex-shrink: 0;
}
.ct-bundle__product-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #f9f9f9;
  border: 1px solid #eee;
}
.ct-bundle__product-img img { width: 100%; height: 100%; object-fit: cover; }
.ct-bundle__product-name {
  font-size: 9px;
  color: #555;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ct-bundle__product-price {
  font-size: 10px;
  font-weight: 700;
  color: rgb(253,98,5);
}
.ct-bundle__plus {
  font-size: 18px;
  color: #ccc;
  font-weight: 300;
  flex-shrink: 0;
}
.ct-bundle__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #fde8d0;
}
.ct-bundle__savings {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ct-bundle__savings-amount {
  font-size: 13px;
  font-weight: 800;
  color: #2e7d32;
}
.ct-bundle__savings-text {
  font-size: 9px;
  color: #888;
}
.ct-bundle__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: rgb(253,98,5);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.ct-bundle__add-btn:hover { background: rgb(230,85,0); }

@media (min-width: 480px) {
  .ct-bundle__product { min-width: 90px; max-width: 100px; }
  .ct-bundle__product-img { width: 70px; height: 70px; }
}

/* ============================================================
   8. CODE PROMO + Suggested codes
   ============================================================ */
.ct-coupon {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.ct-coupon__input {
  flex: 1;
  padding: 11px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  color: #333;
  background: #fff;
  transition: border-color 0.2s;
}
.ct-coupon__input:focus { border-color: rgb(253,98,5); outline: none; }
.ct-coupon__input::placeholder { color: #bbb; }
.ct-coupon__btn {
  padding: 11px 18px;
  background: #0a0a0a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.ct-coupon__btn:hover { background: #333; }

/* Codes suggérés */
.ct-coupon-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ct-coupon-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px dashed rgb(253,98,5);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgb(253,98,5);
  cursor: pointer;
  transition: all 0.2s;
  background: #fff9f5;
}
.ct-coupon-suggestion:hover { background: rgb(253,98,5); color: #fff; border-style: solid; }
.ct-coupon-suggestion i { font-size: 12px; }

/* Code appliqué */
.ct-coupon__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}
.ct-coupon__applied-text {
  font-size: 12px;
  font-weight: 700;
  color: #2e7d32;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ct-coupon__applied-text i { font-size: 14px; }
.ct-coupon__applied-savings { font-size: 12px; font-weight: 700; color: #1b5e20; }
.ct-coupon__applied-remove {
  font-size: 11px;
  color: #e63946;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

/* ============================================================
   9. RÉSUMÉ COMMANDE (Sidebar droite) — Conversion optimized
   ============================================================ */
.ct-summary {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
@media (min-width: 1025px) {
  .ct-summary {
    position: sticky;
    top: 100px;
    padding: 20px;
  }
}

.ct-summary__title {
  font-size: 16px;
  font-weight: 800;
  color: #0a0a0a;
  font-family: 'Manrope', sans-serif;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ct-summary__title i { color: rgb(253,98,5); font-size: 18px; }

/* Lignes résumé */
.ct-summary__lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e8e8e8;
  margin-bottom: 12px;
}
.ct-summary__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #555;
}
.ct-summary__line-label { display: flex; align-items: center; gap: 5px; }
.ct-summary__line-label i { font-size: 14px; color: #aaa; }
.ct-summary__line-value { font-weight: 600; color: #333; }
.ct-summary__line--discount .ct-summary__line-value { color: #2e7d32; font-weight: 700; }
.ct-summary__line--shipping .ct-summary__line-value { color: #2e7d32; font-weight: 700; }

/* Total — Big, bold, anchoring */
.ct-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 2px solid #0a0a0a;
  margin-top: 4px;
}
.ct-summary__total-label {
  font-size: 16px;
  font-weight: 800;
  color: #0a0a0a;
}
.ct-summary__total-value {
  font-size: 24px;
  font-weight: 800;
  color: rgb(253,98,5);
  font-family: 'Manrope', sans-serif;
}

/* Économie bien visible — Ancrage psychologique */
.ct-summary__savings {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #e8f5e9;
  border-radius: 8px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #1b5e20;
}
.ct-summary__savings i { font-size: 16px; }

/* Points fidélité (gamification) */
.ct-summary__loyalty {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fdf8e8;
  border: 1px solid #f5e6b8;
  border-radius: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: #8d6e00;
  font-weight: 600;
}
.ct-summary__loyalty i { font-size: 16px; color: #c9a84c; }
.ct-summary__loyalty strong { color: #6d5200; }

/* Bouton checkout — CTA principal */
.ct-summary__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  margin-top: 14px;
  background: rgb(253,98,5);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.ct-summary__checkout-btn:hover {
  background: rgb(230,85,0);
  box-shadow: 0 6px 20px rgba(253,98,5,0.35);
  transform: translateY(-1px);
}
.ct-summary__checkout-btn:active { transform: translateY(0); }
.ct-summary__checkout-btn i { font-size: 18px; }

/* Microtext sous bouton — confiance */
.ct-summary__micro-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}
.ct-summary__micro-trust-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #888;
}
.ct-summary__micro-trust-item i { font-size: 12px; color: #2e7d32; }

/* Méthodes de paiement */
.ct-summary__payment-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.ct-summary__payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #f5f5f5;
  color: #555;
  border: 1px solid #e8e8e8;
}
.ct-summary__payment-badge i { font-size: 13px; }
.ct-summary__payment-badge--wave { background: #e3f7fa; color: #0097a7; border-color: #b2ebf2; }
.ct-summary__payment-badge--om { background: #fff3e0; color: #e65100; border-color: #ffe0b2; }
.ct-summary__payment-badge--cb { background: #f0f7ff; color: rgb(0,139,255); border-color: #b3d9ff; }

/* ============================================================
   10. RÉASSURANCE PANIER — 4 garanties
   ============================================================ */
.ct-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.ct-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
}
.ct-trust__item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.ct-trust__item-icon--shield { background: #e8f5e9; color: #2e7d32; }
.ct-trust__item-icon--return { background: #e3f2fd; color: rgb(0,139,255); }
.ct-trust__item-icon--delivery { background: #fff3e0; color: rgb(253,98,5); }
.ct-trust__item-icon--support { background: #fce4ec; color: #c62828; }
.ct-trust__item-text strong {
  font-size: 11px;
  color: #333;
  display: block;
  line-height: 1.2;
}
.ct-trust__item-text span {
  font-size: 9px;
  color: #888;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .ct-trust { grid-template-columns: repeat(4, 1fr); }
  .ct-trust__item { flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; }
}

/* ============================================================
   11. SUGGESTIONS — "Vous aimerez aussi" (uses hp-product-card)
   ============================================================ */
.ct-suggestions {
  margin-top: 24px;
}
.ct-suggestions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ct-suggestions__title {
  font-size: 16px;
  font-weight: 800;
  color: #0a0a0a;
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.ct-suggestions__title i { color: rgb(253,98,5); font-size: 20px; }
.ct-suggestions__subtitle {
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ct-suggestions__subtitle i { font-size: 13px; color: #c9a84c; }

/* Grille suggestions : forcer 4 colonnes pour remplir toute la largeur */
.ct-suggestions .hp-products-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 480px) {
  .ct-suggestions .hp-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .ct-suggestions .hp-products-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1025px) {
  .ct-suggestions .hp-products-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1441px) {
  .ct-suggestions .hp-products-grid { grid-template-columns: repeat(4, 1fr); }
}
.ct-suggestions .hp-products-grid .hp-product-card:nth-child(n+5) {
  display: none;
}

/* ============================================================
   12. PANIER VIDE — Engaging empty state
   ============================================================ */
.ct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 16px;
}
.ct-empty__icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.ct-empty__icon i { font-size: 40px; color: #ccc; }
.ct-empty__title {
  font-size: 20px;
  font-weight: 800;
  color: #333;
  margin-bottom: 6px;
  font-family: 'Manrope', sans-serif;
}
.ct-empty__text {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
  max-width: 340px;
  line-height: 1.5;
}
.ct-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 28px;
  background: rgb(253,98,5);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.ct-empty__btn:hover { background: rgb(230,85,0); transform: translateY(-1px); }

/* ============================================================
   13. BARRE MOBILE STICKY — Mini résumé + CTA
   ============================================================ */
.ct-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: fixed;
  bottom: 56px;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 10px 12px;
  z-index: 90;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.ct-mobile-bar__info {
  display: flex;
  flex-direction: column;
}
.ct-mobile-bar__total-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ct-mobile-bar__total-value {
  font-size: 18px;
  font-weight: 800;
  color: rgb(253,98,5);
  font-family: 'Manrope', sans-serif;
}
.ct-mobile-bar__savings {
  font-size: 9px;
  color: #2e7d32;
  font-weight: 600;
}
.ct-mobile-bar__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: rgb(253,98,5);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.ct-mobile-bar__btn:hover { background: rgb(230,85,0); }
@media (min-width: 1025px) {
  .ct-mobile-bar { display: none; }
}

/* ============================================================
   14. RESPONSIVE ENRICHISSEMENT
   ============================================================ */
@media (min-width: 480px) {
  .ct-summary__total-value { font-size: 26px; }
  .ct-urgency-banner { padding: 10px 16px; }
}
@media (min-width: 768px) {
  .ct-summary { padding: 18px; }
  .ct-summary__title { font-size: 17px; }
  .ct-summary__checkout-btn { padding: 16px; font-size: 16px; }
  .ct-header__title { font-size: 24px; }
  .ct-progress { padding: 16px; }
  .ct-bundle { padding: 16px; }
}
@media (min-width: 1025px) {
  .ct-summary { border-radius: 16px; padding: 22px; }
  .ct-summary__total-value { font-size: 28px; }
  .ct-progress { border-radius: 14px; }
  .ct-bundle { border-radius: 16px; }
}
@media (min-width: 1280px) {
  .ct-summary { padding: 24px; }
}