/**
 * Farmácia D'Abragão — marca sobre o tema Hummingbird.
 *
 * O Hummingbird é Bootstrap 5.3 e expõe as cores como variáveis CSS, com 1700
 * usos de var(--…). Basta redefinir os tokens: não há uma única cor a ser
 * martelada regra a regra, ao contrário do que foi preciso no Leo Pharmo.
 *
 * Registado em config/theme.yml com prioridade alta, para carregar depois do
 * theme.css. Não se toca no theme.css, para sobreviver a atualizações do tema.
 *
 * Paleta em docs/marca.md.
 */

:root {
  /* ── Marca ─────────────────────────────────────────────────────────── */
  --dab-primary: #55054a;
  --dab-primary-dark: #46063d;
  --dab-primary-darker: #3a0533;
  --dab-primary-light: #75356c;
  --dab-accent: #f5b2b6;
  --dab-surface: #f7f5f7;

  /* ── Tokens do Bootstrap ───────────────────────────────────────────── */
  --bs-primary: #55054a;
  --bs-primary-rgb: 85, 5, 74;
  --bs-primary-text-emphasis: #46063d;
  --bs-primary-bg-subtle: #f2e6f0;
  --bs-primary-border-subtle: #cdb0c8;

  --bs-link-color: #55054a;
  --bs-link-color-rgb: 85, 5, 74;
  --bs-link-hover-color: #46063d;
  --bs-link-hover-color-rgb: 70, 6, 61;
}

/* ── Botões ──────────────────────────────────────────────────────────── */

/**
 * No Bootstrap 5.3 cada botão tem os seus próprios tokens, por isso não chega
 * mudar o --bs-primary global.
 */
.btn-primary {
  --bs-btn-bg: var(--dab-primary);
  --bs-btn-border-color: var(--dab-primary);
  --bs-btn-hover-bg: var(--dab-primary-dark);
  --bs-btn-hover-border-color: var(--dab-primary-dark);
  --bs-btn-active-bg: var(--dab-primary-darker);
  --bs-btn-active-border-color: var(--dab-primary-darker);
  --bs-btn-disabled-bg: var(--dab-primary);
  --bs-btn-disabled-border-color: var(--dab-primary);
  --bs-btn-focus-shadow-rgb: 85, 5, 74;
}

.btn-outline-primary {
  --bs-btn-color: var(--dab-primary);
  --bs-btn-border-color: var(--dab-primary);
  --bs-btn-hover-bg: var(--dab-primary);
  --bs-btn-hover-border-color: var(--dab-primary);
  --bs-btn-active-bg: var(--dab-primary-dark);
  --bs-btn-active-border-color: var(--dab-primary-dark);
}

/* ── Cabeçalho ───────────────────────────────────────────────────────── */

/**
 * Barra de topo em roxo.
 *
 * É uma faixa fina, por isso não pesa como pesava o rodapé escuro — e dá à
 * marca uma âncora no topo da página. O telefone ganha destaque, que numa
 * farmácia é o que interessa: as pessoas ligam antes de virem.
 */
.header-top {
  background-color: var(--dab-primary);
  color: #fff;
  font-size: 0.9rem;
}

.header-top .container-md,
.header-top .container {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.header-top a,
.header-top .material-icons,
.header-top i,
.header-top span {
  color: #fff;
}

.header-top a:hover,
.header-top a:focus {
  color: var(--dab-accent);
}

/**
 * O contador do carrinho é uma bolinha de fundo claro. Como a regra acima põe
 * tudo a branco na barra roxa, o número ficava branco sobre branco — invisível.
 * Fica a preto, que é o único par legível com aquele fundo.
 */
.header-top .header-block__badge {
  color: #212529;
  font-weight: 600;
}

.ps-contactinfo__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  text-decoration: none;
}

.ps-contactinfo__phone .material-icons {
  font-size: 1.1rem;
}

.header-nav {
  border-bottom: 1px solid var(--bs-border-color);
}

/* ── Pesquisa reduzida a uma lupa ────────────────────────────────────── */

/**
 * A caixa de pesquisa ocupava um terço do cabeçalho para uma loja que ainda
 * vai ter poucos artigos. Fica só a lupa, e abre quando lhe tocam.
 *
 * Feito só com CSS, sem mexer no JavaScript do tema: a largura cresce em
 * :hover e em :focus-within, por isso continua a funcionar com teclado.
 */
.ps-searchbar__form {
  position: relative;
}

/**
 * Caixa compacta, com a lupa dentro.
 *
 * Tentei primeiro reduzi-la a só o ícone, a abrir ao passar o rato. Não
 * consegui: a largura do campo não obedece ao CSS neste tema — nem com
 * !important, nem com estilo em linha —, e não vale a pena mexer no JavaScript
 * da pesquisa por causa disto. Fica uma caixa compacta, que já liberta o
 * cabeçalho sem partir nada.
 */
.ps-searchbar {
  max-width: 210px;
  margin-left: auto;
}

.ps-searchbar__form {
  position: relative;
}

.ps-searchbar__magnifier {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--dab-primary);
  font-size: 1.15rem;
}

.ps-searchbar__input {
  padding-left: 2.3rem;
}

/**
 * O logótipo é um brasão quadrado. Sem limite de altura, empurra o cabeçalho
 * todo para baixo.
 */
.header .logo,
.header-logo img {
  max-height: 76px;
  width: auto;
}

/* ── Preços e etiquetas ──────────────────────────────────────────────── */

.product-price,
.current-price,
.price {
  color: var(--dab-primary);
}

.product-flag.new,
.product-flag.online-only,
.badge.bg-primary {
  background-color: var(--dab-primary) !important;
}

.product-flag.discount,
.product-flag.on-sale {
  background-color: var(--dab-accent) !important;
  color: var(--dab-primary-dark) !important;
}

/* ── Formulários ─────────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
  border-color: var(--dab-primary-light);
  box-shadow: 0 0 0 0.2rem rgba(85, 5, 74, 0.15);
}

.form-check-input:checked {
  background-color: var(--dab-primary);
  border-color: var(--dab-primary);
}

/* ── Rodapé ──────────────────────────────────────────────────────────── */

/**
 * Rodapé claro.
 *
 * O Hummingbird traz o rodapé em #212529, quase preto, com texto branco. Fica
 * uma barra pesada a fechar a página, que numa farmácia destoa.
 *
 * A classe é `.footer__main` — NÃO `.footer-container`, que é de temas mais
 * antigos e neste não existe. Como o fundo passa a claro, é preciso inverter
 * também o texto e as ligações, senão fica branco sobre branco.
 */
.footer__main {
  background-color: #fbfafb !important;
  border-top: 1px solid #ece4ea;
  color: #4a4a4a;
}

.footer__main .footer-block__title,
.footer__main .footer-block__title--toggle {
  color: var(--dab-primary);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.footer__main a,
.footer__main .cms-page-link,
.footer__main li,
.footer__main p,
.footer__main span {
  color: #4a4a4a;
}

.footer__main a:hover,
.footer__main a:focus,
.footer__main .cms-page-link:hover {
  color: var(--dab-primary);
}

/* Os ícones sociais e de contacto herdam a cor do texto no tema. */
.footer__main .material-icons,
.footer__main i {
  color: var(--dab-primary-light);
}

.copyright {
  border-top: 1px solid #ece4ea;
  padding-top: 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  /* #7a7a7a ficava abaixo dos 4,5:1 sobre este fundo. Este passa. */
  color: #6b6b6b;
  text-align: center;
}

/**
 * Slogan da farmácia, por cima da linha de direitos de autor.
 *
 * Em serifa, como o "D'Abragão" do logótipo, e na cor da marca — é a assinatura
 * da casa, não mais uma linha de rodapé. Fica maior do que o resto do bloco de
 * propósito, senão desaparecia.
 */
/**
 * O seletor leva o `.footer__main` à frente por causa da especificidade: a
 * regra que põe o rodapé todo a #4a4a4a é `.footer__main p`, que vale mais do
 * que uma classe sozinha. Sem isto o slogan saía cinzento como o resto.
 */
.footer__main .copyright__slogan {
  margin: 0 0 0.4rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  color: var(--dab-primary);
}

.copyright a {
  color: var(--dab-primary);
  text-decoration: none;
}

.copyright a:hover {
  text-decoration: underline;
}

/* ── Blocos da página inicial ────────────────────────────────────────── */

.featured-products .h2,
.featured-products h2,
.products-section-title {
  color: var(--dab-primary-dark);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ── Destaque do aviamento de receitas ───────────────────────────────── */

/**
 * O bloco de texto da página inicial que aponta para o aviamento de receitas.
 * As classes vêm do conteúdo que configuramos no ps_customtext.
 */
/**
 * Fundo claro, não o roxo cheio.
 *
 * Uma faixa de #55054A do lado a lado pesa muito na página — o roxo da marca é
 * escuro e domina tudo o resto. Aqui fica um tom suave da mesma matiz, com o
 * roxo reservado ao título e ao botão, onde tem de puxar o olho.
 */
/**
 * Fotografia de fundo com o véu roxo já aplicado na própria imagem
 * (ver scripts/processar-fotos-promo.php), mais um gradiente por cima para
 * garantir contraste mesmo que a fotografia venha a ser trocada por outra
 * mais clara.
 */
.dab-receitas-cta {
  background-color: var(--dab-primary);
  background-image: linear-gradient(90deg, rgba(85, 5, 74, 0.92) 0%, rgba(85, 5, 74, 0.55) 100%),
    url('../img/cta-receitas.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  border-radius: 10px;
  padding: 3rem 2rem;
  text-align: center;
  margin: 2.5rem 0;
}

.dab-receitas-cta h2,
.dab-receitas-cta h3 {
  color: #fff;
  margin-top: 0;
}

.dab-receitas-cta .btn {
  background: #fff;
  color: var(--dab-primary);
}

.dab-receitas-cta .btn:hover,
.dab-receitas-cta .btn:focus {
  background: var(--dab-accent);
  color: var(--dab-primary-dark);
}

.dab-receitas-cta p {
  max-width: 620px;
  margin: 0 auto 1.5rem;
}

.dab-receitas-cta .btn {
  background: var(--dab-primary);
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 0.8rem 2rem;
}

.dab-receitas-cta .btn:hover {
  background: var(--dab-primary-dark);
  color: #fff;
}

/* ── Cartões de serviço da página inicial ────────────────────────────── */

.dab-servicos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2.5rem 0;
}

.dab-servicos__item {
  flex: 1 1 220px;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 1.5rem;
  background: #fff;
}

/**
 * Ícones aplicados por CSS, não por SVG no conteúdo.
 *
 * Pôr o <svg> dentro do bloco de texto não funciona: o PrestaShop limpa o HTML
 * ao gravar e o <svg> desaparece — o <span> fica, o desenho não. E as
 * ligaduras do Material Icons também não aplicam neste tema (o ícone do
 * telefone saía como a palavra "call").
 *
 * Assim o conteúdo guarda apenas o <span>, e o desenho vem daqui em data URI.
 * Ícones da coleção Feather (MIT).
 */
.dab-servicos__icone {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f3eaf1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  margin-bottom: 0.9rem;
}

/* Aconselhamento — balão de conversa */
.dab-servicos__item:nth-child(1) .dab-servicos__icone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355054a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

/* Serviços de saúde — coração */
.dab-servicos__item:nth-child(2) .dab-servicos__icone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355054a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.2l7.8-7.8 1.1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

/* Entrega ou levantamento — embalagem */
.dab-servicos__item:nth-child(3) .dab-servicos__icone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355054a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5M12 22V12'/%3E%3C/svg%3E");
}

/* Desde 1985 — medalha */
.dab-servicos__item:nth-child(4) .dab-servicos__icone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355054a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpath d='M8.2 13.9 7 23l5-3 5 3-1.2-9.1'/%3E%3C/svg%3E");
}

.dab-servicos__item h3 {
  color: var(--dab-primary);
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.dab-servicos__item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ── Página de manutenção ────────────────────────────────────────────── */

.error__logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 1.5rem;
}

.error__title {
  color: var(--dab-primary);
}

.dab-manutencao {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.7;
}

.dab-manutencao__intro {
  font-size: 1.15rem;
  color: var(--dab-primary-dark);
}

.dab-manutencao__contactos {
  background: #faf6f9;
  border: 1px solid #e6d5e2;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}

.dab-manutencao__contactos a {
  color: var(--dab-primary);
  font-weight: 600;
  text-decoration: none;
}

.dab-manutencao__contactos a:hover {
  text-decoration: underline;
}

.dab-manutencao__nota {
  color: #7a7a7a;
  font-size: 0.9rem;
}

/* ── Página institucional "A Farmácia" ───────────────────────────────── */

/**
 * O desenho da página `sobre-nos` vive aqui, e não em atributos `style` no
 * conteúdo do CMS, porque o conteúdo dos CMS passa pelo HTMLPurifier: ele
 * deixa passar `class` e `id`, mas deita fora todo o CSS3 — `border-radius`,
 * `display:flex`, `flex`, `gap` — e os elementos HTML5 como <figure>.
 *
 * Verificado a 2026-09-08. A versão anterior da página levava flexbox em
 * linha e os cartões apareciam empilhados em coluna, sem que se percebesse
 * porquê: no editor do backoffice o HTML está lá todo, a filtragem é ao gravar.
 *
 * Efeito lateral bom: o cliente pode reescrever os textos pelo backoffice sem
 * destruir o alinhamento, porque o alinhamento já não está no texto.
 */

.dab-sobre__hero {
  background: var(--dab-primary);
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 2.25rem;
}

.dab-sobre__hero h2 {
  color: #fff;
  margin: 0 0 0.75rem;
  font-size: 2rem;
}

.dab-sobre__hero p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
}

.dab-sobre__marca {
  margin: 0 0 0.5rem !important;
  letter-spacing: 3px;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--dab-accent);
}

#cms .page-content h3 {
  color: var(--dab-primary-dark);
  margin-top: 2.5rem;
}

/* ── Fotografias com legenda ─────────────────────────────────────────── */

/**
 * Substitui o <figure>/<figcaption>, que o purificador apaga.
 */
.dab-sobre__foto {
  margin: 1.75rem 0;
}

.dab-sobre__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.dab-sobre__legenda {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: #6b626b;
  text-align: center;
}

/* ── Cartões (serviços e equipa) ─────────────────────────────────────── */

.dab-sobre__cartoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}

/**
 * Dois por linha, não "os que couberem".
 *
 * Com `flex: 1 1 240px` os quatro cartões de serviços partiam 3 + 1 e o quarto,
 * sozinho na segunda linha, esticava-se aos 936 px todos. Ficava com o dobro do
 * tamanho dos outros e parecia um erro.
 *
 * A base a 50% obriga a duas colunas; o `min-width` é que faz a quebra para uma
 * só coluna em ecrã estreito, quando metade da largura já não chega para o
 * texto. O bloco da equipa, que tem dois cartões, fica numa linha certa.
 */
.dab-sobre__cartao {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 240px;
  border: 1px solid #e0dae0;
  border-radius: 6px;
  padding: 1.25rem;
  background: #fff;
}

.dab-sobre__cartao h4 {
  margin: 0 0 0.5rem;
  color: var(--dab-primary);
  font-size: 1.05rem;
}

.dab-sobre__cartao p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.dab-sobre__cargo {
  letter-spacing: 2px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #8a7d88;
  margin: 0 0 0.35rem !important;
}

.dab-sobre__nome {
  font-size: 1.05rem;
  color: var(--dab-primary);
  font-weight: 600;
}

/* ── Destaque do aviamento de receitas ───────────────────────────────── */

.dab-sobre__destaque {
  background: var(--dab-surface);
  border-left: 4px solid var(--dab-primary);
  border-radius: 0 6px 6px 0;
  padding: 1.5rem 1.75rem;
  margin: 2.25rem 0;
}

.dab-sobre__destaque h3 {
  margin: 0 0 0.625rem !important;
}

.dab-sobre__destaque p {
  margin: 0 0 1rem;
}

.dab-sobre__destaque p:last-child {
  margin-bottom: 0;
}

/* ── Morada e horário, lado a lado ───────────────────────────────────── */

.dab-sobre__colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.dab-sobre__colunas > div {
  flex: 1 1 260px;
}

.dab-sobre__colunas p {
  margin: 0 0 0.25rem;
  line-height: 1.7;
}

/* ── Legenda do carrossel também no telemóvel ────────────────────────── */

/**
 * A legenda dos slides vinha escondida abaixo dos 992 px (`d-none d-lg-block`).
 * As classes foram retiradas no template, em
 * `themes/hummingbird/modules/ps_imageslider/views/templates/hook/slider.tpl`,
 * e não aqui — a explicação está lá e em CLAUDE.md.
 *
 * ⚠️ NÃO tentar resolver isto por CSS. Este tema usa camadas de cascata e, em
 * declarações `!important`, o CSS sem camada (este ficheiro) perde para
 * qualquer camada, seja qual for a especificidade.
 *
 * Aqui fica só o que a legenda precisa em ecrã estreito.
 */
@media (max-width: 991.98px) {
  /**
   * Em ecrã estreito a legenda deixa de flutuar ao centro e passa a assentar
   * no fundo do slide, encostada às margens. Solta no meio de uma fotografia
   * pequena ficava a tapar o que interessa ver.
   */
  .ps-imageslider__figcaption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem 1.75rem;
    border-radius: 0;
    font-size: 1rem !important;
  }

  .ps-imageslider__figcaption h2,
  .ps-imageslider__figcaption .h2 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
  }

  .ps-imageslider__figcaption p {
    font-size: 0.875rem;
    margin-bottom: 0;
  }
}

/* ── Horário da farmácia (páginas CMS) ───────────────────────────────── */

/**
 * Tabela gerada por `scripts/lib/horario-formatar.php` e usada nas páginas
 * "A Farmácia" e "Levantamento na Farmácia". O desenho está aqui porque o
 * purificador dos CMS come o CSS em linha — ver CLAUDE.md.
 *
 * Os dias à esquerda, as horas alinhadas à direita da coluna, com números de
 * largura fixa para os "08:30" ficarem uns por baixo dos outros.
 */
.dab-horario {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  margin: 0.25rem 0 0.75rem;
}

.dab-horario th,
.dab-horario td {
  padding: 0.45rem 0;
  border-bottom: 1px solid #ece4ea;
  vertical-align: top;
}

.dab-horario th {
  font-weight: 600;
  color: var(--dab-primary-dark);
  padding-right: 1rem;
  white-space: nowrap;
}

.dab-horario td {
  font-variant-numeric: tabular-nums;
}

.dab-horario tr:last-child th,
.dab-horario tr:last-child td {
  border-bottom: 0;
}

.dab-horario__nota {
  font-size: 0.875rem;
  color: #6b626b;
  margin: 0;
}

/* ── Atalhos da página inicial: Promoções e Rastreios ────────────────── */

/**
 * Pedidos pela farmácia (2026-09-10/11). Ficam por cima do destaque das
 * receitas, mais pequenos do que ele, para não lhe roubarem o lugar.
 *
 * Os ícones seguem a família dos cartões de serviços: traço fino na cor da
 * marca, dentro de um círculo claro. Etiqueta para as promoções, prancheta
 * com um visto para os rastreios.
 *
 * O HTML é só <a> com <span> lá dentro, sem <div>: um bloco dentro de uma
 * ligação é HTML inválido para o purificador, que o reorganizava.
 */
.dab-atalhos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}

.dab-atalhos__item {
  display: block;
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 4.4rem;
  background: #fff;
  border: 1px solid #e0dae0;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dab-atalhos__item:hover,
.dab-atalhos__item:focus {
  border-color: var(--dab-primary-light);
  box-shadow: 0 4px 14px rgba(85, 5, 74, 0.08);
  color: inherit;
}

.dab-atalhos__item::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 2.4rem;
  height: 2.4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #f3eaf1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* Promoções — etiqueta de preço */
.dab-atalhos__item--promocoes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355054a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}

/* Rastreios — prancheta com visto */
.dab-atalhos__item--rastreios::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355054a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E");
}

.dab-atalhos__titulo {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--dab-primary);
}

.dab-atalhos__texto {
  display: block;
  font-size: 0.9rem;
  color: #6b626b;
}

/* No telemóvel, um por linha: dois lado a lado não cabem com o texto. */
@media (max-width: 575.98px) {
  .dab-atalhos {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
}

/* ── Tabela de rastreios (página CMS) ────────────────────────────────── */

.dab-rastreios {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
}

.dab-rastreios th,
.dab-rastreios td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #ece4ea;
  text-align: left;
  vertical-align: top;
}

.dab-rastreios thead th {
  background: var(--dab-surface);
  color: var(--dab-primary-dark);
  font-weight: 600;
}