/* ───────────────────────────────────────────────
   PANIER WOOCOMMERCE — UI (trigger nav + drawer)
   Chargé globalement. Style le mini-cart WC au look
   du drawer prototype.
   ─────────────────────────────────────────────── */

/* ─── Bouton panier dans la nav ─── */
.pep-cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink); cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 100px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background .2s, color .2s;
}
.pep-cart-btn:hover { background: var(--ink); color: #fff; }
.pep-cart-btn svg { width: 16px; height: 16px; }
.pep-cart-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
  background: #d92d20; color: #fff; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center; line-height: 1;
}
.pep-cart-count.show { display: inline-flex; }

/* ─── Overlay + drawer ─── */
.pep-cart-overlay {
  position: fixed; inset: 0; background: oklch(18% 0.025 250 / 0.35);
  backdrop-filter: blur(3px); z-index: 9990; opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.pep-cart-overlay.open { opacity: 1; visibility: visible; }
#pepCartDrawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 95vw;
  background: #fff; z-index: 9991; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: -20px 0 60px oklch(0% 0 0 / 0.12);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
#pepCartDrawer.open { transform: translateX(0); }
.pep-cart-head {
  padding: 24px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.pep-cart-head h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px;
  font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 0;
}
.pep-cart-close {
  background: var(--cream-2, #f6f6f4); border: 1px solid var(--rule); width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0;
}
/* Croix SVG (remplace le glyphe × qui flottait au-dessus du centre) */
.pep-cart-close svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.pep-cart-close:hover { background: var(--ink); color: #fff; }

/* Le conteneur de fragment WC prend toute la hauteur restante */
#pepCartDrawer > .widget_shopping_cart_content {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* ─── Contenu du drawer = maquette prototype-claude/cart.js ─── */
/* Liste des articles : zone scrollable */
#pepCartDrawer .pep-cart-items { flex: 1; overflow-y: auto; padding: 12px 24px; min-height: 0; }

/* Panier vide */
#pepCartDrawer .pep-cart-empty { text-align: center; padding: 56px 0; color: var(--ink-mute); }
#pepCartDrawer .pep-cart-empty-icon { display: block; margin-bottom: 14px; }
#pepCartDrawer .pep-cart-empty-icon svg { width: 42px; height: 42px; color: oklch(80% 0.01 250); display: inline-block; }
#pepCartDrawer .pep-cart-empty p { margin: 0; font-size: 15px; color: var(--ink); font-weight: 600; }
#pepCartDrawer .pep-cart-empty .pep-cart-empty-sub { font-size: 13px; margin-top: 8px; color: var(--ink-mute); font-weight: 400; }

/* Ligne article : miniature · infos+stepper · prix+retirer */
#pepCartDrawer .pep-cart-item {
  display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: center;
}
#pepCartDrawer .pep-cart-item:last-child { border-bottom: none; }
#pepCartDrawer .pep-cart-item-img {
  width: 54px; height: 54px; background: var(--cream-2, #f6f6f4); border: 1px solid var(--rule);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
#pepCartDrawer .pep-cart-item-img a, #pepCartDrawer .pep-cart-item-img img {
  width: 100%; height: 100%; display: block;
}
#pepCartDrawer .pep-cart-item-img img { object-fit: contain; background: #fff; }
#pepCartDrawer .pep-cart-item-info { flex: 1; min-width: 0; }
#pepCartDrawer .pep-cart-item-name {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--ink); line-height: 1.3;
}
#pepCartDrawer .pep-cart-item-name a { color: inherit; text-decoration: none; }
#pepCartDrawer .pep-cart-item-name a:hover { color: var(--green-v2); }
#pepCartDrawer .pep-cart-item-opts { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
#pepCartDrawer .pep-cart-item-opts p { margin: 0; }

/* Stepper quantité −/+ */
#pepCartDrawer .pep-qty-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#pepCartDrawer .pep-qty-btn {
  width: 26px; height: 26px; border: 1.5px solid var(--rule); border-radius: 7px;
  background: #fff; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
  transition: border-color .2s;
}
/* −/+ SVG (remplacent les glyphes texte, décentrés selon la police) */
#pepCartDrawer .pep-qty-btn svg { width: 12px; height: 12px; display: block; pointer-events: none; }
#pepCartDrawer .pep-qty-btn:hover { border-color: var(--ink); background: #fff; }
#pepCartDrawer .pep-qty-btn:disabled { opacity: .45; cursor: default; }
#pepCartDrawer .pep-qty-val { font-size: 14px; font-weight: 700; min-width: 18px; text-align: center; }

/* Colonne droite : prix + retirer */
#pepCartDrawer .pep-cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#pepCartDrawer .pep-cart-item-price {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
}
#pepCartDrawer .pep-cart-item-price .amount { color: inherit; }
#pepCartDrawer .pep-cart-item-remove {
  background: none; border: none; cursor: pointer;
  color: var(--ink-mute); padding: 2px; display: flex; transition: color .2s;
}
#pepCartDrawer .pep-cart-item-remove svg { width: 16px; height: 16px; display: block; }
#pepCartDrawer .pep-cart-item-remove:hover { color: var(--terra); background: none; }

/* Footer : totaux + validation */
#pepCartDrawer .pep-cart-footer { padding: 20px 24px; border-top: 1px solid var(--rule); flex-shrink: 0; }
#pepCartDrawer .pep-cart-line {
  display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-mute); margin-bottom: 8px;
}
#pepCartDrawer .pep-cart-line .amount { color: var(--ink); }
#pepCartDrawer .pep-cart-total {
  display: flex; justify-content: space-between; align-items: baseline; color: var(--ink);
  margin-bottom: 6px; font-size: 14px; font-weight: 600;
}
#pepCartDrawer .pep-cart-total > span:last-child, #pepCartDrawer .pep-cart-total .amount {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
  color: var(--ink);
}
#pepCartDrawer .pep-cart-tva { font-size: 12px; color: var(--ink-mute); margin: 0 0 14px; line-height: 1.5; }
#pepCartDrawer .pep-cart-btn-pay {
  width: 100%; justify-content: center; background: var(--ink); color: #fff;
  border: none; border-radius: 100px; padding: 16px; font-size: 15px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: inherit;
  text-decoration: none; transition: background .2s;
}
#pepCartDrawer .pep-cart-btn-pay:hover { background: oklch(28% 0.04 250); color: #fff; }
#pepCartDrawer .pep-cart-sub {
  font-size: 12px; color: var(--ink-mute); text-align: center; margin: 12px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
#pepCartDrawer .pep-cart-sub svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Bannière de confirmation d'ajout (maquette) */
.pep-confirm-banner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(90px);
  background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 100px;
  font-size: 14px; font-weight: 600; z-index: 9995; transition: transform .4s cubic-bezier(.4,0,.2,1);
  white-space: nowrap; box-shadow: 0 12px 40px oklch(0% 0 0 / 0.2);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pep-confirm-banner.show { transform: translateX(-50%) translateY(0); }

/* Lien panier dans le menu mobile */
.cart-link-mobile .pep-cart-count { position: static; margin-left: 8px; }

@media (max-width: 600px) {
  #pepCartDrawer { width: 100%; }
}