/*START MODULO wsapi3-apps*/ /* Busca avançada (ver MODULE: ADVANCED SEARCH LOCAL em wsapi3-apps.js).
   Namespace próprio ("wsapi3-search-*") de propósito, não reaproveita as
   classes do app nativo ("advanced-search-*") — evita qualquer briga de
   especificidade/ordem com o CSS que a Webstore ainda injeta (appsData.css)
   enquanto o app nativo não é desligado para a loja. Quando for desligado,
   este arquivo já é auto-suficiente, sem exigir nenhum ajuste. */

:root {
  --wsapi3-search-prods-title-line-clamp: 3;
}

.input-busca::selection {
  background-color: #fff;
  color: #999;
}

/* botão "X" de limpar o campo */
.wsapi3-search-clear-button {
  position: absolute !important;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 3;
  color: #999;
  align-items: center;
  justify-content: center;
  width: 2rem;
}

.wsapi3-search-clear-button:hover {
  color: #333;
}

/* Fundo esfumaçado enquanto o painel de resultados está aberto (wsjsOptions.blur
   = true). backdrop-filter borra o que está ATRÁS deste elemento — input e
   #wsapi3-search-results ficam nítidos por estarem acima dele (z-index maior:
   3 e 1000 respectivamente), só o resto da página (z-index 2 pra baixo) borra.
   Sem opacity aqui: opacity nesse elemento esfumaçaria/desbotaria o próprio
   overlay branco translúcido, não o conteúdo atrás dele — quem borra o fundo
   é o backdrop-filter, então é ele (não opacity) que anima entrando. */
#wsapi3-search-bg {
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  animation: wsapi3SearchBg 300ms ease;
}

@keyframes wsapi3SearchBg {
  0% {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background-color: rgba(255, 255, 255, 0);
  }

  100% {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.35);
  }
}

#wsapi3-search-bg[wsapi3-search-bg-active="false"] {
  display: none;
}

#wsapi3-search-bg[wsapi3-search-bg-active="true"] {
  display: flex;
}

/* painel de resultados */
#wsapi3-search-results {
  flex-direction: column;
  display: none;
  /* Inicialmente escondido */
  margin-top: -1rem;
  background-color: #fff;
  position: absolute;
  /* Posicionado abaixo do input */
  z-index: 1000;
  width: 100%;
  left: 0;
  padding: 1rem 0;
  top: 100%;
  box-shadow: 0 5px 7px rgba(0, 0, 0, .2);
  border-radius: .5rem;
  animation: wsapi3SearchResultFadeIn 300ms ease;
}

#wsapi3-search-results[wsapi3-search-type="historySearch"] .wsapi3-search-suggestion>span {
  display: flex;
  align-items: center;
  height: 1.2rem;
  width: 1.2rem;
  fill: #999 !important;
  color: #999 !important;
}

#wsapi3-search-results[wsapi3-search-type="historySearch"] .wsapi3-search-suggestion>svg {
  width: 1.2rem;
  fill: #999 !important;
  color: #999 !important;
}

#wsapi3-search-results[wsapi3-search-type="historySearch"] .wsapi3-search-suggestion>span svg path {
  stroke: #999;
}

@keyframes wsapi3SearchResultFadeIn {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#wsapi3-search-results[wsapi3-search-type="suggestionSearch"] {
  min-width: 70rem;
}

#wsapi3-search-results .wsapi3-search-active {
  background-color: #d3d3d3;
}

#wsapi3-search-results p {
  margin: 0;
  font-size: 1.4rem;
  color: #222;
  width: 100%;
}

#wsapi3-search-results p[wsapi3-search-suspension-points="true"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsapi3-search-results-container {
  display: flex;
}

#wsapi3-search-results[wsapi3-search-show-suggestions="false"] .wsapi3-search-suggestions-container {
  display: none;
}

#wsapi3-search-results[wsapi3-search-show-products="false"] {
  min-width: fit-content;
}

#wsapi3-search-results[wsapi3-search-show-products="false"] .wsapi3-search-products-container {
  display: none;
}

#wsapi3-search-results[wsapi3-search-show-products="false"] .wsapi3-search-suggestions-container {
  border-right: none;
  width: 100%;
}

.wsapi3-search-results-container h2,
#wsapi3-search-results h2 {
  margin-bottom: 2rem;
  font-weight: 600;
  padding: 0 2rem;
}

.wsapi3-search-suggestion {
  transition: 300ms ease;
  cursor: pointer;
}

.wsapi3-search-suggestion:hover {
  background-color: #d3d3d3;
}

.wsapi3-search-suggestions-options-container[wsapi3-search-suggestion-scroll="on"] {
  overflow-y: scroll;
}

.wsapi3-search-suggestions-options-container {
  min-width: 25rem;
  max-height: 34rem;
}

.wsapi3-search-suggestions-container {
  border-right: 1px solid #ccc;
}

.wsapi3-search-suggestions-container .wsapi3-search-suggestions-options {
  display: flex;
  flex-direction: column;
}

.wsapi3-search-no-products {
  padding: 0 2rem;
}

.wsapi3-search-products-container {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  min-height: 44.3rem;
  height: fit-content;
}

.wsapi3-search-products {
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
  margin: 0 2rem;
  margin-bottom: 2rem;
  min-height: 33rem;
}

.wsapi3-search-product .wsapi3-search-product-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--photowrap);
}

.wsapi3-search-product .wsapi3-search-product-image img {
  height: unset;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  transition: 200ms ease, font-size 0s;
  position: absolute;
}

.wsapi3-search-products[wsapi3-search-products-scroll="off"] {
  max-width: initial;
  padding-bottom: 0;
}

.wsapi3-search-products[wsapi3-search-products-scroll="on"] {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.wsapi3-search-product {
  padding: 1rem;
  text-align: center;
  min-width: 20rem;
  padding-bottom: 2rem;
  position: relative;
  border-radius: .5rem;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1) !important;
  max-width: 20rem;
  min-height: 30rem;
}

.wsapi3-search-prods-title {
  display: -webkit-box;
  -webkit-line-clamp: var(--wsapi3-search-prods-title-line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsapi3-search-product-overlay {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: pointer;
}

.wsapi3-search-product img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: .5rem;
}

.wsapi3-search-product a {
  text-decoration: none;
  color: #333;
}

.wsapi3-search-product a:hover {
  text-decoration: underline;
}

.wsapi3-search-products-container .wsapi3-search-view-all {
  padding: 0 2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-decoration: underline;
  color: #3483FA;
  min-height: 4.4rem;
  height: 100%;
}

#wsapi3-search-results .wsapi3-search-title {
  font-weight: 600;
  padding: .5rem 2rem;
  font-size: 1.4rem;
}

#wsapi3-search-results .wsapi3-search-suggestion {
  padding: 0.5rem 2rem;
  align-items: center;
  display: flex;
  gap: 1rem;
}

.wsapi3-search-searching-error {
  padding: 0 2rem;
}

.wsapi3-search-suggestions-options-container::-webkit-scrollbar,
.wsapi3-search-products::-webkit-scrollbar {
  height: 1rem;
  width: 1rem;
}

.wsapi3-search-suggestions-options-container::-webkit-scrollbar-track,
.wsapi3-search-products::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.25rem rgb(211, 211, 211);
  border-radius: 0.5rem;
  border: 1rem solid #dfdfdf;
}

.wsapi3-search-suggestions-options-container::-webkit-scrollbar-thumb,
.wsapi3-search-products::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 0.5rem;
}

.wsapi3-search-suggestions-options-container::-webkit-scrollbar-thumb:hover,
.wsapi3-search-products::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.wsapi3-search-suggestions-container[wsapi3-search-suggestion-scroll="on"] {
  border-right: none;
}

/* loader */

.wsapi3-search-loading-products-container {
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
}

.wsapi3-search-loading-products {
  width: 48px;
  height: 48px;
  border: 5px solid #ccc;
  border-bottom-color: #444;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: wsapi3SearchRotation 1s linear infinite;
  position: initial;
}

@keyframes wsapi3SearchRotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Tamanho do ícone de lupa nas sugestões (estado padrão, fora do
   [wsapi3-search-type="historySearch"] já coberto acima) — sem isso o SVG
   (viewBox 237.76x240.91) renderiza no tamanho natural, enorme. */
.wsapi3-search-suggestions-options svg {
  width: 1.2rem;
  fill: #999 !important;
  color: #999 !important;
}

/* mic (busca por voz) */
.wsapi3-search-mic-button {
  z-index: 3;
  cursor: pointer;
  position: absolute !important;
  display: flex;
  left: 1rem;
  align-items: center;
  justify-content: center;
}

header .search-header .wsapi3-search-mic-button svg {
  fill: #999;
  color: #999;
}

header .search-header .wsapi3-search-mic-listening svg {
  animation: wsapi3SearchMicListeningBlink 1s infinite linear;
}

@keyframes wsapi3SearchMicListeningBlink {

  0%,
  100% {
    fill: red;
  }

  50% {
    fill: #999;
  }
}

/* css responsivo */
@media screen and (max-width: 1000px) {
  #wsapi3-search-results {
    left: initial;
  }
}

@media screen and (max-width: 800px) {
  /* Essa regra tem especificidade MAIOR que a #wsapi3-search-results genérica
     logo abaixo (id+atributo > id sozinho), então precisa zerar aqui também
     — senão o min-width:100% do estado "suggestionSearch" (que é o estado
     mostrado assim que digita algo, o caso mais comum) vence o width:auto
     da regra geral e anula o respiro lateral de 10px. */
  #wsapi3-search-results[wsapi3-search-type="suggestionSearch"] {
    min-width: 0;
  }

  /* !important necessário: positionCloseBtn() (wsapi3-apps.js) sempre seta
     left/width/right inline via JS (posicionamento pensado pro dropdown
     flutuar "colado" no input, cenário desktop) — sem !important essas
     regras nunca vencem o inline. 10px de respiro nas laterais (left+right
     fixos, width:auto — o browser calcula a largura sozinho) em vez de
     left:0/width:100% colado na borda, que parecia erro de layout.
     max-height 60vh + scroll: o painel pode crescer bastante (até 10
     produtos + sugestões), sem teto ele empurra a página; com teto vira um
     scroll só, dentro do próprio painel. */
  #wsapi3-search-results {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0;
    max-height: var(--wsapi3-search-max-height, 60vh);
    overflow-y: auto;
    text-align: left;
  }

  .wsapi3-search-results-container {
    flex-direction: column;
  }

  #wsapi3-search-results .wsapi3-search-title {
    text-align: left;
  }

  .wsapi3-search-suggestions-options-container[wsapi3-search-suggestion-scroll="on"] {
    overflow: hidden;
  }

  /* Ajuste pedido: lista de produtos sugeridos em formato de linha
     (miniatura pequena à esquerda, nome à direita) em vez do card
     vertical / scroll horizontal — ilegível na largura de tela do
     celular. Some com o scroll horizontal e com o card de sombra/
     borda arredondada; cada produto passa a ser uma linha inteira
     clicável (o .wsapi3-search-product-overlay continua cobrindo a
     linha toda, já que .wsapi3-search-product segue position:relative). */
  .wsapi3-search-products,
  .wsapi3-search-products[wsapi3-search-products-scroll="on"],
  .wsapi3-search-products[wsapi3-search-products-scroll="off"] {
    flex-direction: column;
    overflow-x: hidden;
    gap: 0;
    margin: 0;
    padding-bottom: 0;
    min-height: 0;
  }

  .wsapi3-search-products-container {
    min-height: 20rem;
  }

  .wsapi3-search-product {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 0;
    padding: 0.8rem 2rem;
    text-align: left;
    border-radius: 0;
    box-shadow: none !important;
    border-bottom: 1px solid #eee;
  }

  .wsapi3-search-product .wsapi3-search-product-image {
    width: 5rem;
    flex: 0 0 5rem;
    aspect-ratio: 1;
  }

  .wsapi3-search-product img {
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  .wsapi3-search-prods-title {
    flex: 1;
    margin: 0;
    text-align: left;
    font-size: 1.3rem;
    -webkit-line-clamp: 2;
  }
}
 /*END MODULO wsapi3-apps*/

/*START MODULO wsapi3-main*/ /* VERSAO 14/12/2022 */

.container {
  width: 100%;
  padding: 0 2rem;
}

.not-container {
  width: 100%;
}

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .nav:before, .nav:after, .panel-body:before, .panel-body:after, .modal-header:before, .modal-header:after, .modal-footer:before, .modal-footer:after {
  content: none;
}

.row {
  display: flex;
  width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1200px) {
  .container {
      width: 1200px;
      padding: 0;
  }
}

.no-gutter{
 padding-right: 0;
 padding-left: 0;
}
:focus {
 outline: none;
}
input, textarea, select, button,
input:hover, textarea:hover, select:hover, button:hover,
input:focus, textarea:focus, select:focus, button:focus,
input:active, textarea:active, select:active, button:active {
 outline: 0 !important;
 box-shadow: none !important;
 -webkit-box-shadow: none !important;
 -moz-box-shadow: none !important;
}
a {
 color: inherit;
}
label{
 font-weight: unset;
}
select {
 border-radius: var(--ws-radius-sm, 10px);
 border: 1px solid #999;
 color: #333;
}
ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
fieldset{
 border: 0;
 margin: 0;
 padding: 0;
}
.text-right{
 text-align: right;
}
@media (max-width: 575px) {
 html { font-size: 8px; }
}
@media (min-width: 576px) {
 html { font-size: 8.5px; }
}
@media (min-width: 768px) {
 html { font-size: 9px; }
}
@media (min-width: 992px) {
 html { font-size: 9.5px; }
}
@media (min-width: 1200px) {
 html { font-size: 10px; }
}
#main {
 background-color: #F4F5F6;
 left: 0;
 position: relative;
 transition: 0.3s ease, font-size 0s;
}
.div-migalha.page-produto, #produtos-relacionados, #descricoes, #produto #div-conteudo{
 background-color: white;
}
#b2b-warning {
    display: block;
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    background-color: white;
    border-top: 1px solid #222222;
}

/*CHECKOUT DIFERENCIADO*/
.link-meus-pedidos{
 display: none;
 float: right;
 margin: 3rem 0;
 padding: 0;
 position: relative;
 text-align: center;
 width: 4rem;
}
.link-meus-pedidos span{
 color: #444444;
 font-size: 2rem;
 line-height: 4rem;
 padding: 0;
 position: relative;
 text-align: center;
 width: 4rem;
}

/*FIX*/
.fa-angle-left:before {
 content: "\f104";
 position: relative;
 bottom: 1px;
 right: 1px;
}
.fa-angle-right:before {
 content: "\f105";
 position: relative;
 bottom: 1px;
 left: 1px;
}
.LV_BANNER_fundo, .LV_BANNER_fundo2{
 display: none;
}
#fotos-produto .imagem-unica {
 margin: 0 auto;
}
#funcao-botao-comprar:hover {
 opacity: 0.6;
 transition: 0.2s ease, font-size 0s;
}
.fb_iframe_widget {
 width: 100%;
}
.fb_iframe_widget span {
 width: 100%!important;
}
.fb_iframe_widget iframe {
 width: 100%!important;
}
#facebook ._2pi8{
 padding: 0;
}
#LV_DIV_BUSCA_AJAX {
  position: fixed!important;
  z-index: 999;
}
.LV_UL_BUSCA_AJAX {
  padding: .5rem;
 border: 1px solid #d7d7d7;
 box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.09);
 margin-top: -1px;
 background-color: white;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
}
.LV_UL_BUSCA_AJAX li {
  width: 100%;
}
.LV_UL_BUSCA_AJAX li a:hover {
  background-color: #f5f5f5;
}
.LV_UL_BUSCA_AJAX li a {
  display: flex;
  min-height: 6rem;
  width: 100%;
  padding:.5rem;
  align-items: center;
  transition: 200ms ease, font-size 0s;
}
.LV_UL_BUSCA_AJAX li a p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: 2.4rem;
  line-height: 2.4rem;
  overflow: hidden;
}
.LV_UL_BUSCA_AJAX li a img + p {
  margin-left: 1rem;
}
.LV_UL_BUSCA_AJAX li a img {
  width: 5rem;
  max-height: 5rem;
}
*[data-wsjs-module]:not([data-ws-rendered]):not(:has([data-ws-rendered])),
*[data-wsjs-prod-list]:not([data-ws-rendered]):not(:has([data-ws-rendered])) {
  display: none;
  color: transparent;
}

/* CSS Variables */
:root {
  --bodyColor: #444;
  --bodyFont: Arial;
  --bodyBackground: #FFFFFF;

  --placeHolderColor: #C9C9C9;
  --margin-all: .1rem solid #F5F5F5;

  --photowrap: 3/4;
  --prodperline: 4;
  --prodperline-categorie: 3;

  --bg-secundary: #F5F5F5;

  /* Fundo topo */
  --bg-header: #ffffffff;

  /* Favorito e carrinho */
  --color-header: #000000ff;
  
  /* Fundo dos campos do Topo */
  --bg-input-header: #f1f1f1;

  /* Texto e icones de dentro dos campos do topo */
  --color-input-header: #000000ff;

  /* Fundo do Menu */
  --bg-menu: #f84343ff;

  /* Texto do menu */
  --color-menu: #ffffffff;

  /* Fundo do menu em estado hover */
  --bg-hover-menu: #b61313ff;

  /* Texto do menu em estado hover */
  --color-hover-menu: #ffffffff;

  --bg-card-condition: -bg-card-condition-var;

  /* Fundo das condicoes */
  --bg-condition: #ffffff;
  
  /* Icones das condicoes */
  --color-icon-condition: #F84343;
  
  /* Titulo das condicoes */
  --color-title-condition: #393939ff;
  
  /* Legenda das condicoes */
  --color-subtitle-condition: #393939ff;

  /* Fundo da listagem dos produtos */
  --bg-prod-list: #ffffff;

  /* Titulo da listagem de produtos */
  --color-title-prod-list: #393939;

  /* Legenda da listagem de produtos */
  --color-subtitle-prod-list: #393939;

  /* Fundo da listagem dos fabricantes */
  --bg-manufacturer: #FFFFFF;

  /* Fundo do newsletter */
  --bg-newsletter: #ffe5e5ff;

  --bg-prod-list: #ffffff;

  --color-title-prod-list: #393939; 
  
  --color-subtitle-prod-list: #393939;

  /* Titulo do newsletter */
  --color-title-newsletter: #393939;

  /* Legenda do newsletter  */
  --color-subtitle-newsletter: #393939;

  /* Fundo dos campos */
  --bg-input-newsletter: #FFFFFF;

  /* Texto dos campos do newsletter  */
  --color-input-newsletter: #393939;

  /* Fundo do Rodape */
  --bg-footer: #F84343;

  /* Cor Do Titulo do Rodape */
  --color-title-footer: #ffffffff;

  /* Legenda do Rodape */
  --color-subtitle-footer: #ffffff;

  --bg-button-buyNow: #b61313ff;

  --color-button-buyNow: #FFFFFF;

  --typeBorder-button-buyNow: none;

  --sizeBorder-button-buyNow: 1px;

  --radiusBorder-button-buyNow: 1px;

  --colorBorder-button-buyNow: #ffffff00;

  --bg-button-buyLater: #F84343;
  
  --color-button-buyLater: #ffffff;

  --typeBorder-button-buyLater: none;

  --sizeBorder-button-buyLater: 1px;

  --radiusBorder-button-buyLater: 1px;
  
  --colorBorder-button-buyLater: #ffffff00;

  --bg-button-others: #FFFFFF;

  --color-button-others: #B61313;

  --typeBorder-button-others: none;

  --sizeBorder-button-others: 1px;

  --radiusBorder-button-others: 1px;

  --colorBorder-button-others: #B61313;

  --bg-tarja-prod: #b61313ff;

  --color-tarja-prod: #ffffffff;

  --bg-arrows: #F84343;

  --color-arrows: #ffffffff;

  --bg-dots: -bg-dots-var;

  --color-dots: -color-dots-var;

  /* Arredondamento padrão de inputs e de botões/links que simulam botões
     retangulares — knob global único, aqui porque wsapi3-main carrega em
     todas as páginas. Os design systems de checkout/carrinho herdam deste
     valor (--wscb-radius-sm e --cd-radius-sm apontam pra cá). Não vale pra
     pílulas (999px/5rem/...), círculos nem cards. */
  --ws-radius-sm: 10px;

}

/* Reset Global */
h1,
h2,
h3,
h4,
p {
  margin-block-start: 0;
  margin-block-end: 0;
}

*[data-wsholder] {
  display: block;
  background: linear-gradient(-45deg, #f3f4f5, #e8e8e8);
  opacity: .7;
  background-size: 400% 400%;
  animation: gradient 5s ease;
  animation-iteration-count: infinite;
  width: 100%;
}

[data-wsjs-loader] {
  transition: .2s ease, font-size 0s;
}

@keyframes gradient {
 0% {
  background-position: 0% 50%;
 }
 50% {
    background-position: 100% 50%;
 }
  100% {
    background-position: 0% 50%;
  }
}

h1 { 
  color: #222;
  font-size: 2.4rem; 
  line-height: 3.2rem;
  font-weight: 500; 
}

h2 {
  color: #222;
  font-size: 2rem; 
  line-height: 3rem; 
  font-weight: 400; 
}

h3 { 
  color: #222;
  font-size: 1.8rem; 
  line-height: 2.8rem; 
  font-weight: 400; 
}

h4 {
  color: #222;
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 400; 
}

body {
  left: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
  position: relative;
  transition: .4s ease, font-size 0s;
  background-color: var(--bodyBackground);
}

body, input, button, 
select, textarea { 
  font-size: 1.4rem; 
  font-family: var(--bodyFont),
  Arial, sans-serif;
  line-height: 2.4rem; 
  color: var(--bodyColor);
}

input::placeholder, textarea::placeholder {
  color: var(--placeHolderColor);
}

a { 
  text-decoration: none; 
}

span[data-wsjs-icon] svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bodyColor);
  fill: var(--bodyColor);
}

/* O ícone (SVG) só existe depois que o módulo ws-icons injeta ele via JS — até lá
   o placeholder fica vazio. Reserva o mesmo tamanho do SVG (1.5rem) de antemão pra
   não empurrar o resto do header horizontalmente quando o ícone aparece. */
span[data-wsjs-icon] {
  width: 1.5rem;
  height: 1.5rem;
}

rect { 
  fill: none; 
}

body, html {
  margin: 0;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  box-sizing: border-box;
}

.icon-ws {
  width: 4rem;
  min-height: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  user-select: none;
  color: var(--color-arrows);
  background: var(--bg-arrows);
  cursor: pointer;
  transition: .2s ease, font-size 0s;
}

.button-main,
.button-second, 
.button-third {
  padding: 0 2rem;
  height: 4.3rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none;
}

*[data-wsjs-icon] {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: fit-content;
}

/* Menu topo */
.nav-header .nav-menu-list a {
  text-decoration: none;
}

.nav-header .nav-menu-list {
  display: flex;
  justify-content: center;
}

.nav-header .nav-menu-list,
.nav-header .nav-menu-list a {
  color: var(--color-menu);
}

.nav-header .nav-menu-list a svg {
  fill: var(--color-menu);
}

.nav-header .nav-menu-list>li {
  height: fit-content;
  position: relative;
}

.nav-header .nav-menu-list .nav-menu-sub-list > li > a:hover {
  background-color: var(--bg-hover-menu);
  color: var(--color-hover-menu);
}

.nav-header .nav-menu-list .nav-menu-sub-list > li > a:hover svg {
  color: var(--color-hover-menu);
  fill: var(--color-hover-menu);
}

.nav-header .nav-menu-list .nav-menu-sub-list > li > a {
  padding: 1rem;
}

.nav-header .nav-menu-list li li a {
display: block;
cursor: pointer;
}

.nav-header .nav-menu-list .has-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-header .nav-menu-list > li > a {
  padding: 1.5rem 2rem;
  transition: all 250ms ease, line-height 0s, font-size 0s;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  min-width: max-content;
}

.nav-header .nav-menu-list ul ul {
  margin-top: 0;
}

.nav-header .nav-menu-list > li > .nav-menu-main,
.nav-header .nav-menu-list > li > .nav-menu-megamenu-container {
  opacity: 0;
  visibility: hidden;
  transition: all 200ms ease, font-size 0s;
}

.nav-header .nav-menu-list .dpt-0 > .nav-menu-main,
.nav-header .nav-menu-list .dpt-0 > .nav-menu-megamenu-container {
  position: absolute;
  padding: 1rem;
  background-color: var(--bg-menu);
  min-height: calc(18rem + 8.52em);
  max-height: calc(18rem + 8.52em);
  height: calc(18rem + 8.52em);
  overflow: hidden;
  width: 30rem;
  box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 10%);
}

.nav-header .nav-menu-list .dpt-0 > .nav-menu-main {
  padding: 1rem 0 1rem 1rem;
}

.nav-header .nav-menu-list .dpt-0 > .nav-menu-main {
  overflow: visible;
}

.nav-header .nav-menu-list .dpt-0 > .nav-menu-main.dropdown {
  padding: 0; 
  height: auto;
  max-height: initial;
  min-height: auto;
  width: 25rem;
}

.nav-header .nav-menu-list .nav-menu-megamenu-container {
  margin-left: 30rem;
}

.nav-header .nav-menu-list .nav-menu-megamenu-container img {
  max-width: 100%;
}

.nav-header .nav-menu-list .nav-menu-sub-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  padding-left: 2rem;
  left: 100%;
  transition: opacity .15s ease-in, left .2s ease, font-size 0s;
  opacity: 0;
}

.nav-header .nav-menu-list .nav-menu-sub-container.active {
  left: 0;
  opacity: 1;
}

.nav-header .nav-menu-list .dropdown .nav-menu-sub-container {
  opacity: 0;
  display: none;
  height: fit-content;
  min-height: fit-content;
  padding: 0;
}

.nav-header .nav-menu-list .dropdown .nav-menu-sub-container:hover {
  opacity: 1;
  display: block;
}

.nav-header .nav-menu-list .sub-title {
  margin: 1rem 2rem 0 0rem;
  display: flex;
  align-items: center;
  padding: 1rem 0;
  cursor: pointer;
  justify-content: space-between;
  border-bottom: .1rem solid ;
}

.nav-header .nav-menu-list .sub-title div {
  font-weight: 500;
  font-size: 10px;
}

.nav-header .nav-menu-list .sub-title a {
  display: inline;
  font-weight: bold;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  min-width: auto;
  height: 2.4rem;
  text-overflow: ellipsis;
}

.nav-header .nav-menu-list .nav-menu-sub-list {
  padding-right: 2rem;
  overflow-y: auto;
  height: calc(100% - 6.5rem);
}

.nav-header .nav-menu-list .nav-menu-main.dropdown .nav-menu-sub-list {
  padding-right: 0;
}

.nav-header .nav-menu-list .nav-menu-sub-list::-webkit-scrollbar {
  width: .75rem;
  background: #EAEAEA;
  border-radius: 1rem;
}

.nav-header .nav-menu-list .nav-menu-sub-list::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 1rem;
}

.nav-header .nav-menu-list .nav-menu-main > .nav-menu-sub-list {
  height: 100%;
}

.nav-header .nav-menu-list > li.alignToRight > .nav-menu-main,
.nav-header .nav-menu-list > li.alignToRight > .nav-menu-megamenu-container {
  right: 0;
}

/* Comeco do Menu */
/* Menu */
.nav-menu-list a {
  text-decoration: none;
}

.nav-menu-list {
display: flex;
justify-content: center;
}

.nav-menu-list > li {
height: fit-content;
position: relative;
}

.nav-menu-list > li:hover {
background-color: var(--bg-hover-menu);
}

.nav-menu-list > li:hover > a {
  color: var(--color-hover-menu);
}

.nav-menu-list > li:hover > a svg {
  fill: var(--color-hover-menu);
}

.nav-menu-list li li a {
display: block;
cursor: pointer;
}

.nav-menu-list .has-sub {
  display: flex;
  justify-content: space-between;
}

.nav-menu-list > li > a {
  padding: 1.5rem 2rem;
  transition: 250ms ease, font-size 0s;
}

.nav-menu-list ul ul {
  margin-top: 0;
}

.nav-menu-list > li > .nav-menu-main,
.nav-menu-list > li > .nav-menu-megamenu-container {
  opacity: 0;
  visibility: hidden;
}

.nav-header .nav-menu-list > li:hover > .nav-menu-main,
.nav-header .nav-menu-list > li:hover > .nav-menu-megamenu-container {
  opacity: 1;
  visibility: visible;
} 

.nav-menu-list .dpt-0 > .nav-menu-main,
.nav-menu-list .dpt-0 > .nav-menu-megamenu-container {
  position: absolute;
  padding: 2rem;
  background-color: var(--bg-menu);
  height: 39rem;
  min-height: 39rem;
  max-height: 39rem;
  overflow: hidden;
  width: 36rem;
  box-shadow: .4vw .6vw 1vw rgba(0, 0, 0, .25);
}

.nav-menu-list .dpt-0 li > .nav-menu-megamenu-container {
  display: none;
}

header .nav-menu-list .nav-menu-sub-container .nav-menu-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  opacity: 0;
  position: absolute;
}

.nav-menu-list .nav-menu-sub-container.active .nav-menu-overlay {
  display: none;
}

.nav-menu-list .nav-menu-megamenu-container {
  margin-left: 40rem;
}

.nav-menu-list .nav-menu-megamenu-container img {
max-width: 100%;
}

.nav-menu-list .nav-menu-sub-container {
  background-color: var(--bg-menu);
  width: calc(100% - 2rem);
  height: 100%;
  position: absolute;
  top: 0;
  padding-left: 2rem;
  left: 100%;
  transition: .2s ease, font-size 0s;
  box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 10%);
}

.nav-menu-list .nav-menu-sub-container.active {
  left: 0;
}

.nav-menu-list .sub-title {
  margin: 2rem 4rem 0 0;
  display: flex;
  align-items: center;
  padding: 2rem 0;
  cursor: pointer;
  justify-content: space-between;
  border-bottom: .1rem solid #e1e1e1;
}

.nav-menu-list .sub-title div {
  font-weight: 600;
}

.nav-menu-list .sub-title a {
  display: inline;
  min-width: fit-content;
}

.nav-menu-list .nav-menu-sub-list {
  padding-right: 2rem;
  overflow-y: overlay;
  height: calc(100% - 6.5rem);
}

.nav-menu-list .nav-menu-sub-list::-webkit-scrollbar {
  width: .75rem;
  background: #EAEAEA;
  border-radius: 1rem;
}

.nav-menu-list .nav-menu-sub-list::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 1rem;
}

.nav-menu-list .nav-menu-main > .nav-menu-sub-list {
  height: 100%;
} 

.nav-menu-list .nav-menu-sub-list > li.dropdown:hover > a {
background-color: var(--bg-hover-menu);
color: var(--color-hover-menu);
}
.nav-menu-list .nav-menu-sub-list > li.dropdown:hover > a svg { 
color: var(--color-hover-menu);
font: var(--color-hover-menu);
}

.nav-menu-list .nav-menu-sub-list > li {
  padding: 0;
}

.nav-menu-list > li.alignToRight > .nav-menu-main,
.nav-menu-list > li.alignToRight > .nav-menu-megamenu-container {
right: 0;
}

/* Lazyload */
.keen-slider img {
  transition: .4s ease-out, font-size 0s;
  max-height: 100%;
}

.lazyload {
    /* "auto" deixa os atributos width/height do <img> (já presentes antes do src
       carregar) reservarem o espaço via aspect-ratio nativo do navegador. Com
       height:100%, um pai sem altura definida colapsa a caixa pra 0px até a
       imagem real entrar — essa era a causa do salto de layout (CLS). */
    height: auto;
    min-width: 100%;
    background-color: gray;
    border: none;
    opacity: 0;
}

/* Pagina de Listagem */
*[data-wsjs-listing] {
  opacity: 0;
}
*[data-wsjs-listing=container] {
  opacity: 0;
  transition: .2s ease, font-size 0s;
}

/* Filtros - Pagina de Listagem */
.category-filter:not(:last-child) {
  padding-bottom: 2rem;
  border-bottom: .1rem solid #e1e1e1;
}

.category-filter h3,
.category-actual-menu h3 {
  padding: 0 2rem 2rem;
}

.category-actual-menu h3:only-child {
  padding: 0 2rem;
}

.category-filter > div:first-child {
  padding: 0 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.category-filter > div:first-child > div {
  display: flex;
  column-gap: 2rem;
  padding: 1rem 1.7rem;
  background: white;
  width: fit-content;
}

.category-filter > .filter-holder > label {
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  transition: .2s ease, font-size 0s;
  margin-bottom: 0;
}

.category-filter > div:first-child > div > label {
  line-height: initial;
}

.category-filter > div:first-child > div > a {
  display: flex;
  align-items: center;
}

.category-filter label {
  margin-bottom: 0;
}

.category-filter > .filter-holder > label:hover, 
.category-filter > .filter-holder > div > a:hover {
  background-color: var(--bg-hover-menu);
  color: var(--color-hover-menu);
}

.category-filter > .filter-holder > input + label::after {
  content: '+';
}

.category-filter > .filter-holder > input:checked + label::after {
  content: '-';
}

.category-filter > .filter-holder > div {
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
}

.category-filter > .filter-holder > input:checked ~ div {
  height: fit-content;
  margin: 0;
}

.category-filter > .filter-holder > div > a {
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  column-gap: 1.8rem;
  padding: 1rem 2rem;
}

.category-filter input {
  background: #FFFFFF;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 1.9rem;
  appearance: none;
  height: 1.9rem;
}

.category-filter input:checked {
  background-color: #C4C4C4;
}

.category-filter > .filter-holder > div > a > span {
  width: 100%;
  display: flex;
  position: absolute;
  height: 100%;
}

/* Comeco Menu da Listagem */
/* Menu de Categorias - Listagem */
.filter-container li {
  transition: .2s ease, font-size 0s;
}

.filter-container #departamento-allCats-menu {
  display: none;
}

.filter-container .nav-menu-list {
  flex-direction: column;
}

.filter-container .nav-menu-sub-list {
  width: 100%;
}

.filter-container .nav-menu-list .nav-menu-sub-list > li {
  padding: 0;
  position: relative;
}

.filter-container .nav-menu-list .nav-menu-sub-list > li:hover {
  background-color: var(--bg-hover-menu);
}

.filter-container .nav-menu-list .nav-menu-sub-list > li:hover > a {
  color: var(--color-hover-menu);
}

.filter-container .nav-menu-list .dpt-0>.nav-menu-main {
  opacity: 1;
  position: relative;
  background-color: var(--bg-secundary);
  width: 100%;
  padding: 0;
  height: 0;
  box-shadow: none;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  max-height: none;
}

.filter-container .nav-menu-main > .nav-menu-sub-list {
  width: calc(100% - 2rem);
}

.filter-container .nav-menu-list .nav-menu-sub-container {
  padding-left: 0;
  margin-left: 0;
  width: 100%;
  z-index: 5;
  overflow: visible;
}

.filter-container .nav-menu-list .nav-menu-sub-container > .sub-title { 
  display: none;
}

.filter-container .nav-menu-hiperlink {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 1rem 2rem;
}

.filter-container .nav-menu-hiperlink.has-sub::after {
  content: '+';
}

.filter-container .nav-menu-hiperlink.has-sub.active::after {
  content: '-';
}

.filter-container .nav-menu-list .nav-menu-item > .nav-menu-hiperlink.active + .nav-menu-main {
  height: fit-content;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

.filter-container .nav-menu-list .nav-menu-sub-list {
  padding-right: 0;
  overflow: visible;
  height: auto;
  width: 100%;
}

.filter-container .nav-menu-list .nav-menu-sub-container {
  height: fit-content;
}


.filter-container .nav-menu-list .nav-menu-sub-list .nav-menu-sub-list {
  background-color: var(--bg-secundary);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 1.15rem;
}

.filter-container .nav-menu-list .dpt-1 .nav-menu-sub-container {
  display: none;
}

.filter-container .nav-menu-list .dpt-1 .active + .nav-menu-sub-container {
  display: block;
}

.filter-container .nav-menu-list .dpt-2 .active + .nav-menu-sub-container {
  position: absolute;
}

.filter-container .nav-menu-list .dpt-2 .active + .nav-menu-sub-container {
  position: absolute;
  left: 0;
}

.filter-container .nav-menu-list .dpt-2 .active + .nav-menu-sub-container {
  animation: slidein 250ms ease;
}

@keyframes slidein {
  0% {
    opacity: 0;
    margin-left: 100%;
  }

  50% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
    left: 0;
  }
}

.other-pages-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
}

/* Antes ficava display:none por padrão, só revelado (display:flex) quando o
   <body> tinha uma classe de página legada da v2 (.PageCheckoutLogin,
   .UserArea, etc. — ver regras abaixo). No v3 o <body> usa
   class="estrutura_login"/"estrutura_cadastro"/"estrutura_outras_paginas",
   nenhuma dessas classes v2 nunca é aplicada, então o container (usado
   como wrapper único em estrutura_login/cadastro/outras_paginas) ficava
   escondido pra sempre — página em branco. As regras .PageCheckoutLogin
   .login-cart-row etc. abaixo continuam aí (inofensivas, só reafirmam
   display:flex) caso algum tema legado ainda dependa delas. */
.login-cart-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.UserAreaOrders .login-cart-row,
.PageCheckoutCar .login-cart-row,
.PageCheckout1 .login-cart-row,
.PageCheckout2 .login-cart-row,
.PageCheckoutLogin .login-cart-row,
.UserArea .login-cart-row,
.UserAreaOrder .login-cart-rows,
.UserAreaData .login-cart-row {
  display: flex;
}

.login-cart-row .other-pages-row,
.PageCheckoutCar .other-pages-row,
.PageCheckout1 .other-pages-row,
.PageCheckout2 .other-pages-row,
.PageCheckoutLogin .other-pages-row,
.UserArea .other-pages-row,
.UserAreaOrder .other-pages-row,
.UserAreaData .other-pages-row {
  display: none;
}

.prod-tags {
  display: flex;
  width: fit-content;
  background-color: var(--bg-tarja-prod);
  color: var(--color-tarja-prod);
  padding: 0 .5rem;
  font-size: 1.2rem;
}

*[data-wsjs-banner="category_description"] {
  opacity: 0;
}

#modal_newsletter {
  position: fixed;
  z-index: 10000;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

.contact-container [data-wsjs-error] > input, .contact-container [data-wsjs-error] > textarea,
form[data-wsjs-newsletter] [data-wsjs-error] input {
  background: #FFF8F8;
  box-shadow: none!important;
  border: 1px solid #D54040 !important;
}

.contact-container [data-wsjs-error]::after,
[data-wsjs-newsletter] > [data-wsjs-error]::after {
  content: attr(data-wsjs-error-message);
  color: #D54040;
  position: absolute;
  font-size: 1.2rem;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
  text-align: right;
}

.institutional-menu-nav .LV_DIV_SHOW_TEXTOS p {
  margin-bottom: 1rem;
}

/* Uma seção só fica escondida enquanto não tem nada renderizado dentro dela — se
   o servidor já entregou conteúdo pronto (data-ws-rendered em algum descendente),
   nasce visível direto no primeiro paint, sem esperar o JS confirmar "terminei".
   Isso evita que cada seção (banners, condições, produtos, fabricantes) apareça
   num momento diferente conforme seu próprio fetch termina — que é justamente o
   que causa vários pulos de layout em sequência com a página já visível. */
body *[data-wsjs-container]:not(:has([data-ws-rendered])) {
  display: none!important;
}

.PageCheckoutRegister .login-cart-row {
  display: flex;
}

.main-loading-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.main-loading-spinner {
 border: 3px solid rgba(0, 0, 0, 0.1);
 width: 60px;
 height: 60px;
 border-radius: 50%;
 border-left-color: #666;
 animation: spin 1s linear infinite;
}

/* Mesmo desenho do spinner acima, só que pra usar solto DENTRO do próprio
   conteúdo (uma lista carregando, um card, etc.) em vez de cobrir a tela
   inteira — sem position/z-index/fundo próprios, o elemento pai decide o
   layout. Uso: wsMain.tools.inlineSpinnerHtml() (ver função em wsMain.tools)
   ou direto <div class="main-loading-spinner main-loading-spinner--inline">. */
.main-loading-spinner--inline {
 width: 32px;
 height: 32px;
 border-width: 3px;
 margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Modal de alerta compartilhado (wsMain.showAlert) ── */
.ws-main-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ws-main-alert-in .15s ease;
}

.ws-main-alert-box {
  background: #fff;
  border-radius: 10px;
  padding: 2.4rem;
  max-width: 42rem;
  width: calc(100% - 3.2rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  animation: ws-main-alert-slide .18s ease;
}

.ws-main-alert-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: #999;
}

.ws-main-alert-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #222;
  line-height: 2.4rem;
  padding-right: 2rem;
}

.ws-main-alert-msg {
  font-size: 1.4rem;
  color: #444;
  line-height: 2.2rem;
  margin: 0;
}

.ws-main-alert-btn {
  align-self: flex-end;
  margin-top: .4rem;
}

@keyframes ws-main-alert-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ws-main-alert-slide {
  from { transform: translateY(-1rem); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
 /*END MODULO wsapi3-main*/

/*START MODULO wsapi3-wirestyle*/ .button-main {
  background-color: var(--bg-button-buyNow);
  color: var(--color-button-buyNow);
  border-width: var(--sizeBorder-button-buyNow);
  border-color: var(--colorBorder-button-buyNow);
  border-radius: var(--radiusBorder-button-buyNow);
  fill: var(--color-button-buyNow);
}

.button-main span[data-wsjs-icon] svg {
  fill: var(--color-button-buyNow);
}

.button-second {
  background-color: var(--bg-button-buyLater);
  color: var(--color-button-buyLater);
  border-style: var(--typeBorder-button-buyLater);
  border-width: var(--sizeBorder-button-buyLater);
  border-color: var(--colorBorder-button-buyLater);
  border-radius: var(--radiusBorder-button-buyLater);
  fill: var(--color-button-buyLater);
}

.button-second span[data-wsjs-icon] svg {
  fill: var(--color-button-buyLater);
}

.button-third {
  background-color: var(--bg-button-others);
  color: var(--color-button-others);
  border-style: var(--typeBorder-button-others);
  border-width: var(--sizeBorder-button-others);
  border-color: var(--colorBorder-button-others);
  border-radius: var(--radiusBorder-button-others);
  fill: var(--color-button-others);
  transition: .5s, font-size 0s;
}

.button-third span[data-wsjs-icon] svg {
  fill: var(--color-button-others);
}

.button-main:hover,
.button-second:hover,
.button-third:hover {
  opacity: .8;
}

body > div > div > section:not(.prod-row, .prod-container) {
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

body .prod-row > section {
  padding: 2rem 0;
}

/* Header */
header,
.header-top,
.header-bottom {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
}

header .header-top > .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2rem;
}

header .options-header {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  column-gap: 2rem;
}

header .header-top {
  width: 100%;
  z-index: 3;
  background-color: var(--bg-header);
}

header .header-bottom {
  z-index: 2;
  width: 100%;
  transition: all 250ms ease, transform 450ms, line-height 0s, font-size 0s;
  background-color: var(--bg-menu);
}

header .logo-header {
    margin: 2rem 0;
    width: 25rem;
}

header .logo-header a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* height/width:initial (=auto pra <img>) dependem do arquivo carregar pra ter tamanho — até lá
   o elemento fica sem caixa nenhuma. .logo-header já é width/height fixos (25rem/15rem, tanto
   no CSS quanto no style inline do template), então dá pra preencher 100% desde o primeiro
   frame (object-fit:contain mantém a proporção sem esticar) em vez de esperar o arquivo. Era a
   única imagem "sem tamanho" apontada pelo Lighthouse como causa raiz do maior CLS do desktop
   (a seção de condições, mais abaixo, era só o elemento que mais se movia por causa disso). */
header .logo-header img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* SVG de logo já traz largura/altura intrínsecas confiáveis no próprio arquivo
   (viewBox/width/height no elemento raiz) — diferente de bitmap, onde o navegador só sabe o
   tamanho depois de baixar o arquivo, daí a regra genérica acima usar 100%/object-fit pra evitar
   CLS. SVG não tem esse problema, então pode usar auto/initial (dimensiona pelo tamanho real do
   arquivo, limitado ao espaço disponível). Isso também corrige temas com .logo-header em
   width:fit-content: com width/height:100% a imagem entra num cálculo circular com o pai
   (fit-content depende do tamanho da imagem, que por sua vez tenta preencher 100% do pai) e
   acaba maior que o arquivo real; com initial + max-width/max-height:100% ela sempre respeita as
   proporções do arquivo, então fit-content encolhe certinho ao redor dela. */
.LV_LogotipoImg.LogoImgSvg img {
  width: initial;
  height: initial;
  max-width: 100%;
  max-height: 100%;
}

header .search-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-input-header);
}

header .search-header svg {
  fill: var(--color-input-header);
  color: var(--color-input-header);
}

header .search-header input {
  padding: 1rem;
  padding-right: 3.5rem;
  background: white;
  border: var(--margin-all);
  width: 100%;
  background-color: var(--bg-input-header);
  color: var(--color-input-header);
}

header .search-header button {
  position: absolute;
  border: none;
  background: none;
  cursor: pointer;
  right: 0;
  margin-right: 1.2rem;
  min-height: 4.4rem;
  padding-right: 1rem;
}

header .favorite-header svg,
header .cart-header svg {
  color: var(--color-header);
  fill: var(--color-header);
}

header .favorite-header {
  padding: 1.15rem;
}

footer {
  background-color: var(--bg-footer);
  color: var(--color-subtitle-footer);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 2rem 0;
}

footer h3 {
  margin-bottom: 1rem;
  color: var(--color-title-footer);
}

footer>.container {
    display: flex;
    justify-content: space-between;
}


footer>.container:only-child {
  flex-direction: column;
}

footer>.top-half>div:first-child {
    width: 40%;
}

footer > .top-half > div {
  width: 20%;
}

footer .list-footer {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

footer .top-half {
  position: relative;
  padding-bottom: 5rem;
  margin-bottom: 5rem;
  display: flex;
  justify-content: space-between;
  column-gap: 4rem;
}

footer .top-half:after {
  width: 100%;
  height: 0.1rem;
  background: var(--color-subtitle-footer);
  content: '';
  position: absolute;
  bottom: 0;
}

footer .bottom-half {
  column-gap: 5rem;
  padding-bottom: 2rem;
}

footer .bottom-half>div {
    width: 50%;
}

footer .rights {
  justify-content: flex-start;
}

footer .nav-menu-list-footer {
  display: flex;
  flex-direction: column;
}



footer .social-footer {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

footer .contact-footer li a {
  display: flex;
  align-items: center;
  gap: .5rem;
}

footer .contact-footer .commercialHours span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
}

footer .contact-footer span[data-wsjs-icon] svg {
  color: var(--color-subtitle-footer);
  fill: var(--color-subtitle-footer);
}

footer label span[data-wsjs-icon] svg {
  color: var(--color-subtitle-footer);
  fill: var(--color-subtitle-footer);
}

footer .payment-methods-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: .5rem;
}

footer .payment-methods-list span {
  padding: .5rem;
  aspect-ratio: 3/2;
  min-height: 3rem;
  max-height: 3rem;
  background-color: #fff;
  border-radius: .5rem;
}

footer .payment-methods-list span svg {
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: initial;
  box-sizing: border-box;
}

footer .social-footer svg {
  height: 2rem;
  width: 2rem;
  color: var(--color-subtitle-footer);
  fill: var(--color-subtitle-footer);
}

body .contact-social svg {
  height: 2.5rem;
  width: 2.5rem;
}

.category-search-list {
  width: 100%;
  height: fit-content;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

#banner-category_description {
  padding: 2rem;
  margin-bottom: 0;
  background: var(--bg-secundary);
}

#banner-category_description h1 {
  margin-bottom: 1rem;
}

.filter-container {
  width: 39.5rem;
  margin-right: 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  /* Nasce com opacity:0 (estrutura_listagem.html) até wsapi3-category-filter
     terminar de montar categorias/filtros/ordenação — sem transition o
     reveal (fc.style.opacity = '') era um corte seco (efeito "piscada"). */
  transition: opacity .2s ease;
}

.filter-container > * {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  padding: 2rem 0;
  background-color: var(--bg-secundary);
}

.filter-container .nav-menu h2 {
  padding: 0 2rem;
}

.filter-container .nav-menu h2:not(:last-child) {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: .1rem solid #e1e1e1;
}

.list-container {
  width: 100%;
}

.list-container section {
  padding-bottom: 2rem;
}

.category-search-list .container {
  display: flex;
}

hr {
  margin: 0;
  margin-bottom: 2rem;
  border-radius: 2rem;
  opacity: .2;
  border-color: #EAEAEA;
}

hr:first-child, hr:last-child, hr + hr {
  display: none;
}

.prod-list-empty {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  row-gap: 2rem;
  height: fit-content;
  width: 100%;
  background-color: #F5F5F5;
  padding: 2rem;
}

.prod-list-empty:not(:last-child) {
  margin-bottom: 2rem;
}

.prod-list-empty h1{
  margin-bottom: 0;
}

.prod-list-empty a {
  padding: 1rem 5rem;
}

/* BreadCrumb / Migalha */
.breadcrumb-container {
  margin-bottom: 2rem;
  color: #999;
}

.breadcrumb-container a {
  text-decoration: none;
}

.breadcrumb-container span {
  margin: 0 .5rem;
}

.breadcrumb-container span::after {
content: '/';
}

.breadcrumb-container.breadcrumb-hidden {
  display: none;
}

/* resultado da busca */
.searchResults-container {
  color: #999;
  margin-bottom: 2rem;
}

/* Pagina de Categoria */
.category-pagination-container, .category-pagination-buttons, .category-pagination-values {
  display: flex;
  align-items: center;
  align-content: center;
}

.category-pagination-container {
  justify-content: space-between;
  margin-bottom: 2rem;  
  padding-top: 2rem;
  border-top: .1rem solid #e1e1e1;
  color: #999;
}

.category-pagination-container:last-child {
  margin-bottom: 0;
}

.category-pagination-buttons span {
  min-width: 4rem;
  width: fit-content;
  height: 4rem;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.category-pagination-buttons span span {
  color: #8C8C8C;
  cursor: pointer;
}

.category-pagination-values span:first-child {
  background: var(--bg-secundary);
}

.category-pagination-container .arrow-first {
  position: relative; 
  transform: rotateZ(180deg);
}

.category-pagination-container .arrow-first > span:last-child {
  position: absolute; 
  margin-left: -2rem;
}


.category-pagination-container .arrow-prev {
  transform: rotateZ(180deg);
}

.category-pagination-container .arrow-last {
  position: relative;
}

.category-pagination-container .arrow-last > span:first-child {
  position: absolute;
  margin-left: -2rem;
}



.nav-menu-list-container hr {
  margin: 5rem 0 2rem;
}

/* Dots Slide */
.dots {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  display: flex;
  justify-content: center;
  column-gap: 1.5rem;  
  align-items: center;
  align-content: center;
  overflow: hidden;
  min-height: 2rem;
}

.dots .slide-dots {
  display: flex;
  min-width: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border: 2px solid #C9C9C9;
  border-radius: 100%;
  cursor: pointer;
  transition: .2s ease, font-size 0s;
}

.dots .slide-dots.active {
  width: 2rem;
  height: 2rem;
  background: var(--bg-arrows);
}

/* Arrows Slide */
.arrow--prev svg {
  transform: rotateZ(180deg);
}

.arrow--next svg {
  transform: rotateZ(0deg);
}

.arrow span[data-wsjs-icon] svg {
  fill: var(--color-arrows);
}

.arrow:hover {
  background: var(--color-arrows);
}

.arrow:hover span[data-wsjs-icon] svg {
  fill: var(--bg-arrows);
}

/* Ordem */
.combo-ordem-holder {
  padding: 0 2rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.combo-ordem-holder:not(:last-child) {
  border-bottom: .1rem solid #e1e1e1;
  padding-bottom: 2rem;
}

.combo-ordem-holder label {
  width: 70%;
  margin-bottom: 0;
}

.combo-ordem {
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  border: var(--margin-all);
  background-color: white;
  padding: 0 .8rem;
}

#viewing-order {
  border: none;
  padding: .8rem 0;
  width: 100%;
  background-color: transparent;
}

.contact-container, form.contact-block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

.contact-container h1 {
  margin-bottom: 2rem;
}

.contact-container .container:first-child {
  display: flex;
  column-gap: 2rem;
}

.contact-side {
  width: 100%;
}

.contact-side:first-child {
  min-width: 41.7rem;
  width: 41.7rem;
  max-width: 41.7rem;
}

.contact-block {
  background-color: var(--bg-secundary);
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.contact-container .contact-list {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 0 2rem;
}

.contact-container .contact-list li {
  display: contents;
}

.enterprise-data {
  display: flex;
  flex-direction: column;
}

.enterprise-data div {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 0 2rem;
}

.contact-social {
  display: flex;
  column-gap: 1.4rem;
  padding: 0 2rem;
}

.login-cart-row > .container {
  background-color: white;
  min-height: 70vh;
  margin: 2rem 0;
}

.others-pages-container {
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.other-pages-row .contact-container {
  padding: 2rem 0;
  row-gap: 0;
}

.tag-link {
  color: #1B7FF4;
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-weight: 400;
  text-decoration: underline;
}

.newsletter-holder .newsletter-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.newsletter-holder .newsletter-text p,
.newsletter-holder  label {
  color: var(--color-subtitle-newsletter);
}

.tag-link:hover {
  text-decoration: none;
}

header .nav-menu-megamenu-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
}

header .nav-menu-megamenu-item .nav-menu-megamenu-item-nome-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.2;
  min-height: calc(3 * 1.2 * 1.4rem);
  overflow: hidden;
  color: var(--bodyColor);
  display: flex;
  align-items: center;
  justify-content: center;
}

header .nav-menu-megamenu-item .nav-menu-megamenu-item-image-container {
  width: fit-content;
  height: calc(100% - ( 2 * 2.4rem ) );
  aspect-ratio: auto !important;
}

.category-infinity-container .button-second {
  width: 100%;
}

.nav-header .nav-menu-list .nav-menu-megamenu-container img {
  max-width: 100%;
  max-height: 100%;

}

[data-wsjs-infinitybutton] {
  margin: 0 auto;
}

.pseudo-youtube-frame {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.pseudo-youtube-frame iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.pseudo-youtube-frame img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  object-position: left;
  cursor: pointer!important;
}

.pseudo-youtube-frame .ytp-button {
  background: transparent;
  border: none;
  width: 68px;
  position: absolute;
  height: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

[data-wsjs-draginner] .banner-full-section .container {
  width: 100%;
  max-width: 100%;
  height: auto;
}
 /*END MODULO wsapi3-wirestyle*/

/*START MODULO wsapi3-banners*/ /* Banners renderizados no servidor (data-ws-render="server") ainda não têm as
   classes/IDs que o JS só adiciona depois de montar o slider (#banner-full,
   .banner-holder, .keen-slider) — então até a hidratação a imagem/vídeo fica
   sem NENHUMA regra de tamanho, e os atributos width/height do HTML (ex:
   1500x300) fazem o navegador renderizar literalmente nesse tamanho, estourando
   um viewport mobile inteiro até o JS "corrigir". O atributo data-wsjs-banner
   some do elemento final (replaceSpanTag não o copia), então essa regra só
   bate nesse estado cru e deixa de se aplicar sozinha depois da hidratação. */
[data-wsjs-banner] > a > img,
[data-wsjs-banner] > a > video {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.banner-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body > div > div > section.banner-full-row,
section.banner-full-row,
body>div>div>section:not(.prod-row,.prod-container).banner-row.banner-full-row {
  padding-top: 0;
}

.banner-row > .container {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

#banner-topo {
  width: 100%;
}
#banner-full {
  width: 100%;
  height: fit-content;
}

#banner-full img {
  width: 100%;
  max-width: 100%; 
  height: 100%;
}

#banner-mini .keen-slider__slide a {
  display: block;
  margin: 0 1rem;
}

#banner-mini img {
  max-width: 100%;
  height: auto;
}

#banner-mini:not(.mobile) {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-evenly;
  list-style: none;
  column-gap: 2rem;
}

#banner-mini.slide-container {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.banner-holder {
  position: relative;
}

.banner-holder a {
  display: flex;
}

.category-search-list .banner-holder {
  margin-bottom: 2rem;
}

.banner-holder .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.banner-holder .arrow--prev {
    left: 2rem;
}

.banner-holder .arrow--next {
    right: 2rem;
}

div.banner-popup-modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .9);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: opacity .3s ease-in, font-size 0s;
  cursor: pointer;
  animation: bannerPopUp 1s ease .0s 1 normal forwards;
}

div.banner-popup-modal img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

div.banner-popup-modal > div {
  display: flex;
  flex-direction: column;
  position: absolute;
}

div.banner-popup-modal span[data-wsjs-icon] {
  padding: .5rem;
  right: 1rem;
  top: 1rem;
  position: absolute;
  background-color: white;
}

div.banner-popup img {
  max-width: 100%;
}

.banner-holder a img {
  width: 100%;
  height: auto;
}

.banner-holder .keen-slider__slide img {
  max-width: 100%;
  width: 100%;
  height: initial;
}

.banner-holder .keen-slider__slide a {
  display: flex;
}

@keyframes bannerPopUp {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
  }
  100% {
    opacity: 1;
  }
}

#banner-category_description a {
display: initial;
}
 /*END MODULO wsapi3-banners*/

/*START MODULO wsapi3-info-lojas*/ *[data-wsjs-infos] {
  display: none;
}
 /*END MODULO wsapi3-info-lojas*/

/*START MODULO wsapi3-manufacturers*/ .manufacturer-row, .manufacturer-holder {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.manufacturer-row {
  margin-bottom: 2rem;
  background-color: var(--bg-manufacturer);
}

.manufacturer-holder .keen-slider__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.manufacturer-holder .keen-slider__slide a {
  width: fit-content;
  padding: 1rem;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: white;
  aspect-ratio: 2/1;
  max-height: 7rem;
}

.manufacturer-holder img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}
 /*END MODULO wsapi3-manufacturers*/

/*START MODULO wsapi3-condition*/ .condition-row {
  display: flex;
  justify-content: center;
  background-color: var(--bg-condition);
}

.condicoes-loja {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
  margin: 0;
}

.condicoes-loja .condicao-item {
  width: 18.4%;
  background-color: var(--bg-card-condition);
}

.condicoes-loja .condicao-item > .condicao-hiperlink {
  width: 100%;
}

.condicoes-loja .condicao-item, .condicoes-loja .condicao-item > .condicao-hiperlink {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-direction: column;
}

.condicoes-loja .condicao-icone {
  margin: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.condicoes-loja .condicao-textos {
  text-align: center;
}

.condicoes-loja .condicao-icone svg {
    height: 2.7rem;
    color: var(--color-icon-condition);
    fill: var(--color-icon-condition);
}

.condicoes-loja .condicao-titulo {
  margin-bottom: 0;
  color: var(--color-title-condition);
}

.condicoes-loja .condicao-subtitulo {
  color: var(--color-subtitle-condition);
}
 /*END MODULO wsapi3-condition*/

/*START MODULO wsapi3-login-options*/ .login-options-container .login-options-button {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: var(--margin-all);
  background-color: var(--bg-input-header);
  align-content: center;
  min-width: 18.6rem;
  min-height: 4.4rem;
  cursor: pointer;
}

.login-options-container .login-options-list span {
font-weight: bold;
}

.login-options-container .login-options-button .login-options-arrow-span {
  transform: rotateZ(90deg);
  font-weight: bolder;
  transition: 200ms ease, font-size 0s;
}

.login-options-button > div {
display: flex;
align-items: center;
align-content: center;
justify-content: flex-start;
column-gap: 1rem;
}

.login-options-container {
  position: relative;
}

.login-options-container span[data-wsjs-icon] svg, .login-options-container [data-wsjs-icon] svg, .login-options-container[data-wsjs-icon] svg {
fill: var(--color-input-header);
color: var(--color-input-header);
} 

.login-options-container .login-options-user-name {
color: var(--color-input-header);
}

.login-options-container .login-options-list {
display: flex;
flex-direction: column;
padding: 2rem;
position: absolute;
opacity: 0;
visibility: hidden;
background-color: white;
transition: 200ms ease, font-size 0s;
width: calc(100% + 4rem);
min-width: calc(18.6rem + 4rem);
}

.login-options-container.lateral-list .login-options-list {
border-radius: 0;
padding: 4rem;
background-color: #fff;
width: 100%;
display: flex;
flex-direction: column;
row-gap: 3rem;
}

.login-options-container.lateral-list .login-options-list > div:first-child {
  align-content: center;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 2rem;
  border-bottom: 0.1rem solid #e1e1e1;
}

.login-options-container.lateral-list .login-options-list > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  padding: 0 2rem;
  margin-bottom: 0;
  border: none;
  row-gap: 0;
}

.login-options-container.lateral-list .login-options-list > div:nth-child(2) span{
  margin-bottom: 1rem;
}

.login-options-container.lateral-list .login-options-list .button-third {
background: transparent;
color: inherit;
border: none;
fill: none;
border-radius: 0;
display: block;
padding: 0;
height: auto;
}

.login-options-container.lateral-list .login-options-list > div:last-child{
flex-direction: row;
column-gap: 1rem;
display: flex;
padding: 0 2rem;
}

.login-options-container.lateral-list {
opacity: 0;
}

.login-options-container.lateral-list .login-options-list {
overflow: hidden;
height: 100vh;
position: fixed;
right: -48rem;
top: 0;
width: 48rem;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
transition: right .4s ease, font-size 0s;
background: white;
opacity: 1;
display: flex;
border-radius: 0;
margin-top: 0;
visibility: visible;
align-items: flex-start;
padding: 4rem;
}

.login-options-container .login-options-list > div:nth-last-child(2) {
padding-bottom: 2rem;
row-gap: 1rem;
margin-bottom: 2rem;
border-bottom: .1rem solid #e1e1e1;
}

.login-options-container .login-options-list > div:only-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}

.login-options-container .login-options-list > div:last-child {
row-gap: 1rem;
}

.login-options-container .login-options-list > div {
display: flex;
flex-direction: column;
}

.login-options-container:hover .login-options-list {
  opacity: 1;
  visibility: visible;
}

.login-options-container:hover .login-options-arrow-span {
  transform: rotate(270deg);
}

.login-options-container .login-options-default {
  width: 25rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.login-options-container .login-options-default span p:first-child {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: .1rem solid #e1e1e1;
}

.login-options-container .login-options-logged {
min-width: 25rem;
width: fit-content;
display: block;
padding: 2rem;
border-left: var(--margin-all);
}

.login-options-container .closeList {
  cursor: pointer;
}

.login-options-container .login-options-logged a {
display: block;
}

.login-options-container .login-options-logged a:not(:last-child) {
margin-bottom: 2rem;
}

.login-options-user-name-logged {
display: none;
}

/* Sem sessão, o clique no menu abre a sidebar de identificação (wsapi3-login-sidebar,
   ver wsapi3-login-options.js) em vez deste dropdown de hover. */
.login-options-container.not-logged .login-options-list {
display: none !important;
}

.login-options-container.logged .login-options-user-name-logged {
display: block;
}
 /*END MODULO wsapi3-login-options*/

/*START MODULO wsapi3-login-sidebar*/ /* ============================================================
   wsapi3-login-sidebar — sidebar de identificação/login

   Mecânica do drawer (posição, largura, transição, overlay) segue os MESMOS
   valores de wsapi3-cart-drawer-rules (var(--cd-*), já globais em GERAL.css)
   pra manter o padrão do carrinho lateral, mas com classes próprias — não é
   um design-system genérico como wscb-*, então não reaproveitamos as classes
   .cart-holder/.cart-holder-header diretamente (nome amarrado ao carrinho).

   Conteúdo do formulário reaproveita wscb-* e ws-checkout-init-identify-*, de
   wsapi3-checkout-base e wsapi3-checkout-payment-page, os mesmos usados em
   wsapi3-login-page — garante visual idêntico à tela de login sem duplicar CSS.
============================================================ */

.wslg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  background: #000;
  z-index: 1000;
  transition: opacity .3s ease;
}

.wslg-holder {
  background-color: var(--cd-surface, #fff);
  height: 100vh;
  position: fixed;
  right: -48rem;
  top: 0;
  width: 48rem;
  max-width: 100vw;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  font-size: var(--cd-text-default, 1.4rem);
  color: var(--cd-ink, #555);
  transition: right .4s ease, font-size 0s;
}

.wslg-holder.active {
  right: 0;
}

.wslg-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2rem;
  border-bottom: .1rem solid var(--cd-line, #e1e1e1);
  box-sizing: border-box;
}

.wslg-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--cd-text-default, 1.4rem);
  font-weight: 700;
  color: var(--cd-ink-strong, #414141);
}

.wslg-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 2.4rem;
  text-align: left;
  /* Conteúdo (tela ativa, uma por vez) centralizado verticalmente no espaço
     abaixo do header — só título + X ficam fixos no topo (.wslg-header). */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Especificidade combinada (.wscb-title.wslg-title) de propósito: no bundle
   concatenado (GERAL.css) a ordem dos módulos no config.json pode colocar
   wsapi3-checkout-base DEPOIS deste arquivo, e .wscb-title sozinho já define
   margin:0 — com a mesma especificidade de uma classe só, quem viesse depois
   ganhava e zerava este espaçamento. */
.wscb-title.wslg-title {
  margin: 0 0 30px;
}

/* Todos os títulos da sidebar (main-title, "Recuperar senha"/"Verificar
   código"/"Nova senha", os dois do cadastro inline) em 14px em vez do 16px
   padrão de .wscb-title — só dentro do painel, não mexe no checkout/login-page. */
.wslg-scroll .wscb-title {
  font-size: var(--wscb-text-default, 1.4rem);
}

.wslg-identity-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.6rem;
  color: var(--cd-ink, #555);
}

.wslg-password-field {
  margin-top: 1.2rem;
}

.wslg-forgot-row {
  text-align: right;
  margin-top: .8rem;
}

[data-wsjs-login-sidebar="continue-btn"] {
  margin-top: 1.2rem;
}

.wslg-scroll .ws-checkout-init-identify-or {
  margin: 2rem 0;
}

.wslg-screen-desc {
  margin: .4rem 0 1.6rem;
}

.wslg-btn-row {
  display: flex;
  gap: 1.2rem;
  margin-top: .4rem;
}

.wslg-btn-row .wscb-btn {
  flex: 1;
}

@media (max-width: 540px) {
  .wslg-holder {
    width: 100vw;
    right: -100vw;
  }
}

/* ============================================================
   Tela de cadastro inline (screen-signup) — ver onIdentityNew em
   wsapi3-login-sidebar.js. Um campo por linha (.wslg-field-stack),
   sem <label> — o placeholder é o identificador do campo — pra caber
   confortavelmente na largura da sidebar.
============================================================ */

.wslg-field-stack {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: 1.6rem;
}

/* Botões de Pessoa física/jurídica: só o selecionado ganha fundo — não é um
   toggle segmentado (sem borda entre os dois nem borda externa). */
.wslg-person-type {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.6rem;
}

.wslg-person-type-option {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.8rem;
  border-radius: var(--ws-radius-sm, 10px);
  font-size: var(--wscb-text-default, 1.4rem);
  color: var(--wscb-ink-strong, #414141);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}

.wslg-person-type-option input[type="radio"] {
  display: none;
}

.wslg-person-type-option:has(input:checked) {
  background: #e4e4e4;
}

/* Fallback pra browsers sem :has() — classe aplicada via JS
   (_bindSignupScreen em wsapi3-login-sidebar.js). */
.wslg-person-type-option.selected {
  background: #e4e4e4;
}

/* Especificidade combinada por causa da mesma ordem de bundle explicada no
   comentário de .wscb-title.wslg-title acima. font-weight 600 (semi-bold) em
   vez do 700 padrão de .wscb-title, só nos títulos desta tela. */
.wscb-title.wslg-address-title {
  margin: .4rem 0 1.6rem;
  font-weight: 600;
}

/* Link "Não sei o CEP" embutido dentro do próprio campo, alinhado à direita.
   O CEP fica fora do .wslg-field-stack de endereço (só aparece quando o CEP
   já foi digitado) — sem esse gap ele cola direto no campo de rua abaixo. */
.wslg-cep-field {
  margin-bottom: 1.4rem;
}

.wslg-cep-wrap {
  position: relative;
}

.wslg-cep-wrap .wscb-input {
  padding-right: 11rem;
}

.wslg-cep-link {
  position: absolute;
  top: 50%;
  right: 1.4rem;
  transform: translateY(-50%);
  font-size: var(--wscb-text-small, 1.2rem);
  color: var(--wscb-link, #0789f7);
  text-decoration: none;
  white-space: nowrap;
}

.wslg-cep-link:hover {
  text-decoration: underline;
}

/* checkout-base.css usa !important no border-color do focus (var(--wscb-line),
   cinza) — precisa de !important aqui também pra sobrescrever só dentro do
   formulário da sidebar. */
.wslg-scroll .wscb-input:focus,
.wslg-scroll .wscb-select:focus {
  border-color: #222 !important;
}

/* Gênero/UF: a 1ª option faz de placeholder — cor igual à do ::placeholder
   dos outros campos enquanto nada foi escolhido. O label segue forms-style.
   Fallback pra browsers sem :has(): classe aplicada via JS (_bindSignupScreen). */
.wslg-scroll .wscb-select:has(option[value=""]:checked),
.wslg-scroll .wscb-select.wslg-select--placeholder {
  color: var(--wscb-muted, #909090);
}

.wslg-scroll .wscb-select option[value=""] {
  color: var(--wscb-muted, #909090);
}

/* E-mail ou CPF/CNPJ pré-preenchido a partir da identificação (já checado por
   checkSignup) vem travado — mesma ideia do texto fixo + "Trocar" da etapa de
   identificação. */
.wslg-scroll .wscb-input:read-only {
  background: #f5f5f5;
  color: var(--wscb-muted, #909090);
}

/* .wslg-scroll centraliza verticalmente por padrão (bom pras telas curtas:
   login, esqueci senha) — mas o formulário de cadastro é mais alto que o
   painel, e com justify-content:center a parte de cima fica acima da área
   visível, inacessível por scroll. Aplicada/removida via JS em
   _showSignupScreen/_hideSignupScreen (wsapi3-login-sidebar.js). */
.wslg-scroll.wslg-scroll--top {
  justify-content: flex-start;
}
 /*END MODULO wsapi3-login-sidebar*/

/*START MODULO wsapi3-newsletter*/ .newsletter-holder {
  padding: 5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-newsletter);
  color: var(--color-subtitle-newsletter);
}

.newsletter-holder h2 {
  color: var(--color-title-newsletter);
  margin-bottom: 1rem;
}

.newsletter-holder > div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.newsletter-holder > div > * {
    width: 44rem;
}

[data-wsjs-newsletter] > div {
  display: flex;
  flex-direction: column;
  position: relative;
}

[data-wsjs-newsletter] {
    display: flex;
    row-gap: 2rem;
    flex-direction: column;
    position: relative;
}

[data-wsjs-newsletter] input {
    padding: 1rem;
    border: var(--margin-all);
    color: var(--color-input-newsletter);
    background-color: var(--bg-input-newsletter);
}

[data-wsjs-newsletter] > .newsletter-message {
    opacity: 0;
    visibility: hidden;
    bottom: 0;
    position: absolute;
    font-weight: 700;
    width: 100%;
    text-align: center;
    padding: 1.5rem 0;
    margin-bottom: 5rem;
    transition: opacity 200ms ease, margin-bottom 400ms ease, font-size 0s;
}

[data-wsjs-newsletter] > .newsletter-message.success {
    visibility: visible;
    background-color: rgb(124, 255, 87);
    color: white;
    text-shadow: 0 0 0.1vw black;
}

[data-wsjs-newsletter] > .newsletter-message.error {
    visibility: visible;
    background-color: rgb(239, 251, 78);
    color: black;
}
 /*END MODULO wsapi3-newsletter*/

/*START MODULO wsapi3-prod-template*/ .prod-showcase-holder {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: white;
  padding: 2rem;
}

.prod-showcase-holder.unavaliable > * {
  opacity: .8;
}

.prod-showcase-link-overlay {
  width: 100%;
  height: 100%;
  left: 0;
  display: flex;
  position: absolute;
  top: 0;
  z-index: 1;
}

.prod-showcase-tags {
  position: relative;
  z-index: 1;
}

.prod-showcase-holder > .prod-showcase-tags:not(.prod-showcase-image) {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.prod-showcase-tags .prod-showcase-tags-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  z-index: 1;
}

.prod-showcase-tags .prod-showcase-tags-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  z-index: 1;  
}

.prod-showcase-tags .prod-showcase-favorite {
  transition: opacity .2s, font-size 0s;
  opacity: 0;
  cursor: pointer;
}

.prod-showcase-holder:hover .prod-showcase-tags .prod-showcase-favorite {
opacity: 1;
}

.prod-showcase-tags .prod-showcase-favorite span {
  background: #fff; 
  padding: 8px; 
  border-radius: 100px;
}   

.prod-showcase-tags .prod-showcase-favorite svg {   
  color: #e1e1e1;
  fill: #e1e1e1;
  background: transparent;
  transition: 200ms ease, font-size 0s;
}

.prod-showcase-tags .prod-showcase-favorite .active svg {
  fill: #de0000;
}

.prod-showcase-tags span:not(:first-child) {
  margin-top: 1rem;
}

.lista-relacionados .prod-showcase-holder {
  width: 100%;
  max-width: 21.4rem;
}

.prod-showcase-image a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
width: 100%;
position: relative;
overflow: hidden;
aspect-ratio: var(--photowrap);
}

.prod-showcase-image {
width: auto;
height: auto;
max-height: 100%;
}

.prod-showcase-image.unavaliable img {
opacity: .5;
}

.prod-showcase-image .whithout-image svg {
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
}

.prod-showcase-image a img {
  height: unset;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  transition: 200ms ease, font-size 0s;
  position: absolute;
}

.prod-showcase-image a img:nth-child(2) {
  opacity: 0;
}

.prod-showcase-holder.photo-swap-opacity:hover img:nth-child(1),
.prod-showcase-holder.photo-swap-transform-left:hover img:nth-child(1),
.prod-showcase-holder.photo-swap-transform-right:hover img:nth-child(1)
.prod-showcase-holder.photo-swap-transform-top:hover img:nth-child(1)
.prod-showcase-holder.photo-swap-transform-bottom:hover img:nth-child(1) {
  opacity: 0;
}



.prod-showcase-holder.photo-swap-opacity:hover img:nth-child(2) {
  opacity: 1;
}

.prod-showcase-holder.photo-swap-transform-left img:nth-child(2) {
  transform: scale(1) translate(-100%, 0);
  opacity: 0;
  right: 0;
}

.prod-showcase-holder.photo-swap-transform-right img:nth-child(2) {
  transform: scale(1) translate(100%, 0);
  opacity: 0;
  right: 0;
}

.prod-showcase-holder.photo-swap-transform-top img:nth-child(2) {
  transform: scale(1) translate(0, -100%);
  opacity: 0;
  right: 0;
}

.prod-showcase-holder.photo-swap-transform-bottom img:nth-child(2) {
  transform: scale(1) translate(0, 100%);
  opacity: 0;
  right: 0;
}

.prod-showcase-holder.photo-swap-left img:nth-child(2), 
.prod-showcase-holder.photo-swap-right img:nth-child(2),
.prod-showcase-holder.photo-swap-top img:nth-child(2), 
.prod-showcase-holder.photo-swap-bottom img:nth-child(2) {
  opacity: 1;
}

.prod-showcase-holder.photo-swap-left:hover img, 
.prod-showcase-holder.photo-swap-right:hover img,
.prod-showcase-holder.photo-swap-top:hover img, 
.prod-showcase-holder.photo-swap-bottom:hover img {
  transform: scale(1) translate(0);
  right: auto;
}

.prod-showcase-holder:hover img {
  transform: scale(1.15);
}

.prod-showcase-info {
display: flex;
flex-direction: column;
padding-top: 1rem;
}

.prod-showcase-info p {
  margin: 0;
}

.prod-showcase-info .prod-showcase-info-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 1.2;
min-height: calc(3 * 1.2 * 1.4rem);
overflow: hidden;
word-break: break-word;
}

.prod-showcase-info .prod-showcase-info-name:not(:last-child) {
  margin-bottom: 1rem;
}

.prod-showcase-info .prod-showcase-price-container {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-height: calc(3 * 1.2 * 1.4rem);
}

.prod-showcase-price {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: .5rem;
}

.prod-showcase-price > .prod-showcase-price-sell {
text-decoration: none;
font-weight: bold;
margin-left: 0;
}

.prod-showcase-price > .prod-showcase-price-off {
text-decoration: line-through;
font-weight: normal;
}

.prod-showcase-info span.prod-unavaliable-message, .prod-showcase-info  span.prod-consult-message {
  text-align: center;
  width: 100%;
  text-decoration: none;
}

.prod-showcase-info span.prod-unavaliable-message {
background-color: #E6E6E6;
color: #9B9B9B;
padding: 1rem;
font-weight: normal;
display: flex;
align-items: center;
justify-content: center;
}

.prod-showcase-parcela > span, .prod-showcase-avista > span {
  margin-top: .4rem;
}

.prod-showcase-info-button {
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
}
 /*END MODULO wsapi3-prod-template*/

/*START MODULO wsapi3-prod-list*/ .prod-row {
  background-color: var(--bg-prod-list);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.prod-list .prod-list-titles {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  row-gap: 1rem;
}

.prod-list .arrow--prev ~ .prod-list-titles {
  grid-column: 2;
}

.prod-list .keen-slider {
  grid-column: 1;
  grid-row: 2;
}

.prod-list .arrow--prev + .keen-slider {
  grid-column: 2;
  grid-row: 2;
}

.prod-list .arrow {
  grid-row: 2;
  align-self: center;
}

.prod-list .arrow--prev {
  grid-column: 1;
}

.prod-list .arrow--next {
  grid-column: 3;
}

.prod-list .dots {
  grid-column: 1;
  grid-row: 3;
}

.prod-list .arrow--next + .dots {
  grid-column: 2;
  grid-row: 3;
}

.prod-list-titles p {
  color: var(--color-subtitle-prod-list);
  text-align: center;
  max-width: 50rem;
}

.prod-list:not(.prod-list-related) h2 {
  color: var(--color-title-prod-list);
}

.prod-list .slide-container {
  width: 100%;
  display: grid;
  row-gap: 2rem;
  column-gap: 2rem;
}

.prod-list .slide-container.prod-list-offset .keen-slider {
  grid-column: 1;
  grid-row: 2;
}

.prod-list .keen-slider__slide {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.prod-list .prod-list-holder:not(.slide-container) {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(var(--prodperline), 1fr);
  width: 100%;
  column-gap: 2rem;
  row-gap: 5rem;
}

.prod-list .prod-list-holder:not(.slide-container) .prod-list-titles {
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-column-end: calc(var(--prodperline) + 1);
  row-gap: 1rem;
  margin-bottom: -3rem;
}

.prod-list .slide-container.prod-list-offset .keen-slider {
  width: calc(100% - 12rem) !important;
  margin: 0 auto;
}


#code-list-category .prod-list-holder:not(.slide-container) {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(var(--prodperline-categorie), 1fr);
}

.list-container {
  position: relative;
}

[data-wsjs-prod-list="category"] + span.category-loader {
  position: absolute;
 border: 3px solid rgba(0, 0, 0, 0.1);
 width: 60px;
 height: 60px;
 border-radius: 50%;
 border-left-color: #666;
  left: 50%;
  top: calc(50% - 10rem);
  animation: is-rotating-category 1s infinite ease;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}

.category-loader {
  opacity: 0;
  visibility: hidden;
}

@keyframes is-rotating-category {
  to {
      transform: translate(-50%, -50%) rotateZ(1turn);
  }
}

.prod-showcase-holder .prod-showcase-image {
  position: relative;
}

.ws-promo-relampago-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
}

.ws-promo-relampago-container .ws-promo-relampago__content {
  width: fit-content;
}
 /*END MODULO wsapi3-prod-list*/

/*START MODULO wsapi3-cart-sidebar*/ /* ============================================================
   wsapi3-cart-sidebar — carrinho lateral (drawer), compartilhado entre desktop e mobile

   Este módulo não tem o wsapi3-checkout-base disponível nas telas onde
   roda (carrega em toda a loja, não só no checkout), então o design
   system fica todo definido aqui mesmo, em variáveis — nada de valor
   solto espalhado elemento por elemento. Botões/links seguem os MESMOS
   valores visuais usados no checkout-base (verde de marca, azul de link)
   pra manter o padrão entre os dois, mesmo sem compartilhar arquivo.
   Só 2 tamanhos de fonte em todo o módulo: --cd-text-default (14px), usado
   em tudo, e --cd-text-small (12px), reservado exclusivamente ao texto do
   alerta de frete grátis (.cd-freteg-text) — não usar em mais nada.
============================================================ */

/* Brindes: mesmas cores, tipografia e controles do carrinho. O dialog usa
   a camada modal do navegador para ficar acima do drawer e dos widgets. */
.cd-gift-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin: 1rem 0 .8rem;
  padding: 1.4rem;
  border: 1px solid var(--cd-brand-soft);
  border-radius: var(--cd-radius-sm);
  background: var(--cd-brand-soft);
  color: var(--cd-brand-dark);
  font: inherit;
  font-size: var(--cd-text-default);
  font-weight: 700;
  cursor: pointer;
}
.cd-gift-alert svg { flex-shrink: 0; }
.cd-gift-alert:hover { border-color: var(--cd-brand-dark); }
.cd-gift-dialog {
  box-sizing: border-box;
  width: min(46rem, calc(100vw - 3.2rem));
  max-width: none;
  max-height: calc(100dvh - 3.2rem);
  margin: auto;
  padding: 3.2rem;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  background: var(--cd-surface);
  color: var(--cd-ink);
  font-family: var(--cd-font);
  font-size: var(--cd-text-default);
  text-align: center;
  overflow-y: auto;
  box-shadow: 0 1rem 4rem rgb(0 0 0 / 20%);
}
.cd-gift-dialog::backdrop { background: rgb(0 0 0 / 60%); }
.cd-gift-dialog[data-mode="choose"] { width: min(90rem, calc(100vw - 3.2rem)); }
.cd-gift-dialog-close { position: absolute; top: 1.2rem; right: 1.2rem; }
.cd-gift-dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: var(--cd-brand-soft);
  color: var(--cd-brand-dark);
}
.cd-gift-dialog-icon svg { width: 3.2rem; height: 3.2rem; }
.cd-gift-dialog h2 { margin: 0 0 1rem; font-size: var(--cd-text-default); font-weight: 700; color: var(--cd-ink-strong); }
.cd-gift-dialog p { font-size: var(--cd-text-default); line-height: 1.6; }
.cd-gift-dialog #cd-gift-dialog-description { margin: 0 0 2.4rem; }
.cd-gift-dialog .cd-gift-later { margin-top: 2rem; }
.cd-gift-dialog .button-main { padding: 1rem; font-family: inherit; }
.cd-gift-dialog .button-main:disabled { opacity: .5; cursor: wait; }
.cd-gift-slider { display: flex; gap: 1.6rem; overflow-x: auto; }
.cd-gift-slider.slide-container { display: block; position: relative; overflow: visible; }
.cd-gift-slider .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  min-width: 3.2rem;
  min-height: 3.2rem;
  border-radius: 50%;
  background: var(--cd-surface);
  color: var(--cd-ink-strong);
  box-shadow: 0 .2rem .8rem rgb(0 0 0 / 18%);
  cursor: pointer;
  z-index: 2;
}
.cd-gift-slider .arrow--prev { left: -1.6rem; }
.cd-gift-slider .arrow--next { right: -1.6rem; }
.cd-gift-slider .arrow svg { width: 1.2rem; height: 1.2rem; }
.cd-gift-slider .dots { margin-top: 1.6rem; }
.cd-gift-slider .keen-slider__slide { display: flex; }
.cd-gift-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  padding: 1.2rem;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm);
}
.cd-gift-slider > .cd-gift-card { flex: 0 0 24rem; }
.cd-gift-card-photo { width: 100%; height: 18rem; display: flex; align-items: center; justify-content: center; }
.cd-gift-card-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cd-gift-card .cd-gift-card-name { margin: 0; font-weight: 700; color: var(--cd-ink-strong); overflow-wrap: anywhere; }
.cd-gift-card .cd-gift-status { margin-top: auto; }
.cd-gift-error { color: var(--cd-danger); }
.cd-gift-error:empty { display: none; }
@media (max-width: 540px) {
  .cd-gift-dialog { padding: 3.2rem 2rem 2rem; }
  .cd-gift-card-photo { height: 16rem; }
}

:root {
  --cd-brand: #66c254;
  --cd-brand-dark: #51a840;
  --cd-brand-soft: #effbed;
  --cd-secondary: #222;
  --cd-secondary-dark: #000;
  --cd-ink: #555;
  --cd-ink-strong: #414141;
  --cd-muted: #909090;
  --cd-line: #e1e1e1;
  --cd-surface: #fff;
  --cd-danger: #c0392b;
  --cd-link: #0789f7;
  --cd-radius: 1.4rem;
  /* Herda o knob global de wsapi3-main (inputs + botões retangulares) — o
     drawer não carrega o wsapi3-checkout-base, mas wsapi3-main sempre existe.
     Fallback 1rem pra qualquer contexto sem o bundle completo. */
  --cd-radius-sm: var(--ws-radius-sm, 1rem);
  --cd-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
  --cd-font: inherit;

  /* Únicos 2 tamanhos de fonte permitidos neste módulo. */
  --cd-text-default: 1.4rem;
  --cd-text-small: 1.2rem;
}

/* ─────────────────────────────────────────────
   BASE / HOLDER
───────────────────────────────────────────── */
.cart-header {
  position: relative;
}

/* Layout de 3 regiões: header (auto) / .cd-scroll-area (flex:1, rola) /
   bottom-message (auto) — cart-holder em si NÃO rola mais, só a região do
   meio. Isso substitui uma tentativa anterior de deixar o rodapé fixo via
   position:fixed + transform no ancestral, que era frágil (dependia de
   containing block via transform e brigava com o próprio scroll do
   cart-holder) — com flex column simples, o rodapé "gruda" embaixo
   naturalmente, sem position especial nenhuma. */
.cart-holder {
  background-color: var(--cd-surface);
  height: 100vh;
  /* 100vh no Safari iOS é calculado pela altura MÁXIMA do viewport (barra de
     endereço/toolbar recolhida) — com a toolbar visível, a área realmente
     enxergada é menor, e o rodapé fixo do drawer (total + "Ir para o
     pagamento") acaba atrás dela. 100dvh (dynamic viewport height, com
     suporte desde Safari 15.4) acompanha o estado atual da toolbar; browsers
     sem suporte simplesmente ignoram essa linha e ficam no 100vh de cima. */
  height: 100dvh;
  position: fixed;
  right: -48rem;
  top: 0;
  width: 48rem;
  /* Precisa ficar acima do #overlay (z-index:1000), senão o drawer inteiro
     renderiza por baixo do blur do fundo. */
  z-index: 1001;
  display: flex;
  flex-direction: column;
  font-size: var(--cd-text-default);
  color: var(--cd-ink);
  transition: all .4s ease, font-size 0s;
}

/* Região do meio — único pedaço do drawer que rola. flex:1 faz ela ocupar
   todo o espaço sobrando entre header e rodapé; min-height:0 é necessário
   pro Firefox/Chrome permitirem essa área encolher abaixo da altura do seu
   conteúdo dentro de um flex column (senão overflow-y:auto não faz nada). */
.cd-scroll-area {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Sem isso, overflow-y:auto sozinho faz o overflow-x (implicitamente
     "visible") também computar como "auto" — então qualquer conteúdo mais
     largo que o container (ex.: um widget de terceiro injetado aqui dentro)
     abre uma barra de rolagem horizontal indesejada. Nunca deve existir
     scroll horizontal nessa área. */
  overflow-x: hidden;
  box-sizing: border-box;
  /* Respiro antes da borda grossa do rodapé (bottom-message) — sem isso o
     último elemento (sugestões, brindes, etc.) ficava colado nela. */
  padding-bottom: 2rem;
}

/* Cobre o .cart-holder inteiro (ele é position:fixed, então já é containing
   block pra isso, sem precisar de transform) enquanto os dados carregam —
   MENOS o header, que fica por cima dele (ver z-index em .cart-holder-header
   abaixo): título e botão fechar continuam visíveis/clicáveis durante o
   loading, pra o cliente conseguir sair do drawer mesmo se o carregamento
   travar ou demorar. */
.cd-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cd-surface);
}

.cd-loading-spinner {
  width: 3.6rem;
  height: 3.6rem;
  border: .3rem solid var(--cd-line);
  border-top-color: var(--cd-secondary);
  border-radius: 50%;
  animation: cd-spin .7s linear infinite;
}

@keyframes cd-spin {
  to { transform: rotate(360deg); }
}

/* Mesmo spinner de .cd-loading, só que substituindo a lista de opções de
   frete (não o drawer inteiro) enquanto /cart/shipping/select responde —
   ver _selecionarFrete. */
.cart-drawer-frete-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.cart-holder.float {
  right: 0;
  top: unset;
  height: fit-content;
  max-height: 35rem;
  position: absolute;
  margin-left: 3rem;
  width: 40rem;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease-in, font-size 0s;
  box-shadow: 0 .4vw .4vw rgb(0 0 0 / 25%);
}

/* Compartilhado entre desktop e mobile (wsapi3-cart-sidebar): a abertura/
   fechamento continua via `right` inline definido pelo JS (changeState),
   que no fechado usa -48rem (site usa 1rem = 10px, ou seja -480px). Se a
   largura aqui passar de 48rem o cálculo de `right` fechado não é mais
   suficiente pra tirar o drawer inteiro da tela — sobra uma tira visível
   encostada na borda direita. min(48rem, 100%) garante que a largura nunca
   ultrapasse o valor que o offset fechado já cobre, em qualquer viewport. */
@media (max-width: 640px) {
  .cart-holder {
    width: min(48rem, 100%);
  }

  .cart-holder.float {
    width: min(40rem, 100%);
    margin-left: 0;
  }
}

.cart-holder.float.empty {
  width: fit-content;
  white-space: nowrap;
}

.cart-header:hover .cart-holder.float {
  opacity: 1;
  overflow: auto;
  visibility: visible;
}

.cart-header:hover .cart-holder.float .cart-holder-header {
  display: none;
}

.cart-holder.float .cart-holder-header > span {
  display: none;
}

.cart-holder h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--cd-text-default);
  font-weight: 700;
  color: var(--cd-ink-strong);
}
.cd-header-title-icon { flex-shrink: 0; display: block; }

.cart-prod-counter {
  top: -.7rem;
  right: -.7rem;
  position: absolute;
  background: var(--bg-menu);
  color: var(--color-menu);
  border-radius: 100%;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  font-size: 1rem;
  justify-content: center;
  align-items: center;
  line-height: .8rem;
}

/* ─────────────────────────────────────────────
   HEADER — título + compartilhar/copiar/fechar
───────────────────────────────────────────── */
.cart-holder-header {
  flex-shrink: 0;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2rem;
  border-bottom: .1rem solid var(--cd-line);
  /* position+z-index acima do .cd-loading (z-index:3) — sem isso o header,
     mesmo vindo antes no DOM, pintava POR BAIXO do overlay de loading
     (elemento position:absolute some sempre acima de um estático, não
     importa a ordem), escondendo título e botão fechar enquanto carregava.
     background opaco pra não deixar o spinner por trás vazar nos vãos do
     header (ele por si só não tem fundo próprio). */
  position: relative;
  z-index: 4;
  background: var(--cd-surface);
  box-sizing: border-box;
}

.cart-holder.float .cart-holder-header {
  display: none;
}

.cart-holder-header span {
  cursor: pointer;
}

.cd-header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.cd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--cd-line);
  border-radius: 50%;
  background: var(--cd-surface);
  color: var(--cd-ink-strong);
  cursor: pointer;
  padding: 0;
  transition: background-color .15s, border-color .15s;
}
.cd-icon-btn:hover { background: #f5f5f5; border-color: #ccc; }
/* Força o tamanho do ícone injetado (svg externo pode vir sem width/height
   compatível — foi o que estourou o ícone do WhatsApp) independente do que
   o próprio SVG declarar. */
.cd-icon-btn svg {
  width: 1.6rem;
  height: 1.6rem;
  max-width: 1.6rem;
  max-height: 1.6rem;
  pointer-events: none;
}

/* Botão "nu" — só o ícone, sem círculo/fundo/borda. Usado no X de fechar e
   no ícone de compartilhar (diferente de .cd-icon-btn, que tem botão
   circular com borda — usado só nas opções do dropdown de compartilhar). */
.cd-plain-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cd-ink-strong);
}
.cd-plain-icon-btn svg { width: 1.8rem; height: 1.8rem; pointer-events: none; }

/* ─────────────────────────────────────────────
   COMPARTILHAR — ícone único que abre um dropdown com as opções
───────────────────────────────────────────── */
.cd-share {
  position: relative;
}

.cd-share-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  min-width: 17rem;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm);
  box-shadow: 0 .4rem 1.6rem rgb(0 0 0 / 12%);
  padding: .6rem;
  box-sizing: border-box;
  z-index: 1;
}
.cd-share-dropdown.cd-open { display: block; }

.cd-share-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem .8rem;
  border: none;
  background: none;
  border-radius: var(--cd-radius-sm);
  cursor: pointer;
  font-size: var(--cd-text-default);
  font-weight: 400;
  color: #222;
  font-family: var(--cd-font);
  text-align: left;
}
.cd-share-option:hover { background: #f5f5f5; }

.cd-share-option__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
}
.cd-share-option__icon svg { width: 100%; height: 100%; pointer-events: none; }

/* ─────────────────────────────────────────────
   ITENS DO CARRINHO
───────────────────────────────────────────── */
.cart-holder p {
  padding: 0 2rem;
  text-align: center;
}

.cart-holder a img {
  height: unset;
  max-width: 100%;
  max-height: 100%;
}

.cart-items-holder, .cart-default-message {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.6rem 2rem 0;
  box-sizing: border-box;
}

.cart-default-message > a {
  width: 100%;
  padding: .5rem;
}

.cart-default-message > p {
  margin-bottom: 2rem;
}

.cart-holder.float p {
  margin-bottom: 0;
}

.cart-default-message .total-holder {
  margin-bottom: 2rem;
  width: 100%;
  text-align: right;
}

.cart-holder .cart-prod-container {
  width: calc(100% - 4rem);
  max-height: 50rem;
  overflow-y: auto;
}

.cd-scroll-area::-webkit-scrollbar {
  width: .75rem;
  background: #eaeaea;
  border-radius: 1rem;
}

.cd-scroll-area::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 1rem;
}

#overlay {
  background-color: black;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}

[data-wsjs-cart="template"] {
  display: none;
}

[data-wsjs-cart="variation"] {
  display: block;
  opacity: 0;
  user-select: none;
}

[data-wsjs-cart="button"] {
  cursor: pointer;
}

/* Linha (imagem à esquerda + corpo à direita), sempre com uma borda embaixo
   — inclusive no último item, já que essa borda é o que separa a lista do
   subtotal (não tem borda extra em .cart-drawer-resumo pra isso). A imagem
   nunca quebra pra baixo (flex-shrink:0, tamanho fixo) e fica centralizada
   verticalmente contra o corpo inteiro (align-items:center na linha). */
.cart-holder div.cart-item-holder {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: .1rem solid var(--cd-line);
}

.cart-item-img {
  flex-shrink: 0;
  width: 10rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--cd-radius-sm);
  overflow: hidden;
  background: #fafafa;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.cart-item-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cart-item-name {
  font-size: var(--cd-text-default);
  color: var(--cd-ink-strong);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item-variations {
  display: flex;
  flex-direction: column;
}

.cart-item-variation {
  display: block;
  font-size: var(--cd-text-small);
  color: var(--cd-muted);
}

.cart-item-row-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cart-item-price {
  font-size: var(--cd-text-default);
  font-weight: 700;
  color: var(--cd-ink-strong);
}

.cart-item-qty {
  display: flex;
  /* stretch (padrão) em vez de center — com center, o botão ficava com sua
     altura "natural" (menor que a linha, por causa do padding do input ao
     lado), sobrando uma faixa branca acima/abaixo dele que não preenchia
     no hover. */
  align-items: stretch;
  border: 1px solid #ccc;
  border-radius: var(--cd-radius-sm);
  overflow: hidden;
  box-sizing: border-box;
}

.cart-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  margin: 0;
  box-sizing: border-box;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: var(--cd-text-default);
  line-height: 1;
  padding: .3rem .8rem;
  color: var(--cd-ink-strong);
  transition: background .15s;
  user-select: none;
}

.cart-qty-btn:hover {
  background: #e0e0e0;
}

/* Arredonda o canto de fora de cada botão igual ao container — só depender
   do overflow:hidden do .cart-item-qty pra recortar deixava um artefato de
   1px (borda "comida" à direita no +, friso branco no hover do − à
   esquerda), por imprecisão de sub-pixel no clip. */
.cart-qty-btn:first-child {
  border-radius: var(--cd-radius-sm) 0 0 var(--cd-radius-sm);
}
.cart-qty-btn:last-child {
  border-radius: 0 var(--cd-radius-sm) var(--cd-radius-sm) 0;
}

.cart-qty-input {
  width: 3.2rem;
  border: none;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  font-size: var(--cd-text-default);
  padding: .3rem .2rem;
  outline: none;
  -moz-appearance: textfield;
}

.cart-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.cart-remove-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cd-muted);
  padding: .3rem;
  display: flex;
  align-items: center;
  transition: color .15s;
}

.cart-remove-btn:hover {
  color: var(--cd-danger);
}

.cart-item-giftwrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--cd-text-small);
  color: var(--cd-ink);
  cursor: pointer;
}
.cart-item-giftwrap-input {
  width: 1.6rem;
  height: 1.6rem;
  accent-color: var(--cd-secondary);
  cursor: pointer;
}

.cart-item-cashback {
  font-size: var(--cd-text-small);
  font-weight: 700;
  color: var(--cd-ink-strong);
}

/* Item sem estoque (cart/view devolve quantity 0) — linha esmaecida, MENOS o
   botão de remover. opacity num ancestral não dá pra "desfazer" num filho, então
   em vez de opacity na .cart-item-holder inteira, esmaecemos "descascando" o
   caminho até .cart-remove-btn: em cada nível, os irmãos que NÃO levam ao botão.
   Cada elemento pega opacity uma vez só (seletores mutuamente exclusivos), sem
   empilhar .5*.5. */
.cart-item-holder.cd-item-oos > :not(.cart-item-body),
.cart-item-holder.cd-item-oos .cart-item-body > :not(.cart-item-row-top),
.cart-item-holder.cd-item-oos .cart-item-row-top > :not(.cart-remove-btn) {
  opacity: .5;
}

/* ─────────────────────────────────────────────
   SUGESTÕES / BRINDES — sempre em lista, nunca slider
───────────────────────────────────────────── */
.cd-suggestions,
.cd-gifts {
  width: 100%;
  padding: 1.6rem 2rem 0;
  box-sizing: border-box;
}

.cd-gifts-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-bottom: 1.6rem;
}

.cd-gift-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.cd-gift-status {
  font-size: var(--cd-text-small);
  font-weight: 700;
}
.cd-gift-status--chosen,
.cd-gift-status--ok { color: var(--cd-brand-dark); }
.cd-gift-status--wait { color: var(--cd-muted); }

.cd-gift-missing {
  font-size: var(--cd-text-small);
  color: var(--cd-muted);
}

.cd-suggestions-title {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--cd-text-default);
  font-weight: 700;
  color: var(--cd-ink-strong);
  margin: 0 0 1.4rem;
}

/* Mostra só ~2.5 itens por padrão (altura calculada em JS, ver
   _updateSuggestionsPeek), com um degradê esmaecendo o item cortado ao
   meio, e uma seta abaixo pra expandir a lista inteira. */
.cd-suggestions-list-wrap {
  position: relative;
  overflow: hidden;
  transition: max-height .3s ease;
}

.cd-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-bottom: 1rem;
}

.cd-suggestions-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5rem;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--cd-surface));
  pointer-events: none;
}

.cd-suggestions-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .4rem;
  padding: .6rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--cd-ink);
}
.cd-suggestions-more svg { transition: transform .2s ease; }
.cd-suggestions-more.cd-expanded svg { transform: rotate(180deg); }

.cd-suggestion-item {
  display: flex;
  gap: 1.2rem;
  /* Linha separando cada recomendado / brinde, igual aos itens do carrinho
     mais acima (.cart-item-holder). A borda fica 1.4rem abaixo do conteúdo e
     o gap:1.4rem da lista completa o respiro até o próximo item — some no
     último pra não sobrar um traço solto antes do fade/seta "ver mais".
     Vale nas duas telas: drawer lateral e #ws-added-sidebar (mesma classe). */
  padding-bottom: 1.4rem;
  border-bottom: .1rem solid var(--cd-line);
}
.cd-suggestion-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.cd-suggestion-item__img {
  width: 10rem;
  height: 10rem;
  flex-shrink: 0;
  border-radius: var(--cd-radius-sm);
  overflow: hidden;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-suggestion-item__img img { width: 100%; height: 100%; object-fit: cover; }

.cd-suggestion-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.cd-suggestion-item__name {
  font-size: var(--cd-text-default);
  color: var(--cd-ink-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cd-suggestion-item__prices {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.cd-suggestion-item__price-old {
  font-size: var(--cd-text-default);
  color: var(--cd-muted);
  text-decoration: line-through;
}
/* Botão "Adicionar ao carrinho" sempre grudado embaixo da coluna de info,
   independente de o nome do produto quebrar em 1 ou 2 linhas — sem isso,
   cada item da lista tinha o botão numa altura diferente (ficava com um
   ar desalinhado, "serrilhado", entre os itens). */
.cd-suggestion-item__info > .cart-drawer-link-btn {
  margin-top: auto;
  align-self: flex-start;
}

.cd-suggestion-item__price {
  font-size: var(--cd-text-default);
  font-weight: 700;
  color: var(--cd-ink-strong);
}

/* ─────────────────────────────────────────────
   RESUMO — subtotal / desconto / cupom (dados do /cart/view)
───────────────────────────────────────────── */
.cart-drawer-resumo {
  width: 100%;
  padding: 0 2rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

.cart-drawer-resumo-line {
  display: flex;
  justify-content: space-between;
  font-size: var(--cd-text-default);
  padding: .3rem 0;
  color: var(--cd-ink);
}

/* ─────────────────────────────────────────────
   RODAPÉ FIXO — alerta frete grátis + frete + cupom + total + avançar
───────────────────────────────────────────── */
.total-holder {
  display: none;
}

/* [data-wsjs-cart="bottom-message"] sozinho (0,1,0) empata em especificidade
   com o `.cart-default-message { padding: 0 }` de wsapi3-wirestyle-mobile —
   combinar os dois seletores na mesma regra (0,2,0) garante que o padding
   abaixo ganha independente da ordem dos módulos no config.json. */
[data-wsjs-cart="bottom-message"],
[data-wsjs-cart="bottom-message"].cart-default-message {
  /* bottom-message também tem a classe .cart-default-message (usada pra
     centralizar a mensagem de "carrinho vazio" em outro lugar) — aqui
     precisa voltar a ser bloco normal, senão os filhos viram itens de flex
     column com align-items:center e encolhem pro tamanho do conteúdo em
     vez de ocupar 100% da largura (foi isso que deixou "Total: R$ X"
     grudado e centralizado em vez de nas pontas). */
  display: block;
  /* Último filho do flex column .cart-holder — flex-shrink:0 garante que
     ele nunca encolhe pra abrir espaço, então fica sempre com sua altura
     natural, "grudado" embaixo (quem cede espaço é .cd-scroll-area, que tem
     flex:1). Sem position especial nenhuma. */
  flex-shrink: 0;
  width: 100%;
  /* .cart-holder já usa 100dvh (ver comentário acima), então este rodapé
     encosta exatamente no fim do viewport dinâmico do Safari iOS — que é
     onde fica a faixa de gesto do home indicator. Sem reservar
     env(safe-area-inset-bottom) aqui, o link "Ver carrinho"/botão
     "Continuar comprando" fica espremido contra essa faixa (relatado:
     corte visual mesmo com o drawer todo carregado). max() com o 1rem
     original garante que telas sem safe-area-inset-bottom (env(...) = 0)
     mantêm o padding de antes. */
  padding: 1.6rem 2rem max(1rem, env(safe-area-inset-bottom));
  border-top: .3rem solid #222;
  background-color: var(--cd-surface);
  box-shadow: var(--cd-shadow);
  box-sizing: border-box;
}

/* Alerta de frete grátis — versão própria do módulo (ver
   _renderFreteGratisAlert em wsapi3-cart-sidebar.js), não depende mais
   do HTML/CSS que vinha do app nativo "AlertaFreteGratis". */
.cd-freteg {
  width: 100%;
  margin-bottom: 1.2rem;
}

.cd-freteg-text {
  font-size: var(--cd-text-small);
  color: var(--cd-ink);
  margin-bottom: .6rem;
}

.cd-freteg-text b {
  color: var(--cd-ink-strong);
  font-weight: 700;
}

.cd-freteg-bar {
  position: relative;
  width: 100%;
  height: .6rem;
  border-radius: 999px;
  background: var(--cd-line);
  overflow: hidden;
}

.cd-freteg-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--cd-brand);
  transition: width .3s ease;
}

.cart-drawer-extra {
  width: 100%;
}

/* Linha padrão frete/cupom — ícone + rótulo em negrito à esquerda, ação em
   azul (estilo link) à direita. Usada tanto pro trigger (.cart-drawer-toggle)
   quanto pro estado "já selecionado" (mesma estrutura, texto diferente). */
.cart-drawer-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: .55rem 0;
  font-family: var(--cd-font);
  text-align: left;
}

/* Largura FIXA no container (não só no svg) — o ícone de cupom vem do
   sistema de ícones (data-wsjs-icon="coupon") com viewBox bem mais "cheio"
   que o do caminhão (frete), então mesmo forçando os dois svgs pro mesmo
   tamanho, sobrava folga diferente em cada lado e o texto "Frete"/"Cupom"
   saía desalinhado. Fixando a largura do container (não só do svg) e
   centralizando, o texto sempre começa no mesmo x, não importa o ícone. */
.cart-drawer-row__icon {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cd-ink-strong);
}
.cart-drawer-row__icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

.cart-drawer-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--cd-text-default);
  font-weight: 700;
  color: var(--cd-ink-strong);
}

.cart-drawer-row__action {
  flex-shrink: 0;
  color: var(--cd-link);
  font-size: var(--cd-text-default);
  font-weight: 400;
}

.cart-drawer-row:hover .cart-drawer-row__action { text-decoration: underline; }

/* Abre/fecha com transição em vez de display:none "seco" — max-height
   generoso (não precisa bater com a altura real) + opacity, ambos animados.
   box-sizing:border-box garante que o padding também fica "dentro" do
   orçamento de max-height:0, senão sobraria um respiro visível mesmo
   fechado. O toggle da classe cd-expanded acontece em bindToggle (JS). */
.cart-drawer-toggle-content {
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: max-height .3s ease, padding-bottom .3s ease, opacity .2s ease;
}
.cart-drawer-toggle-content.cd-expanded {
  max-height: 60rem;
  padding-bottom: 1.3rem;
  opacity: 1;
  transition: max-height .3s ease, padding-bottom .3s ease, opacity .25s ease .05s;
}

/* Link padrão do módulo — mesmo valor visual do .wscb-link do checkout-base
   (azul, sem underline, underline só no hover). */
.cart-drawer-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cd-link);
  text-decoration: none;
  font-size: var(--cd-text-default);
  font-weight: 400;
  font-family: var(--cd-font);
  white-space: nowrap;
  flex-shrink: 0;
  /* É um <button> (ao contrário do <span class="cart-drawer-row__action"> ao
     lado de "Inserir"/"Calcular frete") — sem isso, o padding nativo que o
     navegador dá a <button> (ex.: 1px 6px) some do reset acima, deixando
     "alterar"/"remover" com uma caixa um pouco maior/deslocada em relação a
     "Inserir", mesmo com a mesma fonte/cor. */
  padding: 0;
  margin: 0;
}
.cart-drawer-link-btn:hover { text-decoration: underline; }

.cart-drawer-frete-form,
.cart-drawer-cupom-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--cd-line);
  border-radius: var(--ws-radius-sm, 10px);
  overflow: hidden;
}

.cart-drawer-frete-form input,
.cart-drawer-cupom-form input {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.2rem;
  border: none;
  font-size: var(--cd-text-default);
  font-family: var(--cd-font);
  background: transparent;
  /* Safari iOS aplica estilo nativo a <input>/<button> (bordas arredondadas,
     sombra interna) por baixo do CSS custom, mesmo sem afetar largura — sem
     esse reset, alguns iPhones desenham o próprio controle nativo sobre o
     layout flex, dando a impressão de o botão "flutuar" centralizado por
     cima do campo em vez de ao lado. */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  box-sizing: border-box;
}
.cart-drawer-frete-form input:focus,
.cart-drawer-cupom-form input:focus {
  outline: none;
}

/* Botão "Calcular"/"Aplicar" — mesmo padrão do .wscb-input-group .wscb-btn
   do checkout-base: sem borda própria, texto simples embutido no campo. */
.cart-drawer-frete-form button,
.cart-drawer-cupom-form button {
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--cd-ink-strong);
  font-weight: 700;
  font-size: var(--cd-text-default);
  font-family: var(--cd-font);
  padding: 1rem 1.4rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
}
.cart-drawer-frete-form button:disabled,
.cart-drawer-cupom-form button:disabled { opacity: .5; cursor: not-allowed; }

.cart-drawer-frete-msg,
.cart-drawer-cupom-msg {
  margin-top: .8rem;
  font-size: var(--cd-text-default);
  color: var(--cd-danger);
}

.cart-drawer-frete-options {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  /* Transportadoras costumam vir em 3-4 opções, mas algumas regiões/lojas
     devolvem a lista inteira (Envio Próprio, Flex, SEDEX, PAC, Total Express,
     Jadlog, Retire na Loja...). Acima de ~4 opções a lista empurraria o
     rodapé fixo (total + "Ir para o pagamento") pra fora da tela — e ainda
     esbarraria no max-height:60rem do .cart-drawer-toggle-content, que
     cortaria o final da lista sem scroll. Limitando a altura a ~4 linhas
     (com um respiro da 5ª aparecendo pra sinalizar que rola) e deixando o
     overflow aqui dentro, a lista rola sozinha e o rodapé nunca sai do
     lugar. Até 4 opções a altura natural não chega no teto e nada muda. */
  max-height: 19.5rem;
  overflow-y: auto;
  /* Folga pro trilho do scrollbar não encostar no preço à direita. */
  padding-right: .4rem;
}

.cart-drawer-frete-options::-webkit-scrollbar {
  width: .6rem;
  background: #eaeaea;
  border-radius: 1rem;
}

.cart-drawer-frete-options::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 1rem;
}

.cart-drawer-frete-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  /* Sem isso, sob o max-height do .cart-drawer-frete-options as linhas
     seriam comprimidas pra caber (flex-shrink padrão = 1) em vez de a
     lista rolar. */
  flex-shrink: 0;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm);
  cursor: pointer;
  font-size: var(--cd-text-default);
  color: var(--cd-ink);
  transition: border-color .15s, background-color .15s;
}

.cart-drawer-frete-option:hover {
  background-color: #f7f7f7;
}

.cart-drawer-frete-option.selected {
  color: var(--cd-ink-strong);
  border-color: var(--cd-link);
  background: #f2f2f2;
}

.cart-drawer-frete-option-price {
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Total — linha final do rodapé fixo, antes do botão avançar. Rótulo e
   valor colados à direita (não space-between) — o padding-top é o mesmo
   de .cart-drawer-row, pra o espaço acima do "Total:" ficar igual ao
   espaço entre as linhas de Frete e Cupom. */
.cd-footer-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem 0 .2rem;
  font-size: var(--cd-text-default);
  font-weight: 700;
  color: var(--cd-ink-strong);
}
.cd-footer-total span:last-child { font-size: var(--cd-text-default); }

.total-holder {
  font-size: var(--cd-text-default);
  font-weight: 700;
  color: var(--cd-ink-strong);
}

/* Botão principal do drawer ("Avançar") — mesmo valor visual do
   .wscb-btn-secondary do checkout-base: escuro, não verde. O verde
   (.wscb-btn-primary/--cd-brand) fica reservado pra ação final de
   "Finalizar compra" lá no checkout — "Avançar" aqui é só um passo
   intermediário.
   Prefixado com .cart-holder (em vez de .button-main puro) pra ganhar do
   .button-main genérico de wsapi3-wirestyle/wsapi3-wirestyle-mobile por
   especificidade, não por sorte de ordem no config.json — esses arquivos
   de skin usam a cor customizável do tema (-#b61313ff) pra
   todo botão "principal" do site, mas aqui dentro do drawer o botão
   precisa continuar com a cor fixa do design system do carrinho. */
.cart-holder .button-main,
.cd-gift-dialog .button-main,
.cart-holder .cart-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.6rem;
  margin-top: .3rem;
  border: 1px solid var(--cd-secondary-dark);
  border-radius: var(--cd-radius-sm);
  background: var(--cd-secondary);
  color: #fff;
  font-size: var(--cd-text-default);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color .15s;
}
.cart-holder .button-main:hover,
.cd-gift-dialog .button-main:hover,
.cart-holder .cart-button:hover { background: var(--cd-secondary-dark); }

.cd-goto-cart-link {
  display: block;
  margin-top: .5rem;
  text-align: center;
  font-size: var(--cd-text-default);
  font-weight: 400;
  color: var(--cd-link);
  text-decoration: none;
}
.cd-goto-cart-link:hover { text-decoration: underline; }

/* Elemento ocultado pela config opcional da página (objeto global `sidebarCart`
   no <head> da loja — ver _applyPageConfig / _pageConfig no .js). !important
   porque o refresh()/render seta style.display inline nesses mesmos blocos. */
.cd-cfg-hidden { display: none !important; }

/* ─────────────────────────────────────────────
   SIDEBAR "ADICIONADO AO CARRINHO" (estilo Mercado Livre)
   Só o que é específico dela — todo o resto reaproveita as classes acima
   (.cart-holder, .cd-scroll-area, .cart-item-*, .cd-suggestions*,
   .cd-suggestion-item*, bottom-message, .button-main, .cd-goto-cart-link,
   .cart-drawer-link-btn). O abrir/fechar é por classe (o carrinho de
   verdade usa `right` inline no JS, que colidiria com o
   [data-wsjs-cart="holder"]); o overlay é próprio (o #overlay do tema tem
   onclick fixo pro changeState). Ver openAddedSidebar() no JS.
───────────────────────────────────────────── */
#ws-added-sidebar {
  right: -48rem;
}

/* Borda verde + selo de "check" flutuando no canto da foto do item recém
   adicionado — reforça a sensação de sucesso. Tudo prefixado com
   #ws-added-sidebar de propósito: .cart-item-img é a MESMA classe usada nos
   itens do carrinho lateral de verdade (ver .cart-item-holder acima), então
   sem o prefixo isso vazaria pra lá. .cd-added-item-photo é um wrapper só
   dela (não existe no drawer) — dá o position:relative sem mexer no
   overflow:hidden do .cart-item-img (que precisa continuar recortando a
   imagem nos cantos arredondados), então o selo flutua pra fora do
   quadrado sem cortar a própria foto. */
#ws-added-sidebar .cd-added-item-photo {
  position: relative;
  flex-shrink: 0;
}

#ws-added-sidebar .cart-item-img {
  border: .2rem solid var(--cd-brand);
}

#ws-added-sidebar .cd-added-item-check {
  position: absolute;
  right: -.6rem;
  bottom: -.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--cd-brand);
  color: #fff;
  border: .2rem solid var(--cd-surface);
  box-shadow: 0 .1rem .3rem rgb(0 0 0 / 15%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#ws-added-sidebar.ws-open {
  right: 0;
}

@media (max-width: 640px) {
  #ws-added-sidebar {
    width: min(48rem, 100%);
  }
}

.ws-added-overlay {
  position: fixed;
  inset: 0;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: opacity .4s ease, visibility .4s ease;
}

.ws-added-overlay.ws-open {
  opacity: .5;
  visibility: visible;
}

/* "Você possui mais X produtos no carrinho. Ver carrinho" — texto + link
   inline logo abaixo do item adicionado. Mesmo respiro do .cd-suggestions;
   o link usa .cart-drawer-link-btn (azul). */
.ws-added-more {
  padding: 1.6rem 2rem 0;
  font-size: var(--cd-text-default);
  color: var(--cd-ink);
  line-height: 1.5;
}
 /*END MODULO wsapi3-cart-sidebar*/

/*START MODULO wsapi3-plugin-keenslider*/ .keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-khtml-user-select:none;width:100%}.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{min-height:100%;overflow:hidden;position:relative;width:100%}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse]{flex-direction:row-reverse}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v]{flex-wrap:wrap}[data-keen-slider-moves] *{pointer-events:none}
 /*END MODULO wsapi3-plugin-keenslider*/

/*START MODULO wsapi3-blogs*/ .blog-page-container {
  padding: 2rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

.blog-page-container .blog-list-holder,
.blog-page-container .blog-article-holder {
  background-color: var(--bg-secundary);
  padding: 2rem;
  margin-bottom: 2rem;
}

.blog-list-holder .blog-pages-item {
  padding: 1rem 2rem;
}

.blog-list-holder .blog-pages-item a {
  padding: 0;
  height: 100%;
  display: block;
}

.blog-list-holder .blog-pages-item a:hover,
.blog-article-image-holder a:hover {
  text-decoration: underline;
}

.blog-list-title h1 {
  padding: 0 2rem 2rem;
  border-bottom: 0.1rem solid #e1e1e1;
  margin-bottom: 2rem;
}

.blog-pagination-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pagination-list li {
  color: #c9c9c9;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  background-color: white;
  border: 0.1rem solid #e1e1e1;
  transition: color 250ms, border-color 250ms, font-size 0s;
  cursor: pointer;
}

.blog-pagination-list li:hover, .blog-pagination-list li.active {
  color: #222;
  border-color: #1e1e1e8c;
}

.blog-pagination-list li.active,
.blog-pagination-list li.active a {
  pointer-events: none;
}

.blog-article-title h1 {
  margin-bottom: 1rem;
}

.blog-article-subtitle-holder {
  display: flex;
  justify-content: space-between;
}

.blog-article-date {
  display: flex;
}

.blog-article-image-holder {
  margin: 2rem 0;
}

.blog-article-image-holder img {
  max-width: 100%;
}

.blog-article-exit-holder {
  display: flex;
  justify-content: center;
}
 /*END MODULO wsapi3-blogs*/

/*START MODULO wsapi3-blogs*/ .blog-page-container {
  padding: 2rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

.blog-page-container .blog-list-holder,
.blog-page-container .blog-article-holder {
  background-color: var(--bg-secundary);
  padding: 2rem;
  margin-bottom: 2rem;
}

.blog-list-holder .blog-pages-item {
  padding: 1rem 2rem;
}

.blog-list-holder .blog-pages-item a {
  padding: 0;
  height: 100%;
  display: block;
}

.blog-list-holder .blog-pages-item a:hover,
.blog-article-image-holder a:hover {
  text-decoration: underline;
}

.blog-list-title h1 {
  padding: 0 2rem 2rem;
  border-bottom: 0.1rem solid #e1e1e1;
  margin-bottom: 2rem;
}

.blog-pagination-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pagination-list li {
  color: #c9c9c9;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  background-color: white;
  border: 0.1rem solid #e1e1e1;
  transition: color 250ms, border-color 250ms, font-size 0s;
  cursor: pointer;
}

.blog-pagination-list li:hover, .blog-pagination-list li.active {
  color: #222;
  border-color: #1e1e1e8c;
}

.blog-pagination-list li.active,
.blog-pagination-list li.active a {
  pointer-events: none;
}

.blog-article-title h1 {
  margin-bottom: 1rem;
}

.blog-article-subtitle-holder {
  display: flex;
  justify-content: space-between;
}

.blog-article-date {
  display: flex;
}

.blog-article-image-holder {
  margin: 2rem 0;
}

.blog-article-image-holder img {
  max-width: 100%;
}

.blog-article-exit-holder {
  display: flex;
  justify-content: center;
}
 /*END MODULO wsapi3-blogs*/

/*START MODULO wsapi3-pag-contact*/ .contact-container .contact-form-top {
  display: grid;
  row-gap: 2rem;
  column-gap: 2rem;
  grid-template-columns: auto auto;
  margin-bottom: 2rem;
}

.contact-container .contact-holder {
  display: flex;
  column-gap: 2rem;
}

.contact-block h2 {
  margin-bottom: 2rem;
  padding: 0 2rem;
  padding-bottom: 2rem;
  border-bottom: .1rem solid #e1e1e1;
}

.contact-container form > p {
  margin-bottom: 1rem;
}

.contact-container .contact-form {
  padding: 2rem;
}

.contact-container .contact-form label::after {
  content: attr(optional);
  font-size: 1.2rem;
  color: #999;
  font-style: italic;
  margin-left: 0.5rem;
}

.contact-container .contact-form-top > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  position: relative;
}

.contact-container .contact-form-top > div > input {
  width: 100%;
  background: white;
  padding: 1rem;
  border: var(--margin-all);
  border-radius: var(--ws-radius-sm, 10px);
}

.contact-container .contact-form-bottom {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.contact-container .contact-form-bottom label {
  width: 100%;
  text-align: left;
}

.contact-container .contact-form-bottom textarea {
  width: 100%;
  border: var(--margin-all);
  border-radius: var(--ws-radius-sm, 10px);
  background-color: white;
  padding: 1rem;
  margin-bottom: 0;
  height: 10.5rem;
  resize: none;
}

.other-pages-row .contact-container .contact-form-bottom textarea {
  height: 20rem;
}

.contact-container .address-container span {
  padding: 0 2rem;
}

.contact-message-container {
  width: 100%;
  position: relative;
  margin-bottom: 2rem;
  display: none;
  opacity: 0;
}

.contact-message-container .close-button {
  position: absolute; 
  top: 1rem;
  right: 1rem;
}

.contact-message {
  width: 100%;
  padding: 1.5rem;
  transition: opacity 200ms ease, margin-bottom 400ms ease, font-size 0s;
  background-color: white;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: .1rem solid transparent;
  border-radius: 1rem;
}

.contact-message.success {
  visibility: visible;
  background-color: #DFFAE4;
  border-color: #12C62F;
  color: #12C62F;
}

.contact-message.error {
  visibility: visible;
  background-color: #F6E8E8;
  border-color:#C61212;
  color: #C61212;
}

.contact-message span {
  font-weight: 600; 
}

.contact-form-bottom > div {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}
 /*END MODULO wsapi3-pag-contact*/

/*START MODULO wsapi3-pag-contact*/ .contact-container .contact-form-top {
  display: grid;
  row-gap: 2rem;
  column-gap: 2rem;
  grid-template-columns: auto auto;
  margin-bottom: 2rem;
}

.contact-container .contact-holder {
  display: flex;
  column-gap: 2rem;
}

.contact-block h2 {
  margin-bottom: 2rem;
  padding: 0 2rem;
  padding-bottom: 2rem;
  border-bottom: .1rem solid #e1e1e1;
}

.contact-container form > p {
  margin-bottom: 1rem;
}

.contact-container .contact-form {
  padding: 2rem;
}

.contact-container .contact-form label::after {
  content: attr(optional);
  font-size: 1.2rem;
  color: #999;
  font-style: italic;
  margin-left: 0.5rem;
}

.contact-container .contact-form-top > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  position: relative;
}

.contact-container .contact-form-top > div > input {
  width: 100%;
  background: white;
  padding: 1rem;
  border: var(--margin-all);
  border-radius: var(--ws-radius-sm, 10px);
}

.contact-container .contact-form-bottom {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.contact-container .contact-form-bottom label {
  width: 100%;
  text-align: left;
}

.contact-container .contact-form-bottom textarea {
  width: 100%;
  border: var(--margin-all);
  border-radius: var(--ws-radius-sm, 10px);
  background-color: white;
  padding: 1rem;
  margin-bottom: 0;
  height: 10.5rem;
  resize: none;
}

.other-pages-row .contact-container .contact-form-bottom textarea {
  height: 20rem;
}

.contact-container .address-container span {
  padding: 0 2rem;
}

.contact-message-container {
  width: 100%;
  position: relative;
  margin-bottom: 2rem;
  display: none;
  opacity: 0;
}

.contact-message-container .close-button {
  position: absolute; 
  top: 1rem;
  right: 1rem;
}

.contact-message {
  width: 100%;
  padding: 1.5rem;
  transition: opacity 200ms ease, margin-bottom 400ms ease, font-size 0s;
  background-color: white;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: .1rem solid transparent;
  border-radius: 1rem;
}

.contact-message.success {
  visibility: visible;
  background-color: #DFFAE4;
  border-color: #12C62F;
  color: #12C62F;
}

.contact-message.error {
  visibility: visible;
  background-color: #F6E8E8;
  border-color:#C61212;
  color: #C61212;
}

.contact-message span {
  font-weight: 600; 
}

.contact-form-bottom > div {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}
 /*END MODULO wsapi3-pag-contact*/

/*START MODULO wsapi3-pag-institucional*/ .institutional-menu-nav h2 {
  padding: 0 2rem 2rem;
  border-bottom: .1rem solid #e1e1e1;
  margin-bottom: 2rem;
}

.institutional-container > .container {
  display: flex;
  align-items: flex-start;
  column-gap: 2rem;
}

.institutional-container .content {
  background: #F9F9F9;
  padding: 2rem;
}

.institutional-menu-nav {
  background: var(--bg-secundary);
  width: 37rem;
  padding: 2rem 0;
  height: fit-content;
}

.institutional-menu-nav li a {
  padding: 1rem 2rem;
  height: 100%;
  display: block;
  transition: .2s ease;
}

.institutional-menu-nav li a:hover {
  color: var(--color-hover-menu);
  background-color: var(--bg-hover-menu);
}

.institutional-menu-nav li.actual {
  background: #D5D5D5;
}

.others-pages-container > .container {
  display: flex;
  column-gap: 2rem;
}

.others-pages-container .content {
  background: var(--bg-secundary);
  width: 100%;
  padding: 2rem;
  min-height: 100%;
}

.others-pages-container .content h1 {
  margin-bottom: 1rem;
}

.others-pages-container .content img,
.others-pages-container .content iframe {
  max-width: 100%;
}
 /*END MODULO wsapi3-pag-institucional*/

/*START MODULO wsapi3-footer-badges*/ [data-wsjs-badges] {
    display: flex;
    column-gap: 2rem;
    row-gap: 2rem;
    flex-wrap: wrap;
}

    [data-wsjs-badges] .badge-holder {
        height: 4rem;
        aspect-ratio: 6/2;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width:100%;
        text-align:center;
    }

    [data-wsjs-badges] li {
        border-radius: 1rem;
        padding: 1rem;
        align-items: center;
        display: flex;
        min-width: 15rem;
        background-color: white;
    }

        [data-wsjs-badges] li a {
            text-align: center;
        }

        [data-wsjs-badges] li#GoogleSafeBrowsing,
        [data-wsjs-badges] li#SSLLetsEncrypt {
            background-color: white;
        }


    [data-wsjs-badges] .badge-holder img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
    }
 /*END MODULO wsapi3-footer-badges*/

/*START MODULO wsapi3-adptionstyle*/ .LV_DIV_CARRINHO_V2 .LV_TABLE_CARRINHO_V2 .LV_LinhaCarrinhoItens_V2 .LV_LinhaCarrinhoDivQtd_V2 .LV_LinhaCarrinhoCampoQtd_V2 {
  width: 6rem;
}

#LVLinkBotaoContinuar{
  padding: 2rem !important;
  background-color: var(--bg-button-buyNow) !important;
  color: var(--color-button-buyNow) !important;
}

#LVLinkBotaoContinuarComprando, #LVLinkBotaoLimpar {
  padding: 2rem !important;
}

.UserAreaData .LV_DIV_CADASTRO {
  width: 100%;
  margin: 0;
  font-size: inherit;
  color: inherit;
  display:table;
}

.UserAreaData .LV_divCADASTRO_campos .LV_DIV_NOME_CAMPO_CAD2 {
  text-align: right;
  margin-right: 0;
  width: 100%;
  float: none;
}

.UserAreaData .LV_SizeCamposCad {
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.UserAreaData .LV_divCADASTRO_campos {
  margin-bottom: 2rem;
}

.UserAreaData .LV_divCADASTRO_campos input[type="checkbox"] {
  width: 2rem;
}

.UserAreaData .LV_CAMPOS_DIV_CADASTRO {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.UserAreaData .LV_INVISIBLE_FIELD {
  display: none;
}

.UserAreaData .LV_CADASTRO_SHOWMSG {
  display: flex!important;
  font-size: inherit;
  margin: 0%;
  padding: 2rem 0;
}

.UserAreaData .LV_TIT_DIV_CADASTRO {
  font-weight: normal;
}

.LV_div_sem_produtos {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-top: 2rem;
}

.LV_div_sem_produtos strong {
  font-weight: normal;
}

.LV_div_sem_produtos a {
  padding: 2rem;
  background-color: var(--bg-button-buyLater);
  color: var(--color-button-buyLater);
  width: fit-content;
}

.LV_CheckoutSmart_NumeroPedidoShow > strong {
  padding: 2rem 0 2rem 6rem;
}

ul.LV_MENU_CLIENTE {
    margin-top: 20px;
}

.LV_MENU_CLIENTE h2 {
    display: block;
    margin-bottom: 5px;
    margin-top: 20px;
}

.LV_DivPedidoCliView {
    margin: 20px 0px;
}

.LV_DivBotaoVoltar {
    display: block;
    text-align: center;
}

.LV_AndamentoPedido li label {
    height: 50px;
}
 /*END MODULO wsapi3-adptionstyle*/

/*START MODULO wsapi3-pag-prod-rules*/ *[data-wsjs-force="none"] {
  display: none!important;
}

*[data-wsjs-infoHolder] {
  display: none;
}

.prod-photo-container .whithout-image [data-wsjs-icon] svg {
  width: 100%;
  height: 100%;
}

.prod-container {
    opacity: 1;
    transition: opacity .2s ease, font-size 0s;
    align-items: flex-start;
    padding: 2rem 0;
}

.prod-container h2 {
  margin-bottom: 1rem;
}

.prod-block-container {
  background-color: var(--bg-secundary);
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  padding: 2rem;
}

.available-section {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.prod-container.prod-to-load {
    pointer-events: none;
}

.prod-inside-container {
    width: 100%;
    display: flex;
    column-gap: 2rem;
}

.prod-side-container {
    transition: all 200ms ease, font-size 0s;
}

.prod-container button span {
    margin-right: 1.4rem;   
}

.prod-inside-container .prod-side-container:first-child {
  position: relative;
  width: 60%;
}

.prod-inside-container .prod-side-container:last-child {
  width: calc(40% - 2rem);
}

/* Tags do Produto */
.prod-tags-container {
    display: flex;
    column-gap: 1rem;
}

/* Nome */ 
.prod-container h1 {
  margin-bottom: 0;
  font-weight: 600;
}

/* Codigo do Produto */
.prod-code-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.prod-code-container a {
    text-decoration: none;
}

/* Breve Descricao */
.prod-short-container > div {
  display: flex;
  flex-direction: column;
}

.prod-more-container {
  margin-top: -2rem;
}

/* Preco do Produto */
.prod-price-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
  border-bottom: .1rem solid #e1e1e1;
}

.prod-price-main {
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
}

.prod-price-main .prod-price-off {
  text-decoration: line-through;
  font-weight: normal;
}

.prod-price-main .price-startingOff {
  font-weight: normal;
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 2.4rem;
}

.prod-price-main .prod-price-sell {
  text-decoration: none;
  font-weight: bold;
}

/* Botoes de Compra */
.prod-buttons-container {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

/* Informacoes Adicionais */
.prod-progressiveDescount-container table {
  width: 100%;
}

.prod-progressiveDescount-container tbody {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.prod-progressiveDescount-container tr {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.prod-progressiveDescount-container tbody.alternative tr {
  grid-template-columns: 1fr 1fr;
}

.prod-progressiveDescount-container tbody.alternative th {
  text-align: left;
}


.prod-installments-container:not(:last-child) {
  padding-bottom: 2rem;
  border-bottom: .1rem solid #e1e1e1;
}

.prod-installments-container ul {
    column-count: 2;
}

.prod-installments-container li.without-fee {
    font-weight: 600;
}

.prod-installments-container li {
  padding-right: 2rem;
}

/* Frete */
.prod-shipping-form {
  display: grid;
  column-gap: 2rem;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
}

.prod-shipping-warning {
  display: flex;
  margin-top: 1rem;
  padding: 1rem;
  background: #f7f7f7;
  border-radius: 1rem;
  color: black;
}

.prod-shipping-form label {
  grid-column-start: 1;
  grid-column-end: 3;
  display: flex;
  height: fit-content;
}

.prod-shipping-form input[type="text"] {
  width: 100%;
  border: var(--margin-all);
  background: white;
  padding: 1rem;
  grid-column-start: 1;
}

.prod-shipping-form button {
    margin-bottom: 0;
    width: fit-content;
    padding: 0 3.5rem;
    grid-column-start: 2;
    grid-column-end: 2;
}

[data-wsjs-shipping=container] .loader-container {
  width: auto;
  position: relative;
  height: fit-content;
  margin-top: 2rem;
}

[data-wsjs-shipping=container] ul {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: var(--margin-all);
}

[data-wsjs-shipping=container] ul li {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

[data-wsjs-shipping=container] ul li span:first-child {
  text-align: left;
}

[data-wsjs-shipping=container] ul li span:last-child {
  text-align: right;
}
/* Video do Produto */
.prod-video-container iframe, .modal-container-2 iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

/* Botao Favorito */
.prod-social-container {
    display: flex;
    column-gap: 1rem;
}

.prod-social-container button {
  width: 100%;
}

.fav-holder {
    opacity: 0;
}

.prod-social-container .fav-active {
    transition: opacity .2s, font-size 0s;
    transform: translateX(calc(-200% + -.2rem));
    position: absolute;
    color: red;
    opacity: 0;
}

.prod-social-container .fav-not-active {
    transition: opacity .2s, font-size 0s;
    transform: translateX(calc(-200% + -.2rem));
    position: absolute;
    opacity: 1;
}

.active .fav-active {
    opacity: 1;
}

.active .fav-not-active {
    opacity: 0;
}

/* Botoa Compartilhar */
.prod-infos-social-promo-container {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
}

.prod-infos-social-promo-container > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prod-container .prod-infos-social-promo-container button span {
  margin-right: 0;
}

.prod-infos-social-promo-container .prod-social-share-container {
  width: fit-content;
  position: initial;
}

.prod-infos-social-promo-container .prod-social-container-2:only-child {
  width: 100%;
  justify-content: flex-end;
}

.prod-social-container-2 .prod-social-share-container {
  display: flex;
}

.prod-social-share-container {
    width: 100%;
    position: relative;
}

.prod-infos-social-promo-container .prod-social-share-items {
  right: 0;
  left: auto;
  top: 100%;
  width: fit-content;
  gap: 20px;
  padding: 10px;
}

.prod-infos-social-promo-container button {
  padding: 1rem;
  background: transparent;
  border: none;
}

.prod-social-share-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0,0,0,.2);
    transition: transform .4s, font-size 0s;
    transform-origin: bottom;
    transform: rotateX(90deg);
}

.prod-social-share-items a {
    cursor: pointer;
    display: flex;
}

.prod-social-share-items svg {
  width: 1.5rem;
  height: 1.5rem;
}

.share-copy-item {
    transition: transform .5s, font-size 0s;
}

/* Descricoes */
div#prod-description-block {
  scroll-margin-top: 120px;
}

.prod-descriptions-container div div p {
    max-width: 100%;
    max-height: 20vh;
    overflow: auto;
}

/* Produto Indisponivel */
.prod-block-container .contact-container .contact-form-top {
  display: flex;
  flex-direction: column;
}

.prod-block-container .contact-container {
  display: block;
}

/* Login */
.prod-info-login p {
  margin-bottom: 2rem;
}

.prod-info-login button {
    margin-bottom: 2rem;
}

.prod-info-login button:last-child {
    background: #E3E3E3;
    color: #8C8C8C;
}

.prod-info-login button:last-child:hover {
    background: #CACACA;
}

/* Seletor de Quantidade */
.prod-quantity-container {
  display: flex;
  align-items: center;
}

.prod-quantity-container label {
  margin-bottom: 0;
}

/* Relacionados */
.prod-list-related {
  padding: 0 0 2rem;
}

.prod-list-related .keen-slider,
.prod-list-related .prod-list-titles {
  grid-column-start: 1!important;
  grid-column-end: 4!important;
}

.prod-list-related .arrow {
  grid-row: 3;
  margin: 0;
}

.prod-list-related .arrow--prev {
  justify-self: flex-start;
  margin-left: 2rem;
}

.prod-list-related .arrow--next {
  justify-self: flex-end;
  margin-right: 2rem;
}

.prod-list-related .prod-list-titles {
  align-items: flex-start;
  pointer-events: none;
}

/* Campo de Quantidade */
.prod-quantity {
    background: white;
    display: flex;
    align-items: center;
    margin-left: 2rem;
    border: var(--margin-all);
}

.prod-quantity span:first-child {
    line-height: 1.5rem;
}

.prod-quantity span {
    user-select: none;
    height: 3.8rem;
    width: 3.8rem;
    line-height: 3.8rem;
    font-size: 2.5rem;
    font-weight: 400;
    text-align: center;
    align-items: center;
    cursor: pointer;
    color: #A3A3A3;
}

.prod-quantity span:hover {
    background: #EBEBEB;
}

input[name="TxtQtdAdd"] {
    text-align: center;
    width: 10rem;
    background: transparent;
}

input[name="TxtQtdAdd"]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
}

input[name="TxtQtdAdd"] { 
   -moz-appearance: textfield;
   appearance: textfield;
}
input[name="TxtQtdAdd"]:focus, input[name="TxtQtdAdd"]:hover, input[name="TxtQtdAdd"] {
  box-shadow: none!important;
  outline: none!important;
  border: none!important;
}

/* Slides de Fotos */
.prod-photo-container {
  display: flex;
  margin-bottom: 2rem;
  min-width: 520px;
  height: fit-content;
  aspect-ratio: 1/0.833333;
}

.prod-photo-container [data-wsjs-product="dots"] {
  width: 12rem;
  height: 100%;
  max-height: 100%;
  display: grid;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.prod-photo-container [data-wsjs-product="dots"] img {
  height: fit-content;
}

[data-wsjs-product="dots"] .iframe-overlay {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: auto 140%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

[data-wsjs-product="dots"] .iframe-overlay [data-wsjs-icon] svg {
  width: 100%;
  height: 100%;
  transition: 300ms ease, font-size 0s;
  background-color: rgba(0, 0, 0, .8);
}

.ws-prod-video-thumb span[data-wsjs-icon] {
    display: none;
}

.prod-photo-container [data-wsjs-product="photos"] iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.prod-photo-container [data-wsjs-product="dots"] img,
.prod-photo-container [data-wsjs-product="photos"] img {
  max-width: 100%;
  max-height: 100%;
  width: auto!important;
  height: auto!important;
  min-height: auto;
}

.prod-photo-container [data-wsjs-product="photos"] img {
  height: fit-content;
  cursor: zoom-in;
}

.prod-photo-container [data-wsjs-product="photos"] {
  display: flex;
  align-items: center;
  margin-left: 2rem;
  width: calc(100% - 120px);
  height: 100%;
}

.prod-photo-container [data-wsjs-product="photos"] zoom {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.prod-photo-container [data-wsjs-product="photos"] .arrow + .keen-slider {
  width: calc(100% - 16rem);
}

.prod-photo-container [data-wsjs-product="dots"] .img-placeholder {
  font-size: 1rem;
}

.prod-photo-container [data-wsjs-product="photos"] .keen-slider,
.prod-photo-container [data-wsjs-product="dots"] .keen-slider  {
  height: 100%;
}

.prod-photo-container [data-wsjs-product="photos"] .keen-slider .keen-slider__slide > div,
.prod-photo-container [data-wsjs-product="dots"] .keen-slider .keen-slider__slide > div {
  border-radius: var(--radius-custom);
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  background: white;
}

.prod-photo-container [data-wsjs-product="dots"] .keen-slider .keen-slider__slide > div {
  width: 10rem;
  padding: .5rem;
  height: auto;
}

.prod-photo-container [data-wsjs-product="photos"] .keen-slider .keen-slider__slide > div {
  width: 100%;
  height: 100%;
}

*[data-wsjs-product="dots"] .keen-slider .keen-slider__slide {
  box-sizing: border-box;
  transition: border .2s ease, font-size 0s;
  padding: .2rem;
}

*[data-wsjs-product="dots"] .keen-slider .keen-slider__slide > div {
  border: .1rem transparent solid;
  cursor: pointer;
}

*[data-wsjs-product="dots"] .keen-slider .keen-slider__slide.active > div {
  border: .1rem #C9C9C9 solid;
  background-color: white;
}

.prod-photo-container .keen-slider__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

*[data-wsjs-product="photos"] .keen-slider .keen-slider__slide {
  width: 100%!important;
  min-width: 100%!important;
  max-width: 100%!important;
}

*[data-wsjs-product="dots"] .arrow span {
  transform: rotateZ(90deg);
}

*[data-wsjs-product="dots"] .arrow {
  margin: 0 auto;
}

.ws-prod-video {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
}

.ws-prod-video-thumb {
    position: relative;
}

    .ws-prod-video-thumb > [data-wsjs-icon="play"] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: .85;
    }

/* Descricoes */
.prod-main-block-descriptions {
  padding: 0 2rem;
  background-color: var(--bg-secundary);
  display: flex;
  flex-direction: column;
}

.trustvox-pag-prod {
  background-color: var(--bg-secundary);
  padding: 2rem;
}

.prod-main-block-descriptions > div:first-child {
  margin-top: 2rem;
}

.prod-main-block-descriptions > div {
  margin-bottom: 2rem;
}

.prod-main-block-descriptions > div:only-child {
  margin: 2rem 0;
}

.prod-description-container > div:not(:last-child) {
  margin-bottom: 2rem;
}

.prod-description-container p {
  min-height: 2rem;
}

.prod-description-container * {
  max-width: 100%;
}

/* Caracteristicas do Produto */
.prod-features-container table {
  width: 100%;
}

.prod-features-container {
  width: 100%;
}

.prod-features-container tr {
  padding: 2rem;
  display: flex;
}

.prod-features-container tr td,
.prod-features-container tr th {
  width: 50%;
  display: flex;
}

.prod-features-container tr:nth-child(even) {
  background-color: #E5E5E5;
}

.prod-features-container tr:nth-child(odd) {
  background-color: #F5F5F5;
}

/* Carregamento */
.loader-container {
    position: fixed;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transition: all 200ms ease, font-size 0s;
}

/* Overlay de carregamento do miolo do produto: borra o conteúdo já pintado em vez
   de escondê-lo (sem impacto no CLS), mantendo header/footer visíveis e clicáveis */
[data-wsjs-product="container"] {
    position: relative;
}

.page-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Posição fixa a 150px do topo da section do produto. Centralizado com
   margin-left (não transform), porque a animação de rotação do spinner
   (.loader-container .loader, abaixo) também anima "transform" — usar
   transform aqui pra centralizar entrava em conflito com o rotateZ e
   fazia o spinner parar de girar e "pular" de posição. */
.page-loader-overlay .loader {
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -30px;
}

.loader-container .loader {
 border: 3px solid rgba(0, 0, 0, 0.1);
 width: 60px;
 height: 60px;
 border-radius: 50%;
 border-left-color: #666;
  animation: is-rotating 1s infinite ease;
}

.prod-shipping-container .loader-container {
  z-index: 1;
  position: relative;
}

@keyframes is-rotating {
    to {
        transform: rotateZ(1turn);
    }
}

/* Variacoes de Produto */
.sub-produtos-container {
  display: contents;
}

.sub-produtos {
  display: contents;
  flex-direction: column;
  row-gap: 2rem;
}

#LV_DIV_GENERO,
#LV_DIV_GENERO_2,
#LV_DIV_GENERO_3 {
  padding-right: 2rem;
  border: var(--margin-all);
  background: white;
}

.LV_COMBO_PROD_GENERO {
  display: flex;
  width: 100%;
  border: none;
  padding: 1rem;
  padding-right: 2rem;
  padding-right: 0;
  background: transparent;
}

.LV_COMBO_PROD_GENERO::-ms-expand {
  background-color: transparent;
}

.LV_GENERE_LISTA strong {
  font-weight: bold;
}

.LV_GENERE_LISTA ul {
  display: flex;
  justify-content: left;
  gap: 1rem;
  flex-wrap: wrap;
}

.LV_GENERE_LISTA ul li {
  border: .1rem solid transparent;
}

.LV_GENERE_LISTA.LV_GENERO_1 ul li {
  overflow: hidden;
}

.LV_GENERE_LISTA ul li a {
  background-color: #ececec;
  padding: 1rem;
  width: fit-content;
  height: fit-content;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 0.4rem;
  transition: .2s ease, font-size 0s;
  min-width:4rem;
}

.LV_GENERE_LISTA.LV_GENERO_2 ul li a,
.LV_GENERE_LISTA.LV_GENERO_3 ul li a,
.LV_GENERE_LISTA.LV_GENERO_1209 ul li a {
  width: initial;
  min-width: 4rem;
  height: 4rem;
}

.LV_GENERE_LISTA ul li {
  border-radius: 0.5rem;
  border: 1px solid #707070;
  transition: .3s ease, font-size 0s;
  position: relative;
}

.LV_GENERE_LISTA ul li.LV_GENERO_INDISPONIVEL {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
}

.LV_GENERE_LISTA ul li.LV_GENERO_INDISPONIVEL a,
.LV_GENERE_LISTA ul li.LV_GENERO_INDISPONIVEL span {
  opacity: .5;
}

.LV_GENERE_LISTA ul li.LV_GENERO_INDISPONIVEL::after {
  content: '';
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAuOTEgMjQwLjkxIj4NCgkJCTxwYXRoIGZpbGw9IiNBMTAwMDAiIGQ9Ik0xMjAuNDUgMEM1My45MSAwIDAgNTMuOTIgMCAxMjAuNDVTNTMuOTEgMjQwLjkgMTIwLjQ1IDI0MC45IDI0MC45IDE4Ni45OSAyNDAuOSAxMjAuNDUgMTg3IDAgMTIwLjQ1IDBabTQyLjkxIDE2My4zNmMtNC4zNyA0LjM3LTExLjQ2IDQuMzctMTUuODMgMGwtMjcuMDgtMjcuMDgtMjcuMDggMjcuMDhjLTQuMzcgNC4zNy0xMS40NiA0LjM3LTE1LjgzIDAtNC4zNy00LjM3LTQuMzctMTEuNDYgMC0xNS44M2wyNy4wOC0yNy4wOC0yNy4wOC0yNy4wOGMtNC4zNy00LjM3LTQuMzctMTEuNDYgMC0xNS44MyA0LjM3LTQuMzcgMTEuNDYtNC4zNyAxNS44MyAwbDI3LjA3IDI3LjA4IDI3LjA4LTI3LjA4YzQuMzctNC4zNyAxMS40Ni00LjM3IDE1LjgzIDAgNC4zNyA0LjM3IDQuMzcgMTEuNDYgMCAxNS44M2wtMjcuMDcgMjcuMDcgMjcuMDggMjcuMDhjNC4zNyA0LjM3IDQuMzcgMTEuNDYgMCAxNS44M1oiPjwvcGF0aD4NCgkJPC9zdmc+);
  display: flex;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 100rem;
  width: 1.7rem;
  height: 1.7rem;
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}


.LV_GENERE_LISTA ul li:not(.LV_GENERO_INDISPONIVEL):hover {
  box-shadow: 0 0 0 2px #aaa;
}

.LV_GENERE_LISTA ul li.LV_GENERO_SELECTED {
  box-shadow: 0 0 0 2px #aaa;
  border: 1px solid #222222;
}

.LV_GENERE_LISTA ul li a {
  transition: .3s ease, font-size 0s;
  user-select: none;
}

.LV_GENERE_LISTA.LV_GENERO_1 ul li a {
  padding: 0;
}

.LV_GENERE_LISTA.LV_GENERO_1 ul li a span {
  min-width: 4rem;
  min-height: 4rem;
  width: fit-content;
  height: fit-content;
  display: flex;
}

.LV_GENERE_LISTA.LV_GENERO_1 ul li a span span {
  width: 100%;
  height: 100%;
  display: flex;
  color: transparent;
  font-size: 0;
}

.LV_GENERE_LISTA.LV_GENERO_1 ul li a span span + span {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  position: absolute;
}

.LV_CAMPOS_ADD_PROD {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.LV_CAMPOS_ADD_PROD label {
  display: flex;
  align-content: center;
  align-items: flex-start;
  background: transparent;
  position: relative;
  height: 100%;
}

.LV_CAMPOS_ADD_PROD label:before {
  content: '';
  background: white;
  display: flex;
  width: 100%;
  position: absolute;
  height: 100%;
  border-radius: 10px;
  z-index: 1;
}

.LV_CAMPOS_ADD_PROD .LVCampoAddTit {
  display: none;
}

.LV_CAMPOS_ADD_PROD input {
  border: var(--margin-all);
  padding: 10px;
  background: transparent;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
}

.LV_CAMPOS_ADD_PROD label span:last-child:not(:empty) {
  display: flex;
  align-items: center;
  background: transparent;
  z-index: 2;
  margin: auto;
  padding: 0 1rem;
}

.LVCamposAddTexto, .LVCamposAddCombo {
  z-index: 2;
}

select.LVCamposAddTexto {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  line-height: 2.4rem;
  padding: 1rem;
}

select.LVCamposAddTexto + span:empty {
  min-width: 2rem;
}

.modal-div {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .95);
  transition: .4s ease, font-size 0s;
  gap: 20px;
  overflow: clip;
  opacity: 0;
  z-index: 10;
}


.modal-div .keen-slider {
  height: calc(100%  - 4rem)!important;
  max-width: 60%!important;
  background-color: #ffffff;
}

.modal-div .keen-slider__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.modal-div .keen-slider__slide > div {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-div img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
}

.modal-div .arrow {
  background-color: transparent;
  color: white;
  fill: white;
  width: 3rem;
  height: 3rem;
}

.modal-div .arrow:hover {
  background-color: #333;
}

.modal-div .arrow span[data-wsjs-icon] svg {
  background-color: transparent;
  color: white;
  fill: white;
}

.modal-div .close-button {
  position: absolute;
  padding: 1rem;
  transform: scale(1.3);
  right: 3rem;
  top: 3rem;
  cursor: pointer;
}

.modal-div .close-button svg {
  color: white;
  fill: white;
}


/* Compre Junto */ 
.produtos-compre-junto {
  padding-top: 2rem;
}

.compre-junto-linha {
  display: flex;
  column-gap: 2rem;
}

.compre-junto-linha .compre-junto-linha-itensblock {
  display: flex;
  column-gap: 2rem;
  align-items: center;
}

.compre-junto-imgs a, .compre-junto-imgs {
  width: fit-content;
  display: block;
}

.compre-junto-mais, .compre-junto-mais {
  width: fit-content;
  margin: auto 0;
}

.compre-junto-infos-prod {
  padding: 0 2rem;
  display: grid;
  row-gap: 2rem;
  grid-template-rows: auto 1fr;
}

.compre-junto-item-preco-de {
  display: none;
}

.compre-junto-total-preco-de{
  text-decoration: line-through;
}

.compre-junto-total {
  background-color: white;
  padding: 0 2rem;
  row-gap: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.compre-junto-item {
  width: min-content;
  box-sizing: border-box;
  background: white;
  padding: 2rem 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.compre-junto-subprods {
  width: 100%;
  padding: 0 1.2rem;
  box-sizing: border-box;
  border: var(--margin-all);
}

.compre-junto-subprods select,
.compre-junto-subprods select:focus {
  width: 100%;
  background-color: transparent;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  padding: 1.5rem 0;
}

.compre-junto-botao-comprar {
  width: 100%;
  height: 4.3rem;
  margin-bottom: 1rem;
  border: none;
  background: #A3A3A3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}







/* Modal de Zoom */
.prod-side-container [data-wsjs-contact=modal] {
  transition: .4s ease, font-size 0s;
  background-color: rgba(0, 0, 0, .2);
  position: absolute;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 5;
  flex-direction: row;
}

[data-wsjs-contact=modal] form {
  width: fit-content;
  padding: 2rem;
  background-color: #ECECEC;
}

[data-wsjs-contact=modal] > div {
  display: flex;
  column-gap: 2rem;
}

.float-footer-container {
  position: fixed;
  bottom: 0;
  background: #F5F5F5;
  width: 100%;
  left: 0;
  padding: 2rem;
  z-index: 1;
  transition: .3s, font-size 0s;
}

.float-footer-container .prod-price-main {
  justify-content: center;
}

.prod-social-container .social-button-container [data-wsjs-icon] svg {
  transition: .2s, font-size 0s;
}

.prod-social-container-2 > button [data-wsjs-icon] svg {
  cursor: pointer;
  transition: 200ms ease, font-size 0s;
}

.prod-social-container-2 .active [data-wsjs-icon] svg,
.prod-social-container .social-button-container .active [data-wsjs-icon] svg {
  fill: #de0000;
  color: #de0000;
}

[data-wsjs-product="buttonFavorite"].active svg,
span[data-wsjs-product="buttonFavorite"].active svg {
  fill: #de0000!important;
  color: #de0000!important;
}

.promo-timer {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.promo-timer > div {
  padding: 2rem;
  width: 8rem;
  height: 8rem;
  background: white;
  border: 0.3rem solid #BFBFBF;
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.promo-timer > div::after {
  content: attr(data-wsjs-timer);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

[data-wsjs-product-state] {
  position: relative;
}

.js-image-zoom__zoomed-image {
  border: .1rem #C9C9C9 solid;
}

.modal-container-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transition: .4s ease, font-size 0s;
  /* Precisa vencer QUALQUER coisa que o tema da loja tenha colocado por cima
     (menu fixo mobile, aba flutuante de WhatsApp/atendimento, etc.) — z-index
     é só relativo a outros elementos no mesmo "contexto de empilhamento", e é
     comum tema customizado usar valores bem altos (ex.: 99999 numa aba de
     WhatsApp) sem nenhuma relação com este módulo padrão. 10 perdia fácil
     desses casos. Usando o teto prático do z-index em navegadores. */
  z-index: 2147483647;
  opacity: 0;
  background-color: rgba(255, 255, 255, 1);
}

.modal-container-2 [data-wsjs-product="modal"],
.modal-container-2 [data-wsjs-product="dots"] {
  max-width: 100%;
  width: 100%;
}

.modal-container-2 [data-wsjs-product="modal"] {
  max-height: 75vh;
  margin-bottom: 2vh;
}

.modal-container-2 [data-wsjs-product="modal"] .keen-slider {
  max-height: 100%;
}

.modal-container-2 [data-wsjs-product="dots"] {
  max-height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
}

.modal-container-2 [data-wsjs-product="dots"] span.arrow.icon-ws,
.modal-container-2 [data-wsjs-product="dots"] span.arrow.icon-ws:hover {
  background-color: white;
  transform: rotateZ(-90deg);
  width: 4rem;
  height: 4rem;
}

.modal-container-2 [data-wsjs-product="dots"] span.arrow.icon-ws:hover svg {
  fill: #444;
}

.modal-container-2 [data-wsjs-product="dots"] .keen-slider {
  max-height: 100%;
  width: 100vw;
}

.modal-container-2 [data-wsjs-product="modal"] .keen-slider .keen-slider__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-container-2 [data-wsjs-product="modal"] .keen-slider .keen-slider__slide > div,
.modal-container-2 [data-wsjs-product="modal"] .keen-slider .keen-slider__slide > div > img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

.modal-container-2 [data-wsjs-product="dots"] .keen-slider .keen-slider__slide > div {
  width: 100%;
  max-height: 100%;
  height: 100%;
  border: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  display: flex;
  border-radius: 0;
}

.modal-container-2 [data-wsjs-product="dots"] .keen-slider .keen-slider__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.modal-container-2 .close-button {
  position: absolute;
  padding: 1rem;
  transform: scale(1.3);
  right: 1.5rem;
  top: 1.5rem;
  cursor: pointer;
  /* O ícone (fill/stroke fixo em preto, não usa currentColor) fica invisível
     de vista quando a foto do produto embaixo dele também é escura naquele
     canto — precisa de um fundo próprio com contraste garantido, não só
     depender da cor da foto atrás. */
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

table#LV_TABLE_SUBPRODUTOS {
    border: 1px solid #CCC;
    padding: 10px;
}

.LV_TABLE_SUBPRODUTOS tr td {
    border-bottom: 1px solid #CCC;
    padding: 5px;
}

    .LV_TABLE_SUBPRODUTOS tr td select {
        padding: 5px 10px;
    }

.cashback-container {
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  border: 2px solid #E3E3E3;
  padding: 2rem;
  align-items: center;
  gap: 1rem;
}

.cashback-container .cashback__msg-holder > span {
  font-weight: 600;
}

/* popup/modal parcelas */
.prod-installments-container > a {
  text-decoration: underline;
  color: #2868C6;
  cursor: pointer;
}
.ws-modal-parcelas {
  position: fixed;
  background-color: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.ws-modal-parcelas.modalInstallmentOpen {
  display: flex;
  padding: 2rem;
}

.ws-modal-parcelas .ws-modal-parcelas-close {
  position: absolute;
  top: 5rem;
  right: 5rem;
  cursor: pointer;
  color: #fff;
  font-size: 4rem;
  
}

.ws-modal-parcelas h2 {
  color: #333333;
  font-size: 2.4rem;
  color: #333333;
  font-size: 2.4rem;
  border-bottom: 1px solid #BEBEBE;
  padding-bottom: 3rem;
}

.ws-modal-parcelas h3 {
  font-size: 1.6rem;
  padding-bottom: 2rem;
}

.ws-modal-parcelas__wrapper {
  width: 100%;
  max-width: 80rem;
  max-height: 100%;
  display: flex;
  height: 100%;
  max-height: 100%;
  border-radius: 2rem;
  overflow: hidden;
}

.ws-modal-parcelas .ws-modal-parcelas-content::-webkit-scrollbar {
    width: .8rem;
    background-color: #F7F7F7;
    border-radius: 10rem;
}

.ws-modal-parcelas .ws-modal-parcelas-content::-webkit-scrollbar-track {
  border-radius: 10rem;
  width: 1rem;
}

.ws-modal-parcelas .ws-modal-parcelas-content::-webkit-scrollbar-thumb {
  border-radius: 10rem;
  background-color: #9F9F9F;
}

.ws-modal-parcelas .ws-modal-parcelas-content {
  background-color: #fff;
  box-sizing: border-box;
  padding: 3rem;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 3rem;
  overflow-y: auto;
}

.ws-modal-parcelas .ws-modal-parcelas-content > div:not(:last-child) {
  border-bottom: 1px solid #BEBEBE;
  padding-bottom: 3rem;
}

.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-installments-list > div {
  display: grid;
  grid-template-columns: auto auto;
}

.ws-modal-parcelas .ws-modal-parcelas-another-payment-methods .ws-modal-parcelas-payment-methods-icons-holder {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-payment-methods-icons-holder .credit-card-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-payment-methods-icons-holder .credit-card-wrapper > span::first-letter {
  text-transform: capitalize;
}

.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-payment-methods .ws-modal-parcelas-payment-methods-icons-holder {
  display: flex;
  gap: .5rem;
}

.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-payment-methods-icons-holder .credit-card-container {
  padding: .5rem;
  aspect-ratio: 3 / 2;
  min-height: 3rem;
  max-height: 3rem;
  background-color: #fff;
  border-radius: .5rem;
}

.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-another-payment-methods svg,
.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-payment-methods svg {
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: initial;
  box-sizing: border-box;
}

.ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-another-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 900px) {
  .ws-modal-parcelas .ws-modal-parcelas-content {
    position: relative;
    height: 100%;
  }
  .ws-modal-parcelas > .ws-modal-parcelas-close {
    color: #222222;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    background: #fff;
    border-radius: 50%;
    padding: 0.5rem;
  }

  .ws-modal-parcelas .ws-modal-parcelas-content > .ws-modal-parcelas-close {
    display: initial;
    top: 2rem;
    right: 2rem;
  }
  
  .ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-installments-list > div {
    grid-template-columns: auto;
  }
}

@media (max-width: 350px) {
  .ws-modal-parcelas .ws-modal-parcelas-content .ws-modal-parcelas-installments-list ul {
    grid-template-columns: auto;
  }
}

/* imagens abaixo do produto */
.prod-photo-container.listing-photos-container {
  flex-direction: column-reverse;
  aspect-ratio: initial;
  min-width: initial;
}

.prod-photo-container.listing-photos-container [data-wsjs-product="photos"] {
    display: flex;
    align-items: center;
    margin-left: 0;
    width: 100%;
    justify-content: center;
    height: 100%;
}

.prod-photo-container [data-wsjs-product="dots"].listing-photos-container__dots {
  width: 100%;
  height: 100%;
  display: flex;
}

.prod-photo-container [data-wsjs-product="dots"].listing-photos-container__dots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.prod-photo-container [data-wsjs-product="dots"].listing-photos-container__dots > div {
  cursor: zoom-in;
}

/* fim imagens abaixo do produto */

/* kits */
#kits-container:empty {
  display: none;
}

#kits-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#kits-container .kit-combo-wrapper {
  padding-right: 2rem;
  border: var(--margin-all);
  background: white;
  border-radius: var(--radius-custom);
}

.kit-combo-wrapper {
  padding-right: 2rem;
  border: var(--margin-all);
}

/* fim kits */

/* Vídeos em DOTs não devem capturar clique */
[data-wsjs-product="dots"] video.ws-prod-video {
  pointer-events: none !important;
}
 /*END MODULO wsapi3-pag-prod-rules*/

/*START MODULO wsapi3-dragdrop*/ /* ADICIONAR AO MAIN */
[data-wsjs-draginner] > section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  transition: top .3s, font-size 0s;
}

[data-wsjs-draginner] .banner-full-section {
  padding-top: 0;
  padding-bottom: 0;
}

[data-wsjs-draginner] .banner-full-section .not-container {
  width: 100%;
  max-width: 100%;
  height: auto;
}

[data-wsjs-draginner] [data-wsjs-sectype="condicoes"] {
  padding: 50px 0;
}

[data-wsjs-draginner] [data-wsjs-sectype="prodSlide"],
[data-wsjs-draginner] [data-wsjs-sectype="prodList"] {
  padding: 50px 0;
}

[data-wsjs-draginner] [data-wsjs-sectype="manufacturer"] {
  padding: 30px 0;
}

[data-wsjs-draginner] [data-wsjs-sectype="newsletter"] {
  padding: 50px 0;
}

.text-content p, h2 {
  width: 100%;
}

.text-content p {
  color: var(--color-subtitle-newsletter);
}

.text-content h1, .text-content h2, .text-content h3, .text-content h4 {
  color: var(--color-title-newsletter);
}

.image-holder-ws.reversed,
.video-holder-ws.reversed,
.newsletter-holder-ws.reversed {
  flex-direction: row-reverse;
}

.video-holder-ws.reversed > .video-content,
.image-holder-ws.reversed > .image-content,
.newsletter-holder-ws.reversed > form {
  order: -1;
}


.image-holder-ws,
.video-holder-ws,
.newsletter-holder-ws {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mobile-inner .image-holder-ws,
.mobile-inner .video-holder-ws,
.mobile-inner .newsletter-holder-ws {
  display: grid;
  grid-template-columns: 1fr;
}

.image-holder-ws > div,
.video-holder-ws > div,
.newsletter-holder-ws > div,
.newsletter-holder-ws > form {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  position: relative;
  padding: 5px;
}

.image-holder-ws .image-content .image-cache + .image-label,
.image-holder-ws .image-content .image-load + .image-label,
.video-holder-ws .video-content .video-load + .video-label {
  display: none;
}

.video-holder-ws .video-content .video-load + .video-label {
  opacity: 0;
  width: 100%;
  display: block;
  height: 100%;
  position: absolute;
}


.video-holder-ws .video-content .video-load {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-holder-ws .video-content .video-load iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.image-holder-ws .image-content .image-label,
.video-holder-ws .video-content .video-label {
  text-align: center;
  padding: 100px;
  background: #fff;
  border-radius: 5px;
  border: 2px dashed #D8D8D8;
  z-index: 2;
}

.image-holder-ws .image-content .image-label > div,
.video-holder-ws .video-content .video-label > div {
  border-radius: 5px;
  padding: 5px 20px;
  background-color: #0088ff;
  color: #FFF;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  transition: .3s, font-size 0s;
}

.image-holder-ws .image-content .image-label:hover > div,
.video-holder-ws .video-content .video-label:hover > div {
  opacity: .8;
} 

.image-holder-ws img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-name: fadeInImage;
  animation-duration: 1.5s;  
  animation-fill-mode: forwards;
}

[data-wsjs-draginner] [data-wsjs-newsletter] > div {
  width: 100%;
}

.mobile-inner .prod-showcase-holder {
  padding: 1rem;
}

[data-wsjs-sectype="prodSlide"] section.prod-list:not(:last-child) {
  margin-bottom: 100px;
}

[data-wsjs-draginner] [data-wsjs-sectype="newsletter"], [data-wsjs-draginner] [data-wsjs-sectype="image"], [data-wsjs-draginner] [data-wsjs-sectype="video"] {
  background: var(--bg-newsletter);
}

[data-wsjs-draginner] [data-wsjs-sectype="manufacturer"] h2 {
  margin-bottom: 1rem;
}

[data-wsjs-draginner] [data-wsjs-sectype="manufacturer"] p {
  margin-bottom: 3rem;
}

[data-wsjs-draginner] [data-wsjs-sectype="manufacturer"] h2, [data-wsjs-draginner] [data-wsjs-sectype="manufacturer"] p {
  text-align: center;
}

.text-content h2, p {
  width: 100%;
}

@keyframes fadeInImage {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
 /*END MODULO wsapi3-dragdrop*/

/*START MODULO wsapi3-checkout-base*/ /* wsapi3-checkout-base — tokens e primitivas visuais compartilhadas pelas 3 etapas do
   checkout (carrinho, pagamento, pedido confirmado). Carregado globalmente no bundle
   (GERAL.css inclui todos os default-modules), por isso tudo aqui é namespaced com o
   prefixo "wscb-" para não vazar estilo pro resto do site. Baseado no visual do
   checkout de exemplo fornecido pelo usuário. */

:root {
  --wscb-brand: #66c254;
  --wscb-brand-dark: #51a840;
  --wscb-brand-soft: #effbed;
  --wscb-secondary: #222;
  --wscb-secondary-dark: #000;
  --wscb-ink: #555;
  --wscb-ink-strong: #414141;
  --wscb-muted: #909090;
  --wscb-line: #ddd;
  --wscb-surface: #fff;
  --wscb-danger: #c0392b;
  --wscb-danger-soft: #fdecea;
  --wscb-link: #0789f7;
  --wscb-radius: 14px;
  /* Herda o knob global de wsapi3-main (inputs + botões retangulares). O
     fallback cobre o caso de este arquivo ser usado sem o bundle completo. */
  --wscb-radius-sm: var(--ws-radius-sm, 10px);
  --wscb-shell: 1140px;
  --wscb-shadow: 0 1px 2px rgb(0 0 0 / 4%);
  --wscb-space: 24px;
  --wscb-font: "Roboto", Arial, sans-serif;

  /* Únicos 3 tamanhos de fonte permitidos nos módulos de checkout (base,
     payment-page, final-page). Nada nesses módulos deve usar um font-size
     fora desta escala — para dar ênfase, usar peso/cor/espaçamento, não
     um 4º tamanho. Em rem porque o resto do site assume html com font-size
     responsivo (8px a 10px conforme wsapi3-main.css) — os valores abaixo
     equivalem a 16/14/12px na maior faixa (desktop). */
  --wscb-text-title: 1.6rem;
  --wscb-text-default: 1.4rem;
  --wscb-text-small: 1.2rem;
}

/* ── Layout base ─────────────────────────────────────────────────────── */
.wscb-shell { width: min(calc(100% - 32px), var(--wscb-shell)); margin-inline: auto; }
/* Card branco padrão: sem borda, só fundo + sombra suave (payment-page e
   final-page usam esta mesma base para todos os seus blocos). */
.wscb-card { border-radius: var(--wscb-radius); background: var(--wscb-surface); box-shadow: var(--wscb-shadow); }
.wscb-rule { height: 1px; margin: 14px 0 22px; background: var(--wscb-line); }
.wscb-hidden { display: none !important; }

/* Cabeçalho de card com ícone + título — usado em qualquer bloco com um
   ícone à esquerda de um título em negrito (Resumo, Cupom, Produtos, e os
   cards da tela de pedido confirmado). */
.wscb-card-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--wscb-line);
}
.wscb-card-header__icon { display: flex; color: #222; }
.wscb-card-header b { font-size: var(--wscb-text-default); font-weight: 700; color: var(--wscb-ink-strong); }

/* ── Tipografia (3 tamanhos: título/default/small — ver tokens no :root) ── */
.wscb-title { margin: 0; font-size: var(--wscb-text-title); font-weight: 700; color: var(--wscb-ink-strong); }
.wscb-text { font-size: var(--wscb-text-default); }
.wscb-text-sm { font-size: var(--wscb-text-small); color: var(--wscb-muted); }

.wscb-label { display: block; margin-bottom: .4rem; font-size: var(--wscb-text-small); color: var(--wscb-muted); }

/* ── Mensagens de campo/formulário (erro, sucesso, info) ────────────────── */
.wscb-msg { font-size: var(--wscb-text-small); min-height: 1.6rem; margin: .6rem 0; }
.wscb-msg--error { color: var(--wscb-danger); }
.wscb-msg--success { color: #27ae60; }
.wscb-msg--info { color: #2980b9; }

/* .wscb-msg reserva min-height+margem mesmo vazia (acima) pra não pular de
   layout quando um erro aparece — mas em toda tela de identificação
   (login-page, login-sidebar, checkout) ela senta entre o botão "Continuar"
   e a divisória "ou conecte-se com a sua conta", e como não existe nada
   equivalente entre essa divisória e os botões de rede social, o espaço
   ficava maior de um lado que do outro. Encolhe só quando vazia (mesmo
   tratamento já usado no formulário de cupom, via :empty, mais acima neste
   arquivo) — com erro, volta a ocupar o espaço normal e reserva o layout de
   novo. :has() em vez de mirar cada id (id-main-msg, main-msg do
   login-sidebar, ws-checkout-init-guest-msg do checkout) cobre os 3 locais
   numa regra só, por posição. */
.wscb-msg:empty:has(+ .ws-checkout-init-identify-or) {
  min-height: 0;
  margin: 0;
}

/* ── Botões ──────────────────────────────────────────────────────────── */
.wscb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--wscb-radius-sm);
  background: #fff; font-family: var(--wscb-font); font-size: var(--wscb-text-default); font-weight: 500; cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.wscb-btn-primary { color: #fff; border-color: var(--wscb-brand-dark); background: var(--wscb-brand); font-weight: 700; }
.wscb-btn-primary:hover { background: var(--wscb-brand-dark); }
.wscb-btn-primary:disabled { opacity: .48; cursor: not-allowed; }
/* Idêntico ao primary, só muda a cor de fundo — usado nos botões de avanço
   de etapa (o botão de finalizar compra continua verde/primary). */
.wscb-btn-secondary { color: #fff; border-color: var(--wscb-secondary-dark); background: var(--wscb-secondary); font-weight: 700; }
.wscb-btn-secondary:hover { background: var(--wscb-secondary-dark); }
.wscb-btn-secondary:disabled { opacity: .48; cursor: not-allowed; }
.wscb-btn-muted { color: #c4c4c4; border-color: #d6d6d6; }
.wscb-btn-outline { background: #fff; border-color: var(--wscb-line); color: var(--wscb-ink-strong); font-weight: 700; }
.wscb-btn-outline:hover { background: #f5f5f5; }
.wscb-btn-outline:disabled { opacity: .5; cursor: not-allowed; }
.wscb-btn-wide { width: 100%; }
/* Variante compacta (ex.: botões "Copiar" embutidos em uma linha de texto) —
   ainda usa --wscb-text-small, não é um 4º tamanho de fonte. */
.wscb-btn-sm { min-height: auto; padding: .35rem .9rem; font-size: var(--wscb-text-small); }

/* Link padrão único — qualquer link/gatilho de texto do checkout (trigger de
   cupom, "adicionar endereço", "não sei meu CEP", "voltar ao carrinho" etc.)
   usa esta mesma classe: azul, sem underline, underline só no hover, peso e
   tamanho normais (combine com .wscb-text-sm quando o contexto pedir a
   variante pequena). */
.wscb-link {
  color: var(--wscb-link); font-weight: 400; text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit; font-size: var(--wscb-text-default);
}
.wscb-link:hover { text-decoration: underline; }

/* Combos com .wscb-text-sm precisam ganhar do font-size default dos
   componentes acima — especificidade de 2 classes garante a prioridade
   independente da ordem de declaração no arquivo. */
.wscb-btn.wscb-text-sm,
.wscb-link.wscb-text-sm { font-size: var(--wscb-text-small); }

/* ── Inputs de formulário ────────────────────────────────────────────── */
.wscb-input, .wscb-select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--wscb-line);
  border-radius: var(--wscb-radius-sm); font-family: var(--wscb-font); font-size: var(--wscb-text-default); background: #fff;
}
/* wsapi3-main.css define um glow azul global em input:focus/textarea:focus
   (border-color com !important + box-shadow) — precisamos de !important
   também para vencer isso, senão o glow legado aparece. O campo não deve
   mudar de borda ao focar (pedido explícito do usuário), então aqui só
   neutralizamos o glow legado, sem aplicar nenhum destaque próprio. */
.wscb-input:focus, .wscb-select:focus {
  outline: none;
  box-shadow: none; border-color: var(--wscb-line) !important;
}
.wscb-input.wscb-invalid, .wscb-select.wscb-invalid { border-color: var(--wscb-danger); }
/* A regra de :focus acima zera a borda pra --wscb-line com !important — sem
   isto, focar um campo inválido pra corrigir escondia a marcação de erro. */
.wscb-input.wscb-invalid:focus, .wscb-select.wscb-invalid:focus { border-color: var(--wscb-danger) !important; }

/* <select> com a opção "vazia" (placeholder tipo "Selecione...") selecionada:
   o texto exibido fica com a cor de placeholder dos inputs (--placeHolderColor).
   Assim que uma opção real é escolhida, volta ao normal. Cobre os dois modos
   de render do texto fechado do select: Chrome usa a cor do próprio <select>
   (regra :has), Firefox usa a cor da <option> selecionada (regra option[value=""]).
   As demais <option> ficam com a cor normal. */
.wscb-select:has(option[value=""]:checked) { color: var(--placeHolderColor, #c9c9c9); }
.wscb-select option[value=""] { color: var(--placeHolderColor, #c9c9c9); }
.wscb-select option:not([value=""]) { color: var(--wscb-ink, #555); }

/* Campo de senha com ícone de olho (mostrar/ocultar) — usado em qualquer
   input[type=password] do checkout/login/sidebar. Marcação: input .wscb-input
   dentro de um wrapper .wscb-password-wrap, com um <button data-wsjs-password-toggle>
   como irmão; o JS de cada módulo alterna o type do input e o ícone do botão. */
.wscb-password-wrap { position: relative; }
.wscb-password-wrap .wscb-input { padding-right: 4.4rem; }
.wscb-password-toggle {
  position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--wscb-muted);
}
.wscb-password-toggle svg { width: 1.8rem; height: 1.8rem; }

/* Campo de data com ícone de calendário — mesmo padrão do .wscb-password-wrap acima
   (input .wscb-input + botão irmão posicionado absoluto), mas em vez de alternar o
   próprio input, o botão abre o date picker NATIVO do navegador (showPicker()) de um
   <input type="date"> escondido/sincronizado ao lado — o input visível continua sendo
   texto livre (com máscara), digitar nele nunca abre o picker, só o clique no ícone. */
.wscb-date-wrap { position: relative; }
.wscb-date-wrap .wscb-input { padding-right: 4.4rem; }
.wscb-date-toggle {
  position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--wscb-muted);
}
.wscb-date-toggle svg { width: 1.8rem; height: 1.8rem; }
/* opacity:0 (não display:none) — alguns navegadores não abrem showPicker() num input
   totalmente fora do layout de renderização; isso mantém ele "presente" sem ocupar
   espaço visível nem interceptar cliques (pointer-events:none, o clique é sempre no
   botão do ícone, que chama showPicker() via JS). */
.wscb-date-native { position: absolute; opacity: 0; width: 0; height: 0; border: 0; padding: 0; pointer-events: none; }

/* Campo de formulário (label + input empilhados) — usado nas grades de
   formulário das etapas do checkout. */
.wscb-field { display: flex; flex-direction: column; gap: .4rem; }
.wscb-field--full { grid-column: 1 / -1; }

/* Grade de formulário genérica, 2 colunas responsivas */
.wscb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.6rem; }

/* Input com ícone à esquerda (ex.: campo de identificação e-mail/CPF) */
.wscb-icon-input {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.8rem;
  padding: 0 1.4rem; border: 1px solid var(--wscb-line); border-radius: var(--wscb-radius-sm); color: var(--wscb-muted);
}
.wscb-icon-input svg { flex-shrink: 0; }
.wscb-icon-input input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: var(--wscb-text-default); color: var(--wscb-ink-strong);
}
/* Anula o glow azul global de input:focus (wsapi3-main.css) — sem destaque
   próprio no foco/hover, a borda do wrapper fica igual em qualquer estado. */
.wscb-icon-input input:focus { box-shadow: none; border-color: transparent !important; }

/* ── Cartão de opção com rádio ───────────────────────────────────────────
   Base compartilhada por qualquer lista de escolha do checkout (endereço,
   frete, forma de pagamento...): visual do cartão, hover, estado selecionado
   e — principal motivo de existir — o tamanho do rádio, sempre o mesmo em
   qualquer lista (sem isso cada lista acaba com um rádio de tamanho
   diferente, dependendo de como o grid da lista estica o item). Cada lista
   só sobrepõe grid-template-columns quando precisa de coluna(s) extra(s)
   (ícone, prazo/preço, etc.) — ver CSS específico de cada módulo. */
.wscb-option {
  display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 1rem;
  min-height: 6.4rem; padding: 1rem 1.6rem; border: 1px solid var(--wscb-line);
  border-radius: var(--wscb-radius-sm); cursor: pointer; color: #222;
  transition: border-color .15s, background-color .15s;
}
.wscb-option:hover { background-color: #f7f7f7; }
.wscb-option--selected { color: #222; border-color: var(--wscb-link); background: #f2f2f2; }

.wscb-option input[type="radio"] {
  width: 1.8rem; height: 1.8rem; margin: 0; cursor: pointer;
  accent-color: var(--wscb-link); flex-shrink: 0;
}
/* wsapi3-main.css define um glow azul global em input:focus — sem isso o
   rádio selecionado ganha um halo/fundo esbranquiçado no foco. */
.wscb-option input[type="radio"]:focus { outline: none; box-shadow: none; border-color: transparent !important; }

.wscb-option__title { font-weight: 400; }
.wscb-option__detail { font-size: var(--wscb-text-small); }

.wscb-option-list { display: flex; flex-direction: column; gap: .8rem; }

/* ── Item de produto (foto + nome/variação + qtd/preço) ──────────────────
   Usado no bloco "Produtos" do payment-page e no "Produtos" do pedido
   confirmado (final-page). */
.wscb-product-item { display: grid; grid-template-columns: 6.4rem 1fr; gap: 1.2rem; }
.wscb-product-item__photo {
  width: 6.4rem; height: 6.4rem; border-radius: var(--wscb-radius-sm);
  object-fit: cover; border: 1px solid var(--wscb-line);
}
.wscb-product-item__name { color: var(--wscb-ink-strong); margin-bottom: .2rem; }
.wscb-product-item__vars { color: var(--wscb-muted); font-size: var(--wscb-text-small); margin-bottom: .6rem; }
.wscb-product-item__row { display: flex; justify-content: space-between; align-items: center; font-size: var(--wscb-text-small); color: var(--wscb-muted); }
.wscb-product-item__price { font-weight: 700; color: var(--wscb-ink-strong); font-size: var(--wscb-text-default); }

/* ── Linhas de totais (Subtotal/Frete/Desconto/Total) ────────────────────
   Usado no Resumo do payment-page e no Resumo do final-page. */
.wscb-totals { display: flex; flex-direction: column; gap: .6rem; }
.wscb-totals-row { display: flex; justify-content: space-between; font-size: var(--wscb-text-default); color: var(--wscb-ink); }
.wscb-totals-row--total {
  font-size: var(--wscb-text-title); font-weight: 700; color: var(--wscb-ink-strong);
  padding-top: 1rem; margin-top: .4rem; border-top: 1px solid var(--wscb-line);
}
.wscb-totals-row--discount { color: #27ae60; font-weight: 700; }

/* Grupo input + botão colados (ex.: CEP + Buscar, cupom + OK) — mesmo padrão
   do campo de frete do checkout-cart: pill arredondado, botão embutido sem
   divisor, texto simples (não uppercase/brand). */
.wscb-input-group { display: flex; align-items: center; border: 1px solid var(--wscb-line); border-radius: var(--ws-radius-sm, 10px); overflow: hidden; }
.wscb-input-group .wscb-input { flex: 1; min-width: 0; border: none; border-radius: 0; }
.wscb-input-group .wscb-input:focus { outline: none; box-shadow: none; border-color: transparent !important; }
.wscb-input-group .wscb-btn {
  white-space: nowrap; min-height: auto; height: 100%; border: none;
  border-radius: 0; background: transparent; color: var(--wscb-ink-strong); font-weight: 600;
  padding: 0 1.6rem;
  /* Sem isso o botão herda o line-height:2.4rem global (body/button/input,
     ver wsapi3-main.css) — sua caixa vira alta o bastante pra parecer
     descentralizada verticalmente dentro do grupo, mesmo com
     align-items:center no .wscb-input-group e no .wscb-btn base (que só
     centraliza o texto dentro da própria caixa, não encolhe a caixa em si). */
  line-height: normal;
}
.wscb-input-group .wscb-btn:hover { background: #f5f5f5; }
.wscb-input-group .wscb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Loader / spinner ────────────────────────────────────────────────── */
/* O overlay de recarregamento do checkout usa o spinner padrão do site agora
   (wsMain.tools.showLoading(), .main-loading-spinner em wsapi3-main.css) —
   .wscb-spinner (próprio, 60px) foi removido daqui por ficar duplicado. */
.wscb-loader-container { display: none; }
.wscb-loader-container.wscb-loading { display: inline-flex; }

/* ── Badge / step-accordion (usado no acordeão do pagamento) ────────── */
/* O card inteiro (header + body expandido) é um único bloco branco — mesmo
   visual dos cards da sidebar (background + shadow, sem borda). */
.wscb-step {
  overflow: hidden;
  background: var(--wscb-surface, #fff);
  border-radius: var(--wscb-radius);
  box-shadow: var(--wscb-shadow);
}
/* Título na linha 1 (badge + título + lápis); o valor-resumo (preview) quebra
   pra linha 2, embaixo do título — o lápis ocupa as duas linhas pra continuar
   alinhado à direita onde já estava. Enquanto o step está expandido, o preview
   some (a informação já aparece duplicada no conteúdo abaixo). */
.wscb-step-header {
  display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto;
  column-gap: .8rem; row-gap: 2px; align-items: center; align-content: start;
  width: 100%; min-height: 64px; padding: 1.8rem 2rem; border: 0; background: transparent; text-align: left;
  font: inherit; font-family: var(--wscb-font); cursor: pointer;
  transition: margin-bottom .3s ease;
}
/* align-content:start acima evita um "salto" no ícone/título ao expandir: sem
   ele (default normal/stretch), quando .wscb-step-preview vira display:none
   no estado expandido, a 2ª linha do grid zera e o espaço livre do
   min-height:64px é redistribuído esticando a 1ª linha — empurrando
   ícone+título mais pra baixo só porque o preview sumiu, mesmo a altura
   total do header não mudando. Com align-content:start as linhas mantêm o
   tamanho intrínseco e a sobra de espaço fica abaixo do conteúdo, então a
   posição do título/ícone é idêntica fechado e aberto. */
.wscb-step-header b { grid-column: 2; grid-row: 1; font-size: var(--wscb-text-default); font-weight: 700; color: var(--wscb-ink-strong); }
/* 18px, igual ao SVG que sempre é usado aqui (ver wsapi3-checkout-payment-page.html) — não
   24px. Uma caixa maior que o ícone real cria uma folga invisível antes do gap pro título,
   fazendo o espaçamento ícone→título parecer maior aqui do que em .wscb-card-header__icon
   (mesmo ícone 18px, sem caixa fixa), apesar do column-gap/gap serem o mesmo .8rem nos dois. */
.wscb-step-badge { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 18px; height: 18px; color: #222; font-weight: 700; font-size: var(--wscb-text-small); }
.wscb-step-preview {
  grid-column: 2; grid-row: 2;
  overflow: hidden; color: #222; text-align: left; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--wscb-text-default); font-weight: 400;
}
/* display:none (não opacity:0!) — a linha 2 do grid do header (badge/título +
   preview) precisa deixar de existir de fato quando expandido, senão o preview
   invisível continua reservando a própria altura (grid-row:2, auto) e sobra um
   vão vazio entre o título e o corpo do step. display não anima mesmo, então
   não tem transição pra perder aqui. */
.wscb-step.wscb-expanded .wscb-step-preview { display: none; }
.wscb-step-edit-icon { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
/* Abre/fecha animando max-height (medido em JS via scrollHeight, ver
   WsCheckoutBase.expand()/collapse()) — display:none/block não anima, e o
   truque de grid-rows (0fr/1fr) tem seu próprio problema (não zera de
   verdade com filhos que têm min-height). O valor de pixel exato evita um
   chute alto tipo max-height:2000px, que deixaria a transição com
   velocidade inconsistente; expand() também "solta" o cap (max-height:none)
   assim que termina de abrir, então conteúdo que muda depois (ex.: nova
   mensagem de erro) não é cortado.
   IMPORTANTE: o elemento com max-height:0 NUNCA pode ter padding próprio —
   padding não é compressível (box-sizing:border-box só decide como um
   tamanho ESPECIFICADO é interpretado, não torna o padding elástico), então
   "padding-bottom: 20px" força no mínimo 20px de altura renderizada mesmo
   com max-height:0, deixando exatamente uma tira desse tamanho visível. Por
   isso o padding sempre vai num filho (.wscb-step-body-inner) — nunca aqui. */
.wscb-step-body,
.wscb-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
/* Lateral em rem (não px) pra bater com o resto do design system do checkout
   (ex.: .ws-checkout-init-sidebar__totals-card usa 2rem) — como o root usa
   font-size variável (wsapi3-main.css, 8px a 10px conforme viewport), px fixo
   aqui desalinhava esse padding do resto da página em qualquer tema. */
.wscb-step-body-inner { padding: 0 2rem 20px; }
.wscb-step.wscb-expanded .wscb-step-header { margin-bottom: 14px; }

/* ── Popup / modal genérico ──────────────────────────────────────────── */
.wscb-popup-overlay {
  position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center;
  background: rgb(0 0 0 / 45%);
}
.wscb-popup-overlay.wscb-hidden { display: none; }
.wscb-popup-box { width: min(calc(100% - 32px), 420px); padding: 28px; background: #fff; border-radius: var(--wscb-radius); text-align: center; }
.wscb-popup-close { position: absolute; top: 18px; right: 18px; background: transparent; border: 0; cursor: pointer; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#wscb-toast {
  position: fixed; z-index: 9999; left: 50%; bottom: 24px; translate: -50% 20px;
  padding: 10px 18px; color: #fff; border-radius: 4px; background: #333; opacity: 0;
  pointer-events: none; transition: .2s; font-family: var(--wscb-font); font-size: var(--wscb-text-default);
}
#wscb-toast.wscb-show { translate: -50% 0; opacity: 1; }

@media (max-width: 700px) {
  :root { --wscb-radius: 12px; }
  .wscb-shell { width: calc(100% - 22px); }
}
 /*END MODULO wsapi3-checkout-base*/

/*START MODULO wsapi3-checkout-base*/ /* wsapi3-checkout-base — tokens e primitivas visuais compartilhadas pelas 3 etapas do
   checkout (carrinho, pagamento, pedido confirmado). Carregado globalmente no bundle
   (GERAL.css inclui todos os default-modules), por isso tudo aqui é namespaced com o
   prefixo "wscb-" para não vazar estilo pro resto do site. Baseado no visual do
   checkout de exemplo fornecido pelo usuário. */

:root {
  --wscb-brand: #66c254;
  --wscb-brand-dark: #51a840;
  --wscb-brand-soft: #effbed;
  --wscb-secondary: #222;
  --wscb-secondary-dark: #000;
  --wscb-ink: #555;
  --wscb-ink-strong: #414141;
  --wscb-muted: #909090;
  --wscb-line: #ddd;
  --wscb-surface: #fff;
  --wscb-danger: #c0392b;
  --wscb-danger-soft: #fdecea;
  --wscb-link: #0789f7;
  --wscb-radius: 14px;
  /* Herda o knob global de wsapi3-main (inputs + botões retangulares). O
     fallback cobre o caso de este arquivo ser usado sem o bundle completo. */
  --wscb-radius-sm: var(--ws-radius-sm, 10px);
  --wscb-shell: 1140px;
  --wscb-shadow: 0 1px 2px rgb(0 0 0 / 4%);
  --wscb-space: 24px;
  --wscb-font: "Roboto", Arial, sans-serif;

  /* Únicos 3 tamanhos de fonte permitidos nos módulos de checkout (base,
     payment-page, final-page). Nada nesses módulos deve usar um font-size
     fora desta escala — para dar ênfase, usar peso/cor/espaçamento, não
     um 4º tamanho. Em rem porque o resto do site assume html com font-size
     responsivo (8px a 10px conforme wsapi3-main.css) — os valores abaixo
     equivalem a 16/14/12px na maior faixa (desktop). */
  --wscb-text-title: 1.6rem;
  --wscb-text-default: 1.4rem;
  --wscb-text-small: 1.2rem;
}

/* ── Layout base ─────────────────────────────────────────────────────── */
.wscb-shell { width: min(calc(100% - 32px), var(--wscb-shell)); margin-inline: auto; }
/* Card branco padrão: sem borda, só fundo + sombra suave (payment-page e
   final-page usam esta mesma base para todos os seus blocos). */
.wscb-card { border-radius: var(--wscb-radius); background: var(--wscb-surface); box-shadow: var(--wscb-shadow); }
.wscb-rule { height: 1px; margin: 14px 0 22px; background: var(--wscb-line); }
.wscb-hidden { display: none !important; }

/* Cabeçalho de card com ícone + título — usado em qualquer bloco com um
   ícone à esquerda de um título em negrito (Resumo, Cupom, Produtos, e os
   cards da tela de pedido confirmado). */
.wscb-card-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--wscb-line);
}
.wscb-card-header__icon { display: flex; color: #222; }
.wscb-card-header b { font-size: var(--wscb-text-default); font-weight: 700; color: var(--wscb-ink-strong); }

/* ── Tipografia (3 tamanhos: título/default/small — ver tokens no :root) ── */
.wscb-title { margin: 0; font-size: var(--wscb-text-title); font-weight: 700; color: var(--wscb-ink-strong); }
.wscb-text { font-size: var(--wscb-text-default); }
.wscb-text-sm { font-size: var(--wscb-text-small); color: var(--wscb-muted); }

.wscb-label { display: block; margin-bottom: .4rem; font-size: var(--wscb-text-small); color: var(--wscb-muted); }

/* ── Mensagens de campo/formulário (erro, sucesso, info) ────────────────── */
.wscb-msg { font-size: var(--wscb-text-small); min-height: 1.6rem; margin: .6rem 0; }
.wscb-msg--error { color: var(--wscb-danger); }
.wscb-msg--success { color: #27ae60; }
.wscb-msg--info { color: #2980b9; }

/* .wscb-msg reserva min-height+margem mesmo vazia (acima) pra não pular de
   layout quando um erro aparece — mas em toda tela de identificação
   (login-page, login-sidebar, checkout) ela senta entre o botão "Continuar"
   e a divisória "ou conecte-se com a sua conta", e como não existe nada
   equivalente entre essa divisória e os botões de rede social, o espaço
   ficava maior de um lado que do outro. Encolhe só quando vazia (mesmo
   tratamento já usado no formulário de cupom, via :empty, mais acima neste
   arquivo) — com erro, volta a ocupar o espaço normal e reserva o layout de
   novo. :has() em vez de mirar cada id (id-main-msg, main-msg do
   login-sidebar, ws-checkout-init-guest-msg do checkout) cobre os 3 locais
   numa regra só, por posição. */
.wscb-msg:empty:has(+ .ws-checkout-init-identify-or) {
  min-height: 0;
  margin: 0;
}

/* ── Botões ──────────────────────────────────────────────────────────── */
.wscb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--wscb-radius-sm);
  background: #fff; font-family: var(--wscb-font); font-size: var(--wscb-text-default); font-weight: 500; cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.wscb-btn-primary { color: #fff; border-color: var(--wscb-brand-dark); background: var(--wscb-brand); font-weight: 700; }
.wscb-btn-primary:hover { background: var(--wscb-brand-dark); }
.wscb-btn-primary:disabled { opacity: .48; cursor: not-allowed; }
/* Idêntico ao primary, só muda a cor de fundo — usado nos botões de avanço
   de etapa (o botão de finalizar compra continua verde/primary). */
.wscb-btn-secondary { color: #fff; border-color: var(--wscb-secondary-dark); background: var(--wscb-secondary); font-weight: 700; }
.wscb-btn-secondary:hover { background: var(--wscb-secondary-dark); }
.wscb-btn-secondary:disabled { opacity: .48; cursor: not-allowed; }
.wscb-btn-muted { color: #c4c4c4; border-color: #d6d6d6; }
.wscb-btn-outline { background: #fff; border-color: var(--wscb-line); color: var(--wscb-ink-strong); font-weight: 700; }
.wscb-btn-outline:hover { background: #f5f5f5; }
.wscb-btn-outline:disabled { opacity: .5; cursor: not-allowed; }
.wscb-btn-wide { width: 100%; }
/* Variante compacta (ex.: botões "Copiar" embutidos em uma linha de texto) —
   ainda usa --wscb-text-small, não é um 4º tamanho de fonte. */
.wscb-btn-sm { min-height: auto; padding: .35rem .9rem; font-size: var(--wscb-text-small); }

/* Link padrão único — qualquer link/gatilho de texto do checkout (trigger de
   cupom, "adicionar endereço", "não sei meu CEP", "voltar ao carrinho" etc.)
   usa esta mesma classe: azul, sem underline, underline só no hover, peso e
   tamanho normais (combine com .wscb-text-sm quando o contexto pedir a
   variante pequena). */
.wscb-link {
  color: var(--wscb-link); font-weight: 400; text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit; font-size: var(--wscb-text-default);
}
.wscb-link:hover { text-decoration: underline; }

/* Combos com .wscb-text-sm precisam ganhar do font-size default dos
   componentes acima — especificidade de 2 classes garante a prioridade
   independente da ordem de declaração no arquivo. */
.wscb-btn.wscb-text-sm,
.wscb-link.wscb-text-sm { font-size: var(--wscb-text-small); }

/* ── Inputs de formulário ────────────────────────────────────────────── */
.wscb-input, .wscb-select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--wscb-line);
  border-radius: var(--wscb-radius-sm); font-family: var(--wscb-font); font-size: var(--wscb-text-default); background: #fff;
}
/* wsapi3-main.css define um glow azul global em input:focus/textarea:focus
   (border-color com !important + box-shadow) — precisamos de !important
   também para vencer isso, senão o glow legado aparece. O campo não deve
   mudar de borda ao focar (pedido explícito do usuário), então aqui só
   neutralizamos o glow legado, sem aplicar nenhum destaque próprio. */
.wscb-input:focus, .wscb-select:focus {
  outline: none;
  box-shadow: none; border-color: var(--wscb-line) !important;
}
.wscb-input.wscb-invalid, .wscb-select.wscb-invalid { border-color: var(--wscb-danger); }
/* A regra de :focus acima zera a borda pra --wscb-line com !important — sem
   isto, focar um campo inválido pra corrigir escondia a marcação de erro. */
.wscb-input.wscb-invalid:focus, .wscb-select.wscb-invalid:focus { border-color: var(--wscb-danger) !important; }

/* <select> com a opção "vazia" (placeholder tipo "Selecione...") selecionada:
   o texto exibido fica com a cor de placeholder dos inputs (--placeHolderColor).
   Assim que uma opção real é escolhida, volta ao normal. Cobre os dois modos
   de render do texto fechado do select: Chrome usa a cor do próprio <select>
   (regra :has), Firefox usa a cor da <option> selecionada (regra option[value=""]).
   As demais <option> ficam com a cor normal. */
.wscb-select:has(option[value=""]:checked) { color: var(--placeHolderColor, #c9c9c9); }
.wscb-select option[value=""] { color: var(--placeHolderColor, #c9c9c9); }
.wscb-select option:not([value=""]) { color: var(--wscb-ink, #555); }

/* Campo de senha com ícone de olho (mostrar/ocultar) — usado em qualquer
   input[type=password] do checkout/login/sidebar. Marcação: input .wscb-input
   dentro de um wrapper .wscb-password-wrap, com um <button data-wsjs-password-toggle>
   como irmão; o JS de cada módulo alterna o type do input e o ícone do botão. */
.wscb-password-wrap { position: relative; }
.wscb-password-wrap .wscb-input { padding-right: 4.4rem; }
.wscb-password-toggle {
  position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--wscb-muted);
}
.wscb-password-toggle svg { width: 1.8rem; height: 1.8rem; }

/* Campo de data com ícone de calendário — mesmo padrão do .wscb-password-wrap acima
   (input .wscb-input + botão irmão posicionado absoluto), mas em vez de alternar o
   próprio input, o botão abre o date picker NATIVO do navegador (showPicker()) de um
   <input type="date"> escondido/sincronizado ao lado — o input visível continua sendo
   texto livre (com máscara), digitar nele nunca abre o picker, só o clique no ícone. */
.wscb-date-wrap { position: relative; }
.wscb-date-wrap .wscb-input { padding-right: 4.4rem; }
.wscb-date-toggle {
  position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--wscb-muted);
}
.wscb-date-toggle svg { width: 1.8rem; height: 1.8rem; }
/* opacity:0 (não display:none) — alguns navegadores não abrem showPicker() num input
   totalmente fora do layout de renderização; isso mantém ele "presente" sem ocupar
   espaço visível nem interceptar cliques (pointer-events:none, o clique é sempre no
   botão do ícone, que chama showPicker() via JS). */
.wscb-date-native { position: absolute; opacity: 0; width: 0; height: 0; border: 0; padding: 0; pointer-events: none; }

/* Campo de formulário (label + input empilhados) — usado nas grades de
   formulário das etapas do checkout. */
.wscb-field { display: flex; flex-direction: column; gap: .4rem; }
.wscb-field--full { grid-column: 1 / -1; }

/* Grade de formulário genérica, 2 colunas responsivas */
.wscb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.6rem; }

/* Input com ícone à esquerda (ex.: campo de identificação e-mail/CPF) */
.wscb-icon-input {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.8rem;
  padding: 0 1.4rem; border: 1px solid var(--wscb-line); border-radius: var(--wscb-radius-sm); color: var(--wscb-muted);
}
.wscb-icon-input svg { flex-shrink: 0; }
.wscb-icon-input input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: var(--wscb-text-default); color: var(--wscb-ink-strong);
}
/* Anula o glow azul global de input:focus (wsapi3-main.css) — sem destaque
   próprio no foco/hover, a borda do wrapper fica igual em qualquer estado. */
.wscb-icon-input input:focus { box-shadow: none; border-color: transparent !important; }

/* ── Cartão de opção com rádio ───────────────────────────────────────────
   Base compartilhada por qualquer lista de escolha do checkout (endereço,
   frete, forma de pagamento...): visual do cartão, hover, estado selecionado
   e — principal motivo de existir — o tamanho do rádio, sempre o mesmo em
   qualquer lista (sem isso cada lista acaba com um rádio de tamanho
   diferente, dependendo de como o grid da lista estica o item). Cada lista
   só sobrepõe grid-template-columns quando precisa de coluna(s) extra(s)
   (ícone, prazo/preço, etc.) — ver CSS específico de cada módulo. */
.wscb-option {
  display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 1rem;
  min-height: 6.4rem; padding: 1rem 1.6rem; border: 1px solid var(--wscb-line);
  border-radius: var(--wscb-radius-sm); cursor: pointer; color: #222;
  transition: border-color .15s, background-color .15s;
}
.wscb-option:hover { background-color: #f7f7f7; }
.wscb-option--selected { color: #222; border-color: var(--wscb-link); background: #f2f2f2; }

.wscb-option input[type="radio"] {
  width: 1.8rem; height: 1.8rem; margin: 0; cursor: pointer;
  accent-color: var(--wscb-link); flex-shrink: 0;
}
/* wsapi3-main.css define um glow azul global em input:focus — sem isso o
   rádio selecionado ganha um halo/fundo esbranquiçado no foco. */
.wscb-option input[type="radio"]:focus { outline: none; box-shadow: none; border-color: transparent !important; }

.wscb-option__title { font-weight: 400; }
.wscb-option__detail { font-size: var(--wscb-text-small); }

.wscb-option-list { display: flex; flex-direction: column; gap: .8rem; }

/* ── Item de produto (foto + nome/variação + qtd/preço) ──────────────────
   Usado no bloco "Produtos" do payment-page e no "Produtos" do pedido
   confirmado (final-page). */
.wscb-product-item { display: grid; grid-template-columns: 6.4rem 1fr; gap: 1.2rem; }
.wscb-product-item__photo {
  width: 6.4rem; height: 6.4rem; border-radius: var(--wscb-radius-sm);
  object-fit: cover; border: 1px solid var(--wscb-line);
}
.wscb-product-item__name { color: var(--wscb-ink-strong); margin-bottom: .2rem; }
.wscb-product-item__vars { color: var(--wscb-muted); font-size: var(--wscb-text-small); margin-bottom: .6rem; }
.wscb-product-item__row { display: flex; justify-content: space-between; align-items: center; font-size: var(--wscb-text-small); color: var(--wscb-muted); }
.wscb-product-item__price { font-weight: 700; color: var(--wscb-ink-strong); font-size: var(--wscb-text-default); }

/* ── Linhas de totais (Subtotal/Frete/Desconto/Total) ────────────────────
   Usado no Resumo do payment-page e no Resumo do final-page. */
.wscb-totals { display: flex; flex-direction: column; gap: .6rem; }
.wscb-totals-row { display: flex; justify-content: space-between; font-size: var(--wscb-text-default); color: var(--wscb-ink); }
.wscb-totals-row--total {
  font-size: var(--wscb-text-title); font-weight: 700; color: var(--wscb-ink-strong);
  padding-top: 1rem; margin-top: .4rem; border-top: 1px solid var(--wscb-line);
}
.wscb-totals-row--discount { color: #27ae60; font-weight: 700; }

/* Grupo input + botão colados (ex.: CEP + Buscar, cupom + OK) — mesmo padrão
   do campo de frete do checkout-cart: pill arredondado, botão embutido sem
   divisor, texto simples (não uppercase/brand). */
.wscb-input-group { display: flex; align-items: center; border: 1px solid var(--wscb-line); border-radius: var(--ws-radius-sm, 10px); overflow: hidden; }
.wscb-input-group .wscb-input { flex: 1; min-width: 0; border: none; border-radius: 0; }
.wscb-input-group .wscb-input:focus { outline: none; box-shadow: none; border-color: transparent !important; }
.wscb-input-group .wscb-btn {
  white-space: nowrap; min-height: auto; height: 100%; border: none;
  border-radius: 0; background: transparent; color: var(--wscb-ink-strong); font-weight: 600;
  padding: 0 1.6rem;
  /* Sem isso o botão herda o line-height:2.4rem global (body/button/input,
     ver wsapi3-main.css) — sua caixa vira alta o bastante pra parecer
     descentralizada verticalmente dentro do grupo, mesmo com
     align-items:center no .wscb-input-group e no .wscb-btn base (que só
     centraliza o texto dentro da própria caixa, não encolhe a caixa em si). */
  line-height: normal;
}
.wscb-input-group .wscb-btn:hover { background: #f5f5f5; }
.wscb-input-group .wscb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Loader / spinner ────────────────────────────────────────────────── */
/* O overlay de recarregamento do checkout usa o spinner padrão do site agora
   (wsMain.tools.showLoading(), .main-loading-spinner em wsapi3-main.css) —
   .wscb-spinner (próprio, 60px) foi removido daqui por ficar duplicado. */
.wscb-loader-container { display: none; }
.wscb-loader-container.wscb-loading { display: inline-flex; }

/* ── Badge / step-accordion (usado no acordeão do pagamento) ────────── */
/* O card inteiro (header + body expandido) é um único bloco branco — mesmo
   visual dos cards da sidebar (background + shadow, sem borda). */
.wscb-step {
  overflow: hidden;
  background: var(--wscb-surface, #fff);
  border-radius: var(--wscb-radius);
  box-shadow: var(--wscb-shadow);
}
/* Título na linha 1 (badge + título + lápis); o valor-resumo (preview) quebra
   pra linha 2, embaixo do título — o lápis ocupa as duas linhas pra continuar
   alinhado à direita onde já estava. Enquanto o step está expandido, o preview
   some (a informação já aparece duplicada no conteúdo abaixo). */
.wscb-step-header {
  display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto;
  column-gap: .8rem; row-gap: 2px; align-items: center; align-content: start;
  width: 100%; min-height: 64px; padding: 1.8rem 2rem; border: 0; background: transparent; text-align: left;
  font: inherit; font-family: var(--wscb-font); cursor: pointer;
  transition: margin-bottom .3s ease;
}
/* align-content:start acima evita um "salto" no ícone/título ao expandir: sem
   ele (default normal/stretch), quando .wscb-step-preview vira display:none
   no estado expandido, a 2ª linha do grid zera e o espaço livre do
   min-height:64px é redistribuído esticando a 1ª linha — empurrando
   ícone+título mais pra baixo só porque o preview sumiu, mesmo a altura
   total do header não mudando. Com align-content:start as linhas mantêm o
   tamanho intrínseco e a sobra de espaço fica abaixo do conteúdo, então a
   posição do título/ícone é idêntica fechado e aberto. */
.wscb-step-header b { grid-column: 2; grid-row: 1; font-size: var(--wscb-text-default); font-weight: 700; color: var(--wscb-ink-strong); }
/* 18px, igual ao SVG que sempre é usado aqui (ver wsapi3-checkout-payment-page.html) — não
   24px. Uma caixa maior que o ícone real cria uma folga invisível antes do gap pro título,
   fazendo o espaçamento ícone→título parecer maior aqui do que em .wscb-card-header__icon
   (mesmo ícone 18px, sem caixa fixa), apesar do column-gap/gap serem o mesmo .8rem nos dois. */
.wscb-step-badge { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 18px; height: 18px; color: #222; font-weight: 700; font-size: var(--wscb-text-small); }
.wscb-step-preview {
  grid-column: 2; grid-row: 2;
  overflow: hidden; color: #222; text-align: left; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--wscb-text-default); font-weight: 400;
}
/* display:none (não opacity:0!) — a linha 2 do grid do header (badge/título +
   preview) precisa deixar de existir de fato quando expandido, senão o preview
   invisível continua reservando a própria altura (grid-row:2, auto) e sobra um
   vão vazio entre o título e o corpo do step. display não anima mesmo, então
   não tem transição pra perder aqui. */
.wscb-step.wscb-expanded .wscb-step-preview { display: none; }
.wscb-step-edit-icon { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
/* Abre/fecha animando max-height (medido em JS via scrollHeight, ver
   WsCheckoutBase.expand()/collapse()) — display:none/block não anima, e o
   truque de grid-rows (0fr/1fr) tem seu próprio problema (não zera de
   verdade com filhos que têm min-height). O valor de pixel exato evita um
   chute alto tipo max-height:2000px, que deixaria a transição com
   velocidade inconsistente; expand() também "solta" o cap (max-height:none)
   assim que termina de abrir, então conteúdo que muda depois (ex.: nova
   mensagem de erro) não é cortado.
   IMPORTANTE: o elemento com max-height:0 NUNCA pode ter padding próprio —
   padding não é compressível (box-sizing:border-box só decide como um
   tamanho ESPECIFICADO é interpretado, não torna o padding elástico), então
   "padding-bottom: 20px" força no mínimo 20px de altura renderizada mesmo
   com max-height:0, deixando exatamente uma tira desse tamanho visível. Por
   isso o padding sempre vai num filho (.wscb-step-body-inner) — nunca aqui. */
.wscb-step-body,
.wscb-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
/* Lateral em rem (não px) pra bater com o resto do design system do checkout
   (ex.: .ws-checkout-init-sidebar__totals-card usa 2rem) — como o root usa
   font-size variável (wsapi3-main.css, 8px a 10px conforme viewport), px fixo
   aqui desalinhava esse padding do resto da página em qualquer tema. */
.wscb-step-body-inner { padding: 0 2rem 20px; }
.wscb-step.wscb-expanded .wscb-step-header { margin-bottom: 14px; }

/* ── Popup / modal genérico ──────────────────────────────────────────── */
.wscb-popup-overlay {
  position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center;
  background: rgb(0 0 0 / 45%);
}
.wscb-popup-overlay.wscb-hidden { display: none; }
.wscb-popup-box { width: min(calc(100% - 32px), 420px); padding: 28px; background: #fff; border-radius: var(--wscb-radius); text-align: center; }
.wscb-popup-close { position: absolute; top: 18px; right: 18px; background: transparent; border: 0; cursor: pointer; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#wscb-toast {
  position: fixed; z-index: 9999; left: 50%; bottom: 24px; translate: -50% 20px;
  padding: 10px 18px; color: #fff; border-radius: 4px; background: #333; opacity: 0;
  pointer-events: none; transition: .2s; font-family: var(--wscb-font); font-size: var(--wscb-text-default);
}
#wscb-toast.wscb-show { translate: -50% 0; opacity: 1; }

@media (max-width: 700px) {
  :root { --wscb-radius: 12px; }
  .wscb-shell { width: calc(100% - 22px); }
}
 /*END MODULO wsapi3-checkout-base*/

/*START MODULO wsapi3-checkout-base*/ /* wsapi3-checkout-base — tokens e primitivas visuais compartilhadas pelas 3 etapas do
   checkout (carrinho, pagamento, pedido confirmado). Carregado globalmente no bundle
   (GERAL.css inclui todos os default-modules), por isso tudo aqui é namespaced com o
   prefixo "wscb-" para não vazar estilo pro resto do site. Baseado no visual do
   checkout de exemplo fornecido pelo usuário. */

:root {
  --wscb-brand: #66c254;
  --wscb-brand-dark: #51a840;
  --wscb-brand-soft: #effbed;
  --wscb-secondary: #222;
  --wscb-secondary-dark: #000;
  --wscb-ink: #555;
  --wscb-ink-strong: #414141;
  --wscb-muted: #909090;
  --wscb-line: #ddd;
  --wscb-surface: #fff;
  --wscb-danger: #c0392b;
  --wscb-danger-soft: #fdecea;
  --wscb-link: #0789f7;
  --wscb-radius: 14px;
  /* Herda o knob global de wsapi3-main (inputs + botões retangulares). O
     fallback cobre o caso de este arquivo ser usado sem o bundle completo. */
  --wscb-radius-sm: var(--ws-radius-sm, 10px);
  --wscb-shell: 1140px;
  --wscb-shadow: 0 1px 2px rgb(0 0 0 / 4%);
  --wscb-space: 24px;
  --wscb-font: "Roboto", Arial, sans-serif;

  /* Únicos 3 tamanhos de fonte permitidos nos módulos de checkout (base,
     payment-page, final-page). Nada nesses módulos deve usar um font-size
     fora desta escala — para dar ênfase, usar peso/cor/espaçamento, não
     um 4º tamanho. Em rem porque o resto do site assume html com font-size
     responsivo (8px a 10px conforme wsapi3-main.css) — os valores abaixo
     equivalem a 16/14/12px na maior faixa (desktop). */
  --wscb-text-title: 1.6rem;
  --wscb-text-default: 1.4rem;
  --wscb-text-small: 1.2rem;
}

/* ── Layout base ─────────────────────────────────────────────────────── */
.wscb-shell { width: min(calc(100% - 32px), var(--wscb-shell)); margin-inline: auto; }
/* Card branco padrão: sem borda, só fundo + sombra suave (payment-page e
   final-page usam esta mesma base para todos os seus blocos). */
.wscb-card { border-radius: var(--wscb-radius); background: var(--wscb-surface); box-shadow: var(--wscb-shadow); }
.wscb-rule { height: 1px; margin: 14px 0 22px; background: var(--wscb-line); }
.wscb-hidden { display: none !important; }

/* Cabeçalho de card com ícone + título — usado em qualquer bloco com um
   ícone à esquerda de um título em negrito (Resumo, Cupom, Produtos, e os
   cards da tela de pedido confirmado). */
.wscb-card-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--wscb-line);
}
.wscb-card-header__icon { display: flex; color: #222; }
.wscb-card-header b { font-size: var(--wscb-text-default); font-weight: 700; color: var(--wscb-ink-strong); }

/* ── Tipografia (3 tamanhos: título/default/small — ver tokens no :root) ── */
.wscb-title { margin: 0; font-size: var(--wscb-text-title); font-weight: 700; color: var(--wscb-ink-strong); }
.wscb-text { font-size: var(--wscb-text-default); }
.wscb-text-sm { font-size: var(--wscb-text-small); color: var(--wscb-muted); }

.wscb-label { display: block; margin-bottom: .4rem; font-size: var(--wscb-text-small); color: var(--wscb-muted); }

/* ── Mensagens de campo/formulário (erro, sucesso, info) ────────────────── */
.wscb-msg { font-size: var(--wscb-text-small); min-height: 1.6rem; margin: .6rem 0; }
.wscb-msg--error { color: var(--wscb-danger); }
.wscb-msg--success { color: #27ae60; }
.wscb-msg--info { color: #2980b9; }

/* .wscb-msg reserva min-height+margem mesmo vazia (acima) pra não pular de
   layout quando um erro aparece — mas em toda tela de identificação
   (login-page, login-sidebar, checkout) ela senta entre o botão "Continuar"
   e a divisória "ou conecte-se com a sua conta", e como não existe nada
   equivalente entre essa divisória e os botões de rede social, o espaço
   ficava maior de um lado que do outro. Encolhe só quando vazia (mesmo
   tratamento já usado no formulário de cupom, via :empty, mais acima neste
   arquivo) — com erro, volta a ocupar o espaço normal e reserva o layout de
   novo. :has() em vez de mirar cada id (id-main-msg, main-msg do
   login-sidebar, ws-checkout-init-guest-msg do checkout) cobre os 3 locais
   numa regra só, por posição. */
.wscb-msg:empty:has(+ .ws-checkout-init-identify-or) {
  min-height: 0;
  margin: 0;
}

/* ── Botões ──────────────────────────────────────────────────────────── */
.wscb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--wscb-radius-sm);
  background: #fff; font-family: var(--wscb-font); font-size: var(--wscb-text-default); font-weight: 500; cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.wscb-btn-primary { color: #fff; border-color: var(--wscb-brand-dark); background: var(--wscb-brand); font-weight: 700; }
.wscb-btn-primary:hover { background: var(--wscb-brand-dark); }
.wscb-btn-primary:disabled { opacity: .48; cursor: not-allowed; }
/* Idêntico ao primary, só muda a cor de fundo — usado nos botões de avanço
   de etapa (o botão de finalizar compra continua verde/primary). */
.wscb-btn-secondary { color: #fff; border-color: var(--wscb-secondary-dark); background: var(--wscb-secondary); font-weight: 700; }
.wscb-btn-secondary:hover { background: var(--wscb-secondary-dark); }
.wscb-btn-secondary:disabled { opacity: .48; cursor: not-allowed; }
.wscb-btn-muted { color: #c4c4c4; border-color: #d6d6d6; }
.wscb-btn-outline { background: #fff; border-color: var(--wscb-line); color: var(--wscb-ink-strong); font-weight: 700; }
.wscb-btn-outline:hover { background: #f5f5f5; }
.wscb-btn-outline:disabled { opacity: .5; cursor: not-allowed; }
.wscb-btn-wide { width: 100%; }
/* Variante compacta (ex.: botões "Copiar" embutidos em uma linha de texto) —
   ainda usa --wscb-text-small, não é um 4º tamanho de fonte. */
.wscb-btn-sm { min-height: auto; padding: .35rem .9rem; font-size: var(--wscb-text-small); }

/* Link padrão único — qualquer link/gatilho de texto do checkout (trigger de
   cupom, "adicionar endereço", "não sei meu CEP", "voltar ao carrinho" etc.)
   usa esta mesma classe: azul, sem underline, underline só no hover, peso e
   tamanho normais (combine com .wscb-text-sm quando o contexto pedir a
   variante pequena). */
.wscb-link {
  color: var(--wscb-link); font-weight: 400; text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit; font-size: var(--wscb-text-default);
}
.wscb-link:hover { text-decoration: underline; }

/* Combos com .wscb-text-sm precisam ganhar do font-size default dos
   componentes acima — especificidade de 2 classes garante a prioridade
   independente da ordem de declaração no arquivo. */
.wscb-btn.wscb-text-sm,
.wscb-link.wscb-text-sm { font-size: var(--wscb-text-small); }

/* ── Inputs de formulário ────────────────────────────────────────────── */
.wscb-input, .wscb-select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--wscb-line);
  border-radius: var(--wscb-radius-sm); font-family: var(--wscb-font); font-size: var(--wscb-text-default); background: #fff;
}
/* wsapi3-main.css define um glow azul global em input:focus/textarea:focus
   (border-color com !important + box-shadow) — precisamos de !important
   também para vencer isso, senão o glow legado aparece. O campo não deve
   mudar de borda ao focar (pedido explícito do usuário), então aqui só
   neutralizamos o glow legado, sem aplicar nenhum destaque próprio. */
.wscb-input:focus, .wscb-select:focus {
  outline: none;
  box-shadow: none; border-color: var(--wscb-line) !important;
}
.wscb-input.wscb-invalid, .wscb-select.wscb-invalid { border-color: var(--wscb-danger); }
/* A regra de :focus acima zera a borda pra --wscb-line com !important — sem
   isto, focar um campo inválido pra corrigir escondia a marcação de erro. */
.wscb-input.wscb-invalid:focus, .wscb-select.wscb-invalid:focus { border-color: var(--wscb-danger) !important; }

/* <select> com a opção "vazia" (placeholder tipo "Selecione...") selecionada:
   o texto exibido fica com a cor de placeholder dos inputs (--placeHolderColor).
   Assim que uma opção real é escolhida, volta ao normal. Cobre os dois modos
   de render do texto fechado do select: Chrome usa a cor do próprio <select>
   (regra :has), Firefox usa a cor da <option> selecionada (regra option[value=""]).
   As demais <option> ficam com a cor normal. */
.wscb-select:has(option[value=""]:checked) { color: var(--placeHolderColor, #c9c9c9); }
.wscb-select option[value=""] { color: var(--placeHolderColor, #c9c9c9); }
.wscb-select option:not([value=""]) { color: var(--wscb-ink, #555); }

/* Campo de senha com ícone de olho (mostrar/ocultar) — usado em qualquer
   input[type=password] do checkout/login/sidebar. Marcação: input .wscb-input
   dentro de um wrapper .wscb-password-wrap, com um <button data-wsjs-password-toggle>
   como irmão; o JS de cada módulo alterna o type do input e o ícone do botão. */
.wscb-password-wrap { position: relative; }
.wscb-password-wrap .wscb-input { padding-right: 4.4rem; }
.wscb-password-toggle {
  position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--wscb-muted);
}
.wscb-password-toggle svg { width: 1.8rem; height: 1.8rem; }

/* Campo de data com ícone de calendário — mesmo padrão do .wscb-password-wrap acima
   (input .wscb-input + botão irmão posicionado absoluto), mas em vez de alternar o
   próprio input, o botão abre o date picker NATIVO do navegador (showPicker()) de um
   <input type="date"> escondido/sincronizado ao lado — o input visível continua sendo
   texto livre (com máscara), digitar nele nunca abre o picker, só o clique no ícone. */
.wscb-date-wrap { position: relative; }
.wscb-date-wrap .wscb-input { padding-right: 4.4rem; }
.wscb-date-toggle {
  position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--wscb-muted);
}
.wscb-date-toggle svg { width: 1.8rem; height: 1.8rem; }
/* opacity:0 (não display:none) — alguns navegadores não abrem showPicker() num input
   totalmente fora do layout de renderização; isso mantém ele "presente" sem ocupar
   espaço visível nem interceptar cliques (pointer-events:none, o clique é sempre no
   botão do ícone, que chama showPicker() via JS). */
.wscb-date-native { position: absolute; opacity: 0; width: 0; height: 0; border: 0; padding: 0; pointer-events: none; }

/* Campo de formulário (label + input empilhados) — usado nas grades de
   formulário das etapas do checkout. */
.wscb-field { display: flex; flex-direction: column; gap: .4rem; }
.wscb-field--full { grid-column: 1 / -1; }

/* Grade de formulário genérica, 2 colunas responsivas */
.wscb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.6rem; }

/* Input com ícone à esquerda (ex.: campo de identificação e-mail/CPF) */
.wscb-icon-input {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.8rem;
  padding: 0 1.4rem; border: 1px solid var(--wscb-line); border-radius: var(--wscb-radius-sm); color: var(--wscb-muted);
}
.wscb-icon-input svg { flex-shrink: 0; }
.wscb-icon-input input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: var(--wscb-text-default); color: var(--wscb-ink-strong);
}
/* Anula o glow azul global de input:focus (wsapi3-main.css) — sem destaque
   próprio no foco/hover, a borda do wrapper fica igual em qualquer estado. */
.wscb-icon-input input:focus { box-shadow: none; border-color: transparent !important; }

/* ── Cartão de opção com rádio ───────────────────────────────────────────
   Base compartilhada por qualquer lista de escolha do checkout (endereço,
   frete, forma de pagamento...): visual do cartão, hover, estado selecionado
   e — principal motivo de existir — o tamanho do rádio, sempre o mesmo em
   qualquer lista (sem isso cada lista acaba com um rádio de tamanho
   diferente, dependendo de como o grid da lista estica o item). Cada lista
   só sobrepõe grid-template-columns quando precisa de coluna(s) extra(s)
   (ícone, prazo/preço, etc.) — ver CSS específico de cada módulo. */
.wscb-option {
  display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 1rem;
  min-height: 6.4rem; padding: 1rem 1.6rem; border: 1px solid var(--wscb-line);
  border-radius: var(--wscb-radius-sm); cursor: pointer; color: #222;
  transition: border-color .15s, background-color .15s;
}
.wscb-option:hover { background-color: #f7f7f7; }
.wscb-option--selected { color: #222; border-color: var(--wscb-link); background: #f2f2f2; }

.wscb-option input[type="radio"] {
  width: 1.8rem; height: 1.8rem; margin: 0; cursor: pointer;
  accent-color: var(--wscb-link); flex-shrink: 0;
}
/* wsapi3-main.css define um glow azul global em input:focus — sem isso o
   rádio selecionado ganha um halo/fundo esbranquiçado no foco. */
.wscb-option input[type="radio"]:focus { outline: none; box-shadow: none; border-color: transparent !important; }

.wscb-option__title { font-weight: 400; }
.wscb-option__detail { font-size: var(--wscb-text-small); }

.wscb-option-list { display: flex; flex-direction: column; gap: .8rem; }

/* ── Item de produto (foto + nome/variação + qtd/preço) ──────────────────
   Usado no bloco "Produtos" do payment-page e no "Produtos" do pedido
   confirmado (final-page). */
.wscb-product-item { display: grid; grid-template-columns: 6.4rem 1fr; gap: 1.2rem; }
.wscb-product-item__photo {
  width: 6.4rem; height: 6.4rem; border-radius: var(--wscb-radius-sm);
  object-fit: cover; border: 1px solid var(--wscb-line);
}
.wscb-product-item__name { color: var(--wscb-ink-strong); margin-bottom: .2rem; }
.wscb-product-item__vars { color: var(--wscb-muted); font-size: var(--wscb-text-small); margin-bottom: .6rem; }
.wscb-product-item__row { display: flex; justify-content: space-between; align-items: center; font-size: var(--wscb-text-small); color: var(--wscb-muted); }
.wscb-product-item__price { font-weight: 700; color: var(--wscb-ink-strong); font-size: var(--wscb-text-default); }

/* ── Linhas de totais (Subtotal/Frete/Desconto/Total) ────────────────────
   Usado no Resumo do payment-page e no Resumo do final-page. */
.wscb-totals { display: flex; flex-direction: column; gap: .6rem; }
.wscb-totals-row { display: flex; justify-content: space-between; font-size: var(--wscb-text-default); color: var(--wscb-ink); }
.wscb-totals-row--total {
  font-size: var(--wscb-text-title); font-weight: 700; color: var(--wscb-ink-strong);
  padding-top: 1rem; margin-top: .4rem; border-top: 1px solid var(--wscb-line);
}
.wscb-totals-row--discount { color: #27ae60; font-weight: 700; }

/* Grupo input + botão colados (ex.: CEP + Buscar, cupom + OK) — mesmo padrão
   do campo de frete do checkout-cart: pill arredondado, botão embutido sem
   divisor, texto simples (não uppercase/brand). */
.wscb-input-group { display: flex; align-items: center; border: 1px solid var(--wscb-line); border-radius: var(--ws-radius-sm, 10px); overflow: hidden; }
.wscb-input-group .wscb-input { flex: 1; min-width: 0; border: none; border-radius: 0; }
.wscb-input-group .wscb-input:focus { outline: none; box-shadow: none; border-color: transparent !important; }
.wscb-input-group .wscb-btn {
  white-space: nowrap; min-height: auto; height: 100%; border: none;
  border-radius: 0; background: transparent; color: var(--wscb-ink-strong); font-weight: 600;
  padding: 0 1.6rem;
  /* Sem isso o botão herda o line-height:2.4rem global (body/button/input,
     ver wsapi3-main.css) — sua caixa vira alta o bastante pra parecer
     descentralizada verticalmente dentro do grupo, mesmo com
     align-items:center no .wscb-input-group e no .wscb-btn base (que só
     centraliza o texto dentro da própria caixa, não encolhe a caixa em si). */
  line-height: normal;
}
.wscb-input-group .wscb-btn:hover { background: #f5f5f5; }
.wscb-input-group .wscb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Loader / spinner ────────────────────────────────────────────────── */
/* O overlay de recarregamento do checkout usa o spinner padrão do site agora
   (wsMain.tools.showLoading(), .main-loading-spinner em wsapi3-main.css) —
   .wscb-spinner (próprio, 60px) foi removido daqui por ficar duplicado. */
.wscb-loader-container { display: none; }
.wscb-loader-container.wscb-loading { display: inline-flex; }

/* ── Badge / step-accordion (usado no acordeão do pagamento) ────────── */
/* O card inteiro (header + body expandido) é um único bloco branco — mesmo
   visual dos cards da sidebar (background + shadow, sem borda). */
.wscb-step {
  overflow: hidden;
  background: var(--wscb-surface, #fff);
  border-radius: var(--wscb-radius);
  box-shadow: var(--wscb-shadow);
}
/* Título na linha 1 (badge + título + lápis); o valor-resumo (preview) quebra
   pra linha 2, embaixo do título — o lápis ocupa as duas linhas pra continuar
   alinhado à direita onde já estava. Enquanto o step está expandido, o preview
   some (a informação já aparece duplicada no conteúdo abaixo). */
.wscb-step-header {
  display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto;
  column-gap: .8rem; row-gap: 2px; align-items: center; align-content: start;
  width: 100%; min-height: 64px; padding: 1.8rem 2rem; border: 0; background: transparent; text-align: left;
  font: inherit; font-family: var(--wscb-font); cursor: pointer;
  transition: margin-bottom .3s ease;
}
/* align-content:start acima evita um "salto" no ícone/título ao expandir: sem
   ele (default normal/stretch), quando .wscb-step-preview vira display:none
   no estado expandido, a 2ª linha do grid zera e o espaço livre do
   min-height:64px é redistribuído esticando a 1ª linha — empurrando
   ícone+título mais pra baixo só porque o preview sumiu, mesmo a altura
   total do header não mudando. Com align-content:start as linhas mantêm o
   tamanho intrínseco e a sobra de espaço fica abaixo do conteúdo, então a
   posição do título/ícone é idêntica fechado e aberto. */
.wscb-step-header b { grid-column: 2; grid-row: 1; font-size: var(--wscb-text-default); font-weight: 700; color: var(--wscb-ink-strong); }
/* 18px, igual ao SVG que sempre é usado aqui (ver wsapi3-checkout-payment-page.html) — não
   24px. Uma caixa maior que o ícone real cria uma folga invisível antes do gap pro título,
   fazendo o espaçamento ícone→título parecer maior aqui do que em .wscb-card-header__icon
   (mesmo ícone 18px, sem caixa fixa), apesar do column-gap/gap serem o mesmo .8rem nos dois. */
.wscb-step-badge { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 18px; height: 18px; color: #222; font-weight: 700; font-size: var(--wscb-text-small); }
.wscb-step-preview {
  grid-column: 2; grid-row: 2;
  overflow: hidden; color: #222; text-align: left; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--wscb-text-default); font-weight: 400;
}
/* display:none (não opacity:0!) — a linha 2 do grid do header (badge/título +
   preview) precisa deixar de existir de fato quando expandido, senão o preview
   invisível continua reservando a própria altura (grid-row:2, auto) e sobra um
   vão vazio entre o título e o corpo do step. display não anima mesmo, então
   não tem transição pra perder aqui. */
.wscb-step.wscb-expanded .wscb-step-preview { display: none; }
.wscb-step-edit-icon { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
/* Abre/fecha animando max-height (medido em JS via scrollHeight, ver
   WsCheckoutBase.expand()/collapse()) — display:none/block não anima, e o
   truque de grid-rows (0fr/1fr) tem seu próprio problema (não zera de
   verdade com filhos que têm min-height). O valor de pixel exato evita um
   chute alto tipo max-height:2000px, que deixaria a transição com
   velocidade inconsistente; expand() também "solta" o cap (max-height:none)
   assim que termina de abrir, então conteúdo que muda depois (ex.: nova
   mensagem de erro) não é cortado.
   IMPORTANTE: o elemento com max-height:0 NUNCA pode ter padding próprio —
   padding não é compressível (box-sizing:border-box só decide como um
   tamanho ESPECIFICADO é interpretado, não torna o padding elástico), então
   "padding-bottom: 20px" força no mínimo 20px de altura renderizada mesmo
   com max-height:0, deixando exatamente uma tira desse tamanho visível. Por
   isso o padding sempre vai num filho (.wscb-step-body-inner) — nunca aqui. */
.wscb-step-body,
.wscb-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
/* Lateral em rem (não px) pra bater com o resto do design system do checkout
   (ex.: .ws-checkout-init-sidebar__totals-card usa 2rem) — como o root usa
   font-size variável (wsapi3-main.css, 8px a 10px conforme viewport), px fixo
   aqui desalinhava esse padding do resto da página em qualquer tema. */
.wscb-step-body-inner { padding: 0 2rem 20px; }
.wscb-step.wscb-expanded .wscb-step-header { margin-bottom: 14px; }

/* ── Popup / modal genérico ──────────────────────────────────────────── */
.wscb-popup-overlay {
  position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center;
  background: rgb(0 0 0 / 45%);
}
.wscb-popup-overlay.wscb-hidden { display: none; }
.wscb-popup-box { width: min(calc(100% - 32px), 420px); padding: 28px; background: #fff; border-radius: var(--wscb-radius); text-align: center; }
.wscb-popup-close { position: absolute; top: 18px; right: 18px; background: transparent; border: 0; cursor: pointer; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#wscb-toast {
  position: fixed; z-index: 9999; left: 50%; bottom: 24px; translate: -50% 20px;
  padding: 10px 18px; color: #fff; border-radius: 4px; background: #333; opacity: 0;
  pointer-events: none; transition: .2s; font-family: var(--wscb-font); font-size: var(--wscb-text-default);
}
#wscb-toast.wscb-show { translate: -50% 0; opacity: 1; }

@media (max-width: 700px) {
  :root { --wscb-radius: 12px; }
  .wscb-shell { width: calc(100% - 22px); }
}
 /*END MODULO wsapi3-checkout-base*/

/*START MODULO wsapi3-checkout-header*/ /* css 17-01-25 */

body#BodyPage.estrutura_checkout, body#BodyPage.estrutura_carrinho {
    background-color: #f9f9f9;
}

#ws-carrinhoNovo header {
  box-shadow: 0px 0px 10px #00000029;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-header);
  border-bottom: 0.1rem solid #ddd;
  height: 10rem !important;
  z-index: 3;
  padding: 0.5rem 2rem;
  position: fixed;
  width: 100%;
  flex-direction: row;
  transition: ease 400ms;
}

#ws-carrinhoNovo header.menor {
  height: 8rem;
}

#ws-carrinhoNovo .logo {
  height: 100%;
  width: 20rem;
  max-width: 20rem;
}

#ws-carrinhoNovo .logo a {
  width: fit-content;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 100%;
}

#ws-carrinhoNovo .logo a img {
  height: initial;
  width: initial;
  max-height: 100%;
  max-width: 100%;
}

#ws-carrinhoNovo .progresso-barra {
  display: flex;
  justify-content: space-between;
  width: 47rem;
  position: relative;
  margin-top: 2.7rem;
}


#ws-carrinhoNovo .progresso-barra .progresso-barra__barraFundo {
  background-color: var(--color-header);
  position: absolute;
  width: 100%;
  height: 100%;
}

#ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer {
  width: 43rem;
  height: .3rem;
  left: 2rem;
  position: absolute;
  top: 0.7rem;
}

#ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer .progresso-barra__conteudo {
  position: absolute;
  background-color: var(--color-header);
  height: 100%;
}

#ws-carrinhoNovo .progresso-barra .progresso>span {
  font-size: 1rem;
  color: var(--color-header);
}

#ws-carrinhoNovo .progresso-barra .progresso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3rem;
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive {
  border: 2px solid var(--color-header);
  background-color: var(--color-header);
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
}

#ws-carrinhoNovo .progresso .bolinha svg {
  display: none;
}

#ws-carrinhoNovo .progresso .bolinha svg {
  stroke: var(--bg-header);
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  height: 0.6rem;
  width: 100%;
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive.bolinhaMainActive {
  height: 1.7rem;
  width: 1.7rem;
  background-color: var(--color-header);
}

#ws-carrinhoNovo .progresso .bolinha {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-header);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  background-color: var(--bg-header);
}

#ws-carrinhoNovo .progresso {
  font-size: 1rem;
}

#ws-carrinhoNovo .seguro {
  font-size: 1.2rem;
  color: var(--color-header);
  font-weight: bold;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 20rem;
}

#ws-carrinhoNovo .seguro svg {
  fill: var(--color-header);
  width: 2.2rem;
  height: 3rem;
}

/* mobile */
#ws-carrinhoNovo .mobile__progresso-barra {
  width: 100%;
  display: none;
  justify-content: center;
  padding: 10rem 2rem 2rem 2rem;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso-barra__barraFundo {
  background-color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso-barra__barraContainer .progresso-barra__conteudo {
  background-color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso>span {
  color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra  .progresso .bolinha{
  border: 2px solid #222222;
  background-color: #ffffff;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso .bolinha.bolinhaActive {
  background-color: #222222;
  border: 2px solid rgba(34, 34, 34);
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso .bolinha.bolinhaActive.bolinhaMainActive {
  background-color: #222;
  border: 2px solid rgba(34, 34, 34);
}

#ws-carrinhoNovo .progresso .bolinha svg {
  stroke: #fff;
}

@media screen and (max-width: 1200px) {
  #ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer {
    width: calc(100% - 4.8rem);
  }

  #ws-carrinhoNovo .progresso-barra {
    width: 100%;
  }

  #ws-carrinhoNovo .seguro {
    width: 40%;
  }

  #ws-carrinhoNovo header>.progresso-barra {
    display: none;
  }
  
  #ws-carrinhoNovo .mobile__progresso-barra {
    display: flex;
  }

  #ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    height: 0.6rem;
  }
}

@media screen and (max-width: 800px) {
  #ws-carrinhoNovo header {
    position: relative;
  }

  #ws-carrinhoNovo .seguroText {
    max-width: 10rem;
    line-height: 1.4rem;
  }

  #ws-carrinhoNovo .mobile__progresso-barra {
    padding: 0 2rem 2rem;
  }
}

@media screen and (max-width: 530px) {
  #ws-carrinhoNovo header {
    gap: 2rem;
  }

  #ws-carrinhoNovo .seguro {
    width: 100%;
  }

  #ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    height: 0.6rem;
  }
}
 /*END MODULO wsapi3-checkout-header*/

/*START MODULO wsapi3-checkout-header*/ /* css 17-01-25 */

body#BodyPage.estrutura_checkout, body#BodyPage.estrutura_carrinho {
    background-color: #f9f9f9;
}

#ws-carrinhoNovo header {
  box-shadow: 0px 0px 10px #00000029;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-header);
  border-bottom: 0.1rem solid #ddd;
  height: 10rem !important;
  z-index: 3;
  padding: 0.5rem 2rem;
  position: fixed;
  width: 100%;
  flex-direction: row;
  transition: ease 400ms;
}

#ws-carrinhoNovo header.menor {
  height: 8rem;
}

#ws-carrinhoNovo .logo {
  height: 100%;
  width: 20rem;
  max-width: 20rem;
}

#ws-carrinhoNovo .logo a {
  width: fit-content;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 100%;
}

#ws-carrinhoNovo .logo a img {
  height: initial;
  width: initial;
  max-height: 100%;
  max-width: 100%;
}

#ws-carrinhoNovo .progresso-barra {
  display: flex;
  justify-content: space-between;
  width: 47rem;
  position: relative;
  margin-top: 2.7rem;
}


#ws-carrinhoNovo .progresso-barra .progresso-barra__barraFundo {
  background-color: var(--color-header);
  position: absolute;
  width: 100%;
  height: 100%;
}

#ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer {
  width: 43rem;
  height: .3rem;
  left: 2rem;
  position: absolute;
  top: 0.7rem;
}

#ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer .progresso-barra__conteudo {
  position: absolute;
  background-color: var(--color-header);
  height: 100%;
}

#ws-carrinhoNovo .progresso-barra .progresso>span {
  font-size: 1rem;
  color: var(--color-header);
}

#ws-carrinhoNovo .progresso-barra .progresso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3rem;
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive {
  border: 2px solid var(--color-header);
  background-color: var(--color-header);
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
}

#ws-carrinhoNovo .progresso .bolinha svg {
  display: none;
}

#ws-carrinhoNovo .progresso .bolinha svg {
  stroke: var(--bg-header);
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  height: 0.6rem;
  width: 100%;
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive.bolinhaMainActive {
  height: 1.7rem;
  width: 1.7rem;
  background-color: var(--color-header);
}

#ws-carrinhoNovo .progresso .bolinha {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-header);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  background-color: var(--bg-header);
}

#ws-carrinhoNovo .progresso {
  font-size: 1rem;
}

#ws-carrinhoNovo .seguro {
  font-size: 1.2rem;
  color: var(--color-header);
  font-weight: bold;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 20rem;
}

#ws-carrinhoNovo .seguro svg {
  fill: var(--color-header);
  width: 2.2rem;
  height: 3rem;
}

/* mobile */
#ws-carrinhoNovo .mobile__progresso-barra {
  width: 100%;
  display: none;
  justify-content: center;
  padding: 10rem 2rem 2rem 2rem;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso-barra__barraFundo {
  background-color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso-barra__barraContainer .progresso-barra__conteudo {
  background-color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso>span {
  color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra  .progresso .bolinha{
  border: 2px solid #222222;
  background-color: #ffffff;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso .bolinha.bolinhaActive {
  background-color: #222222;
  border: 2px solid rgba(34, 34, 34);
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso .bolinha.bolinhaActive.bolinhaMainActive {
  background-color: #222;
  border: 2px solid rgba(34, 34, 34);
}

#ws-carrinhoNovo .progresso .bolinha svg {
  stroke: #fff;
}

@media screen and (max-width: 1200px) {
  #ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer {
    width: calc(100% - 4.8rem);
  }

  #ws-carrinhoNovo .progresso-barra {
    width: 100%;
  }

  #ws-carrinhoNovo .seguro {
    width: 40%;
  }

  #ws-carrinhoNovo header>.progresso-barra {
    display: none;
  }
  
  #ws-carrinhoNovo .mobile__progresso-barra {
    display: flex;
  }

  #ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    height: 0.6rem;
  }
}

@media screen and (max-width: 800px) {
  #ws-carrinhoNovo header {
    position: relative;
  }

  #ws-carrinhoNovo .seguroText {
    max-width: 10rem;
    line-height: 1.4rem;
  }

  #ws-carrinhoNovo .mobile__progresso-barra {
    padding: 0 2rem 2rem;
  }
}

@media screen and (max-width: 530px) {
  #ws-carrinhoNovo header {
    gap: 2rem;
  }

  #ws-carrinhoNovo .seguro {
    width: 100%;
  }

  #ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    height: 0.6rem;
  }
}
 /*END MODULO wsapi3-checkout-header*/

/*START MODULO wsapi3-checkout-header*/ /* css 17-01-25 */

body#BodyPage.estrutura_checkout, body#BodyPage.estrutura_carrinho {
    background-color: #f9f9f9;
}

#ws-carrinhoNovo header {
  box-shadow: 0px 0px 10px #00000029;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-header);
  border-bottom: 0.1rem solid #ddd;
  height: 10rem !important;
  z-index: 3;
  padding: 0.5rem 2rem;
  position: fixed;
  width: 100%;
  flex-direction: row;
  transition: ease 400ms;
}

#ws-carrinhoNovo header.menor {
  height: 8rem;
}

#ws-carrinhoNovo .logo {
  height: 100%;
  width: 20rem;
  max-width: 20rem;
}

#ws-carrinhoNovo .logo a {
  width: fit-content;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 100%;
}

#ws-carrinhoNovo .logo a img {
  height: initial;
  width: initial;
  max-height: 100%;
  max-width: 100%;
}

#ws-carrinhoNovo .progresso-barra {
  display: flex;
  justify-content: space-between;
  width: 47rem;
  position: relative;
  margin-top: 2.7rem;
}


#ws-carrinhoNovo .progresso-barra .progresso-barra__barraFundo {
  background-color: var(--color-header);
  position: absolute;
  width: 100%;
  height: 100%;
}

#ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer {
  width: 43rem;
  height: .3rem;
  left: 2rem;
  position: absolute;
  top: 0.7rem;
}

#ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer .progresso-barra__conteudo {
  position: absolute;
  background-color: var(--color-header);
  height: 100%;
}

#ws-carrinhoNovo .progresso-barra .progresso>span {
  font-size: 1rem;
  color: var(--color-header);
}

#ws-carrinhoNovo .progresso-barra .progresso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3rem;
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive {
  border: 2px solid var(--color-header);
  background-color: var(--color-header);
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
}

#ws-carrinhoNovo .progresso .bolinha svg {
  display: none;
}

#ws-carrinhoNovo .progresso .bolinha svg {
  stroke: var(--bg-header);
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  height: 0.6rem;
  width: 100%;
}

#ws-carrinhoNovo .progresso .bolinha.bolinhaActive.bolinhaMainActive {
  height: 1.7rem;
  width: 1.7rem;
  background-color: var(--color-header);
}

#ws-carrinhoNovo .progresso .bolinha {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-header);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  background-color: var(--bg-header);
}

#ws-carrinhoNovo .progresso {
  font-size: 1rem;
}

#ws-carrinhoNovo .seguro {
  font-size: 1.2rem;
  color: var(--color-header);
  font-weight: bold;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 20rem;
}

#ws-carrinhoNovo .seguro svg {
  fill: var(--color-header);
  width: 2.2rem;
  height: 3rem;
}

/* mobile */
#ws-carrinhoNovo .mobile__progresso-barra {
  width: 100%;
  display: none;
  justify-content: center;
  padding: 10rem 2rem 2rem 2rem;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso-barra__barraFundo {
  background-color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso-barra__barraContainer .progresso-barra__conteudo {
  background-color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso-barra .progresso>span {
  color: #222;
}

#ws-carrinhoNovo .mobile__progresso-barra  .progresso .bolinha{
  border: 2px solid #222222;
  background-color: #ffffff;
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso .bolinha.bolinhaActive {
  background-color: #222222;
  border: 2px solid rgba(34, 34, 34);
}

#ws-carrinhoNovo .mobile__progresso-barra .progresso .bolinha.bolinhaActive.bolinhaMainActive {
  background-color: #222;
  border: 2px solid rgba(34, 34, 34);
}

#ws-carrinhoNovo .progresso .bolinha svg {
  stroke: #fff;
}

@media screen and (max-width: 1200px) {
  #ws-carrinhoNovo .progresso-barra .progresso-barra__barraContainer {
    width: calc(100% - 4.8rem);
  }

  #ws-carrinhoNovo .progresso-barra {
    width: 100%;
  }

  #ws-carrinhoNovo .seguro {
    width: 40%;
  }

  #ws-carrinhoNovo header>.progresso-barra {
    display: none;
  }
  
  #ws-carrinhoNovo .mobile__progresso-barra {
    display: flex;
  }

  #ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    height: 0.6rem;
  }
}

@media screen and (max-width: 800px) {
  #ws-carrinhoNovo header {
    position: relative;
  }

  #ws-carrinhoNovo .seguroText {
    max-width: 10rem;
    line-height: 1.4rem;
  }

  #ws-carrinhoNovo .mobile__progresso-barra {
    padding: 0 2rem 2rem;
  }
}

@media screen and (max-width: 530px) {
  #ws-carrinhoNovo header {
    gap: 2rem;
  }

  #ws-carrinhoNovo .seguro {
    width: 100%;
  }

  #ws-carrinhoNovo .progresso .bolinha.bolinhaActive:not(.bolinhaMainActive) svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    height: 0.6rem;
  }
}
 /*END MODULO wsapi3-checkout-header*/

/*START MODULO wsapi3-checkout-cart*/ body {
  transition: opacity .4s ease, font-size 0s;
}

html {
  scroll-padding: 10rem;
}

.base-checkout-data, .base-checkout-data2{
  display: none !important;
}

#ws-carrinhoNovo {
  background-color: #f9f9f9;
  color: #333;
}

#ws-carrinhoNovo p {
  font-size: 1.4rem;
  text-align: initial;
}

#ws-carrinhoNovo main {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 80rem;
}

#ws-carrinhoNovo .checkout-content.startingCart {
  visibility: hidden;
}

#ws-carrinhoNovo .checkout-content>section,
#ws-carrinhoNovo .checkout-content>main>section {
  background-color: #fff;
  padding: 2rem;
  border-radius: 1rem;
}

#ws-carrinhoNovo .recomendacoes h2,
#ws-carrinhoNovo .itensCarrinho h2,
#ws-carrinhoNovo .resumo h2,
#ws-carrinhoNovo .frete h2 {
  font-size: 1.6rem;
  font-weight: 600;
}

#ws-carrinhoNovo .optionsButtonItensCar {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 2rem;
}

#ws-carrinhoNovo .ButtonOptionsCar {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  color: #999999;
  transition: background-color 400ms ease, color 400ms ease;
  border-radius: var(--ws-radius-sm, 10px);
  user-select: none;
  cursor: pointer;
}

#ws-carrinhoNovo .ButtonOptionsCar:hover {
  background-color: #E8E8E8;
  color: #222222;
}

#ws-carrinhoNovo .voltarCompras {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 60vh;
  gap: 1rem;
}

#ws-carrinhoNovo .voltarCompras>p {
  font-size: 2.4rem;
  text-align: center;
}

#ws-carrinhoNovo .voltarCompras>a {
  cursor: pointer;
  background: #444444;
  height: 6rem;
  color: #fff;
  width: fit-content;
  padding: 2rem;
  font-size: 1.8rem;
  display: flex;
  text-decoration: none;
  align-items: center;
  border-radius: var(--ws-radius-sm, 10px);
}

#ws-carrinhoNovo .frete-mensagem {
  width: 100%;
  max-width: 80rem;
}

#ws-carrinhoNovo .frete {
  display: flex;
  gap: 3rem;
  flex-direction: column;
}

#ws-carrinhoNovo .frete .cepInput {
  display: flex;
  gap: 2rem;
  align-items: center;
}

#ws-carrinhoNovo .frete .cepInput>a {
  font-size: 1.4rem;
  color: #999999;
  text-decoration: underline;
  white-space: nowrap;
}

#ws-carrinhoNovo .freteInput {
  display: flex;
  gap: 2rem;
  flex-direction: column;
}

#ws-carrinhoNovo .frete .cepInput__infos {
  border: 1px solid #CCCCCC;
  border-radius: var(--ws-radius-sm, 10px);
  padding: 0 1rem;
  display: flex;
  gap: 1rem;
  width: 33rem;
  height: 5rem;
}

#ws-carrinhoNovo .frete .cepInput__infos>input {
  width: 100%;
}

#ws-carrinhoNovo .errorMsgFrete {
  font-size: 1.4rem;
  color: #A70000;
  background: #a7000038;
  border-radius: 1rem;
  padding: 1rem;
  display: none;
}

#ws-carrinhoNovo .errorMsgCupom.hiddenMessageCupom {
  display: none;
}

#ws-carrinhoNovo .errorMsgCupom {
  font-size: 1.2rem;
  color: #A70000;
}

#ws-carrinhoNovo .frete .cepInput__infos input:focus-visible {
  outline: none;
}

.PageCheckoutCar #ws-carrinhoNovo input:focus {
    border: none !important;
    box-shadow: none;
}

#ws-carrinhoNovo .frete .cepInput__infos button {
  background-color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #222222;
}

#ws-carrinhoNovo .frete .opcoes {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  position: relative;
  cursor: pointer;
  margin-bottom: 0.5rem;
  align-items: center;
}

#ws-carrinhoNovo .frete .opcoes>input {
  position: relative;
  z-index: 1;
  cursor: pointer;
}

#ws-carrinhoNovo .frete .opcoes div .expectativeTempo {
  text-align: right;
}

#ws-carrinhoNovo .frete .opcoes div .expectativeTempo .shipping-priceDiscount {
  text-decoration: line-through;
}

#ws-carrinhoNovo .frete .opcoes>input:checked~div:after {
  display: flex;
}

#ws-carrinhoNovo .frete .opcoes>div:after {
  content: '';
  display: none;
  background-color: #EDEDED;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 1rem;
  cursor: pointer;
}

#ws-carrinhoNovo .frete .opcoes div>span {
  position: relative;
  z-index: 1;
  width: 100%;
  cursor: pointer;
}

#ws-carrinhoNovo .frete .opcoes:hover {
  background-color: #EDEDED;
  border-radius: 1rem;
}

#ws-carrinhoNovo .frete .opcoes div {
  display: flex;
  font-size: 1.4rem;
  justify-content: space-between;
  width: 100%;
}

#ws-carrinhoNovo .frete .cepInput input {
  border: none;
  height: 100%;
}

#ws-carrinhoNovo .frete h2 {
  margin-bottom: 0;
}

#ws-carrinhoNovo .itensCarrinho h2 {
  padding-bottom: 0;
}

#ws-carrinhoNovo .produto {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

#ws-carrinhoNovo .itemCar:first-of-type {
  padding-top: 2rem;
}

#ws-carrinhoNovo .itemCar .produtoImg {
  width: 8rem;
  min-width: 8rem;
  height: 8rem;
  min-height: 8rem;
  border: 1px solid #CCCCCC;
  border-radius: 1rem;
  grid-column: 2;
  display: flex;
  justify-content: center;
  overflow: hidden;
  align-items: center;
}

#ws-carrinhoNovo .itemCar .produtoImg>img {
  height: unset;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

#ws-carrinhoNovo .produto__nome-mobile .produto__sku,
#ws-carrinhoNovo .itemCar .itemCar__especificacoes .produto__sku {
  font-size: 1.2rem;
  color: #999;
}

#ws-carrinhoNovo .itemCar .itemCar__especificacoes {
  grid-column: 3;
}

#ws-carrinhoNovo .itemCar [variation] {
  line-height: 1.2;
}

#ws-carrinhoNovo .itemCar .itemCar__especificacoes>[variation]:empty {
  display: none;
}

/* Item brinde */
#ws-carrinhoNovo .itemCar[storeGift="true"] .valores__brinde {
    font-weight: 600;
}

/* Quantidade travada (brinde) */
#ws-carrinhoNovo .itemCar[storeGift="true"] .quantidadeProdutos__btns--locked input {
    background: #FFF;
    cursor: not-allowed;
}


#ws-carrinhoNovo .produtoInfo p {
  margin-bottom: 0.5rem;
}

#ws-carrinhoNovo .produtoInfo button {
  padding: 0.5rem 1rem;
  background-color: #f60;
  color: #fff;
  border: none;
  border-radius: var(--ws-radius-sm, 10px);
  cursor: pointer;
}

#ws-carrinhoNovo .itensCarrinho {
  width: 100%;
  max-width: 80rem;
}

#ws-carrinhoNovo .itemCar {
  display: grid;
  grid-template-columns: min-content min-content;
  padding: 3rem 0;
  box-sizing: border-box;
  row-gap: 1rem;
  column-gap: 2rem;
}

/* Item sem estoque (cart/view devolve quantity 0) — linha esmaecida, MENOS o
   ícone da lixeira. opacity num ancestral não dá pra "desfazer" num filho, então
   em vez de opacity na .itemCar inteira, esmaecemos "descascando" o caminho até
   a .lixeira: em cada nível, só os irmãos que NÃO levam a ela. Seletores
   mutuamente exclusivos → cada elemento pega opacity uma vez só, sem empilhar. */
#ws-carrinhoNovo .itemCar--oos > :not(.itemCar__especificacoes),
#ws-carrinhoNovo .itemCar--oos .itemCar__especificacoes > :not(.itemCar__infos),
#ws-carrinhoNovo .itemCar--oos .itemCar__infos > :not(.produtoDetalhes),
#ws-carrinhoNovo .itemCar--oos .produtoDetalhes > :not(.quantidadeProduto),
#ws-carrinhoNovo .itemCar--oos .quantidadeProduto > :not(.quantidadeProdutos-container),
#ws-carrinhoNovo .itemCar--oos .quantidadeProdutos-container > :not(.lixeira) {
  opacity: .5;
}

#ws-carrinhoNovo .itemCar .lixeira .iconLixeira {
  position: relative;
  display: flex;
  padding: 1.5rem;
  border-radius: 10rem;
  transition: background-color 400ms ease;
}

#ws-carrinhoNovo .itemCar .lixeira .iconLixeira:hover {
  background-color: #f1f1f1;
}

#ws-carrinhoNovo .itemCar .lixeira .iconLixeira .iconLixeira__over {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

#ws-carrinhoNovo .itemCar .lixeira {
  max-height: 8rem;
  display: flex;
  align-items: center;
}

#ws-carrinhoNovo .itemCar:not(:last-child) {
  border-bottom: 1px solid #EAEAEA;
}

#ws-carrinhoNovo .itemCar:last-child {
  padding-bottom: 0;
}

#ws-carrinhoNovo .itemCar .itemCar__infos {
  display: flex;
  gap: 2rem;
  width: 100%;
  grid-column: 3;
}

#ws-carrinhoNovo .itemCar .produtoPreco {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
}

#ws-carrinhoNovo .itemCar .produtoPreco .produtoPrecos__valores>p {
  white-space: nowrap;
}

#ws-carrinhoNovo .itemCar .produtoPreco .produtoPrecos__valores {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  height: 4rem;
}

#ws-carrinhoNovo .itemCar .produtoPreco .produtoPrecos__valores .valores__preco {
  text-decoration: line-through;
}

#ws-carrinhoNovo .itemCar .produtoPreco .produtoPrecos__valores .valores__desconto {
  font-weight: 600;
}

#ws-carrinhoNovo .quantidadeProduto .valores__desconto__un {
  font-size: 1.2rem;
  color: #999;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  text-align: right;
}
#ws-carrinhoNovo .quantidadeProduto .valores__desconto {
  font-weight: 600;
  grid-column: 2;
  grid-row: 1;
}

#ws-carrinhoNovo .quantidadeProduto .valores__preco {
  text-decoration: line-through;
}

#ws-carrinhoNovo .itemCar .produto__nome {
  line-height: 1.2;
  max-width: 80%;
  display: block;
}

#ws-carrinhoNovo .produtoDetalhes p {
  width: fit-content;
}

#ws-carrinhoNovo .quantidadeProduto {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#ws-carrinhoNovo .quantidadeProduto>div.produtoPrecos__valores {
  gap: 0;
  grid-template-columns: auto auto;
  column-gap: 1rem;
  display: grid;
}

#ws-carrinhoNovo .quantidadeProduto>div {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#ws-carrinhoNovo .produtoDetalhes {
  width: 100%;
}

#ws-carrinhoNovo .quantidadeProduto button {
  padding: 5px 10px;
  background-color: rgb(34, 18, 8);
  color: #fff;
  border: none;
  border-radius: var(--ws-radius-sm, 10px);
  cursor: pointer;
}

#ws-carrinhoNovo .quantidadeProduto .quantidadeProdutos__btns__qnt {
  max-width: 3ch;
  width: 100%;
  padding: 0;
  text-align: center;
  border: none;
  outline: none;
  color: #333;
}

#ws-carrinhoNovo .quantidadeProduto .quantidadeProdutos__btns {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border: 0.1rem solid #CCCCCC;
  border-radius: var(--ws-radius-sm, 10px);
  width: 11rem;
  height: 4rem;
}

#ws-carrinhoNovo .quantidadeProduto .quantidadeProdutos__btns>span {
  font-size: 1.4rem;
  white-space: nowrap;
  user-select: none;
}

#ws-carrinhoNovo .quantidadeProduto .quantidadeProdutos__btns>.quantidadeProdutos__button {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.4rem;
  width: 2ch;
  text-align: center;
}

#ws-carrinhoNovo .presenteOption {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#ws-carrinhoNovo .presenteOption>div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#ws-carrinhoNovo .presenteOption .embrulharPresentes>label>div {
  position: relative;
  display: flex;
}

#ws-carrinhoNovo .presenteOption .embrulharPresentes>label>div svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.4rem;
}

#ws-carrinhoNovo .presenteOption .embrulharPresentes>label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

#ws-carrinhoNovo .presenteOption .embrulharPresentes>label>span {
  user-select: none;
}

#ws-carrinhoNovo .presenteOption .embrulharPresentes>label>input {
  cursor: pointer;
}

#ws-carrinhoNovo .presenteOption .embrulhar {
  border-radius: 0.7rem;
  border: 1px solid #ccc;
  width: 2rem;
  height: 2rem;
  appearance: none;
  outline: none;
  position: relative;
}

#ws-carrinhoNovo .presenteOption .embrulhar:focus {
  border: 1px solid #ccc !important;
}

#ws-carrinhoNovo .presenteOption .embrulhar:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
}

#ws-carrinhoNovo .presenteOption .embrulhar:checked {
  background-color: #222;
  color: white;
}

#ws-carrinhoNovo .presenteOption .embrulhar:checked~svg {
  display: flex;
  height: 0.7rem;
}

body #ws-carrinhoNovo .resumo {
  width: 100%;
  max-width: 40rem;
  height: fit-content;
  position: sticky;
  top: 12rem;
  align-items: initial;
}

#ws-carrinhoNovo .resumo h2 {
  font-size: 1.6rem;
  font-weight: 600;
}

#ws-carrinhoNovo .resumo .totalProdutos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#ws-carrinhoNovo .resumo .totalProdutos .resumoItem__preco,
#ws-carrinhoNovo .resumo .totalProdutos .resumoItem__promo {
  text-align: right;
  width: 100%;
}

#ws-carrinhoNovo .resumo .totalProdutos .resumoItem__preco {
  text-decoration: line-through;
}

#ws-carrinhoNovo .resumo .totalProdutos .resumoItem__promo,
#ws-carrinhoNovo .resumo .resumoItemTotal {
  font-weight: 600;
}

#ws-carrinhoNovo .resumo .resumoItemTotal .totalPedido {
  font-size: 1.8rem;
  font-weight: 600;
}

#ws-carrinhoNovo .resumo .resumoItemTotal p {
  font-size: 1.4rem;
  font-weight: initial;
}

#ws-carrinhoNovo .resumo .taxaEntrega .calcular {
  grid-column: 3;
  grid-row: 1;
  cursor: pointer;
  text-align: right;
  color: #222;
  text-decoration: none;
}

#ws-carrinhoNovo .resumo .taxaEntrega .calcular.uncalculated {
  font-size: 1.4rem;
  user-select: none;
  text-decoration: underline;
  color: #3483fa;
}

#ws-carrinhoNovo .resumo .taxaEntrega .shipping-discount-resume {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  text-decoration: line-through;
  white-space: nowrap;
  width: 100%;
}

#ws-carrinhoNovo .resumo p {
  width: fit-content;
}

#ws-carrinhoNovo .resumo .totalProdutos .resumoItem__promo {
  grid-column: 2;
}

#ws-carrinhoNovo .resumo .inserirCupom {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

#ws-carrinhoNovo .resumo .resume-bottom-border {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #D0D0D0;
}

#ws-carrinhoNovo .resumo .inserirCupom>label {
  font-size: 1.4rem;
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
  color: #3483fa;
  width: fit-content;
}

#ws-carrinhoNovo .resumo .inserirCupom>.inserirCupom-container {
  display: none;
  gap: 1rem;
  width: 100%;
}

#ws-carrinhoNovo .resumo .inserirCupom>.inserirCupom-container>button {
  background-color: transparent;
  border: none;
  font-weight: 600;
  cursor: pointer;
  color: #222222;
}

#ws-carrinhoNovo .resumo .inserirCupom>.inserirCupom-container>input:focus-visible {
  outline: none;
}

#ws-carrinhoNovo .resumo .inserirCupom>.inserirCupom-container>input {
  border: none;
  width: 100%;
  height: 100%;
}

#ws-carrinhoNovo .resumo .inserirCupom>.inserirCupom-container {
  border: 1px solid #CCCCCC;
  border-radius: var(--ws-radius-sm, 10px);
}

#ws-carrinhoNovo .resumo .inserirCupom>input {
  display: none;
}

#ws-carrinhoNovo .resumo .inserirCupom>input:checked~.inserirCupom-container {
  display: flex;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 1px solid #CCCCCC;
  border-radius: var(--ws-radius-sm, 10px);
  padding: 0 1rem;
  gap: 1rem;
  width: 100%;
  height: 5rem;
  margin-top: 0.5rem;
}

#ws-carrinhoNovo .resumo .inserirCupom>input:checked~.errorMsgCupom.hiddingCupomContainer,
#ws-carrinhoNovo .resumo .inserirCupom>input:checked~.inserirCupom-container.hiddingCupomContainer {
  display: none;
}

#ws-carrinhoNovo .carrinhoLoader-container.loaderOff {
  display: none;
}

#ws-carrinhoNovo .carrinhoLoader-container.loaderOn {
  display: flex;
  align-items: center;
}

#ws-carrinhoNovo .new-loader {
  border: 3px solid rgba(0, 0, 0, 0.1);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border-left-color: #fff;
  animation: spin 1s linear infinite;
}

#ws-carrinhoNovo .buttonFinalizar .carrinhoLoader-container {
  height: 100%;
  width: 100%;
}

#ws-carrinhoNovo .carrinhoLoader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#ws-carrinhoNovo .resumoItem,
#ws-carrinhoNovo .resumoItemTotal {
  display: flex;
  justify-content: space-between;
}

#ws-carrinhoNovo .resumoItem.descontoem1x,
#ws-carrinhoNovo .resumoItem.parcelas,
#ws-carrinhoNovo .resumoItem.pixBoleto {
  justify-content: flex-end;
}

#ws-carrinhoNovo .resumoItem.taxaEntrega {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 0.4rem;
  align-items: baseline;
}

#ws-carrinhoNovo .buttonFinalizar:hover {
  opacity: 80%;
}

#ws-carrinhoNovo .buttonFinalizar.finishNotReady {
  opacity: 1 !important;
  cursor: initial;
}

#ws-carrinhoNovo .buttonFinalizar.finishNotReady:hover {
  opacity: 1 !important;
}

#ws-carrinhoNovo .buttonFinalizar {
  border-radius: var(--ws-radius-sm, 10px);
  width: 100%;
  padding: 10px;
  background: #099504;
  height: 5rem;
  color: #fff;
  border: none;
  font-size: 1.4rem;
  transition: opacity 300ms ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  letter-spacing: 0.2rem;
  margin-top: 2rem;
}

#ws-carrinhoNovo .buttonFinalizar.finishing {
  cursor: default !important;
  opacity: 0.5;
}

#ws-carrinhoNovo .buttonFinalizar.finishing::after {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0E7E0A;
  border-radius: var(--ws-radius-sm, 10px);
  top: 0;
  left: 0;
  animation: finishing 5s ease;
  cursor: initial;
}

#ws-carrinhoNovo .ws-cart-debug-code {
    display: block;
    width: 100%;
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.4;
    opacity: .75;
    text-align: center;
    word-break: break-word;
}

@keyframes finishing {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

#ws-carrinhoNovo .discount {
  background-color: #222222;
  padding: 0.5rem 0.7rem;
  color: #fff;
  border-radius: 0.5rem;
  font-size: 1.2rem;
}

#ws-carrinhoNovo .frete {
  width: 100%;
  max-width: 80rem;
}

#ws-carrinhoNovo .frete > .freteOpcoes:empty {
  display: none;
}

#ws-carrinhoNovo #frete-section {
  scroll-padding-top: 2rem;
}

#ws-carrinhoNovo .checkout-content {
  display: flex;
  padding: 2rem;
  padding-bottom: 5rem;
  padding-top: 14rem;
  gap: 2rem;
  justify-content: center;
}

#ws-carrinhoNovo .removerConfirmacao {
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  padding: 0 2rem;
}

#ws-carrinhoNovo #msg-to-user[data-message-type="share"] .removerConfirmacao__popup{
  max-width: 41.5rem;
}
#ws-carrinhoNovo #msg-to-user[data-message-type="share"] .removerConfirmacao__popup__subTitle {
  flex-direction: column;
  gap: 2rem;
}

#ws-carrinhoNovo #msg-to-user[data-message-type="share"] .removerConfirmacao__popup__subTitle>.shareButtons {
  flex-direction: column;
}

#ws-carrinhoNovo #msg-to-user[data-message-type="share"] .removerConfirmacao__popup__subTitle>.shareButtons {
  width: 100%;
  gap: 1rem;
}

#ws-carrinhoNovo #msg-to-user[data-message-type="share"] .removerConfirmacao__popup__subTitle>input {
  color: #A6A6A6;
}

#ws-carrinhoNovo #msg-to-user[data-message-type="share"] .removerConfirmacao__popup>p .copy-icon {
  width: 100%;
  background-color: #F2F2F2;
  border-radius: 10rem;
  align-items: center;
  display: flex;
  padding: 1rem 2rem;
  gap: 1rem;
}

#ws-carrinhoNovo #msg-to-user[data-message-type="share"] .removerConfirmacao__popup>p .copy-icon .svg-container {
  display: flex;
}

#ws-carrinhoNovo #msg-to-user[data-message-type="ws-core-msg"] .removerConfirmacao__popup__subTitle {
  display: block;
}

#ws-carrinhoNovo .popupHidden {
  display: none !important;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup>.removerConfirmacao__popup__title {
  font-weight: 600;
  font-size: 1.6rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup>p {
  font-size: 1.4rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup__subTitle>span {
  word-break: break-all;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup__subTitle {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup__subTitle > a {
  text-decoration: underline;
  font-weight: 600;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup__subTitle>input {
  width: 100%;
  border: 0.1rem solid #CCCCCC;
  border-radius: var(--ws-radius-sm, 10px);
  padding: .5rem 1rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup>p .copy-icon {
  display: flex;
  position: relative;
  width: fit-content;
  height: fit-content;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup>p .copy-icon .copy-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup>p .copy-icon svg {
  height: 2rem;
  width: 2rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup__subTitle>.shareButtons {
  display: flex;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup {
  background-color: #fff;
  border-radius: 1rem;
  position: relative;
  box-sizing: border-box;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 40rem;
  gap: 2rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup .removerConfirmacao__popup__fechar>svg {
  height: 1rem;
  width: 1rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup .removerConfirmacao__popup__fechar {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 2rem;
  right: 2rem;
  height: 2.5rem;
  aspect-ratio: 1;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  border-radius: 100%;
  font-size: 1.4rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup .removerConfirmacao__popup__btns {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup .removerConfirmacao__popup__btns>button {
  border-radius: 5rem;
  border: none;
  height: 3rem;
  font-weight: 600;
  background-color: #F5F5F5;
  cursor: pointer;
}

#ws-carrinhoNovo .removerConfirmacao .removerConfirmacao__popup .removerConfirmacao__popup__btns .removerConfirmacao__btn__remover {
  background-color: #FD384F;
  color: #fff;
}

#ws-carrinhoNovo .resumo .inserirCupom>input:checked~label {
  display: none
}

#ws-carrinhoNovo #progressCanvas {
  width: 5.5rem;
}

#ws-carrinhoNovo .finalizacaoPedido {
  padding: 15rem 0 5rem 0;
}

#ws-carrinhoNovo .frtalert-quadro {
  padding: 0;
  margin: 0;
  border: 0;
  justify-content: center;
  height: fit-content;
}

#ws-carrinhoNovo .frtalert-texto {
  font-size: 1.6rem;
}

#ws-carrinhoNovo [ws-cart-app] .frtalert-texto {
  font-family: var(--bodyFont), Arial, sans-serif !important;
}

#ws-carrinhoNovo [ws-cart-app="freteGratis"] .frtalert-texto{
  font-size: 1.4rem;
  color: #333;
}

#ws-carrinhoNovo [ws-cart-app="freteGratis"]:not(:has(.frtalert-texto)),
#ws-carrinhoNovo [ws-cart-app="app-suggestion"]:not(:has(.slide-container)) {
  display: none;
}

#ws-carrinhoNovo .itemCar .itemCar__especificacoes .itemCar__infos .qtd__mobile {
  display: none;
}

/* cashback */
[ws-cart-app="ws-cashback"] {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 0;
}

[ws-cart-app="ws-cashback"] .cashback-app__icon {
  display: flex;
}

[ws-cart-app="ws-cashback"] .cashback-app__icon svg {
  width: 2.5rem;
  height: 2.5rem;
}
[ws-cart-app="ws-cashback"] .cashback-app__infos__msg > span {
  font-weight: 600;
}

#ws-carrinhoNovo .produtoDetalhes .cashBack__msg {
  color: #0D7D0A;
  margin-top: 1rem;
}
#ws-carrinhoNovo .produtoDetalhes .cashBack__msg > span {
  font-weight: 600;
}


#ws-carrinhoNovo .resumo .usar-cashback > span .cashback-btn,
#ws-carrinhoNovo .resumo .usar-cashback > span > a {
  text-decoration: underline;
  cursor: pointer;
}
/* MobileCss */
#ws-carrinhoNovo .produto__nome-mobile {
  display: none;
  flex-direction: column;
}

#ws-carrinhoNovo .float-resume .float-resume__infos__frete__preco {
  text-align: right;
  text-decoration: none;
  color: #222;
}

#ws-carrinhoNovo.noShipping .float-resume .float-resume__infos .float-resume__infos__frete {
  display: none;
}

#ws-carrinhoNovo .float-resume .float-resume__infos__frete__preco.uncalculated {
  cursor: pointer;
  font-size: 1.4rem;
  user-select: none;
  text-decoration: underline;
  color: #3483fa;
}

#ws-carrinhoNovo .float-resume .float-resume-prices {
  margin-bottom: 2rem;
}

#ws-carrinhoNovo .float-resume .float-resume__infos {
  width: 100%;
}

#ws-carrinhoNovo .float-resume .float-resume__infos>div p {
  width: fit-content;
}

#ws-carrinhoNovo .float-resume .float-resume-prices .float-resume-price__total p {
  font-weight: 600;
}

#ws-carrinhoNovo .float-resume .float-resume__infos>div,
#ws-carrinhoNovo .float-resume .float-resume-prices .float-resume-price__total {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#ws-carrinhoNovo .float-resume .float-resume__infos>div p:last-child,
#ws-carrinhoNovo .float-resume .float-resume-prices .float-resume-price__total p:last-child {
  text-align: right;
}

#ws-carrinhoNovo .float-resume {
  display: none;
  background-color: #fff;
  padding: 2rem;
  position: sticky;
  flex-direction: column;
  bottom: 0;
  height: fit-content;
  width: 100%;
  box-shadow: 0px 0px 10px #00000029;
  z-index: 10;
}

#ws-carrinhoNovo .float-resume[float-resume="active"] {
  display: flex;
  animation: float-resume-on 200ms ease;
}

#ws-carrinhoNovo .float-resume[float-resume="off"] {
  display: none;
}

@keyframes float-resume-on {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 1200px) {
  #ws-carrinhoNovo .checkout-content {
    padding-top: 2rem;
  }
}

@media screen and (max-width: 800px) {
  #ws-carrinhoNovo .float-resume {
    display: flex;
  }

  #ws-carrinhoNovo .finalizacaoPedido {
    padding: 5rem 0;
  }

  #ws-carrinhoNovo .itemCar .produto__nome {
    max-width: 100%;
  }

  #ws-carrinhoNovo .itemCar {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
  }

  #ws-carrinhoNovo .itemCar .produtoImg {
    grid-column: 1;
  }

  #ws-carrinhoNovo .produto__nome-mobile {
    display: flex;
  }

  #ws-carrinhoNovo .itemCar .lixeira .iconLixeira {
    padding: 0;
  }

  #ws-carrinhoNovo .itemCar .lixeira .iconLixeira:hover {
    background-color: transparent;
  }

  #ws-carrinhoNovo .frete .cepInput__infos {
    min-width: 100%;
  }

  #ws-carrinhoNovo .frete .cepInput {
    flex-wrap: wrap;
    gap: 1rem;
  }

  #ws-carrinhoNovo .resumo {
    position: initial;
    max-width: initial;
  }

  #ws-carrinhoNovo .checkout-content {
    flex-direction: column;
  }

  #ws-carrinhoNovo .quantidadeProduto .produtoPrecos__valores {
    flex-direction: column;
    gap: 0;
    line-height: 1.4rem;
  }

  #ws-carrinhoNovo .quantidadeProduto {
    justify-content: space-between;
  }

  #ws-carrinhoNovo .quantidadeProduto>div .lixeira,
  #ws-carrinhoNovo .itemCar .itemCar__especificacoes .itemCar__infos .qtd__mobile {
    display: flex;
  }

  #ws-carrinhoNovo .itemCar>.lixeira,
  #ws-carrinhoNovo .quantidadeProduto>div.quantidadeProdutos-container>.qtd__desktop,
  #ws-carrinhoNovo .itemCar .itemCar__especificacoes .produto__nome,
  #ws-carrinhoNovo .itemCar .itemCar__especificacoes [variation],
  #ws-carrinhoNovo .itemCar .itemCar__especificacoes .produto__sku {
    display: none;
  }

  #ws-carrinhoNovo .itemCar .itemCar__especificacoes {
    grid-column: 1 / 3;
  }
}

@media screen and (max-width: 530px) {
    #ws-carrinhoNovo .itemCar .produtoPreco {
        grid-column: 2;
    }

    #ws-carrinhoNovo .frete .opcoes div > span {
        width: fit-content;
    }

    #ws-carrinhoNovo .frete .opcoes div .expectativeTempo {
        width: 100%;
    }

    #ws-carrinhoNovo .optionsButtonItensCar {
        display: block;
    }

    #ws-carrinhoNovo .ButtonOptionsCar {
        display: block;
    }
}




/*
===========================================
===========================================

MODULE: GIFT SLIDER (20/01/2026)
Exibe os brindes disponíveis em um slider no checkout

===========================================
===========================================
*/


:root {
    --gift-app-color: #222222;
}

/* base */
[cart-gift-slider] {
    padding: 2rem 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

    [cart-gift-slider]:empty {
        display: none;
    }

    [cart-gift-slider] .container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    [cart-gift-slider] .gift__title {
        display: flex;
        width: 100%;
        justify-content: flex-start;
    }

        [cart-gift-slider] .gift__title h2 {
            color: var(--gift-app-color);
            font-size: 1.6rem;
            font-weight: 600;
        }

    [cart-gift-slider] .gift__sliderProds {
        position: relative;
        display: grid;
        transition: 300ms;
    }

    /* setas */
    [cart-gift-slider] .arrow--next span[data-wsjs-icon] svg[ico=Arrow],
    [cart-gift-slider] .arrow--prev span[data-wsjs-icon] svg[ico=Arrow] {
        transform: initial;
    }

    [cart-gift-slider] .arrow {
        position: absolute;
        top: 50%;
        bottom: auto;
        border-radius: 100%;
        background-color: #ffffff;
        height: 4rem;
        width: 4rem;
        box-shadow: 5px 0px 10px #0000000d;
        align-self: center;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

body [cart-gift-slider] .arrow span[data-wsjs-icon] svg {
    fill: var(--gift-app-color) !important;
    width: 1.1rem;
    height: 1.1rem;
}

body [cart-gift-slider] .arrow:hover {
    background-color: var(--gift-app-color) !important;
}

    body [cart-gift-slider] .arrow:hover span[data-wsjs-icon] svg {
        fill: #fff !important;
    }

[cart-gift-slider] .arrow--prev {
    left: 0;
    right: auto;
    transform: translateY(-50%) rotate(180deg);
    grid-column: 1;
}

[cart-gift-slider] .arrow--next {
    left: auto;
    right: 0;
    transform: translateY(-50%);
    grid-column: 3;
}

/* cards */
[cart-gift-slider] .gift-prod {
    display: flex;
    gap: 1rem;
}

[cart-gift-slider] .gift__image-container {
    width: 8rem;
    max-width: 8rem;
    min-width: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

[cart-gift-slider] .gift__image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid #cccccc;
    border-radius: 1rem;
    position: relative;
    background: #fff;
}

    [cart-gift-slider] .gift__image-link img {
        height: unset;
        width: auto;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
    }

[cart-gift-slider] .gift__infos-container {
    width: 100%;
}

[cart-gift-slider] .gift__name {
    color: var(--gift-app-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.4;
    font-size: 1.2rem;
    overflow: hidden;
    word-break: break-word;
    margin: 0;
    padding: 0;
}

[cart-gift-slider] .gift__meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

[cart-gift-slider] .gift__status {
    font-size: 1.2rem;
    font-weight: 600;
}

[cart-gift-slider] .gift__status--ok {
    color: #1a7f37;
}

[cart-gift-slider] .gift__status--wait {
    color: #b35c00;
}

[cart-gift-slider] .gift__missing {
    font-size: 1.2rem;
    color: var(--gift-app-color);
}

[cart-gift-slider] .gift__details {
    font-size: 1.1rem;
    color: #666;
}

/* gradientes nas laterais */
[cart-gift-slider] .arrow--prev + .keen-slider:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -3rem;
    pointer-events: none;
    background-image: linear-gradient( to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50% );
    width: 6rem;
    height: 100%;
}

[cart-gift-slider] .arrow--prev + .keen-slider:after {
    content: "";
    position: absolute;
    z-index: 1;
    right: -3rem;
    pointer-events: none;
    background-image: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50% );
    width: 6rem;
    height: 100%;
}

[cart-gift-slider] .arrow--prev + .keen-slider .keen-slider__slide:last-child {
    padding-right: 3rem;
}

[cart-gift-slider] .arrow--prev + .keen-slider .keen-slider__slide:first-child {
    margin-left: 2rem;
}

/* drawer */
[cart-gift-slider="cartDrawer"] {
    padding: 2rem;
    padding-top: 0;
    box-sizing: border-box;
}

[cart-gift-slider="cartDrawerMobile"],
[cart-gift-slider="checkoutMobile"] {
    padding: 2rem 0;
}

/* No drawer os brindes ficam em lista (um abaixo do outro), não em slider —
   o JS (create(), wsapi3-checkout-cart.js) já não chama createSlide() pra
   esses dois âncoras, então aqui só garante o empilhamento visual. */
[cart-gift-slider="cartDrawer"] .gift__sliderProds,
[cart-gift-slider="cartDrawerMobile"] .gift__sliderProds {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

[cart-gift-slider="cartDrawer"] .gift-prod,
[cart-gift-slider="cartDrawerMobile"] .gift-prod {
    width: 100%;
}

/* Botão de ação do brinde */
[cart-gift-slider] .gift-prod .gift__infos-container .chosegift_btn {
    text-decoration: underline;
    color: #222;
    width: 100%;
    display: block;
    font-size: 1.2rem;
}

    /* Estado escolhido (sem clique) */
    [cart-gift-slider] .gift-prod .gift__infos-container .chosegift_btn.is-chosen {
        cursor: default;
        text-decoration: none;
        opacity: 0.7;
    }


@media screen and (max-width: 800px) {
    [cart-gift-slider="checkoutMobile"],
    [cart-gift-slider="cartDrawerMobile"] {
        padding: 2rem 0;
        overflow: hidden;
    }

        [cart-gift-slider="checkoutMobile"] .container,
        [cart-gift-slider="cartDrawerMobile"] .container {
            width: 100%;
            padding: 0px !important;
        }

        [cart-gift-slider="checkoutMobile"] .gift__sliderProds,
        [cart-gift-slider="cartDrawerMobile"] .gift__sliderProds {
            overflow: hidden;
        }

        [cart-gift-slider="checkoutMobile"] .arrow,
        [cart-gift-slider="cartDrawerMobile"] .arrow {
            display: none !important;
        }

        [cart-gift-slider="checkoutMobile"] .keen-slider::before,
        [cart-gift-slider="checkoutMobile"] .keen-slider::after,
        [cart-gift-slider="cartDrawerMobile"] .keen-slider::before,
        [cart-gift-slider="cartDrawerMobile"] .keen-slider::after {
            display: none !important;
            content: none !important;
        }

        [cart-gift-slider="checkoutMobile"] .keen-slider__slide,
        [cart-gift-slider="cartDrawerMobile"] .keen-slider__slide {
            min-width: unset !important;
            max-width: unset !important;
        }

        [cart-gift-slider="checkoutMobile"] .gift-prod,
        [cart-gift-slider="cartDrawerMobile"] .gift-prod {
            align-items: flex-start;
        }

        [cart-gift-slider="checkoutMobile"] .gift__image-container,
        [cart-gift-slider="cartDrawerMobile"] .gift__image-container {
            width: 7rem;
            min-width: 7rem;
            max-width: 7rem;
        }

        [cart-gift-slider="checkoutMobile"] .keen-slider {
            display: table;
            clear: both;
            width: 100%;
        }

            [cart-gift-slider="checkoutMobile"] .keen-slider .keen-slider__slide {
                display: table;
                clear: both;
                width: 100%;
                transform: none !important;
                margin-bottom:2rem;
            }
}


/*
===========================================
===========================================

MODULE: CHECKOUT SUGGESTION SLIDER (07/08/26)
Reimplementação local do "Aproveite e leve também" (recomendados) na página
/carrinho — mesmo esquema visual do gift-slider (setas + 2,5 itens vis&iacute;veis).

===========================================
===========================================
*/

:root {
    --suggestion-app-color: #222222;
}

[ws-suggestion-slider] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

    [ws-suggestion-slider]:empty {
        display: none;
    }

    [ws-suggestion-slider] .container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    [ws-suggestion-slider] .suggestion__title {
        display: flex;
        width: 100%;
        justify-content: flex-start;
    }

        [ws-suggestion-slider] .suggestion__title h2 {
            color: var(--suggestion-app-color);
            font-size: 1.6rem;
            font-weight: 600;
        }

    [ws-suggestion-slider] .suggestion__sliderProds {
        display: grid;
        transition: 300ms;
    }

    /* setas */
    [ws-suggestion-slider] .arrow--next span[data-wsjs-icon] svg[ico=Arrow],
    [ws-suggestion-slider] .arrow--prev span[data-wsjs-icon] svg[ico=Arrow] {
        transform: initial;
    }

    [ws-suggestion-slider] .arrow {
        border-radius: 100%;
        background-color: #ffffff;
        height: 4rem;
        width: 4rem;
        box-shadow: 5px 0px 10px #0000000d;
        align-self: center;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

body [ws-suggestion-slider] .arrow span[data-wsjs-icon] svg {
    fill: var(--suggestion-app-color) !important;
    width: 1.1rem;
    height: 1.1rem;
}

body [ws-suggestion-slider] .arrow:hover {
    background-color: var(--suggestion-app-color) !important;
}

    body [ws-suggestion-slider] .arrow:hover span[data-wsjs-icon] svg {
        fill: #fff !important;
    }

[ws-suggestion-slider] .arrow--prev {
    transform: rotate(180deg);
    grid-column: 1;
}

[ws-suggestion-slider] .arrow--next {
    grid-column: 3;
}

/* cards */
[ws-suggestion-slider] .suggestion-prod {
    display: flex;
    gap: 1rem;
}

[ws-suggestion-slider] .suggestion__image-container {
    width: 8rem;
    max-width: 8rem;
    min-width: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

[ws-suggestion-slider] .suggestion__image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid #cccccc;
    border-radius: 1rem;
    position: relative;
    background: #fff;
}

    [ws-suggestion-slider] .suggestion__image-link img {
        height: unset;
        width: auto;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
    }

[ws-suggestion-slider] .suggestion__infos-container {
    width: 100%;
}

[ws-suggestion-slider] .infos-container__name {
    color: var(--suggestion-app-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.4;
    font-size: 1.2rem;
    overflow: hidden;
    word-break: break-word;
    margin: 0 0 0.4rem;
    padding: 0;
}

[ws-suggestion-slider] .infos-container__price {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--suggestion-app-color);
    margin: 0 0 0.6rem;
}

[ws-suggestion-slider] .suggestion__btn {
    text-decoration: underline;
    color: #222;
    width: 100%;
    display: block;
    font-size: 1.2rem;
    cursor: pointer;
}

/* gradientes nas laterais */
[ws-suggestion-slider] .arrow--prev + .keen-slider:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -3rem;
    pointer-events: none;
    background-image: linear-gradient( to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50% );
    width: 6rem;
    height: 100%;
}

[ws-suggestion-slider] .arrow--prev + .keen-slider:after {
    content: "";
    position: absolute;
    z-index: 1;
    right: -3rem;
    pointer-events: none;
    background-image: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50% );
    width: 6rem;
    height: 100%;
}

[ws-suggestion-slider] .arrow--prev + .keen-slider .keen-slider__slide:last-child {
    padding-right: 3rem;
}

[ws-suggestion-slider] .arrow--prev + .keen-slider .keen-slider__slide:first-child {
    margin-left: 2rem;
}

@media screen and (max-width: 800px) {
    [ws-suggestion-slider="checkoutMobile"] {
        overflow: hidden;
    }

        [ws-suggestion-slider="checkoutMobile"] .container {
            width: 100%;
            padding: 0px !important;
        }

        [ws-suggestion-slider="checkoutMobile"] .suggestion__sliderProds {
            overflow: hidden;
        }

        [ws-suggestion-slider="checkoutMobile"] .arrow {
            display: none !important;
        }

        [ws-suggestion-slider="checkoutMobile"] .keen-slider::before,
        [ws-suggestion-slider="checkoutMobile"] .keen-slider::after {
            display: none !important;
            content: none !important;
        }

        [ws-suggestion-slider="checkoutMobile"] .keen-slider__slide {
            min-width: unset !important;
            max-width: unset !important;
        }
}
 /*END MODULO wsapi3-checkout-cart*/

/*START MODULO wsapi3-checkout-payment-page*/ /* ============================================================
   wsapi3-checkout-payment-page — Fase 2
   Escopo: #ws-checkout-init
   Reestilizado no formato do checkout de exemplo: tela de
   identificação + acordeão de 4 steps.

   Design system: tudo que é genérico (botões, links, campos,
   mensagens, tipografia) vem de wsapi3-checkout-base — aqui só
   fica o que é específico desta etapa (disposição do acordeão,
   grade de destinatário, cartões de frete/pagamento, sidebar,
   modal de captcha). Escala de fonte: só 3 tamanhos existem —
   --wscb-text-title (16px), --wscb-text-default (14px, herdado
   da raiz abaixo) e --wscb-text-small (12px, via .wscb-text-sm).
============================================================ */

#ws-checkout-init {
    margin: 0 auto;
    /* #ws-carrinhoNovo header é position:fixed (altura 10rem) até 800px de
       largura — abaixo disso vira position:relative (wsapi3-checkout-header.css).
       Esse respiro evita que o conteúdo comece por baixo do header no desktop. */
    margin-top: 11rem;
    font-family: var(--wscb-font, "Roboto", Arial, sans-serif);
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink, #555);
    /* Todas as telas internas (#ws-checkout-init-screen-guest e a etapa
       logada) começam com style="display:none" no HTML — até o JS decidir
       qual mostrar, este wrapper fica sem nenhum filho visível e mede 0 de
       altura, colando o header no footer. min-height aqui (mesmo valor já
       usado pela tela de identificação) segura o espaço durante essa janela,
       igual um "holder" de carregamento. */
    min-height: 55vh;
}

/* 1200px, não 800px: é nesse breakpoint (ver wsapi3-checkout-header.css) que
   header>.progresso-barra some e .mobile__progresso-barra entra no fluxo
   normal — essa segunda barra já nasce com seu próprio padding-top:10rem
   pra abrir espaço sob o header (que continua position:fixed até 800px, só
   perde o :fixed nesse breakpoint menor). Zerar o margin-top daqui só a
   partir de 800px deixava as duas compensações somadas entre 800px e
   1200px — um vão vazio acima do acordeão que não vinha de nenhum
   conteúdo, só de medir a mesma altura do header duas vezes. */
@media (max-width: 1200px) {
    #ws-checkout-init { margin-top: 0; }
}

/* WsCheckoutBase.openStep() faz scrollIntoView({block:'start'}) ao avançar de
   etapa — sem isso o passo fica colado embaixo do header fixo (10rem no
   desktop), já que o "start" do scroll não sabe da sobreposição. */
.wscb-step,
#ws-checkout-init-payment-methods {
    scroll-margin-top: 12rem;
}
@media (max-width: 800px) {
    .wscb-step,
    #ws-checkout-init-payment-methods { scroll-margin-top: 1.6rem; }
}

/* Overlay de recarregamento: removido daqui — agora usa o overlay padrão do
   site (wsMain.tools.showLoading()/hideLoading(), ver wsapi3-main.css), o
   mesmo de produto/área do cliente/carrinho, em vez de um próprio. */

/* ============================================================
   TELA DE IDENTIFICAÇÃO
============================================================ */
#ws-checkout-init-screen-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 4rem 0;
    text-align: center;
}

.ws-checkout-init-identify-box {
    width: min(100%, 56rem);
    margin: 0 auto;
}

.ws-checkout-init-identify-title { margin: 0 0 .3rem; color: #222; }
.ws-checkout-init-identify-subtitle { margin: 0 0 2.4rem; }

.ws-checkout-init-identify-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.2rem;
}

.ws-checkout-init-identify-row .wscb-btn { min-width: 14rem; }

.ws-checkout-init-identify-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    color: var(--wscb-ink, #555);
}

#ws-checkout-init-guest-password-field {
    margin-top: 1.6rem;
    text-align: left;
}

.ws-checkout-init-identify-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.2rem 0;
}

.ws-checkout-init-identify-or::before,
.ws-checkout-init-identify-or::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #ccc;
}

.ws-checkout-init-identify-social {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* Botão com borda + ícone da rede + texto — a cor da marca vive só no ícone
   (SVG inline), não mais no fundo do botão inteiro. */
.ws-checkout-init-social-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 3.8rem;
    padding: 0 1.4rem;
    border: 1px solid var(--wscb-line);
    border-radius: var(--wscb-radius-sm);
    background: #fff;
    font-family: var(--wscb-font);
    font-size: var(--wscb-text-default);
    font-weight: 500;
    color: #222;
    cursor: pointer;
    transition: background .15s;
}
.ws-checkout-init-social-btn:hover { background: #f7f7f7; }
.ws-checkout-init-social-btn svg { flex-shrink: 0; }

.ws-checkout-init-identify-back { display: inline-block; margin-top: 2.4rem; }

/* ============================================================
   ACORDEÃO — usa .wscb-step / .wscb-step-header / .wscb-step-body
   e os campos/botões/mensagens de wsapi3-checkout-base; aqui só
   o que é específico desta etapa.
============================================================ */
.ws-checkout-init-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36rem;
    gap: 1.5rem;
    align-items: start;
    padding: 2rem 0 5rem;
}

.ws-checkout-init-main {
    display: grid;
    gap: 1.5rem;
}

/* Bloqueio progressivo — etapa ainda não alcançada (ver advanceToStep no JS).
   O header continua clicável (o clique só mostra um aviso, não abre nada),
   por isso não usa pointer-events:none nem cursor diferente — o feedback é
   só visual (opacidade) + o lápis de edição some, já que não há nada editável
   ainda numa etapa que o cliente nem chegou a preencher. */
.wscb-step--locked { opacity: .8; }
.wscb-step--locked .wscb-step-edit-icon { display: none; }

/* "Check" de etapa concluída (ver wscb-step--done em refreshStepLocks) — fica
   à esquerda do lápis. A base coloca o lápis na col 3 do grid do header; aqui
   o header ganha uma 4ª coluna e o lápis vai pra col 4, o check pra col 3. */
.ws-checkout-init-main .wscb-step-header { grid-template-columns: 18px 1fr auto auto; }
.ws-checkout-init-main .wscb-step-edit-icon { grid-column: 4; }
.wscb-step-check {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    display: none;
}
.wscb-step--done .wscb-step-check { display: grid; place-items: center; }
/* Vence os globais span[data-wsjs-icon] { 1.5rem } e span[data-wsjs-icon] svg
   { 1.5rem } (mais específico) — 2rem, um pouco maior que o lápis. A cor fica
   a padrão dos ícones (herda o var(--bodyColor) do global), sem tom próprio. */
.ws-checkout-init-main .wscb-step-check { width: 2rem; height: 2rem; }
.ws-checkout-init-main .wscb-step-check svg { width: 2rem; height: 2rem; }

/* Mensagem de erro abaixo de cada campo das "Informações pessoais" (ver
   setFieldError no JS). Sem o min-height/margin padrão de .wscb-msg — o
   gap:.4rem do .wscb-field já dá o respiro certo. */
.ws-checkout-init-field-error { margin: 0; min-height: 0; }

/* Recorte específico da grade de endereço (7/3 colunas para rua/número) —
   os demais campos usam .wscb-field simples dentro do .wscb-form-grid 2x2. */
.ws-checkout-init-field--addr { grid-column: span 1; }
.ws-checkout-init-field--num  { grid-column: span 1; }

/* ---- Lista de endereços salvos ----
   Cartão (borda/hover/selecionado), rádio e título em negrito vêm de
   .wscb-option/.wscb-option--selected/.wscb-option__title (base) — aqui só o
   que é específico: a grade não tem coluna extra (2rem 1fr, igual ao padrão
   da base, então nem precisa sobrepor) e o detalhe fica em duas linhas
   abaixo do título em vez de numa coluna à parte. */
.ws-checkout-init-address-options { margin-bottom: 1.2rem; }
#ws-checkout-init-addr-cards .wscb-option__title { display: block; margin-bottom: .2rem; }
.ws-checkout-init-address-option__lines { line-height: 1.5; }

#ws-checkout-init-addr-back-to-list { display: inline-block; margin-bottom: 1.2rem; }

/* Step 1 em modo leitura (cliente já identificado/logado) */
.ws-checkout-init-p-view-val { font-weight: 500; color: var(--wscb-ink-strong, #414141); }

.ws-checkout-init-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.6rem 0;
    cursor: pointer;
    /* Texto padrão: fonte do site (não a Roboto do checkout), 14px, #222. */
    font-family: var(--bodyFont), Arial, sans-serif;
    font-size: var(--wscb-text-default);
    color: #222;
}

/* Halo circular cinza do hover — vive no ::before do label, atrás do
   checkbox: o <input> tem background branco opaco e é pintado depois (ordem
   de árvore), então o quadradinho branco fica por cima do círculo. Sem
   z-index negativo (não confiável dependendo do contexto de empilhamento). */
.ws-checkout-init-check::before {
    content: "";
    position: absolute;
    left: .9rem;
    top: 50%;
    width: 3.4rem;
    height: 3.4rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, .07);
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}
.ws-checkout-init-check:hover::before,
.ws-checkout-init-check:focus-within::before {
    opacity: 1;
}

/* Checkbox custom (appearance:none): quadrado arredondado com borda cinza
   quando vazio, azul preenchido com "check" branco quando marcado. */
.ws-checkout-init-check input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    border: 1.5px solid var(--wscb-line, #ddd);
    border-radius: .4rem;
    background: #fff;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.ws-checkout-init-check input:checked {
    background: var(--wscb-link, #0789f7);
    border-color: var(--wscb-link, #0789f7);
}

/* "Check" branco (traço em L girado) */
.ws-checkout-init-check input:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    width: .38rem;
    height: .78rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ---- Formas de envio ----
   Cartão/rádio/título vêm de .wscb-option* (base) — só a coluna extra de
   prazo/preço é específica daqui. */
.ws-checkout-init-shipping-option { grid-template-columns: 2rem 1fr auto; }
.ws-checkout-init-shipping-option__info {
    text-align: right;
    white-space: nowrap;
    font-size: var(--wscb-text-small);
}
/* Com muitas transportadoras a lista de frete empurra o botão "Continuar
   para pagamento" pra muito longe (e o step inteiro fica gigante). Limitando
   a altura a 4 opções (.wscb-option usa min-height:6.4rem + a lista usa
   gap:.8rem, ver .wscb-option-list em wsapi3-checkout-base.css) e deixando
   rolar as demais dentro do próprio bloco — o botão, que é irmão da lista
   (não filho), fica fora do scroll naturalmente. Com 4 opções ou menos o
   conteúdo já cabe dentro do max-height, então não aparece scroll nenhum. */
.ws-checkout-init-shipping-options {
    max-height: calc(4 * 6.4rem + 3 * .8rem);
    overflow-y: auto;
}

/* ---- Formas de pagamento ----
   Idem — só a coluna do ícone e a etiqueta de desconto são específicas. */
.ws-checkout-init-payment-method { grid-template-columns: 2rem 3.6rem 1fr auto; min-height: 7.3rem; }

.ws-checkout-init-payment-method__icon {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: #f7f7f7;
    color: var(--wscb-ink-strong, #414141);
}
/* O PIX agora vem do wsapi3-icons (data-wsjs-icon); o global
   span[data-wsjs-icon] svg força 1.5rem — aqui volta pro tamanho/cor dos
   outros ícones inline desta lista (2rem, herdando a cor do círculo). */
.ws-checkout-init-payment-method__icon span[data-wsjs-icon] {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
}
.ws-checkout-init-payment-method__icon span[data-wsjs-icon] svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

.ws-checkout-init-payment-method__discount {
    color: #27ae60;
    font-weight: 400;
    font-size: var(--wscb-text-small);
}

/* Campos de cartão — vive dentro de #ws-checkout-init-card-fields (o elemento
   com max-height:0/.wscb-collapse); padding/borda/grid ficam aqui, no filho,
   nunca no pai que anima a altura (padding não é compressível — ver o
   comentário grande em .wscb-step-body-inner no checkout-base.css). margin-top
   aqui é seguro sem gating condicional: filho com overflow:hidden no pai não
   "vaza" margem/padding pra fora quando o pai está em max-height:0 (testado). */
.ws-checkout-init-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.4rem;
    padding: 1.6rem;
    background: #fafafa;
    border-radius: var(--wscb-radius-sm, .4rem);
    border: 1px solid var(--wscb-line, #ddd);
}

.ws-checkout-init-card-fields .wscb-field--full { grid-column: 1 / -1; }
.ws-checkout-init-installments-wrap { margin-top: .5rem; }

/* ============================================================
   SIDEBAR
============================================================ */
.ws-checkout-init-sidebar {
    position: sticky;
    top: 11rem;
    align-self: start;
    min-width: 0;
}

.ws-checkout-init-sidebar__sticky {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* No Resumo desta página o rótulo "Desconto" (span à esquerda) fica neutro,
   como os outros rótulos — sobrescreve o verde/negrito que
   .wscb-totals-row--discount aplica por padrão (checkout-base.css). Só o
   valor à direita (#ws-checkout-init-sidebar-discount-value) fica verde,
   pra bater com o "-X%" do cupom e o "Você economizou ..." logo abaixo. */
#ws-checkout-init-sidebar-totals .wscb-totals-row--discount {
    color: var(--wscb-ink, #555);
    font-weight: 400;
}
#ws-checkout-init-sidebar-totals .wscb-totals-row--discount #ws-checkout-init-sidebar-discount-value {
    color: #27ae60;
}

.ws-checkout-init-sidebar__totals-card,
.ws-checkout-init-coupon {
    background: var(--wscb-surface, #fff);
    border-radius: var(--wscb-radius, 1.4rem);
    padding: 1.8rem 2rem;
    box-shadow: var(--wscb-shadow, 0 1px 2px rgb(0 0 0 / 4%));
}


/* ---- Produtos do carrinho (colapsável) ---- */
.ws-checkout-init-products-card {
    background: var(--wscb-surface, #fff);
    border-radius: var(--wscb-radius, 1.4rem);
    box-shadow: var(--wscb-shadow, 0 1px 2px rgb(0 0 0 / 4%));
    overflow: hidden;
}

.ws-checkout-init-products-toggle {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: 1.8rem 2rem;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--wscb-ink-strong, #414141);
}
.ws-checkout-init-products-toggle b { font-size: var(--wscb-text-default); font-weight: 700; flex: 1; }
.ws-checkout-init-products-toggle__icon { display: flex; color: #222; }
.ws-checkout-init-products-toggle__chevron { display: flex; color: var(--wscb-muted); transition: transform .15s; }
.ws-checkout-init-products-card.wscb-expanded .ws-checkout-init-products-toggle__chevron { transform: rotate(180deg); }

/* #ws-checkout-init-products-body é o .wscb-collapse (max-height:0) — o
   padding/flex do conteúdo em si vive no filho "-inner", nunca no elemento
   que anima a altura (padding não é compressível, ver comentário grande em
   .wscb-step-body-inner no checkout-base.css). */
.ws-checkout-init-products-body-inner {
    padding: 0 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* .wscb-msg reserva min-height + margem embaixo pra não pular de layout quando
   um erro aparece — mas isso deixa um vão vazio grande demais quando o campo
   de cupom é revelado e a mensagem ainda está vazia. Aqui só encolhe quando
   vazia; some qualquer texto de erro, ela volta a ocupar o espaço normal. */
#ws-checkout-init-coupon-form .wscb-msg:empty { min-height: 0; margin: .4rem 0 0; }

.ws-checkout-init-savings {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--wscb-brand-soft, #effbed);
    border: 1px solid var(--wscb-brand, #66c254);
    border-radius: var(--wscb-radius-sm, .4rem);
    padding: .8rem 1rem;
    color: var(--wscb-brand-dark, #51a840);
    font-weight: 500;
    margin-top: 1rem;
}

/* ---- Cupom aplicado: "#codigo (-X%)" numa linha só + lixeira ---- */
.ws-checkout-init-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.ws-checkout-init-coupon-applied__label { font-weight: 400; color: var(--wscb-ink-strong, #414141); }
.ws-checkout-init-coupon-applied__discount { color: #27ae60; margin-left: .4rem; }
.ws-checkout-init-coupon-applied__remove {
    flex-shrink: 0;
    display: flex;
    border: 0;
    background: none;
    padding: .2rem;
    color: var(--wscb-danger, #d33);
    cursor: pointer;
}
.ws-checkout-init-coupon-applied__remove:hover { opacity: .7; }

/* Vive dentro de #ws-checkout-init-finish-group (o .wscb-collapse que anima
   max-height) — margin-top aqui, no filho, é seguro sem gating condicional
   (testado: overflow:hidden no pai clipa a margem do filho junto quando o
   pai está em max-height:0). Metade do espaçamento original (1.8rem -> .9rem),
   a pedido: o vão até a última forma de pagamento estava grande demais. */
.ws-checkout-init-finish-group {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .9rem;
}

.ws-checkout-init-btn-finish { width: 100%; }
.ws-checkout-init-btn-finish:disabled { opacity: .5; cursor: not-allowed; }

.ws-checkout-init-textarea {
    /* .wscb-input (base) só tem padding lateral (0 14px) — pensado pra input
       de uma linha, onde o texto fica centralizado verticalmente pelo
       min-height. Num textarea o texto começa no topo, então sem padding
       vertical próprio ele cola na borda de cima mas fica com respiro nos
       lados — sobrescreve pros 4 lados iguais. */
    padding: 14px;
    resize: vertical;
    min-height: 7rem;
    height: 7rem;
    line-height: 1.5;
}

.ws-checkout-init-char-count { text-align: right; margin-top: .4rem; }

/* ---- Modal reCAPTCHA ---- */
.ws-checkout-init-captcha-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.ws-checkout-init-captcha-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.ws-checkout-init-captcha-modal__box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--wscb-radius, 1.4rem);
    padding: 2.5rem 2rem;
    max-width: 38rem;
    width: 92%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    text-align: center;
}

/* ---- Tela de erro ---- */
.ws-checkout-init-error-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 6rem 2rem;
    text-align: center;
}

.ws-checkout-init-error-box p { font-size: var(--wscb-text-title); color: var(--wscb-ink-strong, #414141); }

/* ============================================================
   RESPONSIVO
============================================================ */
@media (max-width: 1000px) {
    .ws-checkout-init-layout { grid-template-columns: 1fr; }
    .ws-checkout-init-sidebar { position: static; }
    .ws-checkout-init-sidebar__sticky { position: static; }
}

@media (max-width: 700px) {
    .ws-checkout-init-identify-row { grid-template-columns: 1fr; }
    /* Com texto ("Login com Facebook") os dois não cabem mais lado a lado
       numa tela estreita — empilha. */
    .ws-checkout-init-identify-social { flex-direction: column; gap: 1rem; }
    .wscb-form-grid { grid-template-columns: 1fr; }
    .wscb-field--full,
    .ws-checkout-init-field--addr,
    .ws-checkout-init-field--num { grid-column: 1 / -1; }
    .ws-checkout-init-card-fields { grid-template-columns: 1fr; }
}
/* Havia aqui um "padding: 0 1.6rem" pro .wscb-step-header/.wscb-step-body-inner nesse
   breakpoint, zerando o vertical — sobra de quando o padding base deles era só 12px 24px
   (bem menor). Agora que os dois usam 1.8rem 2rem, igual ao .ws-checkout-init-sidebar__totals-card
   ("Resumo"/"Produtos", que nunca teve override mobile nenhum), esse resquício era o único
   motivo do ícone/título do step ficar colado no topo só no mobile — removido pra ficar
   idêntico em qualquer largura de tela. */
 /*END MODULO wsapi3-checkout-payment-page*/

/*START MODULO wsapi3-checkout-final-page*/ /* ============================================================
   wsapi3-checkout-final-page — Fase 3
   Escopo: #ws-cfp

   Design system: os cards usam .wscb-card (fundo branco + sombra, sem
   borda) e .wscb-card-header (ícone + título) de wsapi3-checkout-base —
   mesmo padrão do payment-page. A lista de produtos e as linhas de total
   reaproveitam .wscb-product-item / .wscb-totals também de lá. Botões
   usam .wscb-btn*, links usam .wscb-link, tipografia usa só os 3 tamanhos
   de wsapi3-checkout-base (--wscb-text-title/-default/-small — 16/14/
   12px). O que sobra aqui é específico desta etapa: o cabeçalho (número
   do pedido + status), a timeline de status, os detalhes de pagamento por
   tipo (pix/boleto/cartão/depósito) dentro do card "Forma de pagamento",
   e o "código de barras" decorativo do boleto.
============================================================ */

#ws-cfp {
    margin: 0 auto;
    margin-top: 100px;
    max-width: 1200px;
    padding: 2rem 1.5rem 5rem;
    box-sizing: border-box;
    font-family: var(--wscb-font, "Roboto", Arial, sans-serif);
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink, #555);
    /* #ws-cfp-error/#ws-cfp-success começam com style="display:none" — até o
       JS decidir qual mostrar, este wrapper não tem nenhum filho visível e
       mede 0 de altura, colando o header no footer (mesmo ajuste feito no
       wsapi3-checkout-payment-page). */
    min-height: 55vh;
}

/* ---- Error ---- */
.ws-cfp-error-box {
    text-align: center;
    padding: 4rem 2rem;
}

.ws-cfp-error-box p {
    margin-bottom: 2rem;
}

/* ---- Cards: fundo/radius/sombra vêm de .wscb-card — aqui só padding/
   espaçamento entre eles ---- */
.ws-cfp-card,
.ws-cfp-header-card {
    padding: 2rem 2.25rem;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
}

/* ---- Header: número do pedido + badge de status + timeline ---- */
.ws-cfp-header-card__top {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--wscb-line, #ddd);
    flex-wrap: wrap;
}

.ws-cfp-order-title {
    margin: 0;
    font-size: var(--wscb-text-title);
    font-weight: 700;
    color: var(--wscb-ink-strong, #414141);
}

.ws-cfp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: .4rem 1.2rem;
    border-radius: 999px;
    background: #eaf4fd;
    color: var(--wscb-link, #0789f7);
    font-size: var(--wscb-text-small);
    font-weight: 700;
}

/* ---- Status do pedido (timeline) ----
   Linha entre os passos via ::after em cada step, indo do centro de um
   pro centro do próximo (metade da largura de cada um) — evita o
   desalinhamento que dava com a linha como elemento-irmão do ponto. */
.ws-cfp-status-track {
    display: flex;
    align-items: flex-start;
}

.ws-cfp-status-step {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 .4rem;
    box-sizing: border-box;
}

.ws-cfp-status-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right, #ddd 0 6px, transparent 6px 12px);
    z-index: 0;
}
.ws-cfp-status-step--line-done:not(:last-child)::after {
    background-image: none;
    background-color: #222;
}

.ws-cfp-status-step__dot {
    position: relative;
    z-index: 1;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #f0f0f0;
    color: #b7b7b7;
}
.ws-cfp-status-step--done .ws-cfp-status-step__dot { background: #222; color: #fff; }

.ws-cfp-status-step__body { margin-top: .8rem; }

.ws-cfp-status-step__label {
    font-size: var(--wscb-text-small);
    font-weight: 700;
    color: var(--wscb-muted, #909090);
}
.ws-cfp-status-step--done .ws-cfp-status-step__label { color: #222; }

.ws-cfp-status-step__date {
    font-size: var(--wscb-text-small);
    color: var(--wscb-muted, #909090);
    margin-top: .2rem;
}

/* ---- Observação / Entrega / Resumo — 3 colunas iguais ---- */
.ws-cfp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* Quando não há observação (a maioria dos pedidos), Entrega/Resumo dividem
   o espaço em 2 colunas em vez de sobrar um vão vazio no lugar da 3ª. */
.ws-cfp-columns.ws-cfp-columns--no-obs { grid-template-columns: 1fr 1fr; }

.ws-cfp-columns .ws-cfp-card { margin-bottom: 0; }

/* ---- Produtos ---- */
.ws-cfp-items {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* "Quantidade" não deve ficar reduzida/apagada aqui — sobrescreve só nesta
   página o .wscb-product-item__row (compartilhado com carrinho/pagamento),
   sem mexer na classe base. O preço (.wscb-product-item__price) já define
   sua própria cor/tamanho e não é afetado por esta regra. */
#ws-cfp-items .wscb-product-item__row {
    font-size: var(--wscb-text-default);
    color: #222;
}

/* ---- Observação ---- */
.ws-cfp-observation-text {
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink, #555);
    line-height: 1.6;
    margin: 0;
}

/* ---- Forma de pagamento: resumo (ícone + nome + detalhe) ---- */
.ws-cfp-pmt-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ws-cfp-pmt-summary__icon {
    width: 40px;
    height: 40px;
    background: #f7f7f7;
    border-radius: var(--wscb-radius-sm, .4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #222;
}
/* PIX vem do wsapi3-icons (data-wsjs-icon) — o global span[data-wsjs-icon] svg
   força 1.5rem; aqui volta pro tamanho/cor dos outros ícones inline deste
   slot (2rem, herdando a cor do container). */
.ws-cfp-pmt-summary__icon span[data-wsjs-icon] {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
}
.ws-cfp-pmt-summary__icon span[data-wsjs-icon] svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

.ws-cfp-pmt-summary__name {
    font-size: var(--wscb-text-default);
    font-weight: 700;
    color: var(--wscb-ink-strong, #111);
}

.ws-cfp-pmt-summary__detail {
    font-size: var(--wscb-text-default);
    color: #222;
}

/* ---- Forma de pagamento: detalhes por tipo (pix/cartão/boleto/depósito) —
   tudo empilhado numa coluna só (o card agora é estreito, não mais um hero
   de largura total). ---- */
.ws-cfp-pmt-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--wscb-line, #ddd);
}

.ws-cfp-pmt-meta {
    display: flex;
    gap: 1.5rem;
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink, #444);
    flex-wrap: wrap;
}
.ws-cfp-pmt-meta span {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ws-cfp-pmt-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--wscb-brand-soft, #effbed);
    border: 1px solid var(--wscb-brand, #66c254);
    border-radius: var(--wscb-radius-sm, .4rem);
    padding: .75rem 1rem;
    font-size: var(--wscb-text-small);
    color: var(--wscb-brand-dark, #2d6a4f);
}
.ws-cfp-pmt-note svg { flex-shrink: 0; }
.ws-cfp-pmt-note--info {
    background: #eaf4fd;
    border-color: var(--wscb-link, #0789f7);
    color: #045a8d;
}

/* ---- PIX ---- */
/* No desktop o QR fica à esquerda dos campos (chave/código); no mobile
   (ver responsivo) empilha, QR centralizado em cima. */
.ws-cfp-pix-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.ws-cfp-pix-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ws-cfp-pix-qr {
    display: block;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    object-fit: contain;
    border: 1px solid var(--wscb-line, #ddd);
    border-radius: var(--wscb-radius-sm, .4rem);
    padding: 6px;
}

.ws-cfp-pix-key-block {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ws-cfp-pix-block-label {
    font-size: var(--wscb-text-default);
    font-weight: 700;
    color: var(--wscb-ink, #555);
    margin: 0;
}

.ws-cfp-copy-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #f9f9f9;
    border: 1px solid var(--wscb-line, #ddd);
    border-radius: var(--wscb-radius-sm, .4rem);
    padding: .6rem 1rem;
}

.ws-cfp-copy-row span {
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink-strong, #333);
    flex: 1;
    word-break: break-all;
}

.ws-cfp-pix-code-text {
    font-size: var(--wscb-text-small);
    color: var(--wscb-ink, #555);
    word-break: break-all;
    background: #f9f9f9;
    border: 1px solid var(--wscb-line, #ddd);
    border-radius: var(--wscb-radius-sm, .4rem);
    padding: .75rem 1rem;
    max-height: 80px;
    overflow: hidden;
    line-height: 1.5;
}

/* ---- Cartão de crédito ---- */
.ws-cfp-cc-icon-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ws-cfp-cc-brand-icon {
    background: #f5f5f5;
    border-radius: var(--wscb-radius-sm, .4rem);
    padding: .4rem .8rem;
    font-size: var(--wscb-text-small);
    font-weight: 700;
    color: var(--wscb-ink-strong, #333);
    text-transform: uppercase;
}

.ws-cfp-cc-last4 { font-size: var(--wscb-text-default); color: var(--wscb-ink, #555); }

.ws-cfp-cc-info-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ws-cfp-cc-info-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ws-cfp-cc-info-item__label {
    font-size: var(--wscb-text-small);
    color: var(--wscb-muted, #909090);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ws-cfp-cc-info-item__value {
    font-size: var(--wscb-text-default);
    font-weight: 700;
    color: var(--wscb-ink-strong, #222);
}

/* ---- Boleto ---- */
.ws-cfp-barcode-visual {
    display: flex;
    gap: 2px;
    height: 50px;
    overflow: hidden;
}

.ws-cfp-barcode-visual span {
    display: inline-block;
    height: 100%;
    background: var(--wscb-ink-strong, #222);
    flex-shrink: 0;
}

.ws-cfp-barcode-num {
    font-size: var(--wscb-text-small);
    color: var(--wscb-ink, #555);
    letter-spacing: .05em;
    word-break: break-all;
    margin-top: .5rem;
}

/* ---- Depósito bancário ---- */
.ws-cfp-deposit-table {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ws-cfp-deposit-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.ws-cfp-deposit-row__label {
    color: var(--wscb-muted, #909090);
    min-width: 130px;
    flex-shrink: 0;
}

.ws-cfp-deposit-row__value {
    color: var(--wscb-ink-strong, #222);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ---- Genérico / Instruções ---- */
.ws-cfp-instructions {
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink, #555);
    line-height: 1.6;
    margin: 0;
}

/* ---- Endereço ---- */
.ws-cfp-address-line {
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink, #444);
    line-height: 1.8;
}
.ws-cfp-address-empty { color: #aaa; font-size: var(--wscb-text-small); }

/* ---- Entrega (frete) ---- */
.ws-cfp-shipping { margin-bottom: 1.2rem; }

.ws-cfp-shipping-name {
    font-size: var(--wscb-text-default);
    font-weight: 700;
    color: var(--wscb-ink-strong, #111);
    margin-bottom: .3rem;
}

.ws-cfp-shipping-price {
    font-size: var(--wscb-text-default);
    color: var(--wscb-ink, #444);
    font-weight: 400;
}

.ws-cfp-shipping-deadline {
    font-size: var(--wscb-text-default);
    color: #222;
    margin-top: .4rem;
}

/* ---- Resumo (o desconto no Resumo desta página não deve chamar mais
   atenção que o resto dos valores — sobrescreve só aqui o destaque verde/
   negrito que .wscb-totals-row--discount aplica nas outras etapas do
   checkout) ---- */
#ws-cfp-totals .wscb-totals-row--discount {
    color: var(--wscb-ink, #555);
    font-weight: 400;
}

/* ---- Ver nota fiscal ---- */
.ws-cfp-nf-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.2rem;
    padding: 1.2rem 1.6rem;
    background: #eaf4fd;
    border-radius: var(--wscb-radius-sm, .4rem);
    color: var(--wscb-link, #0789f7);
    font-weight: 700;
    font-size: var(--wscb-text-default);
    text-decoration: none;
}
.ws-cfp-nf-link:hover { text-decoration: underline; }

/* ---- Link "Acompanhar pedido", junto do bloco de status ---- */
.ws-cfp-track-link-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--wscb-line, #ddd);
    color: #222;
}

.ws-cfp-tracking-info {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    flex: 1;
    min-width: 0;
}
.ws-cfp-tracking-info b { font-size: var(--wscb-text-default); font-weight: 700; }
.ws-cfp-tracking-info span {
    font-size: var(--wscb-text-small);
    color: var(--wscb-muted, #909090);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Responsivo ---- */
@media (max-width: 1200px) {
    #ws-cfp { margin-top: 0; }
}

@media (max-width: 768px) {
    #ws-cfp {
        padding: 1.25rem 1rem 4rem;
    }

    .ws-cfp-card,
    .ws-cfp-header-card {
        padding: 1.6rem 1.6rem;
    }

    .ws-cfp-columns,
    .ws-cfp-columns.ws-cfp-columns--no-obs {
        grid-template-columns: 1fr;
    }

    .ws-cfp-pix-layout { flex-direction: column; }
    .ws-cfp-pix-qr { margin: 0 auto; }

    /* Status: de trilha horizontal pra lista vertical, com ícone escondido
       (só o "pingo" colorido) — padrão compacto de mobile. */
    .ws-cfp-status-track { flex-direction: column; align-items: stretch; }

    .ws-cfp-status-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 0;
        margin-bottom: 1.8rem;
    }
    .ws-cfp-status-step:last-child { margin-bottom: 0; }

    .ws-cfp-status-step:not(:last-child)::after {
        top: 1.4rem;
        left: .7rem;
        width: 2px;
        height: calc(100% - 1.4rem + 1.8rem);
        background-image: repeating-linear-gradient(to bottom, #ddd 0 4px, transparent 4px 8px);
    }

    .ws-cfp-status-step__dot { width: 1.4rem; height: 1.4rem; margin-right: 1.2rem; }
    .ws-cfp-status-step__dot svg { display: none; }

    .ws-cfp-status-step__body {
        margin-top: 0;
        display: flex;
        flex: 1;
        justify-content: space-between;
        gap: 1rem;
    }
}
 /*END MODULO wsapi3-checkout-final-page*/

/*START MODULO wsapi3-checkout-footer*/ .ws-cart-step footer.startingCart {
  visibility: hidden;
}

#ws-carrinhoNovo footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem;
  padding-bottom: 8rem;
  border-top: 1px solid #D8D8D8;
  flex-direction: row;
}

#ws-carrinhoNovo footer .metodoPag .payment-methods-list {
  margin-bottom: 3.5rem;
  justify-content: flex-start;
  flex-direction: row;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div>li {
  list-style: none;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div>li [data-wsjs-icon] {
  display: none;
}

#ws-carrinhoNovo footer>div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 122rem;
}

#ws-carrinhoNovo footer .metodoPag h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 1;
}

#ws-carrinhoNovo footer .metodoPag .cards {
  display: flex;
  gap: .5rem;
  margin-bottom: 3.5rem;
}

#ws-carrinhoNovo footer .metodoPag .cards .card {
  width: 5rem;
  height: 3.5rem;
  background-color: #ffffff;
  border-radius: .5rem;
}

#ws-carrinhoNovo footer .pessoais>p {
  text-align: right;
}

#ws-carrinhoNovo footer .pessoais {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#ws-carrinhoNovo footer .pessoais .cards {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}

#ws-carrinhoNovo footer .pessoais .cards .card {
  width: 13rem;
  height: 5rem;
  background-color: #ffffff;
  border-radius: .5rem;
}

#ws-carrinhoNovo footer .metodoPag {
  display: flex;
  flex-direction: column;
}

#ws-carrinhoNovo [data-wsjs-badges] {
  margin-bottom: 1rem;
  justify-content: flex-start;
}

/* mobile */
@media screen and (max-width: 1200px) {
  #ws-carrinhoNovo footer .pessoais {
    align-items: flex-start;
    gap: 1rem;
  }
  
  #ws-carrinhoNovo footer>div {
    gap: 2rem;
    flex-direction: column;
  }

  #ws-carrinhoNovo footer .pessoais>p {
    text-align: left;
  }
}
 /*END MODULO wsapi3-checkout-footer*/

/*START MODULO wsapi3-checkout-footer*/ .ws-cart-step footer.startingCart {
  visibility: hidden;
}

#ws-carrinhoNovo footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem;
  padding-bottom: 8rem;
  border-top: 1px solid #D8D8D8;
  flex-direction: row;
}

#ws-carrinhoNovo footer .metodoPag .payment-methods-list {
  margin-bottom: 3.5rem;
  justify-content: flex-start;
  flex-direction: row;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div>li {
  list-style: none;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div>li [data-wsjs-icon] {
  display: none;
}

#ws-carrinhoNovo footer>div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 122rem;
}

#ws-carrinhoNovo footer .metodoPag h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 1;
}

#ws-carrinhoNovo footer .metodoPag .cards {
  display: flex;
  gap: .5rem;
  margin-bottom: 3.5rem;
}

#ws-carrinhoNovo footer .metodoPag .cards .card {
  width: 5rem;
  height: 3.5rem;
  background-color: #ffffff;
  border-radius: .5rem;
}

#ws-carrinhoNovo footer .pessoais>p {
  text-align: right;
}

#ws-carrinhoNovo footer .pessoais {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#ws-carrinhoNovo footer .pessoais .cards {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}

#ws-carrinhoNovo footer .pessoais .cards .card {
  width: 13rem;
  height: 5rem;
  background-color: #ffffff;
  border-radius: .5rem;
}

#ws-carrinhoNovo footer .metodoPag {
  display: flex;
  flex-direction: column;
}

#ws-carrinhoNovo [data-wsjs-badges] {
  margin-bottom: 1rem;
  justify-content: flex-start;
}

/* mobile */
@media screen and (max-width: 1200px) {
  #ws-carrinhoNovo footer .pessoais {
    align-items: flex-start;
    gap: 1rem;
  }
  
  #ws-carrinhoNovo footer>div {
    gap: 2rem;
    flex-direction: column;
  }

  #ws-carrinhoNovo footer .pessoais>p {
    text-align: left;
  }
}
 /*END MODULO wsapi3-checkout-footer*/

/*START MODULO wsapi3-checkout-footer*/ .ws-cart-step footer.startingCart {
  visibility: hidden;
}

#ws-carrinhoNovo footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem;
  padding-bottom: 8rem;
  border-top: 1px solid #D8D8D8;
  flex-direction: row;
}

#ws-carrinhoNovo footer .metodoPag .payment-methods-list {
  margin-bottom: 3.5rem;
  justify-content: flex-start;
  flex-direction: row;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div>li {
  list-style: none;
}

#ws-carrinhoNovo footer .metodoPag .contatoInfo>div>li [data-wsjs-icon] {
  display: none;
}

#ws-carrinhoNovo footer>div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 122rem;
}

#ws-carrinhoNovo footer .metodoPag h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 1;
}

#ws-carrinhoNovo footer .metodoPag .cards {
  display: flex;
  gap: .5rem;
  margin-bottom: 3.5rem;
}

#ws-carrinhoNovo footer .metodoPag .cards .card {
  width: 5rem;
  height: 3.5rem;
  background-color: #ffffff;
  border-radius: .5rem;
}

#ws-carrinhoNovo footer .pessoais>p {
  text-align: right;
}

#ws-carrinhoNovo footer .pessoais {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#ws-carrinhoNovo footer .pessoais .cards {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}

#ws-carrinhoNovo footer .pessoais .cards .card {
  width: 13rem;
  height: 5rem;
  background-color: #ffffff;
  border-radius: .5rem;
}

#ws-carrinhoNovo footer .metodoPag {
  display: flex;
  flex-direction: column;
}

#ws-carrinhoNovo [data-wsjs-badges] {
  margin-bottom: 1rem;
  justify-content: flex-start;
}

/* mobile */
@media screen and (max-width: 1200px) {
  #ws-carrinhoNovo footer .pessoais {
    align-items: flex-start;
    gap: 1rem;
  }
  
  #ws-carrinhoNovo footer>div {
    gap: 2rem;
    flex-direction: column;
  }

  #ws-carrinhoNovo footer .pessoais>p {
    text-align: left;
  }
}
 /*END MODULO wsapi3-checkout-footer*/

/*START MODULO wsapi3-login-page*/ /* wsapi3-login-page — reaproveita o design system do checkout (wscb-*,
   ws-checkout-init-identify-*, já globais em GERAL.css) para ficar idêntico à tela de
   identificação do checkout. Só o que é específico desta página (centralização vertical,
   telas de esqueci-senha) fica aqui. */

.login-block-page .container {
  margin: 0 auto;
}

#ws-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  padding: 4rem 1.5rem;
  text-align: center;
}

#id-password-field {
  margin-top: 1.6rem;
  text-align: left;
}

.id-identity-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  color: var(--wscb-ink, #555);
}

.id-forgot-row {
  text-align: right;
  margin-top: 0.8rem;
}

.id-single-screen {
  text-align: left;
}

.id-single-screen-desc {
  margin: 0.4rem 0 1.8rem;
}

.id-btn-row {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.4rem;
}

.id-btn-row .wscb-btn {
  flex: 1;
}
 /*END MODULO wsapi3-login-page*/

/*START MODULO wsapi3-signup-page*/ /* ─── Reset & Base ─── */

.signup-block-page *,
.signup-block-page ::before,
.signup-block-page ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.signup-block-page {
    --color-white: #ffffff;
    --color-black: #1a1a1a;
    --color-text: var(--wscb-ink-strong, #414141);
    --color-muted: #767676;
    --color-border: var(--wscb-line, #ddd);
    --color-border-light: #ebebeb;
    --color-bg: #f7f7f7;
    --color-danger: #c0392b;
    --color-danger-border: #e0b4b0;
    --color-btn-bg: var(--wscb-secondary, #222);
    --color-btn-hover: var(--wscb-secondary-dark, #000);
    /* Mesmos tokens do login/checkout; os rótulos continuam em wsapi3-forms-style. */
    --signup-control-radius: var(--wscb-radius-sm, var(--ws-radius-sm, 10px));
    --signup-control-font: var(--wscb-font, "Roboto", Arial, sans-serif);
    --signup-control-font-size: var(--wscb-text-default, 1.4rem);
    --transition: 0.32s cubic-bezier(.4, 0, .2, 1);
}

.signup-block-page .container {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 24px 72px;
}

/* ─── Título da seção ─── */
.signup-block-page .signup__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 32px;
}

.signup-block-page .signup__profile-badge {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--color-muted);
    margin-left: 8px;
}

.signup-block-page .signup__profile-badge:empty {
    display: none;
}

/* ─── Indicador de etapas ─── */
.signup-block-page .signup-steps {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.signup-block-page .signup-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.signup-block-page .signup-step__num {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted);
    background: var(--color-white);
    transition: background .2s, border-color .2s, color .2s;
    flex-shrink: 0;
}

.signup-block-page .signup-step__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted);
    transition: color .2s;
}

.signup-block-page .signup-step.active .signup-step__num {
    background: var(--color-btn-bg);
    border-color: var(--color-btn-bg);
    color: var(--color-white);
}

.signup-block-page .signup-step.active .signup-step__label {
    color: var(--color-text);
}

.signup-block-page .signup-step.done .signup-step__num {
    background: #27ae60;
    border-color: #27ae60;
    color: var(--color-white);
}

.signup-block-page .signup-step__connector {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    margin: 0 16px;
    max-width: 80px;
}

/* ─── Section blocks ─── */
.signup-block-page .section-block {
    padding: 28px 0;
    border-top: 1px solid var(--color-border-light);
}

.signup-block-page .section-block:first-child {
    border-top: none;
    padding-top: 0;
}

.signup-block-page .section-block__label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-text);
}

/* ─── Formulário ─── */
.signup-block-page .field-group {
    margin-bottom: 16px;
}

.signup-block-page .field-label {
    display: block;
    font-size: 11px;
    color: var(--color-muted);
    margin-bottom: 6px;
    letter-spacing: .04em;
}

.signup-block-page .field-input,
.signup-block-page .field-select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--color-border);
    border-radius: var(--signup-control-radius);
    padding: 0 14px;
    font-size: var(--signup-control-font-size);
    font-family: var(--signup-control-font);
    color: var(--color-text);
    background: var(--color-white);
    outline: none;
    transition: border-color .2s;
    appearance: none;
    -webkit-appearance: none;
}

.signup-block-page .field-input::placeholder {
    color: var(--placeHolderColor, #c9c9c9);
}

.signup-block-page .field-input:focus,
.signup-block-page .field-select:focus {
    border-color: var(--wsfs-focus-border, #222);
    box-shadow: none;
}

.signup-block-page .field-select {
    padding-right: 38px;
}

.signup-block-page .field-select-wrap {
    position: relative;
}

.signup-block-page .field-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-muted);
    pointer-events: none;
}

.signup-block-page .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ─── Tipo de pessoa (radio toggle) ─── */
.signup-block-page .person-type-toggle {
    display: flex;
    gap: 2rem;
}

.signup-block-page .person-type-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 1.2rem 1.8rem;
    border-radius: var(--signup-control-radius);
    font-size: var(--signup-control-font-size);
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
    transition: background .15s, color .15s;
    user-select: none;
}

.signup-block-page .person-type-option input[type="radio"] {
    display: none;
}

.signup-block-page .person-type-option:has(input:checked) {
    background: #e4e4e4;
}

/* Fallback para browsers sem :has() */
.signup-block-page .person-type-option.selected {
    background: #e4e4e4;
}

/* ─── Checkbox newsletter ─── */
.signup-block-page .signup-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text);
    cursor: pointer;
}

.signup-block-page .signup-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: var(--color-white);
    transition: background .15s, border-color .15s;
}

.signup-block-page .signup-checkbox-label input[type="checkbox"]:checked {
    background: var(--color-btn-bg);
    border-color: var(--color-btn-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
}

/* ─── Botões ─── */
.signup-block-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 28px;
    font-size: var(--signup-control-font-size);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--signup-control-radius);
    font-family: var(--signup-control-font);
    transition: background .2s, color .2s, border-color .2s;
    text-decoration: none;
}

.signup-block-page .btn--dark {
    background: var(--color-btn-bg);
    color: var(--color-white);
    border-color: var(--color-btn-hover);
}

.signup-block-page .btn--dark:hover {
    background: var(--color-btn-hover);
    border-color: var(--color-btn-hover);
}

.signup-block-page .btn--dark:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.signup-block-page .btn--outline {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}

.signup-block-page .btn--outline:hover {
    border-color: var(--color-text);
}

.signup-block-page .btn--outline:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ─── CEP ─── */
.signup-block-page .cep-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 6px;
}

.signup-block-page .cep-row .field-group {
    flex: 1;
    margin-bottom: 0;
    max-width: 200px;
}

.signup-block-page .cep-row .btn {
    min-height: 48px;
}

.signup-block-page .cep-hint {
    font-size: 11px;
    color: var(--color-muted);
    margin-bottom: 18px;
    min-height: 16px;
}

.signup-block-page .cep-link {
    font-size: 11px;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── Link para login ─── */
.signup-block-page .signup__login-link {
    margin-top: 24px;
    font-size: 12px;
    color: var(--color-muted);
}

.signup-block-page .signup__login-link a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── Mensagens de feedback ─── */
.signup-block-page .field-msg {
    font-size: 12px;
    margin-top: 10px;
    padding: 8px 12px;
    line-height: 1.5;
    min-height: 0;
}

.signup-block-page .field-msg:empty {
    display: none;
}

.signup-block-page .field-msg--error {
    color: var(--color-danger);
    background: #fdf2f1;
    border-left: 3px solid var(--color-danger);
}

.signup-block-page .field-msg--success {
    color: #1a7a3f;
    background: #f0faf4;
    border-left: 3px solid #1a7a3f;
}

/* ─── Utilitário ─── */
.signup-block-page .hidden {
    display: none !important;
}

/* ─── Toggle de visibilidade de senha ─── */
.signup-block-page .field-input-wrap {
    position: relative;
}

.signup-block-page .field-input-wrap .field-input {
    padding-right: 44px;
}

.signup-block-page .pwd-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    padding: 0;
    transition: color .2s;
}

.signup-block-page .pwd-toggle:hover {
    color: var(--color-text);
}

/* ─── Força da senha ─── */
.signup-block-page .pwd-strength {
    margin-top: 8px;
}

.signup-block-page .pwd-strength-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.signup-block-page .pwd-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.signup-block-page .pwd-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width .3s ease, background-color .3s ease;
}

.signup-block-page .pwd-strength-fill--weak { background: #e74c3c; }
.signup-block-page .pwd-strength-fill--medium { background: #f39c12; }
.signup-block-page .pwd-strength-fill--strong { background: #27ae60; }

.signup-block-page .pwd-strength-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    min-width: 38px;
    text-align: right;
    text-transform: uppercase;
}

.signup-block-page .pwd-strength-label--weak { color: #e74c3c; }
.signup-block-page .pwd-strength-label--medium { color: #f39c12; }
.signup-block-page .pwd-strength-label--strong { color: #27ae60; }

.signup-block-page .pwd-reqs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.signup-block-page .pwd-req {
    font-size: 11px;
    color: var(--color-muted);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
    transition: color .2s;
}

.signup-block-page .pwd-req::before {
    content: '○';
    position: absolute;
    left: 0;
    line-height: 1.5;
}

.signup-block-page .pwd-req--met {
    color: #27ae60;
}

.signup-block-page .pwd-req--met::before {
    content: '✓';
}

/* ─── Validação inline (check-signup) ─── */
.signup-block-page .field-validated {
    position: relative;
}

.signup-block-page .field-valid-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    line-height: 0;
}

.signup-block-page .field-input--valid {
    border-color: #27ae60 !important;
    padding-right: 34px;
}

/* Mantém a borda de erro inclusive no foco, acima da regra de rótulo flutuante. */
.signup-block-page .field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-within :is(.field-input, .field-select).field-input--error,
.signup-block-page .field-input--error {
    border-color: var(--color-danger) !important;
}

.signup-block-page .field-inline-msg {
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}

.signup-block-page .field-inline-msg:empty {
    display: none;
}

.signup-block-page .field-inline-msg--error {
    color: var(--color-danger);
}

/* ─── Conclusão (etapa 3) ─── */
.signup-block-page .signup-conclusion {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px 48px;
    gap: 20px;
}

.signup-block-page .signup-conclusion__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.signup-block-page .signup-conclusion__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text);
    margin: 0;
}

.signup-block-page .signup-conclusion__text {
    font-size: 14px;
    color: var(--color-muted);
    max-width: 400px;
    line-height: 1.7;
    margin: 0;
}

/* ─── Responsivo ─── */
@media (max-width: 520px) {
    .signup-block-page .field-row {
        grid-template-columns: 1fr;
    }

    .signup-block-page .signup-step__label {
        display: none;
    }

    .signup-block-page .container {
        padding: 32px 16px 56px;
    }
}
 /*END MODULO wsapi3-signup-page*/

/*START MODULO wsapi3-customer-area-page*/ /* ─── Reset & Base ─── */

.cli-block-page *,
.cli-block-page::before,
.cli-block-page::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cli-block-page {
    --color-white: #ffffff;
    --color-text: #222222;
    --color-muted: #767676;
    /* Borda ao passar o mouse em cards clicáveis (pedido, endereço, ...) —
       classe .hover-border-card usa essa variável; troque só aqui pra
       mudar em todos de uma vez. */
    --color-card-hover-border: #222;
    --color-link: #0087FA;
    --color-link-hover: #006fd1;
    --color-border: #e2e2e2;
    --color-border-light: #ededed;
    --color-bg: #f7f7f7;
    --color-danger: #c0392b;
    --color-danger-border: #e0b4b0;
    --color-btn-bg: #0087FA;
    --color-btn-hover: #006fd1;
    --color-sidebar-active-bg: #1a1a1a;
    --status-bg: #F2F9FF;
    --status-text: #0087FA;
    --radius: 10px;
    /* Mesma intensidade do --wscb-shadow do checkout-base — mantém os
       cards com o mesmo "peso" de sombra visto no checkout, em vez de um
       blur maior que lia como degradê. */
    --shadow: 0 1px 2px rgba(0, 0, 0, .04);
    --sidebar-w: 220px;
    --transition: 0.2s ease;
    --nav-breakpoint: 768px;
}

.cli-block-page {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.5;
}

.cli-block-page .container {
    margin: 0 auto;
}

/* ─── Top Bar ─── */
/* ─── Mobile nav trigger (só <768px) ─── */
.cli-block-page .mobile-nav-trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
}

.cli-block-page .mobile-nav-trigger__chevron {
    transition: transform var(--transition);
    flex-shrink: 0;
}

.cli-block-page .mobile-nav-trigger--open .mobile-nav-trigger__chevron {
    transform: rotate(180deg);
}

/* ─── Layout base (sidebar + conteúdo) ─── */
.cli-block-page .area-body {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 57px);
    position: relative;
}

/* ─── Sidebar ─── */
.cli-block-page .sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    padding: 20px 12px;
}

.cli-block-page .sidebar__nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cli-block-page .sidebar__item {
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.cli-block-page .sidebar__item:hover {
    background: #f5f5f5;
}

.cli-block-page .sidebar__item.active {
    font-weight: 700;
    background: var(--color-sidebar-active-bg);
    color: var(--color-white);
}

.cli-block-page .sidebar__item--sair {
    color: var(--color-muted);
}

/* ─── Content ─── */
.cli-block-page .content {
    flex: 1;
    min-width: 0;
    /* padding-top igual ao da .sidebar (20px) — alinha o topo do título
       com o topo do menu lateral. */
    padding: 20px 52px 60px;
}

.cli-block-page .content__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 28px;
    color: var(--color-text);
}

.cli-block-page .content__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.cli-block-page .content__title-row .content__title {
    margin-bottom: 0;
}

/* ─── Section block ─── */
.cli-block-page .section-block {
    padding: 28px 0;
    border-top: 1px solid var(--color-border-light);
}

.cli-block-page .section-block:first-of-type {
    border-top: none;
    padding-top: 0;
}

.cli-block-page .section-block__label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-text);
}

/* ─── Forms ─── */
.cli-block-page .field-group {
    margin-bottom: 16px;
}

.cli-block-page .field-label {
    display: block;
    font-size: 14px;
    color: var(--color-muted);
    margin-bottom: 6px;
}

.cli-block-page .field-input,
.cli-block-page .field-select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--ws-radius-sm, 10px);
    padding: 13px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-white);
    outline: none;
    transition: border-color var(--transition);
    appearance: none;
    -webkit-appearance: none;
}

.cli-block-page .field-input::placeholder {
    color: #b0b0b0;
}

.cli-block-page .field-input:focus,
.cli-block-page .field-select:focus {
    border-color: var(--color-link);
}

.cli-block-page .field-select-wrap {
    position: relative;
}

/* Campo de senha com ícone de olho (mostrar/ocultar) */
.cli-block-page .field-password-wrap {
    position: relative;
}

.cli-block-page .field-password-wrap .field-input {
    padding-right: 46px;
}

.cli-block-page .field-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-muted);
}

.cli-block-page .field-password-toggle svg {
    width: 18px;
    height: 18px;
}

.cli-block-page .field-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-muted);
    pointer-events: none;
}

.cli-block-page .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cli-block-page .field-hint {
    font-size: 14px;
    color: var(--color-muted);
    margin: -8px 0 16px;
    line-height: 1.5;
}

/* ─── Força da senha ─── */
.cli-block-page .pwd-strength {
    margin: -8px 0 16px;
    max-height: 260px;
    opacity: 1;
    overflow: hidden;
    transition: opacity var(--transition), max-height var(--transition), margin var(--transition);
}

.cli-block-page .pwd-strength--hidden {
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.cli-block-page .pwd-strength__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.cli-block-page .pwd-strength__bar {
    display: flex;
    gap: 4px;
    max-width: 200px;
    margin-bottom: 14px;
}

.cli-block-page .pwd-strength__seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-light);
    transition: background var(--transition);
}

.cli-block-page .pwd-strength__seg--filled {
    background: #27ae60;
}

.cli-block-page .pwd-strength__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cli-block-page .pwd-strength__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-muted);
    transition: color var(--transition);
}

.cli-block-page .pwd-strength__item--done {
    color: var(--color-text);
}

.cli-block-page .pwd-strength__icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    flex-shrink: 0;
    position: relative;
    transition: background var(--transition), border-color var(--transition);
}

.cli-block-page .pwd-strength__item--done .pwd-strength__icon {
    border-color: #27ae60;
    background: #27ae60;
}

.cli-block-page .pwd-strength__item--done .pwd-strength__icon::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 2px;
    width: 5px;
    height: 8px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cli-block-page .field-checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
}

.cli-block-page .field-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.cli-block-page .field-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ─── Buttons ───
   Sólidos em repouso; no hover só um leve fade de opacidade (sem clarear/
   escurecer a cor de fundo) — pedido explícito pra inverter o padrão
   anterior, que ficava "lavado" em repouso e só ficava sólido no hover. */
.cli-block-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--ws-radius-sm, 10px);
    font-family: inherit;
    opacity: 1;
    transition: opacity var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.cli-block-page .btn:hover {
    opacity: .8;
}

.cli-block-page .btn--wide {
    width: 100%;
}

.cli-block-page .btn--dark {
    background: var(--color-btn-bg);
    color: var(--color-white);
    border-color: var(--color-btn-bg);
}

.cli-block-page .btn--outline {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}

.cli-block-page .btn--danger {
    background: var(--color-white);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}

/* ─── Separator ─── */
.cli-block-page .sep {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 4px 0;
}

/* ─── Links ─── */
.cli-block-page .link {
    color: var(--color-link);
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
}

.cli-block-page .link:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
}

/* ─── Order list ─── */
.cli-block-page .order-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cli-block-page .order-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

/* Borda de hover padrão pra cards clicáveis da área do cliente (pedido,
   endereço, ...) — aplique essa classe em qualquer novo card do tipo pra
   herdar o mesmo hover, sem repetir a cor em cada lugar. */
.cli-block-page .hover-border-card:hover {
    border-color: var(--color-card-hover-border);
}

.cli-block-page .order-item:hover {
    background: #fafafa;
}

/* Wrapper sem overflow:hidden — o badge "+N" precisa ficar fora da área
   recortada da foto (senão o overflow:hidden do círculo corta o badge).
   Também é a borda externa (escura) do avatar — a borda branca fica na
   própria foto (.order-item__img), com um respiro entre as duas (padding). */
.cli-block-page .order-item__avatar {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 50%;
    border: 1px solid var(--color-sidebar-active-bg);
}

.cli-block-page .order-item__img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    background: #f0f0f0;
    border: 2px solid var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cli-block-page .order-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cli-block-page .order-item__badge {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.cli-block-page .order-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cli-block-page .order-item__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.cli-block-page .order-item__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.cli-block-page .order-item__date {
    font-size: 14px;
    color: var(--color-muted);
}

.cli-block-page .order-item__price {
    font-size: 14px;
    font-weight: 600;
}

.cli-block-page .load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-light);
    margin-top: 8px;
}

.cli-block-page .load-more-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Favoritos ─── */
.cli-block-page .fav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cli-block-page .fav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.cli-block-page .fav-item__img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    background: #f0f0f0;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.cli-block-page .fav-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cli-block-page .fav-item__info {
    flex: 1;
    min-width: 0;
}

.cli-block-page .fav-item__name {
    font-size: 14px;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cli-block-page .fav-item__name:hover {
    color: var(--color-text);
    text-decoration: none;
}

.cli-block-page .fav-item__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.cli-block-page .fav-item__price-old {
    font-size: 14px;
    color: var(--color-muted);
    text-decoration: line-through;
}

.cli-block-page .fav-item__price {
    font-size: 14px;
    color: var(--color-text);
    font-weight: 700;
}

.cli-block-page .fav-item__add {
    font-size: 14px;
}

.cli-block-page .fav-item__remove {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #fdf2f1;
    color: var(--color-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
}

.cli-block-page .fav-item__remove:hover {
    background: #fadbd8;
}

/* ─── Endereço ─── */
.cli-block-page .address-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

.cli-block-page .address-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.8;
    cursor: pointer;
    transition: border-color var(--transition);
}

.cli-block-page .address-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border-light);
}

.cli-block-page .address-card strong {
    font-size: 14px;
    font-weight: 700;
}

.cli-block-page .address-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cli-block-page .address-card__edit,
.cli-block-page .address-card__delete {
    font-size: 14px;
}

.cli-block-page .address-card .city {
    font-weight: 700;
    margin-top: 4px;
}

.cli-block-page .cep-field-group {
    position: relative;
}

.cli-block-page .cep-field-group .field-input {
    padding-right: 120px;
}

.cli-block-page .cep-field-link {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.cli-block-page .cep-hint {
    font-size: 14px;
    color: var(--color-muted);
    margin-bottom: 18px;
}

.cli-block-page .address-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 24px 0 16px;
}

/* ─── Newsletter / Danger ─── */
.cli-block-page .info-text {
    font-size: 14px;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ─── Utility ─── */
.cli-block-page .hidden {
    display: none !important;
}

/* ─── Cashback ─── */
.cli-block-page .cashback-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 580px) {
    .cli-block-page .cashback-summary {
        grid-template-columns: 1fr;
    }
}

.cli-block-page .cashback-card {
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 24px 28px;
}

.cli-block-page .cashback-card__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 10px;
}

.cli-block-page .cashback-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
}

.cli-block-page .cashback-card__coupon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.cli-block-page .cashback-card__sub {
    font-size: 14px;
    color: var(--color-muted);
    line-height: 1.5;
}

.cli-block-page .cashback-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--ws-radius-sm, 10px);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-muted);
    transition: color var(--transition), border-color var(--transition);
    flex-shrink: 0;
}

.cli-block-page .cashback-copy-btn:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}

.cli-block-page .cashback-copy-btn--copied {
    color: #27ae60;
    border-color: #27ae60;
}

.cli-block-page .cashback-table-wrap {
    overflow-x: auto;
}

.cli-block-page .cashback-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cli-block-page .cashback-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--color-bg);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
}

.cli-block-page .cashback-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    color: var(--color-text);
}

.cli-block-page .cashback-table__credit {
    font-weight: 600;
}

.cli-block-page .cashback-table__debit {
    color: var(--color-danger);
    font-weight: 600;
}

.cli-block-page .cashback-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}

.cli-block-page .cashback-badge--expired {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.cli-block-page .cashback-badge--valid {
    color: #27ae60;
    border-color: #27ae60;
}

/* ─── Cards (detalhe do pedido) ─── */
.cli-block-page .ca-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 20px;
}

/* Resumo — único card com fundo cinza (destaque do valor final) */
.cli-block-page .ca-card--summary {
    background: var(--color-bg);
}

.cli-block-page .pix-pay-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 12px;
}

.cli-block-page .pix-pay-qr {
    width: 160px;
    height: 160px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    padding: 8px;
}

/* Campo de código Pix + botão "Copiar" — mesmo padrão visual do campo de CEP
   + "Calcular" do frete (cart-drawer-frete-form): um único grupo com borda
   só na volta, input e botão sem borda própria por dentro. */
.cli-block-page .pix-copy-form {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--ws-radius-sm, 10px);
    overflow: hidden;
}

.cli-block-page .pix-copy-form input {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    border: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background: transparent;
    outline: none;
}

.cli-block-page .pix-copy-form button {
    white-space: nowrap;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    padding: 13px 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.cli-block-page .ca-card:last-child {
    margin-bottom: 0;
}

.cli-block-page .ca-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.cli-block-page .ca-card-header__icon {
    display: flex;
    color: var(--color-text);
    flex-shrink: 0;
}

.cli-block-page .ca-card-header b {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.cli-block-page .ca-card-header--mobile-only {
    display: none;
}

/* Em desktop o Status aparece "nu" (stepper direto abaixo do título, sem
   moldura de card) — só ganha aparência de card no breakpoint mobile,
   junto com o cabeçalho ícone+título (ver @media abaixo). */
.cli-block-page .ca-card--timeline {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 28px;
}

/* ─── Order detail ─── */
.cli-block-page .order-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-muted);
    padding: 0;
    margin-bottom: 20px;
    font-family: inherit;
    transition: color var(--transition);
}

.cli-block-page .order-detail-back:hover {
    color: var(--color-text);
}

.cli-block-page .order-detail-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* Aqui a seta de voltar vive na mesma linha do título/status, sem texto —
   sobrescreve só o que muda em relação ao uso "solto" de .order-detail-back
   (ex.: no formulário de endereço, onde continua com o texto "Voltar..."). */
.cli-block-page .order-detail-heading .order-detail-back {
    margin-bottom: 0;
    color: var(--color-text);
}

.cli-block-page .order-detail-heading .content__title {
    margin-bottom: 0;
}

.cli-block-page .order-detail-status {
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--status-bg);
    color: var(--status-text);
}

.cli-block-page .order-detail-reorder {
    margin-left: auto;
}

.cli-block-page .order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}

.cli-block-page .order-detail-items {
    list-style: none;
}

.cli-block-page .order-detail-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.cli-block-page .order-detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cli-block-page .order-detail-item__img {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    background: #f0f0f0;
    flex-shrink: 0;
    overflow: hidden;
}

.cli-block-page .order-detail-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cli-block-page .order-detail-item__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 4px;
}

.cli-block-page .order-detail-item__meta {
    font-size: 14px;
    color: var(--color-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.cli-block-page .order-detail-item__price-col {
    text-align: right;
    white-space: nowrap;
}

.cli-block-page .order-detail-item__unit {
    font-size: 14px;
    color: var(--color-muted);
    margin-bottom: 2px;
}

.cli-block-page .order-detail-item__total {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.cli-block-page .order-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cli-block-page .order-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--color-muted);
}

.cli-block-page .order-detail-row span:last-child {
    color: var(--color-text);
    font-weight: 500;
}

.cli-block-page .order-detail-row--total {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    border-top: 1px solid var(--color-border-light);
    padding-top: 12px;
    margin-top: 4px;
}

.cli-block-page .order-detail-row--total span:last-child {
    font-size: 15px;
    font-weight: 700;
}

.cli-block-page .order-detail-sub {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
}

.cli-block-page .order-detail-address,
.cli-block-page .order-detail-lines {
    font-size: 14px;
    color: var(--color-muted);
    line-height: 1.8;
}

.cli-block-page .order-detail-sub .address-section-title {
    margin-top: 0;
}

.cli-block-page .order-detail-sub .link {
    display: inline-block;
    margin-top: 12px;
}

.cli-block-page .order-detail-invoice-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--status-bg);
    color: var(--status-text);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.cli-block-page .order-detail-invoice-link svg {
    flex-shrink: 0;
}

/* ─── Timeline / Status stepper ─── */
.cli-block-page .order-detail-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.cli-block-page .order-detail-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    flex: 1;
    text-align: center;
    position: relative;
}

.cli-block-page .order-detail-timeline-item::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-border-light);
    z-index: 0;
}

.cli-block-page .order-detail-timeline-item:first-child::before {
    display: none;
}

.cli-block-page .order-detail-timeline-item--done::before {
    background: var(--color-sidebar-active-bg);
}

.cli-block-page .order-detail-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.cli-block-page .order-detail-timeline-dot--done {
    background: var(--color-sidebar-active-bg);
}

.cli-block-page .order-detail-timeline-label {
    color: var(--color-muted);
    line-height: 1.4;
}

.cli-block-page .order-detail-timeline-label strong {
    display: block;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 2px;
}

/* ─── Section states (loading / empty) ─── */
.cli-block-page .section-state {
    font-size: 14px;
    color: var(--color-muted);
    padding: 20px 0;
}

/* Estados "Carregando..." ganham o spinner padrão do site (ver
   wsMain.tools.inlineSpinnerHtml(), wsapi3-main.css) — texto puro sozinho
   passava despercebido. Aplicado via JS (ver topo de
   wsapi3-customer-area-page.js) pra não duplicar o texto em cada bloco. */
.cli-block-page .section-state--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* ─── Field messages ─── */
.cli-block-page .field-msg {
    font-size: 14px;
    margin-top: 10px;
    padding: 8px 12px;
    line-height: 1.5;
    min-height: 0;
    border-radius: 6px;
}

.cli-block-page .field-msg:empty {
    display: none;
}

.cli-block-page .field-msg--error {
    color: var(--color-danger);
    background: #fdf2f1;
    border-left: 3px solid var(--color-danger);
}

.cli-block-page .field-msg--success {
    color: #1a7a3f;
    background: #f0faf4;
    border-left: 3px solid #1a7a3f;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVO — <768px troca sidebar fixa por dropdown mobile
   e empilha o grid de duas colunas do detalhe do pedido.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cli-block-page .mobile-nav-trigger {
        display: flex;
        width: calc(100% - 40px);
        margin: 16px 20px 20px;
    }

    /* Sem gap e cantos quadrados embaixo — o painel abaixo (.sidebar) gruda
       nele, como se fosse uma extensão do combo (borda inferior do combo
       vira o divisor entre o combo e a lista). */
    .cli-block-page .mobile-nav-trigger--open {
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
    }

    .cli-block-page .area-body {
        display: block;
    }

    .cli-block-page .sidebar {
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        width: auto;
        /* z-index baixo de propósito — só precisa ficar acima do conteúdo
           logo abaixo dele (que não define z-index), não do header fixo/
           sticky da loja (que usa valores como 3 no tema padrão). Um valor
           alto aqui fazia o menu cobrir o header ao rolar a página. */
        z-index: 1;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
    }

    .cli-block-page .sidebar--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0s;
    }

    .cli-block-page .content {
        padding: 24px 20px 40px;
    }

    .cli-block-page .content__title {
        margin-bottom: 20px;
    }

    .cli-block-page .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cli-block-page .address-cards {
        grid-template-columns: 1fr;
    }

    .cli-block-page .order-detail-grid {
        grid-template-columns: 1fr;
    }

    .cli-block-page .ca-card--timeline {
        background: var(--color-white);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 20px;
    }

    .cli-block-page .ca-card-header--mobile-only {
        display: flex;
    }

    .cli-block-page .order-detail-timeline {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .cli-block-page .order-detail-timeline-item {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    .cli-block-page .order-detail-timeline-item::before {
        top: -16px;
        left: 4px;
        width: 2px;
        height: 16px;
    }
}
 /*END MODULO wsapi3-customer-area-page*/

/*START MODULO wsapi3-personal-shopper*/ /* ============================================================
   wsapi3-personal-shopper — botão flutuante + sidebar de busca assistida
   por IA (Personal Shopper). Design system próprio (--ps-*), sem depender
   de wsapi3-checkout-base, seguindo o mesmo padrão de wsapi3-cart-sidebar.
============================================================ */

:root {
  --ps-primary: #4A20F7;
  --ps-primary-dark: #3a18c4;
  --ps-ink: #333;
  --ps-ink-strong: #1a1a1a;
  --ps-muted: #8a8a8a;
  --ps-line: #e6e6e6;
  --ps-surface: #fff;
  --ps-balloon-bg: #26232f;
  --ps-radius: 1.4rem;
  --ps-radius-sm: .8rem;
  --ps-shadow: 0 .4rem 2rem rgb(0 0 0 / 15%);
  --ps-font: inherit;
  --ps-text-default: 1.4rem;
  --ps-text-small: 1.2rem;
}

/* ─────────────────────────────────────────────
   BOTÃO FLUTUANTE + BALÃO
───────────────────────────────────────────── */
.ps-launcher {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 1005;
}

/* Anel de degradê em movimento ao redor do botão — "cara de IA". O giro
   fica só em pseudo-elementos (::before/::after) do wrapper, atrás do
   botão (z-index) — o botão NÃO é filho do que gira, então o SVG dentro
   dele fica parado; só o anel (e o halo desfocado, mais pra fora e em
   sentido oposto) gira mesmo. */
.ps-launcher-ring {
  position: relative;
  width: 5.6rem;
  height: 5.6rem;
}
.ps-launcher-ring::before {
  content: '';
  position: absolute;
  inset: -.25rem;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4A20F7, #8B5CF6, #22D3EE, #EC4899, #4A20F7);
  animation: ps-ring-spin 3s linear infinite;
  z-index: 0;
}
.ps-launcher-ring::after {
  content: '';
  position: absolute;
  inset: -.9rem;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4A20F7, #8B5CF6, #22D3EE, #EC4899, #4A20F7);
  filter: blur(1.1rem);
  opacity: .5;
  z-index: -1;
  animation: ps-ring-spin 5s linear infinite reverse;
}

@keyframes ps-ring-spin {
  to { transform: rotate(360deg); }
}

.ps-launcher-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: var(--ps-surface);
  box-shadow: 0 .4rem 1.6rem rgb(0 0 0 / 18%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}
.ps-launcher-btn svg { width: 2.4rem; height: 2.4rem; pointer-events: none; }

.ps-balloon {
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.4rem);
  width: 30rem;
  max-width: calc(100vw - 4rem);
  background: var(--ps-balloon-bg);
  color: #fff;
  border-radius: var(--ps-radius);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--ps-shadow);
  box-sizing: border-box;
  cursor: pointer;
}
.ps-balloon::after {
  content: '';
  position: absolute;
  left: 2rem;
  top: 100%;
  border: .8rem solid transparent;
  border-top-color: var(--ps-balloon-bg);
}
.ps-balloon-hidden { display: none; }

.ps-balloon-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  background: none;
  color: #cfcfcf;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-balloon-close:hover { color: #fff; }
.ps-balloon-close svg { pointer-events: none; }

.ps-balloon-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 700;
  font-size: var(--ps-text-default);
  margin-bottom: .6rem;
  padding-right: 2rem;
}
.ps-balloon-icon svg { display: block; }

.ps-balloon-text {
  margin: 0;
  font-size: var(--ps-text-small);
  line-height: 1.5;
  color: #e4e4e4;
}

@media (max-width: 640px) {
  .ps-balloon { width: min(30rem, calc(100vw - 4rem)); }
}

/* ─────────────────────────────────────────────
   OVERLAY
───────────────────────────────────────────── */
.ps-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 1004;
}
.ps-overlay.ps-open { opacity: 1; visibility: visible; }

/* ─────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────── */
.ps-sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80rem;
  height: 100vh;
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow);
  z-index: 1006;
  display: flex;
  flex-direction: column;
  font-size: var(--ps-text-default);
  color: var(--ps-ink);
  transition: right .35s ease;
  box-sizing: border-box;
}
.ps-sidebar.ps-open { right: 0; }

@media (max-width: 640px) {
  .ps-sidebar { width: 100%; }
  .ps-search-field { max-width: 100%; }
}

/* Ordem padrão (topo→baixo): header, busca, corpo, rodapé de ajuda. Depois
   da primeira pergunta (.ps-chatting), a busca "desce" pro rodapé via flex
   `order` — sem mover nó nenhum no DOM, só reordena visualmente — e o
   rodapé de ajuda some (a busca já ocupa aquele lugar fixo debaixo). */
.ps-sidebar-header { order: 0; }
.ps-sidebar-search { order: 1; }
.ps-sidebar-body { order: 2; }
.ps-sidebar-help { order: 3; }

.ps-sidebar.ps-chatting .ps-sidebar-body { order: 1; }
.ps-sidebar.ps-chatting .ps-sidebar-search {
  order: 2;
  border-bottom: none;
  border-top: .1rem solid var(--ps-line);
  box-shadow: 0 -.2rem 1.2rem rgb(0 0 0 / 6%);
}
.ps-sidebar.ps-chatting .ps-sidebar-help { display: none; }

/* Rodapé fixo de ajuda — só aparece antes da 1ª pergunta (ver regra acima). */
.ps-sidebar-help {
  flex-shrink: 0;
  padding: 1.4rem 2rem 1.8rem;
  border-top: .1rem solid var(--ps-line);
  text-align: center;
  box-sizing: border-box;
}
.ps-sidebar-help p {
  margin: 0 0 .4rem;
  font-size: var(--ps-text-small);
  color: var(--ps-muted);
}
.ps-sidebar-help a {
  font-size: var(--ps-text-small);
  font-weight: 700;
  color: var(--ps-primary);
  text-decoration: none;
}
.ps-sidebar-help a:hover { text-decoration: underline; }

/* Loading geral da análise de foto — trava a sidebar inteira (o overlay
   cobre header/busca/corpo/rodapé, então nada por baixo é clicável
   enquanto está ativo) com o fundo borrado e um spinner centralizado,
   igual ao .ps-products-loading do carregamento inicial de produtos. */
.ps-sidebar-overlay-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 55%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ps-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 2rem;
  border-bottom: .1rem solid var(--ps-line);
  flex-shrink: 0;
}

.ps-sidebar-title {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 700;
  font-size: var(--ps-text-default);
  color: var(--ps-ink-strong);
}
.ps-sidebar-title-icon svg { display: block; }

.ps-sidebar-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.ps-plain-icon-btn {
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--ps-ink-strong);
  transition: color .15s;
}
.ps-plain-icon-btn svg { width: 1.8rem; height: 1.8rem; pointer-events: none; }
.ps-plain-icon-btn:hover { color: var(--ps-primary); }

/* ─────────────────────────────────────────────
   BUSCA (topo, fixa)
───────────────────────────────────────────── */
.ps-sidebar-search {
  display: flex;
  justify-content: center;
  padding: 1.6rem 2rem;
  border-bottom: .1rem solid var(--ps-line);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Campo + botão de enviar dentro do MESMO pill — claro (não escuro), e não
   ocupa a largura toda: max-width 70%, centralizado. */
.ps-search-field {
  display: flex;
  align-items: center;
  gap: .2rem;
  width: 100%;
  max-width: 70%;
  background: var(--ps-surface);
  border: .1rem solid var(--ps-line);
  border-radius: 999px;
  padding: .4rem;
  box-sizing: border-box;
  transition: box-shadow .15s, border-color .15s;
}
.ps-search-field:focus-within {
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 .2rem rgb(74 32 247 / 15%);
}

/* Busca por foto (esquerda do campo) — só carrega o Transformers.js/modelo
   CLIP sob demanda, na primeira imagem escolhida (ver _getClipClassifier
   em wsapi3-personal-shopper.js). Nada é baixado até o clique. */
.ps-search-image-btn {
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ps-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color .15s, background-color .15s;
}
.ps-search-image-btn svg { pointer-events: none; }
.ps-search-image-btn:hover { color: var(--ps-primary); background: #f3f1ff; }
.ps-search-image-btn:disabled { cursor: not-allowed; opacity: .6; }

.ps-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 1.1rem .4rem;
  font-size: var(--ps-text-default);
  font-family: var(--ps-font);
  outline: none;
  box-sizing: border-box;
  color: var(--ps-ink-strong);
}
.ps-search-input::placeholder { color: var(--ps-muted); }
.ps-search-input:disabled { opacity: .6; }

.ps-search-send {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ps-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity .15s;
}
.ps-search-send svg { pointer-events: none; }
.ps-search-send:hover { opacity: .7; }
.ps-search-send:disabled { opacity: .35; cursor: not-allowed; }

/* ─────────────────────────────────────────────
   CORPO (rola) — mensagens + produtos
───────────────────────────────────────────── */
.ps-sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.8rem 2rem 2.4rem;
  box-sizing: border-box;
}

.ps-messages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.ps-messages:empty { display: none; margin-bottom: 0; }

.ps-msg {
  max-width: 85%;
  padding: 1rem 1.4rem;
  border-radius: var(--ps-radius-sm);
  font-size: var(--ps-text-default);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}
.ps-msg--assistant {
  align-self: flex-start;
  background: #f3f1ff;
  color: var(--ps-ink-strong);
  border-bottom-left-radius: .3rem;
}
.ps-msg--user {
  align-self: flex-end;
  background: var(--ps-primary);
  color: #fff;
  border-bottom-right-radius: .3rem;
}

.ps-msg--thinking {
  color: var(--ps-muted);
  font-style: italic;
  animation: ps-think-pulse 1.4s ease-in-out infinite;
}
@keyframes ps-think-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ─────────────────────────────────────────────
   PRODUTOS — grade (recomendação inicial) ou slider horizontal
   (resultado de uma pergunta, ver .ps-products--slider mais abaixo)
───────────────────────────────────────────── */
.ps-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

/* Modo slider — usa o keenslider já compartilhado pelo resto do tema
   (wsMain.tools.createSlide, ver wsapi3-main.js) em vez da grade. Não existe
   um `.arrow{}` global (cada componente com slider define o próprio, ex:
   `[cart-gift-slider] .arrow` em wsapi3-checkout-cart.css) — aqui também
   fica escopado, com o design system --ps-* do próprio módulo. */
.ps-products--slider {
  display: block;
  position: relative;
  padding: 0 .2rem;
}
.ps-products--slider .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  /* .icon-ws (classe que o próprio createSlide também põe no elemento,
     wsapi3-main.css) define min-height:4rem — como min-height é uma
     propriedade separada de height, só sobrescrever height (acima) não
     bastava: o círculo ficava "esticado" pro mínimo de 4rem de altura
     mesmo com height:3.2rem, virando oval. Precisa zerar o mínimo aqui. */
  min-width: 3.2rem;
  min-height: 3.2rem;
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ps-surface);
  box-shadow: 0 .2rem .8rem rgb(0 0 0 / 18%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
}
.ps-products--slider .arrow--prev { left: -.6rem; }
.ps-products--slider .arrow--next { right: -.6rem; }
.ps-products--slider .arrow span[data-wsjs-icon] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
}
/* !important só no tamanho — NÃO mexer em transform aqui: é o
   `transform: rotateZ(180deg)` de .arrow--prev svg (wsapi3-wirestyle.css,
   global) que faz a seta "prev" apontar pro lado contrário da "next";
   zerar o transform (como uma versão anterior desta regra fazia) deixa as
   duas setas apontando pro mesmo lado. */
.ps-products--slider .arrow span[data-wsjs-icon] svg {
  width: 1.2rem !important;
  height: 1.2rem !important;
  max-width: 1.2rem !important;
  max-height: 1.2rem !important;
  fill: var(--ps-ink-strong);
}
.ps-products--slider .arrow:hover { background: var(--ps-primary); }
.ps-products--slider .arrow:hover span[data-wsjs-icon] svg { fill: #fff; }

.ps-product {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}

.ps-product__img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--ps-radius-sm);
  overflow: hidden;
  background: #fafafa;
}
.ps-product__img img { width: 100%; height: 100%; object-fit: cover; }

.ps-product__name {
  font-size: var(--ps-text-small);
  color: var(--ps-ink-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ps-product__prices {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.ps-product__price-old {
  font-size: 1.1rem;
  color: var(--ps-muted);
  text-decoration: line-through;
}
.ps-product__price {
  font-size: var(--ps-text-small);
  font-weight: 700;
  color: var(--ps-ink-strong);
}

.ps-products-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}
.ps-spinner {
  width: 3rem;
  height: 3rem;
  border: .3rem solid var(--ps-line);
  border-top-color: var(--ps-primary);
  border-radius: 50%;
  animation: ps-spin .7s linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }

.ps-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ps-muted);
  font-size: var(--ps-text-small);
  padding: 2rem 0;
}
 /*END MODULO wsapi3-personal-shopper*/

/*START MODULO wsapi3-forms-style*/ /* ============================================================================
   wsapi3-forms-style — rótulo flutuante global para formulários (CSS puro)
   ----------------------------------------------------------------------------
   Padrão único de campo "input com <label> em cima" para TODOS os módulos de
   formulário (login, checkout, cadastro, minha conta, contato, avise-me):

     • campo VAZIO e sem foco  → só o placeholder aparece (diz o que é o campo);
                                 o label fica escondido.
     • campo COM FOCO          → o label sobe e fica flutuando DENTRO da caixa,
                                 acima do valor (ver print); a borda fica #222.
     • campo PREENCHIDO        → como não há mais placeholder visível, o label
                                 fica sempre visível (flutuando), mesmo sem foco.
     • <select>                → não dá pra detectar "vazio" em CSS puro, então
                                 o label fica sempre flutuando.
     • hover                   → NÃO muda nada (decisão do cliente).

   Como detecta "preenchido": :not(:placeholder-shown). Logo, todo <input> de
   texto coberto aqui precisa de um atributo placeholder não-vazio. Input sem
   placeholder simplesmente fica com o label sempre flutuando (degradação ok).

   Cobre 3 famílias de marcação já existentes nos módulos, SEM alterar HTML:
     A) .wscb-field  > .wscb-label  + .wscb-input / .wscb-select
        (wsapi3-checkout-base, -checkout-payment-page, -login-page, -login-sidebar,
         -identify-flow)
     B) .field-group > .field-label + .field-input / .field-select
        (wsapi3-signup-page, wsapi3-customer-area-page)
     C) .contact-container .contact-form ... > div > label + input / textarea
        (wsapi3-pag-contact, wsapi3-pag-prod-desktop, wsapi3-pag-prod-mobile)

   Só age em wrappers que têm AO MESMO TEMPO um label E um controle editável —
   assim o "modo visualização" do checkout (<span class="wscb-label"> + valor,
   sem input), campos sem label (CEP solto) e labels de checkbox/radio ficam
   intactos.

   Ajuste fino por tema (sobrescreva no folha.css):
     --wsfs-label-color   cor do label flutuante            (default #6b6b6b)
     --wsfs-label-bg      fundo do "pill" do label          (default #fff)
     --wsfs-focus-border  cor da borda no foco              (default #222)
   ========================================================================== */

:root {
  --wsfs-label-color: #6b6b6b;
  --wsfs-label-bg: #fff;
  --wsfs-focus-border: #222;
}

/* base comum do label flutuante (aplicada por família mais abaixo) */

/* ────────────────────────────────────────────────────────────────────────────
   FAMÍLIA A — .wscb-field / .wscb-label / .wscb-input / .wscb-select
   ──────────────────────────────────────────────────────────────────────────── */

.wscb-field:has(> .wscb-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  position: relative;
}

.wscb-field:has(> .wscb-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) > .wscb-label {
  position: absolute;
  z-index: 2;
  top: 8px;
  /* left = padding-left do input (14px) + 1px borda - 3px padding do próprio
     label, pra o texto do label ficar rente ao texto digitado (.wscb-input
     tem padding: 0 14px). Contato usa left:8px porque o input de lá tem
     padding-left menor (~8px). */
  left: 12px;
  margin: 0;
  padding: 0 3px;
  background: var(--wsfs-label-bg);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--wsfs-label-color);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 30px);
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
}

/* controle: transição nas duas direções (aparecer / sumir do label) */
.wscb-field:has(> .wscb-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) :is(.wscb-input, .wscb-select) {
  transition: padding-top .15s ease, padding-bottom .15s ease, border-color .15s ease;
}

/* estado revelado: FOCO, ou preenchido, ou é <select>.
   `!important` porque a regra-base que esconde o label tem especificidade maior
   que estas (o `:has(input:not([type=...]))` da base pesa mais que o
   `:has(.wscb-input:not(:placeholder-shown))` / `:has(select)` daqui) — sem
   isso, campo já preenchido no load (ex.: minha conta) fica com o label sumido. */
.wscb-field:has(> .wscb-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-within > .wscb-label,
.wscb-field:has(> .wscb-label):has(.wscb-input:not(:placeholder-shown)) > .wscb-label,
.wscb-field:has(> .wscb-label):has(textarea:not(:placeholder-shown)) > .wscb-label,
.wscb-field:has(> .wscb-label):has(select) > .wscb-label {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* abre espaço no topo pra o label não encostar no valor.
   padding-top: 18px = mesmo valor da família C (contato), pra o valor digitado
   ficar à mesma distância do label nas 3 famílias. Aqui o padding-bottom não
   importa pra altura (.wscb-input tem min-height:48px de origem). */
.wscb-field:has(> .wscb-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-within :is(.wscb-input, .wscb-select),
.wscb-field:has(> .wscb-label):has(.wscb-input:not(:placeholder-shown)) .wscb-input,
.wscb-field:has(> .wscb-label):has(select) .wscb-select {
  padding-top: 18px;
  padding-bottom: 0;
}

/* borda no foco (vence o `border-color: var(--wscb-line) !important` do
   wsapi3-checkout-base por especificidade — ambos !important, este é maior) */
.wscb-field:has(> .wscb-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-within :is(.wscb-input, .wscb-select) {
  border-color: var(--wsfs-focus-border) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   FAMÍLIA B — .field-group / .field-label / .field-input / .field-select
   (sem escopo: cobre .signup-block-page e .cli-block-page de uma vez)
   ──────────────────────────────────────────────────────────────────────────── */

.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  position: relative;
}

.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) > .field-label {
  position: absolute;
  z-index: 2;
  top: 8px;
  /* left = padding-left do input (14px) + 1px borda - 3px padding do label,
     pra o texto do label ficar rente ao valor digitado (.field-input dos dois
     módulos de origem tem padding lateral 14px). */
  left: 12px;
  margin: 0;
  padding: 0 3px;
  background: var(--wsfs-label-bg);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--wsfs-label-color);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 30px);
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
}

.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) :is(.field-input, .field-select) {
  /* Normaliza a caixa do campo pra ficar compacta como a do contato (o
     line-height 2.4rem herdado do wsapi3-main + o padding vertical base 12–13px
     dos módulos de origem deixavam o campo ~46–52px, com o valor "boiando" longe
     do label). line-height 1.3 aperta a linha; padding vertical 11/11 fixo aqui
     define a altura base — o estado revelado só REDISTRIBUI esse total (22px),
     nunca muda a soma, então a altura não pula entre repouso e foco. */
  line-height: 1.3;
  padding-top: 11px;
  padding-bottom: 11px;
  transition: padding-top .15s ease, padding-bottom .15s ease, border-color .15s ease;
}

/* `!important`: mesma razão da família A — a regra-base que esconde tem
   especificidade maior; campo preenchido no load (minha conta) ficava sem label. */
.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-within > .field-label,
.field-group:has(> .field-label):has(.field-input:not(:placeholder-shown)) > .field-label,
.field-group:has(> .field-label):has(textarea:not(:placeholder-shown)) > .field-label,
.field-group:has(> .field-label):has(select) > .field-label {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Estado revelado: joga o valor pra baixo (padding-top 18) e o label ocupa o
   topo. Soma 18+4 = 22 = a mesma do estado base (11+11) → altura não muda.
   Repete a guarda inteira em cada seletor: a regra-base de padding acima tem
   especificidade (0,6,1); sem a guarda o seletor de "preenchido" ficaria menor
   e não venceria (mesmo problema do reveal do label). */
.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-within :is(.field-input, .field-select),
.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):has(.field-input:not(:placeholder-shown)) :is(.field-input, .field-select),
.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):has(select) :is(.field-input, .field-select) {
  padding-top: 18px;
  padding-bottom: 4px;
}

.field-group:has(> .field-label):has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-within :is(.field-input, .field-select) {
  border-color: var(--wsfs-focus-border) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   FAMÍLIA C — .contact-container .contact-form (marcação legada <label optional>)
   Usada em wsapi3-pag-contact e nos formulários "avise-me" / "sob consulta" de
   wsapi3-pag-prod-desktop / -mobile. Os `> div` de cada campo já são
   position:relative e flex-column no CSS de origem, e todos carregam o atributo
   [data-wsjs-error-message] — usado aqui só pra ganhar especificidade sobre
   `.contact-container .contact-form-bottom label { width:100% }` do CSS de origem.
   ──────────────────────────────────────────────────────────────────────────── */

.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input, textarea),
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(input, textarea) {
  position: relative;
}

.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input, textarea) > label,
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(input, textarea) > label {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  width: auto;
  margin: 0;
  padding: 0 3px;
  background: var(--wsfs-label-bg);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--wsfs-label-color);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 28px);
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
}

/* o "(obrigatório)" em itálico (label::after com content:attr(optional)) polui o
   rótulo quando ele está pequeno flutuando — some com ele nesse contexto. O
   campo continua required (validação do browser) e o placeholder informa. */
.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input, textarea) > label::after,
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(input, textarea) > label::after {
  display: none;
}

.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input, textarea) :is(input, textarea),
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(input, textarea) :is(input, textarea) {
  transition: padding-top .15s ease, padding-bottom .15s ease, border-color .15s ease;
}

.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input, textarea):focus-within > label,
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(input, textarea):focus-within > label,
.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input:not(:placeholder-shown)) > label,
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(input:not(:placeholder-shown)) > label,
.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(textarea:not(:placeholder-shown)) > label,
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(textarea:not(:placeholder-shown)) > label {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input, textarea):focus-within input,
.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input:not(:placeholder-shown)) input {
  padding-top: 18px;
  padding-bottom: 2px;
}

.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(textarea):focus-within textarea,
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(textarea:not(:placeholder-shown)) textarea {
  padding-top: 20px;
}

.contact-container .contact-form-top > div[data-wsjs-error-message]:has(> label):has(input, textarea):focus-within :is(input, textarea),
.contact-container .contact-form-bottom > div[data-wsjs-error-message]:has(> label):has(input, textarea):focus-within :is(input, textarea) {
  border-color: var(--wsfs-focus-border) !important;
}
 /*END MODULO wsapi3-forms-style*/



/*{Modulo App Inicio ExibeHome}*/

body { opacity: 1 !important; } 

#DivResponse{ display:block !important; visibility:visible !important;opacity:1 !important;}

/*{Modulo App Fim ExibeHome}*/



/*{Modulo App Inicio AlertaFreteGratis}*/

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    font-size: 10px;
}

body {
    font-family: "Poppins", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}*/

.frtalert-quadro {
    display: flex;
    width: 100%;
    margin:20px 0;
    height: 14.2rem;
    background-color: #FFFFFF;
    border: 0.1rem solid #cecece;
    border-radius: 1rem;
    flex-direction: column;
    align-items: left;
    padding: 3rem;
    box-sizing: border-box;
    gap: 3rem;
    transition:all 0.5s;
}

.frtalert-texto {
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    color: #222222;
}

.frtalert-texto span {
    font-weight: bold;
    color: #222222;
}

.frtalert-barra-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    
}

.frtalert-barra {
    width: 100%;
    height: 1rem;
    background-color: #E4E4E4;
    border-radius: 1rem;
}

.frtalert-texto-barra {
    width: fit-content;
    font-weight: bold;
    font-size: 1.4rem;
    margin: 0;
    white-space: nowrap;
}

.frtalert-caminhao-container {
    width: 3.7rem;
    height: 3.7rem;
    background-color: #397EC3;
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.frtalert-barra-azul {
    position: relative;
    height: 100%;
    background-color: #397EC3;
    border-radius: 1rem;
    transition: all 0.3s;
    opacity:0;
}

@media (max-width: 600px) {
    .frtalert-quadro {
        height: fit-content;
    }
    
    .frtalert-barra-container {
        flex-direction: column;
        gap: 1.5rem;
    }
}

.LV_Carrinho_V2_FreteGrratisFaltaX {
        display: none !important;
}

/*{Modulo App Fim AlertaFreteGratis}*/



/*{Modulo App Inicio ProductRecomend}*/

:root {
  --suggestion-app-color: #222222
}
/* refactoring css */
/* base */
[cart-suggestion-slider] {
  padding: 5rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
}

[cart-suggestion-slider] .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

[cart-suggestion-slider]:empty {
display: none;
}

[cart-suggestion-slider] .suggestion__sliderProds {
  display: grid;
  transition: 300ms;
}

[cart-suggestion-slider] .suggestion__title {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

/* titulo */
[cart-suggestion-slider] .suggestion__title h2 {
  color: var(--suggestion-app-color);
  font-size: 1.6rem;
  font-weight: 600;
}

/* setas */
[cart-suggestion-slider] .arrow--next span[data-wsjs-icon] svg[ico=Arrow],
[cart-suggestion-slider] .arrow--prev span[data-wsjs-icon] svg[ico=Arrow] {
  transform: initial;
}


[cart-suggestion-slider] .arrow {
border-radius: 100%;
background-color: #FFFFFF;
height: 4rem;
width: 4rem;
box-shadow: 5px 0px 10px #0000000D;
align-self: center;
z-index: 2;
}

body [cart-suggestion-slider] .arrow span[data-wsjs-icon] svg {
  fill: var(--suggestion-app-color) !important;
  width: 1.1rem;
  height: 1.1rem;
}

body [cart-suggestion-slider] .arrow:hover {
  background-color: var(--suggestion-app-color) !important;
}

body [cart-suggestion-slider] .arrow:hover span[data-wsjs-icon] svg {
  fill: #fff !important;
}

[cart-suggestion-slider] .arrow--prev {
  transform: rotate(180deg);
  grid-column: 1;
}

[cart-suggestion-slider] .arrow--next {
  grid-column: 3;
}

/* produtos */
[cart-suggestion-slider] .suggestion-prod {
  display: flex;
  gap: 1rem;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__image-container a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid #CCCCCC;
  border-radius: 1rem;    
  position: relative;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__image-container .whithout-image svg[ico="noimage"]{
  width: 100%;
  height: 100%;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__image-container {
  width: 8rem;
  max-width: 8rem;
  min-width: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__image-container img{
  height: unset;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__infos-container {
  width: 100%;
}
[cart-suggestion-slider] .suggestion-prod .suggestion__infos-container .suggestion__btn {
  text-decoration: underline;
  color: var(--suggestion-app-color);
  width: 100%;
  display: block;
  font-size: 1.2rem;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__infos-container .infos-container__price {
  font-size: 1.6rem;
  color: var(--suggestion-app-color);
  font-weight: bold;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__infos-container > p {
  padding: 0;
  text-align: left;
}

[cart-suggestion-slider] .suggestion-prod .suggestion__infos-container .infos-container__name{
  color: var(--suggestion-app-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.4;
  min-height: calc(3* 1* 1.2rem);
  font-size: 1.2rem;
  overflow: hidden;
  word-break: break-word;
}

[cart-suggestion-slider] .arrow--prev + .keen-slider:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -3rem;
  pointer-events: none;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  width: 6rem;
  height: 100%;
}

[cart-suggestion-slider] .arrow--prev + .keen-slider:after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -3rem;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  width: 6rem;
  height: 100%;
}

[cart-suggestion-slider] .arrow--prev + .keen-slider .keen-slider__slide:last-child {
  padding-right: 3rem;
}
[cart-suggestion-slider] .arrow--prev + .keen-slider .keen-slider__slide:first-child{
  margin-left: 2rem;
}

/* cart drawer */
[cart-suggestion-slider="cartDrawer"] {
  padding: 2rem;
  padding-top: 0;
  box-sizing: border-box;
}

[cart-suggestion-slider="cartDrawerMobile"], 
[cart-suggestion-slider="checkoutMobile"] {
  padding: 2rem 0;
}

/*{Modulo App Fim ProductRecomend}*/



/*{Modulo App Inicio ModalNovo}*/

 div.light_rounded .pp_top .pp_left{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat;}div.light_rounded .pp_top .pp_middle{background:#fff;}div.light_rounded .pp_top .pp_right{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat;}div.light_rounded .pp_content .ppt{color:#000;}div.light_rounded .pp_content_container .pp_left,div.light_rounded .pp_content_container .pp_right{background:#fff;}div.light_rounded .pp_content{background-color:#fff;}div.light_rounded .pp_next:hover{background: url(/lojas/img/prettyPhoto/light_rounded/btnNext.png) center right no-repeat;cursor: pointer;}div.light_rounded .pp_previous:hover{background: url(/lojas/img/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat;cursor: pointer;}div.light_rounded .pp_expand{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat;cursor: pointer;}div.light_rounded .pp_expand:hover{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat;cursor: pointer;}div.light_rounded .pp_contract{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat;cursor: pointer;}div.light_rounded .pp_contract:hover{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat;cursor: pointer;}div.light_rounded .pp_close{width:75px;height:22px;background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat;cursor: pointer;}div.light_rounded #pp_full_res .pp_inline{color:#000;}div.light_rounded .pp_gallery a.pp_arrow_previous,div.light_rounded .pp_gallery a.pp_arrow_next{margin-top:12px !important;}div.light_rounded .pp_nav .pp_play{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}div.light_rounded .pp_nav .pp_pause{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}div.light_rounded .pp_arrow_previous{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat;}div.light_rounded .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.light_rounded .pp_arrow_next{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat;}div.light_rounded .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}div.light_rounded .pp_bottom .pp_left{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat;}div.light_rounded .pp_bottom .pp_middle{background:#fff;}div.light_rounded .pp_bottom .pp_right{background: url(/lojas/img/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat;}div.light_rounded .pp_loaderIcon{background: url(/lojas/img/prettyPhoto/light_rounded/loader.gif) center center no-repeat;}div.dark_rounded .pp_top .pp_left{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat;}div.dark_rounded .pp_top .pp_middle{background: url(/lojas/img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;}div.dark_rounded .pp_top .pp_right{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat;}div.dark_rounded .pp_content_container .pp_left{background: url(/lojas/img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y;}div.dark_rounded .pp_content_container .pp_right{background: url(/lojas/img/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y;}div.dark_rounded .pp_content{background: url(/lojas/img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;}div.dark_rounded .pp_next:hover{background: url(/lojas/img/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat;cursor: pointer;}div.dark_rounded .pp_previous:hover{background: url(/lojas/img/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat;cursor: pointer;}div.dark_rounded .pp_expand{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat;cursor: pointer;}div.dark_rounded .pp_expand:hover{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat;cursor: pointer;}div.dark_rounded .pp_contract{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat;cursor: pointer;}div.dark_rounded .pp_contract:hover{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat;cursor: pointer;}div.dark_rounded .pp_close{width:75px;height:22px;background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat;cursor: pointer;}div.dark_rounded .currentTextHolder{color:#c4c4c4;}div.dark_rounded .pp_description{color:#fff;}div.dark_rounded #pp_full_res .pp_inline{color:#fff;}div.dark_rounded .pp_gallery a.pp_arrow_previous,div.dark_rounded .pp_gallery a.pp_arrow_next{margin-top:12px !important;}div.dark_rounded .pp_nav .pp_play{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}div.dark_rounded .pp_nav .pp_pause{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}div.dark_rounded .pp_arrow_previous{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat;}div.dark_rounded .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.dark_rounded .pp_arrow_next{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat;}div.dark_rounded .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}div.dark_rounded .pp_bottom .pp_left{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat;}div.dark_rounded .pp_bottom .pp_middle{background: url(/lojas/img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;}div.dark_rounded .pp_bottom .pp_right{background: url(/lojas/img/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat;}div.dark_rounded .pp_loaderIcon{background: url(/lojas/img/prettyPhoto/dark_rounded/loader.gif) center center no-repeat;}div.dark_square .pp_left ,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background: url(/lojas/img/prettyPhoto/dark_square/contentPattern.png) top left repeat;}div.dark_square .currentTextHolder{color:#c4c4c4;}div.dark_square .pp_description{color:#fff;}div.dark_square .pp_loaderIcon{background: url(/lojas/img/prettyPhoto/dark_rounded/loader.gif) center center no-repeat;}div.dark_square .pp_content_container .pp_left{background: url(/lojas/img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y;}div.dark_square .pp_content_container .pp_right{background: url(/lojas/img/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y;}div.dark_square .pp_expand{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat;cursor: pointer;}div.dark_square .pp_expand:hover{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat;cursor: pointer;}div.dark_square .pp_contract{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat;cursor: pointer;}div.dark_square .pp_contract:hover{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat;cursor: pointer;}div.dark_square .pp_close{width:75px;height:22px;background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat;cursor: pointer;}div.dark_square #pp_full_res .pp_inline{color:#fff;}div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next{margin-top:12px !important;}div.dark_square .pp_nav .pp_play{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}div.dark_square .pp_nav .pp_pause{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}div.dark_square .pp_arrow_previous{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat;}div.dark_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.dark_square .pp_arrow_next{background: url(/lojas/img/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat;}div.dark_square .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}div.dark_square .pp_next:hover{background: url(/lojas/img/prettyPhoto/dark_square/btnNext.png) center right no-repeat;cursor: pointer;}div.dark_square .pp_previous:hover{background: url(/lojas/img/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat;cursor: pointer;}div.light_square .pp_left ,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content{background:#fff;}div.light_square .pp_content .ppt{color:#000;}div.light_square .pp_expand{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat;cursor: pointer;}div.light_square .pp_expand:hover{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat;cursor: pointer;}div.light_square .pp_contract{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat;cursor: pointer;}div.light_square .pp_contract:hover{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat;cursor: pointer;}div.light_square .pp_close{width:75px;height:22px;background: url(/lojas/img/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat;cursor: pointer;}div.light_square #pp_full_res .pp_inline{color:#000;}div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px !important;}div.light_square .pp_nav .pp_play{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}div.light_square .pp_nav .pp_pause{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}div.light_square .pp_arrow_previous{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat;}div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.light_square .pp_arrow_next{background: url(/lojas/img/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat;}div.light_square .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}div.light_square .pp_next:hover{background: url(/lojas/img/prettyPhoto/light_square/btnNext.png) center right no-repeat;cursor: pointer;}div.light_square .pp_previous:hover{background: url(/lojas/img/prettyPhoto/light_square/btnPrevious.png) center left no-repeat;cursor: pointer;}div.facebook .pp_top .pp_left{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat;}div.facebook .pp_top .pp_middle{background: url(/lojas/img/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x;}div.facebook .pp_top .pp_right{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat;}div.facebook .pp_content .ppt{color:#000;}div.facebook .pp_content_container .pp_left{background: url(/lojas/img/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y;}div.facebook .pp_content_container .pp_right{background: url(/lojas/img/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y;}div.facebook .pp_content{background:#fff;}div.facebook .pp_expand{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;cursor: pointer;}div.facebook .pp_expand:hover{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;cursor: pointer;}div.facebook .pp_contract{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;cursor: pointer;}div.facebook .pp_contract:hover{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;cursor: pointer;}div.facebook .pp_close{width:22px;height:22px;background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;cursor: pointer;}div.facebook #pp_full_res .pp_inline{color:#000;}div.facebook .pp_loaderIcon{background: url(/lojas/img/prettyPhoto/facebook/loader.gif) center center no-repeat;}div.facebook .pp_arrow_previous{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px;}div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default;}div.facebook .pp_arrow_next{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px;}div.facebook .pp_arrow_next.disabled{background-position: -32px -96px;cursor:default;}div.facebook .pp_nav{margin-top:0;}div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px;}div.facebook .pp_nav .pp_play{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;height:22px;width:22px;}div.facebook .pp_nav .pp_pause{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;height:22px;width:22px;}div.facebook .pp_next:hover{background: url(/lojas/img/prettyPhoto/facebook/btnNext.png) center right no-repeat;cursor: pointer;}div.facebook .pp_previous:hover{background: url(/lojas/img/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;cursor: pointer;}div.facebook .pp_bottom .pp_left{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat;}div.facebook .pp_bottom .pp_middle{background: url(/lojas/img/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x;}div.facebook .pp_bottom .pp_right{background: url(/lojas/img/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat;}div.pp_pic_holder a:focus{outline:none;}div.pp_overlay{background:#000;display: none;left:0;position:absolute;top:0;width:100%;z-index:9500;}div.pp_pic_holder{display: none;position:absolute;width:100px;z-index:10000;}.pp_top{height:20px;position: relative;}* html .pp_top{padding:0 20px;}.pp_top .pp_left{height:20px;left:0;position:absolute;width:20px;}.pp_top .pp_middle{height:20px;left:20px;position:absolute;right:20px;}* html .pp_top .pp_middle{left:0;position: static;}.pp_top .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px;}.pp_content{height:40px;}.pp_fade{display: none;}.pp_content_container{position: relative;text-align: left;width:100%;}.pp_content_container .pp_left{padding-left:20px;}.pp_content_container .pp_right{padding-right:20px;}.pp_content_container .pp_details{float: left;margin:10px 0 2px 0;}.pp_description{display: none;margin:0 0 5px 0;}.pp_nav{clear: left;float: left;margin:3px 0 0 0;}.pp_nav p{float: left;margin:2px 4px;}.pp_nav .pp_play,.pp_nav .pp_pause{float: left;margin-right:4px;text-indent: -10000px;}a.pp_arrow_previous,a.pp_arrow_next{display:block;float: left;height:15px;margin-top:3px;overflow: hidden;text-indent: -10000px;width:14px;}.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000;}.pp_gallery{left:50%;margin-top: -50px;position:absolute;z-index:10000;}.pp_gallery ul{float: left;height:35px;margin:0 0 0 5px;overflow: hidden;padding:0;position: relative;}.pp_gallery ul a{border:1px #000 solid;border:1px rgba(0,0,0,0.5) solid;display:block;float: left;height:33px;overflow: hidden;}.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff;}.pp_gallery ul a img{border:0;}.pp_gallery li{display:block;float: left;margin:0 5px 0 0;}.pp_gallery li.default a{background: url(/lojas/img/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px;}.pp_gallery li.default a img{display: none;}.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px !important;}a.pp_next{background: url(/lojas/img/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float: right;height:100%;text-indent: -10000px;width:49%;}a.pp_previous{background: url(/lojas/img/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float: left;height:100%;text-indent: -10000px;width:49%;}a.pp_expand,a.pp_contract{cursor: pointer;display: none;height:20px;position:absolute;right:30px;text-indent: -10000px;top:10px;width:20px;z-index:20000;}a.pp_close{display:block;float: right;line-height:22px;text-indent: -10000px;}.pp_bottom{height:20px;position: relative;}* html .pp_bottom{padding:0 20px;}.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px;}.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px;}* html .pp_bottom .pp_middle{left:0;position: static;}.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px;}.pp_loaderIcon{display:block;height:24px;left:50%;margin: -12px 0 0 -12px;position:absolute;top:50%;width:24px;}#pp_full_res{line-height:1 !important;}#pp_full_res .pp_inline{text-align: left;}#pp_full_res .pp_inline p{margin:0 0 15px 0;}div.ppt{color:#fff;display: none;font-size:17px;margin:0 0 5px 15px;z-index:9999;}.clearfix:after{content: ".";display:block;height:0;clear:both;visibility: hidden;}.clearfix {display: inline-block;}* html .clearfix {height:1%;}.clearfix {display:block;}

/*{Modulo App Fim ModalNovo}*/



/*{Modulo App Inicio AdvancedSearch}*/

/* busca avancada */
:root {
  --advanced-search-prods-title-line-clamp: 3;
}

.input-busca::selection {
  background-color: #fff;
  color: #999;
}

/* "X" button for clearing the input */
.advanced-search-clear-button {
  position: absolute !important;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 3;
  color: #999;
  align-items: center;
  justify-content: center;
  width: 2rem;
}

.advanced-search-clear-button:hover {
  color: #333;
}

/* fundo escuro */
#advanced-search-bg {
  width: 100%;
  height: 100vh;
  background-color: #222;
  opacity: 0.7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  animation: advancedSearchBg 300ms ease;
}

@keyframes advancedSearchBg {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.7;
  }
}

#advanced-search-bg[advanced-search-bg-active="false"] {
  display: none;
}

#advanced-search-bg[advanced-search-bg-active="true"] {
  display: flex;
}

/* Results div styling */
#advanced-search-results {
  flex-direction: column;
  display: none;
  /* Initially hidden */
  margin-top: -1rem;
  background-color: #fff;
  position: absolute;
  /* To position below the input */
  z-index: 1000;
  /* Stay above other elements */
  width: 100%;
  /* Same width as input */
  left: 0;
  padding: 1rem 0;
  top: 100%;
  box-shadow: 0 5px 7px rgba(0, 0, 0, .2);
  border-radius: .5rem;
  animation: advancedSearchResultFadeIn 300ms ease;
}

#advanced-search-results[search-suggestions-type="historySearch"] .advanced-search-suggestion>span {
  display: flex;
  align-items: center;
}

#advanced-search-results[search-suggestions-type="historySearch"] .advanced-search-suggestion>span {
  height: 1.2rem;
  width: 1.2rem;
  fill: #999 !important;
  color: #999 !important;
}

#advanced-search-results[search-suggestions-type="historySearch"] .advanced-search-suggestion>svg {
  width: 1.2rem;
  fill: #999 !important;
  color: #999 !important;
}

#advanced-search-results[search-suggestions-type="historySearch"] .advanced-search-suggestion>span svg path {
  stroke: #999;
}

@keyframes advancedSearchResultFadeIn {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#advanced-search-results[search-suggestions-type="suggestionSearch"] {
  min-width: 70rem;
}

#advanced-search-results .active-search {
  background-color: #d3d3d3;
}

#advanced-search-results p {
  margin: 0;
  font-size: 1.4rem;
  color: #222;
  width: 100%;
}

#advanced-search-results p[suspension-points="true"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.advanced-search-results-container {
  display: flex;
}

#advanced-search-results[show-adv-suggestions="false"] .advanced-search-suggestions-container {
  display: none;
}

#advanced-search-results[show-adv-products="false"] {
  min-width: fit-content;
}

#advanced-search-results[show-adv-products="false"] .advanced-search-products-container {
  display: none;
}

#advanced-search-results[show-adv-products="false"] .advanced-search-suggestions-container {
  border-right: none;
  width: 100%;
}

.advanced-search-results-container h2,
#advanced-search-results h2 {
  margin-bottom: 2rem;
  font-weight: 600;
  padding: 0 2rem;
}

.advanced-search-suggestion {
  transition: 300ms ease;
  cursor: pointer;
}

.advanced-search-suggestion:hover {
  background-color: #d3d3d3;
}

.advanced-search-suggestions-options-container[suggestion-scroll="on"] {
  overflow-y: scroll;
}

.advanced-search-suggestions-options-container {
  min-width: 25rem;
  max-height: 34rem;
}

.advanced-search-suggestions-container {
  border-right: 1px solid #ccc;
}

.advanced-search-suggestions-container .advanced-search-suggestions-options {
  display: flex;
  flex-direction: column;
}

.advanced-search-suggestions {
  flex: 1;
}

.no-prods-founded {
  padding: 0 2rem;
}

.advanced-search-products-container {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  min-height: 44.3rem;
  height: fit-content;
}

.advanced-search-products {
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
  margin: 0 2rem;
  margin-bottom: 2rem;
  min-height: 33rem;
}

.advanced-search-product .product-sugestion__image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--photowrap);
}

.advanced-search-product .product-sugestion__image-container img {
  height: unset;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  transition: 200ms ease, font-size 0s;
  position: absolute;
}

.advanced-search-products[products-scroll="off"] {
  max-width: initial;
  padding-bottom: 0;
}

.advanced-search-products[products-scroll="on"] {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.advanced-search-product {
  padding: 1rem;
  text-align: center;
  min-width: 20rem;
  padding-bottom: 2rem;
  position: relative;
  border-radius: .5rem;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1) !important;
  max-width: 20rem;
  min-height: 30rem;
}

.advanced-search-prods-title {
  display: -webkit-box;
  -webkit-line-clamp: var(--prods-title-line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.advanced-search-product .seached-prod-overlay {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: pointer;
}

.advanced-search-product img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: .5rem;
}

.advanced-search-product a {
  text-decoration: none;
  color: #333;
}

.advanced-search-products-container .view-all-results-link {
  padding: 0 2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-decoration: underline;
  color: #3483FA;
  min-height: 4.4rem;
  height: 100%;
}

.advanced-search-product a:hover {
  text-decoration: underline;
}

#advanced-search-results .titleModulo {
  font-weight: 600;
  padding: .5rem 2rem;
  font-size: 1.4rem;
}

#advanced-search-results .advanced-search-suggestion {
  padding: 0.5rem 2rem;
  align-items: center;
  display: flex;
  gap: 1rem;
}

.no-recent-search,
.advanced-search-searching-error {
  padding: 0 2rem;
}

.advanced-search-suggestions-options-container::-webkit-scrollbar,
.advanced-search-products::-webkit-scrollbar {
  height: 1rem;
  width: 1rem;
}

.advanced-search-suggestions-options-container::-webkit-scrollbar-track,
.advanced-search-products::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.25rem rgb(211, 211, 211);
  border-radius: 0.5rem;
  border: 1rem solid #dfdfdf;
}

.advanced-search-suggestions-options-container::-webkit-scrollbar-thumb,
.advanced-search-products::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 0.5rem;
}

.advanced-search-suggestions-options-container::-webkit-scrollbar-thumb:hover,
.advanced-search-products::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.advanced-search-suggestions-container[suggestion-scroll="on"] {
  border-right: none;
}

/* loader */

.advanced-search-loading-products-container {
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
}

.advanced-search-loading-products {
  width: 48px;
  height: 48px;
  border: 5px solid #ccc;
  border-bottom-color: #444;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: advancedSearchRotation 1s linear infinite;
  position: initial;
}

@keyframes advancedSearchRotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* css responsivo */
@media screen and (max-width: 1000px) {
  #advanced-search-results {
    left: initial;
  }
}

@media screen and (max-width: 800px) {
  #advanced-search-results[search-suggestions-type="suggestionSearch"] {
    min-width: 100%;
  }

  #advanced-search-results {
    min-width: 100%;
    width: 90vw;
    right: 0;
    left: initial;
    text-align: left;
  }

  .advanced-search-results-container {
    flex-direction: column;
  }

  #advanced-search-results .titleModulo {
    text-align: left;
  }

  .advanced-search-suggestions-options-container[suggestion-scroll="on"] {
    overflow: hidden;
  }
}

.advanced-search-suggestions-options svg {
  width: 1.2rem;
  fill: #999 !important;
  color: #999 !important;
}

.recognition-btn {
  z-index: 3;
  cursor: pointer;
  position: absolute !important;
  display: flex;
  left: 1rem;
  align-items: center;
  justify-content: center;
}

header .search-header .recognition-btn svg {
  fill: #999;
  color: #999;
}

header .search-header .mic-btn-listening svg {
  animation: mic-btn-listening-blink 1s infinite linear;
}

@keyframes mic-btn-listening-blink {

  0%,
  100% {
    fill: red;
  }

  50% {
    fill: #999;
  }
}

/*{Modulo App Fim AdvancedSearch}*/



/*{Modulo App Inicio WsReviews}*/

:root{
    --main-text-color: #FFA200
}

#clients-review h2,
#clients-review p,
#clients-review span{
    line-height: 150%;
}

.ws-review-star-container {
    display: flex;
    height: fit-content;
    gap: .3rem;
    width: fit-content;
}

.ws-review-star-container:empty{
    display: none;
}

.ws-review-star-container .allreviews{
    line-height: 1.5;
    color: #999;
    font-size: 1.2rem;
}

.ws-review-star-container span svg {
    transition: 1000ms ease;
    transform-origin: left;
}

.stars-margin:not(:empty){
    margin-bottom: 2rem;
}

#link-to-reviews .fill-star,
#link-to-reviews .half-star,
#link-to-reviews .empty-star{
    height: fit-content;
    display: flex;
}

.fill-star svg {
    fill: #ffd600;
    height: 1.7rem;
    width: 1.7rem;
}

.half-star svg {
    fill: url(#half-star-ws-review);
    height: 1.7rem
}

.empty-star svg {
    fill: #e8e8e8;
    height: 1.7rem
}

#half-star-ws-review .alt-main {
    transition: 1s ease;
    stop-color: #ffd600;
    transform-origin: left;
}

#half-star-ws-review .alt-last {
    stop-color: #e8e8e8;
}

[data-wsjs-prod-template="ws-review"] .fill-star svg,
[data-wsjs-prod-template="ws-review"] #half-star-ws-review .alt-main,
[data-wsjs-prod-template="ws-review"] .last-star svg {
    stop-color: #e8e8e8;
    fill:  #e8e8e8;
}

.clients-review{
    background-color: #F5F5F5;
    padding: 2rem;
}

.clients-review:empty{
    display: none;
}

.prod-side-container > .prod-main-block-descriptions {
    margin-bottom: 2rem ;
}

.prod-side-container > .prod-main-block-descriptions {
    margin-bottom: 2rem ;
}

[data-wsjs-review-id]:not(:last-child){
    padding-bottom: 2rem;
    border-bottom: 1px solid #ccc;
}


[data-wsjs-review-id]:not(:first-child) {
    padding-top: 2rem;
}

.first-half > .stars > span > span > svg {
    height: 1.7rem;
}

.first-half .customer-infos__date{
    color: #666;
    font-size: 1.2rem;
}

.customer-infos__name{
    font-weight: bold;
}

#clients-average-container > .fill-star > span > svg,
#clients-average-container > .empty-star > span > svg, 
#clients-average-container > .half-star > span > svg {
    height: 2.3rem;
}

#clients-average-container {
    scroll-margin-top: 16.8rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: space-between;
}

#clients-review-container{
    height: fit-content;
    max-height: 50rem;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 2rem;
    background-color: #fff;
    border-radius: 1rem;
}

#clients-review-container::-webkit-scrollbar {
    width: .5rem;
    background-color: #ccc;
}
 
#clients-review-container::-webkit-scrollbar-thumb {
  background-color: #aaa;
}

.first-half {
    width: 100%;
    row-gap: 1rem;
    display: grid;
    justify-content: flex-start;
}

.first-half > span {
    text-align: left;
    width: fit-content;
    grid-row: 2;
}

.first-half > .stars {
    display: flex;
    justify-content: flex-start;
    gap: .3rem;
}

.first-half > .customer-infos{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.last-half {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

[data-wsjs-review-id]{
    flex-direction: column;
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* denunciar comentario */
.report-options {
    position: relative;
    height: fit-content;
}

.report-icon {
    padding: 1rem;
    cursor: pointer;
}

.report-icon > svg{
    height: 1.5rem;
}

.report-btn {
    height: fit-content;
    width: fit-content;
    position: absolute;
    display: none;
    right: 1rem;
    background-color: #fff;
    border-radius: .5rem;
    padding: .5rem;
    border: 1px solid #DDD;
    box-shadow: 1px 1px 12px #00000029;
}

.report-combobox {
    cursor: pointer;
    right: 1rem;
    width: max-content;
    color: #3e3e3e;
    padding: 1rem;
}

li[report-options]{
    user-select: none;
    cursor: pointer;
    white-space: pre;
}

.report-combobox-btn{
    display: none;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: .5rem;
    width: fit-content;
    float: right;
    position: absolute;
    top: 0;
    border: 1px solid #DDD;
    box-shadow: 1px 1px 12px #00000029;
    padding: 1rem;
    right: 0;
    animation: slide 100ms;
}

.report-option-btn-active {
    display: flex;
}

@keyframes slide {
    0%{
        right: -160%
    }
    100% {
        right: 0
    }
}

.send-report {
    top: 6.5rem;
    background-color: #fff;
    width: max-content;
    right: 1rem;
    padding: .5rem 2rem;
    border: 1px solid #000;
    cursor: pointer;
}

.active-report-btn {
    display: block;
}

.logged-user {
    background-color: #3e3e3e;
    border: none;
    border-radius: .5rem;
    color: #fff;
}

/* fim denunciar comentario */

#client-average-data .nota{
    font-size: 4.8rem;
    font-weight: bold;
}

.average-all-stars {
    display: flex;
    gap: .3rem;
}

div#clients-average-container-data {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#link-to-reviews {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* barra de progresso */

#clients-average-graphic {
    display: flex;
    gap: .5rem;
}

#all-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
}

#all-avaliations-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#all-stars-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#all-stars-progress-bar > span {
    white-space: nowrap;
}


div.progress {
    width: 25.6rem;
    height: .5rem;
    background-color: #ccc;
    border-radius: .25rem;
}

.progress-bar {
    width: var(--percentage);
    background-color: #3e3e3e;
    height: 100%;
    border-radius: .25rem;
}

/* fim barra de progress */

/* estrelas na desc do produto */
#stars-in-prod-desc{
    display: flex;
    gap: .3rem;
    height: fit-content;
}
#stars-in-prod-desc-qnty{
    font-size: 1.2rem;
    margin-bottom: 0px;
}
[data-wsjs-product="star-container-product-description"] {
    display: flex;
    gap: .6rem;
}
#stars-in-prod-desc p {
    line-height: 1.4;
}

/* fim estrelas na desc do produto */

/* likes e deslikes*/
.comentary-and-likes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.comentary-and-likes > p{
    word-break: break-all; 
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.likes-container {
    display: flex;
    gap: 1.4rem;
    padding: 1rem;
    background-color: #f1f1f1
}

.likes > svg{
    height: 1.5rem;
}

.likes-container .cls-1{
    fill: #999;
}


.likes,
.deslikes{
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 1.2rem;
    gap: .5rem;
}

.deslikes > svg {
    cursor: pointer;
    height: 1.7rem;
    transform: rotate(180deg);
}

.liked svg .cls-1 {
    fill: green;
}
/* fim likes e deslikes*/

/* filtros */
.selected-filter{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.5rem;
    gap: .3rem;
}

.selected-filter svg{
    transform: rotate(90deg);
    pointer-events: all;
    height: 1.5rem;
    width: 1.5rem;
}

#clients-review-filter {
    padding-bottom: 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.reviews-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #BDBDBD;
    height: 4.3rem;
    cursor: pointer;
    user-select: none;
    gap: 1rem;
    border-radius: .5rem;
}    

.reviews-filters-container {
    border: 1px solid #D1D1D1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    width: 14rem;
    height: 4rem;
    padding: 0 1rem;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    position: relative;
    background-position: calc(100% - 5px) center !important;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z'/></svg>") no-repeat;
    background-color: #fff;
    background-size: 2.4rem;
}

@keyframes opacityTransition {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.reviews-filters-options {
    color: #232323;
    text-align: left;
    padding: 1rem 1.5rem;
    width: 100%;
    transition: 300ms ease;
}

.filter-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* fim filtros */

/* exibir mais review */
#clients-review-container > .button-third {
    margin: auto;
    margin-top: 2rem;
    background: #fff; color: #444; 
    padding: 1rem 3rem;
    border: 1px solid #DDD;
    border-radius: 0.5rem; 
    box-shadow: 2px 2px 5px rgb(0, 0, 0, 10%);
}

#clients-review-container > .loader-container {
    z-index: 2;
    position: relative;
    height: 100%;
    width: 100%;
}
/* fim exibicao dos demais reviews */

/* home slider */ 
[data-wsjs-sectype="reviews"]{
    display: flex;
    justify-content: center;
}

[data-wsjs-sectype="reviews"] .container{
    display: grid;
    row-gap: 3rem;
}

[data-wsjs-sectype="reviews"] h2 {
    text-align: center;
}

[data-wsjs-sectype="reviews"] .store-review-slider{
    width: 100%;
    display: grid;
    row-gap: 2rem;
    column-gap: 2rem;
    min-width: 100%;
}

[data-wsjs-sectype="reviews"] .no-slider{
    display: flex;
    justify-content: center;
}

[data-wsjs-sectype="reviews"] .store-review-slider .keen-slider{
    margin: 0 auto;
}


@media (max-width: 800px) {
    [data-wsjs-sectype="reviews"] .store-review-slider .keen-slider{
        justify-content: initial;
    }
}

.store-review-slider .arrow--prev {
    grid-column: 1;
    grid-row: 2;
    align-self: center
}

.store-review-slider .arrow--next {
    grid-column: 3;
    grid-row: 2;
    align-self: center
}

.store-review-slider .arrow--prev + .keen-slider {
    grid-column: 2;
    grid-row: 2;
}

.store-review-slider .arrow--next + .dots {
    grid-column: 2;
    grid-row: 3;
}

.store-review-slider .shop-reviews-title{
    grid-column: 2;
    justify-self: center;
    margin-bottom: 2rem;
}
.store-review-slider .keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{
    display: flex;
    justify-content: center;
}
.store-review-slider div[shop-review]{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 22rem;
    padding: 2rem;
    width: 25rem;
    max-width: 25rem;
    background-color: #F2F2F2;
    border-radius: .5rem;
    cursor: pointer;
    position: relative;
}

.iframe-redirect{
    position: absolute;
    height: 100%;
    width: 100%;
}

.store-review-slider div[shop-review] .lower-half-infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.store-review-slider div[shop-review] .lower-half-infos .review-stars{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: .3rem;
}
.store-review-slider div[shop-review] .lower-half-infos p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.store-review-slider div[shop-review] .lower-half-infos .shop-review__date{
    font-size: 1.2rem;
}

.store-review-slider div[shop-review] .lower-half-infos .customer-name {
    font-weight: bold;
    text-transform: capitalize;
}

.store-review-slider div[shop-review] .upper-half-infos:empty{
    display: none;
}

.store-review-slider div[shop-review] .upper-half-infos p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.store-review-slider .todas-avaliacoes {
    grid-column: 2;
    justify-self: center;
    display: none;
}

.store-reviews{
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    display: none;
}
.store-reviews > iframe {
    width: 100%;
    height: 100%;
}

.store-reviews__close{
    position: absolute;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    cursor: pointer;
    right: 3rem;
    top: 3rem;
    user-select: none;
}
.store-reviews__close > span{
    display: flex;
}
/* fim home slider */ 

.loader_container{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

div.hideLoader{
    display: none;
}



.reviews_loader {
    width: 48px;
    height: 48px;
    border: 5px solid #444444;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

@media (max-width: 600px) {
    #clients-average-container-data {
        margin-bottom: 1rem;
    }
    #clients-average-container{
        flex-direction: column;
    }
    #clients-average-graphic{
        justify-content: center;
    }
    #average-all-stars{
        display: flex;
        gap: 0.3rem;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 1rem;
    }
  }

/*{Modulo App Fim WsReviews}*/



/*{Modulo App Inicio Compre pelo Whatsapp}*/

.wpp-button-custom {
  background-color: transparent;
  color: #25d366;
  border: 1px solid #25d366;
  width: 100%;
  display: flex;
  float: left;
  line-height: 4.3rem;
  text-align: center;
  justify-content: center;
  align-content: center;
  align-items: center;
  transition: 0.25s ease;
}

.wpp-button-custom:hover {
  background-color: #25d366;
  color: white;
}

.wpp-button-custom span {
  margin-left: .75rem;
}

.wpp-button-custom svg {
  fill: #25d366;
  transition: .25s ease;
  transform: scale(.8);
  transform-origin: center;
}

.wpp-button-custom:hover svg {
  fill: white;
}

/*{Modulo App Fim Compre pelo Whatsapp}*/



/*{Modulo App Inicio PopupNaoSaia}*/


#popupOverlayDontLeave {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#popupDontLeave {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border-radius: 1rem;
}

#popupDontLeave .popupDontLeave__img-container img{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

#popupDontLeave[dont-leave-direction] {
    display: flex;
}

  /* configuracoes de imagem para esquerda   */
#popupDontLeave[dont-leave-direction="L"] {
    flex-direction: row;
}

#popupDontLeave[dont-leave-direction="L"] .popupDontLeave__img-container{
    border-radius: 1rem 0 0 1rem;
}

#popupDontLeave[dont-leave-direction="L"] .popupDontLeave__infos {
    border-radius: 0 1rem 1rem 0;
}

  /* configuracoes de imagem para direita   */
#popupDontLeave[dont-leave-direction="R"] {
    flex-direction: row-reverse;
}

#popupDontLeave[dont-leave-direction="R"] .popupDontLeave__img-container{
    border-radius: 0 1rem 1rem 0;
}

#popupDontLeave[dont-leave-direction="R"] .popupDontLeave__infos {
    border-radius: 1rem 0 0 1rem;
}

  /* configuracoes de imagem para cima   */
#popupDontLeave[dont-leave-direction="T"] {
    flex-direction: column;
}

#popupDontLeave[dont-leave-direction="T"] .popupDontLeave__img-container{
    border-radius: 1rem 1rem 0 0;
}

#popupDontLeave[dont-leave-direction="T"] .popupDontLeave__infos {
    border-radius: 0 0 1rem 1rem;
}

 /* configuracoes de imagem para baixo   */
#popupDontLeave[dont-leave-direction="B"] {
    flex-direction: column-reverse;
}

#popupDontLeave[dont-leave-direction="B"] .popupDontLeave__img-container{
    border-radius: 0 0 1rem 1rem;
}

#popupDontLeave[dont-leave-direction="B"] .popupDontLeave__infos {
    border-radius: 1rem 1rem 0 0;
}


/* botao para fechar   */
#Dontleave-close {
    background-color: #f6f6f6;
    color: #333333;
    font-weight: bold;
    font-size: 30px;
    border: none;
    position: absolute;
    right: -1.5rem;
    top: -1.5rem;
    border-radius: 100%;
    aspect-ratio: 1;
    box-shadow: 5px 0 10px #222222;
    padding: 0;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    z-index: 1;
}

#popupDontLeave[dont-leave-direction] .popupDontLeave__img-container {
    position: relative;
    overflow: hidden;
}

#popupDontLeave[dont-leave-direction="R"] .popupDontLeave__img-container,
#popupDontLeave[dont-leave-direction="L"] .popupDontLeave__img-container {
    display: flex;
    width: 27rem;
    height: auto;
    max-width: 27rem;
}

#popupDontLeave[dont-leave-direction="T"] .popupDontLeave__img-container,
#popupDontLeave[dont-leave-direction="B"] .popupDontLeave__img-container {
    height: 15rem;
    width: 100%;
}

#popupDontLeave .popupDontLeave__infos {
    padding: 2rem 3rem;
    background-color: #f6f6f6;
    max-width: 36rem;
    min-height: 42rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#popupDontLeave .popupDontLeave__infos .modal-header {
    text-align: center;
}

#popupDontLeave .popupDontLeave__infos .modal-header h4 {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 40px;
    line-height: 30px;
    margin-bottom: 1.2rem;  
}

#popupDontLeave .popupDontLeave__infos .modal-header p {
    font-size: 16px;
    padding: 0 20px;
    color: #333333;
    margin-bottom: 3rem;
}

#popupDontLeave .popupDontLeave__infos .popupDontLeave__btn-container #popupDontLeaveCupomButton:hover {
    box-shadow: 0 0 4px #666666;
}

#popupDontLeave .popupDontLeave__infos .popupDontLeave__btn-container #popupDontLeaveCupomButton{
    font-size: 12px;
    font-weight: bold;
    padding: 6px 20px !important;
    text-transform: uppercase;
    border-radius: 0.5rem;
    border: none;
    background-color: #222222;
    color: white;
    cursor: pointer;
}

#popupDontLeave .popupDontLeave__infos .popupDontLeave__btn-container .contentButtonDontLeave {
    text-align: center;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.2rem;
}

#popupDontLeave .popupDontLeave__infos .popupDontLeave__btn-container .contentButtonDontLeave > div {
    display: flex;
    gap: 1rem;
}

#popupDontLeave .popupDontLeave__infos .popupDontLeave__btn-container .contentButtonDontLeave > div > span {
    font-weight: 600;
    font-size: 2rem;
}

#popupDontLeave .popupDontLeave__infos .popupDontLeave__btn-container #popupDontLeavebuttonCopyCupom {
    border: none;
    background-color: transparent;
    padding: 0;
    display: flex;
    cursor: pointer;
    align-items: center;
}

#popupDontLeave .popupDontLeave__infos .popupDontLeave__btn-container #popupDontLeavebuttonCopyCupom svg {
    fill: var(--bodyColor);
    width: 1.8rem;
    height: 1.8rem;
}

a#cupomButtonDontleave {
    font-size: 12px;
    font-weight: bold;
    padding: 6px 20px !important;
    text-transform: uppercase;
    border-radius: 0.5rem;
    border: none;
    background-color: #222222;
    color: white;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes downNewsDontLeave {
    from {
      transform: translate(-50%, -100%);
    }
  
    to {
      transform: translate(-50%, -50%);
    }
  }

  #popupDontLeave {
    animation: fadeIn 1s ease, downNewsDontLeave 0.7s ease;
  }

  #popupOverlayDontLeave {
    animation: fadeIn 1s ease;
  }


  #popupDontLeave.removeAnimationDontleave {
    animation: DontleavefadeInRemove 1s ease, DontleavedownRemove 0.7s ease ;
  }
  
  #popupOverlayDontLeave.removeAnimationDontleave {
    animation: DontleavefadeInRemove 1s ease;
  }
  
  @keyframes DontleavefadeInRemove {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @keyframes DontleavedownRemove {
    from {
      transform: translate(-50%, -50%);
    }
  
    to {
      transform: translate(-50%, -100%);
    }
  } 

  [tooltip] {
    position: relative;
  }
  
  [tooltip]::before,
  [tooltip]::after {
    text-transform: none; 
    font-size: .9em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
  }
  [tooltip]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1001; 
  }
  [tooltip]::after {
    content: attr(tooltip);
    text-align: center;
    min-width: 13rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
    z-index: 1000;
  }
  
  [tooltip][tooltip-mode="on"]::before,
  [tooltip][tooltip-mode="on"]::after {
    display: block;
    animation: tooltips-horz 300ms ease-out forwards;
  }

  [tooltip][tooltip-mode="off"]::before,
  [tooltip][tooltip-mode="off"]::after {
    animation: tooltips-horz-off 300ms ease-out forwards;
    display: block;
  }
  
  [tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
  }
  [tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
  }
  
  @keyframes tooltips-horz {
    to {
      opacity: .9;
      transform: translate(0, -50%);
    }
  }

  @keyframes tooltips-horz-off {

    from {
      opacity: 1;
      transform: translate(0, -50%);
    }

    to {
      opacity: 0;
    }
  }
  

/*{Modulo App Fim PopupNaoSaia}*/



/*{Modulo App Inicio Favoritos}*/

@media screen {

    .prod-favorite-link {
        position: absolute;
        right: 5px;
        top: 5px;
        background: #e9e9e9;
        border-radius: 50%;
        padding: 7px 10px;
        padding-bottom:5px;
    }

        .prod-favorite-link:before {
            content: '\f08a';
            font-family: FontAwesome;
            font-size: 2rem;
            color: #000;
            opacity: 0.5;
        }

        .prod-favorite-link:hover:before, .prod-favorite-link.active:before {
            content: '\f004';
            color: #da0606;
        }

        .prod-favorite-link.active:before {
            opacity: 1;
        }

    .prod-favorite-page-prod {
        font-size: 14px;
        position: absolute;
        right: 30px;
        top: 0px;
    }

    .prod-favorite-page-prod:before {
        font-size: 15px;
    }

}


/*{Modulo App Fim Favoritos}*/



/*{Modulo App Inicio CookieConfirm}*/



/*ACEITE COOKIES LOJA*/

#aceite_privacidade {
 position: fixed;
 margin: 30px 5%;
 padding: 20px;
 border-radius: 10px;
 bottom: 0;
 background-color: #fff;
 width: 90%;
 z-index: 99;
 box-shadow: 0 0 10px #ccc;
 display: none;
}

@media screen and (min-width:900px) {

.aceite_privacidade_ask_cookie .row {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

}

@media screen and (min-width:1200px) {
 #aceite_privacidade {
  margin: 30px 15%;
  width: 70%
 }
}

@media screen and (min-width:1440px) {
 #aceite_privacidade {
  margin: 30px 20%;
  width: 60%
 }
}

#aceite_privacidade p {
 margin: 0;
 line-height: 22px;
 font-size: 12px
}

#aceite_privacidade a {
 color: #f70c0c;
 font-weight: 700
}

 #aceite_privacidade button.btn {
  color: #333;
  border: 1px solid #333;
  padding: 10px 40px;
  float: right;
  max-width: 100%;
  border-radius: 10px;
  background: #FFF;
 }

  #aceite_privacidade button.btn:hover {
   background: #333;
   color: #fff;
  }

@media screen and (max-width:992px) {
 #aceite_privacidade {
  text-align: center
 }

  #aceite_privacidade button.btn {
   margin-top: 20px;
   float: none
  }
}

@media screen and (max-width:750px) {

  #aceite_privacidade p {
   margin-bottom: 25px;
  }
}

/*{Modulo App Fim CookieConfirm}*/



/*{Modulo App Inicio Whatsapp}*/

.whats-ws-link {
    position: fixed;
    display: block;
    width: 52px;
    height: 50px;
    border-radius: 50%;
    background-color: #47C756;
    color: #FFF !important;
    text-align: center;
    font-size: 34px;
    box-sizing: border-box;
    /*border: 2px solid #FFF;*/
    box-shadow: 3px 0px 10px RGBA(0,0,0,0.3);
    z-index: 1000;
}

.whatslinkID {
    right: 20px;
    bottom: 20px;
}

.whatslinkIE {
    left: 20px;
    bottom: 20px;
}

.whatslinkSD {
    right: 10px;
    top: 20px;
}

.whatslinkSE {
    left: 20px;
    top: 20px;
}

.whatslinkCE {
    left: 20px;
    bottom: 50%;
}

.whatslinkCD {
    right: 20px;
    bottom: 50%;
}

.whats-ws-link:hover {
    color: #FFF;
}


.whats-ws-link svg {
    fill: #FFF;
    width: 60%;
    margin: 7px auto;
}

/*{Modulo App Fim Whatsapp}*/



/*CSS VarDadosLayout*/

:root {
  --radius-custom: 10px;
}

/* Banners */

/* Fim Banners */

/* Topo Rodapé e Botões Principais */
header .search-header input,
.login-options-container .login-options-button,
.icon-ws,
.newsletter-holder #newsletter input,
.login-options-list,
.cart-holder.float {
  border-radius: var(--radius-custom);
}

.login-options-button-arrow {
  transform: scale(.8) rotateZ(90deg);
}

/* Outro teste */
header .header-top {
  transition: .2s ease, font-size 0s;
}

/* Outro teste do editor */
header.float-active .header-top {
  box-shadow: 0 0 10px rgba(0 0 0 / 20%);
}

header .logo-header {
  margin: 1rem;
  height: 10rem;
}

header .search-header input,
.login-options-container .login-options-button {
  border: none;
}

.login-options-container .login-options-button {
  justify-content:center;
}

/* Fim Topo Rodapé e Botões Principais */

/* Listagem */
.combo-ordem,
.category-pagination-values span:first-child,
#banner-category_description,
.filter-container > * {
  border-radius: var(--radius-custom);
}
/* Fim Listagem */

/* Começo Pag Prod */
.prod-block-container,
.prod-main-block-descriptions,
.prod-quantity,
#LV_DIV_GENERO,
#LV_DIV_GENERO_2,
#LV_DIV_GENERO_3,
.LV_CAMPOS_ADD_PROD input,
.prod-shipping-form input[type="text"],
*[data-wsjs-product="dots"] .keen-slider .keen-slider__slide > div,
select.LVCamposAddTexto {
  border-radius: var(--radius-custom);
}

.prod-quantity span:last-child {
  border-bottom-right-radius: var(--radius-custom);
  border-top-right-radius: var(--radius-custom);
}

.prod-quantity span:first-child {
  border-bottom-left-radius: var(--radius-custom);
  border-top-left-radius: var(--radius-custom);
}
/* Fim Pag Prod */

/* Prod Template */
.prod-showcase-info span.prod-unavaliable-message {
  border-radius: var(--radius-custom);
}

.prod-tags {
  padding: 0 1rem;
  border-radius: 10rem;
}

/* Fim Prod Template */

/* Página Institucional */
.institutional-menu-nav, 
.others-pages-container .content {
  border-radius: var(--radius-custom);
}
/* Fim Página Institucional */

/* Começo Página de Contato */
.contact-block,
.blog-page-container .blog-list-holder,
.blog-page-container .blog-article-holder {
  border-radius: var(--radius-custom);
}

.contact-container input,
.contact-container textarea {
  border-radius: var(--radius-custom);
}

/* Fim Página de Contato */
.prod-showcase-holder {
  transition: .3s ease, font-size 0s;
  border-radius: var(--radius-custom);
  border: .1rem solid transparent;
}

.prod-showcase-holder:hover {
  border: .1rem solid #f5f5f5!important;
}

.prod-showcase-holder:hover .prod-showcase-info-button > a {
  opacity: 1;
}

.prod-showcase-info .prod-showcase-price-container {
  min-height: calc(2 * 1.2 * 1.4rem  + 2.7rem);
}

.prod-showcase-holder .prod-showcase-info-button {
  margin-top: 2rem;
}

.prod-showcase-holder .prod-showcase-info-button > a {
  width: 100%;
  transition: .3s ease, font-size 0s;
} 

.prod-price-main .prod-price-sell {
  font-size: 2.8rem;
  line-height: 4.8rem;
}

.prod-showcase-price > .prod-showcase-price-sell:not(.prod-unavaliable-message) {
  font-size: 1.8rem;
  line-height: 2.7rem;
}

.prod-showcase-price > .prod-showcase-price-sell:not(.prod-unavaliable-message) .price-startingOff {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: normal;
}

.prod-buttons-container .button-main {
  height: 6rem;
}

.prod-showcase-info .prod-showcase-info-name {
  line-height: 2rem;
  min-height: calc(2rem * 3);
}

.login-options-container .login-options-list,
body .LV_UL_BUSCA_AJAX,
.float-footer-container,
.cart-holder.float {
  box-shadow: 0.3rem 0.3rem 1rem rgb(0 0 0 / 30%);
  border: none;
}

footer .contact-footer li a{
  overflow-wrap: anywhere;
}

.prod-features-container tr td:first-child {
  font-weight: bold;
}

.banner-holder .arrow {
  opacity: 0;
}

.banner-holder:hover .arrow {
  opacity: 1;
}

.nav-header .nav-menu-list > li:hover > .nav-menu-main,
.nav-header .nav-menu-list > li:hover > .nav-menu-megamenu-container {
  margin-top: 0;
} 

.nav-menu-list .dpt-0 > .nav-menu-main,
.nav-menu-list .dpt-0 > .nav-menu-megamenu-container {
  margin-top: 4rem;
}

.mobile-menu-block .nav-menu-list .dpt-0 > .nav-menu-main,
.mobile-menu-block .nav-menu-list .dpt-0 > .nav-menu-megamenu-container {
  margin-top: 0;
}

.login-options-container:hover .login-options-list {
  margin-top: 0;
}

.login-options-container .login-options-list {
  margin-top: 4rem;
}

.cart-header:hover .cart-holder.float {
  margin-top: 0;
}

.cart-holder.float {
  margin-top: 5rem;
}

.cart-prod-counter {
  top: -.8rem;
  right: -.8rem;
}

.cart-prod-counter.mobile {
  top: .3rem;
  right: .3rem;
}

footer {
  padding: 100px 0;
}

.client-header [data-wsjs-icon="user"] svg,
.favorite-header [data-wsjs-icon="favorite"] svg,
.cart-header [data-wsjs-icon="cart"] svg,
.mobile-menu-button [data-wsjs-icon] svg,
.dpt-0 > .nav-menu-hiperlink > [data-wsjs-icon] svg {
  width: 1.7rem;
  height: 1.7rem;
}

.favorite-header {
  border-radius: var(--radius-custom);
}

.favorite-header, .favorite-header [data-wsjs-icon] svg {
  transition: .3s ease, font-size 0s;
}

.favorite-header:hover {
  background-color: #f5f5f5;
}

.favorite-header:hover > [data-wsjs-icon] svg {
  fill: #cc0000;
}

.client-header .login-options-arrow-span svg {
  transform: scale(.7);
}

.nav-menu-list .dpt-1 .nav-menu-hiperlink svg {
  width: 1.05rem;
  height: 1.05rem;
}

.prod-list-empty {
  border-radius: var(--radius-custom);
}

/* Teste */
/* Migração v3: bandeiras de pagamento do rodapé — impede que span[data-wsjs-icon]{width:1.5rem} do wsapi3-main anule o aspect-ratio do selo */
footer .payment-methods-list span { width: auto; }

/* Migração v3 — CLS: a API devolve width/height = 0 para o banner Full, então o SSR
   (banners-server-render.service) chuta <img> 1500x300 (proporção 5:1). A imagem real
   desta loja é 1895x784 (~2,42:1) e "estica" ~285px ao carregar, empurrando condições +
   carrossel + rodapé pra baixo (era o shift de ~0,32). Fixamos a proporção real do slot
   Full pra reservar a altura certa desde a 1ª pintura. Origem: Lighthouse layout-shifts. */
.banner-full-section [data-wsjs-banner="full"] img,
.banner-full-section [data-wsjs-banner="full"] .keen-slider__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1895 / 784;
  object-fit: cover;
}

/* Otimização (skill CLS/a11y) — contraste WCAG AA em elementos neutros (não é a cor da marca):
   - breadcrumb / resultado de busca / paginação: #999 sobre branco = ~2,9:1 -> #6f6f6f (~4,9:1)
   - .tag-link (links de fabricante / "ver descrição" / correios na pág. de produto):
     #1b7ff4 sobre #f5f5f5 = ~3,4:1 -> #1a5fb4 (>5:1 sobre branco e sobre #f5f5f5)
   Origem: Lighthouse color-contrast nas páginas de listagem e produto. */
.breadcrumb-container,
.searchResults-container,
.category-pagination-container {
  color: #6f6f6f;
}

.tag-link {
  color: #1a5fb4;
}

/* Contraste WCAG AA (aprovado): o vermelho da marca #F84343 + texto branco = 3,6:1 (reprova).
   Escurecido para #E02B2B (~4,6:1) nas superfícies com texto branco por cima: barra do menu,
   painéis do mega menu, rodapé e contador do carrinho. Origem: PageSpeed color-contrast. */
header .header-bottom,
.nav-header .nav-menu-list .dpt-0 > .nav-menu-main,
.nav-header .nav-menu-list .dpt-0 > .nav-menu-megamenu-container,
.nav-menu-list .dpt-0 > .nav-menu-main,
.nav-menu-list .dpt-0 > .nav-menu-megamenu-container,
.nav-menu-list .nav-menu-sub-container,
.button-second,
.LV_div_sem_produtos a,
footer {
  background-color: #E02B2B;
}

.cart-prod-counter {
  background: #E02B2B;
}