/*
 * barpa · Configurador em telemóvel 1.0.0 (só em páginas de produto, só em ecrãs estreitos).
 * Para desfazer qualquer ponto basta apagar o bloco; para desfazer tudo, desativar o plugin.
 */
@media (max-width: 850px) {
    /* 1. Barra de compra fina enquanto falta escolher.
       A guarda de preços (snippet «guarda de preços») põe a classe barpa-gp-bloqueado no <body> quando há preço mas
       a compra ainda está bloqueada: nesse estado a barra só mostra o aviso «Complete a configuração» (uma linha),
       sem o nome, a data e os dois botões desativados. Sem a classe, esta regra não faz nada. */
    body.barpa-gp-bloqueado .barpa-sp-bottom-bar__inner {
        grid-template-columns: 1fr;
        row-gap: 0;
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    body.barpa-gp-bloqueado .barpa-sp-bottom-bar__product,
    body.barpa-gp-bloqueado .barpa-sp-actions {
        display: none !important;
    }

    body.barpa-gp-bloqueado .barpa-sp-bottom-bar__price {
        grid-column: 1;
        grid-row: 1;
        align-items: center;
    }

    body.barpa-gp-bloqueado barpa-gp-aviso {
        max-width: none;
        text-align: center;
        font-size: 14px;
    }

    /* 2. Título do produto: 40 px em 3 linhas passava à frente das opções (o nome já aparece na barra de baixo). */
    body.staggs-product-configurator-page h1.product_title {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin: 12px 0 8px !important;
    }

    /* 3. Quantidade: com letra < 16 px o iOS faz zoom ao tocar no número; e sem zoom por duplo toque nos +/−. */
    body.staggs-product-configurator-page form.cart .quantity input.qty {
        font-size: 16px !important;
    }

    body.staggs-product-configurator-page form.cart .quantity,
    .barpa-sp-bottom-bar button {
        touch-action: manipulation;
    }

    /* OPCIONAL (desligado): sem a ligação «View cart» na barra em telemóvel, para a barra não crescer depois de
       adicionar ao carrinho (o Checkout fica ao lado do Add to cart). Descomentar se o Alexandre quiser.
    .barpa-sp-bottom-bar .barpa-sp-actions .added_to_cart {
        display: none !important;
    }

    .barpa-sp-bottom-bar .barpa-sp-actions .added_to_cart ~ .barpa-sp-buy-now {
        grid-column: auto !important;
    }
    */
}

/* 5. (1.2.7) Espaço no fim do painel das opções, para o resumo e o resto não ficarem por baixo da barra fixa de baixo.
   A altura vem do mobile.js (--barpa-cm-folga: a barra + a parte do painel abaixo do ecrã, só quando o painel rola
   sozinho, ou seja em ecrã largo); sem o JS fica 0 e nada muda. Vale em qualquer largura. */
body.staggs-product-configurator-page .staggs-product-options::after {
    content: "";
    display: block;
    height: var(--barpa-cm-folga, 0px);
}

/* 6. (1.2.7) Título «Quantity» por cima da quantidade (o mobile.js acrescenta-o), igual aos títulos dos passos
   («Length»: Poppins 18 px, 600, #222, centrado, 10 px por baixo). */
body.staggs-product-configurator-page .option-group.total > p.barpa-cm-qtd-titulo {
    margin: 0 0 10px;
    padding: 0;
    font-family: Poppins, Lato, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
    text-align: center;
}

/* 4. Botão «i» da data (20×20 px): área de toque de 47×47 px sem mudar o desenho. Só em ecrãs de toque. */
@media (pointer: coarse) {
    .barpa-pp--barra button.barpa-pp__info {
        position: relative;
    }

    .barpa-pp--barra button.barpa-pp__info::after {
        content: "";
        position: absolute;
        top: -13.5px;
        right: -13.5px;
        bottom: -13.5px;
        left: -13.5px;
    }
}