/* Matter Cart — widget de carrinho. Tudo escopado a .mc-cart. */ .mc-cart{ --mcc-accent:#4A7259; --mcc-ink:#0F0F0F; --mcc-mute:#888; --mcc-line:#EBEBEB; --mcc-soft:#F9F9F9; /* fonte global do Elementor, com a da marca como fallback */ --mcc-font:var(--e-global-typography-text-font-family, 'Plus Jakarta Sans'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; position:relative;display:inline-flex;line-height:0; } .mc-cart__panel,.mc-cart__panel *{font-family:var(--mcc-font)} /* ── ícone + contador ─────────────────────────────────────────────────── */ /* O reset do tema traz `[type="button"]:focus, button:focus{background:#cc3366; color:#fff}` — mais específico do que `.mc-cart__toggle` — e o ícone ficava branco (invisível no header branco) assim que era clicado. Duplicar a classe leva o seletor a (0,3,0), que vence o (0,2,1) do tema sem precisar de `!important`. `!important` aqui seria pior: passaria também por cima do que o Elementor gera a partir dos controlos de cor e tamanho, que é o motivo de a cor e o tamanho virem de variáveis (ver class-widget.php). */ .mc-cart .mc-cart__toggle.mc-cart__toggle, .mc-cart .mc-cart__toggle.mc-cart__toggle:hover, .mc-cart .mc-cart__toggle.mc-cart__toggle:focus, .mc-cart .mc-cart__toggle.mc-cart__toggle:focus-visible, .mc-cart .mc-cart__toggle.mc-cart__toggle:active{ position:relative;display:inline-flex;align-items:center;justify-content:center; background:transparent;border:0;box-shadow:none;text-decoration:none; padding:6px;margin:0;cursor:pointer;border-radius:8px; color:var(--mcc-icon, var(--mcc-ink)); font-size:var(--mcc-icon-size, 22px);line-height:1; -webkit-tap-highlight-color:transparent;transition:opacity .15s ease; } .mc-cart .mc-cart__toggle.mc-cart__toggle:hover{opacity:.65} .mc-cart__toggle:focus-visible{outline:2px solid var(--mcc-accent);outline-offset:2px} .mc-cart__toggle svg,.mc-cart__toggle i{width:1em;height:1em;font-size:inherit} .mc-cart__toggle svg{fill:currentColor} .mc-cart__count{ position:absolute;top:-2px;right:-4px; min-width:18px;height:18px;padding:0 5px; display:inline-flex;align-items:center;justify-content:center; background:var(--mcc-accent);color:#fff; font-size:11px;font-weight:700;line-height:1;border-radius:999px; font-variant-numeric:tabular-nums; } .mc-cart__count.is-empty{display:none} /* ── painel lateral ───────────────────────────────────────────────────── */ .mc-cart__backdrop{ position:fixed;inset:0;z-index:1290;background:rgba(15,15,15,.45); /* = drawer do menu */ opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s; } /* Duas formas de marcar o estado aberto: a segunda vale depois de o JS mover o painel para o (ver cart.js), altura em que ele deixa de ser descendente de .mc-cart. */ .mc-cart.is-open .mc-cart__backdrop, .mc-cart__backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto} .mc-cart__panel{ position:fixed;top:0;right:0;bottom:0;z-index:1300; max-width:90vw; /* trava para mobile: a largura vem do controlo do Elementor */ display:flex;flex-direction:column; background:#fff;color:var(--mcc-ink); border-radius:var(--mf-radius,12px) 0 0 var(--mf-radius,12px); /* = drawer do menu */ box-shadow:-8px 0 40px rgba(15,15,15,.16); transform:translateX(100%); transition:transform .28s cubic-bezier(.32,.72,.28,1); /* = drawer do menu */ line-height:1.5;text-align:left; } .mc-cart.is-open .mc-cart__panel, .mc-cart__panel.is-open{transform:translateX(0)} .mc-cart__head{ display:flex;align-items:center;justify-content:space-between; padding:18px 20px 14px;border-bottom:1px solid var(--mcc-line);flex:none; } .mc-cart__title{font-size:17px;font-weight:600} /* = cabeça do drawer do menu */ /* Mesma história do ícone do carrinho: o `button:focus{color:#fff}` do reset do tema ganhava a `.mc-cart__close`, e como o painel é branco o × desaparecia, ficando só o anel de foco — o quadrado vazio. Este seletor está em (0,3,1), acima do (0,2,1) do tema. O × é agora um SVG, para também não depender da fonte. */ .mc-cart .mc-cart__panel button.mc-cart__close, .mc-cart .mc-cart__panel button.mc-cart__close:hover, .mc-cart .mc-cart__panel button.mc-cart__close:focus, .mc-cart .mc-cart__panel button.mc-cart__close:focus-visible, .mc-cart .mc-cart__panel button.mc-cart__close:active{ display:flex;align-items:center;justify-content:center; width:32px;height:32px;padding:0;margin:0; background:transparent;border:0;box-shadow:none;text-decoration:none; color:var(--mcc-mute);cursor:pointer;border-radius:8px; -webkit-tap-highlight-color:transparent;transition:color .15s ease,background .15s ease; } .mc-cart .mc-cart__panel button.mc-cart__close:hover{color:var(--mcc-ink);background:#F2F2F0} .mc-cart .mc-cart__panel button.mc-cart__close:focus-visible{outline:2px solid var(--mcc-accent);outline-offset:2px} .mc-cart__close svg{display:block;width:16px;height:16px} /* o painel recebe o foco ao abrir (ver cart.js) e não deve mostrar anel */ .mc-cart__panel:focus{outline:none} /* Quem faz scroll é a lista de artigos, não este contentor: assim a barra de envio fica presa em cima e o rodapé (subtotal + finalizar compra) fica sempre visível em baixo, mesmo com o carrinho cheio. */ .mc-cart__panel-inner{ flex:1;min-height:0;display:flex;flex-direction:column; padding:16px 20px 20px;overflow:hidden; } /* ── barra de envio grátis ────────────────────────────────────────────── */ .mc-ship{background:var(--mcc-soft);border-radius:10px;padding:12px 14px;margin-bottom:16px;flex:none} .mc-ship__msg{display:block;font-size:13px;color:var(--mcc-mute);margin-bottom:8px} .mc-ship__msg strong{color:var(--mcc-ink);font-weight:600} .mc-ship__track{height:4px;background:#EBEBEB;border-radius:99px;overflow:hidden} .mc-ship__fill{height:100%;background:var(--mcc-accent);border-radius:99px;transition:width .4s ease} /* ── artigos ──────────────────────────────────────────────────────────── */ /* `min-height:0` é obrigatório: sem ele o flex nunca deixa esta lista encolher abaixo do conteúdo e ela empurra o rodapé para fora do painel. Com ele, e COM `overflow-y:auto`, encolhe e faz scroll. (Tinha `min-height:0` sem o overflow, e era isso que fazia os artigos transbordarem por cima do subtotal e do botão de finalizar compra.) */ .mc-cart__items{ list-style:none;margin:0;padding:0; flex:1 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:rgba(15,15,15,.14) transparent; } .mc-cart__items::-webkit-scrollbar{width:5px} .mc-cart__items::-webkit-scrollbar-thumb{background:rgba(15,15,15,.14);border-radius:6px} .mc-cart__item{ display:flex;align-items:flex-start;gap:12px; padding:12px 0;border-bottom:1px solid var(--mcc-line);position:relative; } .mc-cart__item:last-child{border-bottom:0} .mc-cart__thumb{width:64px;height:64px;flex:none;border-radius:8px;overflow:hidden;background:#F2F2F0;display:block} .mc-cart__thumb img{width:100%;height:100%;object-fit:cover;display:block} .mc-cart__meta{flex:1;min-width:0;padding-right:20px} .mc-cart__name{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--mcc-ink)} .mc-cart__name a{color:inherit;text-decoration:none} /* Uma linha só: "Bordado · Peito Esquerdo". Se não couber, corta com reticências em vez de empurrar a linha dos preços para baixo. */ .mc-cart__specs{ display:block;margin-top:3px; font-size:12px;line-height:1.4;color:var(--mcc-mute); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mc-cart__qty{font-size:13px;color:var(--mcc-mute)} .mc-cart__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px} /* Preços à direita: por unidade em cima, em pequeno; total da linha por baixo, em destaque. Com uma unidade só aparece o total. */ .mc-cart__prices{ display:flex;flex-direction:column;align-items:flex-end; gap:1px;text-align:right;white-space:nowrap; } .mc-cart__unit{font-size:12px;color:var(--mcc-mute);line-height:1.3} .mc-cart__per{opacity:.75} .mc-cart__line{ font-size:14px;font-weight:600;color:var(--mcc-ink);line-height:1.3; font-variant-numeric:tabular-nums; } /* O riscado do preço cheio vem do WooCommerce (/). */ .mc-cart__unit del,.mc-cart__line del{opacity:.55;margin-right:3px;font-weight:400} .mc-cart__unit ins,.mc-cart__line ins{text-decoration:none;background:transparent} /* seletor de quantidade */ .mc-cart__qtybox{ display:inline-flex;align-items:center; border:1px solid var(--mcc-line);border-radius:8px;overflow:hidden;flex:none; } .mc-cart .mc-cart__panel button.mc-cart__qtybtn{ width:26px;height:26px;display:flex;align-items:center;justify-content:center; border:0;background:transparent;cursor:pointer; color:var(--mcc-ink);font-size:14px;line-height:1;padding:0; -webkit-tap-highlight-color:transparent;transition:background .12s ease; } .mc-cart .mc-cart__panel button.mc-cart__qtybtn:hover{background:#F2F2F0} .mc-cart .mc-cart__panel button.mc-cart__qtybtn:focus-visible{outline:2px solid var(--mcc-accent);outline-offset:-2px} .mc-cart .mc-cart__panel input.mc-cart__qtyval{ width:30px;border:0;outline:0;background:transparent;box-shadow:none; text-align:center;font:inherit;font-size:13px;color:var(--mcc-ink); padding:0;height:26px;min-height:0;border-radius:0; -moz-appearance:textfield;-webkit-appearance:none;appearance:none; font-variant-numeric:tabular-nums; } /* enquanto o pedido corre: evita cliques repetidos e mostra que está a mexer */ .mc-cart__panel.is-busy .mc-cart__items{opacity:.55;pointer-events:none;transition:opacity .15s ease} .mc-cart__item.is-removing{opacity:.4;transition:opacity .15s ease} /* O link leva a classe `remove` do WooCommerce (compatibilidade com plugins e com o JS do mini-cart), mas o woocommerce.css traz `a.remove{color:var(--wc-red)!important}` + hover com fundo vermelho. Esse CSS só carrega em ALGUMAS páginas, o que fazia o × mudar de aspeto conforme a página. Duplicar a classe no seletor (0,2,0 > 0,1,1) e usar !important garante o mesmo aspeto em todo o lado. */ .mc-cart .mc-cart__panel a.mc-cart__remove, .mc-cart .mc-cart__panel a.mc-cart__remove.remove{ /* `left:auto` anula o `a.remove{position:absolute;top:0;left:0}` do Woo */ position:absolute;top:12px;right:0;left:auto;bottom:auto; width:22px;height:22px;display:flex;align-items:center;justify-content:center; color:var(--mcc-mute) !important;text-decoration:none; font-size:19px;line-height:1;font-weight:400;border-radius:6px; background:transparent !important;border:0; transition:color .15s ease, background .15s ease; } .mc-cart .mc-cart__panel a.mc-cart__remove:hover, .mc-cart .mc-cart__panel a.mc-cart__remove.remove:hover{ color:#b32d2e !important;background:#fdf0f0 !important; } /* ── rodapé ───────────────────────────────────────────────────────────── */ .mc-cart__foot{flex:none;padding-top:16px;border-top:1px solid var(--mcc-line);margin-top:12px} .mc-cart__subtotal{display:flex;align-items:baseline;justify-content:space-between;font-size:15px} .mc-cart__subtotal strong{font-size:17px;font-weight:700} .mc-cart__disclaimer{font-size:12px;color:var(--mcc-mute);margin:6px 0 14px} .mc-cart__actions{display:flex;flex-direction:column;gap:8px} .mc-cart__btn{ display:inline-block;text-align:center;text-decoration:none !important; padding:14px 24px;border-radius:12px;font-size:14px;font-weight:600; background:var(--mcc-ink);color:#fff !important;border:1px solid var(--mcc-ink); transition:opacity .2s ease; } .mc-cart__btn:hover{opacity:.85} .mc-cart__btn--ghost{background:#fff;color:var(--mcc-ink) !important;border-color:var(--mcc-line)} .mc-cart__btn--ghost:hover{border-color:var(--mcc-ink);opacity:1} .mc-cart__trust{ display:flex;align-items:center;justify-content:center;gap:6px; padding:14px 0 2px;font-size:12px;color:var(--mcc-mute); } /* ── estado vazio ─────────────────────────────────────────────────────── */ .mc-cart__empty{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:10px;padding:40px 20px;color:var(--mcc-ink); } .mc-cart__empty svg{opacity:.9;margin-bottom:4px} .mc-cart__empty h3{margin:0;font-size:16px;font-weight:600} .mc-cart__empty p{margin:0 0 12px;font-size:14px;color:var(--mcc-mute);max-width:260px;line-height:1.5} .mc-cart__empty .mc-cart__btn{min-width:200px} /* ── esconder elementos flutuantes enquanto o carrinho está aberto ────── A bolha do Matt fica por cima do painel. NOTA: usar `display` de propósito, não `opacity`/`visibility`. O chat tem duas transições CSS (opacity, visibility) permanentemente em estado "running", e uma transição em curso vence TUDO na cascata, incluindo !important — é por isso que a própria classe .matt-suppressed do plugin não produz efeito. `display` não está a ser transicionado, por isso pega. */ html.mc-cart-open #matt-sticky-chat, html.mc-cart-open #matt-bubble-label{ display:none !important; } /* O banner de cookies também tapava o subtotal e o botão de finalizar compra (sobretudo em mobile, e logo a quem chega ao site pela primeira vez, que é quem ainda não consentiu). NÃO se esconde, porque é consentimento: fica atrás do painel e do fundo escurecido, e volta ao normal quando o carrinho fecha. Quem trata disso é o levantarContexto() do cart.js. */ /* ── clone do sticky do Elementor ────────────────────────────────────────── Quando o header fica sticky, o Elementor Pro CLONA a secção para servir de espaçador e esconde o clone com `visibility:hidden` (ver addSpacer() em assets/lib/sticky/jquery.sticky.js). Mas `visibility` é herdada, e um descendente que volte a declarar `visible` reaparece — que é precisamente o que o painel aberto faz. Resultado: o carrinho via-se duas vezes, um fixo e outro preso à página. `display:none` não tem esse furo. O clone nunca é inicializado pelo JS, por isso é sempre só decoração. */ .elementor-sticky__spacer .mc-cart__panel, .elementor-sticky__spacer .mc-cart__backdrop{ display:none !important; } /* ── responsivo ───────────────────────────────────────────────────────── */ @media (max-width:600px){ .mc-cart__panel{width:100vw} .mc-cart__panel-inner{padding:14px 16px 18px} } @media (prefers-reduced-motion:reduce){ .mc-cart__panel,.mc-cart__backdrop,.mc-ship__fill{transition:none} }