/* ============================================================
   PREMIUM ECOLOGICA
   BOARD 4 PDP V2B6.1
   MOBILE GALLERY FIRST

   Diagnostico real:
   .column.main
     0 product-info-main
     1 product.media
     2 product.info.detailed

   A Fotorama esta inicializada e visivel.
   Apenas alteramos a ORDEM VISUAL no mobile.

   NENHUM NODE E MOVIDO NO DOM.
   ============================================================ */


@media (max-width: 767px) {

    /* ========================================================
       1. COLUMN MAIN PASSA A CONTROLAR ORDEM VISUAL
       ======================================================== */

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

        flex-direction: column !important;

        align-items: stretch !important;

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

        min-width: 0 !important;

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


    /* ========================================================
       2. GALERIA PRIMEIRO
       ======================================================== */

    body.catalog-product-view
    .column.main
    > .product.media {
        order: 10 !important;

        float: none !important;

        display: block !important;

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

        min-width: 0 !important;

        margin:
            6px 0
            12px !important;

        padding: 0 !important;
    }


    /* ========================================================
       3. INFORMACAO / COMPRA DEPOIS DA GALERIA
       ======================================================== */

    body.catalog-product-view
    .column.main
    > .product-info-main {
        order: 20 !important;

        float: none !important;

        display: block !important;

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

        min-width: 0 !important;

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


    /* ========================================================
       4. CONTEUDO DETALHADO DEPOIS DO HERO
       ======================================================== */

    body.catalog-product-view
    .column.main
    > .product.info.detailed {
        order: 30 !important;

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

        min-width: 0 !important;
    }


    /* ========================================================
       5. ELEMENTOS AUXILIARES DO COLUMN.MAIN
       Não precisam interferir visualmente.
       ======================================================== */

    body.catalog-product-view
    .column.main
    > script,

    body.catalog-product-view
    .column.main
    > style,

    body.catalog-product-view
    .column.main
    > input[type="hidden"] {
        order: 100 !important;
    }


    /* ========================================================
       6. GALERIA
       Mantemos o comportamento já funcional da V2B6.
       ======================================================== */

    body.catalog-product-view
    .product.media
    .gallery-placeholder,

    body.catalog-product-view
    .product.media
    .fotorama-item,

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

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

        visibility: visible !important;

        opacity: 1 !important;
    }


    /*
     * Evita qualquer margem herdada que deixe
     * espaço antes da imagem.
     */
    body.catalog-product-view
    .product.media
    .fotorama-item {
        margin-top: 0 !important;
    }


    /* ========================================================
       7. TITULO APROXIMA DA GALERIA
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .page-title-wrapper {
        margin-top: 4px !important;
    }

}


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

@media (max-width: 430px) {

    body.catalog-product-view
    .column.main
    > .product.media {
        margin-top: 4px !important;
        margin-bottom: 10px !important;
    }

}