/*
 * cart-drawer.css — Clos Galant v52
 * Tiroir panier ouvert depuis l'icône du header.
 * Markup : footer.php (#cgCartDrawer) — Logique : js/main.js
 * Contenu : cg_mini_cart_html() dans functions.php
 */

body.cg-drawer-open { overflow: hidden; }

.cg-drawer { position: fixed; inset: 0; z-index: 9500; pointer-events: none; }
.cg-drawer.cg-drawer-visible { pointer-events: all; }

.cg-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,4,6,.5);
  opacity: 0;
  transition: opacity .35s ease;
}
.cg-drawer-visible .cg-drawer-backdrop { opacity: 1; }

.cg-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: #FDFAF4;
  box-shadow: -12px 0 48px rgba(26,8,14,.22);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(0.16,1,0.3,1);
}
.cg-drawer-visible .cg-drawer-panel { transform: translateX(0); }

.cg-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(107,31,42,.1);
  flex-shrink: 0;
}
.cg-drawer-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 400; font-style: italic;
  color: var(--bordeaux);
}
.cg-drawer-close {
  background: none; border: none; cursor: pointer;
  color: rgba(26,26,26,.5); padding: 6px;
  transition: color .2s;
}
.cg-drawer-close:hover { color: var(--bordeaux); }
.cg-drawer-close:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.cg-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 28px;
}

/* ── Liste des articles ── */
.cg-drawer-items { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cg-drawer-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; }
.cg-drawer-item-img { display: block; width: 52px; height: 69px; overflow: hidden; background: #F0EDE6; flex-shrink: 0; }
.cg-drawer-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-drawer-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-drawer-item-cat { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--bordeaux); }
.cg-drawer-item-name { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 400; color: var(--noir); line-height: 1.2; }
.cg-drawer-item-qty { font-family: 'Lato', sans-serif; font-size: 12px; color: rgba(26,26,26,.55); }
.cg-drawer-item-remove { background: none; border: none; color: rgba(26,26,26,.35); padding: 6px; cursor: pointer; transition: color .2s; flex-shrink: 0; }
.cg-drawer-item-remove:hover { color: var(--bordeaux); }

/* ── Barre livraison offerte (partagée avec la page panier) ── */
.cg-fs-bar { margin: 4px 0 20px; }
.cg-fs-text { font-family: 'Montserrat', sans-serif; font-size: 11px; color: rgba(26,26,26,.65); margin: 0 0 8px; }
.cg-fs-text strong { color: var(--bordeaux); }
.cg-fs-ok { color: #4a7c59 !important; font-weight: 600; }
.cg-fs-track { height: 3px; background: rgba(107,31,42,.12); overflow: hidden; }
.cg-fs-track span { display: block; height: 100%; background: var(--or); transition: width .4s ease; }

/* ── Total + actions ── */
.cg-drawer-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 18px; border-top: 2px solid #1a1a1a; margin-bottom: 18px;
}
.cg-drawer-total span:first-child { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: rgba(26,26,26,.6); }
.cg-drawer-total-amount { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--bordeaux); }

.cg-drawer-actions { display: flex; flex-direction: column; gap: 10px; }
.cg-drawer-btn {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
  text-align: center; padding: 15px 20px; transition: background .3s, color .3s, border-color .3s;
}
.cg-drawer-btn--ghost { background: transparent; border: 1px solid rgba(26,26,26,.2); color: var(--noir); }
.cg-drawer-btn--ghost:hover { border-color: var(--noir); }
.cg-drawer-btn--full { background: var(--bordeaux); border: 1px solid var(--bordeaux); color: #fff; }
.cg-drawer-btn--full:hover { background: #5a1823; }

/* ── État vide ── */
.cg-drawer-empty { text-align: center; padding: 48px 12px; }
.cg-drawer-empty svg { color: rgba(26,26,26,.15); margin-bottom: 18px; }
.cg-drawer-empty p { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: rgba(26,26,26,.55); margin-bottom: 22px; }
.cg-drawer-empty-cta {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; color: #fff; background: var(--bordeaux);
  padding: 13px 28px; text-decoration: none; display: inline-block; transition: background .3s;
}
.cg-drawer-empty-cta:hover { background: #5a1823; }

@media (max-width: 480px) {
  .cg-drawer-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-drawer-panel { transition: opacity .2s ease; transform: none; }
  .cg-drawer-backdrop { transition: opacity .2s ease; }
}