/* ======================================================================
   PRINTABLE — CUSTOM CSS GLOBAL (Organizado e estável / sem CSS variables)
   Sombra padrão (pequena e mais marcada):
   box-shadow: 0 3px 5px rgba(0,0,0,.28)
====================================================================== */


/* ======================================================================
   1) BOTÕES / AÇÕES — Igualar altura dos botões de design
====================================================================== */
#action-btn .col-12.col-md-4 .border a,
#action-btn .col-12.col-md-6 .border a,
#action-btn .col-12.col-md-3 .border a{
  height: 100%;
}


/* ======================================================================
   2) CONTAGEM REGRESSIVA (Countdown)
====================================================================== */
.countdown-card{
  border-radius: 12px;
}

.countdown-inline{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}

.countdown-inline .title,
.countdown-inline .footer-text{
  font-size: 14px;
  color: #212529;
  white-space: nowrap;
}

.timer-compact{
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-compact .unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.timer-compact .num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
  background: #6c757d;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.timer-compact .label{
  font-size: 10px;
  letter-spacing: .4px;
  color: #6c757d;
}

.timer-compact .sep{
  font-size: 18px;
  font-weight: 700;
  margin-top: -12px;
  color: #6c757d;
}

@media (max-width: 576px){
  .countdown-inline{ gap: 8px; }

  .countdown-inline .title,
  .countdown-inline .footer-text{
    width: 100%;
  }
}


/* ======================================================================
   3) LOGIN (Dropdown de login)
   - remove borda
   - arredonda base
   - sombra padronizada
====================================================================== */
.dropdown-menu.login,
.dropdown-menu.login #loginid_popup.card{
  border: 0 !important;
}

.dropdown-menu.login{
  border-radius: 0 0 12px 12px !important;
}

.dropdown-menu.login #loginid_popup.card{
  border-radius: 0 0 12px 12px !important;

  /* SOMBRA PADRÃO (pequena e marcada) */
  box-shadow: 0 3px 5px rgba(0,0,0,.28) !important;
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.28) !important;

  border: 0 !important;
  z-index: 99999 !important;
}


/* ======================================================================
   4) MENU PRINCIPAL — arredondar hover do item
====================================================================== */
.nav-item.dropdown{
  border-radius: 12px !important;
  transition: background-color .2s ease, border-radius .2s ease;
  overflow: visible !important;
}


/* ======================================================================
   5) BLOCO "Ainda não tem a arte?"
====================================================================== */
.upload_artwork_letter.rounded{
  border-radius: 14px !important;
}


/* ======================================================================
   6) IMAGENS — produto e calculadora
====================================================================== */
.imageGalleryBlock img{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}

.product_thumb_image{
  border-radius: 20px !important;
}


/* ======================================================================
   ESCONDER SOMENTE O GRUPO "OBRIGATÓRIOS" PARA CLIENTES
====================================================================== */

/*
 * A classe .ops-required-group é adicionada pelo JavaScript somente
 * ao bloco cujo título é "Obrigatórios".
 */
body:not(.ops-admin-view) .option-group.ops-required-group {
    display: none !important;
}

/*
 * No administrador, o grupo continua sendo exibido normalmente.
 */
body.ops-admin-view .option-group.ops-required-group {
    display: block !important;
}


/* ======================================================================
   8) SUBMENU SIMPLES (Dropdown padrão do menu)
====================================================================== */
.submenu_custom_link .dropdown-menu{
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 6px !important;
  box-shadow: none !important;
  border: 0 !important;
}

.submenu_custom_link .dropdown-menu > li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.submenu_custom_link .dropdown-menu .dropdown-item{
  padding: 6px 12px !important;
  border-radius: 10px !important;
  background-color: #f5f5f5 !important;
  box-shadow: none !important;
  border: 0 !important;
}

.submenu_custom_link .dropdown-menu:not(.login) .dropdown-item:hover,
.submenu_custom_link .dropdown-menu:not(.login) .dropdown-item:focus,
.submenu_custom_link .dropdown-menu:not(.login) .dropdown-item:focus-visible{
  background-color: #d32f2f !important;
}


/* ======================================================================
   9) MEGA MENU
====================================================================== */
li.submenu_custom_link .dropdown-menu{
  font-size: 16px !important;
}

li.submenu_custom_link .dropdown-menu,
li.submenu_custom_link .dropdown-menu *{
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Container do mega menu */
li.submenu_custom_link > .dropdown-menu{
  background: #ffffff !important;
  border: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  padding: 10px !important;
}

/* Coluna esquerda */
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled{
  margin: 0 !important;
  padding: 0 !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled > li.dropdown-submenu{
  margin: 0 0 2px 0 !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item{
  background: rgba(0,0,0,.06) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  position: relative !important;
  color: rgba(0,0,0,.85) !important;
  -webkit-text-fill-color: rgba(0,0,0,.85) !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:hover{
  background: rgba(0,0,0,.09) !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu.active > a.dropdown-item{
  background: rgba(0,0,0,.12) !important;
  color: #E53935 !important;
  -webkit-text-fill-color: #E53935 !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item img{
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  margin-right: 8px !important;
  object-fit: cover !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item::after{
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  line-height: 1 !important;
}

/* Hover vermelho nas categorias (texto) */
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled > li.dropdown-submenu > a.dropdown-item,
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled > li.dropdown-submenu > a.dropdown-item *{
  transition: none !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:hover,
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:focus,
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:active,
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:focus-visible{
  color: #E53935 !important;
  -webkit-text-fill-color: #E53935 !important;
  background: rgba(0,0,0,.09) !important;
}

li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:hover *,
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:focus *,
li.submenu_custom_link > .dropdown-menu > ul.list-unstyled
> li.dropdown-submenu > a.dropdown-item:active *{
  color: #E53935 !important;
  -webkit-text-fill-color: #E53935 !important;
}

/* Coluna direita */
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

li.submenu_custom_link li.dropdown-submenu > .dropdown-menu .row{
  margin: 0 !important;
  padding-top: 10px !important;
}

li.submenu_custom_link li.dropdown-submenu > .dropdown-menu ul.list-unstyled{
  margin: 0 !important;
  padding: 0 !important;
}

/* Produtos */
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu ul.list-unstyled li,
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu ul.list-unstyled li::before,
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu ul.list-unstyled li::after,
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu ul.list-unstyled li > a.dropdown-item::before,
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu ul.list-unstyled li > a.dropdown-item::after{
  border: 0 !important;
  content: none !important;
}

li.submenu_custom_link li.dropdown-submenu > .dropdown-menu
ul.list-unstyled li > a.dropdown-item{
  background: rgba(0,0,0,.02) !important;
  border-radius: 12px !important;
  margin: 0 2px 2px 2px !important;
  width: calc(100% - 4px) !important;
  height: 56px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: hidden !important;
  position: relative !important;
}

li.submenu_custom_link li.dropdown-submenu > .dropdown-menu
ul.list-unstyled li > a.dropdown-item:hover{
  background: rgba(0,0,0,.05) !important;
}

/* Badges */
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu .badge,
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu .badge *{
  display: none !important;
}

li.submenu_custom_link li.dropdown-submenu > .dropdown-menu
ul.list-unstyled li > a.dropdown-item:hover .badge{
  display: inline-flex !important;
  align-items: center !important;
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  z-index: 5 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.75) !important;
  color: #ffffff !important;
  pointer-events: none !important;
}

/* Texto descritivo */
li.submenu_custom_link li.dropdown-submenu > .dropdown-menu .col-3 p{
  background: rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  color: rgba(0,0,0,.75) !important;
  line-height: 1.35 !important;
}

/* SOMBRA PADRÃO — container branco do mega menu */
li.submenu_custom_link.megamenu > .dropdown-menu{
  box-shadow: 0 3px 5px rgba(0,0,0,.28) !important;
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.28) !important;
  border: 0 !important;
  z-index: 99999 !important;
}


/* ======================================================================
   10) MINHA CONTA (submenu) — sombra + cantos arredondados
====================================================================== */
.navbar,
.navbar .container,
.navbar .container-fluid,
.navbar .navbar-collapse,
.navbar .navbar-nav,
.navbar .nav-item.dropdown{
  overflow: visible !important;
}

.navbar .nav-item.dropdown.submenu_custom_link > ul.dropdown-menu.dropdown-primary{
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 0 12px 12px !important;

  /* SOMBRA PADRÃO */
  box-shadow: 0 3px 5px rgba(0,0,0,.28) !important;
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.28) !important;

  z-index: 10050 !important;
  overflow: visible !important;
}

.navbar .nav-item.dropdown.submenu_custom_link > ul.dropdown-menu.dropdown-primary > li > a.dropdown-item{
  padding: 8px 14px !important;
}


/* ======================================================================
   11) NAVBAR (barra vermelha) — remover sombra
====================================================================== */
nav.navbar,
.navbar{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  filter: none !important;
}



/* =========================================================
   SUBMENU LOGOUT / MINHA CONTA (logout-dropdown)
   Harmonização visual com o restante do menu
========================================================= */

/* BOX do submenu */
.dropdown-menu.logout-dropdown{
  background: #ffffff !important;
  border: 0 !important;

  /* cantos arredondados */
  border-radius: 12px !important;

  /* sombra pequena e marcada (padrão menus) */
  box-shadow: 0 3px 5px rgba(0,0,0,0.28) !important;
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.28) !important;

  padding: 6px !important;
}

/* Remove linhas duras entre itens (border-top do HTML) */
.dropdown-menu.logout-dropdown .dropdown-item{
  border-top: 0 !important;
}

/* Botões do submenu */
.dropdown-menu.logout-dropdown .dropdown-item{
  border-radius: 10px !important;
  margin: 2px 0 !important;

  background: #f5f5f5 !important;
  color: #212529 !important;

  transition: background-color .15s ease, color .15s ease;
}

/* Hover vermelho */
.dropdown-menu.logout-dropdown .dropdown-item:hover,
.dropdown-menu.logout-dropdown .dropdown-item:focus{
  background-color: #d32f2f !important;
  color: #ffffff !important;
}

/* Garante que o submenu não tenha recorte */
.navbar,
.navbar .nav-item,
.navbar .dropdown{
  overflow: visible !important;
}


/* =========================================================
   FANCYBOX — POPUP (arredondado + sombra)
   Mantém o tamanho original do Fancybox (sem quebrar layout)
========================================================= */

/* A caixa do conteúdo (onde está o iframe) */
.fancybox__slide .f-html{
  position: relative !important;          /* referência do botão (depois do JS) */
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;

  /* padrão de sombra que você definiu */
  box-shadow: 0 3px 5px rgba(0,0,0,0.28) !important;
}

/* iframe acompanha o arredondado */
.fancybox__slide .f-html iframe{
  border-radius: 16px !important;
}

/* =========================================================
   BOTÃO FECHAR — estilo (posição será correta após o JS)
========================================================= */
.fancybox__slide .f-html > .f-button.is-close-btn{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  width: 20px !important;
  height: 20px !important;

  border-radius: 999px !important;
  background: #d32f2f !important;
  color: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: none !important;
  z-index: 50 !important;
}

/* Ícone branco */
.fancybox__slide .f-html > .f-button.is-close-btn svg{
  width: 16px !important;
  height: 16px !important;
  stroke: #fff !important;
}

/* Hover */
.fancybox__slide .f-html > .f-button.is-close-btn:hover{
  background: #b71c1c !important;
}

/* Animação suave */
.fancybox__slide .f-html > .f-button.is-close-btn{
  transition: transform .12s ease, background-color .12s ease;
  transform-origin: center;
}

/* Aumenta no hover (ajuste o scale se quiser mais/menos) */
.fancybox__slide .f-html > .f-button.is-close-btn:hover{
  transform: scale(1.15);
}

/* Opcional: quando clicar, dá “bounce” leve */
.fancybox__slide .f-html > .f-button.is-close-btn:active{
  transform: scale(1.10);
}


/* =========================================================
   MINHA CONTA — SIDEBAR ESQUERDA (cards)
   • Fundo cinza claro
   • Borda discreta
   • Sombra padrão definida
========================================================= */

/* Container da sidebar (garante que sombra não seja cortada) */
#sidebar-left{
  overflow: visible !important;
}

/* ---------------------------------------------------------
   1) Card do perfil (user-profile)
--------------------------------------------------------- */
#sidebar-left .user-profile{
  border-radius: 16px !important;

  /* fundo cinza muito claro */
  background: #f7f7f7 !important;

  /* borda discreta */
  border: 1px solid rgba(0,0,0,0.06) !important;

  /* sombra padrão */
  box-shadow: 0 3px 5px rgba(0,0,0,0.28) !important;
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.28) !important;

  overflow: hidden !important;
}

/* ---------------------------------------------------------
   2) Card do menu (lista de navegação)
--------------------------------------------------------- */
#sidebar-left .card{
  border-radius: 16px !important;

  /* fundo cinza claro */
  background: #fff !important;

  /* borda discreta */
  border: 1px solid rgba(0,0,0,0.06) !important;

  /* sombra padrão */
  box-shadow: 0 3px 5px rgba(0,0,0,0.28) !important;
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.28) !important;

  overflow: hidden !important;
}

/* ---------------------------------------------------------
   3) Lista do menu
--------------------------------------------------------- */
#sidebar-left #myaccount_menu{
  margin: 0 !important;
  padding: 6px 0 !important; /* leve respiro interno */
}

/* Cada item */
#sidebar-left #myaccount_menu > li{
  border: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Ícones alinhados, sem "pulo" */
#sidebar-left #myaccount_menu > li img{
  flex: 0 0 auto !important;
}


/* =========================================================
   TABELAS — Arredondar os 4 cantos da linha do THEAD
========================================================= */

/* Garante separação correta para o border-radius funcionar */
table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Fundo consistente do cabeçalho */
table thead.thead-light th{
  background-color: #f8f9fa !important; /* bg-light */
  border: 0 !important;
}

/* Canto superior esquerdo */
table thead.thead-light tr th:first-child{
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

/* Canto superior direito */
table thead.thead-light tr th:last-child{
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* =========================================================
   MINHA CONTA — CARDS DO DASHBOARD
   Arredondamento consistente
========================================================= */

a.account_dashboard_box{
  border-radius: 16px !important;
  overflow: hidden !important; /* garante que ícone/texto respeitem o raio */
}

/* =========================================================
   MINHA CONTA — CARD DE PEDIDO (lista de pedidos)
   Apenas arredondamento de cantos
========================================================= */

.card.mb-3{
  border-radius: 16px !important;
  overflow: hidden !important; /* garante que header/tabela respeitem o raio */
}

/* =========================================================
   THUMB COM LINK (<a class="fancybox ... thumbnail">)
   Corrige: altura diferente da largura (padding da .thumbnail)
   Mantém: fundo branco e cantos arredondados
========================================================= */



a.fancybox.thumbnail{
  position: relative !important;
  display: block !important;

  /* remove padding do tema (.thumbnail) */
  padding: 0 !important;
  line-height: 0 !important;

  width: 100% !important;
  box-sizing: border-box !important;

  border-radius: 16px !important;
  overflow: hidden !important;

  /* fundo branco para PNGs transparentes */
  background: #fff !important;

  /* não deixa o max-height inline atrapalhar */
  height: auto !important;
}

/* preferencial */
a.fancybox.thumbnail{ aspect-ratio: 1 / 1; }

/* fallback */
a.fancybox.thumbnail::before{
  content: "" !important;
  display: block !important;
  padding-top: 100% !important;
}

/* imagem preenche o quadrado sem distorcer */
a.fancybox.thumbnail > img.img-fluid{
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;         /* LINK = cover (como estava) */
  object-position: center !important;

  border-radius: 16px !important;
  background: #fff !important;
}

/* overlay do zoom */
a.fancybox.thumbnail .zoom{
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   EXCEÇÃO — #product_additonal_image
   Objetivo: manter tamanho/alinhamento original (max 250px)
   e aplicar APENAS cantos arredondados (sem forçar quadrado global)
========================================================= */

#product_additonal_image a.fancybox.thumbnail{
  /* volta o comportamento original do bloco */
  width: auto !important;
  max-width: 250px !important;     /* respeita o layout anterior */
  display: inline-block !important;
  vertical-align: top !important;

  /* remove a “forçação” do quadrado global */
  aspect-ratio: auto !important;
  height: auto !important;

  /* mantém só o arredondado */
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* desliga o fallback do quadrado (senão ele cria altura extra) */
#product_additonal_image a.fancybox.thumbnail::before{
  display: none !important;
  content: none !important;
}

/* devolve a imagem ao fluxo normal (sem absolute/cover forçado) */
#product_additonal_image a.fancybox.thumbnail > img.img-fluid{
  position: static !important;
  inset: auto !important;

  width: 100% !important;
  height: auto !important;

  object-fit: contain !important;   /* evita corte; pode trocar por cover se quiser */
  border-radius: 16px !important;
}

/* garante que o zoom overlay não force altura */
#product_additonal_image a.fancybox.thumbnail .zoom{
  position: absolute !important;
  inset: 0 !important;
}


/* =========================================================
   SEM LINK (só <img class="img-fluid noimage">)
   Corrige:
   - cantos arredondados em TODAS as visões
   - altura = largura (quadrado)
   - fundo branco para transparência
   - PRESERVA object-fit: contain (como você pediu)
========================================================= */

img.img-fluid.noimage{
  display: block !important;
  width: 100% !important;

  /* quadrado */
  aspect-ratio: 1 / 1 !important;
  height: auto !important;

  /* sem distorcer */
  object-fit: contain !important;       /* PRESERVADO */
  object-position: center !important;

  /* cantos + fundo */
  border-radius: 16px !important;
  background: #fff !important;
}

/* Se algum wrapper estiver “cortando errado”, garante o corte correto sem afetar links */
td.text-center .position-relative > img.img-fluid.noimage,
.col-4 .position-relative > img.img-fluid.noimage{
  border-radius: 16px !important;
}

/* Opcional (recomendado): botão favorito não “quadrar” o canto visualmente */
.position-relative > button.favoritebtn{
  border-radius: 999px !important;
  overflow: hidden !important;
}



/* -------------------------------
2) QUANDO NÃO TEM LINK (SÓ <img>)
class="img-fluid noimageimg-fluid">
--------------------------------*/
img.noimageimg-fluid{ display: block !important;
width: 100% !important; /* força quadrado mesmo sem wrapper */ 
aspect-ratio: 1 / 1 !important; height: auto !important; /* deixa o ratio calcular a altura */ 
object-fit: contain !important; 
object-position: center !important; 
border-radius: 16px !important; 
overflow: hidden !important; 
background: #f2f2f2 !important; }


/* =========================================================
   ALERTS — PADRÃO DE CANTOS ARREDONDADOS (Printable)
========================================================= */

.alert{
  border-radius: 16px !important;   /* mesmo padrão dos cards e boxes */
}

/* =========================================================
   TEMPLATE CARD — cantos arredondados (padrão Printable)
========================================================= */

/* Card principal */
.templateCard > .card{
  border-radius: 16px !important;
  overflow: hidden !important; /* garante corte correto dos cantos */
}

/* Corpo do card acompanha o arredondado */
.templateCard > .card > .card-body{
  border-radius: 16px !important;
}

/* Opcional: garante que bordas internas não “quebrem” visual */
.templateCard .border-top{
  border-top-color: rgba(0,0,0,.08) !important;
}


/* =========================================================
   MY IMAGES — cards de imagens salvas
   Padrão Printable: cantos arredondados
========================================================= */

/* Card principal */
.img_div .card.myimage_div{
  border-radius: 16px !important;
  overflow: hidden !important; /* garante recorte correto */
}

/* Corpo do card (imagem) */
.img_div .card.myimage_div .card-body{
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
}

/* Thumbnail / link da imagem */
.img_div .card.myimage_div a.thumbnail{
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
}

/* Imagem dentro do thumbnail */
.img_div .card.myimage_div a.thumbnail img{
  border-radius: 16px 16px 0 0 !important;
}

/* Rodapé (ações) acompanha o arredondado */
.img_div .card.myimage_div .card-footer{
  border-radius: 0 0 16px 16px !important;
}

/* =========================================================
   ENDEREÇOS — card de endereço
   Apenas cantos arredondados (padrão Printable)
========================================================= */

/* Card principal */
.col-12.col-md-6.col-xl-4 > .card{
  border-radius: 16px !important;
  overflow: hidden !important; /* garante recorte correto */
}

/* Header */
.col-12.col-md-6.col-xl-4 > .card > .card-header{
  border-radius: 16px 16px 0 0 !important;
}

/* Body */
.col-12.col-md-6.col-xl-4 > .card > .card-body{
  border-radius: 0 !important;
}

/* Footer */
.col-12.col-md-6.col-xl-4 > .card > .card-footer{
  border-radius: 0 0 16px 16px !important;
}

/* =========================================================
   PONTOS DISPONÍVEIS — box esquerdo
   Fundo cinza claro + cantos arredondados
========================================================= */

.page-sub-header .bg-opacity{
  background-color: #f5f5f5 !important; /* cinza bem claro */
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* =========================================================
   RESUMO DE PONTOS — box direito
   Apenas cantos arredondados
========================================================= */

ul.cart-price-block{
  border-radius: 16px !important;
  overflow: hidden !important; /* corta bordas internas certinho */
}


ul.cart-price-block > li:first-child{
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
}

ul.cart-price-block > li:last-child{
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  border-right: 0 !important; /* remove linha extra na ponta */
}

/* =========================================================
   DESATIVAR CONTA — WARNING (List Group)
   Solução segura SEM :has e SEM body class
   Aplica arredondado + borda laranja apenas no item WARNING
========================================================= */

/* NÃO estiliza .list-group globalmente (evita afetar o site) */
ul.list-group{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Arredondado + borda laranja escuro só no warning */
ul.list-group > li.list-group-item.list-group-item-warning{
  border-radius: 16px !important;

  /* borda laranja escuro (não vermelho) */
  border: 1px solid #e0a800 !important;

  /* mantém o “warning” mas com visual mais limpo */
  background-color: #fff8e1 !important;  /* amarelo bem claro */
  color: #856404 !important;

  /* evita cortar bordas/cantos */
  background-clip: padding-box !important;
}

/* =========================================================
   CORREÇÃO CARRINHO OPS
   Produtos com <picture> dentro do thumbnail
   Ex.: Gabarito de Dobrar Roupas
========================================================= */

.order-img a.fancybox.thumbnail > picture{
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;

  z-index: 1 !important;
}

.order-img a.fancybox.thumbnail > picture > img.img-fluid{
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  border-radius: 16px !important;
  background: #fff !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* garante que o ícone de zoom continue funcionando */
.order-img a.fancybox.thumbnail .zoom{
  z-index: 2 !important;
}

/* =========================================================
   CARRINHO OPS — THUMBNAILS QUADRADAS CENTRALIZADAS
   Seguro para CSS global: limitado a .order-img
========================================================= */

.order-img{
  text-align: center !important;
}

/* Box principal com imagem */
.order-img a.fancybox.thumbnail{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;

  padding: 0 !important;
  margin: 0 auto !important;
  line-height: 0 !important;
  box-sizing: border-box !important;

  border: 1px solid #dee2e6 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Remove fallback global que cria altura extra */
.order-img a.fancybox.thumbnail::before{
  display: none !important;
  content: none !important;
  padding: 0 !important;
}

/* Picture ocupa o quadrado e centraliza a imagem */
.order-img a.fancybox.thumbnail > picture{
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* Imagem dentro do picture */
.order-img a.fancybox.thumbnail > picture > img.img-fluid,
.order-img a.fancybox.thumbnail > img.img-fluid{
  display: block !important;

  max-width: 100% !important;
  max-height: 100% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  box-sizing: border-box !important;
}

/* Item sem imagem / falta enviar arte */
.order-img img.img-fluid.noimage,
.order-img img.noimageimg-fluid{
  display: block !important;

  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  border: 1px solid #dee2e6 !important;
  border-radius: 16px !important;
  background: #f2f2f2 !important;

  box-sizing: border-box !important;
}

/* Zoom */
.order-img a.fancybox.thumbnail .zoom{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* =========================================================
   MOBILE — ÍCONES DAS CATEGORIAS
========================================================= */

@media (max-width: 767.98px){

  #navbarText .dropdown-item img,
  #navbarText .dropdown-item picture img{

    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;
    min-height: 22px !important;

    max-width: 22px !important;
    max-height: 22px !important;

    object-fit: cover !important;
    overflow: hidden !important;
  }

}

/* =========================================================
   BOTÃO "CONTRATE UM DESIGNER"

   Normal: verde-claro
   Hover: verde-escuro
   Ícone: acompanha a cor do título
   ========================================================= */


/* ---------------------------------------------------------
   Título principal da seção
   --------------------------------------------------------- */

.hiredes_btns .page-sub-header h2 {
    margin: 0 0 8px !important;
    color: #1f242b !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}


/* ---------------------------------------------------------
   Contêiner externo
   --------------------------------------------------------- */

#product-info .hire_designer,
#product-info .hire_designer:hover,
#product-info .hire_designer:focus-within {
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   Botão — estado normal
   --------------------------------------------------------- */

#product-info .hire_designer > .btn-img-text {
    display: flex !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 27px !important;

    color: #086c3a !important;
    background-color: #67e8a5 !important;

    border: 0 !important;
    border-radius: 16px !important;
    outline: 0 !important;
    box-shadow: 0 5px 16px rgba(22, 163, 74, 0.22) !important;
    text-decoration: none !important;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* ---------------------------------------------------------
   Ícone — mesma cor do título
   --------------------------------------------------------- */

#product-info .hire_designer > .btn-img-text > i {
    color: #086c3a !important;
    opacity: 1 !important;
    transition: color 0.25s ease !important;
}


/*
 * O ícone original é um SVG vermelho externo.
 * A máscara permite que ele utilize a propriedade currentColor.
 */
#product-info
.hire_designer
> .btn-img-text
> i.fa-user-plus::before {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;

    content: "" !important;
    background-color: currentColor !important;

    -webkit-mask-image: url("https://www.printable.com.br/themes/printable/images/hire_designer.svg") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;

    mask-image: url("https://www.printable.com.br/themes/printable/images/hire_designer.svg") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;

    filter: none !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   Título interno
   Mesma tipografia dos outros botões
   --------------------------------------------------------- */

#product-info .hire_designer .h4 {
    margin: 0 0 6px !important;
    color: #086c3a !important;
    font-family: NunitoRegular, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    letter-spacing: normal !important;
    transition: color 0.25s ease !important;
}


/* ---------------------------------------------------------
   Corpo do texto
   --------------------------------------------------------- */

#product-info .hire_designer .short-disc {
    margin: 0 !important;
    color: rgba(5, 92, 47, 0.78) !important;
    font-family: NunitoRegular, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: normal !important;
    transition: color 0.25s ease !important;
}


/* ---------------------------------------------------------
   Hover, foco e clique
   --------------------------------------------------------- */

#product-info .hire_designer > .btn-img-text:hover,
#product-info .hire_designer > .btn-img-text:focus,
#product-info .hire_designer > .btn-img-text:focus-visible,
#product-info .hire_designer > .btn-img-text:active {
    color: #fff !important;
    background-color: #16a34a !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 7px 20px rgba(22, 163, 74, 0.35) !important;
    text-decoration: none !important;
}


/* ---------------------------------------------------------
   Ícone branco no hover, foco e clique
   --------------------------------------------------------- */

#product-info .hire_designer > .btn-img-text:hover > i,
#product-info .hire_designer > .btn-img-text:focus > i,
#product-info .hire_designer > .btn-img-text:focus-visible > i,
#product-info .hire_designer > .btn-img-text:active > i {
    color: #fff !important;
}


/* ---------------------------------------------------------
   Título branco no hover, foco e clique
   --------------------------------------------------------- */

#product-info .hire_designer > .btn-img-text:hover .h4,
#product-info .hire_designer > .btn-img-text:focus .h4,
#product-info .hire_designer > .btn-img-text:focus-visible .h4,
#product-info .hire_designer > .btn-img-text:active .h4 {
    color: #fff !important;
}


/* ---------------------------------------------------------
   Descrição branca no hover, foco e clique
   --------------------------------------------------------- */

#product-info .hire_designer > .btn-img-text:hover .short-disc,
#product-info .hire_designer > .btn-img-text:focus .short-disc,
#product-info .hire_designer > .btn-img-text:focus-visible .short-disc,
#product-info .hire_designer > .btn-img-text:active .short-disc {
    color: rgba(255, 255, 255, 0.88) !important;
}


/* ---------------------------------------------------------
   Responsividade
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    .hiredes_btns .page-sub-header h2 {
        font-size: 26px !important;
    }

    #product-info .hire_designer > .btn-img-text {
        padding: 20px !important;
    }

    #product-info .hire_designer .h4 {
        font-size: 17px !important;
        line-height: 21px !important;
    }

    #product-info .hire_designer .short-disc {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

/* =========================================================
   Vídeo redimensionado dentro de um box quadrado
   ========================================================= */

#product_images .video-container {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background-color: #000 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* Elemento intermediário */
#product_images .video-container > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
}

/* Vídeo contido dentro do box, sem recorte */
#product_images .video-container video {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Exibe o vídeo inteiro sem ampliar ou recortar */
    object-fit: contain !important;
    object-position: center center !important;

    background-color: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   BOTÕES DE PERSONALIZAÇÃO

   Modelos Prontos:
   amarelo-claro → laranja

   Faça a sua arte:
   azul-claro → azul-escuro

   Enviar arquivo:
   verde-claro → verde-escuro

   Ícones:
   mesma cor do título → branco no hover
   ========================================================= */


/* ---------------------------------------------------------
   Estrutura comum dos três botões
   --------------------------------------------------------- */

#product-info .browse_design,
#product-info .custom_design,
#product-info .upload_design,
#product-info .browse_design:hover,
#product-info .custom_design:hover,
#product-info .upload_design:hover,
#product-info .browse_design:focus-within,
#product-info .custom_design:focus-within,
#product-info .upload_design:focus-within {
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#product-info .browse_design > .btn-img-text,
#product-info .custom_design > .btn-img-text,
#product-info .upload_design > .btn-img-text {
    display: flex !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 27px !important;

    border: 0 !important;
    border-radius: 16px !important;
    outline: 0 !important;
    text-decoration: none !important;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* ---------------------------------------------------------
   Tipografia comum
   --------------------------------------------------------- */

/* Títulos */
#product-info .browse_design .h4,
#product-info .custom_design .h4,
#product-info .upload_design .h4 {
    margin: 0 0 6px !important;
    font-family: NunitoRegular, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    letter-spacing: normal !important;
    transition: color 0.25s ease !important;
}

/* Descrições */
#product-info .browse_design .short-disc,
#product-info .custom_design .short-disc,
#product-info .upload_design .short-disc {
    margin: 0 !important;
    font-family: NunitoRegular, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: normal !important;
    transition: color 0.25s ease !important;
}

/* Elementos dos ícones */
#product-info .browse_design > .btn-img-text > i,
#product-info .custom_design > .btn-img-text > i,
#product-info .upload_design > .btn-img-text > i {
    opacity: 1 !important;
    transition: color 0.25s ease !important;
}


/* =========================================================
   MODELOS PRONTOS
   Normal: amarelo-claro
   Hover: laranja
   ========================================================= */

/* Botão */
#product-info .browse_design > .btn-img-text {
    color: #8a4b00 !important;
    background-color: #ffd84d !important;
    box-shadow: 0 5px 16px rgba(255, 184, 0, 0.22) !important;
}

/* Título */
#product-info .browse_design .h4 {
    color: #8a4b00 !important;
}

/* Descrição */
#product-info .browse_design .short-disc {
    color: rgba(110, 57, 0, 0.78) !important;
}

/* Ícone */
#product-info .browse_design > .btn-img-text > i {
    color: #8a4b00 !important;
}

/* Máscara do ícone */
#product-info
.browse_design
> .btn-img-text
> i.fa-images::before {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;

    content: "" !important;
    background-color: currentColor !important;

    -webkit-mask-image: url("https://www.printable.com.br/themes/printable/images/browse_design_icon.svg") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;

    mask-image: url("https://www.printable.com.br/themes/printable/images/browse_design_icon.svg") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;

    filter: none !important;
    opacity: 1 !important;
}


/* Hover */
#product-info .browse_design > .btn-img-text:hover,
#product-info .browse_design > .btn-img-text:focus,
#product-info .browse_design > .btn-img-text:focus-visible,
#product-info .browse_design > .btn-img-text:active {
    color: #fff !important;
    background-color: #f97316 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 7px 20px rgba(249, 115, 22, 0.32) !important;
    text-decoration: none !important;
}


/* =========================================================
   FAÇA A SUA ARTE
   Normal: azul-claro
   Hover: azul-escuro
   ========================================================= */

/* Botão */
#product-info .custom_design > .btn-img-text {
    color: #0b3b8c !important;
    background-color: #60a5fa !important;
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.22) !important;
}

/* Título */
#product-info .custom_design .h4 {
    color: #0b3b8c !important;
}

/* Descrição */
#product-info .custom_design .short-disc {
    color: rgba(7, 48, 119, 0.78) !important;
}

/* Ícone */
#product-info .custom_design > .btn-img-text > i {
    color: #0b3b8c !important;
}

/* Máscara do ícone */
#product-info
.custom_design
> .btn-img-text
> i.fa-object-group::before {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;

    content: "" !important;
    background-color: currentColor !important;

    -webkit-mask-image: url("https://www.printable.com.br/themes/printable/images/Custom_design_icn.svg") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;

    mask-image: url("https://www.printable.com.br/themes/printable/images/Custom_design_icn.svg") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;

    filter: none !important;
    opacity: 1 !important;
}


/* Hover */
#product-info .custom_design > .btn-img-text:hover,
#product-info .custom_design > .btn-img-text:focus,
#product-info .custom_design > .btn-img-text:focus-visible,
#product-info .custom_design > .btn-img-text:active {
    color: #fff !important;
    background-color: #2563eb !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 7px 20px rgba(37, 99, 235, 0.35) !important;
    text-decoration: none !important;
}


/* =========================================================
   ENVIAR ARQUIVO
   Normal: verde-claro
   Hover: verde-escuro
   ========================================================= */

/* Botão */
#product-info .upload_design > .btn-img-text {
    color: #086c3a !important;
    background-color: #67e8a5 !important;
    box-shadow: 0 5px 16px rgba(22, 163, 74, 0.22) !important;
}

/* Título */
#product-info .upload_design .h4 {
    color: #086c3a !important;
}

/* Descrição */
#product-info .upload_design .short-disc {
    color: rgba(5, 92, 47, 0.78) !important;
}

/* Ícone */
#product-info .upload_design > .btn-img-text > i {
    color: #086c3a !important;
}

/* Máscara do ícone */
#product-info
.upload_design
> .btn-img-text
> i.fa-upload::before {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;

    content: "" !important;
    background-color: currentColor !important;

    -webkit-mask-image: url("https://www.printable.com.br/themes/printable/images/Upload_design_icn.svg") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;

    mask-image: url("https://www.printable.com.br/themes/printable/images/Upload_design_icn.svg") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;

    filter: none !important;
    opacity: 1 !important;
}


/* Hover */
#product-info .upload_design > .btn-img-text:hover,
#product-info .upload_design > .btn-img-text:focus,
#product-info .upload_design > .btn-img-text:focus-visible,
#product-info .upload_design > .btn-img-text:active {
    color: #fff !important;
    background-color: #16a34a !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 7px 20px rgba(22, 163, 74, 0.35) !important;
    text-decoration: none !important;
}


/* ---------------------------------------------------------
   Ícones e títulos brancos no hover
   --------------------------------------------------------- */

#product-info .browse_design > .btn-img-text:hover > i,
#product-info .browse_design > .btn-img-text:focus > i,
#product-info .browse_design > .btn-img-text:focus-visible > i,
#product-info .browse_design > .btn-img-text:active > i,
#product-info .browse_design > .btn-img-text:hover .h4,
#product-info .browse_design > .btn-img-text:focus .h4,
#product-info .browse_design > .btn-img-text:focus-visible .h4,
#product-info .browse_design > .btn-img-text:active .h4,

#product-info .custom_design > .btn-img-text:hover > i,
#product-info .custom_design > .btn-img-text:focus > i,
#product-info .custom_design > .btn-img-text:focus-visible > i,
#product-info .custom_design > .btn-img-text:active > i,
#product-info .custom_design > .btn-img-text:hover .h4,
#product-info .custom_design > .btn-img-text:focus .h4,
#product-info .custom_design > .btn-img-text:focus-visible .h4,
#product-info .custom_design > .btn-img-text:active .h4,

#product-info .upload_design > .btn-img-text:hover > i,
#product-info .upload_design > .btn-img-text:focus > i,
#product-info .upload_design > .btn-img-text:focus-visible > i,
#product-info .upload_design > .btn-img-text:active > i,
#product-info .upload_design > .btn-img-text:hover .h4,
#product-info .upload_design > .btn-img-text:focus .h4,
#product-info .upload_design > .btn-img-text:focus-visible .h4,
#product-info .upload_design > .btn-img-text:active .h4 {
    color: #fff !important;
}


/* ---------------------------------------------------------
   Descrições brancas no hover
   --------------------------------------------------------- */

#product-info .browse_design > .btn-img-text:hover .short-disc,
#product-info .browse_design > .btn-img-text:focus .short-disc,
#product-info .browse_design > .btn-img-text:focus-visible .short-disc,
#product-info .browse_design > .btn-img-text:active .short-disc,

#product-info .custom_design > .btn-img-text:hover .short-disc,
#product-info .custom_design > .btn-img-text:focus .short-disc,
#product-info .custom_design > .btn-img-text:focus-visible .short-disc,
#product-info .custom_design > .btn-img-text:active .short-disc,

#product-info .upload_design > .btn-img-text:hover .short-disc,
#product-info .upload_design > .btn-img-text:focus .short-disc,
#product-info .upload_design > .btn-img-text:focus-visible .short-disc,
#product-info .upload_design > .btn-img-text:active .short-disc {
    color: rgba(255, 255, 255, 0.88) !important;
}


/* ---------------------------------------------------------
   Responsividade
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    #product-info .browse_design > .btn-img-text,
    #product-info .custom_design > .btn-img-text,
    #product-info .upload_design > .btn-img-text {
        padding: 20px !important;
    }

    #product-info .browse_design .h4,
    #product-info .custom_design .h4,
    #product-info .upload_design .h4 {
        font-size: 17px !important;
        line-height: 21px !important;
    }

    #product-info .browse_design .short-disc,
    #product-info .custom_design .short-disc,
    #product-info .upload_design .short-disc {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

/* =========================================================
   MODELOS PRONTOS — quadrado ocupando o card cinza
   ========================================================= */

/* Cria uma margem pequena ao redor do quadrado branco */
#templates_listing_area .templatebox .card-body {
    height: auto !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* Quadrado branco ocupa toda a largura disponível */
#templates_listing_area a.fancybox.thumbnail {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background-color: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Imagem centralizada dentro do quadrado */
#templates_listing_area a.fancybox.thumbnail > img.img-fluid {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    background-color: #fff !important;
    border-radius: 16px !important;
}

/* Card cinza externo */
#templates_listing_area .templatebox > .card {
    background-color: #f4f4f4 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* =========================================================
   BOX FLUTUANTE DE PREÇO

   Desktop:
   estiliza somente quando .floating-price estiver presente.

   Mobile:
   estiliza pelo ID porque a classe não é adicionada.
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    /* Só fica vermelho quando realmente estiver flutuando */
    #price_calculator #productpricetotal.floating-price {
        overflow: hidden !important;
        padding: 12px 18px 10px !important;

        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        background-color: #c4161c !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 16px 16px 0 0 !important;

        /* Mesma sombra dos menus */
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.28) !important;
        -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.28) !important;

        box-sizing: border-box !important;
        z-index: 16 !important;
    }

    /* Remove fundos internos */
    #price_calculator #productpricetotal.floating-price
    #calsummaryproductpricetotaldiv,

    #price_calculator #productpricetotal.floating-price
    #calsummaryproductpricetotaldiv > div,

    #price_calculator #productpricetotal.floating-price
    #producttotalprice,

    #price_calculator #productpricetotal.floating-price
    .sub-total,

    #price_calculator #productpricetotal.floating-price
    .cal-summary-pipline,

    #price_calculator #productpricetotal.floating-price
    .price_calc_unit_price,

    #price_calculator #productpricetotal.floating-price
    .price_calc_weight {
        background-color: transparent !important;
        background-image: none !important;
    }

    /* Textos comuns em branco */
    #price_calculator #productpricetotal.floating-price,
    #price_calculator #productpricetotal.floating-price *,
    #price_calculator #productpricetotal.floating-price span,
    #price_calculator #productpricetotal.floating-price small,
    #price_calculator #productpricetotal.floating-price strong,
    #price_calculator #productpricetotal.floating-price label,
    #price_calculator #productpricetotal.floating-price p,
    #price_calculator #productpricetotal.floating-price a {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        text-shadow: none !important;
    }

    /* Preço principal amarelo */
    #price_calculator
    #productpricetotal.floating-price
    #disp_product_price
    > .product-amount {
        color: #ffd84d !important;
        -webkit-text-fill-color: #ffd84d !important;
        font-weight: 700 !important;
    }

    /* Desconto amarelo */
    #price_calculator
    #productpricetotal.floating-price
    .discount-detail,

    #price_calculator
    #productpricetotal.floating-price
    .text-info {
        color: #ffd84d !important;
        -webkit-text-fill-color: #ffd84d !important;
        font-weight: 600 !important;
    }

    /* Preço antigo */
    #price_calculator
    #productpricetotal.floating-price
    del.product-amount,

    #price_calculator
    #productpricetotal.floating-price
    .text-muted {
        color: rgba(255, 255, 255, 0.7) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
        text-decoration-color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Ícones brancos */
    #price_calculator #productpricetotal.floating-price i,
    #price_calculator #productpricetotal.floating-price i::before,
    #price_calculator #productpricetotal.floating-price i::after {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    /*
     * No mobile o elemento não recebe .floating-price.
     * Por isso usamos somente #productpricetotal.
     */
    #price_calculator #productpricetotal {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;
        padding: 10px 12px 8px !important;

        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        background-color: #c4161c !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 16px 16px 0 0 !important;

        /* Mesma sombra dos menus */
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.28) !important;
        -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.28) !important;

        box-sizing: border-box !important;
        z-index: 16 !important;
    }

    /* Remove fundos internos */
    #price_calculator #productpricetotal
    #calsummaryproductpricetotaldiv,

    #price_calculator #productpricetotal
    #calsummaryproductpricetotaldiv > div,

    #price_calculator #productpricetotal
    #producttotalprice,

    #price_calculator #productpricetotal
    .sub-total,

    #price_calculator #productpricetotal
    .cal-summary-pipline,

    #price_calculator #productpricetotal
    .price_calc_unit_price,

    #price_calculator #productpricetotal
    .price_calc_weight {
        background-color: transparent !important;
        background-image: none !important;
    }

    /* Todos os textos comuns em branco */
    #price_calculator #productpricetotal,
    #price_calculator #productpricetotal *,
    #price_calculator #productpricetotal span,
    #price_calculator #productpricetotal small,
    #price_calculator #productpricetotal strong,
    #price_calculator #productpricetotal label,
    #price_calculator #productpricetotal p,
    #price_calculator #productpricetotal a {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        text-shadow: none !important;
    }

    /* Preço principal amarelo */
    #price_calculator
    #productpricetotal
    #disp_product_price
    > .product-amount {
        color: #ffd84d !important;
        -webkit-text-fill-color: #ffd84d !important;
        font-weight: 700 !important;
    }

    /* Desconto amarelo */
    #price_calculator
    #productpricetotal
    .discount-detail,

    #price_calculator
    #productpricetotal
    .text-info {
        color: #ffd84d !important;
        -webkit-text-fill-color: #ffd84d !important;
        font-weight: 600 !important;
    }

    /* Preço antigo riscado */
    #price_calculator
    #productpricetotal
    del.product-amount,

    #price_calculator
    #productpricetotal
    .text-muted {
        color: rgba(255, 255, 255, 0.7) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
        text-decoration-color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Ícones brancos */
    #price_calculator #productpricetotal i,
    #price_calculator #productpricetotal i::before,
    #price_calculator #productpricetotal i::after {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    /* Alinhamento central no mobile */
    #price_calculator #productpricetotal #producttotalprice,
    #price_calculator #productpricetotal .price_calc_unit_price,
    #price_calculator #productpricetotal .price_calc_weight {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ======================================================================
   WHATSAPP FLUTUANTE — COR, HOVER E ARRASTE
====================================================================== */

.floating-whatsapp {
    z-index: 9999 !important;
    cursor: grab !important;
    user-select: none !important;
    touch-action: none !important;
    background-color: #25d366 !important;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}

/* Hover permanece funcionando depois do arraste */
.floating-whatsapp:hover {
    background-color: #1cad57 !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.28) !important;
    transform: translateY(-2px) !important;
}

/* Durante o arraste não aplica deslocamento do hover */
.floating-whatsapp.ops-whatsapp-dragging {
    cursor: grabbing !important;
    transition: none !important;
    transform: none !important;
}

/* Link ocupa todo o botão */
.floating-whatsapp > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Mantém o ícone branco em todos os estados */
.floating-whatsapp > a:link,
.floating-whatsapp > a:visited,
.floating-whatsapp > a:hover,
.floating-whatsapp > a:focus,
.floating-whatsapp > a:focus-visible,
.floating-whatsapp > a:active,
.floating-whatsapp > a > i,
.floating-whatsapp > a:hover > i,
.floating-whatsapp > a:focus > i,
.floating-whatsapp > a:active > i {
    color: #ffffff !important;
    outline: none !important;
    text-decoration: none !important;
}

/*
 * Importante:
 * não utilizar pointer-events:none no link,
 * pois isso impede o clique no WhatsApp.
 */
 
 /* ======================================================================
   OCULTAR O MENU AUTOMÁTICO "PRODUTOS" DO OPS SOMENTE NO MOBILE
====================================================================== */

@media (max-width: 767.98px) {
    #navbarText > ul.navbar-nav >
    li.ops-hide-automatic-products-mobile {
        display: none !important;
    }
}

/* ======================================================================
   MEGAMENU — PRÉVIA DE CATEGORIAS E PRODUTOS
   Somente desktop
====================================================================== */

@media (min-width: 768px) {

    /*
     * Coluna direita que já existe no menu do OPS.
     */
    li.submenu_custom_link.megamenu
    li.dropdown-submenu > .dropdown-menu
    .col-3.ops-menu-preview-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-width: 210px !important;
        padding-left: 10px !important;
    }

    /*
     * Esconde somente o parágrafo original depois que
     * o painel de prévia for criado pelo JavaScript.
     */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-column >
    .ops-menu-original-description {
        display: none !important;
    }

    /* Painel completo da prévia */
    li.submenu_custom_link.megamenu
    .ops-menu-preview {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;

        background: rgba(0, 0, 0, 0.045) !important;
        border: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    /* Box da imagem */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-image-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 145px !important;
        min-height: 145px !important;
        margin: 0 0 10px !important;
        padding: 8px !important;

        background: #ffffff !important;
        border: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    /* Imagem da categoria ou produto */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center !important;

        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        box-shadow: none !important;

        opacity: 1 !important;
        transition: opacity 0.18s ease !important;
    }

    /* Estado durante a troca */
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading
    .ops-menu-preview-image {
        opacity: 0.55 !important;
    }

    /* Título */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-title {
        display: block !important;
        margin: 0 0 6px !important;
        padding: 0 !important;

        color: #c4161c !important;
        font-family: NunitoRegular, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        background: transparent !important;
        border: 0 !important;
    }

    /* Descrição */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-description {
        display: -webkit-box !important;
        margin: 0 !important;
        padding: 0 !important;

        color: rgba(0, 0, 0, 0.72) !important;
        font-family: NunitoRegular, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;

        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
    }

    /* Mensagem apresentada durante o carregamento */
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading
    .ops-menu-preview-description {
        color: rgba(0, 0, 0, 0.5) !important;
    }

    /* Destaca o produto que está sendo visualizado */
    li.submenu_custom_link.megamenu
    a.edatalayer.dropdown-item.ops-preview-active {
        color: #c4161c !important;
        background: rgba(196, 22, 28, 0.08) !important;
    }
}

/* ======================================================================
   MOBILE — MANTER O MENU ORIGINAL
====================================================================== */

@media (max-width: 767.98px) {

    .ops-menu-preview {
        display: none !important;
    }

    .ops-menu-original-description {
        display: block !important;
    }
}

/* Quando a categoria não possuir uma imagem principal válida */
@media (min-width: 768px) {
    li.submenu_custom_link.megamenu
    .ops-menu-preview.ops-no-image
    .ops-menu-preview-image-box {
        display: none !important;
    }
}

/* ======================================================================
   MEGAMENU — GARANTIR SOMENTE UM SUBMENU VISÍVEL
   Somente desktop
====================================================================== */

@media (min-width: 768px) {

    /*
     * Por padrão, todos os painéis de categoria ficam ocultos.
     * Não dependemos mais do .active colocado automaticamente pelo OPS.
     */
    li.submenu_custom_link.megamenu >
    .dropdown-menu >
    ul.list-unstyled >
    li.dropdown-submenu >
    .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /*
     * Apenas a categoria selecionada pelo nosso código
     * poderá mostrar seu submenu.
     */
    li.submenu_custom_link.megamenu >
    .dropdown-menu >
    ul.list-unstyled >
    li.dropdown-submenu.ops-menu-current >
    .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 2 !important;
    }

    /*
     * Neutraliza o primeiro item que o OPS deixa como active,
     * caso ele não seja a categoria atualmente selecionada.
     */
    li.submenu_custom_link.megamenu >
    .dropdown-menu >
    ul.list-unstyled >
    li.dropdown-submenu.active:not(.ops-menu-current) >
    a.dropdown-item {
        color: rgba(0, 0, 0, 0.85) !important;
        -webkit-text-fill-color: rgba(0, 0, 0, 0.85) !important;
        background: rgba(0, 0, 0, 0.06) !important;
    }

    /*
     * Aparência da única categoria selecionada.
     */
    li.submenu_custom_link.megamenu >
    .dropdown-menu >
    ul.list-unstyled >
    li.dropdown-submenu.ops-menu-current >
    a.dropdown-item {
        color: #e53935 !important;
        -webkit-text-fill-color: #e53935 !important;
        background: rgba(0, 0, 0, 0.12) !important;
    }
}
/* ======================================================================
   MEGAMENU — REFINAMENTO DO BOX DE PRÉVIA
   - Imagem quadrada
   - Somente uma moldura
   - Texto truncado exclusivamente pelo JavaScript
====================================================================== */

@media (min-width: 768px) {

    /* Painel externo sem molduras adicionais */
    li.submenu_custom_link.megamenu
    .ops-menu-preview {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        overflow: visible !important;
    }

    /* Box quadrado da imagem */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-image-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 220px !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;

        margin: 0 auto 12px !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;

        overflow: hidden !important;
    }

    /* Imagem acompanha o quadrado */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-image {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;

        opacity: 1 !important;
    }

    /* Título */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-title {
        display: block !important;

        margin: 0 0 6px !important;
        padding: 0 !important;

        color: #c4161c !important;
        font-family: NunitoRegular, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        overflow: visible !important;
    }

    /*
     * Remove o corte visual por line-clamp.
     * O JavaScript passa a reduzir o texto de verdade.
     */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-description {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        color: rgba(0, 0, 0, 0.7) !important;
        font-family: NunitoRegular, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        overflow: visible !important;

        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        line-clamp: unset !important;
    }

    /* Durante o carregamento */
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading
    .ops-menu-preview-image {
        opacity: 0.55 !important;
    }

    /* Categoria sem imagem válida */
    li.submenu_custom_link.megamenu
    .ops-menu-preview.ops-no-image
    .ops-menu-preview-image-box {
        display: none !important;
    }
}

/* ======================================================================
   MEGAMENU — ALINHAR IMAGEM E TEXTOS NA MESMA LARGURA
====================================================================== */

@media (min-width: 768px) {

    /* Painel inteiro ocupa a largura disponível */
    li.submenu_custom_link.megamenu
    .ops-menu-preview {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Imagem quadrada com a mesma largura dos textos */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-image-box {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;

        margin: 0 0 12px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .ops-menu-preview-image {
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* Título e descrição seguem exatamente a largura da imagem */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-title,
    li.submenu_custom_link.megamenu
    .ops-menu-preview-description {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ======================================================================
   MEGAMENU — LOADING NA IMAGEM DO PRODUTO
====================================================================== */

@media (min-width: 768px) {

    /* O box precisa servir como referência para o loading */
    li.submenu_custom_link.megamenu
    .ops-menu-preview-image-box {
        position: relative !important;
    }

    /*
     * Durante o carregamento, mantém o box visível
     * mesmo que a categoria não possua imagem.
     */
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading
    .ops-menu-preview-image-box,
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading.ops-no-image
    .ops-menu-preview-image-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f4f4f4 !important;
    }

    /* Esconde a imagem da categoria durante o carregamento */
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading
    .ops-menu-preview-image {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Círculo de loading */
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading
    .ops-menu-preview-image-box::after {
        content: "" !important;

        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        width: 36px !important;
        height: 36px !important;

        margin-top: -18px !important;
        margin-left: -18px !important;

        border: 4px solid rgba(196, 22, 28, 0.18) !important;
        border-top-color: #c4161c !important;
        border-radius: 50% !important;

        box-sizing: border-box !important;

        animation:
            ops-menu-preview-loading 0.75s
            linear infinite !important;
    }

    /* Remove o loading depois que o produto carregar */
    li.submenu_custom_link.megamenu
    .ops-menu-preview:not(.is-loading)
    .ops-menu-preview-image-box::after {
        display: none !important;
        content: none !important;
    }
}

/* Animação do loading */
@keyframes ops-menu-preview-loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Respeita usuários que desativaram animações */
@media (prefers-reduced-motion: reduce) {
    li.submenu_custom_link.megamenu
    .ops-menu-preview.is-loading
    .ops-menu-preview-image-box::after {
        animation-duration: 1.5s !important;
    }
}


/* ======================================================================
   CALCULADORA DO PRODUTO
   Cabeçalho, título, texto de apoio e compartilhamento
====================================================================== */

/* Cabeçalho */
#price_calculator > .card-header {
  padding: 18px 22px 0 !important;
}

#price_calculator .card-header .card-title {
  margin: 0 !important;
  padding: 0 0 12px !important;
}

#price_calculator .card-header .card-title > .row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Título usando toda a largura do cabeçalho */
#price_calculator .card-header .row > .col-6:first-child {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* A coluna fica vazia depois que o JavaScript move o botão */
#price_calculator .card-header .row > .col-6:last-child {
  display: none !important;
}

/* Bloco do título */
#price_calculator .product-calculator-heading {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Título principal */
#price_calculator .product-calculator-heading h2 {
  width: 100%;
  margin: 0 0 5px !important;
  padding: 0 !important;

  color: #c82026 !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

/* Texto de apoio */
#price_calculator .product-calculator-heading p {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Área de compartilhamento dentro da calculadora do produto */
#pricecalulate .calculator-share-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  width: 100% !important;
  box-sizing: border-box !important;

  margin: 14px 0 0 !important;

  /*
   * superior | direita | inferior | esquerda
   * A direita está em 0 para alinhar o botão no limite do box.
   */
  padding: 12px 0 4px 22px !important;

  /* Mantém somente a linha acima do botão */
  border-top: 1px solid #ddd !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

/* Botão “Compartilhar produto” */
#pricecalulate .calculator-share-footer #generate_link {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  line-height: 24px !important;
  white-space: nowrap !important;
}

/* Distância entre a calculadora do produto e o box do frete */
#shippricecalulate {
  margin-top: 18px !important;
}

/* Ajustes para celular */
@media (max-width: 600px) {
  #price_calculator > .card-header {
    padding: 16px 16px 0 !important;
  }

  #price_calculator .product-calculator-heading h2 {
    font-size: 23px !important;
  }

  #pricecalulate .calculator-share-footer {
    padding: 10px 0 4px 16px !important;
  }
}



/* ======================================================================
   RESUMO DO PEDIDO — VERSÃO CONSOLIDADA
   Compatível com o JavaScript atual do tema.
====================================================================== */

/* Mantém os dados nativos do OPS no DOM e esconde apenas sua apresentação. */
#productpricetotal > :not(.ops-complete-price-summary) {
  display: none !important;
}

#price_calculator .ops-complete-price-summary,
#ops-mobile-floating-summary .ops-mobile-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 7px;
  font-size: 14px;
  line-height: 1.35;
}

/* Título do resumo. */
#price_calculator .ops-summary-heading {
  width: 100%;
  margin: 0;
  padding: 0 0 4px;
  color: #c4161c !important;
  -webkit-text-fill-color: #c4161c !important;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left !important;
}

/* Cabeçalho acrescentado pelo controle de recolhimento desktop. */
#price_calculator .ops-desktop-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

#price_calculator .ops-desktop-summary-header .ops-summary-heading {
  flex: 1 1 auto;
  width: auto;
  padding-bottom: 0;
}

/* Boxes do resumo. */
#price_calculator .ops-summary-box,
#ops-mobile-floating-summary .ops-summary-box {
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}

.ops-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  font-size: 14px;
  line-height: 1.35;
}

.ops-price-row > :last-child {
  text-align: right;
}

.ops-item-values {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  text-align: right;
}

[data-ops-field="item-price"] {
  font-size: 16px;
  font-weight: 800;
}

[data-ops-field="original-price"] {
  font-size: 13px;
  opacity: 0.68;
  text-decoration: line-through;
}

.ops-discount-row {
  width: 100%;
  margin-top: 2px;
  color: #c4161c !important;
  -webkit-text-fill-color: #c4161c !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}

.ops-shipping-row {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

[data-ops-field="shipping-value"] {
  font-size: 14px !important;
  font-weight: 600;
}

#productpricetotal:not(.ops-shipping-ready) .ops-shipping-row,
#ops-mobile-floating-summary:not(.ops-shipping-ready) .ops-shipping-row {
  display: none !important;
}

/* Tabela: Quantidade | Custo unitário | Total. */
.ops-table-box {
  padding: 0 !important;
  overflow: hidden;
}

.ops-summary-table {
  display: grid;
  grid-template-columns: minmax(75px, 0.75fr) minmax(115px, 1fr) minmax(115px, 1fr);
  width: 100%;
}

.ops-table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 9px 6px;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.10);
}

.ops-table-cell:nth-child(3n) {
  border-right: 0;
}

.ops-table-heading {
  padding: 7px 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.045);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

[data-ops-field="unit-value"] {
  font-weight: 800;
}

[data-ops-field="total-value"] {
  color: #c4161c !important;
  -webkit-text-fill-color: #c4161c !important;
  font-size: 17px;
  font-weight: 900;
}

/* Prazos. */
.ops-dates-box {
  padding: 0 !important;
  overflow: hidden;
}

.ops-dates-heading {
  width: 100%;
  padding: 7px 10px;
  color: #333 !important;
  -webkit-text-fill-color: #333 !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.045);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.ops-dates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.ops-date-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.3;
}

.ops-date-item + .ops-date-item {
  border-left: 1px solid rgba(0, 0, 0, 0.10);
}

.ops-date-item > span {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.72;
}

.ops-date-item strong {
  font-size: 14px;
  font-weight: 800;
}

.ops-date-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ops-date-icon {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  color: #c4161c !important;
  -webkit-text-fill-color: #c4161c !important;
  font-size: 13px;
  line-height: 1;
}

/* No estado sem frete o caminhão acompanha a orientação. */
#productpricetotal:not(.ops-shipping-ready) [data-ops-field="delivery-date"],
#ops-mobile-floating-summary:not(.ops-shipping-ready) [data-ops-field="delivery-date"] {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

/* Mensagem do box nativo de frete. */
#ops-shipping-message {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 8px;
  margin: 6px 0 0;
  padding: 7px 0;
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

#ops-shipping-message i {
  color: #c4161c !important;
  -webkit-text-fill-color: #c4161c !important;
  font-size: 14px;
}

#shipestimatetotalprice.ops-hide-native-shipping-total {
  display: none !important;
}

/* ======================================================================
   DESKTOP
====================================================================== */

@media (min-width: 768px) {
  /* O painel duplicado é exclusivo do mobile. */
  #ops-mobile-floating-summary {
    display: none !important;
  }

  /* Conteúdo completo do resumo original. */
  #price_calculator #productpricetotal .ops-desktop-full-summary {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 7px;
    margin-top: 7px;
  }

  #price_calculator #productpricetotal .ops-desktop-compact {
    display: none;
  }

  /* A seta só aparece quando o resumo estiver flutuando ou fixado. */
  #price_calculator #productpricetotal .ops-desktop-summary-toggle {
    display: none;
  }

  #price_calculator #productpricetotal.floating-price .ops-desktop-summary-toggle,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-desktop-summary-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  #price_calculator #productpricetotal .ops-desktop-summary-toggle i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 12px;
    transition: transform 0.2s ease;
  }

  /* Aparência vermelha do próprio resumo original. */
  #price_calculator #productpricetotal.floating-price,
  #price_calculator #productpricetotal.ops-desktop-pinned {
    overflow: hidden !important;
    padding: 12px 18px 10px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #c4161c !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.28) !important;
    box-sizing: border-box !important;
    z-index: 10020 !important;
  }

  /* Quando o JS fixa o box, preserva o alinhamento da coluna da calculadora. */
  #price_calculator #productpricetotal.ops-desktop-pinned {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    right: max(15px, calc((100vw - 1470px) / 2 + 15px)) !important;
    width: auto !important;
    max-width: 705px !important;
  }

  #price_calculator #productpricetotal.floating-price .ops-complete-price-summary,
  #price_calculator #productpricetotal.floating-price .ops-complete-price-summary *,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-complete-price-summary,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-complete-price-summary * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  #price_calculator #productpricetotal.floating-price .ops-summary-heading,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-summary-heading,
  #price_calculator #productpricetotal.floating-price .ops-discount-row,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-discount-row,
  #price_calculator #productpricetotal.floating-price [data-ops-field="total-value"],
  #price_calculator #productpricetotal.ops-desktop-pinned [data-ops-field="total-value"] {
    color: #ffd84d !important;
    -webkit-text-fill-color: #ffd84d !important;
  }

  #price_calculator #productpricetotal.floating-price .ops-summary-box,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-summary-box {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
  }

  #price_calculator #productpricetotal.floating-price .ops-table-heading,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-table-heading,
  #price_calculator #productpricetotal.floating-price .ops-dates-heading,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-dates-heading {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
  }

  #price_calculator #productpricetotal.floating-price .ops-table-cell,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-table-cell,
  #price_calculator #productpricetotal.floating-price .ops-shipping-row,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-shipping-row,
  #price_calculator #productpricetotal.floating-price .ops-date-item + .ops-date-item,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-date-item + .ops-date-item {
    border-color: rgba(255, 255, 255, 0.24) !important;
  }

  #price_calculator #productpricetotal.floating-price .ops-date-icon,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-date-icon,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-compact-truck {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Estado recolhido: o mesmo elemento diminui no rodapé. */
  #price_calculator #productpricetotal.ops-desktop-collapsed .ops-desktop-full-summary {
    display: none !important;
  }

  #price_calculator #productpricetotal.ops-desktop-collapsed .ops-desktop-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 14px;
    margin-top: 6px;
  }

  #price_calculator #productpricetotal.ops-desktop-collapsed {
    max-height: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    overflow: hidden !important;
  }

  #price_calculator #productpricetotal.ops-desktop-collapsed .ops-desktop-summary-toggle i {
    transform: rotate(180deg);
  }

  .ops-desktop-compact-price,
  .ops-desktop-compact-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .ops-desktop-compact-price {
    align-items: flex-start;
    text-align: left;
  }

  .ops-desktop-compact-date {
    align-items: flex-end;
    text-align: right;
  }

  .ops-desktop-compact-price > span,
  .ops-desktop-compact-date > span {
    width: 100%;
    font-size: 11px;
    opacity: 0.78;
  }

  .ops-desktop-compact-price > span {
    text-align: left;
  }

  .ops-desktop-compact-date > span {
    text-align: right;
  }

  .ops-desktop-compact-price strong {
    color: #ffd84d !important;
    -webkit-text-fill-color: #ffd84d !important;
    font-size: 18px;
    font-weight: 900;
  }

  .ops-desktop-compact-date-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 5px;
  }

  .ops-desktop-compact-date-value strong {
    font-size: 14px;
    font-weight: 800;
  }

  #productpricetotal .ops-desktop-compact .ops-compact-truck {
    display: none !important;
  }

  #productpricetotal.ops-shipping-ready .ops-desktop-compact .ops-compact-truck {
    display: inline-block !important;
  }
}

/* ======================================================================
   MOBILE
====================================================================== */

#ops-mobile-floating-summary {
  display: none;
}

@media (max-width: 767.98px) {
  /* O resumo original continua visível dentro da calculadora. */
  #price_calculator #productpricetotal,
  #price_calculator #productpricetotal.floating-price,
  #price_calculator #productpricetotal.ops-desktop-pinned {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #price_calculator #productpricetotal #ops-calculator-summary,
  #price_calculator #productpricetotal #ops-calculator-summary * {
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
  }

  #price_calculator #productpricetotal #ops-calculator-summary {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #price_calculator #productpricetotal #ops-calculator-summary .ops-summary-heading,
  #price_calculator #productpricetotal #ops-calculator-summary .ops-discount-row,
  #price_calculator #productpricetotal #ops-calculator-summary [data-ops-field="total-value"],
  #price_calculator #productpricetotal #ops-calculator-summary .ops-date-icon {
    color: #c4161c !important;
    -webkit-text-fill-color: #c4161c !important;
  }

  #price_calculator #productpricetotal #ops-calculator-summary .ops-summary-box {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
  }

  /* Painel flutuante independente e recolhível do mobile. */
  #ops-mobile-floating-summary {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10020;
    display: block;
    width: 100%;
    max-height: 75vh;
    padding: 10px 12px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #c4161c;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.26);
  }

  #ops-mobile-floating-summary,
  #ops-mobile-floating-summary * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  #ops-mobile-floating-summary .ops-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 7px;
  }

  #ops-mobile-floating-summary .ops-mobile-header > strong {
    flex: 1 1 auto;
    margin: 0;
    color: #ffd84d !important;
    -webkit-text-fill-color: #ffd84d !important;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
  }

  #ops-mobile-summary-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    padding: 0;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  #ops-mobile-summary-toggle i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transition: transform 0.2s ease;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed #ops-mobile-summary-toggle i {
    transform: rotate(180deg);
  }

  #ops-mobile-floating-summary .ops-mobile-details {
    display: flex;
  }

  #ops-mobile-floating-summary .ops-mobile-compact {
    display: none;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed .ops-mobile-details {
    display: none !important;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed .ops-mobile-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 12px;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed .ops-mobile-header {
    margin-bottom: 5px;
  }

  #ops-mobile-floating-summary .ops-summary-box {
    padding: 7px 8px;
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.26);
  }

  #ops-mobile-floating-summary .ops-discount-row,
  #ops-mobile-floating-summary [data-ops-field="total-value"] {
    color: #ffd84d !important;
    -webkit-text-fill-color: #ffd84d !important;
  }

  #ops-mobile-floating-summary .ops-table-heading,
  #ops-mobile-floating-summary .ops-dates-heading {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.24);
  }

  #ops-mobile-floating-summary .ops-table-cell,
  #ops-mobile-floating-summary .ops-shipping-row,
  #ops-mobile-floating-summary .ops-date-item + .ops-date-item {
    border-color: rgba(255, 255, 255, 0.24);
  }

  /* Prazos centralizados somente no flutuante mobile aberto. */
  #ops-mobile-floating-summary:not(.ops-mobile-collapsed) .ops-date-item {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #ops-mobile-floating-summary:not(.ops-mobile-collapsed) .ops-date-item > span,
  #ops-mobile-floating-summary:not(.ops-mobile-collapsed) .ops-date-value,
  #ops-mobile-floating-summary:not(.ops-mobile-collapsed) [data-ops-field="delivery-date"] {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  #ops-mobile-floating-summary .ops-date-icon,
  #ops-mobile-floating-summary .ops-compact-truck {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Compacto: preço à esquerda e prazo à direita. */
  #ops-mobile-floating-summary.ops-mobile-collapsed .ops-mobile-compact > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed [data-ops-field="compact-price-label"],
  #ops-mobile-floating-summary.ops-mobile-collapsed [data-ops-field="compact-price"] {
    width: 100%;
    text-align: left;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed [data-ops-field="compact-price"] {
    color: #ffd84d !important;
    -webkit-text-fill-color: #ffd84d !important;
    font-size: 17px;
    font-weight: 900;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed .ops-mobile-compact-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed [data-ops-field="compact-date-label"] {
    width: 100%;
    text-align: right;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed .ops-mobile-compact-date-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 5px;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed [data-ops-field="compact-date"] {
    width: auto;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
  }

  #ops-mobile-floating-summary .ops-compact-truck {
    display: none !important;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed.ops-shipping-ready .ops-compact-truck {
    display: inline-block !important;
  }

  /* Dimensões mais compactas no mobile. */
  .ops-table-cell {
    padding: 7px 4px;
    font-size: 12px;
  }

  .ops-table-heading {
    padding: 5px 3px;
    font-size: 9px;
  }

  .ops-date-item {
    padding: 7px 8px;
  }

  .ops-date-item > span {
    font-size: 11px;
  }

  .ops-date-item strong {
    font-size: 12px;
  }
}

/* ======================================================================
   AJUSTES FINAIS DO RESUMO FLUTUANTE
   Mantido em um único bloco para facilitar futuras revisões.
====================================================================== */

/* Ações do cabeçalho: recolher e fechar. */
.ops-summary-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.ops-desktop-summary-close,
#ops-mobile-summary-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

.ops-desktop-summary-close i,
#ops-mobile-summary-close i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 13px;
}

#ops-mobile-floating-summary.ops-mobile-closed {
  display: none !important;
}

@media (min-width: 768px) {
  /* O botão fechar aparece somente quando o resumo está flutuando. */
  #price_calculator #productpricetotal .ops-desktop-summary-close {
    display: none;
  }

  #price_calculator #productpricetotal.floating-price .ops-desktop-summary-close,
  #price_calculator #productpricetotal.ops-desktop-pinned .ops-desktop-summary-close {
    display: inline-flex;
  }

  /* Mantém o flutuante preso ao rodapé durante todo o scroll. */
  #price_calculator #productpricetotal.ops-desktop-pinned {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    z-index: 1040 !important;
    box-sizing: border-box !important;
  }

  /* Data e respectivo ícone alinhados à direita nas versões aberta e compacta. */
  #price_calculator #productpricetotal .ops-delivery-date-item,
  #price_calculator .ops-static-summary-copy .ops-delivery-date-item {
    align-items: flex-end;
    text-align: right;
  }

  #price_calculator #productpricetotal .ops-delivery-date-item > span,
  #price_calculator #productpricetotal .ops-delivery-date-item .ops-date-value,
  #price_calculator #productpricetotal .ops-delivery-date-item [data-ops-field="delivery-date"],
  #price_calculator .ops-static-summary-copy .ops-delivery-date-item > span,
  #price_calculator .ops-static-summary-copy .ops-delivery-date-item .ops-date-value,
  #price_calculator .ops-static-summary-copy .ops-delivery-date-item [data-ops-field="delivery-date"] {
    width: 100%;
    justify-content: flex-end;
    text-align: right;
  }

  /* O estado recolhido conserva uma única linha compacta e não cresce. */
  #price_calculator #productpricetotal.ops-desktop-collapsed {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 118px !important;
    padding: 9px 18px !important;
  }

  #price_calculator #productpricetotal.ops-desktop-collapsed .ops-desktop-summary-header {
    margin: 0 0 4px !important;
  }

  #price_calculator #productpricetotal.ops-desktop-collapsed .ops-desktop-compact {
    align-items: center;
    margin: 0 !important;
  }

  #price_calculator .ops-static-summary-copy {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 7px;
    margin: 0;
  }
}

@media (max-width: 767.98px) {
  /*
   * Dentro da calculadora não exibimos os controles e a versão compacta
   * destinados ao flutuante desktop. Isso elimina resíduos sob o título.
   */
  #price_calculator #ops-calculator-summary .ops-summary-actions,
  #price_calculator #ops-calculator-summary .ops-desktop-summary-toggle,
  #price_calculator #ops-calculator-summary .ops-desktop-summary-close,
  #price_calculator #ops-calculator-summary .ops-desktop-compact {
    display: none !important;
  }

  #price_calculator #ops-calculator-summary .ops-desktop-summary-header {
    margin: 0 0 6px !important;
    padding: 0 !important;
  }

  #price_calculator #ops-calculator-summary .ops-desktop-full-summary {
    display: flex !important;
    flex-direction: column;
    gap: 6px !important;
    margin: 0 !important;
  }

  #price_calculator #ops-calculator-summary .ops-summary-box {
    margin: 0 !important;
  }

  #price_calculator #ops-calculator-summary .ops-summary-table {
    grid-template-columns: minmax(68px, 0.8fr) minmax(92px, 1fr) minmax(92px, 1fr);
  }

  #price_calculator #ops-calculator-summary .ops-table-cell {
    min-width: 0;
    padding: 7px 3px !important;
    line-height: 1.2;
  }

  /* Recupera e mantém visível o caminhão vermelho na tabela da calculadora. */
  #price_calculator #ops-calculator-summary .ops-date-icon {
    display: inline-block !important;
    flex: 0 0 auto;
    color: #c4161c !important;
    -webkit-text-fill-color: #c4161c !important;
  }

  /* Cabeçalho móvel com os dois botões próximos e sem ocupar largura extra. */
  #ops-mobile-floating-summary .ops-mobile-header {
    gap: 4px;
  }

  #ops-mobile-floating-summary .ops-mobile-header > strong {
    min-width: 0;
  }

  #ops-mobile-summary-close {
    flex: 0 0 28px;
  }

  /* Mais destaque para o total no flutuante aberto e recolhido. */
  #ops-mobile-floating-summary [data-ops-field="total-value"] {
    font-size: 17px !important;
    line-height: 1.15;
    font-weight: 900 !important;
  }

  #ops-mobile-floating-summary.ops-mobile-collapsed [data-ops-field="compact-price"] {
    font-size: 20px !important;
    line-height: 1.1;
  }

  /* Caminhão integrado ao prazo, sem ocupar uma coluna ou linha separada. */
  #ops-mobile-floating-summary .ops-date-value,
  #ops-mobile-floating-summary .ops-mobile-compact-date-value {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  #ops-mobile-floating-summary .ops-date-icon,
  #ops-mobile-floating-summary .ops-compact-truck {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  #ops-mobile-floating-summary [data-ops-field="delivery-date"],
  #ops-mobile-floating-summary [data-ops-field="compact-date"] {
    width: auto !important;
  }
}

/* ======================================================================
   PRODUTOS PRONTOS — PREÇO E BOTÃO DE COMPRA
   Ativado pelo JS somente quando #predefined_product_type possui valor 1.
   Produtos personalizados não recebem a classe .ops-predefined-product.
====================================================================== */

/* O botão original permanece no fluxo normal da página. */
.ops-predefined-product #div_addinfo_save_box {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  justify-content: flex-end !important;
  text-align: right !important;
  margin-top: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ops-predefined-product #SubmitBtn,
.ops-predefined-product .ops-ready-buy-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
  background: #67e8a5 !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.ops-predefined-product #SubmitBtn i,
.ops-predefined-product .ops-ready-buy-button i {
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
}

.ops-predefined-product #SubmitBtn:hover,
.ops-predefined-product #SubmitBtn:focus,
.ops-predefined-product .ops-ready-buy-button:hover,
.ops-predefined-product .ops-ready-buy-button:focus {
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
  background: #67e8a5 !important;
}

.ops-predefined-product #SubmitBtn:hover i,
.ops-predefined-product #SubmitBtn:focus i,
.ops-predefined-product .ops-ready-buy-button:hover i,
.ops-predefined-product .ops-ready-buy-button:focus i {
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
}

.ops-ready-floating-buy {
  display: none;
  width: 100%;
  margin: 8px 0 0;
}

.ops-ready-floating-buy .ops-ready-buy-button {
  width: 100%;
}

@media (min-width: 768px) {
  /* A cópia aparece somente quando o resumo desktop está flutuando. */
  .ops-predefined-product
  #productpricetotal.floating-price
  .ops-ready-floating-buy,
  .ops-predefined-product
  #productpricetotal.ops-desktop-pinned
  .ops-ready-floating-buy {
    display: flex !important;
  }

  /* Reserva espaço para preço, prazo e compra no estado recolhido. */
  .ops-predefined-product
  #productpricetotal.ops-desktop-collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding-bottom: 12px !important;
  }

  .ops-predefined-product
  #productpricetotal.ops-desktop-collapsed
  .ops-ready-floating-buy {
    display: flex !important;
    visibility: visible !important;
  }
}

@media (max-width: 767.98px) {
  .ops-predefined-product #div_addinfo_save_box {
    display: flex !important;
    justify-content: stretch !important;
  }

  .ops-predefined-product #SubmitBtn {
    width: 100% !important;
  }

  /* Botão sempre disponível dentro do flutuante mobile. */
  .ops-predefined-product
  #ops-mobile-floating-summary
  .ops-ready-floating-buy {
    display: flex !important;
    margin-top: 7px;
  }

  .ops-predefined-product
  #ops-mobile-floating-summary.ops-mobile-closed
  .ops-ready-floating-buy {
    display: none !important;
  }
}

/* ======================================================================
   CORREÇÕES DE POSICIONAMENTO E REATIVAÇÃO
====================================================================== */

/* Atalho circular para recuperar um resumo flutuante fechado. */
#ops-summary-reactivate {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 1055;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c4161c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

#ops-summary-reactivate.ops-summary-reactivate-visible {
  display: inline-flex !important;
}

#ops-summary-reactivate i,
#ops-summary-reactivate svg {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#ops-summary-reactivate svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Espaçamento constante entre as três seções dentro da calculadora. */
#price_calculator #ops-calculator-summary .ops-desktop-full-summary,
#price_calculator .ops-static-summary-copy .ops-desktop-full-summary {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
}

@media (min-width: 768px) {
  /* O grupo caminhão + data fica unido; o conjunto continua à direita. */
  #price_calculator #productpricetotal .ops-delivery-date-item .ops-date-value,
  #price_calculator .ops-static-summary-copy .ops-delivery-date-item .ops-date-value {
    width: auto !important;
    align-self: flex-end;
    justify-content: flex-start !important;
    gap: 5px;
  }

  /* Flutuante menor que a largura dos boxes da calculadora. */
  #price_calculator #productpricetotal.floating-price,
  #price_calculator #productpricetotal.ops-desktop-pinned {
    left: auto !important;
    right: max(18px, calc((100vw - 1470px) / 2 + 18px)) !important;
    width: min(560px, calc(100vw - 36px)) !important;
    max-width: 560px !important;
  }

  /*
   * Estado fechado persistente. Mesmo que o OPS recoloque .floating-price
   * durante o scroll, o box continua estático e sem piscar na tela.
   */
  #price_calculator[data-ops-desktop-closed="true"] #productpricetotal,
  #price_calculator[data-ops-desktop-closed="true"] #productpricetotal.floating-price,
  #price_calculator[data-ops-desktop-closed="true"] #productpricetotal.ops-desktop-pinned {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  #price_calculator[data-ops-desktop-closed="true"] #productpricetotal .ops-desktop-summary-toggle,
  #price_calculator[data-ops-desktop-closed="true"] #productpricetotal .ops-desktop-summary-close {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  /* Caminhão sempre visível e vermelho no prazo da calculadora. */
  #price_calculator #ops-calculator-summary .ops-delivery-date-item .ops-date-value {
    display: inline-flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  #price_calculator #ops-calculator-summary .ops-delivery-date-item .ops-date-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #c4161c !important;
    -webkit-text-fill-color: #c4161c !important;
    font-size: 13px !important;
  }

  /* Total com maior destaque dentro da calculadora. */
  #price_calculator #ops-calculator-summary [data-ops-field="total-value"] {
    color: #c4161c !important;
    -webkit-text-fill-color: #c4161c !important;
    font-size: 17px !important;
    line-height: 1.15;
    font-weight: 900 !important;
  }

  /* Rótulo do frete permanece à esquerda, independentemente do valor. */
  #price_calculator #ops-calculator-summary .ops-shipping-row > span:first-child {
    flex: 1 1 auto;
    text-align: left !important;
  }

  #price_calculator #ops-calculator-summary .ops-shipping-row > span:last-child {
    flex: 0 1 auto;
    text-align: right !important;
  }

  #ops-summary-reactivate {
    right: 14px;
    bottom: 76px;
    width: 40px;
    height: 40px;
  }
}

/* ======================================================================
   COMPATIBILIDADE DOS ÍCONES E DESTAQUE DO RESUMO RECOLHIDO
====================================================================== */

@media (min-width: 768px) {
  /* Mantém o preço amarelo mesmo diante das regras brancas do box nativo. */
  #price_calculator
  #productpricetotal.ops-desktop-collapsed
  .ops-desktop-compact-price
  [data-ops-field="compact-price"] {
    color: #ffd84d !important;
    -webkit-text-fill-color: #ffd84d !important;
  }
}

@media (max-width: 767.98px) {
  /*
   * Compatível com Font Awesome 4 e 5. O código f0d1 corresponde ao
   * caminhão original e evita que outra regra do tema apague o ícone.
   */
  #price_calculator
  #ops-calculator-summary
  .ops-delivery-date-item
  .ops-date-icon {
    display: inline-block !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    overflow: visible !important;
    color: #c4161c !important;
    -webkit-text-fill-color: #c4161c !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 16px !important;
  }

  /*
   * O tema pinta diretamente o ::before do Font Awesome de branco.
   * É necessário corrigir o desenho interno, não apenas o elemento <i>.
   */
  #price_calculator
  #productpricetotal
  #ops-calculator-summary
  .ops-delivery-date-item
  .ops-date-icon::before {
    color: #c4161c !important;
    -webkit-text-fill-color: #c4161c !important;
  }
}

/* ======================================================================
   REGRA FINAL — BOTÕES DOS PRODUTOS PRONTOS
   Mantida no fim do arquivo para prevalecer sobre o tema nativo do OPS.
====================================================================== */

html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box {
  display: flex !important;
  position: static !important;
  inset: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 12px 0 0 !important;
  padding: 0 15px 0 0 !important;
  text-align: right !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
  background-color: #67e8a5 !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn i,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button i,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button i {
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
}

html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn i::before,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button i::before,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button i::before {
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
}

html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn:hover,
html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn:focus,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button:hover,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button:focus,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button:hover,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: #16a34a !important;
  background-image: none !important;
}

html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn:hover i,
html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn:focus i,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button:hover i,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button:focus i,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button:hover i,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button:focus i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn:hover i::before,
html body.ops-predefined-product
#product_info_predefined
#div_addinfo_save_box
#SubmitBtn:focus i::before,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button:hover i::before,
html body.ops-predefined-product
#price_calculator
#productpricetotal
.ops-ready-buy-button:focus i::before,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button:hover i::before,
html body.ops-predefined-product
#ops-mobile-floating-summary
.ops-ready-buy-button:focus i::before {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Seletor completo para vencer o limite nativo de 118px no recolhido. */
@media (min-width: 768px) {
  html body.ops-predefined-product
  #price_calculator
  #productpricetotal.ops-desktop-pinned.ops-desktop-collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 767.98px) {
  html body.ops-predefined-product
  #product_info_predefined
  #div_addinfo_save_box {
    padding-right: 0 !important;
  }

  html body.ops-predefined-product
  #product_info_predefined
  #div_addinfo_save_box
  #SubmitBtn {
    width: 100% !important;
  }

  /* Segunda ação no fluxo da página, imediatamente depois do frete. */
  html body.ops-predefined-product
  #ops-ready-shipping-buy {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 14px !important;
  }

  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-floating-buy {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button {
    width: 100% !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #086c3a !important;
    -webkit-text-fill-color: #086c3a !important;
    background: #67e8a5 !important;
  }

  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button i,
  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button i::before {
    color: #086c3a !important;
    -webkit-text-fill-color: #086c3a !important;
  }

  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button:hover,
  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button:focus {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #16a34a !important;
  }

  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button:hover i,
  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button:hover i::before,
  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button:focus i,
  html body.ops-predefined-product
  #ops-ready-shipping-buy
  .ops-ready-buy-button:focus i::before {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /*
   * O OPS fixa o botão original no rodapé do mobile. Como já existem
   * ações abaixo do frete e no resumo, ocultamos somente essa duplicata.
   */
  html body.ops-predefined-product
  #product_info_predefined
  #div_addinfo_save_box
  #SubmitBtn {
    display: none !important;
  }
}

/* ======================================================================
   AÇÕES DE ARTE NO RESUMO DOS PRODUTOS PERSONALIZADOS
   Ativadas somente quando #predefined_product_type possui valor 0.
====================================================================== */

.ops-art-actions {
  display: none;
  width: 100%;
  grid-template-columns: repeat(var(--ops-art-columns, 1), minmax(0, 1fr));
  gap: 6px;
  margin: 7px 0 0;
}

.ops-art-actions.ops-art-actions-designer {
  grid-template-columns: minmax(0, 1fr);
}

.ops-art-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  transition: color 0.25s, background-color 0.25s;
}

.ops-art-action i,
.ops-art-action i::before {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 14px !important;
}

/* Modelos prontos e criação com designer. */
.ops-art-action-models,
.ops-art-action-designer {
  color: #8a4b00 !important;
  -webkit-text-fill-color: #8a4b00 !important;
  background: #ffd84d !important;
}

.ops-art-action-models i,
.ops-art-action-models i::before,
.ops-art-action-designer i,
.ops-art-action-designer i::before {
  color: #8a4b00 !important;
  -webkit-text-fill-color: #8a4b00 !important;
}

.ops-art-action-models:hover,
.ops-art-action-models:focus,
.ops-art-action-designer:hover,
.ops-art-action-designer:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #f97316 !important;
}

.ops-art-action-models:hover i,
.ops-art-action-models:hover i::before,
.ops-art-action-models:focus i,
.ops-art-action-models:focus i::before,
.ops-art-action-designer:hover i,
.ops-art-action-designer:hover i::before,
.ops-art-action-designer:focus i,
.ops-art-action-designer:focus i::before {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Faça a sua Arte. */
.ops-art-action-create {
  color: #0b3b8c !important;
  -webkit-text-fill-color: #0b3b8c !important;
  background: #60a5fa !important;
}

.ops-art-action-create i,
.ops-art-action-create i::before {
  color: #0b3b8c !important;
  -webkit-text-fill-color: #0b3b8c !important;
}

.ops-art-action-create:hover,
.ops-art-action-create:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #2563eb !important;
}

.ops-art-action-create:hover i,
.ops-art-action-create:hover i::before,
.ops-art-action-create:focus i,
.ops-art-action-create:focus i::before {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Enviar arquivo. */
.ops-art-action-upload {
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
  background: #67e8a5 !important;
}

.ops-art-action-upload i,
.ops-art-action-upload i::before {
  color: #086c3a !important;
  -webkit-text-fill-color: #086c3a !important;
}

.ops-art-action-upload:hover,
.ops-art-action-upload:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #16a34a !important;
}

.ops-art-action-upload:hover i,
.ops-art-action-upload:hover i::before,
.ops-art-action-upload:focus i,
.ops-art-action-upload:focus i::before {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Enviar a arte depois: mantém o vermelho original sobre fundo branco. */
.ops-art-action-later {
  color: #c4161c !important;
  -webkit-text-fill-color: #c4161c !important;
  background: #fff !important;
}

.ops-art-action-later:hover,
.ops-art-action-later:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #c4161c !important;
}

@media (min-width: 768px) {
  /* Ações apenas no box quando ele estiver efetivamente flutuando. */
  html body.ops-custom-product
  #price_calculator
  #productpricetotal.floating-price
  .ops-art-actions,
  html body.ops-custom-product
  #price_calculator
  #productpricetotal.ops-desktop-pinned
  .ops-art-actions {
    display: grid !important;
  }

  /* O conteúdo recolhido cresce para acomodar as ações sem cortes. */
  html body.ops-custom-product
  #price_calculator
  #productpricetotal.ops-desktop-pinned.ops-desktop-collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 767.98px) {
  html body.ops-custom-product
  #ops-mobile-floating-summary
  .ops-art-actions {
    display: grid !important;
  }

  html body.ops-custom-product
  #ops-mobile-floating-summary {
    overflow-y: auto !important;
  }

  html body.ops-custom-product
  #ops-mobile-floating-summary.ops-mobile-closed
  .ops-art-actions {
    display: none !important;
  }
}

/* ======================================================================
   CORES FINAIS DAS AÇÕES DE ARTE
   Seletores completos impedem que o branco geral do flutuante vença.
====================================================================== */

.ops-art-action-models {
  --ops-art-bg: #ffd84d;
  --ops-art-fg: #8a4b00;
  --ops-art-hover-bg: #f97316;
  --ops-art-hover-fg: #fff;
}

.ops-art-action-create {
  --ops-art-bg: #60a5fa;
  --ops-art-fg: #0b3b8c;
  --ops-art-hover-bg: #2563eb;
  --ops-art-hover-fg: #fff;
}

.ops-art-action-upload {
  --ops-art-bg: #67e8a5;
  --ops-art-fg: #086c3a;
  --ops-art-hover-bg: #16a34a;
  --ops-art-hover-fg: #fff;
}

.ops-art-action-later {
  --ops-art-bg: #e5e7eb;
  --ops-art-fg: #111827;
  --ops-art-hover-bg: #4b5563;
  --ops-art-hover-fg: #fff;
}

/* O original de contratação permanece verde também no hover. */
.ops-art-action-designer {
  --ops-art-bg: #67e8a5;
  --ops-art-fg: #086c3a;
  --ops-art-hover-bg: #16a34a;
  --ops-art-hover-fg: #fff;
}

html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action {
  color: var(--ops-art-fg) !important;
  -webkit-text-fill-color: var(--ops-art-fg) !important;
  background-color: var(--ops-art-bg) !important;
  background-image: none !important;
}

html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action i,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action span,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action i::before,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action i,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action span,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action i::before {
  color: var(--ops-art-fg) !important;
  -webkit-text-fill-color: var(--ops-art-fg) !important;
}

html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:hover,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:focus,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:hover,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:focus {
  color: var(--ops-art-hover-fg) !important;
  -webkit-text-fill-color: var(--ops-art-hover-fg) !important;
  background-color: var(--ops-art-hover-bg) !important;
  background-image: none !important;
}

html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:hover i,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:hover span,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:hover i::before,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:focus i,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:focus span,
html body.ops-custom-product
#price_calculator
#productpricetotal
.ops-art-actions
.ops-art-action:focus i::before,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:hover i,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:hover span,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:hover i::before,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:focus i,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:focus span,
html body.ops-custom-product
#ops-mobile-floating-summary
.ops-art-actions
.ops-art-action:focus i::before {
  color: var(--ops-art-hover-fg) !important;
  -webkit-text-fill-color: var(--ops-art-hover-fg) !important;
}