/* ====== VARS ====== */
:root {
  --accent: #ff9a00;
  --gray: #f6f7f8;
  --bd: #e7e7e7;
  --txt: #222;
}

/* ====== RESET E BASE ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--txt);
  background: var(--gray);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height:1.45;
}

/* ====== CONTAINER PRINCIPAL ====== */
.wrap{
  width: 90%;
  max-width:1200px;
  margin: 0 auto 40px;   /* topo 0, laterais auto, bottom 40px */
}


h1{ margin:0 0 16px; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.01em; }
h2{ margin:0 0 12px; font-size:1.1rem; }

.muted{ color:#6b7280; }
.muted-small{ color:#6b7280; font-size:.9rem; }

.empty{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:14px;
  padding:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}

/* ====== LINKS E BOTÕES ====== */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.btn,
button{
  appearance:none;
  border:0;
  background:var(--accent);
  color:#111;
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  transition: filter .2s ease, transform .04s ease;
}
.btn:hover,
button:hover{ filter:brightness(.95); }
.btn:active,
button:active{ transform:translateY(1px); }
.btn[disabled],
button[disabled]{ opacity:.55; cursor:not-allowed; }

.btn-link{
  background:transparent;
  color:var(--accent);
  padding:0;
  border-radius:0;
  box-shadow:none;
}

/* Botões menores (quantidade/atualizar) */
.btnq, .btn-upd{
  background:#fafafa;
  color:var(--txt);
  border:1px solid var(--bd);
  padding:6px 10px;
  border-radius:10px;
  box-shadow:none;
}
.btnq:hover, .btn-upd:hover{ background:#f1f1f1; }

/* ====== TABELA DO CARRINHO ====== */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--bd);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  margin-bottom:20px;
}

thead th{
  background:var(--gray);
  color:#60646b;
  font-weight:800;
  text-align:left;
  font-size:.92rem;
  padding:12px 14px;
  border-bottom:1px solid var(--bd);
  white-space:nowrap;
}

tbody td{
  padding:14px;
  border-bottom:1px solid #f0f0f0;
  vertical-align:middle;
}
tbody tr:last-child td{ border-bottom:0; }

.right{ text-align:right; }
.qty, .rm{ white-space:nowrap; }

/* Pill de ID */
.id-pill{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:var(--gray);
  border:1px solid var(--bd);
  font-size:.82rem;
  color:#475467;
}

/* Input number na coluna de qtd */
td.qty input[type="number"]{
  width:72px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--bd);
  background:#fff;
  outline:none;
  text-align:center;
}
td.qty input[type="number"]:focus{
  box-shadow:0 0 0 3px rgba(255,154,0,.25);
  border-color:var(--accent);
}

/* Botão excluir minimalista */
td.rm form button{
  background:transparent;
  color:#d33;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(211,51,51,.18);
}
td.rm form button:hover{ background:rgba(211,51,51,.06); }

/* ====== GRID: ENTREGA + TOTAIS (ao lado) e PAGAMENTO EMBAIXO ====== */
/* coluna esquerda: Entrega + Pagamento empilhados */
/* coluna direita: Totais ocupando toda a altura */
.paybox{
  display:grid;
  grid-template-columns: 1.4fr .9fr;   /* mesma proporção */
  gap:20px;
  align-items:flex-start;
}

/* ambos na coluna 1, um embaixo do outro conforme a ordem do HTML */
.card[aria-label="Entrega"],
.card[aria-label="Pagamento"]{
  grid-column: 1 / 2;
}

/* Totais sempre na coluna 2 */
.totals{
  grid-column: 2 / 3;
}
                   { grid-area: totals; }

/* (Opcional) Fixar totais na viewport em telas altas */
@media (min-width: 941px){
  .totals{ position:sticky; top:16px; }
}

/* ====== PAGAMENTO (inputs) ====== */
.pay-methods{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:6px 0 12px;
}
.pay-methods .inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:var(--gray);
  cursor:pointer;
  user-select:none;
}
.pay-methods input[type="radio"]{
  accent-color:var(--accent);
  width:18px; height:18px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:10px;
}
.form-row .full{ grid-column:1 / -1; }

.field label{
  display:block;
  font-size:1.2em;
  color:#000;
  margin:0 0 6px;
  margin-top: 30px;
}
.field input,
.field select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--bd);
  border-radius:10px;
  background:#fff;
  outline:none;
  font-size:1rem;
  color:var(--txt);
}
.field input::placeholder{ color:#9aa2b1; }
.field input:focus,
.field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,154,0,.25);
}

input[type="password"]{ letter-spacing:.2em; }

/* ====== TOTAIS ====== */
.totals .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  gap:12px;
  border-bottom:1px dashed #ededed;
}
.totals .row:last-child{ border-bottom:0; }

.totals .total{
  font-size:1.2em;
  font-weight:800;
  color:var(--txt);
}

.totals .actions{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.totals .actions .btn{
  width:100%;
  justify-self:stretch;
}

/* ====== IMAGENS ====== */
img{ display:block; }

/* ====== ACESSIBILIDADE ====== */
:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,154,0,.25); border-color:var(--accent); }

/* ====== RESPONSIVO ====== */
@media (max-width: 940px){
  .paybox{
    grid-template-columns:1fr;
    grid-template-areas:
      "entrega"
      "totals"
      "pagamento"; /* no mobile: entrega > totais > pagamento */
  }
}
@media (max-width: 760px){
  thead th:nth-child(3){ display:none; } /* ID */
  tbody td:nth-child(3){ display:none; }
  thead th:first-child{ width:56px; }
  td.qty form{ margin-bottom:6px; display:inline-block; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  table{ font-size:.96rem; }
  .btn, button{ padding:9px 12px; }
  td.qty input[type="number"]{ width:64px; }
}


/* grade 2x2 */
.pay-methods.grid2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* caixinha do radio */
.pay-methods .opt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;         /* “quadradinho” */
  background: #fff;
  cursor: pointer;
  min-height: 60px;
}

/* radio nativo com cor */
.pay-methods .opt input{
  width: 18px;
  height: 18px;
  accent-color: #d98302;       /* sua cor */
  flex: 0 0 auto;
}

/* texto em 2 linhas */
.pay-methods .opt .t{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.pay-methods .opt .t strong{
  font-size: 14px;
  font-weight: 700;
}
.pay-methods .opt .t small{
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

/* destaque quando selecionado (browsers modernos) */
.pay-methods .opt:has(input:checked){
  border-color: #d98302;
  background: #fff8ee;
  box-shadow: 0 0 0 2px rgba(217,131,2,.15);
}

/* fallback mínimo caso :has não exista */
.pay-methods .opt input:checked + .t strong{
  color: #d98302;
}



/* grid de escolhas (2 botões) */
.pay-choices-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.pay-choices-2 .choice{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition: .15s ease;
}
.pay-choices-2 .choice .ico svg{ display:block; width:22px; height:22px; }
.pay-choices-2 .choice .txt{ display:flex; flex-direction:column; line-height:1.1; text-align:left;}
.pay-choices-2 .choice .txt strong{ font-size:14px; font-weight:700;}
.pay-choices-2 .choice .txt small{ font-size:12px; color:#666; }

.pay-choices-2 .choice.active{
  border-color:#d98302;
  background:#fff8ee;
  box-shadow:0 0 0 2px rgba(217,131,2,.12);
}

.pay-section .saved-card{
  background:#fafafa; border:1px solid #eee; border-radius:10px; padding:10px 12px; margin-bottom:8px; height: 105px;
}
.pay-section .saved-card .row{ display:flex; gap:8px; align-items:center; }
.pay-section .saved-card .brand{ font-weight:700; font-size:12px; color:#333; }
.pay-section .saved-card .info{ font-size:12px; color:#555; }
.link-like{ 
  background:none; 
  border:none; color:#fff; 
  text-decoration:none;
   padding:0; cursor:pointer; font-size:12px; 
   background: #d98302;
  padding: 8px;
  float: right;
  }

  .menu-contaz a{
    color: #d98302;
    font-weight: bold;
  }

  .laranja{
    background: #d98302;
    color: #fff;
    font-weight: bold;
  }

 .venc{
  width: 100%;
  height: 15px;
  font-weight: bold;
 }




/* ====== MOBILE: carrinho responsivo em cards (sem mexer no HTML) ====== */
@media (max-width: 768px){

  /* evita scroll lateral */
  html, body { overflow-x: hidden; }
  .wrap { padding: 0 12px; }

  /* Tabela -> bloco */
  table[aria-label="Itens do pedido"]{
    width: 100%;
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }
  table[aria-label="Itens do pedido"] thead{ display:none; }
  table[aria-label="Itens do pedido"] tbody{
    display: grid;
    gap: 12px;
    width: 100%;
  }

  /* Cada linha vira um "card" com grid */
  table[aria-label="Itens do pedido"] tr{
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "img title rm"
      "img id    rm"
      "img price rm"
      "img qty   rm"
      "img sub   rm";
    gap: 8px 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.04);
  }

  /* Mapear as células existentes (ordem dos <td>) */
  table[aria-label="Itens do pedido"] td:nth-child(1){ grid-area: img; }
  table[aria-label="Itens do pedido"] td:nth-child(2){ grid-area: title; font-weight: 700; }
  table[aria-label="Itens do pedido"] td:nth-child(3){ grid-area: id; }
  table[aria-label="Itens do pedido"] td:nth-child(4){ grid-area: price; }
  table[aria-label="Itens do pedido"] td:nth-child(5){ grid-area: qty; }
  table[aria-label="Itens do pedido"] td:nth-child(6){ grid-area: sub; }
  table[aria-label="Itens do pedido"] td:nth-child(7){
    grid-area: rm;
    text-align: right;
    align-self: start;
  }

  /* Imagem do item */
  table[aria-label="Itens do pedido"] td:nth-child(1) img{
    width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: #f4f4f4;
    display: block;
  }

  /* "Pílula" do ID */
  .id-pill{
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f6f7f8;
    border: 1px solid #e7e7e7;
    font-size: 12px;
  }

  /* Alinhas números à direita no desktop; no mobile vira bloco com label */
  table[aria-label="Itens do pedido"] td.right{ text-align: left; }

  /* Labels com ::before (sem alterar HTML) */
  table[aria-label="Itens do pedido"] td:nth-child(3)::before,
  table[aria-label="Itens do pedido"] td:nth-child(4)::before,
  table[aria-label="Itens do pedido"] td:nth-child(5)::before,
  table[aria-label="Itens do pedido"] td:nth-child(6)::before{
    content: attr(data-label);
  }
  /* Como não temos data-label no HTML, definimos manualmente por posição: */
  table[aria-label="Itens do pedido"] td:nth-child(3)::before{ content: "ID "; }
  table[aria-label="Itens do pedido"] td:nth-child(4)::before{ content: "Preço "; }
  table[aria-label="Itens do pedido"] td:nth-child(5)::before{ content: "Qtd "; }
  table[aria-label="Itens do pedido"] td:nth-child(6)::before{ content: "Subtotal "; }

  table[aria-label="Itens do pedido"] td:nth-child(3)::before,
  table[aria-label="Itens do pedido"] td:nth-child(4)::before,
  table[aria-label="Itens do pedido"] td:nth-child(5)::before,
  table[aria-label="Itens do pedido"] td:nth-child(6)::before{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    opacity: .7;
    margin-right: 6px;
  }

  /* Quantidade: deixa mais compacto */
  td.qty form{ display: inline-block; vertical-align: middle; }
  td.qty .btnq{
    width: 34px; height: 34px;
    line-height: 34px;
    border: 1px solid #e7e7e7;
    background: #fafafa;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
  }
  td.qty .qty-input{
    width: 54px; height: 34px;
    text-align: center;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    margin: 0 6px;
  }

  /* Botão excluir alinhado no topo */
  td.rm button{
    background: none; border: 0; color: #d33; font-weight: 700; cursor: pointer;
  }

  /* Cards laterais empilhados */
  .paybox{ display: grid; gap: 16px; }
  .paybox .card{ border-radius: 12px; }

  /* Totais: melhora leitura */
  .totals{ border-radius: 12px; }
  .totals .row_especial{
    display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  }
  .totals .row_especial.total span,
  .totals .row_especial.total strong{ font-size: 18px; }

  /* Botões de ação em coluna */
  .actions{
    display: grid;
    gap: 10px;
  }
  .actions .btn,
  .actions .btn-link{
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}


/* ====== MOBILE: ajustes do card + botão Excluir como lixeira ====== */
@media (max-width: 768px){

  /* Card: 2 colunas e espaço pro botão no canto */
  table[aria-label="Itens do pedido"] tr{
    position: relative;
    grid-template-columns: 72px 1fr; /* tiramos a 3ª coluna */
    grid-template-areas:
      "img title"
      "img id"
      "img price"
      "img qty"
      "img sub";
    padding-right: 58px; /* respiro para o botão flutuante */
  }

  /* O <td> do excluir deixa de ocupar coluna e vira absoluto */
  table[aria-label="Itens do pedido"] td:nth-child(7){
    grid-area: auto;
    text-align: right;
  }
  table[aria-label="Itens do pedido"] td:nth-child(7) button{
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    cursor: pointer;

    /* esconde o texto "Excluir" sem afetar o ícone */
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
  }
  /* Ícone de lixeira (Font Awesome 6 Free) */
  table[aria-label="Itens do pedido"] td:nth-child(7) button::before{
    content: "\f1f8";
    font-family: "Font Awesome 6 Free"; /* já está no seu projeto */
    font-weight: 900;
    font-size: 16px;
    line-height: 36px;
    display: block;
    text-align: center;
    color: #d33;
  }
  table[aria-label="Itens do pedido"] td:nth-child(7) button:hover{
    background: #fff5f5;
    border-color: #f2c7c7;
  }
  table[aria-label="Itens do pedido"] td:nth-child(7) button:active{
    transform: scale(.96);
  }

  /* Pequenas melhorias visuais nos labels */
  table[aria-label="Itens do pedido"] td:nth-child(3)::before{ content: "ID "; }
  table[aria-label="Itens do pedido"] td:nth-child(4)::before{ content: "Preço "; }
  table[aria-label="Itens do pedido"] td:nth-child(5)::before{ content: "Qtd "; }
  table[aria-label="Itens do pedido"] td:nth-child(6)::before{ content: "Subtotal "; }
  table[aria-label="Itens do pedido"] td:nth-child(3)::before,
  table[aria-label="Itens do pedido"] td:nth-child(4)::before,
  table[aria-label="Itens do pedido"] td:nth-child(5)::before,
  table[aria-label="Itens do pedido"] td:nth-child(6)::before{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    opacity: .7;
    margin-right: 6px;
  }
}


/* ==== MOBILE: lixeira alinhada dentro do card ==== */
@media (max-width: 768px){

  /* cada linha como card */
  table[aria-label="Itens do pedido"] {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
  }

  table[aria-label="Itens do pedido"] tr{
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "img title"
      "img id"
      "img price"
      "img qty"
      "img sub";
    margin: 14px 8px;
    padding: 14px 16px;
    padding-right: 76px;      /* espaço reservado ao botão */
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    overflow: hidden;         /* mantém a lixeira dentro do card */
  }

  /* a coluna do excluir não deve ocupar espaço no grid */
  table[aria-label="Itens do pedido"] td:nth-child(7){
    padding: 0 !important;
    width: 0 !important;
  }

  /* botão lixeira no canto superior direito do card */
  table[aria-label="Itens do pedido"] td:nth-child(7) button{
    position: absolute;
    top: 10px;
    right: 10px;              /* encosta dentro do raio do card */
    z-index: 3;
    width: 36px;
    height: 36px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    cursor: pointer;

    /* esconde o texto "Excluir" */
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
  }

  /* ícone de lixeira (Font Awesome 6) */
  table[aria-label="Itens do pedido"] td:nth-child(7) button::before{
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    display: block;
    line-height: 10px;
    text-align: center;
    color: #ff9a00;
    margin-top: -7px;
  }

  table[aria-label="Itens do pedido"] td:nth-child(7) button:hover{
    background: #fff5f5;
    border-color: #f2c7c7;
  }

  /* rótulos dos campos (opcional) */
  table[aria-label="Itens do pedido"] td:nth-child(3)::before{ content: "ID "; }
  table[aria-label="Itens do pedido"] td:nth-child(4)::before{ content: "Preço "; }
  table[aria-label="Itens do pedido"] td:nth-child(5)::before{ content: "Qtd "; }
  table[aria-label="Itens do pedido"] td:nth-child(6)::before{ content: "Subtotal "; }
  table[aria-label="Itens do pedido"] td:nth-child(3)::before,
  table[aria-label="Itens do pedido"] td:nth-child(4)::before,
  table[aria-label="Itens do pedido"] td:nth-child(5)::before,
  table[aria-label="Itens do pedido"] td:nth-child(6)::before{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    opacity: .7;
    margin-right: 6px;
  }
}

/* ==== MOBILE: cards mais estreitos e centralizados ==== */
@media (max-width: 768px){
  /* centraliza a grade de linhas */
  table[aria-label="Itens do pedido"] tbody{
    display: grid;          /* mantém o layout em grid que você já usa */
    gap: 12px;
    justify-items: center;  /* <<< centraliza os cards */
  }

  /* define uma largura máxima menor para cada card (tr) */
  table[aria-label="Itens do pedido"] tr{
    width: clamp(280px, 88vw, 520px); /* <<< ajuste aqui se quiser mais/menos estreito */
    margin: 12px auto;                /* centraliza e dá respiro */
    padding-right: 76px;              /* mantém espaço para a lixeira */
  }
}


/* ==== MOBILE: cards mais estreitos (versão slim) ==== */
@media (max-width: 768px){
  /* centraliza e limita ainda mais a largura */
  table[aria-label="Itens do pedido"] tbody{
    justify-items: center;
    gap: 10px;
  }

  table[aria-label="Itens do pedido"] tr{
    width: clamp(240px, 82vw, 420px); /* <— mais estreito que 520px */
    margin: 10px auto;
    padding: 12px 14px;
    padding-right: 64px;              /* espaço p/ lixeira */
    grid-template-columns: 60px 1fr;  /* imagem menor */
  }

  /* imagem um pouco menor para caber confortável */
  table[aria-label="Itens do pedido"] td:nth-child(1) img{
    width: 60px; height: 60px; border-radius: 10px;
  }

  /* botão da lixeira compacto */
  table[aria-label="Itens do pedido"] td:nth-child(7) button{
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    border-radius: 9px;
  }
  table[aria-label="Itens do pedido"] td:nth-child(7) button::before{
    font-size: 14px; line-height: 32px;
  }
}

/* ==== MOBILE: cards compactos (filipeta ≤ 150px) ==== */
@media (max-width: 768px){

  /* cada linha vira uma filipeta enxuta */
  table[aria-label="Itens do pedido"] tr{
    grid-template-columns: 56px 1fr;     /* imagem menor */
    gap: 4px 10px;                        /* menos espaço entre linhas/colunas */
    padding: 10px 12px;                   /* menos padding */
    min-height: 110px;
    max-height: 150px;                    /* <<< limite solicitado */
    overflow: hidden;                     /* evita crescer além do limite */
    background: #f0f0f0;
  }

  /* imagem compacta */
  table[aria-label="Itens do pedido"] td:nth-child(1) img{
    width: 56px; height: 56px; border-radius: 8px;
  }

  /* título em no máx. 2 linhas */
  table[aria-label="Itens do pedido"] td:nth-child(2){
    font-size: 13px;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;                /* corta no 2º verso */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* esconde a linha de ID para ganhar altura */
  table[aria-label="Itens do pedido"] td:nth-child(3){ display:none !important; }

  /* preço / subtotal mais baixos e colados */
  table[aria-label="Itens do pedido"] td:nth-child(4),
  table[aria-label="Itens do pedido"] td:nth-child(6){
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
    line-height: 1.2;
  }

  /* quantidade enxuta */
  td.qty form{ display:inline-block; vertical-align:middle; }
  td.qty .btnq{
    width: 28px; height: 28px;
    line-height: 28px;
    border-radius: 8px;
    font-size: 13px;
    padding: 0;
  }
  td.qty .qty-input{
    width: 44px; height: 28px;
    margin: 0 4px;
    font-size: 13px;
    padding: 0 6px;
  }

  /* lixeira menor, dentro do card */
  table[aria-label="Itens do pedido"] td:nth-child(7){
    padding: 0 !important; width: 0 !important;
  }
  table[aria-label="Itens do pedido"] td:nth-child(7) button{
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    font-size: 0; line-height: 0; color: transparent;
  }
  table[aria-label="Itens do pedido"] td:nth-child(7) button::before{
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 28px;
    color: #ff9a00;                         /* amarela */
    display: block; text-align: center;
  }


}

/* Remover a borda/box-shadow do container da tabela no mobile */
@media (max-width: 768px){
  table[aria-label="Itens do pedido"]{
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 !important;          /* opcional: encosta os cards nas laterais */
  }

  tbody td{
    border-bottom: 1px solid #f0f0f0;
  }
}


/* ================================
   ENTREGA — melhorias visuais
   (sem alterar o HTML)
   ================================ */

/* Título mais marcante e respiro */
.card[aria-label="Entrega"] h2{
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 4px 0 14px;
}

/* Grid das opções (Compra única, Assinatura...) mais alto e tátil */
.card[aria-label="Entrega"] .pay-methods.grid2 .opt{
  min-height: 74px;                /* ↑ altura dos “cards” */
  padding: 14px 16px;
  border-radius: 12px;
}
.card[aria-label="Entrega"] .pay-methods.grid2 .opt .t strong{
  font-size: 15px;
}
.card[aria-label="Entrega"] .pay-methods.grid2 .opt .t small{
  font-size: 12.5px;
}

/* Campos (Data da entrega e Frequência) maiores e confortáveis */
.card[aria-label="Entrega"] .field select,
.card[aria-label="Entrega"] .field input{
  height: 52px;                    /* ↑ altura do “box” */
  font-size: 15.5px;
  padding: 10px 14px;
  border-radius: 12px;
}

/* Destaque suave no foco */
.card[aria-label="Entrega"] .field select:focus,
.card[aria-label="Entrega"] .field input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,154,0,.22);
}

/* Linhas do formulário um pouco mais espaçadas */
.card[aria-label="Entrega"] .form-row{
  gap: 14px;
  margin-bottom: 12px;
}

/* Textos com * (observações) menores e mais discretos */
.card[aria-label="Entrega"] .muted-small{
  font-size: 11px !important;      /* ↓ menor que 12px do inline */
  color: #6b7280;
  line-height: 1.35;
  margin-top: 6px;
}

/* Versão mobile: garante conforto ao toque */
@media (max-width: 768px){
  .card[aria-label="Entrega"] .pay-methods.grid2 .opt{
    min-height: 68px;
  }
  .card[aria-label="Entrega"] .field select,
  .card[aria-label="Entrega"] .field input{
    height: 56px;                  /* um pouquinho mais alto no touch */
    font-size: 16px;
  }
}


/* ===========================
   TOTAIS — rótulos discretos
   e destaque p/ linhas GERAL
   =========================== */

.totals{
  padding: 14px 14px 12px;
  border-radius: 14px;
}

/* cada linha mais leve */
.totals .row_especial{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
  gap: 10px;
}

/* rótulo (esquerda) bem discreto */
.totals .row_especial span,
.totals .row span.muted{
  color:#8b93a1;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing:.01em;
}

/* valor (direita) com mais presença */
.totals .row_especial strong{
  color:#1f2937;
  font-size: 15px;
  font-weight: 800;
}

/* linha TOTAL GERAL – bem destacada */
.totals .row_especial.total{
  border:0;
  margin-top: 6px;
  padding: 14px 12px;
  background:#fff8ee;                 /* leve banho de cor */
  border-left: 4px solid var(--accent);
  border-radius: 10px;
}
.totals .row_especial.total span{ color:#111; font-size: 16px; font-weight: 900; }
.totals .row_especial.total strong{ font-size: 18px; font-weight: 900; color:#111; }

/* ===== Destaque para as 3 linhas “gerais” que antecedem o TOTAL =====
   (usa :has() — funciona em Chromium/Safari; se não suportar, só o TOTAL fica destacado) */
.totals .row_especial:has(+ .row_especial.total),
.totals .row_especial:has(+ .row_especial:has(+ .row_especial.total)),
.totals .row_especial:has(+ .row_especial:has(+ .row_especial:has(+ .row_especial.total))){
  background:#fffdf8;
  border-left: 3px solid rgba(255,154,0,.65);
  border-radius: 8px;
  padding-left: 10px;
}
.totals .row_especial:has(+ .row_especial.total) strong,
.totals .row_especial:has(+ .row_especial:has(+ .row_especial.total)) strong,
.totals .row_especial:has(+ .row_especial:has(+ .row_especial:has(+ .row_especial.total))) strong{
  font-weight: 900;
}

/* botões: mantém foco no “Finalizar compra” */
.totals .actions .btn{
  height: 46px;
  font-weight: 900;
}
.totals .actions .btn-link{
  color:#6b7280;
  font-weight: 700;
  text-decoration: none;
}
.totals .actions .btn-link:hover{ color:#374151; text-decoration:underline; }

/* mobile: um pouco mais de toque */
@media (max-width:768px){
  .totals .row_especial{ padding: 9px 0; }
  .totals .row_especial strong{ font-size: 15.5px; }
  .totals .row_especial.total{ padding: 16px 12px; }
}

/* -------- Totais: reduzir destaque do bloco superior -------- */
.totals > .row_especial:nth-child(-n+8) span {        /* Cupom até Datas */
  color: #9aa3af;              /* mais clarinho */
  font-size: 0.9em;
  font-weight: 600;
}
.totals > .row_especial:nth-child(-n+8) strong {
  color: #4b5563;              /* valor menos “chamado” */
  font-weight: 600;
  font-size: 1rem;
}

/* separar visualmente o bloco “geral” */
.totals > .row_especial:nth-child(9) {               /* primeira linha do bloco geral */
  border-top: 1px dashed #e8ebef;
  margin-top: 6px;
  padding-top: 12px;
}

/* -------- Totais: aumentar destaque do bloco GERAL -------- */
.totals > .row_especial:nth-child(n+9):not(.total) span {
  color: #4b5563;              /* rótulo um pouco mais forte */
  font-size: 1.1em;
  font-weight: 700;
}
.totals > .row_especial:nth-child(n+9):not(.total) strong {
  color: #0f172a;              /* valor bem legível */
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -.01em;
}

/* “Total geral”: destaque máximo */
.totals > .row_especial.total {
  background: #fff7ea;         /* badge/fundo suave */
  border: 1px solid #ffe2bb;
  box-shadow: 0 4px 18px rgba(255,154,0,.08) inset;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}
.totals > .row_especial.total span {
  color: #8a5400;              /* título do total */
  font-weight: 800;
  font-size: 1em;
}
.totals > .row_especial.total strong {
  color: #0a0f1a;
  font-weight: 900;
  font-size: 1.35rem;          /* número maior */
  letter-spacing: -.02em;
}

/* em telas menores, ajuste fino do “Total geral” */
@media (max-width: 480px){
  .totals > .row_especial.total strong { font-size: 1.25rem; }
}

/* ===== Desktop: botão Excluir como lixeira ===== */
@media (min-width: 769px){
  table[aria-label="Itens do pedido"] td.rm { text-align: right; }

  table[aria-label="Itens do pedido"] td.rm form button{
    /* aparência de ícone */
    width: 36px; height: 36px;
    padding: 0;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    cursor: pointer;

    /* esconde o texto "Excluir" */
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
  }

  /* ícone Font Awesome (trash) */
  table[aria-label="Itens do pedido"] td.rm form button::before{
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    color: #ff9a00;               /* mesma cor do destaque/“amarelo” */
  }

  table[aria-label="Itens do pedido"] td.rm form button:hover{
    background: #fff8ee;
    border-color: #ffe2bb;
    transform: translateY(-1px);
  }
  table[aria-label="Itens do pedido"] td.rm form button:active{
    transform: translateY(0);
  }
}


/* ===============================
   DESKTOP (≥ 941px) – Checkout
   Organização do formulário MP
   =============================== */
@media (min-width: 941px){

  /* Caixa “Pagamento” um pouco mais firme */
  .card[aria-label="Pagamento"]{
    padding: 18px;
    border-color:#ececec;
  }

  /* Barra de aviso acima do form */
  #mpCardWrapper .menu-contaz{
    margin: 2px 0 10px;
    background:#fff8ee;
    border:1px solid #ffe2bb;
    border-radius:10px;
    padding:10px 12px;
    font-weight:700;
  }
  #mpCardWrapper .menu-contaz i{ font-size:8px; margin-right:6px; }

  /* ---- GRID do formulário do cartão ---- */
  #mpCardWrapper form.logar2{
    display:grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 16px;                     /* linha / coluna */
    align-items:start;
  }

  /* mapeia suas “faixas” utilitárias */
  #mpCardWrapper .terco   { grid-column: span 4; }   /* 1/3   */
  #mpCardWrapper .dois    { grid-column: span 3; }   /* 1/4 aprox */
  #mpCardWrapper .tres    { grid-column: span 4; }   /* 1/3   */
  #mpCardWrapper .quatro  { grid-column: span 3; }   /* 1/4   */

  /* quebra de linha completa quando precisar */
  #mpCardWrapper .separa  { grid-column: 1 / -1; height: 0; }

  /* Título “Vencimento:” ocupando a linha toda (opcional) */
  #mpCardWrapper .venc{
    grid-column: 1 / -1;
    height:auto;
    margin: 4px 0 -6px;
    color:#444;
    font-weight:700;
  }

  /* inputs e selects com altura e tipografia consistentes */
  #mpCardWrapper label{
    display:block;
    margin: 0 0 6px;
    font-size: .95rem;
    color:#111;
    font-weight:700;
    letter-spacing:.01em;
  }
  #mpCardWrapper .form-control,
  #mpCardWrapper select{
    width:100%;
    height:48px;
    padding:10px 12px;
    border:1px solid #e6e6e6;
    border-radius:10px;
    background:#fff;
    font-size:15px;
    outline:none;
    transition: box-shadow .15s ease, border-color .15s ease;
  }
  #mpCardWrapper .form-control:focus,
  #mpCardWrapper select:focus{
    border-color:#ffb24a;
    box-shadow:0 0 0 3px rgba(255,154,0,.22);
  }

  /* Campos específicos que são numéricos: alinhamento central opcional */
  #mpCardWrapper #cardExpirationMonth,
  #mpCardWrapper #cardExpirationYear,
  #mpCardWrapper #securityCode{
    text-align:center;
    letter-spacing:.04em;
  }

  /* Select de parcelas ocupa bem o espaço da coluna */
  #mpCardWrapper #installments{ min-width: 100%; }

  /* Botão “Cadastrar Cartão” alinhado à direita e largura confortável */
  #mpCardWrapper .col-md-12{
    grid-column: 1 / -1;
    display:flex;
    justify-content:flex-end;
  }
  #mpCardWrapper .col-md-12 .btn{
    min-width: 260px;
    height: 48px;
    border-radius: 12px;
    font-weight:900;
  }

  /* Escolhas PIX/Cartão – leve reforço no hover para desktop */
  .pay-choices-2 .choice:hover{
    box-shadow:0 0 0 2px rgba(217,131,2,.10);
  }

  /* Cartão salvo: alinhamento e respiro */
  .pay-section .saved-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
  }
  .pay-section .saved-card .info{
    line-height:1.25;
  }
  #trocarCartao.link-like{
    margin-left:auto;
    border-radius:8px;
  }
}

/* Ícone da lixeira no desktop – centralização vertical perfeita */
@media (min-width: 769px){
  table[aria-label="Itens do pedido"] td.rm form button::before{
    line-height: 1;
    transform: translateY(1px);
  }
}


/* Unificar tamanho dos títulos no formulário do cartão (desktop) */
@media (min-width: 941px){
  /* labels do bloco Pagamento + Mercado Pago */
  .card[aria-label="Pagamento"] label,
  #mpCardWrapper label,
  #mpCardWrapper .form-group > label,
  .card[aria-label="Pagamento"] .venc{
    font-size: 13px;        /* escolha o tamanho único */
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 6px;        /* margem padrão */
  }

  /* sobrescreve aquele label maior da área .field */
  .card[aria-label="Pagamento"] .field label{
    font-size: 13px;
    margin-top: 0;          /* remove o “salto” que deixava diferente */
  }
}

.info_cartao{
  font-size: 0.9em;
}

.img-responsive img, .sumirx img{
  height: 250px;
}

.sucessx{
  font-weight: 800;
  font-size: 1.4em;
  color: #6d1f1d;;
}

.info_vazio{
  margin: 30px 0;
  font-size: 1.3em;
}

.actionsx{
  background-color: #ffb24a;
  width: 150px;
  padding: 10px;
  margin-top: 25px;
  text-align: center;
  margin-bottom: 40px;  /* ou até 0, se não precisar de espaço */
}


.actionsx a{
  color: #fff;
  font-weight: 300;
}

.actionsx a:hover{
  text-decoration: none;
}

.btnq{
  cursor:pointer;
  /* se existir algum reset agressivo: */
  pointer-events:auto;
}


/* Zerar espaçamento do container que envolve o checkout */
main,
#conteudo,
.checkout,
.checkout-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.separador_pagamento{
  width: 100%;
  height: 8px;
  background: #ccc;
  margin-top: 30px;
}

.field h2{
  font-size: 1em;
}