/* =============================================================================
   Carrito flotante: panel lateral con líneas editables, envío gratis, cupones, vales del Club y totales
   ========================================================================== */

.cdrawer { position: fixed; inset: 0; z-index: 400; }
.cdrawer[hidden] { display: none; }
.cd-overlay { position: absolute; inset: 0; background: rgba(10, 10, 12, .45); opacity: 0; transition: opacity .3s var(--ease); }
.cd-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100%); background: var(--paper); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .35s var(--ease); }
.cd-panel:focus { outline: none; }
.cdrawer.is-open .cd-overlay { opacity: 1; }
.cdrawer.is-open .cd-panel { transform: none; }
html.cd-lock { overflow: hidden; }

.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.cd-head h2 { font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.cd-count { font-size: 14px; color: var(--faint); font-weight: 500; }
.cd-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); transition: background var(--t), color var(--t); }
.cd-close:hover { background: var(--bg); color: var(--ink); }
.cd-close .i { width: 18px; height: 18px; }

/* Envío gratis (la barra es la misma que el recuadro de la cesta: .cb-bar en club.css y aquí) */
.cd-ship { padding: 14px 24px; background: var(--gold-soft); }
.cd-ship p { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.cd-ship.is-free { background: var(--ok-soft); }
.cd-ship.is-free p { color: var(--ok); }
.cd-ship.is-free .cb-bar span { background: var(--ok); }

.cd-body { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.cd-loading, .cd-empty { padding: 32px 0; color: var(--muted); text-align: center; }
.cd-empty .btn { margin-top: 16px; }

.cd-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cd-item:last-child { border-bottom: 0; }
.cd-item.is-busy { opacity: .55; pointer-events: none; }
.cd-img { display: grid; place-items: center; width: 64px; height: 80px; background: var(--bg); border-radius: 10px; overflow: hidden; }
.cd-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cd-info { min-width: 0; }
.cd-name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.cd-name:hover { color: var(--royal-deep); }
.cd-unit { display: block; margin-top: 2px; font-size: 13px; color: var(--faint); }
.cd-meta { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; } /* Tarjeta regalo: para quién, de quién, cuándo */
.cd-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cd-qty { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.cd-qty button { width: 32px; font-size: 17px; color: var(--muted); transition: background var(--t), color var(--t); }
.cd-qty button:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.cd-qty button:disabled { opacity: .35; cursor: not-allowed; }
.cd-qty input { width: 38px; border: 0; text-align: center; font: inherit; font-weight: 600; font-size: 14px; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.cd-qty input::-webkit-outer-spin-button, .cd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cd-remove { font-size: 13px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }
.cd-remove:hover { color: var(--err); }
.cd-line { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cd-extra { padding: 14px 24px 4px; border-top: 1px solid var(--line); }
.cd-coupon { display: flex; gap: 8px; }
.cd-coupon .field { height: 42px; text-transform: uppercase; }
.cd-coupon .field::placeholder { text-transform: none; }
.cd-coupon .btn { flex: none; height: 42px; }
.cd-msg { margin: 8px 0 0; font-size: 13.5px; color: var(--ok); }
.cd-msg.is-error { color: var(--err); }
.cd-applied { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cd-applied:empty { display: none; }
.cd-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; background: var(--ok-soft); color: var(--ok); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.cd-tag button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ok); }
.cd-tag button:hover { background: rgba(47, 107, 63, .14); }
.cd-tag .i { width: 10px; height: 10px; }
.cd-club { margin-top: 12px; padding: 12px 14px; background: var(--bg); border-radius: 12px; font-size: 13.5px; color: var(--muted); }
.cd-club:empty { display: none; }
.cd-club p { margin: 0; }
.cd-club b { color: var(--ink); }
.cd-club a { color: var(--royal-deep); font-weight: 600; }
.cd-club .cd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cd-club .cd-join { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.cd-club .cd-join .gbtn { height: 40px; font-size: 14px; color: #1F1F1F; }
.cd-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--gold); border-radius: var(--r-pill); background: var(--paper); color: var(--gold-ink) !important; font-size: 12.5px; font-weight: 700; transition: background var(--t); }
.cd-chip:hover { background: var(--gold-soft); }

.cd-foot { padding: 16px 24px 22px; border-top: 1px solid var(--line); background: var(--paper); }
.cd-totals { display: grid; gap: 6px; margin: 0 0 16px; font-size: 14px; }
.cd-totals div { display: flex; justify-content: space-between; gap: 12px; }
.cd-totals dt { color: var(--muted); }
.cd-totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-totals .is-discount dd { color: var(--ok); }
.cd-totals .is-total { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 17px; }
.cd-totals .is-total dt { color: var(--ink); font-weight: 600; }
.cd-totals small { display: block; font-size: 12px; font-weight: 400; color: var(--faint); text-align: right; }
.cd-link { display: block; margin-top: 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); }
.cd-link:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	.cd-overlay, .cd-panel { transition: none; }
}
@media (max-width: 480px) {
	.cd-head, .cd-ship, .cd-body, .cd-extra, .cd-foot { padding-inline: 18px; }
}