/* ===== Carrinho (desktop) ===== */
.ps-table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
  table-layout:fixed; /* necessário para as larguras funcionarem */
}
.ps-table th,.ps-table td{border:1px solid #ddd;padding:8px}

/* Colunas (agora são 4) */
.ps-table col.col-qty     { width:84px; }   /* input + setas */
.ps-table col.col-total   { width:130px; }
.ps-table col.col-actions { width:90px;  }
/* .col-prod sem width = ocupa o restante */

/* Quebra de texto e prevenção de truncamento */
.ps-table th, .ps-table td{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Input de quantidade enxuto */
.ps-qty{ width:56px; text-align:center; padding:4px 6px; -moz-appearance:textfield; }
.ps-qty::-webkit-outer-spin-button, .ps-qty::-webkit-inner-spin-button{ margin:0 }

/* Telas muito pequenas: ainda mais compacto */
@media (max-width:480px){
  .ps-table col.col-qty{ width:68px }
  .ps-qty{ width:48px }
}

/* ===== Mobile (≤ 680px): cada linha vira card ===== */
@media (max-width:680px){
  .ps-table{border-collapse:separate;border-spacing:0;table-layout:auto}
  .ps-table thead, .ps-table colgroup{display:none}
  .ps-table, .ps-table tbody, .ps-table tr, .ps-table td{display:block;width:100%}
  .ps-table tr{
    border:1px solid #ddd; border-radius:10px; padding:10px; margin-bottom:12px; background:#fff;
  }
  .ps-table td{
    border:0; border-bottom:1px solid #eee; padding:10px 10px 10px 110px; /* espaço pro label */
    position:relative; min-height:40px;
  }
  .ps-table td:last-child{border-bottom:0}

  /* Rótulos por coluna (agora só 4) */
  .ps-table td:nth-child(1)::before{content:"Produto";}
  .ps-table td:nth-child(2)::before{content:"Qtd";}
  .ps-table td:nth-child(3)::before{content:"Total";}
  .ps-table td:nth-child(4)::before{content:"Remover";}

  .ps-table td::before{
    position:absolute; left:10px; top:10px; width:92px;
    font-size:.85em; font-weight:600; opacity:.7;
  }

  /* Produto em destaque e sem label */
  .ps-table td:nth-child(1){ padding-left:10px; font-weight:600; font-size:1rem }
  .ps-table td:nth-child(1)::before{ content:""; }

  /* Toque amigável */
  .ps-qty{ width:72px; padding:6px 8px; font-size:16px } /* 16px evita zoom no iOS */
}

/* Subtotal + botão com respiro no mobile */
@media (max-width:680px){
  .ps-cart-summary{padding:6px 2px}
  .ps-btn-checkout{display:inline-flex; width:100%; justify-content:center}
}
/* Botão remover: círculo vermelho com X */
.ps-rm{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:36px; height:36px;
  border-radius:999px;
  background:#dc2626; /* vermelho */
  color:#fff;
  border:0;
  cursor:pointer;
  line-height:0;
  font-size:0;               /* esconde o texto "Remover" visualmente */
  transition:transform .08s ease, background .2s ease, box-shadow .2s ease;
}
.ps-rm::before{
  content:"×";
  font-size:20px;
  font-weight:700;
  line-height:1;
}
.ps-rm:hover{ background:#b91c1c; transform:translateY(-1px); }
.ps-rm:active{ transform:translateY(0); }
.ps-rm:focus{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(220,38,38,.5);
}

/* Mobile: um pouco maior para toque confortável */
@media (max-width:680px){
  .ps-rm{ width:44px; height:44px; }
}

/* (opcional) Centraliza melhor o botão na última célula em mobile-cards */
@media (max-width:680px){
  .ps-table td:last-child{ display:flex; align-items:center; }
}