/* Carrinho lateral (side-cart-woocommerce) e cesta de cotacao (Addify RFQ).
   Os dois paineis chegavam com o visual de fabrica dos plugins - preto, caixa
   alta, tipografia do tema - e destoavam do resto do site. Aqui eles passam a
   usar a mesma paleta, a mesma tipografia e a mesma hierarquia de botao das
   paginas de serie, produto, categoria e pesquisa.

   O que da para resolver na configuracao do plugin (textos, enderecos, ordem
   dos botoes, largura) foi resolvido la. Isto aqui e so aparencia. */

:root{
  --mc-azul:#0067FF; --mc-azul-forte:#0047B3; --mc-azul-claro:#EBF2FF;
  --mc-tinta:#0F172A; --mc-tinta-2:#364151; --mc-cinza:#5B6577;
  --mc-linha:#E4EAF1; --mc-fundo:#F6F8FB; --mc-vermelho:#D92D20;
  --mc-disp:Poppins,-apple-system,"Segoe UI",sans-serif;
  --mc-texto:"DM Sans",-apple-system,"Segoe UI",sans-serif;
  --mc-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* =======================================================================
   1. CARRINHO LATERAL
   ==================================================================== */

.xoo-wsc-container{font-family:var(--mc-texto);color:var(--mc-tinta-2)}
.xoo-wsc-container *{box-sizing:border-box}

/* -- cabecalho -- */
.xoo-wsc-container .xoo-wsc-header{background:#fff;border-bottom:1px solid var(--mc-linha)}
.xoo-wsc-container .xoo-wsch-top{display:flex;align-items:center;gap:10px;padding:16px 18px}
.xoo-wsc-container .xoo-wsch-text{font-family:var(--mc-disp);font-size:17px;font-weight:600;
  color:var(--mc-tinta);letter-spacing:-.01em;margin:0;flex:1 1 auto;text-align:left}
/* a cesta e a contagem viram uma pastilha, do mesmo azul do gatilho no topo */
.xoo-wsc-container .xoo-wsch-basket{display:flex;align-items:center;gap:6px;flex:0 0 auto;
  background:var(--mc-azul-claro);color:var(--mc-azul);border-radius:99px;padding:5px 11px 5px 9px}
.xoo-wsc-container .xoo-wscb-icon{font-size:15px;color:var(--mc-azul)}
.xoo-wsc-container .xoo-wscb-count{position:static;font-family:var(--mc-disp);font-size:12.5px;
  font-weight:600;color:var(--mc-azul);background:none;min-width:0;width:auto;height:auto;
  line-height:1;padding:0;border-radius:0}
.xoo-wsc-container .xoo-wsch-close{flex:0 0 auto;width:30px;height:30px;display:flex;
  align-items:center;justify-content:center;border-radius:6px;font-size:16px;
  color:var(--mc-cinza);transition:background .15s,color .15s}
.xoo-wsc-container .xoo-wsch-close:hover{background:var(--mc-fundo);color:var(--mc-tinta)}

/* -- corpo -- */
.xoo-wsc-container .xoo-wsc-body{background:#fff}
.xoo-wsc-container .xoo-wsc-product{display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border-bottom:1px solid var(--mc-linha);background:#fff;
  box-shadow:none;border-radius:0;margin:0}
.xoo-wsc-container .xoo-wsc-product:last-child{border-bottom:0}

/* a miniatura ganha um ladrilho: as fotos da Mean Well tem fundo branco e
   sem a moldura o produto flutuava solto na coluna */
.xoo-wsc-container .xoo-wsc-img-col{flex:0 0 64px;width:64px;height:64px;
  background:var(--mc-fundo);border:1px solid var(--mc-linha);border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px}
.xoo-wsc-container .xoo-wsc-img-col a{display:flex;width:100%;height:100%;
  align-items:center;justify-content:center}
.xoo-wsc-container .xoo-wsc-img-col img{width:auto;max-width:100%;max-height:100%;
  height:auto;object-fit:contain;border-radius:0}

.xoo-wsc-container .xoo-wsc-sum-col{flex:1 1 auto;min-width:0}
.xoo-wsc-container .xoo-wsc-sm-info{display:flex;gap:10px;align-items:flex-start}
.xoo-wsc-container .xoo-wsc-sm-left{flex:1 1 auto;min-width:0}
.xoo-wsc-container .xoo-wsc-sm-right{flex:0 0 auto}

/* os titulos da Mean Well tem 80+ caracteres; sem limite, um item sozinho
   ocupava meia tela. O nome completo continua no title do link. */
.xoo-wsc-container .xoo-wsc-pname a{text-decoration:none}
.xoo-wsc-container .xoo-wsc-pname .ast-product-name,
.xoo-wsc-container .xoo-wsc-pname > a{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;font-family:var(--mc-texto);font-size:13.5px;
  font-weight:600;line-height:1.4;color:var(--mc-tinta)}
.xoo-wsc-container .xoo-wsc-pname a:hover .ast-product-name{color:var(--mc-azul)}

/* "1XR$ 249,98=R$ 249,98" saia sem um espaco sequer */
.xoo-wsc-container .xoo-wsc-qty-price{display:flex;align-items:baseline;flex-wrap:wrap;
  gap:5px;margin-top:7px;font-size:13px;color:var(--mc-cinza);line-height:1.5}
.xoo-wsc-container .xoo-wsc-qty-price > span:nth-child(2),
.xoo-wsc-container .xoo-wsc-qty-price > span:nth-child(4){color:#98A2B3;font-size:11.5px}
.xoo-wsc-container .xoo-wsc-qty-price > span:last-child{font-family:var(--mc-disp);
  font-size:14px;font-weight:600;color:var(--mc-tinta)}
.xoo-wsc-container .xoo-wsc-qty-price .amount{font:inherit;color:inherit}

.xoo-wsc-container .xoo-wsc-smr-del{width:28px;height:28px;display:flex;align-items:center;
  justify-content:center;border-radius:6px;font-size:14px;color:#98A2B3;
  transition:background .15s,color .15s}
.xoo-wsc-container .xoo-wsc-smr-del:hover{background:#FEF3F2;color:var(--mc-vermelho)}

/* caixinha de quantidade, quando ligada */
.xoo-wsc-container .xoo-wsc-qty-box{border-radius:6px;overflow:hidden}
.xoo-wsc-container .xoo-wsc-qty{font-family:var(--mc-texto);color:var(--mc-tinta)}

/* carrinho vazio */
.xoo-wsc-container .xoo-wsc-empty-cart{gap:14px}
.xoo-wsc-container .xoo-wsc-emp-txt{font-family:var(--mc-disp);font-size:15.5px;
  font-weight:600;color:var(--mc-tinta)}

/* -- rodape -- */
.xoo-wsc-container .xoo-wsc-footer{background:#fff;border-top:1px solid var(--mc-linha);
  box-shadow:none}
.xoo-wsc-container .xoo-wsc-ft-amt{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:0 0 14px}
.xoo-wsc-container .xoo-wsc-ft-amt-label{font-family:var(--mc-mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mc-cinza)}
/* alguem punha ":" por ::after; com o rotulo espacado saia "SUBTOTAL :", e o
   valor ja esta alinhado a direita - o dois-pontos nao acrescenta nada */
.xoo-wsc-container .xoo-wsc-ft-amt-label::after{content:none}
.xoo-wsc-container .xoo-wsc-ft-amt-value{font-family:var(--mc-disp);font-size:20px;
  font-weight:700;color:var(--mc-tinta);letter-spacing:-.01em}
.xoo-wsc-container .xoo-wsc-ft-buttons-cont{display:flex;flex-direction:column;gap:9px}

/* Hierarquia: fechar o pedido e a acao principal, ver o carrinho e a
   alternativa, continuar comprando e so uma saida. Os tres chegavam
   identicos, pretos e em caixa alta.
   A regra do plugin e ".xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn" (0,2,1);
   as daqui somam (0,3,1) e vencem sem !important. */
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn{font-family:var(--mc-texto);
  font-size:15px;font-weight:700;text-transform:none;letter-spacing:0;border-radius:6px;
  padding:13px 20px;text-align:center;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout{background:var(--mc-azul);
  color:#fff;border:1px solid var(--mc-azul)}
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout:hover{
  background:var(--mc-azul-forte);border-color:var(--mc-azul-forte);color:#fff}
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart{background:#fff;
  color:var(--mc-azul);border:1px solid var(--mc-linha)}
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart:hover{
  background:var(--mc-azul-claro);border-color:var(--mc-azul);color:var(--mc-azul-forte)}
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue{background:transparent;
  color:var(--mc-cinza);border:0;font-weight:500;font-size:14px;padding:4px 0 2px}
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue:hover{
  background:transparent;color:var(--mc-tinta)}
/* o botao do carrinho vazio segue o principal */
.xoo-wsc-container a.xoo-wsc-btn{font-family:var(--mc-texto);font-weight:700;
  text-transform:none;border-radius:6px}

/* rolagem discreta */
.xoo-wsc-container .xoo-wsc-body{scrollbar-width:thin;scrollbar-color:var(--mc-linha) transparent}
.xoo-wsc-container .xoo-wsc-body::-webkit-scrollbar{width:6px}
.xoo-wsc-container .xoo-wsc-body::-webkit-scrollbar-thumb{background:var(--mc-linha);border-radius:99px}

/* O balao flutuante do WhatsApp fica no canto inferior direito e caia
   exatamente sobre o "Finalizar pedido". Enquanto o carrinho esta aberto ele
   sai de cena - o painel tem o WhatsApp no rodape do site de qualquer forma. */
/* o !important e necessario: o widget entra por uma animacao CSS, e valores
   de animacao ficam acima das declaracoes normais na cascata */
body.xoo-wsc-cart-active #ht-ctc-chat,
body.xoo-wsc-cart-active .ht-ctc-cta{opacity:0!important;pointer-events:none!important;
  transition:opacity .2s}

/* =======================================================================
   2. CESTA DE COTACAO
   ==================================================================== */

/* 260px de largura punham o titulo do produto em seis linhas */
.mini-quote-dropdown{width:380px;max-width:min(380px,calc(100vw - 32px));left:auto;right:0;
  background:#fff;border:1px solid var(--mc-linha);border-radius:10px;
  box-shadow:0 18px 44px rgba(15,23,42,.14);padding:0;overflow:hidden;
  font-family:var(--mc-texto);color:var(--mc-tinta-2)}
.mini-quote-dropdown *{box-sizing:border-box}
/* faixa de titulo: o painel abria direto nos itens, sem dizer o que era */
.mini-quote-dropdown::before{content:"Cotação em andamento";display:block;
  font-family:var(--mc-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mc-cinza);padding:14px 16px 12px;border-bottom:1px solid var(--mc-linha)}

.mini-quote-dropdown ul.addify-rfq-mini-cart{margin:0!important;padding:6px 0!important;
  min-width:0;max-width:none;max-height:320px;list-style:none;
  scrollbar-width:thin;scrollbar-color:var(--mc-linha) transparent}
.mini-quote-dropdown ul::-webkit-scrollbar{width:6px}
.mini-quote-dropdown ul::-webkit-scrollbar-track{box-shadow:none;background:transparent}
.mini-quote-dropdown ul::-webkit-scrollbar-thumb{background:var(--mc-linha);
  border-radius:99px;outline:0}

/* o <ul> tambem carrega .product_list_widget, e o Astra desenha ali uma linha
   quase preta - por isso as classes do caminho todo, que levam a (0,3,1) */
.mini-quote-dropdown ul.quote_list li.addify-rfq-mini-cart-item{display:flex!important;gap:12px;
  align-items:flex-start;padding:12px 42px 12px 16px!important;margin:0;min-height:0;
  border-bottom:1px solid var(--mc-linha)}
.mini-quote-dropdown ul.quote_list li.addify-rfq-mini-cart-item:last-child{border-bottom:0}
.mini-quote-dropdown ul.quote_list li.addify-rfq-mini-cart-item:hover{background:var(--mc-fundo)}

.mini-quote-dropdown .arfq-pro-thumbnail{flex:0 0 52px;width:52px;height:52px;
  background:var(--mc-fundo);border:1px solid var(--mc-linha);border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px;
  position:static}
.mini-quote-dropdown .arfq-pro-thumbnail img{width:auto!important;max-width:100%!important;
  max-height:100%!important;height:auto!important;object-fit:contain}

/* "Remove" era uma palavra solta embaixo da miniatura; vira um X no canto.
   O X e desenhado com duas barras em vez do caractere U+00D7: o arquivo e
   servido sem charset no cabecalho e o glifo nao aparecia. */
/* o plugin traz "width:auto!important" aqui, e o link nascia com 0px de
   largura - o X existia mas nao ocupava espaco nenhum. min-width nao briga
   com a largura automatica, so estabelece o piso. */
/* o plugin traz "width:auto!important" aqui, e o link nascia com 0px de
   largura - o X existia mas nao ocupava espaco nenhum. min-width nao briga
   com a largura automatica, so estabelece o piso.
   O X e um SVG embutido: como caractere (U+00D7) ele nao aparecia, e como par
   de barras giradas so uma das duas pseudo saia. Assim e uma declaracao so. */
.mini-quote-dropdown li a.quote-remove{position:absolute;top:10px;right:10px;
  min-width:24px;height:24px;display:block!important;border-radius:6px;
  font-size:0!important;line-height:0;opacity:1;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px 13px;
  transition:background-color .15s}
.mini-quote-dropdown li a.quote-remove:hover{background-color:#FEF3F2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D92D20' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}

.mini-quote-dropdown .arfq-pro-detail{padding:0;flex:1 1 auto;min-width:0}
/* o <ul> carrega .product_list_widget, e o Astra tem
   ".woocommerce ul.product_list_widget li a{display:block}" - (0,2,3) contra os
   (0,2,1) daqui. O nome saia em tres, quatro linhas. Somando as classes que ja
   estao no caminho a regra vai a (0,4,2) e vence sem !important. */
.mini-quote-dropdown ul.quote_list li.addify-rfq-mini-cart-item .arfq-pro-detail a{
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;font-family:var(--mc-texto);
  font-size:13.5px!important;font-weight:600!important;line-height:1.4;
  color:var(--mc-tinta);text-decoration:none}
.mini-quote-dropdown .arfq-pro-detail a:hover{color:var(--mc-azul)}
.mini-quote-dropdown .arfq-pro-price{font-family:var(--mc-disp);font-size:14px;
  font-weight:600;color:var(--mc-tinta);margin-top:5px;line-height:1.4}
.mini-quote-dropdown .arfq-pro-qty{font-size:12.5px;color:var(--mc-cinza);line-height:1.5}

.mini-quote-dropdown p.total{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:14px 16px;margin:0;border-top:1px solid var(--mc-linha);text-align:left;
  min-width:0;width:auto}
.mini-quote-dropdown p.total strong{font-family:var(--mc-mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mc-cinza);font-weight:400}
.mini-quote-dropdown p.total .amount{font-family:var(--mc-disp);font-size:18px;
  font-weight:700;color:var(--mc-tinta)}

.mini-quote-dropdown .buttons{display:block;padding:0 16px 16px;min-width:0;width:auto}
.mini-quote-dropdown a#view-quote{display:block;width:100%;background:var(--mc-azul);
  color:#fff;border:1px solid var(--mc-azul);border-radius:6px;font-family:var(--mc-texto);
  font-size:15px;font-weight:700;line-height:1.4;padding:13px 20px;text-align:center;
  text-transform:none;text-decoration:none;transition:background .15s,border-color .15s}
.mini-quote-dropdown a#view-quote:hover{background:var(--mc-azul-forte);
  border-color:var(--mc-azul-forte);color:#fff}

.mini-quote-dropdown .addify-rfq-mini-cart__empty-message{padding:22px 16px 24px;margin:0;
  text-align:center;white-space:normal;font-size:14px;color:var(--mc-cinza)}

@media (max-width:600px){
  .mini-quote-dropdown{width:min(320px,calc(100vw - 24px))}
}