/*
 * Meios de pagamento (inc/pagamentos.php): ficha, editor, checkout, carrinho e gaveta.
 * Ficheiro próprio (era um <style> no rodapé só das fichas e do checkout) porque a gaveta
 * do carrinho existe em todas as páginas.
 */
.mt-pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:12px 0 0;text-align:center}
/* ~12 px entre o botão e os ícones em todo o lado: na ficha o contentor do editor já põe 12 px de gap;
   no checkout o bloco do botão tem 36 px de margem em baixo, que colapsa com esta — o negativo desconta-os */
#mc5-open+.mt-pag{margin-top:0}
.wc-block-checkout__actions+.mt-pag{margin-top:-24px}
.mt-pag__titulo{display:inline-flex;align-items:center;gap:6px;margin:0;font-family:var(--mx-global-typography-text-font-family,"Plus Jakarta Sans"),sans-serif;font-size:12.5px;line-height:1.3;font-weight:500;color:var(--mx-global-color-tinta-3,#6B6B68)}
.mt-pag__lista{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.mt-pag__lista li{margin:0;padding:0;list-style:none}
.mt-pag__lista img{display:block;width:auto;height:22px;border-radius:4px}
.mt-pag--compacta{margin:6px 0 0;gap:0}
/* telemóvel: «Pagamento seguro» e os 8 ícones cabem numa linha (~345 px) com ícones de 16 px */
@media (max-width:480px){.mt-pag{gap:6px}.mt-pag__titulo{font-size:12px;gap:4px}.mt-pag__lista{gap:2px}.mt-pag__lista img{height:16px;border-radius:3px}}
/* Telemóveis de 360 px: o título e os oito ícones ainda cabem numa linha. */
@media (max-width:374px){.mt-pag{gap:5px}.mt-pag__titulo{font-size:11.5px}.mt-pag__lista img{height:14px}}
.mt-pag--compacta .mt-pag__titulo{display:none}
.mt-pag--compacta .mt-pag__lista{gap:5px}
.mt-pag--compacta .mt-pag__lista img{height:18px}
/* Gaveta do carrinho (matter-store cart/panel.php chama matter_pagamentos_html()):
   painel de ~380 px úteis no computador — título e oito ícones numa linha com 17 px. */
.mt-pag--gaveta{margin:14px 0 0;gap:6px 8px}
.mt-pag--gaveta .mt-pag__lista{gap:4px}
.mt-pag--gaveta .mt-pag__lista img{height:17px;border-radius:3px}
/* Página do carrinho (blocos): por baixo do «Finalizar compra»; no telemóvel dentro da barra fixa.
   No computador a coluna do resumo tem ~360 px: ícones de 17 px para caber tudo numa linha. */
.mt-pag--carrinho{margin:10px 0 0}
@media (min-width:481px){
  .mt-pag--carrinho{gap:6px 8px}
  .mt-pag--carrinho .mt-pag__titulo{font-size:12px}
  .mt-pag--carrinho .mt-pag__lista{gap:3px}
  .mt-pag--carrinho .mt-pag__lista img{height:15px;border-radius:3px}
}
/* Gaveta no telemóvel (~319 px úteis, medido): título de 11 px e ícones de 14 px numa linha. */
@media (max-width:480px){
  .mt-pag--gaveta{gap:4px}
  .mt-pag--gaveta .mt-pag__titulo{font-size:11px;gap:4px}
  .mt-pag--gaveta .mt-pag__lista{gap:2px}
  .mt-pag--gaveta .mt-pag__lista img{height:14px}
}