/* ============================================================
   CARRITO — estilos del cajón en verificar.html y como-usar.html
   ============================================================
   Esas páginas heredaron el contenedor del cajón (.cart-overlay/.cart-drawer/
   .cd-header/.cd-body/.cd-footer) pero NUNCA los estilos de las líneas del carrito,
   porque hasta ahora su cajón era un cartel fijo de "vacío". Ahora que cart-mini.js
   pinta los ítems reales, hacen falta acá. Son los mismos valores que styles.css usa
   en el home, apoyados en las variables de marca que ambas páginas ya definen
   (--serif, --mono, --green2, --cream, --border, --muted, --txt).
   ============================================================ */

.cd-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px; color: var(--muted);
  text-align: center; flex-direction: column; gap: 8px; padding: 24px;
}

.cd-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cd-item:last-child { margin-bottom: 0; }
.cd-item-info { flex: 1; min-width: 0; }
.cd-item-name { font-family: var(--serif); font-size: 16px; color: var(--green2); margin-bottom: 2px; }
.cd-item-cat { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.cd-item-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.cd-qty-btn {
  position: relative; width: 24px; height: 24px;
  border: 1px solid var(--border); background: none; cursor: pointer;
  color: var(--txt); font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
/* Expande el área táctil a 44px sin agrandar el botón visible (mismo truco que el home). */
.cd-qty-btn::before { content: ''; position: absolute; inset: -10px; }
.cd-qty-btn:hover { background: var(--green2); color: var(--cream); border-color: var(--green2); }
.cd-qty-num { font-family: var(--mono); font-size: 13px; color: var(--txt); min-width: 20px; text-align: center; }

/* Subtotal de la línea — no existe en el cajón del home; se agrega acá porque el
   cliente necesita ver cuánto suma cada presentación antes de pedir por WhatsApp. */
.cd-item-line { font-family: var(--mono); font-size: 11px; color: var(--green2); margin-left: auto; }

.cd-item-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; margin-left: 8px; transition: color .2s; }
.cd-item-remove:hover { color: var(--txt); }

.cd-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.cd-total-label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.cd-total-val { font-family: var(--serif); font-size: 22px; color: var(--green2); }

/* Foco de teclado visible en todo el sitio. Sin esto, quien navega con Tab (o con
   lector de pantalla) no tiene forma de saber qué control está seleccionado.
   :focus-visible y no :focus para no dibujar el anillo en clicks de mouse. */
:focus-visible { outline: 2px solid var(--gold, #9a7f5a); outline-offset: 2px; }

/* Aviso por línea del carrito: producto retirado, agotado o con el precio cambiado
   desde que se agregó. Se marca en vez de borrar la línea (ver cartIssues). */
.cd-item-warn {
  flex-basis: 100%;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  color: #b0552f; text-transform: uppercase;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(176,85,47,.35);
}