/* ==========================================================================
 * Pharma Click & Collect — Panier (front) · refonte UI/UX
 * Snazzy Digital Agency — direction artistique « Pharmacie So Ouest »
 * ========================================================================== */
.pcc-root {
  --green: #2dad69; --green-deep: #15703f; --green-ink: #0e3d23; --green-900: #0e4f2c;
  --lime: #d6f25c; --lime-soft: #eef7c8; --gold: #ffcf3f;
  --cream: #fcfff0; --paper: #ffffff; --wash: #f3fae6;
  --ink: #14241c; --body: #5f7166; --line: #e6f0d8;
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px;
  --sh-sm: 0 6px 18px -10px rgba(14,79,44,.35);
  --sh-md: 0 24px 60px -34px rgba(14,79,44,.55);
  --ease: cubic-bezier(.16,1,.3,1); --ease-back: cubic-bezier(.34,1.56,.64,1);
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
}
.pcc-root *, .pcc-root *::before, .pcc-root *::after { box-sizing: border-box; }
.pcc-root button { font-family: inherit; -webkit-appearance: none; appearance: none; }
.pcc-root button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---- bouton flottant ---- */
.pcc-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 99990;
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(145deg, #34c578, #15703f); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 18px 36px -12px rgba(14,79,44,.75); transition: transform .3s var(--ease-back);
}
.pcc-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(45,173,105,.5); animation: pcc-ping 2.6s var(--ease) infinite; }
@keyframes pcc-ping { 0% { box-shadow: 0 0 0 0 rgba(45,173,105,.45); } 70%,100% { box-shadow: 0 0 0 16px rgba(45,173,105,0); } }
.pcc-fab svg { width: 27px; height: 27px; position: relative; z-index: 1; }
.pcc-fab:hover { transform: translateY(-3px) scale(1.05); }
.pcc-fab__count {
  position: absolute; top: -5px; right: -5px; min-width: 25px; height: 25px; padding: 0 6px; z-index: 2;
  background: var(--gold); color: #4a3700; border-radius: 100px; font-size: 12px; font-weight: 700;
  display: grid; place-items: center; border: 2.5px solid #fff;
}

/* ---- overlay + drawer ---- */
.pcc-overlay { position: fixed; inset: 0; z-index: 99991; background: rgba(10,40,24,.45); backdrop-filter: blur(3px); animation: pcc-fade .35s; }
@keyframes pcc-fade { from { opacity: 0; } }
.pcc-drawer {
  position: fixed; top: 0; right: 0; z-index: 99992; height: 100%; width: min(440px, 100%);
  background: var(--cream); display: flex; flex-direction: column;
  transform: translateX(106%); transition: transform .46s var(--ease);
  box-shadow: -40px 0 90px -50px rgba(14,79,44,.7);
}
.pcc-drawer.is-open { transform: none; }

/* header */
.pcc-dh { position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; color: #fff;
  background: radial-gradient(120% 180% at 100% 0%, #3ad080 0%, transparent 55%), linear-gradient(135deg, #2dad69, #0e4f2c); }
.pcc-dh__t { font-family: 'Jost', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.pcc-close { width: 40px; height: 40px; border: none; background: transparent; color: #fff; cursor: pointer; padding: 0; display: inline-grid; place-items: center; opacity: .9; transition: transform .35s var(--ease-back), opacity .2s; }
.pcc-close svg { width: 20px; height: 20px; display: block; }
.pcc-close:hover { transform: rotate(90deg) scale(1.15); opacity: 1; }

.pcc-view { flex: 1; overflow-y: auto; padding: 22px; }
.pcc-view[hidden] { display: none; }

/* ---- items ---- */
.pcc-empty { text-align: center; color: var(--body); padding: 56px 20px; }
.pcc-empty__ico { font-size: 46px; display: block; margin-bottom: 14px; opacity: .85; }
.pcc-empty p { font-family: 'Jost', sans-serif; font-size: 17px; font-weight: 600; color: var(--green-ink); margin: 0 0 5px; }
.pcc-empty small { font-size: 13px; color: var(--body); }
.pcc-items { display: flex; flex-direction: column; gap: 12px; }
.pcc-item { display: flex; gap: 13px; align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px; box-shadow: var(--sh-sm); transition: transform .25s var(--ease); }
.pcc-item:hover { transform: translateY(-2px); }
.pcc-item__img { width: 60px; height: 60px; flex: none; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); object-fit: contain; padding: 6px; }
.pcc-item__em { width: 60px; height: 60px; flex: none; border-radius: var(--r-sm); background: var(--wash); display: grid; place-items: center; font-size: 28px; }
.pcc-item__main { flex: 1; min-width: 0; }
.pcc-item__name { font-size: 14.5px; font-weight: 600; color: var(--green-ink); line-height: 1.22; }
.pcc-item__price { font-size: 13.5px; color: var(--green-deep); font-weight: 700; margin-top: 2px; }
.pcc-qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; background: var(--cream); }
.pcc-qty button { width: 28px; height: 28px; border: none; background: transparent; color: var(--green-deep); font-size: 17px; cursor: pointer; line-height: 1; transition: background .15s; }
.pcc-qty button:hover { background: var(--lime-soft); }
.pcc-qty span { min-width: 32px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pcc-item__rm { background: transparent; border: none; color: #b6c2b8; cursor: pointer; width: 28px; height: 28px; padding: 0; align-self: flex-start; display: grid; place-items: center; opacity: .9; transition: transform .3s var(--ease-back), color .2s, opacity .2s; }
.pcc-item__rm svg { width: 16px; height: 16px; display: block; }
.pcc-item__rm:hover { color: var(--green-deep); transform: rotate(90deg); opacity: 1; }

/* ---- footer panier ---- */
.pcc-foot { border-top: 1px dashed var(--line); padding-top: 18px; margin-top: 20px; }
.pcc-sub { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--ink); font-weight: 500; }
.pcc-sub b { font-family: 'Jost', sans-serif; font-size: 24px; font-weight: 700; color: var(--green-deep); }
.pcc-note { font-size: 12.5px; color: var(--body); margin: 8px 0 16px; }

/* boutons */
.pcc-btn { width: 100%; border: none; cursor: pointer; border-radius: 100px; padding: 15px; font-family: 'Jost', sans-serif;
  font-size: 15.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .25s var(--ease-back), box-shadow .25s, background .2s; }
.pcc-btn--go { background: linear-gradient(135deg, #2dad69, #15703f); color: #fff; box-shadow: 0 16px 32px -16px rgba(14,79,44,.85); }
.pcc-btn--go:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(14,79,44,.9); }
.pcc-btn--go:disabled { opacity: .6; transform: none; cursor: default; }
.pcc-btn--ghost { background: #fff; border: 1.5px solid var(--line); color: var(--green-deep); }
.pcc-btn--ghost:hover { border-color: var(--green); background: var(--wash); }
.pcc-arr { transition: transform .2s; }
.pcc-btn--go:hover .pcc-arr { transform: translateX(3px); }

/* liens texte (retour / changer) — jamais de rose, fond transparent forcé */
.pcc-back, .pcc-change { background: transparent !important; border: none; box-shadow: none !important; padding: 0;
  color: var(--green-deep); font-family: 'Jost', sans-serif; font-weight: 600; font-size: 13.5px; cursor: pointer; margin-bottom: 16px; transition: color .15s, transform .15s; }
.pcc-back:hover, .pcc-change:hover { color: var(--green); transform: translateX(-2px); }
.pcc-change { font-size: 12.5px; color: var(--body); }
.pcc-change:hover { color: var(--green-deep); }

/* ---- titres / textes ---- */
.pcc-h3 { font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 700; color: var(--green-ink); margin: 0 0 5px; letter-spacing: -.01em; }
.pcc-sub-txt { font-size: 13.5px; color: var(--body); margin: 0 0 18px; line-height: 1.5; }

/* ---- étape : choix client ---- */
.pcc-choice { display: flex; flex-direction: column; gap: 13px; }
.pcc-choice__btn { display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 16px 18px;
  cursor: pointer; text-align: left; box-shadow: var(--sh-sm); transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; width: 100%; }
.pcc-choice__btn:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 22px 44px -26px rgba(14,79,44,.55); }
.pcc-choice__ico { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--wash); display: grid; place-items: center; font-size: 24px; }
.pcc-choice__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcc-choice__btn b { font-family: 'Jost', sans-serif; font-size: 16px; color: var(--green-ink); font-weight: 600; }
.pcc-choice__btn small { font-size: 12.5px; color: var(--body); }
.pcc-choice__chev { color: var(--green); font-size: 18px; font-weight: 700; transition: transform .2s; flex: none; }
.pcc-choice__btn:hover .pcc-choice__chev { transform: translateX(4px); }

/* bannière nouveau client (réduction) */
.pcc-nc-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #e4fa7c, #c9ee49);
  color: var(--green-900); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px;
  box-shadow: 0 14px 30px -18px rgba(157,196,42,.95); border: 1px solid rgba(120,160,30,.22); }
.pcc-nc-banner[hidden] { display: none; }
.pcc-nc-gift { width: 46px; height: 46px; flex: none; border-radius: 50%; background: rgba(255,255,255,.6); display: grid; place-items: center; font-size: 23px; }
.pcc-nc-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
.pcc-nc-txt b { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 700; }
.pcc-nc-txt small { font-size: 12.5px; font-weight: 500; opacity: .82; }
.pcc-nc-txt sup { font-size: .62em; }

/* ---- formulaires ---- */
.pcc-form { display: flex; flex-direction: column; gap: 15px; }
.pcc-row2 { display: flex; gap: 12px; }
.pcc-lab { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--green-deep); letter-spacing: .05em; text-transform: uppercase; flex: 1; }
.pcc-lab input { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; font-weight: 500; color: var(--ink); font-family: 'Jost', sans-serif; letter-spacing: normal; text-transform: none; transition: border-color .18s, box-shadow .18s; }
.pcc-lab input::placeholder { color: #b3c0b2; font-weight: 400; }
.pcc-lab input:hover { border-color: #cfe3bd; }
.pcc-lab input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(45,173,105,.15); }
.pcc-err { background: #fdeceb; color: #b3382b; border: 1px solid #f3c9c4; border-radius: var(--r-sm); padding: 11px 14px; font-size: 13px; font-weight: 500; margin: 0; }
.pcc-mini { font-size: 11.5px; color: #9fb09a; text-align: center; margin: 6px 0 0; line-height: 1.5; }

/* ---- confirmation ---- */
.pcc-view--confirm { text-align: center; }
.pcc-ok { width: 62px; height: 62px; margin: 10px auto 16px; border-radius: 50%; background: var(--lime); color: var(--green-900);
  display: grid; place-items: center; font-size: 32px; font-weight: 700; box-shadow: 0 14px 30px -14px rgba(157,196,42,.9); animation: pcc-pop .45s var(--ease-back); }
@keyframes pcc-pop { from { transform: scale(.3); opacity: 0; } }
.pcc-qr { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: inline-block; margin: 8px 0 14px; box-shadow: var(--sh-md); }
.pcc-qr img { display: block; width: 220px; height: 220px; }
.pcc-code { font-family: 'Jost', sans-serif; font-size: 15px; letter-spacing: .16em; font-weight: 700; color: var(--green-deep); }
.pcc-promo-tag { display: inline-flex; align-items: center; gap: 8px; margin: 14px auto 0; background: linear-gradient(120deg, var(--lime), #c9ee49);
  color: var(--green-900); border-radius: 100px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; }
.pcc-promo-tag[hidden] { display: none; }
.pcc-mail { font-size: 13px; color: var(--body); margin: 14px 0 0; line-height: 1.5; }
.pcc-pharma { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; margin: 18px 0; font-size: 13.5px; color: var(--ink); line-height: 1.7; text-align: left; }
.pcc-pharma b { color: var(--green-deep); }

@media ( max-width: 480px ) {
  .pcc-row2 { flex-direction: column; }
  .pcc-fab { right: 16px; bottom: 16px; }
  .pcc-drawer { width: 100%; }
}

/* ==========================================================================
 * BLINDAGE ANTI-THÈME — neutralise tout style de bouton hérité (Astra/Elementor)
 * (le rose/magenta venait des hover de <button> du thème)
 * Sélecteurs par ID (#pccDrawer / #pccFab) + !important pour gagner la spécificité.
 * ========================================================================== */
#pccDrawer button, #pccFab {
  font-family: 'Jost', sans-serif !important;
  text-transform: none !important; letter-spacing: normal !important;
  text-shadow: none !important; text-decoration: none !important;
  -webkit-appearance: none !important; appearance: none !important;
  outline: none !important; filter: none !important;
}
/* CTA principal */
#pccDrawer .pcc-btn--go,
#pccDrawer .pcc-btn--go:hover,
#pccDrawer .pcc-btn--go:focus,
#pccDrawer .pcc-btn--go:active {
  background: linear-gradient(135deg,#2dad69,#15703f) !important;
  border: none !important; color: #fff !important;
}
#pccDrawer .pcc-btn--go:hover { background: linear-gradient(135deg,#34c578,#0e4f2c) !important; }
/* bouton fantôme */
#pccDrawer .pcc-btn--ghost,
#pccDrawer .pcc-btn--ghost:focus,
#pccDrawer .pcc-btn--ghost:active { background:#fff !important; border:1.5px solid #e6f0d8 !important; color:#15703f !important; box-shadow:none !important; }
#pccDrawer .pcc-btn--ghost:hover { background:#f3fae6 !important; border-color:#2dad69 !important; color:#15703f !important; }
/* liens texte : retour / changer — toujours transparent, jamais de rose */
#pccDrawer .pcc-back, #pccDrawer .pcc-change,
#pccDrawer .pcc-back:hover, #pccDrawer .pcc-change:hover,
#pccDrawer .pcc-back:focus, #pccDrawer .pcc-change:focus,
#pccDrawer .pcc-back:active, #pccDrawer .pcc-change:active {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
#pccDrawer .pcc-back { color:#15703f !important; }
#pccDrawer .pcc-back:hover { color:#2dad69 !important; }
#pccDrawer .pcc-change { color:#5f7166 !important; }
#pccDrawer .pcc-change:hover { color:#15703f !important; }
/* cartes de choix client */
#pccDrawer .pcc-choice__btn,
#pccDrawer .pcc-choice__btn:focus,
#pccDrawer .pcc-choice__btn:active { background:#fff !important; border:1.5px solid #e6f0d8 !important; color:#0e3d23 !important; }
#pccDrawer .pcc-choice__btn:hover { background:#fff !important; border-color:#2dad69 !important; color:#0e3d23 !important; }
/* quantités + suppression */
#pccDrawer .pcc-qty button,
#pccDrawer .pcc-qty button:focus,
#pccDrawer .pcc-qty button:active { background:transparent !important; border:none !important; color:#15703f !important; box-shadow:none !important; }
#pccDrawer .pcc-qty button:hover { background:#eef7c8 !important; color:#15703f !important; }
#pccDrawer .pcc-item__rm,
#pccDrawer .pcc-item__rm:focus,
#pccDrawer .pcc-item__rm:active { background:transparent !important; border:none !important; color:#b6c2b8 !important; box-shadow:none !important; }
#pccDrawer .pcc-item__rm:hover { background:transparent !important; color:#15703f !important; }
/* croix de fermeture : juste une croix animée, fond transparent */
#pccDrawer .pcc-close,
#pccDrawer .pcc-close:hover,
#pccDrawer .pcc-close:focus,
#pccDrawer .pcc-close:active { background:transparent !important; border:none !important; box-shadow:none !important; color:#fff !important; }
/* bouton flottant : garder le dégradé vert quoi qu'en dise le thème */
#pccFab, #pccFab:hover, #pccFab:focus, #pccFab:active { background: linear-gradient(145deg,#34c578,#15703f) !important; border:none !important; color:#fff !important; box-shadow: 0 18px 36px -12px rgba(14,79,44,.75) !important; }