/* ============================================================
   PREMIUM ECOLOGICA
   BOARD 4 PDP V2B6.2
   MOBILE GALLERY + POLISH

   - desktop intocado
   - Fotorama nao reinicializada
   - nenhum node Magento movido
   ============================================================ */


@media (max-width: 767px) {

    /* ========================================================
       1. GALERIA PRINCIPAL MAIS PRESENTE
       ======================================================== */

    body.catalog-product-view
    .product.media
    .fotorama__stage,

    body.catalog-product-view
    .product.media
    .fotorama__stage__shaft,

    body.catalog-product-view
    .product.media
    .fotorama__stage__frame {
        height: clamp(
            230px,
            62vw,
            285px
        ) !important;
    }


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

        background: #fff !important;

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

        overflow: hidden !important;
    }


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

        object-fit: contain !important;
    }


    /* Setas mais discretas */

    body.catalog-product-view
    .product.media
    .fotorama__arr {
        width: 34px !important;
        height: 44px !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__arr--prev {
        left: 3px !important;
    }


    body.catalog-product-view
    .product.media
    .fotorama__arr--next {
        right: 3px !important;
    }


    /* ========================================================
       2. ESCONDE NAV PADRAO SOMENTE DEPOIS QUE NOSSA REGUA
       EXISTIR.

       Se o JS falhar, o nav original continua aparecendo.
       ======================================================== */

    body.catalog-product-view.premium-mobile-galleryrail-ready
    .product.media
    .fotorama__nav-wrap {
        display: none !important;
    }


    /* ========================================================
       3. REGUA MOBILE DE THUMBNAILS
       ======================================================== */

    body.catalog-product-view
    .premium-mobile-galleryrail {
        display: grid !important;

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

        gap: 7px !important;

        width: 100% !important;

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

        box-sizing: border-box !important;
    }


    body.catalog-product-view
    .premium-mobile-galleryrail__item {
        position: relative !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        aspect-ratio: 1 / 1 !important;

        margin: 0 !important;
        padding: 4px !important;

        box-sizing: border-box !important;

        background: #fff !important;

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

        overflow: hidden !important;

        cursor: pointer !important;

        box-shadow: none !important;
    }


    body.catalog-product-view
    .premium-mobile-galleryrail__item.is-active {
        border-color: #168846 !important;

        box-shadow:
            inset 0 0 0 1px
            #168846 !important;
    }


    body.catalog-product-view
    .premium-mobile-galleryrail__item
    img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /* ========================================================
       4. +N
       ======================================================== */

    body.catalog-product-view
    .premium-mobile-galleryrail__more::after {
        content:
            attr(data-more) !important;

        position: absolute !important;

        z-index: 5 !important;

        inset: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        background:
            rgba(12, 88, 50, .78) !important;

        color: #fff !important;

        font-size: 20px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        pointer-events: none !important;
    }


    /* ========================================================
       5. VIDEO
       ======================================================== */

    body.catalog-product-view
    .product.media
    .premium-board4-video-cta,

    body.catalog-product-view
    .product.media
    .premium-board4-video-cta.is-positioned {
        margin:
            10px auto
            13px !important;

        min-height: 40px !important;

        padding:
            7px 14px !important;

        font-size: 11px !important;
    }


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

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


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

        line-height: 1.07 !important;

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


    body.catalog-product-view
    .product-info-main
    .premium-board4-summary__chips {
        gap: 5px !important;

        margin:
            7px 0
            8px !important;
    }


    /* ========================================================
       7. PRECO / ESTOQUE
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .product-info-stock-sku {
        margin:
            6px 0
            7px !important;
    }


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


    /* ========================================================
       8. COMPRA
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .product-options-wrapper {
        margin-top: 12px !important;
    }


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


    body.catalog-product-view
    .product-info-main
    #product-addtocart-button {
        min-height: 48px !important;

        font-size: 13px !important;
    }


    body.catalog-product-view
    .product-info-main
    .premium-board4-whatsapp-cta {
        min-height: 46px !important;
    }


    /* ========================================================
       9. TRUST
       Aumentamos um pouco a legibilidade.
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    .premium-board4-trust {
        gap: 7px !important;
    }


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

        padding:
            8px 9px !important;
    }


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


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


    /* ========================================================
       10. FRETE
       ======================================================== */

    body.catalog-product-view
    .product-info-main
    #simularFrete {
        margin-top: 7px !important;
    }


    /* ========================================================
       11. CONTEUDO ABAIXO DO HERO
       Corrige embeds/videos gigantes ou cortados.
       ======================================================== */

    body.catalog-product-view
    .product.info.detailed {
        width: 100% !important;

        margin-top: 20px !important;

        overflow: hidden !important;
    }


    body.catalog-product-view
    .product.info.detailed
    iframe {
        display: block !important;

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

        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        margin:
            10px 0 !important;

        border: 0 !important;
    }


    body.catalog-product-view
    .product.info.detailed
    video {
        display: block !important;

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

        height: auto !important;
    }


    body.catalog-product-view
    .product.info.detailed
    img {
        max-width: 100% !important;

        height: auto !important;
    }


    body.catalog-product-view
    .product.info.detailed
    table {
        display: block !important;

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

        overflow-x: auto !important;
    }

}


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

@media (max-width: 430px) {

    body.catalog-product-view
    .product.media
    .fotorama__stage,

    body.catalog-product-view
    .product.media
    .fotorama__stage__shaft,

    body.catalog-product-view
    .product.media
    .fotorama__stage__frame {
        height: clamp(
            225px,
            63vw,
            265px
        ) !important;
    }


    body.catalog-product-view
    .premium-mobile-galleryrail {
        gap: 6px !important;
    }


    body.catalog-product-view
    .premium-mobile-galleryrail__item {
        padding: 3px !important;
    }


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

}