.novoproduto {
margin: auto auto 10px auto;
border: 1px solid rgba(0,0,0,.07);
border-radius: 6px;
padding: 12px 12px 12px 12px;
/*background: rgba(0,0,0,.025);*/
}

.novoproduto .capa {
display: flex;
/*align-items: center;*/
/*justify-content: center;*/
border-radius: 6px;
overflow: hidden;
width: 100%;
height: 100px;
}

.novoproduto .capa img {
display: block;
margin: auto;
width: 100%;
border-radius: 6px;
}

.novoproduto .nome {
display: block;
margin: 0 0 5px 0;
font-weight: 600;
font-size: 14px;
line-height: 16px;
}

.novoproduto .descricao {
display: block;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: rgba(0,0,0,.5);
/*word-break: break-all;*/
/*overflow-wrap: break-word;*/
}

.novoproduto .preco {
margin: 6px 0 0 0;
}

.novoproduto .preco .valor_anterior {
display: block;
margin: 0 0 -1px 0;
text-align: left;
font-size: 12px;
line-height: 14px;
color: rgba(0,0,0,.5);
}

.novoproduto .preco .blank_valor_anterior {
display: block;
width: 100%;
height: 7px;
color: rgba(0,0,0,.5);
}

.novoproduto .preco .valor {
display: block;
margin: 0 0 0 0;
font-size: 14px;
line-height: 16px;
font-weight: 600;
}

.valor-green {
color: rgba(16,185,129,.9) !important;
}

.novoproduto .plus-holder {
float: right;
}

.novoproduto .plus {
display: block;
float: left;
margin: 0 0 0 0;
background: #e22f38;
color: #fff;
border-radius: 6px 0 0 6px;
text-align: center;
width: 26px;
height: 26px;
font-size: 18px;
line-height: 27px;
font-weight: 600;
}

.novoproduto .plus-desc {
display: block;
float: left;
margin: 0 0 0 0;
background: #e22f38;
border-radius: 0 6px 6px 0;
text-align: center;
height: 26px;
font-size: 12px;
line-height: 27px;
padding: 0 6px 0 6px;
border-left: 1px solid rgba(255,255,255,.2);
background: rgba(0,0,0,.06);
}

.categoria .novo-vertudo {
display: block;
width: 100%;
margin: 14px 0 16px 0;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,.05);
border-radius: 6px;
padding-bottom: 18px;
}

.categoria .novo-vertudo i {
margin-left: 5px;
transform: translateY(2px);
}

.categoria .title {
margin-bottom: 14px;
}

.radios-full {
display: flex;
}

.radios-full .form-field-radio {
width: 100%;
}

.radios-full label.error {
position: absolute;
margin: 10px 0 0 -20px;
}

.sacola-adicionar {
user-select: none;
}

.sacola-adicionar span {
transform: translateY(0);
}

.sacola-adicionar i {
margin: 0 8px 0 0;
transform: translateY(-1px);
font-size: 12px;
font-weight: 700;
}

.botao-fechar-compra {
margin-top: 14px;
}

/* US */

@media (max-width: 320px)  {

}

/* XS */

@media (max-width: 544px)  {

}

/* SMALL */

@media (min-width: 545px) and (max-width: 767px)  {

}

/* MEDIUM */

@media (min-width: 546px) and (max-width: 991px)  {

}

/* LARGE */

@media (min-width: 992px) and (max-width: 1199px)  {

}

/* EXTRA LARGE */

@media (min-width: 1200px) {

}

/* ALL MOBILE */

@media (max-width: 991px) {

	body,
	html {
	-webkit-overflow-scrolling: touch;
	}

	.novoproduto {
	padding: 12px 12px 12px 12px;
	}

	.novoproduto .capa {
	min-height: 120px;
	float: right;
	max-width: 120px;
	}

	.novoproduto .capa img {
	min-height: 0px;
	}

	.novoproduto .lp {
	padding-left: 5px;
	padding-right: 5px;
	}

	.novoproduto .npr {
	padding-right: 0;
	}

	.novoproduto .plus {
	margin: 0 0 0 0;
	}

	.novoproduto:last-child {
	margin-bottom: 18px;
	}

	.categoria .novo-vertudo {
	margin: -6px 0 -2px 0;
	padding-bottom: 12px;
	}

	.novoproduto .row-add {
	margin-top: 10px;
	}

	.subtotal-adicionar {
	position: fixed;
	width: 92%;
	padding: 8px 8px 8px 8px !important;
	margin: auto;
	z-index: 10;
	bottom: 10px;
	background: rgba(255,255,255,.98);
	box-shadow: 0 0 10px rgba(0,0,0,.4);
	border-radius: 6px;
	}

	.npr {
	padding-right: 0;
	}

	.subtotal-adicionar .row {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.subtotal {
	display: block;
	padding: 5px 0 0 0;
	text-align: center;
	font-size: 16px;
	}

	.sacola-adicionar {
	padding: 8px 5px 6px 5px;
	}

	.sacola-adicionar i {
	margin: 0 8px 0 0;
	transform: translateY(0);
	font-size: 12px;
	font-weight: 700;
	}

	.space-brand {
	width: 100%;
	height: 55px;
	}

	.relacionados {
	margin-top: -34px;
	}

}

/* CAIXOTE */

@media (min-width: 992px) and (max-width: 1024px) {

}

@media (min-width: 1180px) {

}


/* ==========================================================================
   VARIACOES DO PRODUTO — diagramacao
   Acrescentado em 15/08/2026. Fica no fim do novo.css, entao sobrescreve
   as regras antigas de .opcoes/.opcao sem precisar edita-las.

   O problema antigo: as opcoes usavam float + width 49%. Cartoes com textos
   de tamanhos diferentes viravam degraus, sobrava um vao de 2% irregular e
   item impar ficava sozinho com meia largura.
   A solucao: CSS Grid. Duas colunas exatas, altura igualada por linha,
   espacamento identico entre todas.
   ========================================================================== */

/* ---- cabecalho do grupo: nome a esquerda, regra a direita ---- */

.line-variacao > .row:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px 0;
}

.line-variacao > .row:first-child > [class^="col-"] {
  width: auto;
  float: none;
  padding: 0;
}

.line-variacao .thelabel {
  display: block;
  margin: 0 !important;
  float: none !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.line-variacao .escolhas {
  display: inline-block;
  margin: 0 !important;
  float: none !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  white-space: nowrap;
}

/* ---- a grade das opcoes ---- */

.opcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 -5px;
}

.opcoes::before,
.opcoes::after { display: none !important; }

.opcoes .opcao,
.opcoes .opcao:nth-child(even) {
  display: flex;
  float: none !important;
  /* duas colunas exatas: metade da largura menos a metade do respiro */
  flex: 0 0 calc(50% - 10px);
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px);
  margin: 0 5px 10px 5px !important;
  min-height: 0;
  align-items: stretch;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.opcoes .opcao:hover {
  border-color: rgba(0, 0, 0, .22);
  background: rgba(0, 0, 0, .05);
}

.opcoes .opcao.active {
  background: #fff;
  border-color: rgba(0, 0, 0, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

/* ---- o quadrado do check acompanha a altura do cartao ---- */

.opcoes .opcao .check {
  flex: 0 0 46px;
  width: 46px !important;
  height: auto !important;
  float: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .05);
  border-right: 1px solid rgba(0, 0, 0, .07);
}

.opcoes .opcao.active .check {
  background: #111;
  border-right-color: #111;
}

.opcoes .opcao .check i {
  font-size: 15px;
  line-height: 1;
}

/* ---- texto ---- */

.opcoes .opcao .detalhes {
  flex: 1 1 auto;
  width: auto !important;
  float: none !important;
  padding: 11px 13px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.opcoes .opcao .titulo {
  display: block;
  padding: 0 !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

.opcoes .opcao .adicional {
  display: inline;
  font-weight: 700;
  white-space: nowrap;
}

.opcoes .opcao .descricao {
  display: block;
  margin: 3px 0 0 0;
  font-size: 12px;
  line-height: 1.35;
  opacity: .68;
  word-break: break-word;
}

/* descricao vazia nao pode ocupar espaco */
.opcoes .opcao .descricao:empty { display: none; }

/* o clear antigo virava item da flex e abria um vao */
.opcoes .opcao > .clear { display: none !important; }

.comprar .line-variacao {
  padding: 16px 0 4px 0;
}

/* ---- celular: uma coluna ---- */

@media (max-width: 767px) {

  .opcoes .opcao,
  .opcoes .opcao:nth-child(even) {
    flex: 0 0 calc(100% - 10px);
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px);
    margin: 0 5px 8px 5px !important;
  }

  .line-variacao > .row:first-child {
    align-items: flex-start;
    gap: 6px;
  }

  .opcoes .opcao .check {
    flex: 0 0 42px;
    width: 42px !important;
  }

  .opcoes .opcao .detalhes { padding: 10px 12px !important; }

}


/* ==========================================================================
   CARTÕES DE PRODUTO — ALINHAMENTO À PROVA DE TEXTO
   Acrescentado em 16/08/2026, no fim do novo.css.

   O PROBLEMA
   ----------
   Os cartões desalinhavam por dois motivos, e os dois apareciam juntos:

   1. O bloco do preço tinha altura variável.
      Produto COM preço mostra "A partir de" (1 linha).
      Produto SEM preço mostra "Selecionar opcionais" dentro de um
      .apenas-single com max-width:70px, que quebra em 2 linhas E ainda
      ganha margin-top de 12px. Resultado: o botão desce.

   2. O titulo sobre a foto tinha 1, 2 ou 3 linhas conforme o nome.

   Somando os dois, cada cartão terminava numa altura diferente e os
   botões ficavam em degraus.

   A SOLUÇÃO
   ---------
   Cada faixa do cartão passa a ter altura RESERVADA, e o botão é
   empurrado para o fundo. A altura total deixa de depender do texto.
   Título com 1 ou 3 linhas, com preço ou sem preço: mesma altura.
   ========================================================================== */

/* o cartão vira uma coluna: capa, textos, e o botão sempre no fim */
.categoria .produto {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  /* o min-height: 370px original fica de pe. Se algum navegador antigo
     ignorar o flex, os cartoes ainda tem um piso comum de altura. */
}

.categoria .produto > a {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100%;
}

/* ---- a foto e o nome sobre ela ---- */

.categoria .produto .capa {
  flex: 0 0 auto !important;
  /* deixa de ser table para virar flex: assim o nome cola no rodape da
     foto sem depender do vertical-align, que quebrava com o recorte */
  display: flex !important;
  align-items: flex-end !important;
  height: 250px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box;
}

.categoria .produto .capa .nome {
  /* no máximo 3 linhas; o que passar é cortado, em vez de estourar
     a borda do cartão como acontecia antes */
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  width: 100%;
  height: auto !important;
  /* altura EXATA de 3 linhas: 3 x 16px. Assim o corte cai sempre entre
     linhas, mesmo em navegador que nao suporte o line-clamp. Nunca meia linha. */
  line-height: 16px !important;
  /* 48px de texto + 24px do padding (box-sizing: border-box) */
  max-height: 72px;
  padding: 12px 10px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

/* ---- a faixa "A partir de" / "Selecionar opcionais" ----
   Altura reservada IGUAL nos dois casos. É o que trava o degrau. */

.categoria .produto .apenas,
.categoria .produto .apenas-single {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 32px;
  max-width: none !important;
  margin: 0 0 4px 0 !important;
  padding: 0 4px;
  line-height: 14px;
}

.categoria .produto .apenas br,
.categoria .produto .apenas-single br { display: none !important; }

/* ---- o preço: altura reservada mesmo quando é só um ponto branco ---- */

.categoria .produto .valor {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin: 0 0 8px 0 !important;
}

.categoria .produto .valor_anterior { min-height: 16px; }

/* ---- o botão, sempre colado no fundo ---- */

.categoria .produto .detalhes {
  margin-top: auto !important;
  flex: 0 0 auto !important;
}

/* ---- as colunas da linha ficam com a mesma altura ----
   Sem isso, o "fundo" de cada cartão é o fundo dele, não o da linha. */

.produtos > .row,
.produtos > .row.tv-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.produtos > .row > [class^="col-"],
.produtos > .row > [class*=" col-"] {
  display: flex;
  flex-direction: column;
}

/* o clearfix do bootstrap vira item da flex e abre um vao: some com ele */
.produtos > .row::before,
.produtos > .row::after { display: none !important; }

/* ---- celular: 2 por linha, mesma regra ---- */

@media (max-width: 767px) {
  .categoria .produto .capa { height: 190px !important; }
  .categoria .produto .capa .nome {
    font-size: 13px;
    line-height: 15px;
    max-height: 69px;   /* 45px de texto (3 x 15) + 24px de padding */
    -webkit-line-clamp: 3;
  }
  .categoria .produto .apenas,
  .categoria .produto .apenas-single { min-height: 30px; font-size: 11.5px; }
  .categoria .produto .valor { min-height: 24px; font-size: 16px; }
}

/* ---- rede de segurança: dois .apenas seguidos ----
   A home da loja tinha o texto quebrado em DOIS spans:
       <span class="apenas">Este item possui</span>
       <span class="apenas">opcionais</span>
   Cada um reservando 32px virava 64px, e o botão descia.
   O markup foi unificado, mas se sobrar algum caso em outra tela,
   esta regra impede que o degrau volte. */

.categoria .produto .apenas + .apenas {
  min-height: 0 !important;
  margin-top: -6px !important;
}

/* ---- o container da home tem um nivel a mais ----
   home:      .produtos > .row > .tv-infinite   > .col-...
   categoria: .produtos > .row                  > .col-...
   Os dois precisam esticar as colunas. */

.produtos > .row > .tv-infinite,
.produtos > .row > .novalistagem {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.produtos > .row > .tv-infinite > [class^="col-"],
.produtos > .row > .tv-infinite > [class*=" col-"],
.produtos > .row > .novalistagem > [class^="col-"],
.produtos > .row > .novalistagem > [class*=" col-"] {
  display: flex;
  flex-direction: column;
}

.produtos > .row > .tv-infinite::before,
.produtos > .row > .tv-infinite::after,
.produtos > .row > .novalistagem::before,
.produtos > .row > .novalistagem::after { display: none !important; }


/* ==========================================================================
   NOTA / COMPROVANTE — quebra de linha e impressão
   Acrescentado em 17/08/2026, no fim do novo.css.

   O PROBLEMA
   ----------
   O endereco da loja e uma PALAVRA UNICA, sem espaco:
       supermarcasonline.deliverybrazil.com.br
   Sem regra de quebra, o navegador nao tem onde cortar e a linha
   estoura a caixa — na tela e no papel.

   Papel termico de PDV tem 58mm ou 80mm. Em caracteres isso e mais ou
   menos 32 ou 48 colunas. Qualquer palavra maior que isso vaza.
   ========================================================================== */

.comprovante,
.comprovante * {
  /* quebra dentro da palavra quando nao houver outro jeito */
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.comprovante {
  /* nada pode passar da borda da nota */
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* links longos (endereco da loja, WhatsApp) */
.comprovante a {
  overflow-wrap: anywhere;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
}

/* ==========================================================================
   IMPRESSAO — o que sai no papel
   Antes nao existia nenhuma regra @media print: o navegador imprimia a
   pagina inteira, com menu, formulario e barra lateral, e a nota saia
   espremida numa coluna.
   ========================================================================== */

@media print {

  /* some tudo, fica so a nota */
  body * { visibility: hidden !important; }
  .comprovante, .comprovante * { visibility: visible !important; }

  .comprovante {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 80mm;
    margin: 0 !important;
    padding: 4mm 3mm !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #000 !important;
  }

  /* o alerta da tela nao vai para o papel */
  .alerta-comprovante,
  .comprovante-parent > *:not(.comprovante) { display: none !important; }

  @page { margin: 0; }

}


/* ==========================================================================
   LISTAGEM DE PRODUTOS — CARTOES SEMPRE HARMONIOSOS
   Acrescentado em 17/08/2026, no fim do novo.css.

   O PROBLEMA
   ----------
   Na exibicao em LISTA, cada cartao crescia conforme a descricao.
   Um produto com 3 linhas de texto ficava do lado de outro com 12,
   e as duas colunas viravam degraus.

   A SOLUCAO — e por que ela e simples de proposito
   ------------------------------------------------
   Em vez de esticar cartao com flexbox (que briga com os floats do
   Bootstrap desta versao), eu tiro a CAUSA: dou altura fixa ao nome
   e a descricao.

   Com as duas faixas de texto sempre do mesmo tamanho, o cartao
   inteiro passa a ter altura previsivel — sem depender de flex,
   sem risco de quebrar em navegador nenhum.

   Texto que passar do limite e cortado com reticencias. O cliente
   clica no produto para ler o resto, que e o que ele faria mesmo.
   ========================================================================== */

/* ---- o nome: exatamente 2 linhas ---- */

.novoproduto .nome {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 2 x 16px. Altura fixa, entao 1 linha ou 2 ocupam o mesmo espaco. */
  line-height: 16px !important;
  height: 32px !important;
  margin-bottom: 6px !important;
  word-break: break-word;
}

/* ---- a descricao: exatamente 5 linhas ----
   Cinco linhas dao contexto para o cliente decidir se abre.
   Mais que isso vira parede de texto e ninguem le. */

.novoproduto .descricao {
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 14px !important;
  height: 70px !important;        /* 5 x 14, exato */
  word-break: break-word;
  margin: 0 !important;
}

/* ---- a faixa do preco tambem reservada ---- */

.novoproduto .preco {
  min-height: 26px;
  margin: 8px 0 0 0 !important;
}

/* ---- a foto nunca encolhe ---- */

.novoproduto .capa {
  height: 100px !important;
}

/* ---- o cartao ganha um piso comum ----
   12 padding + 32 nome + 6 + 70 descricao + 8 + 26 preco + 12 padding */

.novoproduto {
  min-height: 166px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.novoproduto:hover {
  border-color: rgba(0,184,148,.40) !important;
  box-shadow: 0 8px 20px rgba(16,20,45,.10);
  transform: translateY(-2px);
}

/* ---- celular: uma coluna, texto um pouco mais curto ---- */

@media (max-width: 767px) {
  .novoproduto .descricao {
    -webkit-line-clamp: 4;
    height: 56px !important;      /* 4 x 14 */
  }
  .novoproduto { min-height: 152px; }
}