/* ==========================================
   CARRITO
========================================== */

body{

    margin:0;
    padding:0;

    background:#f5f7f9;

    font-family:Arial, Helvetica, sans-serif;

    color:#333;

}

/* ==========================================
HEADER
========================================== */

.header-producto{

    background:#0d6b36;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

}

.header-producto h1{

    margin:0;

    font-size:30px;

}

.volver{

    text-decoration:none;

    color:white;

    font-weight:bold;

    padding:12px 22px;

    border-radius:10px;

    background:rgba(255,255,255,.15);

    transition:.3s;

}

.volver:hover{

    background:white;

    color:#0d6b36;

}

/* ==========================================
CONTENEDOR
========================================== */

.contenedor-producto{

    width:95%;

    max-width:1400px;

    margin:40px auto;

}

.carrito-contenedor{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    align-items:start;

}

/* ==========================================
LISTA
========================================== */

.carrito-lista{

    background:white;

    border-radius:18px;

    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.carrito-lista h2{

    margin-top:0;

    margin-bottom:25px;

    color:#0d6b36;

    font-size:28px;

}
/* ==========================================
PRODUCTO DEL CARRITO
========================================== */

.item-carrito{

    display:grid;

    grid-template-columns:120px 1fr auto;

    gap:25px;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid #ececec;

}

.item-carrito:last-child{

    border-bottom:none;

}

/* ==========================================
IMAGEN
========================================== */

.item-carrito img{

    width:120px;

    height:120px;

    object-fit:contain;

    background:white;

    border:1px solid #e6e6e6;

    border-radius:14px;

    padding:10px;

    transition:.3s;

}

.item-carrito img:hover{

    transform:scale(1.05);

}

/* ==========================================
INFORMACIÓN
========================================== */

.item-info{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.item-info h3{

    margin:0;

    font-size:22px;

    color:#222;

    font-weight:700;

    line-height:1.4;

}

.item-info p{

    margin:0;

    color:#666;

    font-size:15px;

}

.item-precio{

    font-size:24px;

    font-weight:bold;

    color:#0d6b36;

}

/* ==========================================
ACCIONES
========================================== */

.item-acciones{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:18px;

}

/* ==========================================
CONTROLES DE CANTIDAD
========================================== */

.cantidad{

    display:flex;

    align-items:center;

    gap:10px;

}

.cantidad button{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    background:#0d6b36;

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.3s;

}

.cantidad button:hover{

    background:#0a542b;

    transform:scale(1.05);

}

.cantidad span{

    min-width:28px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

}

/* ==========================================
TOTAL PRODUCTO
========================================== */

.item-total{

    font-size:21px;

    font-weight:bold;

    color:#111;

}

/* ==========================================
BOTÓN ELIMINAR
========================================== */

.btn-eliminar{

    border:none;

    background:#e53935;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.btn-eliminar:hover{

    background:#c62828;

    transform:translateY(-2px);

}

/* =========================
RESUMEN DE COMPRA
========================= */

.resumen-compra {
  background: #fff;
  padding: 22px;
  margin-top: 20px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.resumen-compra h2 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #1e1e1e;
}

/* líneas del resumen */
.resumen-linea {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 15px;
  color: #444;
}

.resumen-linea.total {
  font-weight: bold;
  font-size: 17px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

/* BOTONES */
.botones-carrito {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

/* vaciar */
.btn-vaciar {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #e53935;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.btn-vaciar:hover {
  background: #c62828;
}

/* finalizar */
.btn-finalizar {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #ff9800;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.btn-finalizar:hover {
  background: #fb8c00;
}

/* paypal */
.paypal-container {
  margin-top: 15px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .botones-carrito {
    flex-direction: column;
  }

  .resumen-compra {
    margin-top: 25px;
  }
}

/* ==========================================
   CANTIDAD (PRODUCTO DETALLE) MEJORADO
========================================== */

.cantidad-box {
    margin-top: 20px;
    padding: 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    border: 1px solid #eee;
}

.cantidad-box label {
    display: block;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0d6b36;
    font-size: 15px;
}

/* contenedor */
.selector-cantidad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* botones + y - */
.selector-cantidad button {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: #0d6b36;
    color: white;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selector-cantidad button:hover {
    background: #0a542b;
    transform: translateY(-2px);
}

/* input cantidad */
.selector-cantidad input {
    width: 80px;
    height: 44px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    border: 1px solid #ddd;
    border-radius: 12px;
    outline: none;
    background: #f9f9f9;
}

.selector-cantidad input:focus {
    border-color: #0d6b36;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13,107,54,.15);
}