/* ==========================================================================
   INSTANTSHOP — AJUSTES MOBILE / APLICATIVO (v1)
   1) Imagens dos cards de produto ocupam 100% do cartão (sem faixas laterais).
   2) Tipografia com a pilha de fontes nativa do sistema e renderização nítida
      (sem texto serrilhado no WebView do aplicativo).
   Carregado por último no <head> para vencer os CSS anteriores.
   ========================================================================== */


/* ---------- 1) IMAGEM DOS CARDS DE PRODUTO ---------- */
@media (max-width: 1024px) {
    html body .instantshop-card-image,
    html body .instantshop-mobile-product-media-v111 {
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #f3f3f3 !important;
        line-height: 0 !important;
        flex: 0 0 auto !important;
    }

    html body .instantshop-card-image > img,
    html body .instantshop-mobile-product-media-v111 > img,
    html body .instantshop-card-image > a > img,
    html body .instantshop-mobile-product-media-v111 > a > img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    /* Mantém o hover/zoom do desktop sem estourar o cartão no mobile */
    html body .instantshop-product-card-v20:hover .instantshop-card-image > img {
        transform: none !important;
    }
}


/* ---------- 2) TIPOGRAFIA TIPO APLICATIVO ---------- */
:root {
    --instantshop-app-font:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

html,
body {
    font-family: var(--instantshop-app-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: weight style;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Aplica a fonte do app em todos os textos, exceto ícones, código e SVG */
html body *:not(i):not(svg):not(svg *):not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="ion-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.bi):not(.material-icons) {
    font-family: var(--instantshop-app-font) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Títulos e negritos usam pesos reais da fonte do sistema (sem negrito sintético borrado) */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    letter-spacing: -0.015em;
}

/* Evita que camadas de GPU deixem o texto áspero no WebView */
html body .instantshop-product-card-v20,
html body .instantshop-mobile-product-card-v111 {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}