/* VIVA_PRODUCT_MOBILE_GALLERY_V1
   Galeria editorial mobile da pagina de produto.
   Desktop permanece sob o layout original.
*/

@media (max-width: 720px) {
    .vf-mobile-gallery-shell {
        position: relative;
        width: 100%;
    }

    .vf-mobile-gallery-shell .vf-product-main-image {
        width: 100%;
        height: 570px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(48, 56, 55, 0.08);
        border-radius: 10px;
        background: #f6f7f5;
    }

    .vf-mobile-gallery-shell .vf-product-main-image img,
    .vf-mobile-gallery-shell .vf-product-main-image video {
        display: block;
        width: 100%;
        height: 570px !important;
        object-fit: contain;
        object-position: center center;
        background: #f6f7f5;
    }

    .vf-thumbnails.vf-mobile-gallery-source {
        display: none !important;
    }

    .vf-mobile-gallery-nav {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        pointer-events: none;
        z-index: 4;
    }

    .vf-mobile-gallery-arrow {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(48, 56, 55, 0.12);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.90);
        color: #303837;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 32px;
        font-weight: 300;
        line-height: 1;
        box-shadow: 0 4px 18px rgba(25, 45, 42, 0.10);
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .vf-mobile-gallery-arrow:active {
        transform: scale(0.96);
    }

    .vf-mobile-gallery-dots {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 32px;
        padding: 3px 7px;
        border: 1px solid rgba(48, 56, 55, 0.08);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(6px);
        z-index: 5;
    }

    .vf-mobile-gallery-dot {
        position: relative;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .vf-mobile-gallery-dot::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(48, 56, 55, 0.30);
        transform: translate(-50%, -50%);
        transition:
            width 160ms ease,
            background-color 160ms ease;
    }

    .vf-mobile-gallery-dot.is-active::after {
        width: 18px;
        background: #365650;
    }

    .vf-mobile-gallery-counter {
        position: absolute;
        right: 12px;
        bottom: 15px;
        min-width: 43px;
        padding: 5px 9px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.90);
        color: #303837;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        z-index: 5;
    }

    .vf-mobile-gallery-shell {
        touch-action: pan-y pinch-zoom;
    }
}

@media (max-width: 380px) {
    .vf-mobile-gallery-shell .vf-product-main-image,
    .vf-mobile-gallery-shell .vf-product-main-image img,
    .vf-mobile-gallery-shell .vf-product-main-image video {
        height: 570px !important;
    }
}