/* ==========================================================
   Sprint 1 — Bloco 4
   Marketplace responsivo simples, mobile-first e funcional.
   Este arquivo deve ser carregado depois de assets/css/style.css.
   ========================================================== */

:root {
    --market-tap-size: 44px;
}

/* Evita vazamentos horizontais em 380px */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    text-rendering: optimizeLegibility;
}

/* Toques confortáveis em celular */
button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.nav-link,
.header-cart-button,
.header-menu-button,
.product-card a,
.marketplace-product-card a {
    touch-action: manipulation;
}

/* Cabeçalho público */
.site-header,
.header,
.main-header {
    max-width: 100%;
}

.header-content,
.header-inner,
.top-header,
.header-main {
    min-width: 0;
}

.market-search,
.hero-search,
.search-box,
.search-wrapper {
    min-width: 0;
}

/* Busca: não deixar input estourar */
.market-search input,
.hero-search input,
.search-box input,
.search-wrapper input {
    min-width: 0;
}

/* Navegação horizontal: fica rolável sem quebrar layout */
.main-nav,
.nav-scroll,
.categories-nav {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.main-nav::-webkit-scrollbar,
.nav-scroll::-webkit-scrollbar,
.categories-nav::-webkit-scrollbar {
    display: none;
}

/* Cards e grids */
.product-grid,
.marketplace-grid,
.stores-grid,
.store-grid,
.categories-page-grid,
.marketplace-kpis {
    min-width: 0;
}

.product-card,
.marketplace-product-card,
.store-card,
.category-card,
.market-section-card,
.market-strip,
.marketplace-card {
    min-width: 0;
}

.product-card img,
.marketplace-product-card img,
.store-card img,
.marketplace-card img {
    max-width: 100%;
}

/* Textos longos não quebram layout */
.product-card,
.marketplace-product-card,
.store-card,
.category-card {
    overflow-wrap: anywhere;
}

.product-title,
.card-title,
.store-name,
.category-card-title,
.marketplace-card-title {
    overflow-wrap: anywhere;
}

/* Botões dentro dos cards */
.product-actions,
.card-actions,
.marketplace-card-actions,
.store-actions {
    min-width: 0;
}

.product-actions a,
.product-actions button,
.card-actions a,
.card-actions button,
.marketplace-card-actions a,
.marketplace-card-actions button {
    max-width: 100%;
    white-space: normal;
}

/* Seções com respiro menor em telas pequenas */
@media (max-width: 1024px) {
    .market-main,
    .market-content,
    .main-content,
    .container {
        width: 100%;
        max-width: 100%;
    }

    .product-grid,
    .marketplace-grid,
    .stores-grid {
        gap: 0.85rem;
    }
}

@media (max-width: 768px) {
    body {
        background: #f8fafc;
    }

    .main-nav {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-list {
        gap: 0.5rem;
    }

    .nav-link {
        min-height: var(--market-tap-size);
        padding: 0.55rem 0.85rem;
    }

    .hero,
    .market-hero,
    .home-hero {
        border-radius: 0 0 22px 22px;
    }

    .section-header,
    .stores-section-header-row {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .section-title {
        line-height: 1.2;
    }

    .product-grid,
    .marketplace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .categories-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketplace-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-strip .product-card {
        width: min(72vw, 260px);
    }
}

@media (max-width: 480px) {
    .header-cart-button,
    .header-menu-button {
        width: var(--market-tap-size);
        height: var(--market-tap-size);
        min-width: var(--market-tap-size);
    }

    .header-menu-button span,
    .nav-link .nav-label {
        display: none;
    }

    .hero-search,
    .market-search,
    .search-box {
        width: 100%;
    }

    .search-suggestions {
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: 68px;
        max-height: min(60vh, 420px);
    }

    .product-grid,
    .marketplace-grid,
    .stores-grid,
    .categories-page-grid,
    .marketplace-kpis {
        gap: 0.75rem;
    }

    .product-card,
    .marketplace-product-card,
    .category-card,
    .market-section-card {
        border-radius: 18px;
    }

    .market-strip-track {
        gap: 0.7rem;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: min(74vw, 245px);
    }

    .store-logo-wrapper {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 390px) {
    .product-grid,
    .marketplace-grid,
    .categories-page-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-kpis {
        grid-template-columns: 1fr;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: min(82vw, 250px);
    }

    .section-header,
    .stores-section-header-row {
        flex-direction: column;
    }

    .section-link {
        width: 100%;
        justify-content: center;
    }

    .nav-link {
        padding-inline: 0.75rem;
    }
}

/* 380px é o tamanho mínimo oficial do MVP */
@media (max-width: 380px) {
    .main-nav {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .product-grid,
    .marketplace-grid,
    .categories-page-grid {
        grid-template-columns: 1fr;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: 84vw;
    }

    .product-actions a,
    .product-actions button,
    .card-actions a,
    .card-actions button,
    .marketplace-card-actions a,
    .marketplace-card-actions button {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================
   Sprint 1 — Bloco 4.2
   Ajuste fino: cards 2 colunas em 380px e busca mobile.
   ========================================================== */

/* Em mobile pequeno, manter 2 cards por linha para produtos da vitrine.
   A exceção fica para blocos que precisam ser lista textual. */
@media (max-width: 390px) {
    .product-grid,
    .marketplace-grid,
    .products-grid,
    .regional-grid,
    .vitrine-regional-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-card,
    .marketplace-product-card {
        border-radius: 16px;
    }

    .product-card .product-title,
    .marketplace-product-card .product-title,
    .product-card h3,
    .marketplace-product-card h3 {
        font-size: 0.86rem;
        line-height: 1.22;
    }

    .product-card .product-price,
    .marketplace-product-card .product-price,
    .product-card .price,
    .marketplace-product-card .price {
        font-size: 0.95rem;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 2.4rem) / 2);
        min-width: 150px;
        max-width: 178px;
    }
}

/* 380px é o mínimo oficial: produto em 2 colunas, não 1. */
@media (max-width: 380px) {
    .product-grid,
    .marketplace-grid,
    .products-grid,
    .regional-grid,
    .vitrine-regional-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 2.2rem) / 2);
        min-width: 145px;
        max-width: 172px;
    }

    .product-actions a,
    .product-actions button,
    .card-actions a,
    .card-actions button,
    .marketplace-card-actions a,
    .marketplace-card-actions button {
        width: 100%;
        justify-content: center;
        min-height: 38px;
        padding-inline: 0.55rem;
        font-size: 0.82rem;
    }
}

/* Busca mobile: sugestões ficam mais abaixo para o texto digitado continuar visível. */
@media (max-width: 640px) {
    .search-suggestions,
    .search-suggestions.hero-suggestions {
        top: calc(70px + env(safe-area-inset-top, 0px) + 16px) !important;
        left: 0.85rem !important;
        right: 0.85rem !important;
        max-height: min(56vh, 380px);
        border-radius: 18px;
    }

    .hero-search .search-suggestions,
    .market-search .search-suggestions {
        margin-top: 0.75rem;
    }
}

@media (max-width: 430px) {
    .search-suggestions,
    .search-suggestions.hero-suggestions {
        top: calc(82px + env(safe-area-inset-top, 0px)) !important;
    }
}

@media (max-width: 380px) {
    .search-suggestions,
    .search-suggestions.hero-suggestions {
        top: calc(88px + env(safe-area-inset-top, 0px)) !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
    }
}


/* ==========================================================
   Sprint 1 — Bloco 4.3
   Ajuste real em PWA: menu inferior, cards e inicialização.
   ========================================================== */

/* Splash mais curto: evita sensação de tela branca longa no PWA. */
.app-boot-splash,
.app-boot-splash.app-nav-splash,
.app-boot-splash.app-nav-splash.is-visible {
    transition-duration: 0.1s !important;
}

/* Remove o aviso textual "Arraste para ver mais". A navegação deve ser intuitiva. */
.market-strip-mobile-tip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (max-width: 640px) {
    /* Menu inferior do marketplace: mais encaixado no fim útil da tela. */
    .mobile-bottom-nav {
        bottom: 0 !important;
        padding-top: 0.15rem !important;
        padding-left: max(0.45rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.45rem, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: max(0.16rem, env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        align-items: end !important;
        gap: 0.18rem !important;
    }

    .mobile-bottom-link {
        min-height: 54px !important;
        padding: 0.08rem 0.06rem 0.12rem !important;
        justify-content: flex-end !important;
        gap: 0.08rem !important;
        font-size: 0.66rem !important;
        line-height: 1.05 !important;
    }

    .mobile-bottom-link i {
        font-size: 1.05rem !important;
        line-height: 1 !important;
    }

    .mobile-bottom-link-cart {
        margin-top: -0.55rem !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 52px !important;
        height: 52px !important;
        border-width: 3px !important;
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24) !important;
    }

    .mobile-bottom-link-cart i {
        font-size: 1.18rem !important;
    }

    .market-main {
        padding-bottom: calc(4.65rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .back-to-top {
        bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Cards das recomendações: menos sobra lateral e menor vão entre cards. */
    .market-strip {
        margin-left: -0.35rem !important;
        margin-right: -0.35rem !important;
        overflow: hidden !important;
        --market-strip-overlay-top: 0 !important;
        --market-strip-overlay-bottom: 0 !important;
    }

    .market-strip::before,
    .market-strip::after,
    .market-strip-scroller[data-strip-hint]::before,
    .market-strip-scroller[data-strip-hint]::after {
        display: none !important;
        opacity: 0 !important;
    }

    .market-strip-header {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .market-strip-scroller {
        padding: 0.18rem 0.35rem 0.55rem !important;
        scroll-padding-inline: 0.35rem !important;
    }

    .market-strip-track {
        gap: 0.42rem !important;
        min-height: 292px !important;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 2.05rem) / 2) !important;
        min-width: 144px !important;
        max-width: 186px !important;
    }

    .product-grid,
    .marketplace-grid,
    .products-grid,
    .regional-grid,
    .vitrine-regional-grid {
        gap: 0.5rem !important;
    }
}

@media (max-width: 430px) {
    .market-strip-track {
        gap: 0.38rem !important;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 1.9rem) / 2) !important;
    }
}

@media (max-width: 380px) {
    .mobile-bottom-nav {
        padding-left: 0.38rem !important;
        padding-right: 0.38rem !important;
        min-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-bottom-link {
        min-height: 52px !important;
        font-size: 0.63rem !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 50px !important;
        height: 50px !important;
    }

    .market-strip {
        margin-left: -0.28rem !important;
        margin-right: -0.28rem !important;
    }

    .market-strip-scroller {
        padding-left: 0.28rem !important;
        padding-right: 0.28rem !important;
    }

    .market-strip-track {
        gap: 0.34rem !important;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 1.7rem) / 2) !important;
        min-width: 142px !important;
        max-width: 174px !important;
    }
}

/* ==========================================================
   Sprint 1 — Bloco 4.4
   Ajuste fino real: PWA standalone, cards e logo.
   ========================================================== */

/* Logo mais limpo: remove renderizacao pixelada. Se a imagem original for pequena,
   o ideal continua sendo trocar por PNG 2x/3x ou SVG. */
.market-logo,
.app-boot-splash-logo {
    image-rendering: auto !important;
    image-rendering: smooth !important;
    filter: none !important;
    transform: none !important;
    backface-visibility: hidden;
}

@media (max-width: 640px) {
    .market-logo {
        height: 48px !important;
        max-width: 124px !important;
        object-fit: contain !important;
    }
}

/* Cards dos carrosseis: menos vao, sem sombra branca lateral e com inicio do terceiro card visivel. */
@media (max-width: 640px) {
    .market-main {
        padding-left: max(0.45rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.45rem, env(safe-area-inset-right, 0px)) !important;
    }

    .market-strip {
        margin-left: -0.45rem !important;
        margin-right: -0.45rem !important;
        overflow: visible !important;
    }

    .market-strip::before,
    .market-strip::after,
    .market-strip-scroller[data-strip-hint]::before,
    .market-strip-scroller[data-strip-hint]::after {
        content: none !important;
        display: none !important;
    }

    .market-strip-scroller {
        padding-left: 0.45rem !important;
        padding-right: 0 !important;
        padding-bottom: 0.35rem !important;
        scroll-padding-inline: 0.45rem !important;
    }

    .market-strip-track {
        gap: 0.30rem !important;
        min-height: 285px !important;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 1.55rem) / 2) !important;
        min-width: 144px !important;
        max-width: 184px !important;
    }

    .product-card,
    .marketplace-product-card {
        border-radius: 13px !important;
    }
}

@media (max-width: 380px) {
    .market-strip {
        margin-left: -0.40rem !important;
        margin-right: -0.40rem !important;
    }

    .market-strip-scroller {
        padding-left: 0.40rem !important;
    }

    .market-strip-track {
        gap: 0.26rem !important;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 1.38rem) / 2) !important;
        min-width: 142px !important;
        max-width: 176px !important;
    }
}

/* Botao de arrastar removido definitivamente. */
.market-strip-mobile-tip,
.market-strip-mobile-tip.is-visible {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Navegador normal: mantem uma folga segura porque existe barra do navegador. */
@media (max-width: 640px) {
    .mobile-bottom-nav {
        bottom: 0 !important;
    }
}

/* PWA instalado: sem barra do navegador. A nav pode descer mais.
   Usamos uma folga calculada para nao entrar embaixo do indicador/barra do celular. */
@media (display-mode: standalone) and (max-width: 640px),
       (display-mode: fullscreen) and (max-width: 640px) {
    :root {
        --pwa-nav-safe-gap: max(6px, calc(env(safe-area-inset-bottom, 0px) - 24px));
        --pwa-nav-height-real: 54px;
    }

    .mobile-bottom-nav {
        bottom: 0 !important;
        min-height: calc(var(--pwa-nav-height-real) + var(--pwa-nav-safe-gap)) !important;
        height: calc(var(--pwa-nav-height-real) + var(--pwa-nav-safe-gap)) !important;
        padding-top: 0 !important;
        padding-bottom: var(--pwa-nav-safe-gap) !important;
        padding-left: max(0.45rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.45rem, env(safe-area-inset-right, 0px)) !important;
        align-items: end !important;
    }

    .mobile-bottom-link {
        min-height: var(--pwa-nav-height-real) !important;
        height: var(--pwa-nav-height-real) !important;
        padding-top: 0.12rem !important;
        padding-bottom: 0 !important;
        justify-content: center !important;
        gap: 0.05rem !important;
    }

    .mobile-bottom-link i {
        font-size: 1.02rem !important;
    }

    .mobile-bottom-link span {
        line-height: 1 !important;
    }

    .mobile-bottom-link-cart {
        margin-top: -0.32rem !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 48px !important;
        height: 48px !important;
        border-width: 3px !important;
    }

    .mobile-bottom-link-cart i {
        font-size: 1.08rem !important;
    }

    .market-main {
        padding-bottom: calc(var(--pwa-nav-height-real) + var(--pwa-nav-safe-gap) + 0.75rem) !important;
    }

    .back-to-top {
        bottom: calc(var(--pwa-nav-height-real) + var(--pwa-nav-safe-gap) + 0.85rem) !important;
    }
}

/* iOS antigo pode nao reconhecer display-mode corretamente no CSS. */
html.is-pwa-standalone .mobile-bottom-nav,
body.is-pwa-standalone .mobile-bottom-nav {
    bottom: 0 !important;
    min-height: calc(54px + max(6px, calc(env(safe-area-inset-bottom, 0px) - 24px))) !important;
    height: calc(54px + max(6px, calc(env(safe-area-inset-bottom, 0px) - 24px))) !important;
    padding-top: 0 !important;
    padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 24px)) !important;
    align-items: end !important;
}

html.is-pwa-standalone .mobile-bottom-link,
body.is-pwa-standalone .mobile-bottom-link {
    min-height: 54px !important;
    height: 54px !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
}

html.is-pwa-standalone .mobile-bottom-link-cart,
body.is-pwa-standalone .mobile-bottom-link-cart {
    margin-top: -0.32rem !important;
}

html.is-pwa-standalone .market-main,
body.is-pwa-standalone .market-main {
    padding-bottom: calc(54px + max(6px, calc(env(safe-area-inset-bottom, 0px) - 24px)) + 0.75rem) !important;
}


/* ==========================================================
   Sprint 1 — Bloco 4.5
   Ajuste fino: carrinho PWA, cards, selos e modal de localização.
   ========================================================== */

/* Carrinho central: volta a respirar e sobe só o necessário. */
@media (max-width: 640px) {
    .mobile-bottom-link-cart {
        margin-top: -0.72rem !important;
        overflow: visible !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        border-width: 4px !important;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28) !important;
    }

    .mobile-bottom-link-cart i {
        font-size: 1.24rem !important;
    }
}

@media (display-mode: standalone) and (max-width: 640px),
       (display-mode: fullscreen) and (max-width: 640px) {
    .mobile-bottom-nav {
        overflow: visible !important;
        min-height: calc(58px + max(4px, calc(env(safe-area-inset-bottom, 0px) - 28px))) !important;
        height: calc(58px + max(4px, calc(env(safe-area-inset-bottom, 0px) - 28px))) !important;
        padding-bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) - 28px)) !important;
    }

    .mobile-bottom-link {
        min-height: 56px !important;
        height: 56px !important;
    }

    .mobile-bottom-link-cart {
        margin-top: -0.70rem !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 56px !important;
        height: 56px !important;
    }
}

html.is-pwa-standalone .mobile-bottom-nav,
body.is-pwa-standalone .mobile-bottom-nav {
    overflow: visible !important;
    min-height: calc(58px + max(4px, calc(env(safe-area-inset-bottom, 0px) - 28px))) !important;
    height: calc(58px + max(4px, calc(env(safe-area-inset-bottom, 0px) - 28px))) !important;
    padding-bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) - 28px)) !important;
}

html.is-pwa-standalone .mobile-bottom-link-cart,
body.is-pwa-standalone .mobile-bottom-link-cart {
    margin-top: -0.70rem !important;
}

html.is-pwa-standalone .mobile-bottom-link-cart-badge,
body.is-pwa-standalone .mobile-bottom-link-cart-badge {
    width: 56px !important;
    height: 56px !important;
}

/* Lojas: remover selo de verificado nos logos para limpar visual. */
.stores-grid .store-verified-badge {
    display: none !important;
}

/* Cards: selo oficial vira apenas check verde, sem bola azul. */
.marketplace-card-official-badge {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #16a34a !important;
    font-size: 0.78rem !important;
    margin-right: 0.26rem !important;
    vertical-align: 0.04em !important;
}

.marketplace-card-official-badge i {
    transform: none !important;
}

/* Cards dos carrosseis: menos branco lateral, menor gap e terceiro card insinuado. */
@media (max-width: 640px) {
    .market-strip {
        margin-left: -0.55rem !important;
        margin-right: -0.55rem !important;
        overflow: visible !important;
    }

    .market-strip-header {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .market-strip-scroller {
        padding-left: 0.10rem !important;
        padding-right: 0 !important;
        scroll-padding-inline: 0.10rem !important;
    }

    .market-strip-track {
        gap: 0.18rem !important;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 0.92rem) / 2) !important;
        min-width: 146px !important;
        max-width: 184px !important;
    }
}

@media (max-width: 380px) {
    .market-strip {
        margin-left: -0.48rem !important;
        margin-right: -0.48rem !important;
    }

    .market-strip-scroller {
        padding-left: 0.08rem !important;
    }

    .market-strip-track {
        gap: 0.14rem !important;
    }

    .market-strip .product-card,
    .market-strip-skeleton-card {
        width: calc((100vw - 0.76rem) / 2) !important;
        min-width: 144px !important;
        max-width: 178px !important;
    }
}

/* Texto de dica removido definitivamente, mesmo se o JS antigo criar o elemento. */
.market-strip-mobile-tip,
.market-strip-mobile-tip.is-visible,
.market-strip-mobile-tip * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Modal de localização: visual mais simples, claro e mobile-first. */
.geo-city-modal {
    background: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(10px) !important;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 0.85rem max(1rem, env(safe-area-inset-bottom, 0px)) !important;
}

.geo-city-modal .modal-content {
    width: min(440px, calc(100vw - 1.5rem)) !important;
    max-width: 440px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24) !important;
    overflow: hidden !important;
}

.geo-city-modal-body {
    padding: 1.15rem !important;
}

.geo-city-modal-head {
    align-items: flex-start !important;
    gap: 0.85rem !important;
}

.geo-city-hero-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.16), rgba(37, 99, 235, 0.08)) !important;
    color: #16a34a !important;
    border-color: rgba(187, 247, 208, 0.95) !important;
}

.geo-city-modal-title {
    font-size: 1.18rem !important;
    letter-spacing: -0.02em !important;
}

.geo-city-modal-subtitle {
    max-width: 28ch !important;
    margin-top: 0.28rem !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
}

.geo-city-options {
    margin-top: 1rem !important;
    gap: 0.48rem !important;
}

.geo-city-option {
    min-height: 54px !important;
    border-radius: 16px !important;
    padding: 0.70rem 0.78rem !important;
    background: #f8fafc !important;
}

.geo-city-option-icon {
    background: rgba(22, 163, 74, 0.10) !important;
    border-color: rgba(187, 247, 208, 0.9) !important;
    color: #16a34a !important;
}

.geo-city-option-cta {
    color: #16a34a !important;
}

.geo-city-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    margin-top: 0.9rem !important;
}

.geo-city-gps-btn,
.geo-city-more-btn {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    justify-content: flex-start !important;
}

.geo-city-gps-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #16a34a, #059669) !important;
    border-color: rgba(22, 163, 74, 0.28) !important;
    box-shadow: 0 16px 32px rgba(22, 163, 74, 0.20) !important;
}

.geo-city-gps-icon {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.geo-city-more-btn {
    background: #fff !important;
}

.geo-city-modal-status {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
    font-size: 0.84rem !important;
}

@media (max-width: 430px) {
    .geo-city-modal {
        align-items: flex-end !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    .geo-city-modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        border-radius: 28px 28px 0 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    .geo-city-modal-body {
        padding: 1.05rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* ==========================================================
   Sprint 1 — Bloco 4.6
   Correção pós-teste real: modal de localização e carrinho PWA.
   ========================================================== */

/* Modal de localização: neutraliza conflito com .modal genérico
   e usa aria-hidden como fonte de verdade. */
.geo-city-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2200 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

.geo-city-modal[aria-hidden="false"],
.geo-city-modal.is-open {
    display: flex !important;
}

.geo-city-modal .modal-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: min(86dvh, 720px) !important;
    overflow: hidden !important;
}

.geo-city-modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.geo-city-modal .modal-close {
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    z-index: 2 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    line-height: 1 !important;
}

.geo-city-options {
    max-height: min(34dvh, 260px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.geo-city-more-panel {
    margin-top: 0.75rem !important;
}

.geo-city-more-panel[hidden] {
    display: none !important;
}

@media (max-width: 430px) {
    .geo-city-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 0.75rem) !important;
        padding-bottom: 0 !important;
    }

    .geo-city-modal .modal-content {
        max-height: min(88dvh, 680px) !important;
    }

    .geo-city-modal-body {
        padding-bottom: calc(1rem + max(env(safe-area-inset-bottom, 0px), 8px)) !important;
    }
}

/* Menu inferior: o botão central pode subir um pouco, mas o texto
   "Carrinho" precisa continuar dentro da barra e legível. */
@media (max-width: 640px) {
    .mobile-bottom-nav {
        bottom: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: end !important;
        min-height: calc(70px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
        height: calc(70px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
        padding-top: 0.24rem !important;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px) !important;
        overflow: visible !important;
    }

    .mobile-bottom-link {
        min-height: 62px !important;
        height: 62px !important;
        padding: 0.18rem 0.04rem 0.22rem !important;
        justify-content: flex-end !important;
        gap: 0.20rem !important;
        overflow: visible !important;
    }

    .mobile-bottom-link > span:last-child {
        display: block !important;
        max-width: 100% !important;
        line-height: 1.05 !important;
        font-size: 0.66rem !important;
        white-space: nowrap !important;
        transform: none !important;
        margin: 0 !important;
    }

    .mobile-bottom-link-cart {
        margin-top: 0 !important;
        transform: translateY(-0.30rem) !important;
        justify-content: flex-end !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        border-width: 4px !important;
        flex: 0 0 auto !important;
        transform: none !important;
    }

    .mobile-bottom-link-cart > span:last-child {
        margin-top: -0.03rem !important;
        position: relative !important;
        bottom: auto !important;
    }

    .market-main {
        padding-bottom: calc(78px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
    }

    .back-to-top {
        bottom: calc(82px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
    }
}

/* Em PWA instalado, mantém a barra no fim real da tela, mas sem sufocar o carrinho. */
@media (display-mode: standalone) and (max-width: 640px),
       (display-mode: fullscreen) and (max-width: 640px) {
    .mobile-bottom-nav {
        min-height: calc(68px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
        height: calc(68px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px) !important;
    }

    .mobile-bottom-link {
        min-height: 60px !important;
        height: 60px !important;
    }

    .mobile-bottom-link-cart {
        transform: translateY(-0.34rem) !important;
    }
}

html.is-pwa-standalone .mobile-bottom-nav,
body.is-pwa-standalone .mobile-bottom-nav {
    min-height: calc(68px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
    height: calc(68px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px) !important;
}

html.is-pwa-standalone .mobile-bottom-link,
body.is-pwa-standalone .mobile-bottom-link {
    min-height: 60px !important;
    height: 60px !important;
}

html.is-pwa-standalone .mobile-bottom-link-cart,
body.is-pwa-standalone .mobile-bottom-link-cart {
    margin-top: 0 !important;
    transform: translateY(-0.34rem) !important;
}