/* ═══════════════════════════════════════════════════════════
   L'Atelier de la Source - Cart Drawer v2.0
   Les couleurs sont injectees via PHP (customizer) sous forme
   de variables CSS sur :root — voir inc/cart-drawer-customizer.php
   ═══════════════════════════════════════════════════════════ */

/* ── Variables par defaut (fallback si PHP non charge) ─────── */
:root {
  --acd-btn-checkout-bg     : #00ABB2;
  --acd-btn-checkout-bg-hover: #009aa0;
  --acd-btn-checkout-color  : #ffffff;
  --acd-btn-cart-color      : #555555;
  --acd-btn-cart-border     : #e0dbd5;
  --acd-accent              : #7a9e3c;
  --acd-accent-light        : #f0f5e8;
  --acd-accent-dark         : #3B6D11;
  --acd-spinner-color       : #7a9e3c;
}

/* ── Overlay ────────────────────────────────────────────────── */
#als-cart-overlay {
  position  : fixed;
  inset     : 0;
  background: rgba(0,0,0,0);
  z-index   : 9000;
  pointer-events: none;
  transition: background .35s ease;
}
#als-cart-overlay.open {
  background    : rgba(0,0,0,.45);
  pointer-events: all;
}

/* ── Drawer ─────────────────────────────────────────────────── */
#als-cart-drawer {
  position  : fixed;
  top       : 0;
  right     : 0;
  bottom    : 0;
  width     : 420px;
  max-width : 95vw;
  background: #fff;
  z-index   : 9001;
  display   : flex;
  flex-direction: column;
  transform : translateX(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 32px rgba(0,0,0,.12);
}
#als-cart-drawer.open {
  transform: translateX(0);
}

/* ── Header ─────────────────────────────────────────────────── */
.acd-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 20px 22px 18px;
  border-bottom  : 1px solid #f0ede8;
  flex-shrink    : 0;
}
.acd-title {
  font-size  : 15px;
  font-weight: 600;
  color      : #2b2b2b;
  margin     : 0 0 2px;
  letter-spacing: .01em;
}
.acd-count {
  font-size: 12px;
  color    : #888;
  margin   : 0;
}
.acd-close {
  width     : 34px;
  height    : 34px;
  border    : 1px solid #e8e4df;
  border-radius: 50%;
  background: #fff;
  cursor    : pointer;
  display   : flex;
  align-items: center;
  justify-content: center;
  color     : #555;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.acd-close:hover { background: #f5f2ee; border-color: #ccc; }

/* ── Body scrollable ────────────────────────────────────────── */
.acd-body {
  flex     : 1;
  overflow-y: auto;
  padding  : 0;
  -webkit-overflow-scrolling: touch;
}

/* ── Loader ─────────────────────────────────────────────────── */
.acd-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 48px 0;
}
.acd-spinner {
  width : 28px;
  height: 28px;
  border: 2.5px solid #e8e4df;
  border-top-color: var(--acd-spinner-color);
  border-radius: 50%;
  animation: acd-spin .7s linear infinite;
}
@keyframes acd-spin { to { transform: rotate(360deg); } }

/* ── Panier vide ────────────────────────────────────────────── */
.acd-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 48px 24px;
  text-align     : center;
  color          : #888;
  gap            : 12px;
}
.acd-empty svg { opacity: .25; }
.acd-empty p { font-size: 14px; margin: 0; }
.acd-empty a {
  margin-top     : 8px;
  display        : inline-block;
  padding        : 10px 22px;
  background     : var(--acd-btn-checkout-bg);
  color          : var(--acd-btn-checkout-color) !important;
  text-decoration: none !important;
  border-radius  : 4px;
  font-size      : 13px;
  font-weight    : 500;
  transition     : background .15s;
}
.acd-empty a:hover { background: var(--acd-btn-checkout-bg-hover); }

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

.acd-item {
  display      : flex;
  gap          : 14px;
  padding      : 16px 22px;
  border-bottom: 1px solid #f5f2ee;
  align-items  : flex-start;
}
.acd-item:last-child { border-bottom: none; }

.acd-item-img {
  width        : 72px;
  height       : 72px;
  border-radius: 8px;
  object-fit   : cover;
  background   : #f0ede8;
  flex-shrink  : 0;
  display      : block;
}
.acd-item-img-placeholder {
  width         : 72px;
  height        : 72px;
  border-radius : 8px;
  background    : #f0ede8;
  flex-shrink   : 0;
  display       : flex;
  align-items   : center;
  justify-content: center;
}
.acd-item-info { flex: 1; min-width: 0; }
.acd-item-name {
  font-size  : 13px;
  font-weight: 500;
  color      : #2b2b2b;
  margin     : 0 0 3px;
  line-height: 1.4;
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}
.acd-item-meta {
  font-size: 11px;
  color    : #999;
  margin   : 0 0 10px;
}
.acd-item-row {
  display    : flex;
  align-items: center;
  justify-content: space-between;
}
.acd-qty {
  display    : flex;
  align-items: center;
  gap        : 8px;
  border     : 1px solid #e8e4df;
  border-radius: 20px;
  padding    : 3px 10px;
}
.acd-qty-btn {
  background: none;
  border    : none;
  cursor    : pointer;
  color     : #555;
  font-size : 16px;
  line-height: 1;
  padding   : 0;
  width     : 18px;
  text-align: center;
  transition: color .15s;
}
.acd-qty-btn:hover { color: var(--acd-accent); }
.acd-qty-btn:disabled { opacity: .3; cursor: default; }
.acd-qty-val {
  font-size  : 13px;
  font-weight: 500;
  color      : #2b2b2b;
  min-width  : 18px;
  text-align : center;
}
.acd-item-price {
  font-size  : 14px;
  font-weight: 600;
  color      : #2b2b2b;
}
.acd-item-remove {
  font-size      : 11px;
  color          : #bbb;
  text-decoration: none;
  cursor         : pointer;
  background     : none;
  border         : none;
  padding        : 4px 0 0;
  display        : block;
  text-align     : left;
  transition     : color .15s;
}
.acd-item-remove:hover { color: #c0392b; }

/* ── Footer ─────────────────────────────────────────────────── */
.acd-footer {
  flex-shrink  : 0;
  border-top   : 1px solid #f0ede8;
  padding      : 16px 22px 24px;
  background   : #fff;
}

/* ── Barre livraison offerte ────────────────────────────────── */
.acd-ship {
  background   : var(--acd-accent-light);
  border-radius: 8px;
  padding      : 10px 14px;
  margin-bottom: 14px;
}
.acd-ship-msg {
  font-size  : 12px;
  color      : var(--acd-accent-dark);
  margin     : 0 0 7px;
  line-height: 1.4;
}
.acd-ship-msg strong { font-weight: 600; }
.acd-ship-ok { color: var(--acd-accent-dark); font-weight: 500; }
.acd-ship-bar-wrap {
  height       : 5px;
  background   : color-mix(in srgb, var(--acd-accent) 25%, white);
  border-radius: 10px;
  overflow     : hidden;
}
.acd-ship-bar {
  height    : 5px;
  background: var(--acd-accent);
  border-radius: 10px;
  transition: width .4s ease;
}

/* ── Sous-total ─────────────────────────────────────────────── */
.acd-totals {
  display        : flex;
  justify-content: space-between;
  align-items    : baseline;
  margin-bottom  : 4px;
}
.acd-totals-label { font-size: 13px; color: #888; }
.acd-totals-val   { font-size: 18px; font-weight: 600; color: #2b2b2b; }
.acd-tax-note     { font-size: 11px; color: #bbb; margin: 0 0 14px; }

/* ── Bouton Commander ───────────────────────────────────────── */
.acd-btn-checkout {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  width          : 100%;
  padding        : 14px;
  background     : var(--acd-btn-checkout-bg);
  color          : var(--acd-btn-checkout-color) !important;
  text-decoration: none !important;
  border-radius  : 6px;
  font-size      : 14px;
  font-weight    : 600;
  letter-spacing : .04em;
  margin-bottom  : 8px;
  transition     : background .15s;
  border         : none;
}
.acd-btn-checkout:hover {
  background: var(--acd-btn-checkout-bg-hover) !important;
  color     : var(--acd-btn-checkout-color) !important;
}

/* ── Bouton Voir le panier ──────────────────────────────────── */
.acd-btn-cart {
  display        : block;
  width          : 100%;
  padding        : 11px;
  background     : #fff;
  color          : var(--acd-btn-cart-color);
  text-decoration: none;
  border         : 1px solid var(--acd-btn-cart-border);
  border-radius  : 6px;
  font-size      : 13px;
  text-align     : center;
  transition     : background .15s, border-color .15s;
}
.acd-btn-cart:hover { background: #f8f5f1; border-color: #ccc; }

/* ── Body no-scroll quand drawer ouvert ─────────────────────── */
body.als-cart-open { overflow: hidden; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #als-cart-drawer { width: 100vw; max-width: 100vw; }
}

/* ── Toast "produit ajouté" ─────────────────────────────────── */
.acd-toast {
  position        : absolute;
  top             : 0;
  left            : 0;
  right           : 0;
  background      : var(--als-accent, #7a9e3c);
  color           : #fff;
  text-align      : center;
  font-size       : 13px;
  font-weight     : 600;
  padding         : 10px 16px;
  z-index         : 10;
  opacity         : 0;
  transform       : translateY(-100%);
  transition      : opacity .25s ease, transform .25s ease;
  pointer-events  : none;
}
.acd-toast--in {
  opacity   : 1;
  transform : translateY(0);
}