/* Product.ma — panier & commandes (front) */
:root{
  --pmax-blue:#0F4C81;
  --pmax-blue2:#1668A8;
  --pmax-orange:#F97316;
  --pmax-dark:#0B1F33;
  --pmax-ink:#1e293b;
  --pmax-muted:#64748b;
  --pmax-line:#e2e8f0;
  --pmax-wa:#25D366;
}

/* ---------- bouton ajouter au panier sur la carte ---------- */
.pmax-add{
  display:block;width:100%;margin-bottom:8px;
  background:var(--pmax-orange);color:#fff;border:0;
  padding:11px 14px;border-radius:10px;
  font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;
  transition:filter .15s;
}
.pmax-add:hover{filter:brightness(1.07)}
.pmax-add.locked{background:#eef2f7;color:var(--pmax-blue);border:1px solid var(--pmax-line)}

.pmax-hint{display:block;margin-top:5px;font-size:12px;color:var(--pmax-muted)}
.pmax-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- confirmation d'ajout ---------- */
.pmax-toast{
  position:fixed;z-index:9998;left:50%;bottom:24px;transform:translate(-50%,16px);
  width:min(420px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--pmax-line);border-radius:16px;
  box-shadow:0 18px 44px -18px rgba(11,31,51,.45);
  padding:16px;opacity:0;transition:opacity .22s,transform .22s;
  font-family:inherit;color:var(--pmax-ink);
}
.pmax-toast.in{opacity:1;transform:translate(-50%,0)}
.pmax-toast .tt{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pmax-toast .em{font-size:28px;line-height:1}
.pmax-toast .tt div{display:flex;flex-direction:column;min-width:0}
.pmax-toast .tt strong{font-size:15px;color:#16794c}
.pmax-toast .tt span{font-size:13px;color:var(--pmax-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmax-toast .tb{display:flex;gap:10px}
.pmax-toast .btn{flex:1;padding:11px 12px;border-radius:10px;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px}
.pmax-toast .btn.ghost{background:#eef2f7;color:var(--pmax-blue)}
.pmax-toast .btn.primary{background:var(--pmax-blue);color:#fff}

/* ---------- bouton flottant ---------- */
.pmax-fab{
  position:fixed;z-index:9990;right:18px;bottom:18px;left:auto;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--pmax-blue);color:#fff;
  box-shadow:0 10px 26px -10px rgba(11,31,51,.6);
  display:none;align-items:center;justify-content:center;font-size:22px;
}
.pmax-fab.has{display:flex}
.pmax-fab .n{
  position:absolute;top:-4px;right:-4px;
  background:var(--pmax-orange);color:#fff;
  min-width:22px;height:22px;border-radius:11px;
  font-size:12px;font-weight:700;font-family:system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}

/* ---------- tiroir ---------- */
.pmax-back{
  position:fixed;inset:0;z-index:9994;background:rgba(11,31,51,.45);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.pmax-back.open{opacity:1;pointer-events:auto}
.pmax-drawer{
  position:fixed;z-index:9995;top:0;bottom:0;right:0;
  width:min(420px,100vw);background:#fff;color:var(--pmax-ink);
  transform:translateX(105%);transition:transform .25s ease;
  display:flex;flex-direction:column;font-family:inherit;
  box-shadow:-18px 0 44px -24px rgba(11,31,51,.5);
}
.pmax-drawer.open{transform:translateX(0)}
.pmax-drawer header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--pmax-line);
  background:var(--pmax-blue);color:#fff;
}
.pmax-drawer header h3{margin:0;font-size:18px}
.pmax-drawer header .x{background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.pmax-drawer .body{flex:1;overflow-y:auto;padding:16px 18px 28px}

.pmax-empty,.pmax-done{text-align:center;color:var(--pmax-muted);padding:40px 10px;margin:0}
.pmax-done{color:#16794c;font-weight:700;font-size:16px}

.pmax-lines{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.pmax-lines li{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--pmax-line);border-radius:12px;padding:10px 12px;
}
.pmax-lines .em{font-size:22px;line-height:1}
.pmax-lines .mid{flex:1;min-width:0;display:flex;flex-direction:column}
.pmax-lines .mid strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmax-lines .pu{font-size:12px;color:var(--pmax-muted)}
.pmax-lines .qty{display:flex;align-items:center;gap:4px}
.pmax-lines .qty button{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--pmax-line);
  background:#f8fafc;cursor:pointer;font-size:15px;line-height:1;color:var(--pmax-ink);
}
.pmax-lines .qty input{
  width:46px;text-align:center;border:1px solid var(--pmax-line);border-radius:7px;
  padding:4px 2px;font-family:inherit;font-size:14px;color:var(--pmax-ink);
}
.pmax-lines .rm{background:transparent;border:0;color:var(--pmax-muted);cursor:pointer;font-size:14px}

.pmax-total{
  background:#f1f5f9;border-radius:12px;padding:12px 14px;margin-bottom:18px;
  font-size:14px;display:flex;justify-content:space-between;gap:10px;
}
.pmax-total strong{color:var(--pmax-blue)}

.pmax-form h4{margin:0 0 12px;font-size:15px}
.pmax-form label{display:block;margin-bottom:11px;font-size:13px;color:var(--pmax-muted)}
.pmax-form input,.pmax-form textarea{
  display:block;width:100%;margin-top:5px;
  border:1px solid var(--pmax-line);border-radius:9px;padding:10px 12px;
  font-family:inherit;font-size:14px;color:var(--pmax-ink);background:#fff;
}
.pmax-form input:focus,.pmax-form textarea:focus{outline:2px solid var(--pmax-blue2);outline-offset:1px;border-color:transparent}
.pmax-msg{min-height:18px;margin:4px 0 10px;font-size:13px}
.pmax-msg.err{color:#b91c1c}
.pmax-acts{display:flex;flex-direction:column;gap:9px}
.pmax-acts .btn{
  padding:13px 14px;border-radius:11px;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:15px;
}
.pmax-acts .btn.primary{background:var(--pmax-blue);color:#fff}
.pmax-acts .btn.wa{background:var(--pmax-wa);color:#06301a}
.pmax-acts .btn[disabled]{opacity:.6;cursor:default}

@media (max-width:480px){
  .pmax-drawer{width:100vw}
  .pmax-fab{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .pmax-toast,.pmax-drawer,.pmax-back{transition:none}
}