/**
 * Guia de Tamanhos — página do produto.
 *
 * Estrutura mínima e mobile-first: cores, tipos de letra e espaçamentos herdam do tema. O formato
 * visual final da tabela será dado depois; isto é o esqueleto para o receber sem ter de refazer o
 * HTML.
 */

.mpsg-section {
    margin: 2em auto;
    /* A secção recebe foco quando se salta para ela pela âncora — sem contorno de foco a fingir. */
    outline: none;

    /* A secção é impressa depois do resumo do produto. Há temas em que esse `div.product` é uma
       grelha ou um flex de duas colunas (imagem | resumo): um filho novo cairia dentro de uma
       coluna, ou a transbordar dela. As três declarações seguintes são inertes quando o pai é um
       bloco normal, e é o que as torna seguras de deixar aqui. */
    grid-column: 1 / -1;
    flex-basis: 100%;
    clear: both;

    /* Nunca mais larga do que a largura de conteúdo do tema (temas de blocos) nem do que o espaço
       que lhe é dado (todos os outros). */
    width: 100%;
    max-width: var(--wp--style--global--content-size, 100%);
    box-sizing: border-box;
}

.mpsg-title {
    margin-bottom: 0.5em;
}

.mpsg-anchor-link {
    display: inline-block;
    margin: 0 0 1em;
    font-size: 0.9em;
    text-decoration: underline;
}

/* Mora acima da escolha de tamanho. Sem margem por cima: o que vem antes — preço, resumo curto —
   já traz a sua, e as duas somavam-se. */
.mpsg-recommender {
    margin: 0 0 1em;
}

.mpsg-field {
    display: block;
}

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

/* "Como medir o pé?" — discreto, do tamanho de um link. */

/* O convite antes de haver medida, logo abaixo do campo. Não é erro nem resultado: é só o que
   fazer a seguir. */
.mpsg-empty {
    margin: 0.5em 0 0;
    font-size: 0.875em;
    opacity: 0.7;
}

/* ── resultado ─────────────────────────────────────────────────────────────────────────────── */

.mpsg-result:empty {
    display: none;
}

.mpsg-result {
    margin-top: 0.75em;
    padding: 0.75em 1em;
    border-left: 3px solid currentColor;
}

/* Os três estados. A cor acompanha o símbolo e o texto do `.mpsg-badge` — nunca informa sozinha. */
.mpsg-result-ok {
    color: #1c6b2b;
}

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

.mpsg-result-none {
    color: inherit;
    opacity: 0.9;
}

.mpsg-lead {
    margin: 0 0 0.35em;
}

.mpsg-headline {
    margin: 0 0 0.5em;
}

/* O tamanho é a informação principal: é o que se lê primeiro e à distância. */
.mpsg-size {
    font-size: 1.35em;
    font-weight: 700;
    white-space: nowrap;
}

.mpsg-details {
    margin: 0;
    padding-left: 1.1em;
    font-size: 0.9em;
}

.mpsg-badge {
    margin: 0.5em 0 0;
    font-size: 0.875em;
    font-weight: 600;
}

/* Debaixo do tamanho: cola-se a ele (o título já traz a margem) e afasta-se dos números. */
.mpsg-badge-under {
    margin: -0.25em 0 0.75em;
}

/* A frase de abertura respira antes do tamanho. */
.mpsg-lead {
    margin-bottom: 0.75em;
}

/* ── as opções próximas ────────────────────────────────────────────────────────────────────── */

/*
 * Quando não há tamanho dentro da folga recomendada podem existir duas opções: uma mais justa e
 * outra com mais folga. Vivem no mesmo bloco âmbar, uma a seguir à outra, sem caixa nem cor
 * próprias — nenhuma delas é uma recomendação, e dar destaque a uma seria escolher por quem lê.
 * O que as distingue é o rótulo.
 */
.mpsg-option + .mpsg-option {
    margin-top: 0.75em;
    padding-top: 0.75em;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.mpsg-option-head {
    margin: 0 0 0.35em;
}

/* O rótulo acompanha o tamanho sem competir com ele, e quebra para a linha de baixo no telemóvel. */
.mpsg-option-kind {
    font-size: 0.9em;
    font-weight: 600;
}

/* ── ajuda por WhatsApp ────────────────────────────────────────────────────────────────────── */

/* Só aparece com uma medida válida escrita; o JavaScript tira o `hidden`. */
.mpsg-help[hidden] {
    display: none !important;
}

.mpsg-help {
    margin-top: 1em;
}

.mpsg-help-lead {
    margin: 0 0 0.4em;
    font-size: 0.875em;
    opacity: 0.8;
}

/*
 * Verde do WhatsApp preenchido, mas em escala secundária: fica menor do que o "Adicionar ao
 * carrinho", não ocupa a linha toda e não tem o peso tipográfico dele. É a cor que o identifica, e
 * o texto diz "WhatsApp" para quem não a distingue.
 */
.mpsg-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.55em 1em;
    border: 0;
    border-radius: 4px;
    background: #25d366;
    color: #fff;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.mpsg-whatsapp:hover,
.mpsg-whatsapp:focus {
    background: #1da851;
    color: #fff;
    text-decoration: none;
}

.mpsg-whatsapp:focus-visible {
    outline: 2px solid #0e6b39;
    outline-offset: 2px;
}

.mpsg-whatsapp-icon {
    font-size: 1.05em;
}

/*
 * A tabela nunca empurra a página para o lado: quem rola é este contentor, nunca o body.
 */
.mpsg-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * `width: 100%` — a tabela ocupa o contentor do guia, e as colunas repartem o espaço entre si.
 *
 * A v1.6.0 pôs aqui `width: auto` para a compactar, e o resultado foi o oposto do pretendido: uma
 * tabela pequena encostada à esquerda de uma área larga. A largura volta ao que era; o que faltava
 * era o `min-width`, que é o que impede o outro extremo — colunas espremidas num telemóvel. Abaixo
 * dessa largura a tabela não encolhe mais: rola dentro do `-wrap`.
 *
 * **O mínimo é por coluna, não por tabela.** Esteve em 480px fixos, e um guia de duas colunas era
 * obrigado a rolar num telemóvel de 375px para mostrar duas medidas — a largura mínima de quatro
 * colunas aplicada a duas. Agora são ~120px por coluna: quatro continuam a pedir 480, duas pedem
 * 240 e cabem em qualquer ecrã.
 *
 * `table-layout: auto` de propósito, com as larguras dos `<col>` como sugestão: o navegador respeita
 * a repartição enquanto o conteúdo couber, e alarga a coluna quando não couber, em vez de a deixar
 * transbordar para cima da seguinte — que é o que `fixed` faria com um tamanho mais comprido.
 */
.mpsg-table {
    width: 100%;
    min-width: 240px;
    table-layout: auto;
    border-collapse: collapse;
}

.mpsg-table[data-mpsg-cols="3"] {
    min-width: 360px;
}

.mpsg-table[data-mpsg-cols="4"] {
    min-width: 480px;
}

.mpsg-table th,
.mpsg-table td {
    padding: 0.55em 1em;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* "21,5 EU" e "11,8 cm" são um valor só: não se partem a meio. */
    white-space: nowrap;
}

/* As colunas das pontas encostam às margens, alinhadas com o título e com o resto do bloco. */
.mpsg-table th:first-child,
.mpsg-table td:first-child {
    padding-left: 0;
}

.mpsg-table th:last-child,
.mpsg-table td:last-child {
    padding-right: 0;
}

.mpsg-table tr.mpsg-out {
    opacity: 0.55;
}

/*
 * Com quatro colunas num ecrã estreito, o que evita a barra de rolagem é um pouco menos de ar entre
 * elas — não menos colunas. Com duas ou três não é preciso, e não se mexe.
 */
@media (max-width: 480px) {
    .mpsg-table[data-mpsg-cols="4"] th,
    .mpsg-table[data-mpsg-cols="4"] td {
        padding-left: 0.55em;
        padding-right: 0.55em;
    }
}

.mpsg-table tr.mpsg-hit {
    background: rgba(0, 0, 0, 0.05);
    font-weight: 700;
}

.mpsg-tag {
    margin-left: 0.4em;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.75;
}