/* =========================================================
   CHECKOUT 2.0 — Resumen de carrito (CSS completo)
   Estructura esperada:
   .checkout-summary(.footer-right | .footer-wide)
     .cs-item
       .cs-main
         .cs-title (.cs-brand img + .cs-name)
       .cs-qty
       .cs-prices
         .cs-line.cs-total (.lbl + .val)
     .cs-footer (.row, .grand)
   ========================================================= */

/* Lista de tarjetas */
.checkout-summary{
  display: grid;
  gap: 12px;
}

/* Tarjeta de ítem */
.checkout-summary .cs-item{
  border: 1px solid #eaeaea;
  border-radius: 12px;
  background: #fff;
  padding: 12px 16px;
}

/* Columna izquierda: logo + título en la misma línea */
.checkout-summary .cs-main{ margin: 0; }
.checkout-summary .cs-title{
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkout-summary .cs-brand{ display: flex; align-items: center; }
.checkout-summary .cs-brand img{
  height: 18px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}
.checkout-summary .cs-name{
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

/* Columna centro: cantidad */
.checkout-summary .cs-qty{
  font-size: .95rem;
  opacity: .85;
}

/* Columna derecha: subtotal */
.checkout-summary .cs-prices{
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.checkout-summary .cs-line{
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.checkout-summary .cs-total{
  margin-top: 0;
  padding-top: 0;
  border: 0;
}
.checkout-summary .cs-total .lbl{ opacity: .85; }
.checkout-summary .cs-line .val{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Totales (card propio) */
.checkout-summary .cs-footer{
  width: 100%;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: grid;
  gap: 6px;
}
.checkout-summary .cs-footer .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.checkout-summary .cs-footer .grand{
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #eee;
  font-size: 1.06rem;
  font-weight: 700;
}

/* Variante A (elegida): footer compacto alineado a la derecha */
.checkout-summary.footer-right .cs-footer{
  justify-self: end;
  width: clamp(420px, 46%, 560px);
  text-align: right;
}
.checkout-summary.footer-right .cs-footer .row{
  justify-content: flex-end;
  gap: 16px;
}

/* Variante B: footer expandido a todo el ancho (opcional) */
.checkout-summary.footer-wide .cs-footer{
  width: 100%;
  text-align: inherit;
}

/* ============================
   Desktop: 3 columnas fijas
   [logo+titulo] | [cantidad] | [subtotal]
   ============================ */
@media (min-width: 992px){
  .checkout-summary .cs-item{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 240px;
    grid-template-areas: "left mid right";
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
  }
  .checkout-summary .cs-main   { grid-area: left; }
  .checkout-summary .cs-qty    { grid-area: mid;  justify-self: center; text-align: center; font-weight: 600; }
  .checkout-summary .cs-prices { grid-area: right; justify-self: end; margin: 0; }
  .checkout-summary .cs-prices .cs-line{ gap: 8px; }
  .checkout-summary .cs-footer{ padding: 18px 24px; }
}
/* FIX: estabilizar 3 columnas y evitar que el título colapse a 0px */
@media (min-width: 992px){
  /* izquierda (logo+título) | centro (cantidad) | derecha (subtotal) */
  .checkout-summary .cs-item{
    grid-template-columns: minmax(320px, 1fr) 120px minmax(180px, 240px);
    /* ↑ la izquierda nunca baja de 320px; derecha entre 180–240px */
  }

  /* el título no se corta letra por letra */
  .checkout-summary .cs-name{
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}
/* Logo antes del título en la misma línea */
.checkout-summary .cs-title{
  display:flex; align-items:center; gap:8px;
}
.checkout-summary .cs-title .cs-brand{
  order:-1;              /* ← mueve el logo antes del nombre */
}