/* =========================================================
   PROLIFIQUE RECORDS — cart button + side panel (every page)
   ========================================================= */

/* nav: cart button sits with "Écris-nous" / "Menu" on the right */
.nav__end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav__end .nav__cta, .nav__end .nav__burger { justify-self: auto; }
.nav__cart {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 0;
}
.nav__cart-n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: inline-grid; place-items: center;
  background: var(--white); color: var(--onyx); font-size: 12px; letter-spacing: 0;
}

/* panel */
.cart { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.cart.is-open { pointer-events: auto; }
.cart__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.cart.is-open .cart__shade { opacity: 1; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: #151515; color: var(--white); border-left: 1px solid var(--faint);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.cart.is-open .cart__panel { transform: none; }
html.cart-open { overflow: hidden; }

.cart__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--faint); }
.cart__title { font-size: 22px; font-weight: 700; }
.cart__close { font-size: 14px; font-weight: 700; padding: 8px 0; }

.cart__list { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--faint); }
.cart__item img { width: 72px; height: 72px; object-fit: cover; background: #e9e7e2; }
.cart__name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.cart__note { font-size: 13px; color: #a8a8a8; margin-top: 2px; }
.cart__price { font-size: 16px; font-weight: 700; white-space: nowrap; }
.cart__qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cart__qty button[data-step] {
  width: 32px; height: 32px; border: 1px solid rgba(254, 254, 254, .35); border-radius: 50%;
  font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.cart__qty button[data-step]:disabled { opacity: .3; cursor: default; }
.cart__qty span { min-width: 18px; text-align: center; font-weight: 700; }
.cart__remove { margin-left: 6px; font-size: 13px; color: #a8a8a8; text-decoration: underline; text-underline-offset: 3px; }

.cart__empty { display: none; padding: 40px 24px; font-size: 16px; color: #bdbdbd; }
.cart.is-empty .cart__empty { display: block; }
.cart.is-empty .cart__foot { display: none; }

.cart__foot { padding: 20px 24px 28px; border-top: 1px solid var(--faint); display: grid; gap: 10px; }
.cart__line { display: flex; justify-content: space-between; font-size: 18px; }
.cart__ship { font-size: 13px; color: #a8a8a8; }
.cart__pay {
  min-height: 52px; margin-top: 6px; background: var(--white); color: var(--onyx);
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
.cart__pay:disabled { opacity: .6; }
.cart__msg { font-size: 13px; color: #bdbdbd; min-height: 1em; }

@media (max-width: 720px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto; } /* phones: brand on the left, cart + menu on the right */
  .nav__end { gap: 14px; grid-column: 2; }
  .nav__cart-l { display: none; } /* phones: the count alone, the brand name keeps its room */
  .nav__cart-n { min-width: 26px; height: 26px; border-radius: 13px; font-size: 13px; }
  .cart__panel { width: 100%; border-left: 0; }
}

.cart__mail { font-size: 13px; color: #a8a8a8; text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
html[data-theme="blanc"] .cart__mail { color: #666; }

/* message shown back from Stripe */
.cart-note {
  margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--faint); border-radius: 10px;
  font-size: 16px; line-height: 1.45;
}
.cart-note.is-ok { border-color: #2e7d32; }

/* products come from Stripe */
.cart__noimg { width: 72px; height: 72px; background: #e9e7e2; }
.cart__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart__wait { padding: 24px 0; font-size: 15px; color: var(--dim); }
.cart.is-loading .cart__pay { opacity: .5; pointer-events: none; }
.cart__terms { font-size: 12px; color: #8a8a8a; }
.cart__terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }