/* =====================================================================
   Resultado da consulta de domínio, na própria página
   interweb.co.mz · 19/08/2026

   Ficheiro NOVO. Não se tocou numa linha do CSS antigo: o tema já tinha
   os contentores (.domain-validation e #domain-search-result) e o estado
   de espera do botão (.domain-search.loading), só lhes faltava conteúdo.

   Desenho pedido a partir de uma página concorrente: dois cartões
   grandes lado a lado — o nome pesquisado e o mesmo nome na extensão
   companheira — e por baixo a lista das outras. Sem fundo escuro: foi
   experimentado e o Roldão preferiu sem.

   Paleta lida do próprio domain-registration.css desta página:
     #d60037  vermelho da marca      #1f2835  carvão dos títulos
     #76bd22  verde já usado aqui    #edeff0  cinzento das superfícies
   ===================================================================== */

/* O formulário do tema tem .prefix e .input-domain em float:left e
   ninguém os limpa — o <form> fica sem altura e o que vem a seguir
   enrola-se à volta deles. Sem este clear, o resultado nascia espremido
   numa goteira de trinta pixéis à direita, uma letra por linha.
   Estas duas regras não alteram nada do que já existia: os dois
   contentores estavam no HTML sem uma única regra de CSS. */
.domain-search .domain-validation,
.domain-search #domain-search-result {
    clear: both;
    display: block;
    width: 100%;
}

.dm-res { clear: both; margin: 26px 0 0 0; font-family: inherit; text-align: left; }

/* -------------------- os dois cartões, lado a lado ------------------ */
/* Sem fundo escuro: os cartões seguram-se pela moldura própria, como o
   resto da página. */
.dm-faixa {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -9px;
}
.dm-col { flex: 1 1 320px; min-width: 0; padding: 0 9px 18px 9px; box-sizing: border-box; }

.dm-cartao {
    background: #fff;
    border: 1px solid #e2e6ea;
    padding: 22px 24px;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.dm-fita {
    font-size: 12px; line-height: 18px; color: #5b6879; margin: 0 0 4px 0;
}
.dm-fita b { color: #1f2835; font-weight: 700; }
.dm-fita .fa { color: #d60037; margin-right: 5px; }

.dm-nome {
    margin: 0 0 6px 0;
    font-size: 27px; line-height: 36px; font-weight: 700; color: #1f2835;
    overflow-wrap: anywhere; word-break: normal;
}
.dm-nome .dm-tld { color: #d60037; }

.dm-desc { margin: 0 0 16px 0; font-size: 13px; line-height: 20px; color: #5b6879; }

/* preço à esquerda, botão à direita */
.dm-compra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.dm-precos { flex: 1 1 auto; min-width: 0; }
.dm-preco  { font-size: 24px; font-weight: 700; color: #1f2835; }
.dm-preco span { font-size: 13px; font-weight: 400; color: #5b6879; }
.dm-renova { margin: 4px 0 0 0; font-size: 12px; line-height: 18px; color: #8b95a5; }

.dm-btn {
    flex: 0 0 auto;
    display: inline-block; padding: 12px 24px;
    background: #d60037; color: #fff !important; text-decoration: none !important;
    font-size: 14px; font-weight: 700; border: 0; cursor: pointer; white-space: nowrap;
}
.dm-btn:hover  { background: #b8002f; color: #fff !important; }
.dm-btn .fa    { margin-right: 6px; }
.dm-btn.is-alt { background: #fff; color: #d60037 !important; border: 1px solid #d60037; }
.dm-btn.is-alt:hover { background: #fdf0f4; }

/* a linha do rodapé do cartão: o veredicto */
.dm-veredicto {
    margin: 18px -24px -22px -24px; padding: 13px 24px; background: #fbfcfd;
    border-top: 1px solid #edeff0;
    font-size: 13px; line-height: 20px; color: #1f2835;
}
.dm-veredicto .fa { margin-right: 7px; }
.dm-veredicto.is-livre   .fa { color: #76bd22; }
.dm-veredicto.is-ocupado .fa { color: #d60037; }
.dm-veredicto.is-duvida  .fa { color: #f0a202; }


/* ---------------------- a lista das restantes ---------------------- */
.dm-sug-titulo {
    margin: 34px 0 18px 0; text-align: center;
    font-size: 25px; line-height: 34px; font-weight: 700; color: #1f2835;
}
.dm-sug-titulo em { font-style: normal; color: #d60037; }

.dm-lista { list-style: none; margin: 0; padding: 0; }
.dm-lista li {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid #edeff0; padding: 16px 4px; margin: 0;
}
/* GRELHA A SÉRIO: só o nome cresce; as outras três têm largura fixa.
   Antes cresciam duas células ao mesmo tempo e a da acção mudava de
   largura conforme o conteúdo — "Adicionado + caixote" é bem mais largo
   que um carrinho, e "Transferir" outra vez diferente. O espaço que
   sobrava era repartido de maneira diferente em cada linha, e os
   selectores acabavam a alturas diferentes. Com três colunas fixas,
   ficam todos uns debaixo dos outros. */
/* flex-basis 0, não auto. Com "auto" a célula pede a largura do seu
   conteúdo INTEIRO, e uma descrição longa — o .ac.mz tem 124 caracteres
   — faz a linha quebrar antes de haver encolhimento: o selector ia para
   o canto e o preço e o botão caíam para baixo. Com base 0 a célula fica
   só com o espaço que sobra e o texto quebra lá dentro, que é onde deve
   quebrar. */
.dm-l-esq   { flex: 1 1 0; min-width: 0; padding-right: 16px; }
.dm-l-nome  { font-size: 17px; color: #1f2835; overflow-wrap: anywhere; word-break: normal; }
.dm-l-nome .dm-tld { color: #d60037; font-weight: 700; }
.dm-l-desc  { margin: 3px 0 0 0; font-size: 12px; line-height: 18px; color: #8b95a5; }
.dm-l-preco { flex: 0 0 200px; text-align: right; padding: 0 18px 0 0; box-sizing: border-box; }
.dm-l-preco .v { font-size: 17px; font-weight: 700; color: #1f2835; }
.dm-l-preco .v span { font-size: 12px; font-weight: 400; color: #5b6879; }
.dm-l-preco .r { font-size: 11px; line-height: 17px; color: #8b95a5; }
.dm-l-accao { flex: 0 0 155px; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; }
.dm-lista .dm-btn { padding: 9px 18px; font-size: 13px; }
.dm-lista li.is-ocupado .dm-l-nome { text-decoration: line-through; color: #8b95a5; }
.dm-lista li.is-ocupado .dm-l-nome .dm-tld { color: #8b95a5; }

/* ------------------------- estado de espera ------------------------ */
/* Um ícone a rodar, não a palavra "a processar". O fa-spin já existe no
   Font Awesome 4.7 que esta página carrega — não se acrescenta peso. */
.dm-espera { color: #b6bec8; }
.dm-espera .fa { font-size: 15px; }
.dm-espera-grande { padding: 26px 0; text-align: center; color: #b6bec8; }
.dm-espera-grande .fa { font-size: 26px; }

.dm-aviso {
    background: #fdf0f4; border-left: 4px solid #d60037;
    padding: 12px 16px; margin: 0 0 14px 0; font-size: 14px; line-height: 22px; color: #1f2835;
}

@media only screen and (max-width: 767px) {
    .dm-col { flex: 1 1 100%; }
    .dm-nome { font-size: 23px; line-height: 31px; }
    .dm-sug-titulo { font-size: 20px; line-height: 28px; }
    .dm-l-esq   { flex: 1 1 100%; padding-right: 0; }
    .dm-l-preco { flex: 0 0 auto; text-align: left; padding: 8px 16px 0 0; }
    .dm-l-accao { flex: 0 0 auto; justify-content: flex-start; padding-top: 10px; }
}

/* --------------------- "Mostrar mais opções" ----------------------- */
/* Vendemos 127 extensões e o menu do formulário mostra-as todas de uma
   vez. Aqui revelam-se por lotes de oito, e só se consulta o que se
   mostra — 127 consultas aos registos por pesquisa era abusivo. */
.dm-mais {
    display: block; width: 100%;
    margin: 18px 0 0 0; padding: 14px 20px;
    background: #fff; border: 1px solid #d5dbe3;
    font-family: inherit; font-size: 14px; font-weight: 700; color: #1f2835;
    cursor: pointer; text-align: center;
}
.dm-mais:hover { background: #f7f8fa; border-color: #b6bec8; }
.dm-mais .fa   { color: #8b95a5; }

/* O .wait do botão de pesquisa vinha com uma <div class="loading"> sem
   nenhuma regra no tema — o botão ficava vazio a processar. O conteúdo
   é posto pelo JS; aqui só se alinha. */
.domain-search .domain-search-form .btn-search .dm-btn-spin { white-space: nowrap; }
.domain-search .domain-search-form .btn-search .dm-btn-spin .fa { margin-right: 7px; }

/* =====================================================================
   A LISTA — escolher vários e mandar todos ao carrinho de uma vez
   ===================================================================== */

.dm-accao { display: inline-flex; align-items: center; white-space: nowrap; }

.dm-adicionado {
    display: inline-flex; align-items: center;
    color: #2f8f2f; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.dm-adicionado .fa { margin-right: 6px; font-size: 15px; }

.dm-tirar {
    background: none; border: 0; cursor: pointer;
    padding: 6px 8px; margin-left: 8px; color: #9aa5b1; font-size: 15px; line-height: 1;
}
.dm-tirar:hover { color: #d60037; }

/* A barra que fica em baixo enquanto houver escolhas. */
.dm-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: none; align-items: center; justify-content: space-between;
    background: #fff; border-top: 1px solid #d5dbe3;
    box-shadow: 0 -2px 14px rgba(31, 40, 53, .12);
    padding: 14px 22px; font-family: inherit;
}
.dm-barra.on   { display: flex; }
.dm-barra-txt  { font-size: 15px; color: #1f2835; }
.dm-barra-n    { color: #d60037; font-weight: 700; }
.dm-barra-btn  { margin: 0; }

/* O painel lateral. */
.dm-fundo {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(31, 40, 53, .45);
    opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
.dm-fundo.on { opacity: 1; visibility: visible; }

.dm-painel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060;
    width: 420px; max-width: 92vw;
    background: #fff; padding: 26px 26px 30px 26px;
    overflow-y: auto; font-family: inherit;
    transform: translateX(102%); transition: transform .22s ease;
    box-shadow: -3px 0 18px rgba(31, 40, 53, .16);
}
.dm-painel.on { transform: translateX(0); }

.dm-voltar {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #d60037; font-size: 14px; font-weight: 700; font-family: inherit;
}
.dm-voltar .fa { margin-right: 6px; }

.dm-painel-tit { margin: 16px 0 8px 0; font-size: 24px; font-weight: 700; color: #1f2835; }
.dm-painel-sub { margin: 0 0 20px 0; font-size: 13px; line-height: 20px; color: #8b95a5; }

.dm-painel-lista { list-style: none; margin: 0; padding: 0; }
.dm-painel-lista li {
    display: flex; align-items: center;
    padding: 14px 0; border-bottom: 1px solid #edeff0;
}
.dm-pl-esq   { flex: 1 1 auto; min-width: 0; }
.dm-pl-nome  { font-size: 16px; color: #1f2835; overflow-wrap: anywhere; }
.dm-pl-per   { font-size: 12px; color: #8b95a5; margin-top: 2px; }
.dm-pl-preco { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: #1f2835; padding-left: 14px; white-space: nowrap; }

.dm-painel-total {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0 6px 0; font-size: 14px; color: #5b6879;
}
.dm-painel-total strong { font-size: 17px; color: #1f2835; }

.dm-painel-ir { display: block; width: 100%; margin: 12px 0 0 0; text-align: center; }
.dm-continuar {
    display: block; width: 100%; margin: 14px 0 0 0; padding: 10px;
    background: none; border: 0; cursor: pointer;
    color: #d60037; font-size: 14px; font-weight: 700; font-family: inherit;
}

@media only screen and (max-width: 640px) {
    .dm-barra { padding: 12px 14px; }
    .dm-barra-txt { font-size: 13px; }
    .dm-painel { padding: 20px 18px 26px 18px; }
}

/* =====================================================================
   A CAIXA DE PESQUISA, sem o menu de extensões (19/08/2026)

   O menu de ~120 extensões saiu: a caixa aceita o domínio inteiro e a
   extensão escrita ganha sempre. Sobrou o espaço dele.

   Em vez de esticar a largura fixa de 440px para outra largura fixa,
   passa-se a linha a flexbox e a caixa cresce sozinha até ao botão. Fica
   fluida em qualquer ecrã, o que a versão de larguras fixas (440px, e
   270px abaixo de 991px) nunca esteve.

   Efeito lateral bem-vindo: com flexbox o <form> passa a ter altura, e
   os floats do .prefix e do .input-domain deixam de escapar — que era a
   causa do resultado nascer espremido numa goteira à direita.
   ===================================================================== */
.domain-search .domain-search-form {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.domain-search .domain-search-form .input-domain-wrapper {
    display: flex;
    flex: 1 1 260px;
    min-width: 0;
}
.domain-search .domain-search-form .prefix {
    float: none;
    flex: 0 0 auto;
}
.domain-search .domain-search-form .input-domain {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
}
.domain-search .domain-search-form .btn-search {
    flex: 0 0 auto;
    margin-left: 10px;
}
/* O marcador de exemplo não pode competir com o que se escreve. */
.domain-search .domain-search-form .input-domain::placeholder { color: #a9b2bc; opacity: 1; }
.domain-search .domain-search-form .input-domain:-ms-input-placeholder { color: #a9b2bc; }

@media only screen and (max-width: 640px) {
    .domain-search .domain-search-form .input-domain-wrapper { flex: 1 1 100%; }
    .domain-search .domain-search-form .btn-search { flex: 1 1 100%; margin: 10px 0 0 0; }
}

/* =====================================================================
   A MESMA CAIXA, NA PÁGINA INICIAL (19/08/2026)

   O formulário de lá tem outras classes mas o mesmo problema: o menu de
   extensões saiu e o <input> tinha largura fixa (365px), deixando um
   buraco. Mesma solução — flexbox, e a caixa cresce até ao botão.

   Nota para quem mexer: o <form> TEM de manter a classe
   .domain-registration-main-input-text. Eu substituí a linha do <form>
   para lhe mudar o destino, perdi a classe pelo caminho, e o formulário
   ficou com o botão à esquerda e a caixa encolhida. É a única coisa que
   segura o span, o input e o botão na mesma linha.
   ===================================================================== */
.domain-registration-main-input-text {
    display: flex;
    align-items: stretch;
}
.domain-registration-main-input-text span {
    float: none;
    flex: 0 0 auto;
}
.domain-registration-main-input-text input {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
}
.domain-registration-main-input-text .domain-registration-submit {
    float: none;
    flex: 0 0 auto;
}
@media only screen and (max-width: 640px) {
    .domain-registration-main-input-text { flex-wrap: wrap; }
    .domain-registration-main-input-text input { flex: 1 1 100%; }
    .domain-registration-main-input-text .domain-registration-submit { flex: 1 1 100%; margin-top: 10px; }
}

/* A lista separa registos de transferências, porque o carrinho aceita um
   só tipo por pedido. */
.dm-painel-grupo {
    margin: 20px 0 4px 0; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #8b95a5;
}
.dm-painel-ir + .dm-painel-ir { margin-top: 10px; }
.dm-painel-nota {
    margin: 12px 0 0 0; font-size: 12px; line-height: 19px; color: #8b95a5;
}
.dm-esvaziar {
    display: block; width: 100%; margin: 4px 0 0 0; padding: 10px;
    background: none; border: 0; cursor: pointer;
    color: #9aa5b1; font-size: 13px; font-family: inherit;
}
.dm-esvaziar:hover { color: #d60037; text-decoration: underline; }

/* --------------------- categorias do "mais opções" ------------------ */
/* Uma categoria sem nada por mostrar não chega a aparecer — um separador
   vazio é uma promessa falhada. */
/* Ao centro, como o título que está por cima — alinhados à esquerda
   ficavam a apontar para lado nenhum.
   Margens simétricas nas fichas em vez de "gap": o gap em flexbox não
   existe no Safari mais antigo, e com margem só à direita a fila fica
   deslocada meio espaço para a esquerda quando centrada. */
.dm-cats {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin: 18px -4px 6px -4px; padding: 0;
}
.dm-chip {
    background: #fff; border: 1px solid #d5dbe3; cursor: pointer;
    padding: 8px 15px; margin: 0 4px 8px 4px;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #5b6879;
    white-space: nowrap;
}
.dm-chip:hover { border-color: #b6bec8; color: #1f2835; }
.dm-chip.on { background: #1f2835; border-color: #1f2835; color: #fff; }
.dm-vazio { padding: 18px 4px; color: #8b95a5; font-size: 14px; }

/* =====================================================================
   ECRÃ PEQUENO — o que faltava (19/08/2026)

   Auditei o ficheiro à procura de componentes sem regra para telemóvel.
   Estes quatro não tinham, e o primeiro é o que estragava mais.
   ===================================================================== */

/* 1. A barra fixa tapava o fim da página. Nada empurrava o conteúdo, e a
      última linha da lista ficava debaixo dela — justamente quando a
      barra aparece, que é quando há domínios escolhidos para ver. */
body.dm-com-barra { padding-bottom: 86px; }

@media only screen and (max-width: 767px) {
    /* 2. As fichas de categoria: nove separadores num ecrã de telemóvel
          davam quatro linhas de fichas antes de se ver um resultado.
          Passam a rolar na horizontal, que é o que se espera delas. */
    .dm-cats {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: 0; margin-right: 0;
        padding-bottom: 4px;
    }
    .dm-chip { flex: 0 0 auto; }


    .dm-cartao { padding: 18px 16px; }
    .dm-veredicto { margin: 16px -16px -18px -16px; padding: 12px 16px; }

    /* 4. No painel, nome + preço + caixote não cabem numa linha de 320px. */
    .dm-painel-lista li { flex-wrap: wrap; }
    .dm-pl-preco { padding-left: 0; padding-top: 4px; }
}

@media only screen and (max-width: 400px) {
    .dm-nome { font-size: 20px; line-height: 28px; }
    .dm-preco { font-size: 20px; }
    body.dm-com-barra { padding-bottom: 104px; }
}

/* Dois "nowrap" que num ecrã estreito transbordam: o botão do painel
   ("Ir para o carrinho — 3 transferências") e o preço quando é a frase
   "Transferência grátis" em vez de um número. Deixam quebrar. */
@media only screen and (max-width: 480px) {
    .dm-painel-ir { white-space: normal; }
    .dm-preco     { white-space: normal; }
}

/* ------------------------- selector de anos ------------------------- */
/* Vendemos de 1 a 10 anos e o carrinho honra o período. Só aparece quando
   há mais do que um período activo — um selector com uma opção é ruído. */
.dm-anos {
    display: block; margin: 0; padding: 8px 10px; min-width: 104px;
    background: #fff; border: 1px solid #d5dbe3;
    font-family: inherit; font-size: 13px; color: #1f2835;
    cursor: pointer; width: 100%; box-sizing: border-box;
}
.dm-anos:focus { outline: 2px solid #d60037; outline-offset: 1px; }

/* Coluna própria e AO MEIO da linha. Com largura fixa colava-se ao
   preço — o nome crescia, empurrava-o para a direita, e os três ficavam
   amontoados num canto. A crescer, ocupa a faixa do meio e as três
   partes da linha ficam à mesma distância umas das outras. */
.dm-l-anos {
    flex: 0 0 190px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
}
.dm-lista li .dm-l-anos:empty { display: none; }

/* No cartão grande vai na mesma fila do preço e do botão. */
.dm-compra .dm-anos { width: auto; min-width: 104px; margin-right: 16px; flex: 0 0 auto; }

/* --------------------- tablet: 768 a 991 px ------------------------- */
/* Medido: com as colunas fixas em 190+200+155 = 545px, a 768px sobravam
   193px para o nome — um domínio de vinte caracteres não cabe lá sem
   partir a descrição em quatro linhas. Entre estes dois tamanhos as
   colunas encolhem; abaixo de 767px já empilham. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .dm-l-anos  { flex: 0 0 150px; padding: 0 10px; }
    .dm-l-preco { flex: 0 0 165px; padding-right: 12px; }
    .dm-l-accao { flex: 0 0 130px; }
    .dm-anos    { min-width: 0; padding: 8px 6px; font-size: 12px; }
    .dm-lista .dm-btn { padding: 9px 12px; }
    .dm-l-nome  { font-size: 16px; }
}

/* =====================================================================
   PÁGINA INICIAL, TELEMÓVEL — o contentor tinha altura fixa (19/08/2026)

   `.domain-registration-main-input` traz `height: 60px` do tema e NUNCA
   é reposto em nenhuma media query. Enquanto o formulário era uma linha
   só, ninguém deu por isso. Ao passá-lo a flexbox, o botão quebra para
   segunda linha no telemóvel — e como o contentor continua com 60px, o
   botão sai por fora e tapa o "Saiba mais sobre domínios" que vem a
   seguir. Foi o que apareceu na captura.

   Altura automática nos dois contentores, e o espaçamento passa a vir do
   fluxo em vez de uma altura adivinhada.
   ===================================================================== */
@media only screen and (max-width: 767px) {
    .domain-registration-main-input,
    .domain-registration-main-input-text {
        height: auto;
    }
    .domain-registration-main-input-text {
        display: block;          /* em coluna: caixa em cima, botão em baixo */
    }
    .domain-registration-main-input-text input {
        display: block; width: 100%; box-sizing: border-box;
        margin: 0 0 12px 0;      /* o tema punha 20px; 12 chega com o botão logo abaixo */
    }
    .domain-registration-main-input-text .domain-registration-submit {
        display: block; width: 100%; margin: 0;
    }

    /* O título e o subtítulo corriam por baixo da aba fixa "Enviar
       mensagem", que vive colada à direita do ecrã. Um respiro nos lados
       resolve, sem mexer na aba nem no tema. */
    .home-domain-registration .inner { padding-left: 16px; padding-right: 16px; }
}


/* =====================================================================
   TELEMÓVEL — BLOCO FINAL. Tem de ficar no FIM do ficheiro.
   19/08/2026, depois de medir a página a 375px num navegador a sério.

   O erro que isto corrige: eu tinha as regras de telemóvel a meio do
   ficheiro e as regras base DEPOIS delas. Com a mesma especificidade
   ganha a última, portanto metade das minhas correcções de telemóvel
   nunca chegou a aplicar-se — o selector continuava com os 190px da
   coluna de computador, numa linha só para ele.

   Medido no navegador, não deduzido: .dm-l-anos dava 190x37 a 375px.

   REGRA PARA O FUTURO: qualquer override de ecrã pequeno vai para o fim
   deste ficheiro. Não basta a regra existir dentro de um @media.
   ===================================================================== */
@media only screen and (max-width: 767px) {

    /* O "www." comia 120px dos 345 disponíveis — um terço da largura
       para dizer o que toda a gente já sabe. Some, e a caixa fica com a
       linha inteira. */
    .domain-search .domain-search-form .prefix { display: none; }
    .domain-search .domain-search-form .input-domain { width: 100%; }

    /* A linha deixa de ser quatro blocos empilhados (162px de altura) e
       passa a duas alturas: o nome em cima, e por baixo o período, o
       preço e o botão lado a lado. */
    .dm-lista li { flex-wrap: wrap; padding: 14px 2px; }
    .dm-l-esq    { flex: 1 1 100%; padding: 0 0 12px 0; }
    .dm-l-anos   { flex: 0 0 auto; justify-content: flex-start; padding: 0 12px 0 0; }
    .dm-l-anos .dm-anos { width: auto; min-width: 0; padding: 7px 8px; }
    /* base 90px e a encolher: sem isto a frase "Renova por 3.000,00 MT
       ao ano" fazia o preço ocupar 251px dos 341, e o botão caía para uma
       terceira linha. Assim a frase quebra e as três peças cabem numa. */
    .dm-l-preco  { flex: 1 1 90px; min-width: 0; text-align: left; padding: 0 12px 0 0; }
    .dm-l-preco .v { font-size: 16px; }
    .dm-l-preco .r { line-height: 15px; }
    .dm-l-accao  { flex: 0 0 auto; justify-content: flex-end; padding: 0; }

    /* No cartão, o selector e o preço cabem numa linha mas o botão não —
       caía sozinho, pequeno e encostado à esquerda, com ar de engano.
       Passa a ocupar a linha inteira, que é o que um botão principal
       deve fazer num ecrã estreito. */
    .dm-compra { align-items: flex-start; }
    .dm-compra .dm-anos { margin: 0 12px 0 0; }
    .dm-compra .dm-accao { flex: 1 1 100%; margin-top: 14px; }
    /* box-sizing obrigatório: sem ele os 48px de padding somam-se aos
       100% e o botão saía 360px dentro de um cartão de 345 — a página
       inteira passava a rolar na horizontal. */
    .dm-compra .dm-accao .dm-btn {
        display: block; width: 100%; box-sizing: border-box; text-align: center;
    }
    .dm-compra .dm-accao { display: block; }
}