:root{
  --vp-red: #b00000;
  --vp-red-dark: #8f0000;
  --vp-blue: #0b2c3d;
  --vp-text: #111;
  --vp-muted: #666;

  --vp-bg: #f6f6f6;
  --vp-card: #ffffff;
  --vp-border: rgba(0,0,0,.10);
  --vp-shadow: 0 12px 30px rgba(0,0,0,.08);
  --vp-radius: 16px;
}

*{ box-sizing: border-box; }

.vp-cart{
  min-height: 60vh;
  background: var(--vp-bg);
  padding: clamp(22px, 4vw, 42px) 16px;
}

.vp-cart-container{
  max-width: 1100px;
  margin: 0 auto;
}

.vp-cart-title{
  margin: 0 0 14px;
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--vp-blue);
  letter-spacing: -0.02em;
}

.vp-cart-empty{
  background: var(--vp-card);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  padding: 22px;
  box-shadow: var(--vp-shadow);
}

.vp-cart-empty p{
  margin: 0 0 14px;
  color: var(--vp-muted);
  font-size: 15px;
}

/* tabela */
.vp-cart-table-wrap{
  background: var(--vp-card);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow);
  overflow: hidden;
}

.vp-cart-table{
  width: 100%;
  border-collapse: collapse;
}

.vp-cart-table thead th{
  text-align: left;
  font-size: 13px;
  color: #39434a;
  background: #fbfbfb;
  border-bottom: 1px solid var(--vp-border);
  padding: 14px 14px;
  white-space: nowrap;
}

.vp-cart-table tbody td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  color: var(--vp-text);
  font-size: 14px;
  vertical-align: top;
}

.vp-cart-table tbody tr:hover{
  background: rgba(0,0,0,.02);
}

.vp-remove{
  display: inline-block;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(176,0,0,.25);
  background: rgba(176,0,0,.06);
  color: var(--vp-red-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

.vp-remove:hover{
  background: rgba(176,0,0,.10);
}

/* footer do carrinho */
.vp-cart-footer{
  margin-top: 16px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.vp-cart-total{
  background: var(--vp-card);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow);
  padding: 14px 16px;
  min-width: 260px;

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.vp-cart-total span{
  color: var(--vp-muted);
  font-weight: 700;
}

.vp-cart-total strong{
  color: var(--vp-blue);
  font-size: 18px;
}

/* botões */
.vp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
}

.vp-btn-primary{
  background: linear-gradient(135deg, var(--vp-red), var(--vp-red-dark));
  color: #fff;
}

.vp-btn-primary:hover{ filter: brightness(.97); }

.vp-btn-outline{
  background: #fff;
  border-color: var(--vp-border);
  color: var(--vp-blue);
}

.vp-btn-outline:hover{
  border-color: rgba(0,0,0,.18);
}

.vp-cart-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsivo: tabela vira “cards” */
@media (max-width: 820px){
  .vp-cart-table thead{
    display: none;
  }

  .vp-cart-table,
  .vp-cart-table tbody,
  .vp-cart-table tr,
  .vp-cart-table td{
    display: block;
    width: 100%;
  }

  .vp-cart-table tr{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  .vp-cart-table tbody td{
    border: 0;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .vp-cart-table tbody td::before{
    content: attr(data-label);
    color: var(--vp-muted);
    font-weight: 800;
    min-width: 110px;
  }

  .vp-cart-footer{
    flex-direction: column;
    align-items: stretch;
  }

  .vp-cart-total{
    min-width: auto;
  }

  .vp-cart-actions{
    width: 100%;
  }

  .vp-btn{
    width: 100%;
  }
}