/* =========================
   CART LIST (DESKTOP FIRST)
========================= */

.cart-list-section.container{
  max-width: 1300px;
}

/* === TITULO PRINCIPAL === */
.page-title-wrapper .page-title{
  position: relative;
  display: inline-block;
  font-family: var(--font-title);
  font-size: 2.5rem;
}
.page-title-wrapper .page-title::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:3px;
  background: var(--text-background-lineaDegradada);
  border-radius:3px;
}

/* === LAYOUT PRINCIPAL === */
.cart-page-wrapper{
  display:flex;
  gap:20px;
}
.cart-page-main{ flex:1; }
.cart-page-summary{ flex:0 0 280px; }

/* === WRAPPER TABLA === */
.cart-table-wrapper{
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:auto;          /* 1 solo overflow */
  max-height:480px;
  margin-bottom:20px;
}

/* === TABLA === */
.table-cart{
  width:100%;
  min-width:900px;        /* desktop: scroll horizontal si hace falta */
  border-collapse:collapse;
}

.table-cart th,
.table-cart td{
  padding:10px 8px;
  border-bottom:1px solid #eee;
  font-size:14px;
  white-space:nowrap;
  vertical-align: middle;
}

.table-cart th{
  font-weight:600;
  background:#fafafa;
}

.text-center{ text-align:center; }
.text-right{ text-align:right; }

/* === RESUMEN === */
.summary-box{
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  padding:16px;
  margin-bottom:20px;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  font-size:15px;
}

/* === BOTONES === */
.btn-primary{
  background-color: var(--primary-color, #0d6efd);
  border:none;
  padding:10px;
  font-size:16px;
  border-radius:10px;
  font-weight:600;
  transition: background .2s ease-in-out;
}
.btn-primary:hover{
  background-color: var(--secondary-color);
}

/* === PRODUCTO: IMAGEN + NOMBRE === */
.page-cart-product{
  display:flex;
  align-items:center;
  gap:10px;
}

.page-cart-img{
  width:60px;
  flex-shrink:0;
}
.page-cart-img img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:6px;
  border:1px solid #eee;
  background:#fff;
}

.page-cart-prodinfo{
  min-width:0;
}

.page-cart-name{
  display:inline-block;
  font-size:14px;
  color:#333;
  text-decoration:none;
}
.page-cart-name:hover{
  color: var(--primary-color);
}

/* Desktop: no mostrar meta móvil */
.page-cart-mobile-meta{ display:none; }

/* === MARCA === */
.page-cart-brand{
  font-size:13px;
  color:#333;
}
.page-cart-brand--desktop{
  display:inline-block;
}

/* === UXB (tu HTML usa form-control + page-cart-uxb / page-cart-uxb-sin) === */
.page-cart-uxb{
  width: 140px;
  max-width: 100%;
  height: 30px;
  border-radius: 8px;
}

.page-cart-uxb-sin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 140px;
  max-width: 100%;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  background:#f8f9fa;
  font-size: 13px;
}

/* === CANTIDAD === */
.page-cart-qty{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.btn-qty{
  width:26px;
  height:26px;
  border:1px solid #ccc;
  background:#f7f7f7;
  border-radius:4px;
  padding:0;
  line-height:1;
  font-size:14px;
}

.page-cart-qty-input{
  width:48px;
  text-align:center;
  border:1px solid #ccc;
  border-radius:4px;
  height:26px;
  font-size:13px;
}

/* === SUBTOTAL WRAP === */
.page-cart-subtotal-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

/* === TRASH === */
.btn-remove-row{
  border:none;
  background:transparent;
  color:#c0392b;
  cursor:pointer;
  padding:0;
}
.btn-remove-row i{ font-size:16px; }

/* =====================================
   MOBILE (solo < 768px)
   - mantiene tabla
   - reordena el TR como grid
   - oculta marca/trash de columnas
   - muestra marca/trash dentro de producto
===================================== */
@media (max-width: 768px){

  /* layout general */
  .cart-page-wrapper{ flex-direction: column; }
  .cart-page-summary{ flex: 1 1 auto; }

  /* en móvil no conviene scroll interno */
  .cart-table-wrapper{
    max-height: none;
  }

  /* tabla sin min-width */
  .table-cart{
    min-width: 0 !important;
  }

  /* ocultar encabezado */
  .table-cart thead{ display:none; }

  /* el TR se maqueta como grid */
  .table-cart tbody tr.page-cart-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "prod prod"
      "uxb  uxb"
      "precio qty"
      "subtotal subtotal";
    gap:10px;
    padding:12px 12px 14px;
    border-bottom:1px solid #eee;
  }

  /* td como bloques */
  .table-cart tbody tr.page-cart-row > td{
    display:block;
    width:100%;
    padding:0 !important;
    border:0 !important;
    white-space: normal;
  }

  /* asignación por clases (NO nth-child) */
  .td-prod{ grid-area: prod; }
  .td-uxb{ grid-area: uxb; }
  .td-qty{ grid-area: qty; }
  .td-precio{ grid-area: precio; text-align:left !important; }
  .td-subtotal{ grid-area: subtotal; text-align:left !important; }

  /* ocultar columnas desktop */
  .td-brand,
  .td-trash{ display:none !important; }

  /* producto */
  .page-cart-product{ align-items:flex-start; }
  .page-cart-img{ width:56px; }
  .page-cart-img img{ border-radius:10px; }

  .page-cart-name{
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
    line-height:1.25;
  }

  /* mostrar meta móvil (marca + trash) */
  .page-cart-mobile-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:6px;
  }
  .page-cart-mobile-meta .page-cart-brand{
    font-size:12px;
    opacity:.8;
  }
  .btn-remove-row--mobile i{ font-size:18px; }

  /* uxb full */
  .page-cart-uxb,
  .page-cart-uxb-sin{
    width:100%;
    height:38px;
    border-radius:10px;
  }
  .page-cart-uxb-sin{
    justify-content:flex-start;
    padding: 0 10px;
  }

  /* qty grande y prolijo */
  .page-cart-qty{
    width:100%;
    display:grid;
    grid-template-columns: 38px 1fr 38px;
    gap:6px;
    align-items:center;
  }
  .btn-qty{
    width:38px;
    height:38px;
    border-radius:10px;
  }
  .page-cart-qty-input{
    width:100%;
    height:38px;
    border-radius:10px;
  }

  /* subtotal como total del item */
  .td-subtotal .page-cart-subtotal-wrap{
    justify-content:flex-start;
  }
  .td-subtotal .page-cart-subtotal{
    font-weight:700;
  }

  /* si NO hay precios, reacomodar y ocultar celdas */
  body[data-mostrar-precio="false"] .table-cart tbody tr.page-cart-row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "prod"
      "uxb"
      "qty";
  }
  body[data-mostrar-precio="false"] .td-precio,
  body[data-mostrar-precio="false"] .td-subtotal{
    display:none !important;
  }
}