/**
 * Localizador por medida do pé — catálogo.
 *
 * Mobile primeiro. O que está aqui é a **ferramenta** — a caixa do campo, o filtro e o acordeão.
 *
 * **Dos cartões e da grelha não há aqui uma única regra**, e é de propósito: quem os desenha é o
 * tema, pelo mesmo CSS do catálogo. A única coisa que se acrescenta ao cartão é a linha
 * `.mpsg-card-match`, com o tamanho recomendado e a folga.
 */

/*
 * O funil do botão dos filtros — só existe aqui. O token que os dois lados usam (`--mpsg-accent`)
 * vive em `measure.css`, que é dependência declarada desta folha.
 */
:root {
    --mpsg-funnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13l-5 6v5l-3 1.5v-6.5z' fill='%23000'/%3E%3C/svg%3E");
}

.mpsg-finder {
    margin: 0 0 1em;
    width: 100%;
    box-sizing: border-box;
}

/*
 * O banner do estado inicial. Compacto de propósito: a seguir a ele vem o campo, e é ao campo que a
 * pessoa tem de chegar. Sem ilustração, sem cartões e sem um segundo botão a competir com o que ela
 * veio fazer.
 */
.mpsg-banner[hidden] {
    display: none !important;
}

.mpsg-banner {
    margin: 0 0 0.75em;
    padding: 0.7em 0.9em;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    background: var(--mpsg-accent-soft);
}

.mpsg-banner-title {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
}

.mpsg-banner-text {
    margin: 0.15em 0 0;
    font-size: 0.85em;
    opacity: 0.85;
}

/* A lista dos sem guia (`?sem_guia=1`): o aviso não se confunde com o banner dos clientes. */
.mpsg-banner-admin {
    border-color: #dba617;
    background: #fcf9e8;
}

.mpsg-finder-box[hidden] {
    display: none !important;
}

.mpsg-finder-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5em 1.5em;
    padding: 0.85em 1em;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

.mpsg-finder-field {
    flex: 1 1 16em;
    min-width: 0;
}

/*
 * Sem o botão na linha, o campo fica com o espaço que era dele. O `max-width` da folha partilhada
 * existe para o campo não crescer sozinho ao lado de uma ação; aqui não há ação, e um campo maior é
 * um alvo de toque maior — que é o que interessa num telemóvel.
 */
.mpsg-finder .mpsg-input {
    flex: 1 1 8em;
    max-width: 12em;
}

.mpsg-finder-options {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    justify-content: center;
}

.mpsg-finder .mpsg-hint {
    margin: 0.35em 0 0;
    font-size: 0.875em;
    opacity: 0.8;
}

/* O "Como medir o pé?", com o mesmo desenho da página do produto — mas as duas folhas de estilo
   nunca são carregadas na mesma página, por isso a regra vive nas duas. */

/* ── filtros ───────────────────────────────────────────────────────────────────────────────── */

/*
 * O painel é um só, para os dois ecrãs. Em telemóvel abre pelo botão "Filtros (N)"; em ecrã largo o
 * botão não existe e o painel está sempre aberto — daí o `display: flex !important` a passar por
 * cima do atributo `hidden`, que continua a ser o estado guardado para quando se voltar a estreitar.
 */
.mpsg-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.45em 0.7em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
}

/* Fechado é fechado: o `!important` é contra o CSS do tema, como no "Como medir o pé?". */
/* Fechado é fechado: o `!important` é contra o CSS do tema, como no "Como medir o pé?". */
.mpsg-filters[hidden] {
    display: none !important;
}

/* O funil, à esquerda do texto. */
.mpsg-filters-icon {
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.9em;
    background: currentColor;
    -webkit-mask: var(--mpsg-funnel) center / contain no-repeat;
    mask: var(--mpsg-funnel) center / contain no-repeat;
    opacity: 0.75;
}

.mpsg-filters-text {
    flex: 1 1 auto;
    text-align: left;
}

.mpsg-filters-count {
    color: var(--mpsg-accent);
    font-weight: 600;
}

.mpsg-filters-count[hidden] {
    display: none;
}

/*
 * A seta do botão sai do `aria-expanded`: para baixo fechado, para cima aberto. É o mesmo atributo
 * que o leitor de ecrã anuncia, por isso não há como o desenho dizer uma coisa e a acessibilidade
 * outra — e não é a seta de um <select> a fazer de conta que é um botão.
 */
.mpsg-filters-arrow {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 0.32em solid transparent;
    border-right: 0.32em solid transparent;
    border-top: 0.36em solid currentColor;
    transition: transform 0.15s ease;
}

.mpsg-filters-toggle[aria-expanded="true"] .mpsg-filters-arrow {
    transform: rotate(180deg);
}

.mpsg-filters {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75em 2.5em;
}

/*
 * O × que fecha o painel, no canto de cima à direita.
 *
 * Alvo de toque de 44px — o mínimo confortável num telemóvel —, desenhado com `padding` à volta de
 * um símbolo pequeno: o que cresce é a área de toque, não o ×. Os grupos de filtros ganham espaço à
 * direita para o primeiro não lhe passar por baixo.
 */
.mpsg-filters-close {
    position: absolute;
    top: 0.15em;
    right: 0.15em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.35em;
    line-height: 1;
    opacity: 0.65;
    cursor: pointer;
}

.mpsg-filters-close:hover,
.mpsg-filters-close:focus-visible {
    opacity: 1;
}

/* Sem isto, a legenda do primeiro grupo passava por baixo do botão. */
.mpsg-filters > .mpsg-filter-group:first-of-type {
    padding-right: 2.75em;
}

.mpsg-filter-group {
    min-width: 0;
}

.mpsg-filter-legend {
    margin: 0 0 0.4em;
    font-size: 0.875em;
    font-weight: 600;
}

.mpsg-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

/* Cada valor é uma caixa de seleção com ar de etiqueta: continua a ser navegável por teclado. */
.mpsg-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.mpsg-chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.mpsg-chip-label {
    display: inline-block;
    padding: 0.3em 0.75em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    font-size: 0.875em;
    line-height: 1.3;
}

.mpsg-chip-input:checked + .mpsg-chip-label {
    border-color: var(--mpsg-accent);
    background: var(--mpsg-accent-soft);
    color: var(--mpsg-accent);
    font-weight: 600;
}

/* O foco tem de ser visível: a caixa está escondida, quem o mostra é a etiqueta. */
.mpsg-chip-input:focus-visible + .mpsg-chip-label {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mpsg-filters-clear[hidden] {
    display: none;
}

/* O stock fecha o painel, separado do que vem acima. */
.mpsg-filter-stock {
    padding-top: 0.15em;
}

.mpsg-filters-clear {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mpsg-accent);
    font: inherit;
    font-size: 0.875em;
    text-decoration: underline;
    cursor: pointer;
}

/* O resumo do que está aplicado. */
.mpsg-active[hidden] {
    display: none;
}

.mpsg-active {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    /* Um pouco mais de ar antes da contagem: são duas coisas diferentes, e a grelha sozinha
       encostava-as. Sem chips o bloco é `hidden`, e a margem não chega a existir. */
    margin-bottom: 0.5em;
}

/* Um filtro aplicado é laranja: é o que o distingue de uma etiqueta por escolher. */
.mpsg-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    /* Mais dois pixéis de altura do que tinham: chega para o dedo, sem virar um botão. */
    padding: 0.35em 0.7em;
    border: 1px solid var(--mpsg-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--mpsg-accent);
    font: inherit;
    font-size: 0.8em;
    line-height: 1.5;
    cursor: pointer;
}

/* Decorativo: quem remove é o chip inteiro, que é um alvo muito maior do que o símbolo. */
.mpsg-active-x {
    font-size: 1.15em;
    line-height: 1;
    opacity: 0.8;
}

.mpsg-active-chip:hover,
.mpsg-active-chip:focus-visible {
    background: var(--mpsg-accent-soft);
}

@media (min-width: 782px) {
    .mpsg-filters-toggle {
        display: none;
    }

    /* Em ecrã largo o painel está sempre à vista, aconteça o que acontecer ao `hidden`. */
    .mpsg-filters[hidden] {
        display: flex !important;
    }

    /* E não há nada para fechar: o × é do telemóvel, onde o painel abre por cima do resto. */
    .mpsg-filters-close {
        display: none;
    }

    .mpsg-filters > .mpsg-filter-group:first-of-type {
        padding-right: 0;
    }
}

/*
 * A barra: uma grelha com quatro áreas, e um desenho por tamanho de ecrã.
 *
 *   telemóvel            ecrã largo
 *   [filtros] [ordem]    [ painel filtros ]
 *   [  painel filtros ]  [ chips          ]
 *   [  chips          ]  [ contagem | ordem ]
 *   [  contagem       ]
 *
 * As peças são as mesmas e estão uma vez só no HTML — o seletor de ordenação muda de lugar, não de
 * número. É por isso que não há um controlo para telemóvel e outro para desktop a poderem
 * dessincronizar-se.
 */
.mpsg-toolbar {
    display: grid;
    /* A contagem ocupa o que precisa, a ajuda fica-lhe ao lado, e a ordenação encosta à direita. */
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "panel panel panel"
        "chips chips chips"
        "count help  sort";
    align-items: center;
    gap: 0.4em 1em;
    margin: 0.75em 0 0.25em;
}

.mpsg-filters-toggle {
    grid-area: filters;
}

.mpsg-filters {
    grid-area: panel;
}

.mpsg-active {
    grid-area: chips;
}

.mpsg-finder-status {
    grid-area: count;
}

.mpsg-finder-sort {
    grid-area: sort;
}

.mpsg-finder-sort[hidden] {
    display: none !important;
}

/*
 * A saída para quem fica com dúvidas.
 *
 * **É o mesmo elemento nos dois desenhos**, como a ordenação: em ecrã largo é um link discreto ao
 * lado da contagem; no telemóvel é uma barra da largura toda, por baixo dela. Duplicá-lo era ter
 * dois links a poder dizer coisas diferentes.
 */
.mpsg-finder-help {
    grid-area: help;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    justify-self: start;
    min-width: 0;
    color: #128c7e;
    font-size: 0.92em;
    font-weight: 600;
    text-decoration: underline;
}

.mpsg-finder-help[hidden] {
    display: none !important;
}

.mpsg-finder-help:hover,
.mpsg-finder-help:focus-visible {
    color: #0b6b60;
}

/* O ícone do WhatsApp, desenhado — sem pedir uma imagem nem uma fonte de ícones ao servidor. */
.mpsg-finder-help-icon {
    flex: none;
    width: 1.35em;
    height: 1.35em;
    background: #25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.5 14c-.2.7-1.2 1.3-1.9 1.4-.5.1-1.1.1-1.8-.1a13 13 0 0 1-5.6-4.6c-.4-.6-1-1.5-1-2.8 0-1.3.7-2 1-2.3.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 1.9c.1.2 0 .4-.1.5l-.3.4c-.1.2-.3.3-.1.6a8 8 0 0 0 3.6 3c.3.1.4.1.6-.1l.8-.9c.2-.2.3-.2.6-.1l1.8.9c.3.1.4.2.5.3v1.2z'/%3E%3C/svg%3E") center/0.95em no-repeat;
    border-radius: 50%;
}

/* A seta só existe na barra do telemóvel: é ela que diz que a barra inteira é clicável. */
.mpsg-finder-help-arrow {
    display: none;
}

.mpsg-finder-sort {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
    font-size: 0.875em;
}

.mpsg-finder-sort-label {
    opacity: 0.8;
    white-space: nowrap;
}

/*
 * O select desenha-se por inteiro aqui.
 *
 * A seta que se via desalinhada era a do tema: muitos temas põem `appearance: none` e uma imagem de
 * fundo posicionada para o padding **deles** — e este select tem o nosso. Em vez de andar a
 * compensar padding, o componente assume a aparência: `appearance: none` tira a seta nativa, a
 * imagem de fundo substitui a do tema, e a posição é calculada com o padding que está aqui ao lado.
 * Fica uma seta só, e é esta.
 */
.mpsg-finder .mpsg-finder-sort-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 100%;
    min-height: 0;
    padding: 0.35em 1.9em 0.35em 0.6em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6em center;
    background-size: 0.7em auto;
    color: inherit;
    font: inherit;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Sem medida escrita não há o que ordenar. O controlo fica onde está — tirá-lo daí fazia a barra
 * mudar de forma quando os resultados chegassem — mas desligado, e a dizê-lo: menos contraste no
 * texto, a seta mais clara, e o cursor a avisar antes do clique.
 */
.mpsg-finder .mpsg-finder-sort-select:disabled {
    opacity: 0.55;
    border-color: rgba(0, 0, 0, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    cursor: not-allowed;
}

.mpsg-finder .mpsg-finder-sort-select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

@media (max-width: 781px) {
    .mpsg-banner {
        padding: 0.6em 0.75em;
    }

    /*
     * Filtros e ordenação na mesma linha, metade da largura cada. As duas linhas de baixo — chips e
     * contagem — atravessam as duas colunas.
     */
    .mpsg-toolbar {
        /* Metade para cada: os dois controlos são irmãos e devem parecê-lo. */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "filters sort"
            "panel   panel"
            "chips   chips"
            "count   count"
            "help    help";
        gap: 0.5em;
    }

    /*
     * Aqui é uma barra, e não um link: no telemóvel a linha da contagem já está cheia, e um link
     * pequeno ao lado dela seria um alvo de toque mau. A barra ocupa a largura toda, tem o fundo
     * verde-claro do WhatsApp e a seta à direita a dizer que se toca nela inteira.
     */
    .mpsg-finder-help {
        display: flex;
        justify-self: stretch;
        box-sizing: border-box;
        width: 100%;
        padding: 0.7em 0.9em;
        border-radius: 6px;
        background: #e7f6ec;
        text-decoration: none;
    }

    .mpsg-finder-help-text {
        flex: 1;
        min-width: 0;
    }

    /* A seta, desenhada com uma borda: dois traços e nada de imagens. */
    .mpsg-finder-help-arrow {
        display: block;
        flex: none;
        width: 0.42em;
        height: 0.42em;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: 0.65;
    }

    /* Cada controlo enche a sua metade, sem passar dela. */
    .mpsg-finder-sort,
    .mpsg-filters-toggle,
    .mpsg-finder .mpsg-finder-sort-select {
        width: 100%;
        min-width: 0;
    }

    /*
     * Os dois controlos são irmãos: o mesmo padding, a mesma altura de linha, o mesmo tamanho de
     * letra, os mesmos cantos e a mesma borda. Um deles tem uma seta desenhada à direita e o outro
     * um funil à esquerda — o resto é igual, e é o que os faz parecer o mesmo par.
     */
    .mpsg-filters-toggle,
    .mpsg-finder .mpsg-finder-sort-select {
        box-sizing: border-box;
        padding: 0.5em 0.7em;
        border-radius: 4px;
        font-size: 0.9em;
        line-height: 1.4;
    }

    /* A seta precisa do seu espaço à direita; o padding vertical é o mesmo do botão. */
    .mpsg-finder .mpsg-finder-sort-select {
        padding-right: 1.9em;
    }

    /* O rótulo sai: o valor escolhido já diz o que é. */
    .mpsg-finder-sort-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Alvo de toque confortável, sem crescer para lá disso. */
    .mpsg-finder .mpsg-finder-sort-select {
        padding-top: 0.45em;
        padding-bottom: 0.45em;
    }

    /* Dentro do painel, um grupo por linha: as etiquetas ficam largas e legíveis. */
    .mpsg-filters {
        flex-direction: column;
        gap: 0.9em;
        padding: 0.85em;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 6px;
    }

    .mpsg-filter-group {
        width: 100%;
    }
}

.mpsg-finder-status:empty {
    display: none;
}

.mpsg-finder-status {
    margin: 0;
    font-weight: 600;
}

/* A ação que a mensagem sugeria, agora clicável. */
.mpsg-empty-cta {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mpsg-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.mpsg-finder-results[hidden] {
    display: none !important;
}

/* ── o estado de espera ────────────────────────────────────────────────────────────────────────
 *
 * O bloco de resultados tem um estado de cada vez (`data-mpsg-state`), e o de espera é este. Não
 * guarda a altura da grelha anterior — os produtos antigos saem assim que uma pesquisa começa —,
 * mas tem uma altura mínima, para a página não saltar entre uma pesquisa e a seguinte.
 *
 * Os cartões-fantasma, quando existirem, entram dentro do `.mpsg-finder-skeleton`: nem a pesquisa
 * nem a grelha têm de saber que passaram a existir.
 */
.mpsg-finder-loading[hidden] {
    display: none !important;
}

.mpsg-finder-loading {
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    min-height: 5em;
    padding: 1.1em 0;
}

.mpsg-finder-loading-text {
    margin: 0;
    font-weight: 600;
    opacity: 0.75;
}

.mpsg-finder-skeleton:empty {
    display: none;
}

/* ── a linha do localizador dentro do card do tema ─────────────────────────────────────────── */

.mpsg-card-match {
    margin: 0.35em 0 0.5em;
    font-size: 0.85em;
    line-height: 1.35;
}

.mpsg-card-size {
    display: block;
    font-weight: 600;
}

.mpsg-card-match-ok .mpsg-card-size {
    color: #1c6b2b;
}

.mpsg-card-match-warn .mpsg-card-size {
    color: #8a5300;
}

.mpsg-card-allowance {
    display: block;
    opacity: 0.75;
}

/* O título de cada grupo de resultados. O segundo traz a ressalva na própria linha. */
.mpsg-finder-group {
    margin: 1.25em 0 0.35em;
    font-size: 1.05em;
}

.mpsg-finder-group:first-child {
    margin-top: 0;
}

.mpsg-finder-group-warn {
    color: #8a5300;
}

.mpsg-finder-group-note {
    margin: 0 0 0.75em;
    font-size: 0.85em;
    opacity: 0.85;
}

/* A contagem repartida pelas secções, por baixo do "Encontrámos N modelos": no telemóvel não cabe
   ao lado, e ao lado é a linha secundária que faz de menos importante. */
.mpsg-finder-breakdown {
    display: block;
    margin-top: 0.15em;
    font-size: 0.9em;
    font-weight: 400;
    opacity: 0.8;
}

.mpsg-finder-pagination {
    margin-top: 1.5em;
}

@media (min-width: 782px) {
    /*
 * O banner do estado inicial. Compacto de propósito: a seguir a ele vem o campo, e é ao campo que a
 * pessoa tem de chegar. Sem ilustração, sem cartões e sem um segundo botão a competir com o que ela
 * veio fazer.
 */
.mpsg-banner[hidden] {
    display: none !important;
}

.mpsg-banner {
    margin: 0 0 0.75em;
    padding: 0.7em 0.9em;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    background: var(--mpsg-accent-soft);
}

.mpsg-banner-title {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
}

.mpsg-banner-text {
    margin: 0.15em 0 0;
    font-size: 0.85em;
    opacity: 0.85;
}

.mpsg-finder-box {
        align-items: center;
        padding: 1em 1.25em;
    }
}