/* Rediseño visual de web/paginas/carrito. Las filas de la tabla las arma
   carrito.jsp por JS (showProducts()) con clases/ids fijos - este archivo
   solo aplica CSS sobre esa estructura, no cambia ningún selector del que
   dependa el JS (.removerProducto, .cantidadProductos, .contadorTotal,
   #producto_tr_ID, #tbody-detail, #buttonRegistrar, etc). */

:root {
  --cart-gold: #c4a000;
  --cart-gold-dark: #8f7500;
  --cart-ink: #111111;
  --cart-ink-soft: #5a5a5a;
  --cart-border: rgba(17, 17, 17, 0.09);
  --cart-bg-soft: #faf8f2;
  --cart-radius: 14px;
}

.cart-list {
  background: #fff;
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius);
  padding: 18px;
  overflow-x: auto;
}

#limpiar a.limpiarCarrito,
a[href="/web/paginas/shop"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--cart-bg-soft);
  color: var(--cart-ink-soft) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease;
}

#limpiar a.limpiarCarrito:hover {
  background: #fbe3e3;
  color: #a32d2d !important;
}

a[href="/web/paginas/shop"]:hover {
  background: var(--cart-gold);
  color: #fff !important;
}

.table {
  min-width: 720px !important;
}

.table .thead-primary tr th {
  padding: 14px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.table tbody tr td {
  padding: 16px 10px;
}

.table tbody tr td.image-prod .img {
  border-radius: 10px;
  border: 1px solid var(--cart-border);
  width: 72px;
  height: 72px;
}

.table tbody tr td.product-name h3 {
  font-weight: 600;
  color: var(--cart-ink);
}

.table tbody tr td.total {
  color: var(--cart-gold-dark) !important;
  font-weight: 600;
}

.table tbody tr td.quantity input.form-control {
  height: 40px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--cart-border);
}

.table tbody tr td.product-remove a.removerProducto span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--cart-ink-soft);
  transition: background .2s ease, color .2s ease;
}

.table tbody tr td.product-remove a.removerProducto:hover span {
  background: #fbe3e3;
  color: #a32d2d;
}

.cart-wrap {
  background: #fff;
  border: 1px solid var(--cart-border);
  border-radius: var(--cart-radius);
  padding: 20px;
}

.cart-wrap h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--cart-ink);
}

.cart-wrap p {
  font-size: 13px;
  color: var(--cart-ink-soft);
}

.cart-total {
  border: 1px solid var(--cart-border) !important;
  border-top: 3px solid var(--cart-gold) !important;
  border-radius: var(--cart-radius);
  padding: 20px !important;
}

.cart-total h3 {
  font-weight: 600;
  color: var(--cart-ink);
}

.cart-total p span {
  color: var(--cart-ink-soft);
}

.cart-total p.total-price span:last-child {
  color: var(--cart-gold-dark) !important;
}

#buttonRegistrar .btn {
  background: var(--cart-ink) !important;
  border-color: var(--cart-ink) !important;
  color: #fff !important;
  width: 100%;
  text-align: center;
  font-weight: 500;
}

#buttonRegistrar .btn:hover {
  background: var(--cart-gold-dark) !important;
  border-color: var(--cart-gold-dark) !important;
}

@media (max-width: 767.98px) {
  .cart-wrap {
    margin-bottom: 16px;
  }
}