/* ============================================================
   PREMIUM ECOLOGICA
   BOARD 4 PDP V2B6
   MOBILE PDP

   SOMENTE <= 767px

   Desktop permanece congelado.
   ============================================================ */

@media (max-width: 767px) {

    /* ========================================================
       TOKENS
       ======================================================== */

    body.catalog-product-view {
        --pe-mobile-green: #168846;
        --pe-mobile-green-dark: #075c32;
        --pe-mobile-text: #0b412b;
        --pe-mobile-muted: #68776f;
        --pe-mobile-border: #dce7e0;
        --pe-mobile-soft: #f7fbf8;
    }


    /* ========================================================
       1. PAGINA / CONTAINER
       ======================================================== */

    body.catalog-product-view
    .page-main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    body.catalog-product-view
    .columns {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.catalog-product-view
    .column.main {
        display: block !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /*
     * No Board mobile o breadcrumb não ocupa
     * espaço valioso acima da imagem.
     */
    body.catalog-product-view
    .breadcrumbs {
        display: none !important;
    }


    /* ========================================================
       2. MEDIA
       ======================================================== */

    body.catalog-product-view
    .product.media {
        float: none !important;

        width: 100% !important;
        max-width: none !important;

        margin: 8px 0 12px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    body.catalog-product-view
    .product.media
    .gallery-placeholder {
        width: 100% !important;

        margin: 0 !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama-item {
        width: 100% !important;

        margin: 0 auto !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__wrap {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
    }


    /*
     * Não altera altura/calculo interno da Fotorama.
     * Apenas acabamento.
     */
    body.catalog-product-view
    .product.media
    .fotorama__stage {
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        border: 1px solid #e1e9e4 !important;
        border-radius: 12px !important;

        background: #fff !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__img {
        max-width: 94% !important;
        max-height: 94% !important;
    }


    /* ========================================================
       3. THUMBNAILS MOBILE
       ======================================================== */

    body.catalog-product-view
    .product.media
    .fotorama__nav-wrap {
        margin-top: 8px !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__nav__frame--thumb {
        width: 68px !important;
        height: 68px !important;

        margin-right: 6px !important;

        border-radius: 8px !important;

        overflow: hidden !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__thumb {
        width: 68px !important;
        height: 68px !important;

        border: 1px solid #dce7e0 !important;
        border-radius: 8px !important;

        background: #fff !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__active
    .fotorama__thumb {
        border-color: var(--pe-mobile-green) !important;

        box-shadow:
            inset 0 0 0 1px
            var(--pe-mobile-green) !important;
    }


    /*
     * Mantém a proposta visual do Board:
     * quatro posições visíveis.
     *
     * Fotorama continua com os itens internamente.
     */
    body.catalog-product-view
    .product.media
    .fotorama__nav__frame--thumb:nth-child(n+5) {
        display: none !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__nav__frame--thumb.premium-board4-more-thumb::after {
        font-size: 18px !important;

        border-radius: 8px !important;
    }


    /* ========================================================
       4. VIDEO CTA MOBILE
       Sai de cima da foto e passa para baixo da galeria.
       ======================================================== */

    body.catalog-product-view
    .product.media
    .premium-board4-video-cta,
    body.catalog-product-view
    .product.media
    .premium-board4-video-cta.is-positioned {
        position: static !important;

        left: auto !important;
        top: auto !important;

        display: flex !important;

        width: max-content !important;
        max-width: 100% !important;

        min-height: 40px !important;

        margin: 9px auto 0 !important;
        padding: 7px 15px !important;

        transform: none !important;

        font-size: 11px !important;

        box-shadow:
            0 3px 12px
            rgba(19, 62, 43, .08) !important;
    }


    body.catalog-product-view
    .product.media
    .premium-board4-video-cta:active {
        transform: scale(.98) !important;
    }


    /* ========================================================
       5. COLUNA DE COMPRA
       ======================================================== */

    body.catalog-product-view
    .product-info-main {
        float: none !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       6. TITULO
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .page-title-wrapper {
        margin: 5px 0 8px !important;
    }


    body.catalog-product-view
    .product-info-main
    .page-title {
        margin: 0 !important;
    }


    body.catalog-product-view
    .product-info-main
    .page-title
    .base {
        display: block !important;

        max-width: none !important;

        color: var(--pe-mobile-text) !important;

        font-size: 24px !important;
        line-height: 1.08 !important;

        letter-spacing: -.35px !important;

        font-weight: 700 !important;
    }


    /* ========================================================
       7. CHIPS
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .premium-board4-summary__chips {
        display: flex !important;

        flex-wrap: wrap !important;

        gap: 6px !important;

        margin: 8px 0 9px !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-board4-summary__chip {
        min-height: 28px !important;

        padding: 5px 9px !important;

        font-size: 10px !important;

        border-radius: 16px !important;
    }


    /* ========================================================
       8. RESUMO
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .premium-board4-summary {
        margin: 0 0 9px !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-board4-summary__text,
    body.catalog-product-view
    .product-info-main
    .premium-board4-summary__description {
        padding: 10px 11px !important;

        font-size: 11px !important;
        line-height: 1.35 !important;

        border-radius: 8px !important;
    }


    /* ========================================================
       9. REVIEWS
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .product-reviews-summary {
        margin: 6px 0 8px !important;
    }


    /* ========================================================
       10. ESTOQUE + SKU
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .product-info-stock-sku {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        margin: 7px 0 8px !important;
    }


    /* ========================================================
       11. PRECO
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .product-info-price {
        margin: 0 !important;
        padding: 0 0 10px !important;

        border-bottom:
            1px solid #e3ebe6 !important;
    }


    body.catalog-product-view
    .product-info-main
    .price-box
    .price {
        color: var(--pe-mobile-text) !important;

        font-size: 32px !important;
        line-height: 1 !important;

        font-weight: 700 !important;

        letter-spacing: -.5px !important;
    }


    body.catalog-product-view
    .product-info-main
    #preco-a-vista-mm {
        margin-top: 5px !important;
    }


    /* ========================================================
       12. OPTIONS
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .product-options-wrapper {
        margin: 14px 0 0 !important;
        padding: 0 !important;
    }


    body.catalog-product-view
    .product-info-main
    .product-options-wrapper
    .field {
        margin-bottom: 7px !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-pdp-option-pills {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;

        width: 100% !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-pdp-option-pill {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 42px !important;

        padding: 8px 10px !important;

        font-size: 12px !important;

        text-align: center !important;
    }


    /* ========================================================
       13. QTD + CTA
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .box-tocart {
        width: 100% !important;

        margin: 7px 0 10px !important;
    }


    body.catalog-product-view
    .product-info-main
    .box-tocart
    .fieldset {
        display: grid !important;

        grid-template-columns:
            62px
            minmax(0, 1fr) !important;

        align-items: start !important;

        column-gap: 8px !important;

        width: 100% !important;

        margin: 0 !important;
    }


    body.catalog-product-view
    .product-info-main
    .field.qty,

    body.catalog-product-view
    .product-info-main
    .field.qty
    .control,

    body.catalog-product-view
    .product-info-main
    .field.qty
    .qty-wrapper.qty-arrows {
        width: 62px !important;
    }


    body.catalog-product-view
    .product-info-main
    #qty {
        width: 62px !important;
        min-width: 62px !important;

        height: 48px !important;
        min-height: 48px !important;
    }


    body.catalog-product-view
    .product-info-main
    .box-tocart
    .actions {
        width: 100% !important;

        padding-top: 19px !important;

        gap: 7px !important;
    }


    /* ========================================================
       14. CTA PRINCIPAL
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    #product-addtocart-button {
        width: 100% !important;

        height: 50px !important;
        min-height: 50px !important;

        padding: 10px 14px !important;

        border-radius: 9px !important;

        font-size: 14px !important;
    }


    /* ========================================================
       15. WHATSAPP
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .premium-board4-whatsapp-cta {
        width: 100% !important;

        min-height: 48px !important;

        padding: 9px 12px !important;

        border-radius: 9px !important;

        font-size: 13px !important;
    }


    /* ========================================================
       16. TRUST
       Menos altura e mais leitura.
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .premium-board4-trust {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 6px !important;

        margin: 9px 0 !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-board4-trust__item {
        min-height: 54px !important;

        padding: 7px 8px !important;

        border-radius: 8px !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-board4-trust__item
    strong {
        font-size: 9px !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-board4-trust__item
    small {
        font-size: 8px !important;
    }


    /* ========================================================
       17. FRETE
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    #simularFrete {
        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 9px !important;

        box-sizing: border-box !important;

        border-radius: 9px !important;
    }


    body.catalog-product-view
    .product-info-main
    #simularFrete
    #cep {
        min-height: 44px !important;

        font-size: 14px !important;
    }


    body.catalog-product-view
    .product-info-main
    #simularFrete
    #sendFrete {
        min-height: 44px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    /* ========================================================
       18. ESPACO FINAL
       ======================================================== */

    body.catalog-product-view
    .product-info-main {
        padding-bottom: 20px !important;
    }

}


/* ============================================================
   CELULARES PEQUENOS
   ============================================================ */

@media (max-width: 430px) {

    body.catalog-product-view
    .page-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    body.catalog-product-view
    .product-info-main
    .page-title
    .base {
        font-size: 22px !important;
    }


    body.catalog-product-view
    .product-info-main
    .price-box
    .price {
        font-size: 30px !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__nav__frame--thumb {
        width: 62px !important;
        height: 62px !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__thumb {
        width: 62px !important;
        height: 62px !important;
    }

}