/* Correcoes finais: fonte padrao, lista de produtos e popup. */
body.app-home-page,
body.app-access-page,
body.app-splash-page,
body.app-store-page,
body.app-internal-page {
    --rango-font: "Rango UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --rango-title-font: "Rango UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --rango-ink: #101423;
    --rango-muted: #667085;
    --rango-line: #eef0f4;
    --rango-orange: #ff9500;
    --rango-orange-dark: #f08300;
    font-family: var(--rango-font) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body.app-home-page :where(p, span, strong, b, small, label, input, select, textarea, a, div),
body.app-access-page :where(p, span, strong, b, small, label, input, select, textarea, a, div),
body.app-store-page :where(p, span, strong, b, small, label, input, select, textarea, a, div),
body.app-internal-page :where(p, span, strong, b, small, label, input, select, textarea, a, div):not(.material-icons):not(.material-symbols-outlined):not(.bi) {
    font-family: var(--rango-font) !important;
    letter-spacing: 0 !important;
}

body.app-home-page :where(h1, h2, h3, h4, h5, h6, button, .titulo_lista_lojas, .home-filter-row button, .home-bottom-nav button),
body.app-access-page :where(h1, h2, h3, h4, h5, h6, button, .app-field-label),
body.app-store-page :where(h1, h2, h3, h4, h5, h6, button, #nome_loja, .store-name, .store-section-title),
body.app-internal-page :where(h1, h2, h3, h4, h5, h6, button, #nome_categoria, #detalhes, #lbl_carrinho, #pedidos_lbl, #nome_produto, .titulo_produtos, .product-option-title, .checkout-section-title, .order-title, #total_lbl, #lbl_valor_btn, #add_lbl, .swal2-title) {
    font-family: var(--rango-title-font) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

body.app-products-page .produtos {
    width: calc(100% - 44px) !important;
    min-height: 88px !important;
    margin: 0 22px !important;
    padding: 12px 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rango-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.app-products-page .produtos > .row {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

body.app-products-page .produtos > .row > .col-4,
body.app-products-page .produtos > .row > .col-8 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.app-products-page .imagem_produtos {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    margin: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}

body.app-products-page .titulo_produtos {
    display: block !important;
    margin: 0 0 5px !important;
    color: var(--rango-ink) !important;
    font-family: var(--rango-title-font) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
}

body.app-products-page .subtitulo_produtos {
    display: -webkit-box !important;
    margin: 0 0 7px !important;
    color: var(--rango-muted) !important;
    font-family: var(--rango-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

body.app-products-page .texto_adicional_produtos,
body.app-products-page .texto_adicional_produtos span {
    color: #008a3d !important;
    font-family: var(--rango-title-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

body.app-products-page #nome_categoria {
    font-family: var(--rango-title-font) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
}

body.app-products-page #tela_pesquisa {
    padding: 18px 22px 14px !important;
    background: #ffffff !important;
}

body.app-products-page #pesquisa {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border: 1px solid #e3e5ea !important;
    border-radius: 16px !important;
    color: var(--rango-ink) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.app-products-page #pesquisa {
    font-family: var(--rango-font) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
}

body.app-internal-page .swal2-container {
    padding: 16px !important;
}

body.app-internal-page .swal2-popup {
    width: min(calc(100% - 44px), 318px) !important;
    padding: 20px !important;
    overflow: visible !important;
    border-radius: 22px !important;
    color: var(--rango-ink) !important;
    font-family: var(--rango-font) !important;
    box-shadow: 0 24px 64px rgba(16, 20, 35, 0.24) !important;
}

body.app-internal-page .swal2-title {
    color: var(--rango-ink) !important;
    font-family: var(--rango-title-font) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
}

body.app-internal-page .swal2-html-container {
    color: var(--rango-muted) !important;
    font-family: var(--rango-font) !important;
    font-size: 13.2px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    overflow: visible !important;
}

body.app-internal-page .swal2-confirm {
    min-height: 42px !important;
    padding: 0 18px !important;
    background: var(--rango-orange) !important;
    border: 0 !important;
    border-radius: 13px !important;
    font-family: var(--rango-title-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

body.app-product-detail-page .swal2-popup.rango-cart-added-popup {
    width: min(calc(100% - 52px), 300px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 20px 22px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

body.app-product-detail-page .swal2-popup.rango-cart-added-popup .swal2-icon,
body.app-product-detail-page .swal2-popup.rango-cart-added-popup .swal2-title,
body.app-product-detail-page .swal2-popup.rango-cart-added-popup .swal2-actions {
    display: none !important;
}

body.app-product-detail-page .swal2-popup.rango-cart-added-popup .swal2-html-container {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.app-product-detail-page .rango-cart-added-content {
    display: grid !important;
    place-items: center !important;
    gap: 13px !important;
    text-align: center !important;
}

body.app-product-detail-page .rango-cart-added-icon {
    width: 56px !important;
    height: 56px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #16a34a !important;
    background: #e9fbf0 !important;
    border-radius: 999px !important;
    font-family: var(--rango-title-font) !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

body.app-product-detail-page .rango-cart-added-icon svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    fill: currentColor !important;
}

body.app-product-detail-page .rango-cart-added-content strong {
    display: block !important;
    width: 100% !important;
    color: var(--rango-ink) !important;
    font-family: var(--rango-title-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    text-align: center !important;
    white-space: normal !important;
}

body.app-product-detail-page .swal2-popup.rango-cart-added-popup .swal2-timer-progress-bar {
    display: none !important;
}

@media (max-width: 370px) {
    body.app-products-page .produtos {
        width: calc(100% - 36px) !important;
        margin-left: 18px !important;
        margin-right: 18px !important;
    }

    body.app-products-page .produtos > .row {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.app-products-page .imagem_produtos {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    body.app-products-page .titulo_produtos {
        font-size: 13.8px !important;
    }

    body.app-products-page .subtitulo_produtos {
        font-size: 12px !important;
    }
}

/* Home: topo no estilo iFood, com saudacao e endereco salvo. */
body.app-home-page .home-shell {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
}

body.app-home-page .home-topbar {
    min-height: 42px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
}

body.app-home-page .home-icon-button {
    width: 38px !important;
    height: 38px !important;
}

body.app-home-page .home-icon-button i {
    font-size: 22px !important;
}

body.app-home-page .home-user-location {
    width: 100% !important;
    display: grid !important;
    gap: 5px !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    text-align: left !important;
}

body.app-home-page #home_saudacao {
    margin: 0 !important;
    color: #696b73 !important;
    font-family: var(--rango-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
}

body.app-home-page .home-address-button {
    width: 100% !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #101423 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    box-shadow: none !important;
}

body.app-home-page .home-address-button strong {
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    display: block !important;
    overflow: hidden !important;
    color: #101423 !important;
    font-family: var(--rango-title-font) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body.app-home-page .home-address-button .bi-chevron-down {
    flex: 0 0 auto !important;
    color: #55575f !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

body.app-home-page .home-search-section {
    margin-top: 0 !important;
}

@media (max-width: 370px) {
    body.app-home-page #home_saudacao {
        font-size: 15px !important;
    }

    body.app-home-page .home-address-button strong {
        font-size: 20px !important;
    }
}

/* Entrada com nome/endereco e home no padrao iFood compacto. */
html body.app-access-page .app-access-base {
    align-items: center !important;
    overflow: hidden !important;
    padding: 34px 26px 52px !important;
}

html body.app-access-page .app-access-shell {
    width: min(100%, 355px) !important;
    min-height: auto !important;
    justify-content: center !important;
}

html body.app-access-page .app-access-logo {
    min-height: 78px !important;
    margin: 0 0 12px !important;
}

html body.app-access-page .app-access-logo #logo {
    width: min(48vw, 178px) !important;
    filter: drop-shadow(0 12px 18px rgba(40, 0, 0, 0.22)) !important;
}

html body.app-access-page .app-access-form {
    gap: 9px !important;
}

html body.app-access-page .app-field {
    min-height: 56px !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    padding: 0 14px 0 10px !important;
    border-radius: 13px !important;
    box-shadow: 0 12px 24px rgba(81, 0, 10, 0.13) !important;
}

html body.app-access-page .app-field > i {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
}

html body.app-access-page .app-field-label {
    color: #657386 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

html body.app-access-page .app-field :where(input, select) {
    height: 25px !important;
    color: #101423 !important;
    font-family: var(--rango-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
}

html body.app-access-page .app-field select:invalid,
html body.app-access-page .app-field .form-select {
    color: #7b8494 !important;
    font-weight: 400 !important;
}

html body.app-access-page .app-select-field::after {
    right: 14px !important;
    font-size: 17px !important;
}

html body.app-access-page .app-continue {
    height: 58px !important;
    margin-top: 4px !important;
    border-radius: 13px !important;
}

html body.app-home-page .home-shell {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
}

html body.app-home-page .home-topbar {
    margin-bottom: 18px !important;
}

html body.app-home-page .home-user-location {
    gap: 6px !important;
    margin: 0 0 16px !important;
}

html body.app-home-page #home_saudacao {
    color: #6b6e76 !important;
    font-family: var(--rango-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
}

html body.app-home-page .home-address-button strong {
    color: #101423 !important;
    font-family: var(--rango-font) !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.22 !important;
}

html body.app-home-page .home-address-button .bi-chevron-down {
    font-size: 13px !important;
}

html body.app-home-page .home-section-title h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
}

@media (max-width: 370px) {
    html body.app-access-page .app-access-base {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    html body.app-access-page .app-field {
        min-height: 53px !important;
    }

    html body.app-home-page .home-address-button strong {
        font-size: 14.5px !important;
        font-weight: 400 !important;
    }

    html body.app-home-page .home-section-title h2 {
        font-size: 17px !important;
    }
}

/* Perfil do usuario: cadastro/endereco no lugar correto. */
html body.app-profile-page {
    --profile-orange: #ff9500;
    --profile-orange-dark: #f08300;
    --profile-ink: #101423;
    --profile-muted: #667085;
    --profile-line: #eef0f4;
    --profile-soft: #f7f8fb;
    min-height: 100vh !important;
    margin: 0 !important;
    color: var(--profile-ink) !important;
    background: #ffffff !important;
    font-family: var(--rango-font) !important;
}

html body.app-profile-page #loading-page-bb {
    width: 100% !important;
    max-width: 430px !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
}

html body.app-profile-page .profile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    height: 82px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 18px 22px 16px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, var(--profile-orange), var(--profile-orange-dark)) !important;
    box-shadow: 0 10px 24px rgba(255, 149, 0, 0.16) !important;
}

html body.app-profile-page .profile-header strong {
    grid-column: 2 !important;
    justify-self: start !important;
    color: #ffffff !important;
    font-family: var(--rango-title-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
}

html body.app-profile-page .profile-back {
    width: 38px !important;
    height: 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

html body.app-profile-page .profile-back i {
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

html body.app-profile-page .profile-container {
    width: 100% !important;
    display: grid !important;
    gap: 14px !important;
    padding: 18px 18px 28px !important;
}

html body.app-profile-page .profile-card {
    width: 100% !important;
    display: grid !important;
    gap: 11px !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--profile-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(16, 20, 35, 0.055) !important;
}

html body.app-profile-page .profile-card-title {
    display: grid !important;
    gap: 3px !important;
}

html body.app-profile-page .profile-card-title span {
    color: var(--profile-ink) !important;
    font-family: var(--rango-title-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

html body.app-profile-page .profile-card-title small {
    color: var(--profile-muted) !important;
    font-family: var(--rango-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

html body.app-profile-page .profile-field {
    width: 100% !important;
    display: grid !important;
    gap: 5px !important;
    margin: 0 !important;
}

html body.app-profile-page .profile-field span {
    color: #4f5665 !important;
    font-family: var(--rango-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

html body.app-profile-page .profile-field :where(input, select) {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 13px !important;
    color: var(--profile-ink) !important;
    background: #ffffff !important;
    border: 1px solid #e1e4ea !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    font-family: var(--rango-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    outline: 0 !important;
}

html body.app-profile-page .profile-field :where(input, select):focus {
    border-color: var(--profile-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.12) !important;
}

html body.app-profile-page .profile-field-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 10px !important;
}

html body.app-profile-page .profile-location-btn {
    width: 100% !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: var(--profile-orange-dark) !important;
    background: #fff7e8 !important;
    border: 1px solid rgba(255, 149, 0, 0.2) !important;
    border-radius: 13px !important;
    font-family: var(--rango-title-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

html body.app-profile-page .profile-location-btn i {
    font-size: 16px !important;
}

html body.app-profile-page .profile-save-btn {
    width: 100% !important;
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, var(--profile-orange), var(--profile-orange-dark)) !important;
    border: 0 !important;
    border-radius: 15px !important;
    box-shadow: 0 16px 30px rgba(255, 149, 0, 0.24) !important;
    font-family: var(--rango-title-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

@media (max-width: 370px) {
    html body.app-profile-page .profile-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    html body.app-profile-page .profile-field-grid {
        grid-template-columns: minmax(0, 1fr) 82px !important;
    }
}
.home-empty-favorites {
  display: none;
  margin: 12px 0 92px;
  padding: 14px 16px;
  border: 1px solid #ffe0a8;
  border-radius: 8px;
  background: #fff8e8;
  color: #8a5a00;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.store-header-heart.active,
.store-favorite-button.active {
  color: #ff3b30 !important;
}

.home-favorite-button.active,
.home-favorite-button.active i,
.store-header-heart.active,
.store-header-heart.active i,
.store-favorite-button.active,
.store-favorite-button.active i {
  color: #ff3b30 !important;
}

.home-favorite-button:not(.active),
.home-favorite-button:not(.active) i,
.store-header-heart:not(.active),
.store-header-heart:not(.active) i,
.store-favorite-button:not(.active),
.store-favorite-button:not(.active) i {
  color: #a3a3a3 !important;
}

.swal2-popup {
  border-radius: 10px !important;
  padding: 22px 20px 20px !important;
  color: #1f2937 !important;
  font-family: "Rango UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22) !important;
}

.swal2-title {
  color: #111827 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.swal2-html-container {
  color: #4b5563 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.swal2-actions {
  gap: 10px !important;
}

.swal2-confirm,
.swal2-deny,
.swal2-cancel {
  min-height: 42px !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.swal2-confirm {
  background: #ff9500 !important;
}

.swal2-cancel {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.modal-content {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18) !important;
}

.modal-header,
.modal-footer {
  border-color: #eef0f3 !important;
}

.modal-title {
  color: #111827 !important;
  font-weight: 700 !important;
}

body.app-store-page .swal2-popup.rango-store-closed-popup {
  width: min(286px, calc(100vw - 56px)) !important;
  padding: 18px 19px 14px !important;
  border-radius: 24px !important;
  color: #111827 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.20) !important;
}

body.app-store-page .rango-store-closed-title {
  width: 100% !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

body.app-store-page .rango-store-closed-html {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  text-align: left !important;
}

body.app-store-page .rango-store-closed-message {
  width: 100% !important;
}

body.app-store-page .rango-store-closed-confirm {
  width: 100% !important;
  min-height: 33px !important;
  margin: 14px 0 0 !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  color: #111827 !important;
  background: #d8d8d8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

body.app-store-page .swal2-popup.rango-store-closed-popup .swal2-actions {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.app-store-page .store-hero-card {
  display: block !important;
  background: #f2f2f2 !important;
}

html body.app-store-page #banner {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body.app-store-page .store-profile-logo {
  position: absolute !important;
  top: -36px !important;
  left: 50% !important;
  width: 72px !important;
  height: 72px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 4px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 3px solid #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.16) !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

html body.app-cart-page #card_totais {
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 8px auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.app-cart-page #totais_container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

html body.app-cart-page #tela_total > .row.justify-content-between {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body.app-cart-page #tela_total_itens,
html body.app-cart-page #tela_total_taxa {
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 15px !important;
  text-align: left !important;
  border: 1px solid var(--rango-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

html body.app-cart-page #lbl_total_lbl,
html body.app-cart-page #lbl_taxa_lbl {
  display: block !important;
  max-width: 100% !important;
  color: #101423 !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}

html body.app-cart-page #lbl_valor,
html body.app-cart-page #lbl_taxa {
  display: block !important;
  max-width: 100% !important;
  color: #079345 !important;
  font-size: 19px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body.app-cart-page #tela_total > .row:not(.justify-content-between) {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 96px !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
}

html body.app-cart-page #tela_total > .row:not(.justify-content-between) > .col-9,
html body.app-cart-page #tela_total > .row:not(.justify-content-between) > .col-3 {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: none !important;
}

html body.app-cart-page #cupon_box,
html body.app-cart-page #cupon_btn {
  width: 100% !important;
}

html body.app-cart-page #id_da_tela {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 !important;
}

html body.app-cart-page #lbl_valor_fim,
html body.app-cart-page #valor_fim {
  min-width: 0 !important;
  font-size: 18px !important;
  white-space: nowrap !important;
}

html body.app-cart-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

html body.app-cart-page #loading-page-bb {
  width: 100% !important;
  max-width: min(430px, 100vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}

html body.app-cart-page #cabecalho {
  max-width: min(430px, 100vw) !important;
}

html body.app-cart-page #cupon_btn {
  min-width: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 14px !important;
}

/* Detalhe do produto: tipografia mais leve e seletores redondos. */
html body.app-product-detail-page {
  --product-title: #252837;
  --product-text: #747887;
  --product-line: #edf0f5;
  --product-soft: #f8f9fb;
}

html body.app-product-detail-page #detalhes {
  color: #ffffff !important;
  font-family: var(--rango-title-font) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}

html body.app-product-detail-page .product-detail-summary {
  gap: 13px !important;
  padding: 18px 22px 19px !important;
}

html body.app-product-detail-page .product-detail-summary #nome_produto {
  color: var(--product-title) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
}

html body.app-product-detail-page .product-detail-summary #descricao_produto {
  color: var(--product-text) !important;
  font-family: var(--rango-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
}

html body.app-product-detail-page .product-detail-summary #lbl_total {
  color: #f08a00 !important;
  font-family: var(--rango-title-font) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

html body.app-product-detail-page #lbl_quantidade {
  color: var(--product-title) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

html body.app-product-detail-page #obs_box {
  color: var(--product-title) !important;
  font-family: var(--rango-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body.app-product-detail-page #obs_box::placeholder {
  color: #9498a4 !important;
  font-weight: 400 !important;
}

html body.app-product-detail-page .product-option-section {
  padding: 18px 22px 9px !important;
}

html body.app-product-detail-page .product-option-heading {
  margin-bottom: 11px !important;
}

html body.app-product-detail-page .product-option-title {
  color: var(--product-title) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.14 !important;
}

html body.app-product-detail-page .product-option-heading small {
  color: var(--product-text) !important;
  font-family: var(--rango-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html body.app-product-detail-page .product-option-badge {
  color: #5f6470 !important;
  background: #f2f3f5 !important;
  font-family: var(--rango-title-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html body.app-product-detail-page .form-check {
  min-height: 50px !important;
  gap: 12px !important;
  padding: 11px 13px !important;
  border-color: var(--product-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(16, 20, 35, 0.035) !important;
}

html body.app-product-detail-page .form-check:has(.form-check-input:checked) {
  background: #fffaf3 !important;
  border-color: rgba(255, 149, 0, 0.36) !important;
}

html body.app-product-detail-page .form-check-input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1.7px solid #c5cad3 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

html body.app-product-detail-page .form-check-input[type="checkbox"]:checked {
  background: radial-gradient(circle, #ff9500 0 42%, #ffffff 45% 100%) !important;
  border-color: #ff9500 !important;
}

html body.app-product-detail-page .form-check-input[type="checkbox"]:focus {
  border-color: #ff9500 !important;
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.13) !important;
}

html body.app-product-detail-page .form-check-label {
  color: var(--product-title) !important;
  font-family: var(--rango-font) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
}

html body.app-product-detail-page .option-name {
  color: var(--product-title) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

html body.app-product-detail-page .option-price {
  color: #303342 !important;
  font-family: var(--rango-title-font) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
}

html body.app-product-detail-page #lbl_desc {
  color: var(--product-text) !important;
  font-family: var(--rango-font) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

html body.app-product-detail-page #lbl_valor_btn,
html body.app-product-detail-page #add_lbl {
  font-family: var(--rango-title-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Lista de produtos e checkout: mesmo peso visual do detalhe do produto. */
html body.app-products-page,
html body.app-cart-page {
  --screen-title: #252837;
  --screen-text: #747887;
  --screen-muted: #8c91a0;
  --screen-green: #078b44;
  --screen-line: #edf0f5;
}

html body.app-products-page #nome_categoria,
html body.app-cart-page #lbl_carrinho {
  font-family: var(--rango-title-font) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}

html body.app-products-page #pesquisa,
html body.app-products-page #pesquisa::placeholder {
  font-family: var(--rango-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body.app-products-page #pesquisa::placeholder {
  color: #9498a4 !important;
}

html body.app-products-page .produtos,
html body.app-cart-page .produtos {
  border-color: var(--screen-line) !important;
}

html body.app-products-page .titulo_produtos,
html body.app-cart-page .titulo_produtos {
  color: var(--screen-title) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
}

html body.app-products-page .subtitulo_produtos,
html body.app-cart-page .subtitulo_produtos {
  color: var(--screen-text) !important;
  font-family: var(--rango-font) !important;
  font-size: 13.2px !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
}

html body.app-products-page .texto_adicional_produtos,
html body.app-products-page .texto_adicional_produtos span {
  color: var(--screen-green) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
}

html body.app-cart-page .checkout-section-title {
  color: var(--screen-title) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.14 !important;
}

html body.app-cart-page .checkout-item-price {
  color: var(--screen-green) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

html body.app-cart-page .texto_adicional_produtos,
html body.app-cart-page .texto_adicional_produtos span {
  font-family: var(--rango-title-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
}

html body.app-cart-page #lbl_total_lbl,
html body.app-cart-page #lbl_taxa_lbl,
html body.app-cart-page #lbl_cupon_lbl,
html body.app-cart-page #lbl_forma_entrega,
html body.app-cart-page #lbl_f_pagamento_lbl {
  color: var(--screen-title) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
}

html body.app-cart-page #lbl_total_lbl,
html body.app-cart-page #lbl_taxa_lbl {
  font-size: 13.5px !important;
}

html body.app-cart-page #lbl_valor,
html body.app-cart-page #lbl_taxa {
  color: var(--screen-green) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
}

html body.app-cart-page #lbl_valor_fim,
html body.app-cart-page #valor_fim {
  color: var(--screen-green) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
}

html body.app-cart-page #cupon_box,
html body.app-cart-page #f_entrega,
html body.app-cart-page #forma_pagamento {
  color: var(--screen-title) !important;
  font-family: var(--rango-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body.app-cart-page #cupon_box::placeholder {
  color: #9498a4 !important;
  font-weight: 400 !important;
}

html body.app-cart-page #cupon_btn,
html body.app-cart-page #continuar_lbl {
  font-family: var(--rango-title-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}

/* Pedidos: historico limpo, com itens em linhas organizadas. */
html body.app-orders-page {
  --orders-ink: #252837;
  --orders-muted: #747887;
  --orders-soft: #f8f9fb;
  --orders-line: #edf0f5;
  --orders-green: #078b44;
  font-family: var(--rango-font) !important;
  color: var(--orders-ink) !important;
}

html body.app-orders-page #pedidos_lbl {
  font-family: var(--rango-title-font) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}

html body.app-orders-page .orders-container {
  padding: 14px 18px 92px !important;
}

html body.app-orders-page .order-card {
  margin-bottom: 13px !important;
  border-color: var(--orders-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(16, 20, 35, 0.045) !important;
}

html body.app-orders-page .order-card-header {
  align-items: flex-start !important;
  padding: 14px 15px 12px !important;
}

html body.app-orders-page .order-kicker {
  color: var(--orders-muted) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 12.8px !important;
  font-weight: 500 !important;
}

html body.app-orders-page .order-title {
  color: var(--orders-ink) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

html body.app-orders-page .order-status {
  max-width: 172px !important;
  padding: 7px 10px !important;
  color: var(--orders-green) !important;
  background: #eafbf1 !important;
  font-family: var(--rango-title-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}

html body.app-orders-page .order-block {
  padding: 13px 15px 12px !important;
}

html body.app-orders-page .order-label {
  margin-bottom: 9px !important;
  color: var(--orders-ink) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
}

html body.app-orders-page .order-items {
  display: grid !important;
  gap: 0 !important;
}

html body.app-orders-page .order-items,
html body.app-orders-page .order-items * {
  color: var(--orders-ink) !important;
  font-family: var(--rango-font) !important;
  font-size: 13.4px !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
}

html body.app-orders-page .order-item-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  align-items: start !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #f2f4f7 !important;
}

html body.app-orders-page .order-item-row:last-child {
  border-bottom: 0 !important;
}

html body.app-orders-page .order-item-qty {
  color: var(--orders-muted) !important;
  font-family: var(--rango-title-font) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

html body.app-orders-page .order-item-name {
  min-width: 0 !important;
  color: var(--orders-ink) !important;
  overflow-wrap: anywhere !important;
}

html body.app-orders-page .order-item-price {
  color: var(--orders-green) !important;
  font-family: var(--rango-title-font) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

html body.app-orders-page .order-item-additional .order-item-name,
html body.app-orders-page .order-item-empty {
  color: var(--orders-muted) !important;
}

html body.app-orders-page .order-values {
  padding: 0 15px 13px !important;
}

html body.app-orders-page .order-values div {
  background: var(--orders-soft) !important;
  border-color: var(--orders-line) !important;
  box-shadow: none !important;
}

html body.app-orders-page .order-values span,
html body.app-orders-page .order-footer span {
  color: var(--orders-muted) !important;
  font-family: var(--rango-title-font) !important;
  font-weight: 500 !important;
}

html body.app-orders-page .order-values strong {
  color: var(--orders-green) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

html body.app-orders-page .order-footer {
  padding: 12px 15px 14px !important;
}

html body.app-orders-page .order-footer strong {
  color: var(--orders-ink) !important;
  font-family: var(--rango-title-font) !important;
  font-size: 13.4px !important;
  font-weight: 500 !important;
}

html body.app-orders-page .order-actions {
  padding: 0 15px 15px !important;
}

html body.app-orders-page .order-cancel-btn {
  width: 100% !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid #ffd2d2 !important;
  border-radius: 10px !important;
  background: #fff6f6 !important;
  color: #b42318 !important;
  font-family: var(--rango-title-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

html body.app-orders-page .order-cancel-btn i {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Produtos: a descricao fica somente na tela de detalhe, em cor neutra. */
html body.app-products-page .subtitulo_produtos {
  display: none !important;
}

html body.app-product-detail-page .product-detail-summary #descricao_produto {
  color: var(--product-text, #747887) !important;
}

.rango-required-popup {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
}

.rango-required-popup p {
  margin: 0 0 10px;
  text-align: center;
}

.rango-required-popup ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rango-required-popup li {
  border-top: 1px solid rgba(17, 24, 39, .08);
  color: #2f3542;
  padding: 8px 0;
  text-align: center;
}

.rango-required-alert .swal2-icon {
  display: none !important;
}

/* Escala tipografica compacta para o app do cliente. */
html body.app-home-page,
html body.app-access-page,
html body.app-splash-page,
html body.app-store-page,
html body.app-internal-page {
  --rango-size-caption: 12px;
  --rango-size-small: 14px;
  --rango-size-body: 16px;
  --rango-size-section: 17px;
  --rango-size-page: 20px;
  font-size: var(--rango-size-small) !important;
  line-height: 1.4;
}

html body.app-home-page :where(h1, h2, h3, h4, h5, h6, button),
html body.app-access-page :where(h1, h2, h3, h4, h5, h6, button),
html body.app-splash-page :where(h1, h2, h3, h4, h5, h6, button),
html body.app-store-page :where(h1, h2, h3, h4, h5, h6, button),
html body.app-internal-page :where(h1, h2, h3, h4, h5, h6, button) {
  font-family: var(--rango-font) !important;
  letter-spacing: 0 !important;
}

html body.app-home-page :is(.home-section-title h2, .home-discovery-heading h2) {
  font-size: var(--rango-size-section) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

html body.app-home-page .home-store-card.lista_lojas .titulo_lista_lojas {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html body.app-home-page .home-famous-card span:last-child {
  font-size: var(--rango-size-caption) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html body.app-home-page .home-coupon-store-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html body.app-home-page .home-coupon-store-meta {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

html body.app-home-page .home-coupon-store-badge {
  font-size: 10px !important;
  font-weight: 500 !important;
}

html body.app-store-page :is(#nome_loja, .store-name) {
  font-size: var(--rango-size-page) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html body.app-store-page :is(.store-section-title, .categoria_titulo, .titulo_categorias),
html body.app-cart-page .checkout-section-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

html body.app-products-page #nome_categoria,
html body.app-cart-page #lbl_carrinho {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html body.app-products-page .titulo_produtos,
html body.app-cart-page .titulo_produtos {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

html body.app-orders-page .order-title {
  font-size: var(--rango-size-body) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Mantem a mesma fonte nos componentes antigos que definem a familia diretamente. */
html body.app-home-page #loading-page-bb :where(*):not(.bi):not(.material-icons):not(.material-symbols-outlined):not(.fa):not([class^="fa-"]):not([class*=" fa-"]),
html body.app-access-page #loading-page-bb :where(*):not(.bi):not(.material-icons):not(.material-symbols-outlined):not(.fa):not([class^="fa-"]):not([class*=" fa-"]),
html body.app-splash-page #loading-page-bb :where(*):not(.bi):not(.material-icons):not(.material-symbols-outlined):not(.fa):not([class^="fa-"]):not([class*=" fa-"]),
html body.app-store-page #loading-page-bb :where(*):not(.bi):not(.material-icons):not(.material-symbols-outlined):not(.fa):not([class^="fa-"]):not([class*=" fa-"]),
html body.app-internal-page #loading-page-bb :where(*):not(.bi):not(.material-icons):not(.material-symbols-outlined):not(.fa):not([class^="fa-"]):not([class*=" fa-"]) {
  font-family: var(--rango-font) !important;
}

/* Proporcoes da vitrine mobile: texto legivel e cards no tamanho de app. */
@media (max-width: 767px) {
  html body.app-home-page .home-address-button strong {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  html body.app-home-page .home-search #pesquisa {
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  html body.app-home-page .home-discovery-section {
    margin-bottom: 28px !important;
  }

  html body.app-home-page .home-discovery-heading {
    margin-bottom: 14px !important;
  }

  html body.app-home-page .home-famous-card {
    flex-basis: 84px !important;
  }

  html body.app-home-page .home-famous-avatar {
    width: 68px !important;
    height: 68px !important;
  }

  html body.app-home-page .home-coupon-store {
    flex-basis: 154px !important;
    gap: 6px !important;
  }

  html body.app-home-page .home-coupon-store-media {
    height: 150px !important;
    border-radius: 16px !important;
  }

  html body.app-home-page .home-coupon-store-identity {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 30px !important;
  }

  html body.app-home-page .home-coupon-store-logo {
    width: 30px !important;
    height: 30px !important;
  }

  html body.app-home-page .home-coupon-store-name {
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  html body.app-home-page .home-coupon-store-meta {
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  html body.app-home-page .home-coupon-store-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 7px !important;
  }

  html body.app-home-page .home-category {
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  html body.app-home-page .home-bottom-nav button {
    font-size: 11px !important;
    font-weight: 600 !important;
  }
}

/* Faixa promocional compacta: tres cards, com arraste em telas estreitas. */
html body.app-home-page .home-promo-carousel {
  width: min(100%, 580px);
  margin: 24px 0 26px;
}

html body.app-home-page .home-promo-track {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 3px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html body.app-home-page .home-promo-track::-webkit-scrollbar { display: none; }

html body.app-home-page .home-promo-card {
  position: relative;
  flex: 0 0 max(112px, calc((100% - 18px) / 3));
  min-width: 0;
  aspect-ratio: .78;
  overflow: hidden;
  padding: 14px 10px;
  border: 0;
  border-radius: 20px;
  color: #fff;
  text-align: left;
  isolation: isolate;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}

html body.app-home-page .home-promo-card::before {
  position: absolute;
  z-index: 0;
  inset: -25% -55% auto auto;
  width: 125%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  content: "";
}

html body.app-home-page .home-promo-food { background: linear-gradient(145deg, #ff6846, #f2253f); }
html body.app-home-page .home-promo-famous { background: linear-gradient(150deg, #ed1735, #ad0733); }
html body.app-home-page .home-promo-coupon { background: linear-gradient(155deg, #fc315b, #ed0033); }

html body.app-home-page .home-promo-copy {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 10px;
  left: 10px;
  display: block;
  font-family: var(--rango-font) !important;
  font-size: clamp(12px, 3.4vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
}

html body.app-home-page .home-promo-copy strong {
  display: block;
  margin-top: 3px;
  font-family: var(--rango-font) !important;
  font-size: clamp(15px, 4.2vw, 20px) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

html body.app-home-page .home-promo-card img {
  position: absolute;
  bottom: 5%;
  left: -20%;
  width: 140%;
  height: 56%;
  object-fit: contain;
  pointer-events: none;
}

html body.app-home-page .home-promo-famous img { left: -23%; width: 150%; }
html body.app-home-page .home-promo-coupon img { left: -22%; width: 145%; }

html body.app-home-page .home-promo-card:focus-visible {
  outline: 3px solid #172044;
  outline-offset: 3px;
}

html body.app-home-page.home-promo-visible .home-coupon-trigger {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 360px) {
  html body.app-home-page .home-promo-track { gap: 7px; }
  html body.app-home-page .home-promo-card { padding: 12px 8px; border-radius: 16px; }
  html body.app-home-page .home-promo-copy { top: 12px; right: 8px; left: 8px; }
}