/* Main Styles relying on Theme Variables */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: var(--font-family, 'Inter', sans-serif);
    background-color: var(--bg-color, #fff);
    color: var(--text-color, #333);
    line-height: 1.6;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.container-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Desktop: preencher sempre da esquerda para a direita (última linha não centraliza) */
@media (min-width: 769px) {
    .container-cards {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .container-cards {
        /*
         * Mobile: garante 25px na vertical mesmo em browsers
         * com suporte inconsistente a flex-gap.
         */
        padding-left: 3px;
        padding-right: 3px;
        box-sizing: border-box;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0 25px;
        margin-top: 0;
    }

    .container-cards > .product-card-v2 {
        margin: 0 0 clamp(50px, 7vw, 70px) 0;
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
    }

    .container-cards > .product-card-v2:last-child {
        margin-bottom: 0;
    }
}

/* Evita centralização por margin:auto do card base dentro do flex-wrap */
.container-cards > .product-card-v2 {
    margin: 0;
}

/* Fallback para browsers mobile sem suporte a flex gap */
@supports not (gap: 1px) {
    .container-cards {
        margin-left: -12.5px;
        margin-top: -12.5px;
    }

    .container-cards > .product-card-v2 {
        margin-left: 12.5px;
        margin-top: 12.5px;
    }
}


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Header / Hero */
/* Header / Hero */
.hero-banner {
    width: 100%;
    height: 180px;
    /* Reduced height */
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 30px;
    /* Rounded corners */
    border-bottom-right-radius: 30px;
    background: none !important;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Login / cadastro: ícone de usuário no canto superior esquerdo do banner */
.header-user-fab {
    position: absolute;
    top: 12px;
    left: max(12px, env(safe-area-inset-left, 0px));
    z-index: 25;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s, filter 0.2s;
}

.header-user-fab:hover {
    transform: scale(1.06);
    filter: brightness(1.03);
}

.header-user-fab:active {
    transform: scale(0.98);
}

.header-user-fab__icon {
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-user-fab__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    line-height: 1;
    box-sizing: border-box;
}

@keyframes header-user-fab-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

.header-user-fab--alert {
    animation: header-user-fab-pulse 1.4s ease-out infinite;
}

/* Mesmo pulso vermelho do login (visitante) quando há avisos não lidos */
.site-hero-bell-btn.site-hero-bell-btn--alert {
    animation: header-user-fab-pulse 1.4s ease-out infinite;
}

.header-user-fab--toolbar {
    position: relative;
    top: auto;
    left: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ========== Cabeçalho hero unificado (referência layoutnovo) ========== */
.site-hero-v2 {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 0;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}

/* Evita cortar o dropdown do sino (filho absoluto) sobre a faixa do WhatsApp / conteúdo abaixo.
   z-index alto: .site-hero-v2__inner tem z-index:4 — sem elevar o hero, o #floating-catalog-toolbar
   (1988 com busca) não deve cobrir o painel de notificações quando o hero está elevado. */
.site-hero-v2.site-hero-v2--notif-dd-open,
.site-hero-v2.site-hero-v2--profile-dd-open {
    overflow: visible;
    z-index: 12500;
}

.site-hero-v2__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.site-hero-v2__bg img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

.site-hero-v2__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(45, 28, 14, 0.5) 0%, rgba(30, 18, 10, 0.78) 45%, rgba(18, 10, 6, 0.92) 100%),
        repeating-linear-gradient(-14deg, transparent 0 8px, rgba(255, 255, 255, 0.025) 8px 16px);
    pointer-events: none;
}

.site-hero-v2__inner {
    position: relative;
    z-index: 4;
    padding: 10px 12px 20px;
    max-width: 840px;
    margin: 0 auto;
}

/* Endereço de entrega no topo (referência layoutnovo) */
.site-hero-v2__addr-zen {
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: calc(100% - 120px);
    margin: 0 auto 4px;
    padding: 6px 6px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition:
        opacity 0.15s ease,
        filter 0.15s ease,
        transform 0.15s ease;
}

.site-hero-v2__addr-zen:hover {
    opacity: 0.94;
    filter: brightness(1.06);
    transform: scale(1.04);
}

.site-hero-v2__addr-zen:focus {
    outline: none;
}

.site-hero-v2__addr-zen:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    border-radius: 10px;
}

.site-hero-v2__addr-label {
    display: block;
    margin: 10px 0 0;
    font-size: 7px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.35);
}

.site-hero-v2__addr-mid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    gap: 4px;
    max-width: 100%;
}

.site-hero-v2__addr-pin-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.site-hero-v2__addr-pin {
    font-size: 16px;
    line-height: 1;
    background: linear-gradient(180deg, #fca5a5 0%, #ef4444 55%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .site-hero-v2__addr-pin {
        color: #ef4444;
        background: none;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
    }
}

.site-hero-v2__addr-line {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.site-hero-v2__addr-text {
    max-width: 150px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}

/* CTA convidado: frase fixa sem reticências (PHP/JS removem limite de 21 chars; aqui sem ellipsis CSS). */
.site-hero-v2__addr-text.site-hero-v2__addr-text--no-clip {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.site-hero-v2__addr-chev {
    flex: 0 0 auto;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
    line-height: 1;
}

.site-hero-v2__topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    text-align: left;
    transform: translateY(-37px);
}

/* Quando o dropdown de notificações abre, o topbar precisa ficar acima
   dos CTAs do hero (ex.: WhatsApp no header). O `transform` cria stacking context,
   então elevamos o próprio topbar. */
.site-hero-v2.site-hero-v2--notif-dd-open .site-hero-v2__topbar,
.site-hero-v2.site-hero-v2--profile-dd-open .site-hero-v2__topbar {
    position: relative;
    z-index: 12030;
}

.site-hero-v2.site-hero-v2--notif-dd-open .site-hero-v2__cta-row {
    position: relative;
    z-index: 1;
}

.site-hero-v2__topbar-left,
.site-hero-v2__topbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
}

.site-hero-icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
    font-size: 1.1rem;
    padding: 0;
    transition: transform 0.2s, filter 0.2s;
}

.site-hero-icon-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.03);
}

.site-hero-bell-btn .site-hero-bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    line-height: 1;
}
/* display:flex acima não pode vencer [hidden] (sem número = sem badge visível) */
.site-hero-bell-btn .site-hero-bell-badge[hidden] {
    display: none !important;
}

/* Dropdown do sino (notificações) — index */
.hm-notif-backdrop {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#cart-modal:not(.hm-cart-open) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/*
 * Drawer aberto: acima do hero com dropdown (12500), abaixo do mapa final (13000) e auth (13600).
 */
#cart-modal.hm-cart-open {
    z-index: 12800 !important;
}

/* Flatpickr (agendamento checkout): acima do drawer, véu entrega grátis (~12952) e modais de produto */
.flatpickr-calendar.open {
    z-index: 12900 !important;
}

body.hm-cart-drawer-active .flatpickr-calendar.open,
body.hm-checkout-open .flatpickr-calendar.open {
    z-index: 13700 !important;
    pointer-events: auto !important;
}

body.hm-cart-drawer-active .flatpickr-calendar,
body.hm-cart-drawer-active .flatpickr-calendar *,
body.hm-checkout-open .flatpickr-calendar,
body.hm-checkout-open .flatpickr-calendar * {
    pointer-events: auto !important;
}

/* Drawer aberto: site abaixo não recebe cliques/seleção (exceto modais de produto/zoom/calendário) */
body.hm-cart-drawer-active > *:not(#cart-modal):not(#hm-checkout-final-map-modal):not(#auth-modal):not(#product-modal):not(#image-zoom-modal):not(.flatpickr-calendar),
body.hm-checkout-open > *:not(#cart-modal):not(#hm-checkout-final-map-modal):not(#auth-modal):not(#product-modal):not(#image-zoom-modal):not(.flatpickr-calendar) {
    pointer-events: none !important;
}

#cart-modal.hm-cart-open:has(~ #product-modal.open),
#cart-modal.hm-cart-open:has(~ #image-zoom-modal.open),
body.hm-product-modal-over-cart #cart-modal.hm-cart-open {
    pointer-events: none !important;
}

body.hm-cart-drawer-active #product-modal.open,
body.hm-checkout-open #product-modal.open,
#cart-modal.hm-cart-open ~ #product-modal.open,
#product-modal.open.hm-over-cart-drawer {
    pointer-events: auto !important;
}

#product-modal.open.hm-over-cart-drawer .modal-card,
#cart-modal.hm-cart-open ~ #product-modal.open .modal-card {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}

#product-modal.open.hm-over-cart-drawer .modal-card button,
#product-modal.open.hm-over-cart-drawer .modal-card input,
#product-modal.open.hm-over-cart-drawer .modal-card textarea,
#product-modal.open.hm-over-cart-drawer .modal-card .addon-option,
#product-modal.open.hm-over-cart-drawer .modal-card .modal-close,
#cart-modal.hm-cart-open ~ #product-modal.open .modal-card button,
#cart-modal.hm-cart-open ~ #product-modal.open .modal-card input,
#cart-modal.hm-cart-open ~ #product-modal.open .modal-card textarea,
#cart-modal.hm-cart-open ~ #product-modal.open .modal-card .addon-option,
#cart-modal.hm-cart-open ~ #product-modal.open .modal-card .modal-close {
    pointer-events: auto !important;
}

body.hm-cart-drawer-active #image-zoom-modal.open,
body.hm-checkout-open #image-zoom-modal.open,
#cart-modal.hm-cart-open ~ #image-zoom-modal.open,
#image-zoom-modal.open.hm-over-cart-drawer {
    z-index: 13600 !important;
    pointer-events: auto !important;
}

#image-zoom-modal.open.hm-over-cart-drawer .image-zoom-modal__box,
#image-zoom-modal.open.hm-over-cart-drawer .image-zoom-modal__close,
#cart-modal.hm-cart-open ~ #image-zoom-modal.open .image-zoom-modal__box,
#cart-modal.hm-cart-open ~ #image-zoom-modal.open .image-zoom-modal__close {
    pointer-events: auto !important;
}

body.hm-image-zoom-over-cart #product-modal.open,
body.hm-image-zoom-over-cart #product-modal.open .modal-card,
body.hm-image-zoom-over-cart #product-modal.open .modal-card * {
    pointer-events: none !important;
}

body.hm-cart-drawer-active #auth-modal.modal-overlay:not(.open),
body.hm-checkout-open #auth-modal.modal-overlay:not(.open) {
    pointer-events: none !important;
}

body.hm-cart-drawer-active #site-hero-v2.site-hero-v2--notif-dd-open,
body.hm-cart-drawer-active #site-hero-v2.site-hero-v2--profile-dd-open {
    z-index: 1 !important;
    pointer-events: none !important;
}

body.hm-cart-drawer-active #site-hero-v2 .hm-notif-bell-wrap.hm-notif-bell-wrap--open,
body.hm-cart-drawer-active #site-hero-v2 .hm-notif-dropdown {
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Checkout drawer: garantir cliques em todo o wizard e filhos */
#cart-modal.hm-cart-open .cart-sidebar,
#cart-modal.hm-cart-open #cart-view,
#cart-modal.hm-cart-open #checkout-view,
#cart-modal.hm-cart-open #checkout-view .cart-body,
#cart-modal.hm-cart-open #checkout-view .hm-checkout-timeline,
#cart-modal.hm-cart-open #checkout-view .hm-checkout-wizard,
#cart-modal.hm-cart-open #checkout-form,
#cart-modal.hm-cart-open #checkout-footer {
    pointer-events: auto;
}

#hm-coupon-modal:not(.is-open),
#hm-checkout-final-map-modal:not(.is-open) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Checkout aberto: barra inferior não pode cobrir botões/totais do wizard */
body.hm-suppress-bottom-app-nav #bottom-app-nav,
body.hm-suppress-bottom-app-nav #submenu-root {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

@media (max-width: 768px) {
    #cart-modal.hm-cart-open:has(#checkout-view:not([style*="display: none"])) {
        bottom: 0 !important;
    }
}

/* Submenus portados: não bloqueiam o cardápio até abrir de verdade */
#submenu-root {
    pointer-events: none;
}
#submenu-root > .bottom-app-nav__submenu.is-open,
#submenu-root > .bottom-app-nav__dd-panel.is-open {
    pointer-events: auto;
}
#submenu-root > .bottom-app-nav__submenu:not(.is-open),
#submenu-root > .bottom-app-nav__dd-panel:not(.is-open) {
    pointer-events: none !important;
}

/* Login fechado: overlay não pode capturar cliques (comum após sessão logada) */
#auth-modal.modal-overlay:not(.open):not(.auth-modal--change-pw):not(.auth-modal--recover) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Cliente logado: modais/endereço fechados não podem bloquear o cardápio (display:flex fantasma) */
body[data-hm-customer-logged="1"] #auth-modal.modal-overlay:not(.open):not(.auth-modal--change-pw):not(.auth-modal--recover),
body[data-hm-customer-logged="1"] #header-address-modal.modal-overlay:not(.open),
body[data-hm-customer-logged="1"] #hmAddressEditorModal.modal-overlay:not(.open) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#submenu-root > .bottom-app-nav__submenu:not(.is-open)[hidden],
#submenu-root > .bottom-app-nav__dd-panel:not(.is-open)[hidden] {
    display: none !important;
}

#submenu-root > .bottom-app-nav__submenu:not(.is-open),
#submenu-root > .bottom-app-nav__dd-panel:not(.is-open) {
    visibility: hidden !important;
}

body[data-hm-customer-logged="1"] #product-modal.open {
    z-index: 13100 !important;
}

/* Produto aberto com drawer visível: acima do carrinho (12800) e do véu entrega grátis (~12952) */
body.hm-cart-drawer-active #product-modal.open,
body.hm-checkout-open #product-modal.open,
#cart-modal.hm-cart-open ~ #product-modal.open,
#product-modal.open.hm-over-cart-drawer {
    z-index: 13200 !important;
}

#product-modal.open.hm-over-cart-drawer .modal-close,
#cart-modal.hm-cart-open ~ #product-modal.open .modal-close {
    z-index: 220 !important;
    pointer-events: auto !important;
}

body.hm-cart-drawer-active #image-zoom-modal.open,
body.hm-checkout-open #image-zoom-modal.open {
    z-index: 13600 !important;
}

.hm-notif-bell-wrap {
    position: relative;
}
.hm-notif-bell-wrap.hm-notif-bell-wrap--open {
    z-index: 12010;
}
.hm-notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(380px, calc(100vw - 20px));
    max-height: min(70vh, 420px);
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    z-index: 12020;
    overflow: hidden;
}
/* display:flex do painel não pode vencer o atributo hidden (alguns UAs / resets) */
.hm-notif-dropdown[hidden] {
    display: none !important;
}
.hm-notif-dropdown:not([hidden]) {
    display: flex;
    flex-direction: column;
}
.hm-notif-dropdown__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.88rem;
    color: #0f172a;
}
.hm-notif-dropdown__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.hm-notif-dropdown__close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.hm-notif-dropdown__close:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}
.hm-notif-dropdown__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}
.hm-notif-dropdown__empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 600;
}
.hm-notif-dd-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 4px;
}
.hm-notif-dd-row:last-child {
    margin-bottom: 0;
}
.hm-notif-dd-row .hm-notif-dd-item {
    flex: 1;
    min-width: 0;
}
.hm-notif-dd-mark {
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}
.hm-notif-dd-mark:hover:not(:disabled) {
    background: #cbd5e1;
    color: #0f172a;
}
.hm-notif-dd-mark:disabled {
    opacity: 0.55;
    cursor: default;
}
.hm-notif-dd-mark:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}
.hm-notif-dd-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.hm-notif-dd-item:hover {
    background: #f1f5f9;
}
.hm-notif-dd-item--unread {
    background: #f0f9ff;
    border-left: 3px solid #0ea5e9;
}
.hm-notif-dd-item__ico {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0369a1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.hm-notif-dd-item__txt {
    flex: 1;
    min-width: 0;
}
.hm-notif-dd-item__title {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
}
.hm-notif-dd-item__body {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.hm-notif-dropdown__all {
    flex-shrink: 0;
    display: block;
    text-align: center;
    padding: 12px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #0284c7;
    text-decoration: none;
    border-top: 1px solid #e2e8f0;
    background: #fafafa;
}
.hm-notif-dropdown__all:hover {
    background: #f0f9ff;
}

.site-hero-address-pill {
    flex: 1;
    min-width: 0;
    margin: 0 2px;
    padding: 6px 10px 6px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
}

.site-hero-address-pill:hover {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.4);
}

.site-hero-address-pill__pin {
    color: #ff1744;
    font-size: 1rem;
    flex-shrink: 0;
}

.site-hero-address-pill__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.site-hero-address-pill__label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

.site-hero-address-pill__line {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-hero-address-pill__caret {
    font-size: 0.65rem;
    opacity: 0.85;
    flex-shrink: 0;
}

.site-hero-v2__brand {
    margin-top: 4px;
    min-width: 0;
    width: 100%;
}

.site-hero-v2__logo-btn {
    border: none;
    padding: 0;
    margin: 0 auto 10px;
    display: block;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.site-hero-v2__logo-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.site-hero-v2__logo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    margin: 0;
    display: block;
    background: #fff;
    transition: transform 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .site-hero-v2__logo-btn:hover .site-hero-v2__logo {
        transform: scale(1.04);
        filter: brightness(1.03);
    }
}

/* Título / slogan: mesmas regras de reticências do layoutnovo (max 30ch / 52ch, uma linha) */
.site-hero-v2__title {
    font-size: clamp(1.05rem, 4vw, 1.45rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 auto 6px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    line-height: 1.2;
    text-align: center;
    max-width: 30ch;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-hero-v2__slogan {
    font-size: 0.88rem;
    font-style: italic;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 auto;
    max-width: 52ch;
    min-width: 0;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 640px) {
    .site-hero-v2__slogan {
        font-size: 1rem;
    }
}

.site-hero-v2__badges {
    margin-top: 12px;
    justify-content: center;
}

.site-hero-v2__badges .info-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.site-hero-v2__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.site-hero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: default;
    font-family: inherit;
}

.site-hero-v2__cta-row .site-hero-chip {
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 12px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 18px;
    padding-right: 18px;
}

.site-hero-v2__cta-row .site-hero-gear {
    width: 44px;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

.site-hero-chip--open {
    background: linear-gradient(180deg, #22c55e, #15803d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.45);
    transition: transform 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .site-hero-chip--open:hover {
        transform: scale(1.05);
        filter: brightness(1.03);
    }
}

.site-hero-chip--order {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    color: #fff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.4);
}

.site-hero-chip--closed {
    background: rgba(55, 65, 81, 0.95);
    color: #f9fafb;
}

.site-hero-chip--info {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    transition: transform 0.15s, filter 0.15s;
}

.site-hero-chip--info:hover {
    transform: translateY(-1px) scale(1.05);
    filter: brightness(1.06);
}

.site-hero-gear {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border-style: solid;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 68%, rgba(255, 255, 255, 0.3) 100%);
    color: #ffca28;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s;
}

.site-hero-addr-btn {
    color: #ff5252;
}

.site-hero-gear:hover {
    transform: scale(1.05);
}

/* Ícone do modo NOITE (lua): azul claro em gradiente */
.site-hero-gear #menu-theme-icon.fa-moon {
    background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 45%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
}

.site-hero-v2__actions {
    margin-top: 14px;
}

/* Logado: círculo branco sólido (não usar fundo transparente do .header-greeting-toggle genérico) */
.site-hero-v2__profile-dd .header-greeting-toggle.site-hero-icon-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #4b5563;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

.site-hero-v2__profile-dd .header-greeting-toggle.site-hero-icon-btn i.fa-user,
.site-hero-v2__profile-dd .header-greeting-toggle.site-hero-icon-btn i.fas.fa-user {
    font-size: calc(1em + 5px);
}

.site-hero-v2__profile-dd {
    position: relative;
}

@keyframes site-hero-profile-add-photo-hint-pulse {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
        filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
    }
    50% {
        transform: translateX(-50%) scale(1.07);
        filter: drop-shadow(0 3px 16px rgba(253, 224, 71, 0.65));
    }
}

.site-hero-profile-add-photo-hint {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.05;
    font-size: 10px;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
    z-index: 5;
    animation: site-hero-profile-add-photo-hint-pulse 2s ease-in-out infinite;
    transform-origin: center top;
}

@media (prefers-reduced-motion: reduce) {
    .site-hero-profile-add-photo-hint {
        animation: none;
    }
}

.site-hero-profile-add-photo-hint__top {
    color: #ffffff;
}

.site-hero-profile-add-photo-hint__bot {
    color: #fde047; /* amarelo canário */
    font-size: 12px;
}

.site-hero-v2__profile-dd .header-greeting-menu {
    left: 0;
    right: auto;
    min-width: 220px;
    z-index: 12040;
}

.header-greeting-menu__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.header-greeting-menu__close:hover {
    background: #f3f4f6;
    color: #111827;
}

.site-hero-v2__profile-dd .site-hero-menu-hi {
    padding-right: 32px;
}

.site-hero-v2__profile-dd.open .header-greeting-menu {
    display: block;
    pointer-events: auto;
}

body[data-hm-customer-logged="1"] .site-hero-v2__profile-dd .header-greeting-toggle,
body[data-hm-customer-logged="1"] .site-hero-v2__profile-dd .header-greeting-toggle img {
    pointer-events: auto !important;
}

.site-hero-menu-hi {
    padding: 8px 12px 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    border-bottom: 1px solid #f0f0f0;
}

.site-hero-v2 .daily-offer-container {
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 100%;
    pointer-events: none;
}

.site-hero-v2 .daily-offer-badge {
    pointer-events: auto;
}

@media (max-width: 520px) {
    .site-hero-v2__topbar {
        flex-wrap: nowrap;
    }

    .site-hero-address-pill__label {
        font-size: 0.52rem;
    }

    .site-hero-address-pill__line {
        font-size: 0.72rem;
    }
}

.restaurant-info-card {
    background: white;
    margin: -50px auto 0;
    width: 90%;
    max-width: 800px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.restaurant-logo-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.restaurant-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.restaurant-details h1 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.restaurant-details p {
    font-size: 0.85rem;
    color: #666;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

/* Status: Open (Green) */
.status-badge.status-open {
    background-color: #e8f5e9;
    color: #2e7d32;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(46, 125, 50, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
    }
}

.cashback-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 5px;
    box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: bounce-subtle 3s infinite ease-in-out;
}

.free-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 5px;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.serves-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #374151;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 5px;
    border: 1px solid #e5e7eb;
    cursor: help;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    text-align: center;
    min-height: 28px; /* mantém o conteúdo bem centralizado */
}

.serves-badge i {
    font-size: 0.85rem;
}

.serves-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.serves-icons i {
    font-size: 0.82rem;
}

.serves-icons .serves-group-pair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.serves-icons .serves-group-pair i {
    font-size: 0.88rem; /* grupo */
}

.serves-icons .serves-plus-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.08);
    border: 1px solid rgba(17, 24, 39, 0.12);
    color: rgba(17, 24, 39, 0.8);
    line-height: 1;
}

.serves-icons .serves-plus-pill i {
    font-size: 0.6rem;
}

/* Posicionamento do ícone abaixo da imagem */
.serves-under-image {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
    padding: 0 12px;
}

.serves-under-image--center {
    justify-content: center;
}

.serves-under-image--tight {
    margin-top: 6px;
    padding: 0;
}

.serves-under-image--right {
    justify-content: flex-end;
    padding: 0;
    margin-top: 4px;
}

/* (removido) overlay na imagem: agora fica fora, no rodapé */

/* Stack para centralizar ícone + botão "Ver/Adicionar" */
.product-action-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.product-action-stack--right {
    align-items: center;
}

.product-action-stack .serves-badge {
    margin-top: 0;
}

/* Balão (tooltip) do próprio sistema */
.serves-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.95); /* slate-900 */
    color: #fff;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 9999;
}

.serves-badge::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(17, 24, 39, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 9999;
}

.serves-badge:hover::after,
.serves-badge:hover::before,
.serves-badge.is-open::after,
.serves-badge.is-open::before {
    opacity: 1;
}

.serves-badge:hover::after,
.serves-badge.is-open::after {
    transform: translateX(-50%) translateY(-2px);
}

@keyframes bounce-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

@keyframes pulse-text {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Status: Closed (Red) */
.status-badge.status-closed {
    background-color: #ffcdd2 !important;
    color: #b71c1c !important;
    animation: pulse-red 2s infinite;
    border: 1px solid #ef5350;
}

/* Status: Aberto para Encomenda (Laranja) */
.status-badge.status-encomenda {
    background-color: #fff3e0 !important;
    color: #e65100 !important;
    border: 1px solid #ff9800;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(183, 28, 28, 0.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(183, 28, 28, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(183, 28, 28, 0);
    }
}

.badges-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.info-badge {
    background-color: #f5f5f5;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.info-badge i {
    margin-right: 4px;
}

.floating-whatsapp {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background-color: rgba(37, 211, 102, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2000;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Variante no cabeçalho: ao lado do botão de endereço (alinha via flex) */
.floating-whatsapp--header {
    position: static;
    right: auto;
    bottom: auto;
    top: auto;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 2px solid transparent; /* mantém tamanho externo; borda vira "anel" */
    background:
        linear-gradient(#25D366, #25D366) padding-box,
        conic-gradient(
            from var(--waRingRot, 0deg),
            #1db954,
            #25D366,
            #39ff14,
            #00e676,
            #00c853,
            #00ff7f,
            #25D366,
            #1db954
        ) border-box;
    animation: wa-ring-rot 3.2s linear infinite;
}

.floating-whatsapp--header i {
    font-size: calc(1em + 4px);
}

@property --waRingRot {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes wa-ring-rot {
    to { --waRingRot: 360deg; }
}

/* Desktop: ficar acima do bottom nav e alinhado ao centro dos botões */
@media (min-width: 769px) {
    .floating-whatsapp {
        bottom: calc(11px + env(safe-area-inset-bottom, 0px) - 2px + 8px);
        right: max(16px, calc((100vw - 1250px) / 2 + 30px));
        background-color: rgba(37, 211, 102, 0.9);
        border-radius: 50px;
        z-index: 1000; /* acima do #bottom-app-nav (920) */
    }

    .floating-whatsapp--header {
        display: inline-flex;
        width: 44px;
        height: 44px;
    }
}

.floating-whatsapp:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

@media (max-width: 768px) {
    /* Mobile: exibe no cabeçalho, ao lado do botão de endereço */
    .floating-whatsapp:not(.floating-whatsapp--header) {
        display: none;
    }

    .floating-whatsapp--header {
        display: inline-flex;
        width: 44px;
        height: 44px;
        border-radius: 15px;
        font-size: 1.35rem;
        opacity: 1;
    }
}

/* =========================================================
   Rodapé (sem Tailwind) — baseado no JSX fornecido
   Mantém IDs/onclick do sistema; ajusta apenas o visual.
   ========================================================= */
.bottom-app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Precisa ficar acima do `.rodape-container` (1990), mas abaixo do WhatsApp (2000) */
    z-index: 1995;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* Altura total do “shell” do rodapé */
.bottom-app-nav {
    height: 110px;
}

/* Background com curva central (SVG) */
.bottom-app-nav__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    filter: drop-shadow(0 -10px 24px rgba(0, 0, 0, 0.12));
    pointer-events: none;
}

@media (max-width: 768px) {
    /* Sombra preta no “fundo branco” abaixo dos 5 botões */
    .bottom-app-nav__bg {
        filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, 0.35));
    }
}

.bottom-app-nav__bg-side {
    flex: 1;
    height: 80px;
    background: #ffffff;
}

.bottom-app-nav__bg-side:first-child {
    margin-right: -1px;
    position: relative;
    top: 1px;
}

.bottom-app-nav__bg-side:last-child {
    margin-left: -1px;
    position: relative;
    top: 1px;
}

.bottom-app-nav__bg-notch {
    width: 110px;
    height: 100%;
    position: relative;
}

.bottom-app-nav__bg-notch-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Botões — inner em flex com 5 colunas (Menu, Fav, Carrinho, Pedidos, Carteira) */

.bottom-app-nav__btnwrap--fav > .bottom-app-nav__tile,
.bottom-app-nav__btnwrap--menu > .bottom-app-nav__tile {
    position: relative;
    left: auto;
    top: auto;
}

.bottom-app-nav__tile {
    width: 70px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.bottom-app-nav__icon {
    font-size: 16px;
    line-height: 1;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
}

.bottom-app-nav__icon i {
    display: block;
}

.bottom-app-nav__label {
    font-size: 9px;
    font-weight: 800;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    line-height: 1;
}

/* Badge de favoritos mantém posição no ícone */
.bottom-app-nav__tile-badge {
    border: 2px solid #f3f4f6;
}

/* Slot vazio: carrinho real no .rodape-container (footer.php), acima do fundo branco */
.bottom-app-nav__cart-slot--mount {
    visibility: hidden;
    pointer-events: none;
}

/* Carrinho FAB legado (se existir em cache) */
.bottom-app-nav__cart-fab #bottom-nav-cart-badge:not(.bottom-app-nav__fab-badge) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 2px;
    top: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ffffff;
    color: #e53935;
    font-size: 0.55rem;
    font-weight: 900;
    line-height: 1;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
    transform: none;
    left: auto;
    -webkit-text-fill-color: currentColor;
}

/* Mantém compatibilidade com o HTML atual (R$ + valor) */
.bottom-app-nav__cart-sum-curr,
.bottom-app-nav__cart-sum-amt {
    font: inherit;
    color: inherit;
}

/* Espaço para #bottom-app-nav + .rodape-container — páginas que usam includes/customer_footer_nav.php */
body.hm-customer-footer-nav {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}

/* Barra inferior — layout referência (branco, notch central, linhas vermelhas) */
.bottom-app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1995;
    background: transparent;
    padding: 0;
    box-shadow: none;
    overflow: visible;
}

/* =========================================================
   Rodapé 2 (novo) — 50px acima do atual
   ========================================================= */
.footer2-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 160px; /* 110px (rodapé atual) + 50px */
    height: 110px;
    z-index: 930;
    background: #ffffff;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    overflow: visible;
}

.footer2-shell {
    position: relative;
    width: 100%;
    height: 110px;
    display: flex;
    align-items: flex-end;
}

.footer2-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.footer2-bg-side {
    flex: 1;
    height: 80px;
    background: #ffffff;
}

.footer2-bg-notch {
    width: 110px;
    height: 100%;
    position: relative;
}

.footer2-notch-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.footer2-nav {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    padding: 0 12px calc(11px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.footer2-tile {
    width: 62px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    gap: 4px;
}

.footer2-ico {
    font-size: 16px;
    color: #6b7280;
    line-height: 1;
}

.footer2-label {
    font-size: 9px;
    font-weight: 800;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    line-height: 1;
}

.footer2-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -35px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.footer2-fab {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #dc2626;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer2-fab-ico {
    font-size: 24px;
    color: #ffffff;
    line-height: 1;
}

.footer2-total {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 900;
    color: #dc2626;
    line-height: 1;
}

/* Curvas visíveis (camadas como no JSX): container transparente, base só com o BG interno */
.footer2-fixed {
    background: transparent;
}

/* Submenus do footer2 */
.footer2-item {
    position: relative;
    display: flex;
    justify-content: center;
}

.footer2-item--center {
    width: 110px;
    justify-content: center;
}

.footer2-submenu {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(6px);
    min-width: min(220px, calc(100vw - 24px));
    padding: 8px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.3s;
    z-index: 999;
}

.footer2-item:hover > .footer2-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.footer2-submenu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(229, 231, 235, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%);
    color: #111827;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.footer2-submenu-item:hover {
    filter: brightness(0.99);
    transform: translateY(-1px);
}

.footer2-submenu-item i {
    color: #0066cc;
}

.footer2-submenu-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(229, 231, 235, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%);
    color: #111827;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    box-sizing: border-box;
}

.footer2-submenu-link span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.footer2-submenu-link i {
    color: #0066cc;
}

.footer2-submenu-total {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #2c3e50;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.footer2-submenu-total i {
    opacity: 0.9;
}

.footer2-submenu--center {
    min-width: 160px;
    text-align: center;
}

.footer2-submenu-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.footer2-submenu-center span {
    color: #111827;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.footer2-submenu-center strong {
    color: #f59e0b;
}

.bottom-app-nav__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: transparent;
    border-radius: 0;
    border-top: 0;
    box-shadow: none;
    pointer-events: none;
}

.bottom-app-nav__bg::before {
    content: none;
}

.bottom-app-nav__bg::after {
    content: none;
}

.bottom-app-nav__content {
    position: relative;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}

.bottom-app-nav__inner {
    position: absolute;
    top: 16px;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(2px, 1.2vw, 10px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    min-height: 92px;
    padding: 6px clamp(6px, 2.5vw, 20px) calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
}

.bottom-app-nav__btnwrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2;
}

.bottom-app-nav__btnwrap--cart {
    flex: 1.1 1 0;
    min-width: 72px;
    max-width: 110px;
    z-index: 5;
}

/* Tablet/Desktop: espaçamento horizontal fixo (30px) a partir do carrinho central */
@media (min-width: 769px) {
    .bottom-app-nav {
        --bottom-nav-gap: 30px;
        --bottom-nav-tile-w: 70px;
        --bottom-nav-cart-w: 76px; /* espelha `.rodape-container .cart-button` */
    }

    .bottom-app-nav__inner {
        position: relative;
    }

    .bottom-app-nav__btnwrap {
        flex: 0 0 auto;
    }

    /* Alinha os tiles ao redor do carrinho central (50%) com gap fixo */
    .bottom-app-nav__btnwrap--menu {
        position: absolute;
        left: calc(50% - (var(--bottom-nav-cart-w) / 2) - (var(--bottom-nav-gap) * 2) - (var(--bottom-nav-tile-w) * 2));
    }

    .bottom-app-nav__btnwrap--fav {
        position: absolute;
        left: calc(50% - (var(--bottom-nav-cart-w) / 2) - var(--bottom-nav-gap) - var(--bottom-nav-tile-w));
    }

    #bottom-nav-pedidos-wrap {
        position: absolute;
        left: calc(50% + (var(--bottom-nav-cart-w) / 2) + var(--bottom-nav-gap));
    }

    #bottom-nav-wallet-wrap {
        position: absolute;
        left: calc(50% + (var(--bottom-nav-cart-w) / 2) + (var(--bottom-nav-gap) * 2) + var(--bottom-nav-tile-w));
        align-items: center;
    }

    /* Só o slot do carrinho fica no fluxo flex; centraliza o notch como na home */
    #bottom-nav-cart-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        width: clamp(72px, 12vw, 110px);
        max-width: 110px;
    }
}

/* Celular na horizontal: mantém layout/posicionamento do Desktop */
@media (max-width: 768px) and (orientation: landscape) {
    .bottom-app-nav {
        --bottom-nav-gap: 30px;
        --bottom-nav-tile-w: 70px;
        --bottom-nav-cart-w: 76px;
    }

    .bottom-app-nav__inner {
        position: relative;
    }

    .bottom-app-nav__btnwrap {
        flex: 0 0 auto;
    }

    .bottom-app-nav__btnwrap--menu {
        position: absolute;
        left: calc(50% - (var(--bottom-nav-cart-w) / 2) - (var(--bottom-nav-gap) * 2) - (var(--bottom-nav-tile-w) * 2));
    }

    .bottom-app-nav__btnwrap--fav {
        position: absolute;
        left: calc(50% - (var(--bottom-nav-cart-w) / 2) - var(--bottom-nav-gap) - var(--bottom-nav-tile-w));
    }

    #bottom-nav-pedidos-wrap {
        position: absolute;
        left: calc(50% + (var(--bottom-nav-cart-w) / 2) + var(--bottom-nav-gap));
    }

    #bottom-nav-wallet-wrap {
        position: absolute;
        left: calc(50% + (var(--bottom-nav-cart-w) / 2) + (var(--bottom-nav-gap) * 2) + var(--bottom-nav-tile-w));
    }

    #bottom-nav-cart-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        width: clamp(72px, 12vw, 110px);
        max-width: 110px;
    }
}

.bottom-app-nav__btnwrap--cart {
    position: relative;
}

.bottom-app-nav__cart-slot {
    position: absolute;
    left: 50%;
    top: -32px;
    transform: translateX(-50%);
    width: 76px;
    height: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.bottom-app-nav__tile {
    width: 70px;
    max-width: 70px;
    height: 60px;
    min-height: 60px;
    margin-top: 0;
    transform: translateY(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 5px 8px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: none;
    color: rgba(107, 114, 128, 1);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.05;
    transition: filter 0.15s, transform 0.15s, background-color 0.15s;
}

.bottom-app-nav__tile:hover {
    background: #e8e8e8;
    filter: brightness(0.98);
    transform: translateY(4px) scale(1.06);
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.28);
}

.bottom-app-nav__tile:focus {
    outline: none;
}

.bottom-app-nav__tile:focus-visible {
    outline: 2px solid rgba(107, 114, 128, 0.45);
    outline-offset: 2px;
}

.bottom-app-nav__tile:active {
    transform: scale(0.97);
}

.bottom-app-nav__icon {
    font-size: 1.08rem;
    line-height: 1;
    color: rgba(107, 114, 128, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
}

.bottom-app-nav__icon i {
    display: block;
}

.bottom-app-nav__label {
    line-height: 1;
}

.bottom-app-nav__submenu {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(6px);
    min-width: min(220px, calc(100vw - 24px));
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;
    /* acima do rodapé extra */
    z-index: 1998;
}

.bottom-app-nav__submenu--menu {
    width: min(340px, calc(100vw - 24px));
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}

.bottom-app-nav__submenu--fav {
    width: min(360px, calc(100vw - 24px));
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    /* Abre acima do botão central (carrinho) */
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(110px + 12px + env(safe-area-inset-bottom, 0px) - 37px);
    transform: translateX(-50%) translateY(6px);
    /* acima do rodapé extra (.rodape-container 1990) e do botão do carrinho */
    z-index: 1999;
}

/* Garante que FAVORITOS sempre fique acima da barra flutuante */
#bottom-nav-fav-submenu {
    z-index: 1999 !important;
}

.bottom-app-nav__fav-sheet-hd {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 44px;
    background: #111827;
    color: #ffffff;
}

.bottom-app-nav__fav-sheet-title {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.10em;
}

.bottom-app-nav__fav-sheet-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    font-family: inherit;
}

.bottom-app-nav__fav-sheet-close:hover {
    filter: brightness(1.08);
    transform: translateY(-50%) scale(1.08);
}

.bottom-app-nav__fav-sheet-body {
    padding: 10px;
    display: grid;
    gap: 10px;
    background: #ffffff;
    max-height: min(360px, calc(100vh - 200px));
    overflow: auto;
}

.bottom-app-nav__fav-empty {
    border: 1px dashed rgba(148, 163, 184, 0.6);
    border-radius: 14px;
    padding: 12px;
    font-weight: 800;
    color: #334155;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.bottom-app-nav__fav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(229, 231, 235, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%);
    text-decoration: none;
    color: #111827;
    font-family: inherit;
    transition: transform 0.15s, filter 0.15s, border-color 0.15s, background 0.15s;
    outline: none;
}

.bottom-app-nav__fav-item:hover {
    filter: brightness(0.99);
    transform: translateY(-1px);
    border-color: #d1d5db; /* cinza claro */
    outline: 2px solid #d1d5db;
    outline-offset: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6f8 100%);
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.28);
    cursor: pointer;
}

.bottom-app-nav__fav-item:active {
    transform: translateY(0) scale(0.995);
}

.bottom-app-nav__fav-item:focus {
    outline: none;
}

.bottom-app-nav__fav-item:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.25);
    outline-offset: 2px;
}

.bottom-app-nav__fav-thumb {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #f3f4f6;
    cursor: zoom-in;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.bottom-app-nav__fav-thumb:hover {
    transform: scale(1.06);
    filter: brightness(1.02);
}

.bottom-app-nav__fav-meta {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.bottom-app-nav__fav-name {
    font-weight: 900;
    font-size: 0.86rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-app-nav__fav-price {
    font-weight: 900;
    font-size: 0.82rem;
    color: #dc2626;
}

.bottom-app-nav__fav-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bottom-app-nav__fav-install-inline {
    font-weight: 900;
    font-size: 0.82rem;
    color: #15803d; /* mesmo verde do card */
    letter-spacing: 0.02em;
}

.bottom-app-nav__fav-install-x {
    font-size: calc(0.82rem - 3px);
}

.bottom-app-nav__fav-card-ic {
    color: #94a3b8;
    font-size: 0.95rem;
}

.bottom-app-nav__fav-del {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.bottom-app-nav__fav-del:hover {
    filter: brightness(0.96);
    transform: scale(1.12);
}

.bottom-app-nav__fav-del:active {
    transform: scale(0.98);
}

.bottom-app-nav__fav-del i {
    color: inherit;
}

@media (max-width: 768px) {
    .bottom-app-nav__submenu--menu {
        left: 15px;
        right: auto;
        /* força animação apenas no eixo Y (evita "slide" lateral no 1º clique) */
        transform: translateY(6px) !important;
    }
}

/* Mobile: MENU anima apenas de baixo pra cima (sem slide lateral) */
@media (max-width: 768px) {
    .bottom-app-nav__submenu--menu.is-open {
        transform: translateY(0) !important;
    }
}

.bottom-app-nav__menu-sheet-hd {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 44px;
    background: linear-gradient(180deg, #1e293b 0%, #111827 55%, #0f172a 100%);
    color: #ffffff;
}

.bottom-app-nav__menu-sheet-title {
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.bottom-app-nav__menu-sheet-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.bottom-app-nav__menu-sheet-close:hover {
    filter: brightness(1.08);
    transform: translateY(-50%) scale(1.08);
}

/* Cartão perfil (âncora #foto-do-perfil) entre o título MENU e os itens — mesmo gradiente do header + leve acento (#0066cc) */
.bottom-app-nav__menu-foto-perfil {
    background:
        linear-gradient(155deg, rgba(0, 102, 204, 0.10) 0%, transparent 46%),
        linear-gradient(180deg, #1e293b 0%, #111827 55%, #0f172a 100%);
    color: #f8fafc;
    text-align: left;
    padding: 14px 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    max-height: min(52vh, 380px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.bottom-app-nav__menu-foto-perfil-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 100%;
}

.bottom-app-nav__menu-foto-perfil-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bottom-app-nav__menu-foto-perfil-name {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    width: 100%;
    text-align: center;
}

.bottom-app-nav__menu-foto-perfil-phone {
    margin: 0;
    font-size: 0.88rem;
    opacity: 1;
    width: 100%;
    text-align: center;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-decoration: none;
}

/* Mobile WebKit: números viram <a href="tel:"> — manter branco e sem sublinhado */
.bottom-app-nav__menu-foto-perfil-phone a,
.bottom-app-nav__menu-foto-perfil a[x-apple-data-detectors],
.bottom-app-nav__menu-foto-perfil-text a[href^='tel:'] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    font-weight: inherit;
    font-size: inherit;
}

.bottom-app-nav__menu-foto-perfil-thumbrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 10px;
}

.bottom-app-nav__menu-foto-perfil-thumb {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.bottom-app-nav__menu-foto-perfil-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bottom-app-nav__menu-foto-perfil-fallback {
    font-size: 3.2rem;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
}

.bottom-app-nav__menu-foto-perfil-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    line-height: 1.15;
    padding: 6px;
}

.bottom-app-nav__menu-foto-perfil-thumb:hover .bottom-app-nav__menu-foto-perfil-hint,
.bottom-app-nav__menu-foto-perfil-thumb:focus-visible .bottom-app-nav__menu-foto-perfil-hint {
    opacity: 1;
}

.bottom-app-nav__profile-logout {
    position: absolute;
    /* Alinha o centro horizontal do botão com o centro do telefone (sob o
       bloco de texto à direita da foto). 59px de margem direita coloca o
       centro do botão ~32px à esquerda, alinhado ao número. */
    right: 59px;
    /* Alinha o centro do botão com a linha do telefone (~3px abaixo do centro do card)
       e desce mais 35px conforme solicitado, totalizando 38px abaixo do centro vertical. */
    top: 50%;
    transform: translateY(calc(-50% + 38px));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(127, 29, 29, 0.28);
    z-index: 2;
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.bottom-app-nav__profile-logout i {
    font-size: 0.92rem;
    line-height: 1;
    flex: 0 0 auto;
}

.bottom-app-nav__profile-logout .top-btn-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    letter-spacing: 0.02em;
}

.bottom-app-nav__profile-logout:hover,
.bottom-app-nav__profile-logout:focus-visible {
    background: linear-gradient(135deg, #b91c1c 0%, #450a0a 100%);
    color: #ffffff !important;
    filter: brightness(0.94);
    box-shadow: 0 10px 24px rgba(69, 10, 10, 0.38);
    /* Mantém o deslocamento vertical atual e aumenta levemente no hover. */
    transform: translateY(calc(-50% + 38px)) scale(1.08);
}

.bottom-app-nav__menu-foto-perfil-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.bottom-app-nav__menu-foto-perfil-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: none;
    background: #7f1d1d;
    color: #ffffff;
    font-weight: 900;
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
}

.bottom-app-nav__menu-foto-perfil-remove:hover {
    filter: brightness(1.06);
}

.bottom-app-nav__menu-foto-perfil-addr {
    font-size: 0.78rem;
    opacity: 0.92;
    margin: 8px 0 0;
    line-height: 1.35;
}

.bottom-app-nav__menu-foto-perfil-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

.bottom-app-nav__menu-foto-perfil-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    font-weight: 800;
    font-size: 0.78rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.bottom-app-nav__menu-foto-perfil-link:hover {
    filter: brightness(1.03);
}

.bottom-app-nav__menu-foto-perfil-link--btn {
    border: none;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

button.bottom-app-nav__submenu-item {
    border: none;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    /* Não usar font: inherit — anula font-size/font-weight dos links .bottom-app-nav__submenu-item */
}

.bottom-app-nav__menu-sheet-body {
    padding: 10px;
    display: grid;
    gap: 10px;
    background: #ffffff;
}

.bottom-app-nav__btnwrap:hover > .bottom-app-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* MENU: não abre no hover, apenas via clique (.is-open) */
.bottom-app-nav__btnwrap--menu:hover > #bottom-nav-menu-submenu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
}

/* FAVORITOS: não abre no hover, apenas via clique (.is-open) */
.bottom-app-nav__btnwrap--fav:hover > #bottom-nav-fav-submenu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
}

/* Submenu "portaled" (movido para o body) abre via JS */
.bottom-app-nav__submenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* MENU (portaled/fixed): animar abrindo de baixo pra cima (override do inline transform do JS) */
#bottom-nav-menu-submenu.bottom-app-nav__submenu--menu {
    transform: translateY(10px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;
}

#bottom-nav-menu-submenu.bottom-app-nav__submenu--menu.is-open {
    transform: translateY(0) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bottom-app-nav__submenu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(229, 231, 235, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%);
    color: #111827;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.15;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.bottom-app-nav__submenu-item:hover {
    filter: brightness(0.99);
    transform: translateY(-1px) scale(1.03);
    border-color: #d1d5db; /* cinza claro */
    outline: 2px solid #d1d5db;
    outline-offset: 0;
}

.bottom-app-nav__submenu-item:visited {
    color: #111827;
    text-decoration: none;
}

.bottom-app-nav__submenu-item:focus {
    outline: none;
    text-decoration: none;
}

.bottom-app-nav__submenu-item:focus-visible {
    outline: 2px solid rgba(17, 24, 39, 0.18);
    outline-offset: 2px;
    text-decoration: none;
}

.bottom-app-nav__submenu-item:active {
    transform: scale(0.99);
}

.bottom-app-nav__submenu-item i {
    color: #0066cc;
}

.bottom-app-nav__submenu-item--placeholder,
.bottom-app-nav__submenu-item--placeholder:hover,
.bottom-app-nav__submenu-item--placeholder:focus-visible,
.bottom-app-nav__submenu-item--placeholder:active {
    cursor: not-allowed;
    opacity: 0.72;
    pointer-events: none;
    transform: none;
    filter: none;
    outline: none;
}

.bottom-app-nav__icon--with-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bottom-app-nav__tile-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53935;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    line-height: 1;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

#bottom-nav-fav-badge {
    top: -7px;
    left: 13px;
    right: auto;
    border-width: 0px;
    border-color: rgba(0, 0, 0, 0);
    border-style: none;
    border-image: none;
}

.bottom-app-nav__tile--wallet {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
    padding-right: 6px;
}

/* 5º botão: ícone acima da soma (cashback + pré-pago), submenu com detalhe */
.bottom-app-nav__tile--wallet-dd {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    padding: 6px 4px 6px;
}

#bottom-nav-wallet-btn {
    position: relative;
    left: auto;
    top: auto;
    width: 70px;
    max-width: 70px;
    margin-left: auto;
    margin-right: auto;
}

.bottom-app-nav__icon--wallet {
    position: relative;
    color: rgba(107, 114, 128, 1);
    font-size: 1.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 18px;
}

.bottom-app-nav__icon--wallet i {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-app-nav__wallet-line {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(107, 114, 128, 1);
    white-space: nowrap;
}

.bottom-app-nav__wallet-line--stack {
    font-size: 0.6rem;
    line-height: 1.05;
    position: absolute;
    top: 37px;
}

.bottom-app-nav__wallet-line strong {
    font-size: 0.66rem;
    font-weight: 800;
    color: rgba(107, 114, 128, 1);
}

#bottom-nav-wallet-amount {
    color: rgba(107, 114, 128, 1);
}

/* Quando o total acumulado (cashback + pré-pago) for > 0, mantém verde.
   Quando for 0, volta para o cinza padrão (mesma cor dos labels, ex.: "PEDIDOS"). */
#bottom-nav-wallet-wrap:not(.is-zero) #bottom-nav-wallet-btn .bottom-app-nav__icon--wallet {
    color: #16a34a;
}

#bottom-nav-wallet-wrap:not(.is-zero) #bottom-nav-wallet-btn .bottom-app-nav__wallet-line,
#bottom-nav-wallet-wrap:not(.is-zero) #bottom-nav-wallet-btn .bottom-app-nav__wallet-line strong,
#bottom-nav-wallet-wrap:not(.is-zero) #bottom-nav-wallet-btn #bottom-nav-wallet-amount {
    color: #15803d;
}

.bottom-app-nav__tile-dd-wrap--wallet {
    max-width: none;
    overflow: visible;
}

.bottom-app-nav__wallet-sheet {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
}

.bottom-app-nav__wallet-sheet-hd {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 11px 40px 11px 14px;
    background: #2c3e50;
    color: #fff;
}

.bottom-app-nav__wallet-sheet-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.bottom-app-nav__wallet-sheet-close {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.bottom-app-nav__wallet-sheet-close:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-50%) scale(1.08);
}

.bottom-app-nav__wallet-sheet-body {
    padding: 10px 12px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.bottom-app-nav__wallet-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
    transition: filter 0.15s, transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    min-width: 0;
    flex-shrink: 0;
    color: inherit;
    --wallet-pill-outline: #d1d5db;
}

.bottom-app-nav__wallet-pill:hover {
    filter: brightness(0.985);
    transform: translateY(-1px) scale(1.04);
    outline: 2px solid var(--wallet-pill-outline);
    outline-offset: 0;
}

.bottom-app-nav__wallet-pill:focus {
    outline: none;
}

.bottom-app-nav__wallet-pill:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.bottom-app-nav__wallet-pill:active {
    transform: translateY(0) scale(0.99);
}

.bottom-app-nav__wallet-pill--cb {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #166534;
    --wallet-pill-outline: #86efac;
}

.bottom-app-nav__wallet-pill--pp {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #1e40af;
    --wallet-pill-outline: #c7d2fe;
}

.bottom-app-nav__wallet-pill--pp:hover {
    border-color: #93c5fd;
}

.bottom-app-nav__wallet-pill-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.bottom-app-nav__wallet-pill-ico {
    flex-shrink: 0;
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.bottom-app-nav__wallet-pill-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
    line-height: 1.2;
}

.bottom-app-nav__wallet-pill-value {
    flex-shrink: 0;
    margin: 0;
    text-align: right;
    font-weight: 800;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bottom-app-nav__wallet-sheet-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 11px;
    background: #2c3e50;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bottom-app-nav__wallet-sheet-ft-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bottom-app-nav__wallet-sheet-ft-left i {
    font-size: 0.95rem;
    opacity: 0.95;
}

.bottom-app-nav__wallet-sheet-ft-sum {
    flex-shrink: 0;
    margin: 0;
    color: #2ecc71;
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: inline-block;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.bottom-app-nav__wallet-sheet-ft-sum:hover {
    transform: scale(1.08);
    filter: brightness(1.03);
}

/* Círculo vermelho central — metade acima do notch (referência visual) */
.bottom-app-nav__cart-fab {
    --fab-size: 60px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    border: none;
    background: #e53935;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    cursor: pointer;
    padding: 0;
    z-index: 6;
    pointer-events: auto;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}

.bottom-app-nav__cart-fab i {
    font-size: 1.65rem;
    line-height: 1;
    color: #ffffff;
}

.bottom-app-nav__cart-fab:hover {
    filter: brightness(1.05);
    transform: translate(-50%, -50%) scale(1.03);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
}

/* Contador só quando há itens (referência: círculo limpo com ícone branco) */
.bottom-app-nav__cart-fab .bottom-app-nav__fab-badge {
    display: none;
}

.bottom-app-nav__cart-fab .bottom-app-nav__fab-badge.hm-cart-fab-has-items {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -58%);
    min-width: 0;
    padding: 0;
    background: transparent;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

.bottom-app-nav__cart-sum,
#bottom-nav-cart-total {
    display: none !important;
}

.bottom-app-nav__tile-dd-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.bottom-app-nav__tile--pedidos-dd {
    width: 100%;
    max-width: 72px;
    margin-left: auto;
    margin-right: auto;
}

#bottom-nav-pedidos-btn {
    width: 70px;
    max-width: 70px;
    position: relative;
    left: auto;
    top: auto;
}

.bottom-app-nav__dd-panel {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(10px);
    min-width: min(220px, calc(100vw - 24px));
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;
}

.bottom-app-nav__dd-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.bottom-app-nav__dd-panel[hidden] {
    display: none !important;
}

/* Deve vir depois de .bottom-app-nav__dd-panel — evita painel de saldos “vazio” (regras genéricas sobrescreviam o painel) */
.bottom-app-nav__tile-dd-wrap--wallet > .bottom-app-nav__dd-panel.bottom-app-nav__dd-panel--wallet {
    left: auto;
    right: 0;
    transform: translateY(10px);
    width: min(300px, calc(100vw - 16px));
    min-width: min(260px, calc(100vw - 16px));
    max-width: calc(100vw - 12px);
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 1999;
}

.bottom-app-nav__tile-dd-wrap--wallet > .bottom-app-nav__dd-panel.bottom-app-nav__dd-panel--wallet.is-open {
    transform: translateY(0);
}

/* Quando o painel "Meus saldos" é portaled para o body, ele deixa de ser filho do wrap.
   Mantém o fundo do container transparente (somente a sheet interna tem visual). */
#bottom-nav-wallet-menu.bottom-app-nav__dd-panel--wallet {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.bottom-app-nav__dd-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    background: #3498db;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(52, 152, 219, 0.45);
    transition: filter 0.15s, transform 0.15s;
}

.bottom-app-nav__dd-track:active {
    transform: scale(0.98);
}

.bottom-app-nav__dd-track:hover {
    filter: brightness(1.05);
}

/* Toast "Favoritado" ao lado do coração */
.hm-favorite-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(155deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
    color: #fff;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow:
        0 10px 24px rgba(22, 163, 74, 0.38),
        0 3px 10px rgba(15, 23, 42, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.hm-favorite-toast__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-size: 0.82rem;
}

.hm-favorite-toast__txt {
    line-height: 1;
}

/* Botão favorito nos cards */
.product-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #c62828;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
    transition: transform 0.15s, color 0.15s;
}

.product-fav-btn.is-fav {
    color: #c62828;
    background: #fff0f3;
}

.product-fav-btn:active {
    transform: scale(0.92);
}

.action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.social-links-header {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-icon-link {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: transform 0.2s, filter 0.2s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.social-icon-link:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.social-instagram {
    background: #E1306C;
}

.social-facebook {
    background: #1877F2;
}

.social-whatsapp {
    background: #25D366;
}

.social-tiktok {
    background: #000000;
}

.social-youtube {
    background: #FF0000;
}

.social-site {
    background: #3498db;
}

.social-twitter {
    background: #000000;
}

.social-threads {
    background: #000000;
}

.social-ifood {
    background: #ea1d2c;
}

.social-99food {
    background: #ff8b00;
}

.hours-display {
    font-size: 0.85rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffdb4d;
    padding: 8px 18px;
    border-radius: 50px;
    border: 2px solid #f1c40f;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(241, 196, 15, 0.2);
}

.hours-display i {
    color: #333;
    font-size: 0.9rem;
}

/* Category Sections */
.category-section {
    max-width: 1250px;
    margin: 26px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .category-section {
        padding: 0 30px;
    }
}

/* Barra de categoria acima dos cards — layout novo (print: círculo sobreposto + pílula cinza) */
.product-category-bar-wrap {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto 22px;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    /* Variáveis do “cinza premium” (layoutnovo) */
    --cat-pill-bg: linear-gradient(145deg, #fafafa 0%, #e9ecef 55%, #d9dde2 100%);
}

@media (min-width: 768px) {
    .product-category-bar-wrap {
        padding: 0;
    }
}

/* Mobile: alinha a barra de categorias com o conteúdo (10px de gutter) */
@media (max-width: 768px) {
    .product-category-bar-wrap {
        /* Alinha com o primeiro card (mobile) */
        padding-left: 10px;
        padding-right: 10px;
        margin-left: -5px;
        box-sizing: border-box;
    }

    .product-category-bar-wrap--featured {
        padding-left: 10px;
    }

    /* Alinha a borda esquerda do anel com a borda esquerda do card */
    .product-category-bar {
        margin-left: -15px !important;
    }

    .product-category-bar__icon-ring {
        margin-left: 0 !important;
    }

    /* Mobile: move apenas o fundo retangular (todas as categorias) para a direita */
    .product-category-bar:not(.product-category-bar--featured) {
        background: none !important;
    }

    .product-category-bar:not(.product-category-bar--featured)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 26px;
        right: 0;
        background: linear-gradient(to right, #e5e7eb, transparent);
        border-radius: 12px;
        z-index: 0;
        pointer-events: none;
    }

    .product-category-bar:not(.product-category-bar--featured) > * {
        position: relative;
        z-index: 1;
    }
}

.product-category-bar-wrap--featured {
    padding-left: 0;
}

/* Barra de categoria — EXTRAÍDO do layoutnovo (classes Tailwind no bundle) */
.product-category-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px; /* gap-4 */
    height: 43px; /* h-[43px] */
    width: 100%;
    margin: 0;
    padding-left: 0; /* pl-0 */
    padding-right: 16px; /* pr-4 */
    background: linear-gradient(to right, #e5e7eb, transparent); /* bg-gradient-to-r from-gray-200 to-transparent */
    border-radius: 12px; /* rounded-xl */
    box-shadow: none;
    box-sizing: border-box;
    overflow: visible;
    margin-left: 18px; /* ml-[18px] */
}

/* Desktop: encurta pela direita para alinhar com o botão de busca flutuante */
@media (min-width: 769px) {
    .product-category-bar {
        width: calc(100% - 20px);
    }
}

.product-category-bar__icon-ring {
    width: 50px; /* w-[50px] */
    height: 50px; /* h-[50px] */
    border-radius: 9999px; /* rounded-full */
    background: linear-gradient(to bottom right, #e5e7eb, #f9fafb); /* bg-gradient-to-br from-gray-200 to-gray-50 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -18px; /* -ml-[18px] */
    transform: rotate(-45deg); /* -rotate-[45deg] */
    border: 1px solid #e5e7eb; /* border-[1px] border-[#e5e7eb] */
    border-bottom-width: 2px; /* border-b-2 */
    border-right-width: 1px; /* border-r-1 (no bundle) */
    box-shadow: 0 1px 2px 0 #e5e7eb; /* shadow-[0_1px_2px_0_#e5e7eb] */
    flex-shrink: 0;
}

.product-category-bar__ring-emoji {
    font-size: 24px; /* text-2xl */
    line-height: 1;
    display: block;
    transform: rotate(45deg);
    filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.8)); /* drop-shadow no bundle */
}

.product-category-bar__icon {
    font-size: 20px;
    color: #e53935;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.8));
}

.product-category-bar__title {
    margin: 0;
    font-size: 18px; /* text-lg */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-widest */
    color: #364153; /* text-[#364153] */
    line-height: 1.2;
    font-family: var(--font-family, 'Inter', system-ui, -apple-system, sans-serif);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: -4px; /* ml-[-4px] */
    filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.8)); /* drop-shadow no bundle */
}

.product-category-bar__lead-emoji {
    font-size: 1.08em;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.category-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}

/* Card de produto “banner” (modelo layoutnovo) — exibido acima do card/lista clássico */
.product-card-v2 {
    position: relative;
    max-width: 100%;
    margin: 0 auto 16px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
    border: 1px solid #f0f0f0;
    font-family: var(--font-family, 'Inter', sans-serif);
}

.product-card-v2__header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 52px 12px 16px;
    background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
    border-radius: 18px 18px 0 0;
}

.product-card-v2__title {
    margin: 0;
    font-size: clamp(0.95rem, 3.5vw, 1.05rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.product-card-v2__header .product-fav-btn--card-v2 {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    color: #ffc9d4;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
    z-index: 8;
    pointer-events: auto;
}

.product-card-v2__header .product-fav-btn--card-v2.is-fav {
    color: #fff;
    background: rgba(255, 255, 255, 0.28);
}

.product-card-v2__body {
    display: flex;
    gap: 14px;
    padding: 14px 14px 10px;
    align-items: flex-start;
    position: relative;
}

.product-card-v2__media {
    position: relative;
    flex: 0 0 120px;
    width: 120px;
    cursor: pointer;
    transition: transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2__media:hover {
        transform: scale(1.04);
    }
}

.product-card-v2__img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 0.5px solid #eef1f4;
    border-radius: 14px;
    box-sizing: border-box;
    background: #f3f4f6;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.product-card-v2__img.is-gallery-flick {
    z-index: 1;
}

.product-card-v2__discount {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 50;
    background: #e53935;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 4px;
    transform: rotate(-12deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    line-height: 1;
    pointer-events: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2__media:hover .product-card-v2__discount,
    .product-card-v2:hover .product-card-v2__discount {
        transform: rotate(-12deg) scale(1.12);
        filter: brightness(1.03);
    }
}

.product-card-v2__badge-wrap {
    position: absolute;
    top: 6px;
    right: 4px;
    z-index: 3;
    pointer-events: none;
}

.product-card-v2__badge-wrap .product-badge {
    position: static;
    transform: none;
    font-size: 0.55rem;
    padding: 3px 6px;
}

.product-card-v2__dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.product-card-v2__dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    cursor: pointer;
}

.product-card-v2__dots span.is-active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transform: scale(1.15);
}

/* Galeria no card: setas + cápsula — opacidade 25% no grupo inteiro */
.product-card-v2__gallery-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 1px;
    pointer-events: none;
}

.product-card-v2__gallery-arrow {
    pointer-events: auto;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: #64748b;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.18s ease, background 0.15s ease, transform 0.15s ease;
}

.product-card-v2__img:hover ~ .product-card-v2__gallery-controls .product-card-v2__gallery-arrow,
.product-card-v2__img:active ~ .product-card-v2__gallery-controls .product-card-v2__gallery-arrow,
.product-card-v2__media:focus-within .product-card-v2__gallery-controls .product-card-v2__gallery-arrow {
    opacity: 1;
}

.product-card-v2__gallery-controls:hover .product-card-v2__gallery-arrow,
.product-card-v2__gallery-controls:focus-within .product-card-v2__gallery-arrow {
    background: #475569;
}

.product-card-v2__gallery-arrow:hover {
    transform: scale(1.06);
}

.product-card-v2__gallery-arrow i {
    font-size: 0.42rem;
    line-height: 1;
}

.product-card-v2__gallery-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 1px 4px;
    border-radius: 999px;
    background: #1e293b;
    opacity: 0.3;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.product-card-v2__gallery-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}

.product-card-v2__gallery-dot.is-active {
    background: #ffffff;
    transform: scale(1.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.product-card-v2__gallery-pill .product-card-v2__gallery-dot {
    width: 4px;
    height: 4px;
}

@keyframes product-card-v2-gallery-flick {
    0% {
        opacity: 1;
        filter: none;
    }
    40% {
        opacity: 0.82;
        filter: brightness(0.98);
    }
    100% {
        opacity: 1;
        filter: none;
    }
}

.product-card-v2__img.is-gallery-flick {
    animation: product-card-v2-gallery-flick 0.24s ease;
}

.cross-sell-img.is-gallery-flick {
    animation: product-card-v2-gallery-flick 0.24s ease;
}

/* Modal zoom com galeria (setas + miniaturas) */
.image-zoom-modal {
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    /* Mobile: reduz margens laterais do zoom (imagem mais larga) */
    .image-zoom-modal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .image-zoom-modal__box {
        /* Mobile: 20px de margem em cada lado */
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .image-zoom-modal__figure {
        max-width: 100% !important;
        width: 100% !important;
    }

    .image-zoom-modal__img {
        width: 100% !important;
        height: auto !important;
    }
}

.image-zoom-modal__box {
    position: relative;
    max-width: min(94vw, 920px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.image-zoom-modal__title-row {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.image-zoom-modal__title-row:has(#image-zoom-fav-btn:not([hidden])) {
    min-height: 36px;
}

.image-zoom-modal__product-title {
    margin: 0;
    padding: 0 10px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(1rem, 2.8vw, 1.25rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.image-zoom-modal__product-title[hidden] {
    display: none !important;
}

.image-zoom-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    transform: translate(50%, -50%);
    z-index: 6;
    width: 36px;
    height: 36px;
    border: 2px solid #414141;
    border-radius: 50%;
    background: linear-gradient(180deg, #111827 0%, #000000 100%);
    color: #fff;
    font-size: 1.5rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.image-zoom-modal[data-zoom-kind="logo"] .image-zoom-modal__close {
    /* Logo tem dimensões/área útil diferente: mantém o X dentro do canto */
    top: 8px;
    right: 8px;
    transform: none;
}

.image-zoom-modal__close:hover,
.image-zoom-modal__close:focus-visible {
    background: linear-gradient(180deg, #1f2937 0%, #000000 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.9);
    transform: translate(50%, -50%) scale(1.12);
}

.image-zoom-modal[data-zoom-kind="logo"] .image-zoom-modal__close:hover,
.image-zoom-modal[data-zoom-kind="logo"] .image-zoom-modal__close:focus-visible {
    transform: scale(1.12);
}

@media (max-width: 768px) {
    /* No mobile, mantém o botão de fechar no canto superior direito do zoom */
    .image-zoom-modal__close {
        /* Herda do desktop: ancorado no canto superior direito da imagem */
    }
}

.image-zoom-modal__title-row .product-fav-btn--zoom-modal {
    pointer-events: auto;
    position: absolute;
    top: 20px;
    left: 20px;
    right: auto;
    transform: none;
    margin-right: 0;
    z-index: 7;
    width: 42px;
    height: 42px;
    padding: 5px;
    border-radius: 15%;
    border: 0;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
    box-shadow: none;
    font-size: 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

#image-zoom-fav-btn i.fas {
    color: rgba(255, 255, 255, 1);
    opacity: 0.55;
    font-size: 21px;
}

#image-zoom-fav-btn.is-fav i.fas {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

#image-zoom-fav-btn:hover i.fas,
#image-zoom-fav-btn:focus-visible i.fas {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

#image-zoom-fav-btn.is-fav:hover i.fas,
#image-zoom-fav-btn.is-fav:focus-visible i.fas {
    color: rgba(255, 255, 255, 1);
}

#image-zoom-fav-btn:not(.is-fav):hover i.fas,
#image-zoom-fav-btn:not(.is-fav):focus-visible i.fas {
    opacity: 1;
}

.image-zoom-modal__title-row .product-fav-btn--zoom-modal:hover,
.image-zoom-modal__title-row .product-fav-btn--zoom-modal:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.12);
}

.image-zoom-modal__title-row .product-fav-btn--zoom-modal.is-fav:hover,
.image-zoom-modal__title-row .product-fav-btn--zoom-modal.is-fav:focus-visible {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.2);
}

.image-zoom-modal__title-row .product-fav-btn--zoom-modal.is-fav {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.2);
}

/* Quando NÃO está favoritado: background 5% e ícone 30% */
.image-zoom-modal__title-row .product-fav-btn--zoom-modal:not(.is-fav) {
    background: rgba(255, 255, 255, 0.2);
}

.image-zoom-modal__title-row .product-fav-btn--zoom-modal[hidden] {
    display: none !important;
}

.image-zoom-modal__title-row .image-zoom-modal__share-btn {
    pointer-events: auto;
    position: absolute;
    top: 81px;
    left: 20px;
    right: auto;
    z-index: 7;
    width: 42px;
    height: 42px;
    padding: 5px;
    margin: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15%;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.image-zoom-modal__title-row .image-zoom-modal__share-btn__img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.image-zoom-modal__title-row .image-zoom-modal__share-btn:hover,
.image-zoom-modal__title-row .image-zoom-modal__share-btn:focus-visible {
    filter: brightness(1.08);
    transform: scale(1.12);
}

.image-zoom-modal__title-row .image-zoom-modal__share-btn:hover .image-zoom-modal__share-btn__img,
.image-zoom-modal__title-row .image-zoom-modal__share-btn:focus-visible .image-zoom-modal__share-btn__img {
    opacity: 1;
}

.image-zoom-modal__title-row .image-zoom-modal__share-btn[hidden] {
    display: none !important;
}

.image-zoom-modal__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.image-zoom-modal__figure {
    position: relative;
    display: inline-block;
    max-width: min(76vw, 680px);
    max-height: min(72vh, 680px);
    line-height: 0;
    isolation: isolate;
}

.image-zoom-modal__figure .image-zoom-modal__img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: min(72vh, 680px);
}

.image-zoom-modal__figure .image-zoom-modal__title-row {
    z-index: 8;
}

.image-zoom-modal__figure .image-zoom-modal__close {
    z-index: 9;
}

.image-zoom-modal__thumbs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.image-zoom-modal__img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    border: 2px solid #ffffff;
}

.image-zoom-modal__arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transition: background 0.15s ease, transform 0.15s ease;
}

#image-zoom-prev.image-zoom-modal__arrow {
    margin-left: -7px;
}

#image-zoom-next.image-zoom-modal__arrow {
    margin-right: -7px;
}

.image-zoom-modal__arrow[hidden] {
    display: none !important;
}

.image-zoom-modal__arrow:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);
}

.image-zoom-modal__arrow:hover {
    transform: scale(1.2);
}

.image-zoom-modal__arrow i {
    font-size: 13px;
    line-height: 1;
}

.image-zoom-modal__thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 19px;
    max-width: 100%;
    opacity: 1;
}

.image-zoom-modal__thumb {
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background: #0f172a;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.image-zoom-modal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-zoom-modal__thumb:hover:not(.is-active) {
    border-color: #ffffff;
    transform: scale(1.12);
}

.image-zoom-modal__thumb.is-active {
    border: 2px solid transparent;
    border-color: transparent;
    box-shadow: inset 0 0 0 2px #7dd3fc;
    background:
        linear-gradient(#0f172a, #0f172a) padding-box,
        conic-gradient(from var(--thumb-rot, 0turn),
            #7dd3fc 0%,
            #3b82f6 25%,
            #7dd3fc 50%,
            #3b82f6 75%,
            #7dd3fc 100%
        ) border-box;
    animation: image-zoom-thumb-ring 1.65s linear infinite;
    transform: none;
}

.image-zoom-modal__thumb.is-active:hover {
    transform: scale(1.12);
}

@property --thumb-rot {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

@keyframes image-zoom-thumb-ring {
    to {
        --thumb-rot: 1turn;
    }
}

.product-card-v2__info {
    flex: 1;
    min-width: 0;
    /* Mantém preço/ícones alinhados com a foto, mesmo sem descrição */
    display: flex;
    flex-direction: column;
    min-height: 127px; /* acompanha .product-card-v2__media (aspect-ratio 1) */
}

.product-card-v2__pay-block {
    /* Centraliza verticalmente o bloco de valores/ícones ao lado da foto */
    margin-top: auto;
    margin-bottom: auto;
}

.product-card-v2__desc {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-v2__install-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.product-card-v2__install {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 800;
    color: #15803d;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.product-card-v2__install-prefix {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

/* Valor da parcela (ex. 7,30): equivalente Tailwind font-extrabold + leading-none */
.product-card-v2__install-value {
    font-size: 24px;
    font-weight: 800; /* font-extrabold */
    line-height: 1; /* leading-none */
    letter-spacing: -0.02em;
}

.product-card-v2__install-fallback {
    font-size: 12px;
    font-weight: 800;
}

.product-card-v2__install-ic {
    color: #94a3b8;
    font-size: 0.95rem;
}

.product-card-v2__from {
    margin: 0 0 4px;
    font-size: 0.78rem;
    color: #16a34a;
    font-weight: 700;
}

.product-card-v2__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 10px;
}

.product-card-v2__old {
    font-size: 10px;
    color: #94a3b8;
    text-decoration: line-through;
}

.product-card-v2__price {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
}

.product-card-v2__pay-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.95rem;
}

.product-card-v2__pix {
    margin: 6px 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #15803d;
}

.product-card-v2__footer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 58px 14px 14px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}

.product-card-v2__footer-spacer {
    flex: 0 0 1px;
    min-width: 1px;
}

.product-card-v2__cashback {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #86efac;
    background: #ecfdf5;
    color: #166534;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: none;
}

button.product-card-v2__cashback {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    margin: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    background: transparent;
}

.product-card-v2__cashback-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.product-card-v2__cashback-txt {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
}

.product-card-v2__cashback-label,
.product-card-v2__cashback-amount,
.product-card-v2__cashback-line,
.product-card-v2__cashback-line-label,
.product-card-v2__cashback-line-value {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.product-card-v2__cashback-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    color: #15803d;
    font-weight: 900;
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: inherit;
    white-space: nowrap;
}

.product-card-v2__cashback-line-label {
    font-size: calc(1em - 2px);
}

.product-card-v2__cashback-line-value {
    font-size: calc(1em + 2px);
    font-weight: 900;
    margin-left: 0.35ch;
}

.product-card-v2__cashback-possui {
    color: #15803d;
    font-weight: 900;
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: inherit;
}

.product-card-v2__cashback-amount {
    text-transform: none;
}

button.product-card-v2__cashback.product-card-v2__cashback--login-to-see {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.product-card-v2__cashback--login-to-see:hover {
    filter: brightness(0.98);
    border-color: #4ade80;
}

.product-card-v2__cashback-hint {
    display: block;
    width: 100%;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #047857;
    margin-top: 1px;
}

.product-card-v2__cashback-hint-rs {
    font-weight: 800;
    letter-spacing: 0.04em;
}

.product-card-v2__cashback-hint-ver {
    font-weight: 800;
    letter-spacing: 0.08em;
}

.product-card-v2__cashback--muted {
    border-color: #bbf7d0;
    color: #15803d;
}

.product-card-v2__footer-center--empty {
    flex: 0 0 1px;
    min-width: 1px;
}

/* Sem "SERVE DE...": não reservar espaço no centro */
.product-card-v2__body-footer--no-serves .product-card-v2__footer-center {
    display: none;
}

.product-card-v2__footer-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.product-card-v2__footer .serves-badge {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-card-v2__footer .serves-badge .serves-icons {
    gap: 3px;
}

.product-card-v2__footer .serves-badge .serves-icons i {
    font-size: 0.85rem;
    line-height: 1;
    color: #64748b;
}

/* Card v2 — “Serve pessoas” em texto (referência layoutnovo) */
.product-card-v2__footer .serves-badge.serves-badge--textline {
    background: #fff;
    border: 1px solid #d1d5db;
    box-shadow: none;
    padding: 5px 10px;
    max-width: 100%;
    cursor: default;
    transition: none;
}

/* "SERVE ..." não deve ter nenhum efeito no hover/focus/active */
.product-card-v2__footer .serves-badge.serves-badge--textline:hover,
.product-card-v2__footer .serves-badge.serves-badge--textline:active,
.product-card-v2__footer .serves-badge.serves-badge--textline:focus,
.product-card-v2__footer .serves-badge.serves-badge--textline:focus-visible {
    cursor: default !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    background: #fff !important;
    border-color: #d1d5db !important;
}

/* Regra global: "Serve X pessoas" não tem efeito nenhum em nenhum lugar */
.serves-badge.serves-badge--textline,
.serves-badge.serves-badge--textline:hover,
.serves-badge.serves-badge--textline:active,
.serves-badge.serves-badge--textline:focus,
.serves-badge.serves-badge--textline:focus-visible {
    cursor: default !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

/* Remove “fumaça”/overlay dos pseudo-elementos do serves-badge */
.serves-badge.serves-badge--textline::before,
.serves-badge.serves-badge--textline::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.product-card-v2__footer .serves-badge.serves-badge--textline .serves-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__ic {
    font-size: 0.88rem;
    color: #374151;
    flex-shrink: 0;
    line-height: 1;
}

.product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__txt {
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1.2;
    color: #1e293b;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__num {
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--pcv2-serves-num-color, #0f172a);
}

.product-card-v2__add-fab {
    position: absolute;
    right: 12px;
    bottom: 11px;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    border: none;
    background: var(--pcv2-fab-bg, linear-gradient(135deg, #e53935 0%, #c62828 100%));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 40;
    transition: transform 0.15s ease;
}

/* Equivalente a text-[19px] text-white */
.product-card-v2__add-fab-icon {
    font-size: 19px;
    color: #ffffff;
    line-height: 1;
    display: block;
}

.product-card-v2__add-fab:active {
    transform: scale(0.94);
}

@media (max-width: 480px) {
    .product-card-v2__media {
        flex-basis: 127px;
        width: 120px;
    }

    .product-card-v2__cashback {
        font-size: 0.6rem;
        padding: 5px 8px;
    }
}

/*
 * Card v2 — responsivo (layoutnovo); largura fixa máx. 380px no eixo horizontal.
 * Aplicado ao produto "20 Salgadinhos" via .product-card-v2--layoutnv-responsive
 */
.product-card-v2--layoutnv-responsive {
    width: 100%;
    max-width: min(100%, 380px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/*
 * MOBILE: manter layout idêntico ao desktop (horizontal) e apenas aplicar "zoom out".
 * IMPORTANTe: não muda flex-direction/estrutura — só escala.
 *
 * O espaçamento lateral (15px) é aplicado no container externo (`main.container`)
 * para ficar EXATO, sem depender de cálculos no próprio card.
 */
.product-card-v2--layoutnv-responsive {
    --lv-card-scale: 1;
    --lv-card-raise-y: 0px;
    transform: translateY(var(--lv-card-raise-y)) scale(var(--lv-card-scale));
    transform-origin: top center;
    /* Base fixa do layout desktop; o mobile só “zooma” (scale) sem reestruturar. */
    width: 380px;
    max-width: 380px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    main.container {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}

/* Android (mobile): reduzir mais 7px por lado (10px -> 3px) */
@media (max-width: 768px) {
    .is-android main.container {
        padding-left: 3px;
        padding-right: 3px;
    }
}

@media (max-width: 768px) {
    .product-card-v2--layoutnv-responsive {
        /* Faixa 481–768: não amplia; mantém desktop e só reduz se necessário */
        --lv-card-scale: min(1, calc((100vw - 20px) / 380px));
    }
}

/* Mobile: card alinhado à esquerda do mesmo gutter do conteúdo */
@media (max-width: 768px) {
    .product-card-v2--layoutnv-responsive {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .product-card-v2--layoutnv-responsive {
        /* Mobile “de verdade”: ocupa (tela - 20px) com 10px exatos de cada lado */
        --lv-card-scale: calc((100vw - 20px) / 380px);
    }
}

/* Tablet e desktop: layout horizontal (imagem à esquerda) — breakpoint md 768px */
@media (min-width: 768px) {
    .product-card-v2--layoutnv-responsive .product-card-v2__body {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 14px 10px;
    }

    .product-card-v2--layoutnv-responsive .product-card-v2__media {
        flex: 0 0 120px;
        width: 120px;
        max-width: 120px;
    }

    .product-card-v2--layoutnv-responsive .product-card-v2__img {
        aspect-ratio: 1;
        width: 120px;
        height: 127px;
        max-height: 127px;
    }

    .product-card-v2--layoutnv-responsive .product-card-v2__footer {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        padding: 10px 58px 14px 14px;
    }
}

@media (min-width: 768px) {
    .product-card-v2--layoutnv-responsive .product-card-v2__title {
        font-size: 1.08rem;
    }

    .product-card-v2--layoutnv-responsive .product-card-v2__desc {
        font-size: 0.86rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/*
 * Card "🛎️ 20 Salgadinhos" (.product-card-v2--salg20) — layoutnovo:
 * miniatura: --salg20-thumb (137×137); cartão ~12px radius;
 * header vermelho sólido; coluna de preços/descrição centralizada; tooltip .custom-tooltip.
 */
.product-card-v2--salg20 {
    /* Largura da miniatura + coluna 1 do rodapé (alinhada à caixa da imagem no DevTools). */
    --salg20-thumb: clamp(112px, 34vw, 137px);
    /* Largura da caixa do cashback no body-footer (centrada sob a miniatura = --salg20-thumb). */
    --salg20-body-footer-cashback-col: clamp(116px, 35vw, 141px);
    --lv-primary: #b61722;
    --lv-primary-deep: #9a141c;
    --lv-header-solid: var(--pcv2-header-solid, #e53935);
    --lv-on-surface: #111c2d;
    --lv-body-text: #757575;
    --lv-install: #00c853;
    --lv-install-dark: #007b34;
    --lv-muted: #9e9e9e;
    --lv-surface-low: #f5f5f5;
    /* Meio do ícone de coração (28px) a partir da borda direita do card */
    --salg20-heart-mid-from-right: 28px;
    /* Métricas do FAB (+) para alinhamentos consistentes (inclui mobile com scale) */
    --salg20-fab-size: 39px;
    /* Offset do FAB relativo à BORDA DIREITA do body-footer (pode ser negativo) */
    --salg20-body-footer-fab-right: -2px;
    max-width: min(100%, 380px);
    font-family: 'Manrope', 'Inter', sans-serif;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Permite o badge SERVE estender por baixo do FAB (+) sem clip do card */
    overflow: visible;
}

/* Mobile-first: escala proporcional suave (não reposiciona, só reduz) */
.product-card-v2--salg20 .product-card-v2__header {
    min-height: clamp(44px, 10vw, 48px);
    padding: clamp(10px, 2.8vw, 12px) clamp(46px, 12vw, 50px) clamp(10px, 2.8vw, 12px) clamp(12px, 3.2vw, 14px);
}

.product-card-v2--salg20 .product-card-v2__body {
    --salg20-body-inset-x: clamp(11px, 3vw, 14px);
    padding: clamp(11px, 3vw, 14px) var(--salg20-body-inset-x) clamp(54px, 14vw, 64px);
    gap: clamp(11px, 3vw, 14px);
}

.product-card-v2--salg20 .product-card-v2__body-footer {
    left: var(--salg20-body-inset-x);
    right: var(--salg20-body-inset-x);
    bottom: clamp(11px, 3vw, 14px);
    gap: 8px clamp(18px, 5vw, 24px);
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-inner {
    font-size: clamp(5.2px, 1.45vw, 6.25px);
}

.product-card-v2--salg20 .product-fav-btn--card-v2 {
    width: clamp(32px, 9vw, 34px);
    height: clamp(32px, 9vw, 34px);
    min-width: clamp(32px, 9vw, 34px);
}

/* Breakpoints obrigatórios */
@media (min-width: 480px) {
    .product-card-v2--salg20 {
        --salg20-thumb: 137px;
        --salg20-body-footer-cashback-col: 141px;
    }
}

/* No grid (3 por linha), força o "20 Salgadinhos" a iniciar na coluna 1 */
.product-grid-container .product-card-v2--salg20 {
    grid-column: 1 / -1;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.product-list-container .product-card-v2--salg20 {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.product-card-v2--salg20:hover {
    --lv-card-raise-y: -1px;
    box-shadow:
        0 6px 12px -2px rgba(0, 0, 0, 0.1),
        0 3px 6px -2px rgba(0, 0, 0, 0.06);
}

.product-card-v2--salg20 .product-card-v2__header {
    min-height: 48px;
    padding: 12px 50px 12px 14px;
    border-radius: 12px 12px 0 0;
    background: var(--pcv2-header-bg, var(--lv-header-solid));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.product-card-v2--salg20 .product-card-v2__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(0.94rem, 3.2vw, 1.05rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: left;
    color: #fff;
    text-shadow: none;
}

.product-card-v2--salg20 .product-fav-btn--card-v2 {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent !important;
    color: #fff;
    border: none !important;
    box-shadow: none;
    font-size: 0.95rem;
}

.product-card-v2--salg20 .product-fav-btn--card-v2 i {
    font-size: 28px;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.18s ease, transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20 .product-fav-btn--card-v2:hover i {
        transform: scale(1.12);
    }
}

.product-card-v2--salg20 .product-fav-btn--card-v2:not(.is-fav):hover i,
.product-card-v2--salg20 .product-fav-btn--card-v2:not(.is-fav):focus-visible i {
    opacity: 0.75;
}

.product-card-v2--salg20 .product-fav-btn--card-v2.is-fav {
    color: #fff;
    background: transparent !important;
}

.product-card-v2--salg20 .product-fav-btn--card-v2.is-fav i {
    opacity: 1;
}

/* :active precisa ficar depois do :hover; inclui :hover:active porque, ao clicar, :hover também fica ativo */
.product-card-v2--salg20 .product-fav-btn--card-v2:not(.is-fav):active i,
.product-card-v2--salg20 .product-fav-btn--card-v2:not(.is-fav):hover:active i,
.product-card-v2--salg20 .product-fav-btn--card-v2.is-fav:active i,
.product-card-v2--salg20 .product-fav-btn--card-v2.is-fav:hover:active i {
    opacity: 1;
}

.product-card-v2--salg20 .product-card-v2__header .product-fav-btn--card-v2,
.product-card-v2--salg20 .product-card-v2__header .product-fav-btn--card-v2.is-fav {
    background: transparent !important;
    border: none !important;
    box-shadow: none;
}

.product-card-v2--salg20 .product-card-v2__body {
    /* Alinha calc do rodapé (badge SERVE) com padding horizontal do body */
    --salg20-body-inset-x: 14px;
    /* Espaço do fluxo: topo da faixa (~35px) + rodapé absoluto + folga (64px = +4px vs. base 60px) */
    padding: 14px 14px 64px;
    gap: 14px;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 0 0 18px 18px;
    position: relative;
}

/* Sem CASHBACK e sem SERVE */
.product-card-v2--salg20 .product-card-v2__body.product-card-v2__body--no-cb-no-serves {
    /* Mantém o mesmo alinhamento do body padrão */
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 64px;
    /* Mantém a mesma altura visual do body padrão */
    min-height: 215px;
}

.product-card-v2--salg20 .product-card-v2__body.product-card-v2__body--no-cb-no-serves .product-card-v2__media,
.product-card-v2--salg20 .product-card-v2__body.product-card-v2__body--no-cb-no-serves .product-card-v2__info {
    margin-top: 0;
}

/* Sem CASHBACK e sem SERVE: alinhar o FAB (+) ao mesmo centro vertical dos cards normais */
.product-card-v2--salg20 .product-card-v2__body.product-card-v2__body--no-cb-no-serves .product-card-v2__body-footer .product-card-v2__add-fab {
    margin-top: -23px;
}

@media (min-width: 768px) {
    .product-card-v2--salg20 .product-card-v2__body.product-card-v2__body--no-cb-no-serves > .product-card-v2__card-actions {
        margin-top: 0;
    }
}

.product-card-v2--salg20 .product-card-v2__body-footer {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px; /* 3px abaixo do 17px anterior (descer a faixa cashback / SERVE / FAB) */
    /* Coluna 1 = largura da miniatura; cashback (141px) centrado nela; coluna 2 = SERVE + FAB absoluto */
    display: grid;
    grid-template-columns: var(--salg20-thumb) minmax(0, 1fr);
    align-items: center;
    /* Mantém 10px exatos entre CASHBACK (direita) e SERVE (esquerda) */
    gap: 8px 10px;
    z-index: 5;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__footer-center {
    min-width: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*
     * Faz o fundo do SERVE terminar na metade do coração do header.
     * Como o body-footer já tem right inset, compensamos pelo inset do body.
     */
    padding-right: max(0px, calc(var(--salg20-heart-mid-from-right) - var(--salg20-body-inset-x)));
}

/* Sem CASHBACK, mas com "SERVE DE...": o SERVE ocupa até alinhar com o título */
.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-spacer {
    display: none;
}

.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center {
    grid-column: 1 / 3;
    justify-content: stretch;
    padding-right: calc(
        (var(--salg20-fab-size) / 2) + (var(--salg20-body-footer-fab-right) / var(--lv-card-scale, 1))
    );
    box-sizing: border-box;
}

.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline {
    width: 100%;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
}

.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-icons,
.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-line {
    width: 100%;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-line__ic,
.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-icons i {
    margin-left: 0;
    margin-right: 0;
}

.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-line {
    width: 100%;
    justify-content: center;
}

/* No modo serves-wide, manter 3px exatos entre ícone e texto */
.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-line {
    gap: 3px;
}

/* No serves-wide, o texto não pode ocupar 100% (senão o “início” desloca ao centralizar) */
.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-line__txt {
    flex: 0 0 auto;
    width: auto;
    text-align: left;
}

/* No modo "serves-wide", não deslocar o conteúdo no hover (mantém centralizado) */
.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline:hover .serves-line,
.product-card-v2--salg20 .product-card-v2__body-footer--serves-wide .product-card-v2__footer-center .serves-badge.serves-badge--textline.is-open .serves-line {
    transform: scale(1.05);
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__add-fab {
    grid-column: 2;
    grid-row: 1;
    position: absolute;
    /*
     * Compensa o scale do card: mantém a distância VISUAL até a borda direita.
     * (offset em px é aplicado antes do transform: scale()).
     */
    right: calc(var(--salg20-body-footer-fab-right) / var(--lv-card-scale, 1));
    top: 50%;
    bottom: auto;
    margin: 0;
    transform: translateY(-50%);
    z-index: 100;
}

/* Detalhes + +/-: borda direita da pilha = mesma do coração (.product-fav-btn--card-v2, right:10px); vertical ~centro do FAB */
.product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions {
    position: absolute;
    top: calc(
        100% - clamp(11px, 3vw, 14px) - (var(--salg20-fab-size) / 2 / var(--lv-card-scale, 1))
    );
    right: 10px;
    transform: translateY(-50%);
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0; /* sem espaço vertical entre “Detalhes” e quantidade rápida */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Sem cashback/SERVE: base da pilha (Detalhes + qty) a 10px da base do fundo branco do body */
.product-card-v2--salg20 .product-card-v2__body.product-card-v2__body--no-cb-no-serves > .product-card-v2__card-actions {
    top: auto;
    transform: none;
    bottom: 10px;
    margin-top: 0;
}

/* “Detalhes” e quantidade na mesma linha; eixo vertical alinhado (altura do botão vs. faixa +/-) */
.product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions .product-card-v2__card-actions-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions .product-card-v2__card-qty {
    position: relative;
    transform: none;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.1),
        0 3px 8px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

.product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions .product-card-v2__card-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    box-sizing: border-box;
    min-height: 32px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(8px, 2.1vw, 9px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    /* Mesmo tom do .product-card-v2__header (SALG20) */
    background: var(--pcv2-header-bg, var(--lv-header-solid));
    box-shadow:
        0 2px 6px rgba(183, 28, 28, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    line-height: 1.15;
}

.product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions .product-card-v2__card-details-btn:hover {
    filter: brightness(1.08);
}

.product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions .product-card-v2__card-details-btn:active {
    transform: scale(0.97);
}

.product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions .product-card-v2__card-details-btn i {
    font-size: clamp(9px, 2.4vw, 11px);
    opacity: 0.95;
}

/* Touch: evitar “hover pegajoso” no card inteiro (iOS mostrava Detalhes+/- ao tocar no header/imagem).
   Só rato fino usa ::hover no card; no telemóvel abre com .card-qty-reveal (FAB), focus-within ou hovers nos filhos (só rato). */
.product-card-v2--salg20.product-card-v2--no-addons .product-card-v2__card-actions:focus-within,
.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__card-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.product-card-v2--salg20.product-card-v2--card-actions-dismissed .product-card-v2__card-actions:focus-within {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20.product-card-v2--no-addons:hover .product-card-v2__card-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-actions-dismissed:hover .product-card-v2__card-actions,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-actions-dismissed:hover .product-card-v2__card-actions {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-actions-dismissed:has(.product-card-v2__add-fab:hover) .product-card-v2__card-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Com grupo obrigatório e já existe linha no carrinho com adicionais: pilha ao pairar no FAB (+), na faixa ou no botão detalhes (só rato fino) */
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready .product-card-v2__card-actions:focus-within,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__card-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__add-fab:hover) .product-card-v2__card-actions,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-qty:hover) .product-card-v2__card-actions,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-details-btn:hover) .product-card-v2__card-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Reveal (sem cashback / sem SERVE): direita alinhada ao coração; base da pilha a 10px do body */
.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body.product-card-v2__body--no-cb-no-serves > .product-card-v2__card-actions,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body.product-card-v2__body--no-cb-no-serves > .product-card-v2__card-actions {
    top: auto;
    right: 10px;
    transform: none;
    bottom: 10px;
    margin-top: 0;
    align-items: flex-end;
}

/* Mobile: com quantidade rápida aberta, fundo branco do body some já no 1.º toque (reveal + listener global corrigidos) */
@media (max-width: 767px) {
    .product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body.product-card-v2__body--no-cb-no-serves,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body.product-card-v2__body--no-cb-no-serves {
        background: transparent;
    }
}

/* Quantidade rápida aberta: FAB invisível / transparente (força sobre outras regras do card) */
.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__add-fab,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__add-fab,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .product-card-v2__add-fab {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Com OPÇÕES ± visível: rodapé sem faixa de fundo (não compete com a pilha de quantidade). */
.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body-footer,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body-footer,
.product-card-v2--salg20.product-card-v2--no-addons:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer {
    background: transparent !important;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20.product-card-v2--no-addons:hover .product-card-v2__body-footer,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready .product-card-v2__body-footer:hover,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__add-fab:hover) .product-card-v2__body-footer,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-qty:hover) .product-card-v2__body-footer,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-details-btn:hover) .product-card-v2__body-footer,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:hover) .product-card-v2__body-footer {
        background: transparent !important;
        box-shadow: none !important;
    }

    /*
     * Com obrigatórios preenchidos: com a pilha OPÇÕES ± visível (hover nos controlos), o FAB (+) fica transparente
     * mas continua a receber hover (mesmo padrão do no-addons no desktop) para não fechar a pilha à-toa.
     */
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__add-fab:hover) .product-card-v2__body-footer .product-card-v2__add-fab,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-qty:hover) .product-card-v2__body-footer .product-card-v2__add-fab,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-details-btn:hover) .product-card-v2__body-footer .product-card-v2__add-fab,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:hover) .product-card-v2__body-footer .product-card-v2__add-fab {
        opacity: 0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        transform: translateY(-50%) !important;
    }

    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__add-fab:hover) .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-qty:hover) .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-details-btn:hover) .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:hover) .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon {
        opacity: 0 !important;
        visibility: visible !important;
    }
}

/* Pilha Detalhes+/- visível: ocultar faixa "Possui CASHBACK" (login) para não competir visualmente com os controlos */
.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see,
.product-card-v2--salg20.product-card-v2--no-addons:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20.product-card-v2--no-addons:hover .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__add-fab:hover) .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-qty:hover) .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-details-btn:hover) .product-card-v2__body-footer .product-card-v2__cashback.product-card-v2__cashback--login-to-see {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Pilha Detalhes+/- visível: ocultar badge SERVE no rodapé (ex. serves-wide) para não competir com a pilha */
.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body-footer .serves-badge.serves-badge--textline,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body-footer .serves-badge.serves-badge--textline,
.product-card-v2--salg20.product-card-v2--no-addons:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .serves-badge.serves-badge--textline,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .serves-badge.serves-badge--textline {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20.product-card-v2--no-addons:hover .product-card-v2__body-footer .serves-badge.serves-badge--textline,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__add-fab:hover) .product-card-v2__body-footer .serves-badge.serves-badge--textline,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-qty:hover) .product-card-v2__body-footer .serves-badge.serves-badge--textline,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-details-btn:hover) .product-card-v2__body-footer .serves-badge.serves-badge--textline {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Idem: coluna central do rodapé — invisível e sem ocupar altura na grelha (serves-wide / req-addon) */
.product-card-v2--salg20.product-card-v2--no-addons.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__footer-center,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready.product-card-v2--card-qty-reveal .product-card-v2__body-footer .product-card-v2__footer-center,
.product-card-v2--salg20.product-card-v2--no-addons:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .product-card-v2__footer-center,
.product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:focus-within) .product-card-v2__body-footer .product-card-v2__footer-center {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20.product-card-v2--no-addons:hover .product-card-v2__body-footer .product-card-v2__footer-center,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__add-fab:hover) .product-card-v2__body-footer .product-card-v2__footer-center,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-qty:hover) .product-card-v2__body-footer .product-card-v2__footer-center,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-details-btn:hover) .product-card-v2__body-footer .product-card-v2__footer-center,
    .product-card-v2--salg20[data-v2-req-addons="1"].product-card-v2--req-addon-qty-ready:has(.product-card-v2__card-actions:hover) .product-card-v2__body-footer .product-card-v2__footer-center {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }
}

/* Desktop + rato: FAB só visualmente transparente ao pairar no card (área continua clicável p/ toggle) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .product-card-v2--salg20.product-card-v2--no-addons:hover .product-card-v2__body-footer .product-card-v2__add-fab {
        opacity: 0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        filter: none !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .product-card-v2--salg20.product-card-v2--no-addons:hover .product-card-v2__body-footer .product-card-v2__add-fab .product-card-v2__add-fab-icon {
        opacity: 0 !important;
        visibility: visible !important;
    }
}

/* Placeholder quando não há cashback: miniatura centrada na coluna (= --salg20-thumb) do rodapé */
.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__footer-spacer {
    width: var(--salg20-thumb);
    min-width: var(--salg20-thumb);
    max-width: var(--salg20-thumb);
    justify-self: center;
    box-sizing: border-box;
}

/* Cashback no rodapé do body: 3px entre conteúdo e borda interna do verde; largura fixa alinhada ao preview */
.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback {
    /* Alinha o CASHBACK à direita da coluna 1 para o gap virar “distância real” */
    justify-self: end;
    align-self: center;
    width: var(--salg20-body-footer-cashback-col);
    max-width: var(--salg20-body-footer-cashback-col);
    box-sizing: border-box;
    padding-left: 3px;
    padding-right: 3px;
}

/* SALG20: sem "SERVE DE..." → cashback cresce até a metade do FAB (+) */
.product-card-v2--salg20 .product-card-v2__body-footer--no-serves .product-card-v2__cashback.product-card-v2__cashback--fills-to-fab-half {
    --salg20-fab-half-reserve: calc(
        (var(--salg20-fab-size) / 2) + (var(--salg20-body-footer-fab-right) / var(--lv-card-scale, 1))
    );
    grid-column: 1 / 3;
    justify-self: start;
    width: calc(100% - var(--salg20-fab-half-reserve));
    max-width: calc(100% - var(--salg20-fab-half-reserve));
    /* Ajuste fino: alinha o centro visual com o FAB (+) */
    transform: translateY(3px);
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-inner {
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    /* Base única: reduzir só este valor para encolher ícone + textos proporcionalmente */
    font-size: 6.25px;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-label {
    left: 0;
    font-size: calc(1em + 2px);
    letter-spacing: 0.03em;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-possui {
    left: 0;
    font-size: calc(1em + 2px);
    letter-spacing: 0.02em;
    position: relative;
    display: inline-block;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-line {
    left: 0;
    font-size: calc(1.22em + 3px);
    letter-spacing: 0.025em;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    text-transform: none;
    color: rgba(3, 171, 87, 1);
    font-weight: 900;
    white-space: nowrap;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-line-label {
    font-size: calc(1em - 2px);
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-line-value {
    font-size: calc(1em + 2px);
    margin-left: 0.35ch;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-amount {
    font-size: calc(1.36em + 4px);
    margin-left: 1px;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-hint {
    font-size: calc(1em + 1px);
    margin-top: 0;
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback i {
    font-size: calc(1.68em + 4px);
}

/* Miniatura: mesma largura que --salg20-thumb (rodapé col. 1) */
.product-card-v2--salg20 .product-card-v2__media {
    flex: 0 0 var(--salg20-thumb);
    width: var(--salg20-thumb);
    max-width: var(--salg20-thumb);
    filter: none;
}

.product-card-v2--salg20 .product-card-v2__img {
    width: var(--salg20-thumb);
    height: var(--salg20-thumb);
    max-height: var(--salg20-thumb);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: none;
}

.product-card-v2--salg20 .product-card-v2__discount {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-size: 0.65rem;
    padding: 4px 7px;
    border-radius: 4px;
    /* desloca sem “estourar” o overflow do card */
    transform: translate(-7px, -7px) rotate(-8deg);
    background: #e53935;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, filter 0.15s ease;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20 .product-card-v2__media:hover .product-card-v2__discount,
    .product-card-v2--salg20:hover .product-card-v2__discount {
        transform: translate(-7px, -7px) rotate(-8deg) scale(1.12);
        filter: brightness(1.03);
    }
}

.product-card-v2--salg20 .product-card-v2__media-corner-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 28px;
    max-width: 22%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card-v2--salg20 .product-card-v2__media-corner-btn__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2--salg20 .product-card-v2__media-corner-btn:hover .product-card-v2__media-corner-btn__img {
        transform: scale(1.08);
        filter: brightness(1.05);
    }
}

.product-card-v2--salg20 .product-card-v2__media:hover .product-card-v2__media-corner-btn,
.product-card-v2--salg20 .product-card-v2__media:focus-within .product-card-v2__media-corner-btn {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.product-card-v2--salg20 .product-card-v2__gallery-controls {
    bottom: 3px;
    gap: 2px;
}

.product-card-v2--salg20 .product-card-v2__gallery-dot {
    background: #cbd5e1;
}

.product-card-v2--salg20 .product-card-v2__gallery-dot.is-active {
    background: #fff;
}

.product-card-v2--salg20 .product-card-v2__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.product-card-v2--salg20 .product-card-v2__desc {
    margin-bottom: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--lv-body-text);
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-v2--salg20 .product-card-v2__install-row {
    justify-content: center;
    width: 100%;
    gap: 8px;
    margin-bottom: 6px;
}

.product-card-v2--salg20 .product-card-v2__install {
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--lv-install);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: currentColor;
}

.product-card-v2--salg20 .product-card-v2__install-prefix {
    font-size: 12px;
    color: var(--lv-install);
}

/*
 * 20 Salgadinhos — valor da parcela (ex. 7,30):
 * Tailwind font-extrabold (800) + leading-none (line-height: 1)
 */
.product-card-v2--salg20 .product-card-v2__install .product-card-v2__install-value {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lv-install);
    display: inline-block;
    vertical-align: baseline;
}

.product-card-v2--salg20 .product-card-v2__install-ic {
    color: var(--lv-muted);
    font-size: 0.95rem;
}

.product-card-v2--salg20 .product-card-v2__from {
    color: var(--lv-install-dark);
    font-size: 0.78rem;
    font-weight: 700;
}

.product-card-v2--salg20 .product-card-v2__price-row {
    justify-content: center;
    align-items: baseline;
    width: 100%;
    gap: 8px 10px;
}

.product-card-v2--salg20 .product-card-v2__old {
    font-size: 10px;
    color: var(--lv-muted);
}

.product-card-v2--salg20 .product-card-v2__price {
    font-size: 13px;
    font-weight: 800;
    color: rgba(134, 131, 131, 1);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.product-card-v2--salg20 .product-card-v2__pay-icons {
    gap: 8px;
    color: var(--lv-muted);
    font-size: 0.95rem;
}

/*
 * Rodapé 20 Salgadinhos — layoutnovo (referência local):
 * CASHBACK #E8F5E9 / borda verde vivo / texto principal rgba(3,171,87), raio 8px;
 * SERVE #F3F4F6 / borda #D1D5DB / texto #374151, raio 8px, faixa cinza sob o FAB (+);
 * FAB z-index acima do badge SERVE.
 */
.product-card-v2--salg20 .product-card-v2__footer {
    align-items: flex-end;
    gap: 8px;
    margin-top: -12px;
    /* 30px até a borda direita do card: faixa cinza + FAB na área útil */
    padding: 8px 30px 12px 12px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
    position: relative;
    z-index: 0;
}

.product-card-v2--salg20 .product-card-v2__footer-center {
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 0;
    position: relative;
    z-index: 0;
    margin-right: 0;
}

.product-card-v2--salg20 .product-card-v2__cashback {
    flex: 0 1 auto;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    padding: 0 12px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(8, 231, 105, 1);
    background: #e8f5e9;
    color: rgba(3, 171, 87, 1);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: inherit;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.product-card-v2--salg20 .product-card-v2__cashback-label {
    font-size: 5.5px;
    line-height: 9.2px;
    position: relative;
    left: -2px;
    display: inline-block;
}

.product-card-v2--salg20 .product-card-v2__cashback-possui {
    font-size: 5.5px;
    line-height: 9.2px;
    position: relative;
    left: -2px;
    display: inline-block;
    color: rgba(3, 171, 87, 1);
    font-weight: 900;
}

.product-card-v2--salg20 .product-card-v2__cashback-line {
    font-size: 9px;
    line-height: 14.2px;
    position: relative;
    left: -2px;
    display: inline-flex;
    align-items: baseline;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: rgba(3, 171, 87, 1);
    text-transform: none;
    white-space: nowrap;
}

.product-card-v2--salg20 .product-card-v2__cashback-line-label {
    font-size: calc(1em - 2px);
}

.product-card-v2--salg20 .product-card-v2__cashback-line-value {
    font-size: calc(1em + 2px);
    font-weight: 800;
    margin-left: 0.35ch;
}

.product-card-v2--salg20 .product-card-v2__cashback-amount {
    font-size: 11px;
    line-height: 14.2px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(3, 171, 87, 1);
}

.product-card-v2--salg20 .product-card-v2__cashback i {
    font-size: 14px;
    color: rgba(3, 171, 87, 1);
    line-height: 14.5px;
}

.product-card-v2--salg20 .product-card-v2__cashback--muted {
    border-color: #a5d6a7;
    background: #e8f5e9;
    color: #1b5e20;
}

/*
 * SERVE 20 Salgadinhos — espelha utilitários Tailwind:
 * border rounded-lg flex items-center justify-center px-1 shadow-sm
 * bg-gray-50 border-gray-300 h-8 hover:scale-105 transition-transform cursor-pointer
 * (scale no .serves-line para não conflitar com transform do tooltip ::after)
 */
.product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 10px 0 9px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    max-width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* No rodapé do body: +30px de largura horizontal (~154px → 184px); conteúdo centrado na faixa */
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline {
    /*
     * Regra principal: manter SEMPRE 10px entre o CASHBACK (à esquerda) e o SERVE (à direita),
     * em qualquer responsivo. Isso é garantido pelo column-gap: 10px do grid do body-footer.
     * Então aqui o SERVE deve começar na esquerda da coluna 2 (sem auto-margins).
     */
    width: clamp(184px, 52vw, 260px);
    min-width: 184px;
    max-width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    /* +3px vs faixa do footer: alinha ícone + texto SERVE ligeiramente à direita */
    padding-left: 17px;
}

.product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline .serves-line,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    transition: transform 0.15s ease;
    transform-origin: center;
}

.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line {
    justify-content: center;
}

/* Ajuste fino: arrasta a linha "SERVE ..." 7px à esquerda no body-footer */
.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__footer-center .serves-badge.serves-badge--textline .serves-line {
    position: relative;
    left: -7px;
}

.product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline:hover .serves-line,
.product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline.is-open .serves-line,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline:hover .serves-line,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline.is-open .serves-line {
    transform: none;
}

/* No rodapé do body (mobile/touch): não desloca horizontalmente para não variar a distância da borda */
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline:hover .serves-line,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline.is-open .serves-line {
    transform: none;
}

.product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__ic,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line__ic {
    font-size: 10px;
    color: #374151;
    flex-shrink: 0;
    line-height: 1;
}

.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline:hover .serves-line__ic,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline.is-open .serves-line__ic {
    display: inline-block;
    transform: none;
}

.product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__txt,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line__txt {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.15;
    color: #374151;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1 1 auto;
    min-width: 0;
}

/* No rodapé do body, o texto deve começar a 3px do ícone (não centralizar dentro de 100% da largura) */
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line__txt {
    flex: 0 0 auto;
    width: auto;
    text-align: left;
}

.product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__num,
.product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line__num {
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--pcv2-serves-num-color, #c62828);
}

.product-card-v2--salg20 .serves-badge::after {
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(4px);
    max-width: 240px;
    width: max-content;
    padding: 12px 16px;
    border-radius: 0.5rem;
    background: #000000;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10050;
}

.product-card-v2--salg20 .serves-badge::before {
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    border-width: 7px;
    border-top-color: #000000;
    z-index: 10050;
}

.product-card-v2--salg20 .serves-badge:hover::after,
.product-card-v2--salg20 .serves-badge.is-open::after {
    transform: translateX(-50%) translateY(0);
}

/* FAB — sempre por cima do fundo cinza (print / layoutnovo) */
.product-card-v2--salg20 .product-card-v2__add-fab {
    width: var(--salg20-fab-size);
    height: var(--salg20-fab-size);
    right: 8px;
    bottom: 10px;
    background: var(--pcv2-fab-bg, linear-gradient(180deg, #ff5f52 0%, #e53935 42%, #c62828 78%, #b71c1c 100%));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.18);
    border: none;
    position: absolute;
    z-index: 100;
    isolation: isolate;
    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.22s ease;
}

.product-card-v2--salg20 .product-card-v2__add-fab:hover {
    transform: scale(1.03);
    filter: brightness(1.03);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.22);
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__add-fab:hover {
    transform: translateY(-50%) scale(1.03);
}

.product-card-v2--salg20 .product-card-v2__add-fab:active {
    transform: scale(0.94);
    filter: brightness(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__add-fab:active {
    transform: translateY(-50%) scale(0.94);
}

@media (max-width: 767px) {
    .product-card-v2--salg20 .product-card-v2__body {
        padding: 14px 14px 64px;
        --salg20-body-inset-x: 14px;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer {
        left: 14px;
        right: 14px;
        bottom: 14px;
        gap: 8px 10px;
        align-items: center;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__add-fab {
        grid-column: 2;
        grid-row: 1;
        position: absolute;
        right: calc(var(--salg20-body-footer-fab-right) / var(--lv-card-scale, 1));
        top: 50%;
        bottom: auto;
        margin: 0;
        transform: translateY(-50%);
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__footer-center {
        /*
         * Reserva o espaço do FAB para o fundo do SERVE não invadir:
         * até a metade do FAB + offset da borda direita.
         */
        padding-right: calc(
            (var(--salg20-fab-size) / 2) + (var(--salg20-body-footer-fab-right) / var(--lv-card-scale, 1))
        );
        box-sizing: border-box;
    }

    /* Coluna: mídia à esquerda como no desktop, para o cashback (grid col. 1) ficar sob a imagem */
    .product-card-v2--salg20 .product-card-v2__media {
        flex: none;
        width: var(--salg20-thumb);
        max-width: var(--salg20-thumb);
        align-self: flex-start;
        margin-left: 0;
        margin-right: 0;
    }

    .product-card-v2--salg20 .product-card-v2__img {
        width: var(--salg20-thumb);
        height: var(--salg20-thumb);
        max-height: var(--salg20-thumb);
    }

    .product-card-v2--salg20 .product-card-v2__footer {
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: -12px;
        padding: 8px 30px 12px 10px;
    }

    .product-card-v2--salg20 .product-card-v2__footer-center {
        flex: 1 1 auto;
        justify-content: flex-start;
        min-width: 0;
    }

    .product-card-v2--salg20 .product-card-v2__cashback {
        box-sizing: border-box;
        padding: 0 10px;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback {
        padding-left: 3px;
        padding-right: 3px;
    }

    .product-card-v2--salg20 .product-card-v2__cashback-inner {
        gap: 5px;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-inner {
        gap: 3px;
        font-size: 6.25px;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-label {
        font-size: calc(1em + 2px);
        line-height: 1.2;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-possui {
        font-size: calc(1em + 2px);
        line-height: 1.2;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-line {
        font-size: calc(1.22em + 3px);
        line-height: 1.2;
        text-transform: none;
        display: inline-flex;
        align-items: baseline;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-line-label {
        font-size: calc(1em - 2px);
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-line-value {
        font-size: calc(1em + 2px);
        margin-left: 0.35ch;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback-amount {
        font-size: calc(1.36em + 4px);
        line-height: 1.2;
        margin-left: 1px;
    }

    .product-card-v2--salg20 .product-card-v2__body-footer .product-card-v2__cashback i {
        font-size: calc(1.68em + 4px);
        line-height: 1.2;
    }

    .product-card-v2--salg20 .product-card-v2__cashback-label {
        font-size: 5.5px;
        line-height: 9.2px;
    }

    .product-card-v2--salg20 .product-card-v2__cashback-amount {
        font-size: 11px;
        line-height: 14.2px;
    }

    .product-card-v2--salg20 .product-card-v2__cashback-line {
        font-size: 9px;
        line-height: 14.2px;
        display: inline-flex;
        align-items: baseline;
    }

    .product-card-v2--salg20 .product-card-v2__cashback-line-label {
        font-size: calc(1em - 2px);
    }

    .product-card-v2--salg20 .product-card-v2__cashback-line-value {
        font-size: calc(1em + 2px);
        margin-left: 0.35ch;
    }

    .product-card-v2--salg20 .product-card-v2__cashback i {
        font-size: 13px;
        line-height: 14.5px;
    }

    .product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline,
    .product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline {
        margin-top: 0;
        width: auto;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        padding: 0 10px 0 9px;
    }

    .product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__txt,
    .product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line__txt {
        font-size: 7.5px;
        line-height: 1.15;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .product-card-v2--salg20 .product-card-v2__footer .serves-badge.serves-badge--textline .serves-line__num,
    .product-card-v2--salg20 .product-card-v2__body-footer .serves-badge.serves-badge--textline .serves-line__num {
        font-size: 10px;
    }

    .product-card-v2--salg20 .product-card-v2__add-fab {
        right: 8px;
        bottom: 10px;
        width: var(--salg20-fab-size);
        height: var(--salg20-fab-size);
    }

    /* Detalhes + quantidade: direita = coração do header (10px); base junto ao rodapé do body */
    .product-card-v2--salg20 .product-card-v2__body > .product-card-v2__card-actions {
        top: auto;
        transform: none;
        bottom: clamp(11px, 3vw, 14px);
        right: 10px;
        align-items: flex-end;
        max-width: calc(100% - var(--salg20-fab-size) - 20px);
    }

    .product-card-v2--salg20 .serves-badge::after {
        transform: translateX(-50%) translateY(4px);
    }

    .product-card-v2--salg20 .serves-badge:hover::after,
    .product-card-v2--salg20 .serves-badge.is-open::after {
        transform: translateX(-50%) translateY(0);
    }
}

@media (min-width: 768px) {
    .product-card-v2--salg20 .product-card-v2__media {
        flex: 0 0 var(--salg20-thumb);
        width: var(--salg20-thumb);
        max-width: var(--salg20-thumb);
    }

    .product-card-v2--salg20 .product-card-v2__img {
        width: var(--salg20-thumb);
        height: var(--salg20-thumb);
        max-height: var(--salg20-thumb);
    }
}

@media (min-width: 1024px) {
    .product-card-v2--salg20 .product-card-v2__desc {
        font-size: 0.8125rem;
    }

    .product-card-v2--salg20 .product-card-v2__title {
        font-size: 1.05rem;
    }
}

/* Product List */
.product-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s;
}

.product-item:hover {
    transform: translateY(-2px);
}

.product-info {
    flex: 1;
    padding-right: 15px;
}

.product-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 5px;
}

.product-desc {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    font-weight: 700;
    color: #000000;
}

.product-image-container {
    width: 90px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative; /* necessário para overlays (ícones) */
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-to-cart-btn-pill {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

/* Modal / Cart Drawer */
.cart-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    /*
     * Base abaixo do drawer aberto (.hm-cart-open → 12800).
     * Fechado: só precisa ficar acima do toolbar (1985) e bottom-nav (1995).
     */
    z-index: 2100;
    display: none;
    justify-content: flex-end;
    pointer-events: none;
}

.cart-modal.hm-cart-open {
    pointer-events: auto;
}

.cart-sidebar {
    width: 100%;
    max-width: 420px;
    background: white;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.cart-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

#cart-modal #cart-view > .cart-header {
    height: 40px;
    min-height: 40px;
    padding: 0 var(--hm-cart-shell-pad, 14px);
    box-sizing: border-box;
    background: #f8f9fa;
    border-bottom: 1px solid #eef1f4;
    gap: 8px;
}

#cart-modal #cart-view > .cart-header h3 {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1rem;
    line-height: 1;
    justify-content: flex-start;
}

#cart-modal #cart-view > .cart-header h3 .fa-cart-shopping {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 1;
    color: #0F172A;
    flex: 0 0 auto;
}

#cart-modal #cart-view > .cart-header .cart-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: auto;
}

#cart-modal #cart-view > .cart-header .cart-header__cashback-chip {
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 6px 10px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #86efac;
    background: #ecfdf5;
    color: #166534;
    white-space: nowrap;
}

#cart-modal #cart-view > .cart-header .cart-header__cashback-chip[hidden] {
    display: none !important;
}

#cart-modal #cart-view > .cart-header .cart-header__cashback-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.03em;
    color: #15803d;
    line-height: 1.2;
}

#cart-modal #cart-view > .cart-header .cart-header__cashback-amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #15803d;
    white-space: nowrap;
}

#cart-modal #cart-view > .cart-header .cart-header__cashback-amount > i.fa-solid {
    font-size: 12px;
    line-height: 10.2px;
    width: 12px;
    height: 12px;
    color: #15803d;
    flex: 0 0 auto;
    align-self: baseline;
}

#cart-modal #cart-view > .cart-header #cart-header-cashback-value {
    color: #15803d;
    font-size: calc(0.68rem + 2px);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#cart-modal #cart-view > .cart-header button {
    padding: 0;
    line-height: 1;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.cart-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}

#cart-modal #cart-view .cart-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin-top: -5px;
    padding: 8px var(--hm-cart-shell-pad, 14px);
    background: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-top: none;
    outline: none;
}

/* Mobile: drawer encaixa na visualViewport (barra do Safari/Chrome não corta o rodapé) */
@media (max-width: 768px) {
    .cart-modal.hm-cart-open {
        left: 0;
        right: 0;
        top: var(--hm-cart-vt, 0px);
        justify-content: flex-start;
        /* JS (--hm-cart-vb) + fallback CSS quando visualViewport ainda reporta altura cheia */
        bottom: max(
            var(--hm-cart-vb, 0px),
            calc(100dvh - 100svh),
            calc(100vh - 100svh),
            env(safe-area-inset-bottom, 0px)
        );
        height: auto;
        max-height: none;
    }

    .cart-modal.hm-cart-open .cart-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0;
        margin-left: 0;
    }

    #cart-modal #cart-view,
    #cart-modal #checkout-view {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    #cart-modal #cart-view {
        display: flex;
        flex-direction: column;
    }

    #cart-modal #cart-view .cart-footer,
    #cart-modal #checkout-footer.cart-footer {
        position: sticky;
        bottom: 0;
        z-index: 12;
        flex-shrink: 0;
        padding-bottom: calc(0px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-top: none;
        outline: none;
    }

    body.hm-checkout-standalone-page #cart-modal.hm-cart-open {
        top: var(--hm-cart-vt, 0px);
        bottom: max(
            var(--hm-cart-vb, 0px),
            calc(100dvh - 100svh),
            calc(100vh - 100svh),
            env(safe-area-inset-bottom, 0px)
        );
        height: auto;
        max-height: none;
    }

    body.hm-checkout-standalone-page #cart-modal .cart-sidebar {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0;
    }

    body.hm-checkout-standalone-page #cart-modal #cart-view,
    body.hm-checkout-standalone-page #cart-modal #checkout-view {
        max-height: 100%;
    }

    /* No carrinho mobile, o rodape precisa encostar no fim da viewport. */
    #cart-modal.hm-cart-open:has(#cart-view:not([style*="display: none"])) {
        bottom: 0;
    }

    body.hm-checkout-standalone-page #cart-modal.hm-cart-open:has(#cart-view:not([style*="display: none"])) {
        bottom: 0;
    }
}

#free-delivery-progress.free-delivery-progress {
    position: relative;
    margin-bottom: 12px;
    padding: 10px 34px 10px 12px;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #eef1f4;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.1);
    overflow: visible;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

#free-delivery-progress.free-delivery-progress.is-active.is-revealed {
    background: #f8f9fa;
    border-color: #eef1f4;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.1);
}

#free-delivery-progress.is-celebrating:not(.is-revealed) {
    background: #f8f9fa;
    border-color: #eef1f4;
}

/* Slide do caminhão: véu em tela cheia; banner permanece no cross-sell (position:fixed) acima do véu */
#free-delivery-progress.is-truck-enter:not(.is-revealed)::after {
    display: none !important;
    content: none !important;
}

#cart-modal.hm-free-delivery-truck-scrim {
    z-index: 12950 !important;
}

/* Véu em tela cheia: no body, acima do drawer (12950) e abaixo do banner pinado (12960) */
.hm-free-delivery-truck-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 12952;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.hm-free-delivery-truck-backdrop.is-visible {
    opacity: 1;
}

body.hm-free-delivery-truck-scrim-active {
    overflow: hidden;
}

#cart-modal.hm-free-delivery-truck-scrim #free-delivery-progress.is-truck-enter,
#cart-modal.hm-free-delivery-truck-scrim #free-delivery-progress[data-hm-truck-scrim-pinned="1"],
body.hm-free-delivery-truck-scrim-active #free-delivery-progress.hm-truck-scrim-elevated,
body.hm-free-delivery-truck-scrim-active #free-delivery-progress[data-hm-truck-scrim-pinned="1"] {
    z-index: 12960 !important;
    isolation: isolate;
}

#cart-modal.hm-free-delivery-truck-scrim #free-delivery-progress.is-truck-enter:not(.is-revealed) {
    isolation: isolate;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-progress-close {
    z-index: 3;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) #freeDeliveryProgressRow,
#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-progress-bar,
#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-progress-text {
    position: relative;
    z-index: 1;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-truck-wrap.is-truck-entering {
    position: relative;
    z-index: 2;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed):not(.is-truck-arrival-visible):not(.is-truck-chrome-revealing) #free-delivery-check-icon,
#free-delivery-progress.is-truck-enter:not(.is-revealed):not(.is-truck-arrival-visible):not(.is-truck-chrome-revealing) .free-delivery-active-label {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#free-delivery-progress.is-truck-enter.is-truck-chrome-revealing:not(.is-truck-arrival-visible) #free-delivery-check-icon,
#free-delivery-progress.is-truck-enter.is-truck-chrome-revealing:not(.is-truck-arrival-visible) .free-delivery-active-label,
#free-delivery-progress.is-truck-enter.is-truck-chrome-revealing:not(.is-truck-arrival-visible) .hm-fd-label-char {
    pointer-events: none !important;
}

#free-delivery-progress.is-truck-enter.is-truck-chrome-revealing:not(.is-truck-arrival-visible) .hm-fd-label-char {
    display: inline-block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    color: #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
    text-shadow: none !important;
    transition: none !important;
}

#free-delivery-progress.is-truck-enter.is-truck-chrome-revealing:not(.is-truck-arrival-visible) .hm-fd-label-char.is-char-visible {
    visibility: visible !important;
    opacity: 1 !important;
}

#free-delivery-progress.is-truck-enter.is-truck-chrome-revealing:not(.is-truck-arrival-visible) #free-delivery-check-icon {
    transition: none !important;
    transform: none;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter.is-truck-chrome-revealing:not(.is-truck-arrival-visible) .hm-fd-label-char {
    color: #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
}

.free-delivery-active-label .hm-fd-label-char {
    display: inline-block;
}

.free-delivery-active-label .hm-fd-label-char.is-space {
    min-width: 0.28em;
}

/* Fim do slide: com véu preto, inner colorido por 1s */
#free-delivery-progress.is-truck-arrival-visible #freeDeliveryProgressInner,
#free-delivery-progress.is-truck-arrival-visible.is-truck-enter #freeDeliveryProgressInner {
    position: relative;
    z-index: 3;
}

#free-delivery-progress.is-truck-arrival-visible #free-delivery-check-icon,
#free-delivery-progress.is-truck-arrival-visible .free-delivery-active-label {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

#free-delivery-progress.is-truck-arrival-visible .free-delivery-active-label {
    color: #16a34a !important;
    -webkit-text-fill-color: #16a34a !important;
    text-shadow: 0 0 14px rgba(46, 204, 113, 0.45) !important;
}

#free-delivery-progress.is-truck-arrival-visible #free-delivery-check-icon {
    color: #22c55e !important;
    -webkit-text-fill-color: #22c55e !important;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.55));
    transform: none;
}

#free-delivery-progress.is-truck-arrival-visible .free-delivery-truck-wrap.is-settled .free-delivery-truck-icon {
    filter: drop-shadow(0 1px 3px rgba(27, 155, 82, 0.55)) !important;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-active-label {
    color: #bbf7d0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) #free-delivery-check-icon {
    color: #bbf7d0 !important;
}

/* Transição 0→100%: preenchimento verde (não cinza de is-celebrating) */
#free-delivery-progress.is-truck-enter:not(.is-revealed) #freeDeliveryProgressBar,
#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-progress-bar {
    background: rgba(39, 174, 96, 0.18) !important;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) #freeDeliveryProgressFill,
#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-progress-fill {
    background: linear-gradient(90deg, #1e9b52 0%, #27ae60 38%, #2ecc71 72%, #58d68d 100%) !important;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.42) !important;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) #freeDeliveryProgressPercent,
#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-progress-percent {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.45) !important;
}

#free-delivery-progress.is-truck-enter:not(.is-revealed) .free-delivery-truck-icon,
#free-delivery-progress.is-truck-arrival-visible .free-delivery-truck-wrap .free-delivery-truck-icon {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

#free-delivery-progress.free-delivery-progress.is-glow-pulse {
    animation: hmFreeDeliveryGlow 0.9s ease-out;
}

@keyframes hmFreeDeliveryGlow {
    0% { box-shadow: 0 0 0 rgba(39, 174, 96, 0); }
    40% { box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.18), 0 8px 24px rgba(39, 174, 96, 0.12); }
    100% { box-shadow: 0 0 0 rgba(39, 174, 96, 0); }
}

.free-delivery-confetti {
    position: absolute;
    left: 0;
    top: -8px;
    width: 100%;
    height: calc(100% + 16px);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

.free-delivery-confetti.is-running {
    opacity: 1;
}

.free-delivery-progress-text,
#freeDeliveryProgressRow {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem;
    font-weight: 700;
    color: #5c6b7a;
    margin-bottom: 8px;
    min-height: 22px;
    text-align: center;
}

#freeDeliveryProgressText {
    display: inline;
    flex: 0 1 auto;
    min-height: 22px;
    font-size: calc(1em - 1px);
    text-align: center;
    white-space: nowrap;
}

#cart-modal #free-delivery-progress #freeDeliveryProgressRow,
#cart-modal #free-delivery-progress #freeDeliveryProgressInner,
#cart-modal #free-delivery-progress #freeDeliveryProgressText {
    white-space: nowrap;
    max-width: 100%;
}

#cart-modal #free-delivery-progress .free-delivery-progress-text {
    overflow: visible;
}

#cart-modal #free-delivery-progress #freeDeliveryProgressInner {
    justify-content: center;
    overflow: visible;
    max-width: 100%;
}

#cart-modal #free-delivery-progress #freeDeliveryProgressRow {
    overflow: visible;
}

#cart-modal #free-delivery-progress #freeDeliveryProgressText .free-delivery-gratis-label {
    letter-spacing: 0.015em;
}

#cart-modal #free-delivery-progress .free-delivery-active-label {
    font-size: 0.87em;
}

.hm-money-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
    white-space: nowrap;
}

.hm-money-currency,
.hm-money-amount {
    display: inline-block;
    line-height: 1;
}

#freeDeliveryProgressText .free-delivery-falta-value {
    display: inline-flex;
    font-weight: 700;
    font-size: calc(1em + 2px);
    color: var(--pcv2-header-solid, #e53935);
}

#freeDeliveryProgressText .free-delivery-gratis-label {
    display: inline;
    color: #1b9b52;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#free-delivery-progress.is-active.is-revealed .free-delivery-progress-text {
    color: #1b8a4a;
}

#free-delivery-progress.is-celebrating:not(.is-revealed) .free-delivery-progress-text {
    color: #9ca3af;
}

.free-delivery-progress-icon,
#free-delivery-check-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1.05rem;
    color: #27ae60;
    line-height: 1;
    transition: color 0.35s ease;
}

/* Antes de atingir entrega grátis: sem check no layout */
#free-delivery-progress:not(.is-active):not(.is-truck-enter):not(.is-truck-arrival-visible):not(.is-celebrating) #free-delivery-check-icon,
#free-delivery-progress:not(.is-active):not(.is-truck-enter):not(.is-truck-arrival-visible):not(.is-celebrating) #free-delivery-check-icon[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

#free-delivery-progress.is-celebrating:not(.is-revealed) .free-delivery-progress-icon {
    color: #9ca3af;
}

.free-delivery-progress-icon[hidden],
.free-delivery-truck-wrap[hidden] {
    display: none !important;
}

.free-delivery-truck-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    overflow: visible;
    align-self: center;
}

.free-delivery-truck-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #1b9b52;
    text-stroke: 1px #1b9b52;
    paint-order: stroke fill;
    filter: drop-shadow(0 1px 2px rgba(27, 155, 82, 0.22));
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

@keyframes hmTruckTextSlide {
    from {
        transform: translateX(var(--hm-truck-from, -40px));
        opacity: 0.35;
    }
    to {
        transform: translateX(var(--hm-truck-to, 6px));
        opacity: 1;
    }
}

.free-delivery-progress-bar .free-delivery-truck-wrap,
.free-delivery-progress-bar .free-delivery-truck-clone {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.free-delivery-progress-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
    min-height: 22px;
}

#free-delivery-progress.is-truck-enter .free-delivery-progress-inner,
#free-delivery-progress.is-truck-arrival-visible .free-delivery-progress-inner,
#free-delivery-progress.is-celebrating .free-delivery-progress-inner,
#free-delivery-progress.is-active .free-delivery-progress-inner {
    align-items: center;
    gap: 3px;
    min-height: 0;
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
}

#free-delivery-progress.is-active #freeDeliveryProgressText {
    display: inline;
    width: auto;
    padding: 0;
    margin: 0;
}

#free-delivery-progress.is-active .free-delivery-active-label {
    margin: 0;
    padding: 0;
    align-self: center;
    align-items: center;
    min-height: 0;
    height: auto;
    line-height: 1;
}

#free-delivery-progress.is-active #freeDeliveryProgressText {
    align-self: center;
    display: inline-flex;
    align-items: center;
}

#free-delivery-progress.is-active .free-delivery-truck-wrap {
    margin: 0;
    align-self: center;
    align-items: center;
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    overflow: visible;
    transform: translateX(6px);
}

#free-delivery-progress.is-active #free-delivery-check-icon,
#free-delivery-progress.is-truck-enter #free-delivery-check-icon,
#free-delivery-progress.is-truck-arrival-visible #free-delivery-check-icon,
#free-delivery-progress.is-celebrating #free-delivery-check-icon {
    align-self: center;
    transform: none;
}

#free-delivery-progress.is-truck-enter .free-delivery-progress-inner .free-delivery-truck-wrap.is-truck-entering:not([hidden]) {
    animation: hmTruckTextSlide 3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

#free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering,
#free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering .free-delivery-truck-icon {
    transition: none;
}

#free-delivery-progress.is-active .free-delivery-truck-wrap.is-settled:not([hidden]),
#free-delivery-progress.is-truck-arrival-visible .free-delivery-truck-wrap.is-settled:not([hidden]) {
    position: static;
    margin: 0 0 0 3px;
    transform: none;
    animation: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.free-delivery-active-label {
    display: inline-flex;
    align-items: center;
    color: #1b9b52;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    min-height: 24px;
    transition: color 0.35s ease;
}

#free-delivery-progress.is-celebrating:not(.is-revealed) .free-delivery-active-label {
    color: #9ca3af;
}

.free-delivery-progress-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 15px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
}

#free-delivery-progress.is-active.is-revealed .free-delivery-progress-bar {
    background: rgba(39, 174, 96, 0.15);
}

.free-delivery-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #27ae60 0%, #2ecc71 55%, #58d68d 100%);
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, box-shadow 0.35s ease;
    box-shadow: none;
}

.free-delivery-progress-percent {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
}

#free-delivery-progress.is-celebrating:not(.is-revealed) .free-delivery-progress-fill {
    background: linear-gradient(90deg, #c5ccd3 0%, #d1d5db 100%);
    box-shadow: none;
}

#free-delivery-progress.is-active.is-revealed .free-delivery-progress-fill {
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    #free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering {
        animation: none;
        transform: translateX(9px);
        opacity: 1;
    }

    #free-delivery-progress.is-glow-pulse {
        animation: none;
    }

    .free-delivery-progress-fill {
        transition: width 0.15s ease;
    }
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.btn-checkout {
    width: 100%;
    background: var(--primary-color);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

#cart-modal #cart-view .cart-footer-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: -5px;
}

#cart-modal #cart-view .cart-footer-actions .btn-checkout {
    flex: 1;
    width: auto;
    min-width: 0;
    margin: 0;
}

#cart-modal #cart-view .cart-footer-actions .btn-checkout-continue {
    background: #fff;
    color: var(--pcv2-header-solid, #e53935);
    border: 1px solid var(--pcv2-header-solid, #e53935);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

#cart-modal #cart-view .cart-footer-actions .btn-checkout-finish {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
    color: #fff;
    border: 1px solid var(--pcv2-header-solid-end, #b71c1c);
    box-shadow: none;
    transform-origin: center;
    animation: hmWzCtaHeartbeat 1.25s ease-in-out infinite;
    transition: filter 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#cart-modal #cart-view .cart-footer-actions .btn-checkout-finish::before {
    display: none !important;
    content: none !important;
    animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
    #cart-modal #cart-view .cart-footer-actions .btn-checkout-finish:hover {
        animation-play-state: paused;
        box-shadow: none;
        filter: brightness(1.02);
        transform: scale(1.03);
    }
    #cart-modal #cart-view .cart-footer-actions .btn-checkout-continue:hover {
        transform: scale(1.04);
    }
    #cart-modal .cross-sell-add:hover {
        transform: scale(1.04);
        filter: brightness(1.06);
    }
    #cart-modal .cart-item .cart-item-remove-btn:hover {
        transform: scale(1.12);
    }
    #checkout-form .hm-checkout-balance-card__auth-btn:hover {
        transform: scale(1.1);
    }
    #checkout-form .hm-checkout-benefit-card__cta-pill:hover {
        transform: scale(1.1);
    }
    #checkout-form .hm-checkout-coupon-strip__ticket:hover {
        transform: scale(1.1) translateY(-2px);
    }
}

#cart-modal #cart-view .cart-footer-actions .btn-checkout-finish:active {
    animation-play-state: paused;
    box-shadow: none;
    transform: scale(0.98);
    filter: brightness(1.05);
}

@keyframes hmWzCtaHeartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.06); }
    20% { transform: scale(1); }
    35% { transform: scale(1.045); }
    50% { transform: scale(1); }
    100% { transform: scale(1); }
}

@keyframes hmWzCtaShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    #cart-modal #cart-view .cart-footer-actions .btn-checkout-finish {
        animation: none;
    }
}

/* Rodapé do carrinho lateral: layout compacto */
#cart-modal #cart-view .cart-footer #free-delivery-progress.free-delivery-progress {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 8px;
    padding: 5px 8px 6px;
    border-radius: 10px;
}

#cart-modal #cart-view .cart-footer #free-delivery-progress.is-active {
    padding: 6px 8px 6px;
}

#cart-modal #cart-view .cart-footer #free-delivery-progress.is-active .free-delivery-progress-text,
#cart-modal #cart-view .cart-footer #free-delivery-progress.is-active #freeDeliveryProgressRow {
    padding-right: 22px;
    box-sizing: border-box;
}

.free-delivery-progress-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: #0F172A;
    -webkit-text-fill-color: #0F172A;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
}

.free-delivery-progress-close[hidden] {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .free-delivery-progress-close:hover {
        background: none;
        color: #0F172A;
        -webkit-text-fill-color: #0F172A;
    }
}

.free-delivery-progress-close:active {
    background: none;
}

#cart-modal #cart-view .cart-footer .free-delivery-progress-text,
#cart-modal #cart-view .cart-footer #freeDeliveryProgressRow {
    align-self: center;
    margin-bottom: 4px;
    min-height: 0;
    gap: 4px;
    font-size: 0.76rem;
    width: 100%;
    max-width: 100%;
    padding-right: 22px;
    box-sizing: border-box;
}

#cart-modal #cart-view .cart-footer #freeDeliveryProgressText {
    display: block;
    width: 100%;
    min-height: 0;
    line-height: 1.15;
    font-size: inherit;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

#cart-modal #cart-view .cart-footer #freeDeliveryProgressText .free-delivery-falta-value {
    font-size: 0.8rem;
}

#cart-modal #cart-view .cart-footer #freeDeliveryProgressText .free-delivery-gratis-label {
    letter-spacing: 0.01em;
    font-size: 0.73rem;
}

#cart-modal #cart-view .cart-footer .free-delivery-progress-icon,
#cart-modal #cart-view .cart-footer #free-delivery-check-icon,
#cart-modal #cart-view .cart-footer .free-delivery-truck-wrap {
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    align-self: flex-end;
}

#cart-modal #cart-view .cart-footer .free-delivery-truck-icon {
    width: 13px;
    height: 13px;
    font-size: 13px;
    -webkit-text-stroke: 1px #1b9b52;
    text-stroke: 1px #1b9b52;
}

#cart-modal #cart-view .cart-footer .free-delivery-progress-inner {
    width: 100%;
    min-height: 0;
    gap: 4px;
    justify-content: center;
}

#cart-modal #cart-view .cart-footer .free-delivery-progress-text,
#cart-modal #cart-view .cart-footer #freeDeliveryProgressRow,
#cart-modal #checkout-view .cart-footer .free-delivery-progress-text,
#cart-modal #checkout-view .cart-footer #freeDeliveryProgressRow {
    margin-bottom: 5px !important;
}

#cart-modal #cart-view .cart-footer #free-delivery-progress.is-active .free-delivery-progress-inner,
#cart-modal #cart-view .cart-footer #free-delivery-progress.is-truck-enter .free-delivery-progress-inner {
    width: auto !important;
    max-width: 100%;
    flex: 0 1 auto;
    gap: 0;
}

#cart-modal #cart-view .cart-footer #free-delivery-progress.is-active #freeDeliveryProgressText {
    display: inline;
    width: auto;
    padding: 0;
    margin: 0;
}

#cart-modal #cart-view .cart-footer .free-delivery-active-label {
    font-size: 0.72rem;
    min-height: 20px;
    letter-spacing: 0.03em;
}

#cart-modal #cart-view {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #ffffff;
}

#cart-modal #checkout-view {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
}

/* Checkout: remover qualquer fundo cinza “atrás” do carrossel/sugestões */
#cart-modal #checkout-view .cart-body,
#cart-modal #checkout-view .hm-checkout-wizard,
#cart-modal #checkout-view .hm-checkout-step__body,
#cart-modal #checkout-view .cart-cross-sell-dock__inner,
#cart-modal #checkout-view #cross-sell-items,
#cart-modal #checkout-view #cross-sell-items-body,
#cart-modal #checkout-view .cross-sell-items__body,
#cart-modal #checkout-view .cross-sell-items__body--carousel {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Checkout: remover “cinza” causado por sombras/efeitos no carrossel */
#cart-modal #checkout-view .cart-cross-sell-dock,
#cart-modal #checkout-view .cart-cross-sell-dock__inner,
#cart-modal #checkout-view #cross-sell-items,
#cart-modal #checkout-view #cross-sell-items-body,
#cart-modal #checkout-view .cross-sell-items__body,
#cart-modal #checkout-view .cross-sell-items__body--carousel,
#cart-modal #checkout-view .cross-sell-items.cross-sell-items--carousel {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#cart-modal #checkout-view .cart-cross-sell-dock::before,
#cart-modal #checkout-view .cart-cross-sell-dock::after,
#cart-modal #checkout-view #cross-sell-items::before,
#cart-modal #checkout-view #cross-sell-items::after,
#cart-modal #checkout-view #cross-sell-items-body::before,
#cart-modal #checkout-view #cross-sell-items-body::after,
#cart-modal #checkout-view .cross-sell-items__body::before,
#cart-modal #checkout-view .cross-sell-items__body::after,
#cart-modal #checkout-view .cross-sell-items__body--carousel::before,
#cart-modal #checkout-view .cross-sell-items__body--carousel::after,
#cart-modal #checkout-view .cross-sell-items.cross-sell-items--carousel::before,
#cart-modal #checkout-view .cross-sell-items.cross-sell-items--carousel::after {
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
}

#cart-modal #checkout-view .cross-sell-item--carousel,
#cart-modal #checkout-view .cross-sell-item--carousel * {
    filter: none !important;
}

/* Checkout: "tapar" qualquer fundo cinza com um fundo branco por cima */
#cart-modal #checkout-view .cart-cross-sell-dock__inner {
    position: relative !important;
    isolation: isolate;
}
#cart-modal #checkout-view .cart-cross-sell-dock__inner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #ffffff !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
#cart-modal #checkout-view .cart-cross-sell-dock__inner > * {
    position: relative;
    z-index: 1;
}

#cart-modal .cart-sidebar {
    min-height: 0;
    overflow: hidden;
}

#cart-modal #cart-view .cart-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

#cart-modal #cart-view .cart-cross-sell-dock,
#cart-modal #checkout-view .cart-cross-sell-dock {
    display: none;
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    z-index: 8;
    background: var(--hm-cart-panel-bg, #f1f5f9);
    border-top: none;
    box-shadow: none;
    box-sizing: border-box;
}

#cart-modal #cart-view #cart-cross-sell-dock,
#cart-modal #cart-view #cart-cross-sell-dock.cart-cross-sell-dock,
#cart-modal #cart-view #cart-cross-sell-dock.cart-cross-sell-dock.is-active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Checkout: não exibir “painel cinza” atrás do carrossel */
#cart-modal #checkout-view .cart-cross-sell-dock,
#cart-modal #checkout-view .cart-cross-sell-dock.is-active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

#cart-modal #cart-view #cart-cross-sell-dock.cart-cross-sell-dock.is-active {
    background: var(--hm-cart-panel-bg, #f1f5f9);
}

#cart-modal #cart-view {
    position: relative;
}

#cart-modal #cart-cross-sell-dock:not([data-minimized="1"]) {
    height: 342px;
}

#cart-modal #cart-cross-sell-dock.hm-cart-cross-sell-dock--outside-banner:not([data-minimized="1"]) {
    height: auto;
    min-height: 260px;
}

#cart-modal #cart-cross-sell-dock.is-active:not([data-minimized="1"]) .cart-cross-sell-dock__inner {
    padding-top: 12px !important;
    box-sizing: border-box;
}

#cart-modal #cart-cross-sell-dock.hm-cart-cross-sell-dock--outside-banner.is-active:not([data-minimized="1"]) .cart-cross-sell-dock__inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#cart-modal #cart-cross-sell-dock.hm-cart-cross-sell-dock--outside-banner #cross-sell-items {
    margin-top: 0 !important;
}

#cart-modal #cart-view > #free-delivery-progress.hm-free-progress--outside-dock {
    position: absolute;
    z-index: 66;
    margin: 0;
    box-sizing: border-box;
}

#cart-modal #cart-view:has(> #cart-cross-sell-dock.hm-cart-cross-sell-dock--outside-banner:not([data-minimized="1"])) {
    --hm-cart-cross-stack-offset: 20px;
    --hm-cart-cross-close-offset: 5px;
}

#cart-modal #cart-view:has(> #cart-cross-sell-dock.hm-cart-cross-sell-dock--outside-banner:not([data-minimized="1"])) .cross-sell-header-bar {
    top: calc(var(--hm-cross-close-top, 0px) + var(--hm-cart-cross-close-offset, 5px) + var(--hm-cross-header-offset-y, -6px)) !important;
}

#cart-modal #cart-view:has(> #cart-cross-sell-dock.hm-cart-cross-sell-dock--outside-banner:not([data-minimized="1"])) #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee {
    top: calc(var(--hm-cross-body-top, calc(var(--hm-cross-close-top, 0px) + var(--hm-cross-header-height, 34px) + 19px)) + var(--hm-cart-cross-stack-offset, 0px)) !important;
}

/* Minimizado: 12px entre a base do dock (botão) e o topo de .cart-footer-actions */
#cart-modal #cart-cross-sell-dock[data-minimized="1"] {
    position: relative;
    height: auto;
    min-height: 109px;
    margin-bottom: 12px !important;
}

#cart-modal #cart-view:has(#cart-cross-sell-dock[data-minimized="1"]) .cart-footer {
    padding-top: 0 !important;
}

#cart-modal #cart-view:has(#cart-cross-sell-dock[data-minimized="1"]) .cart-footer-actions {
    margin-top: -5px !important;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #cross-sell-items {
    position: relative;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #crossSellHeaderBar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 !important;
    z-index: 63;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #crossSellCloseBtn {
    position: relative;
    left: 0;
    right: 0;
    bottom: auto;
    top: auto;
    z-index: auto;
    margin: 0;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #free-delivery-progress,
#cart-modal #cart-cross-sell-dock[data-minimized="1"] #free-delivery-progress.hm-free-progress--dock-minimized {
    top: calc(var(--hm-free-progress-top, 0px) - 12px) !important;
    bottom: auto !important;
    left: var(--hm-free-progress-left, 13px) !important;
    right: var(--hm-free-progress-right, 13px) !important;
    width: calc(100% - var(--hm-free-progress-left, 13px) - var(--hm-free-progress-right, 13px)) !important;
    max-width: calc(100% - var(--hm-free-progress-left, 13px) - var(--hm-free-progress-right, 13px)) !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 8px 34px 8px 12px !important;
    overflow: visible !important;
    z-index: 62 !important;
    border: 1px solid #eef1f4 !important;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.1) !important;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #free-delivery-progress #freeDeliveryProgressRow,
#cart-modal #cart-cross-sell-dock[data-minimized="1"] #free-delivery-progress #freeDeliveryProgressInner {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #free-delivery-progress #freeDeliveryProgressText {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #free-delivery-progress .free-delivery-progress-bar,
#cart-modal #cart-cross-sell-dock[data-minimized="1"] #free-delivery-progress #freeDeliveryProgressBar {
    display: block !important;
    min-height: 15px !important;
    height: 15px !important;
}

#cart-modal #cart-view .cart-cross-sell-dock.is-active,
#cart-modal #checkout-view .cart-cross-sell-dock.is-active {
    display: block !important;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#cart-modal #cart-view .cart-cross-sell-dock.is-active[data-minimized="1"],
#cart-modal #checkout-view .cart-cross-sell-dock.is-active[data-minimized="1"] {
    margin-bottom: 12px !important;
}

/* Cross-sell só no carrinho — não nas 5 etapas do wizard */
#cart-modal:has(#checkout-view.hm-checkout-wizard-mode) #cart-cross-sell-dock,
#cart-modal:has(#checkout-form[data-hm-wizard-active="1"]) #cart-cross-sell-dock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#cart-modal #cart-view .cart-cross-sell-dock.is-active {
    padding-left: 14px;
    padding-right: 14px;
}

/* Mesmo recuo horizontal do #checkout-footer (.cart-footer → 20px) */
#cart-modal #checkout-view .cart-cross-sell-dock.is-active {
    padding-left: 20px;
    padding-right: 20px;
}

#cart-modal #cart-view .cart-cross-sell-dock[hidden],
#cart-modal #checkout-view .cart-cross-sell-dock[hidden] {
    display: none !important;
}

#cart-modal #cart-view #cart-items-container.cart-body {
    flex: none;
    overflow: visible;
    padding: 2px 17px 0;
}

#cart-modal #cart-view .cart-scroll-area .cart-total {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 17px 16px;
    margin: 0;
}

#cart-modal #cart-view .cart-scroll-area .cart-total[hidden],
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell[hidden] {
    display: none !important;
}

/* Total do carrinho abaixo do .cart-footer — mesmo fundo do .cart-header */
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    /* -7px no total (top+bottom) */
    padding: 4px var(--hm-cart-shell-pad, 14px) 4px !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: transparent;
    border-top: none;
    border-bottom: none;
    color: #0F172A;
    overflow: visible;
    isolation: isolate;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell > .cart-footer-actions {
    order: 1;
    width: 100%;
    margin: 0;
    margin-top: 17px;
    flex-shrink: 0;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell > .cart-total-values {
    order: 2;
    width: 100%;
    margin-top: -8px;
}

#cart-modal #cart-view:has(> #cart-view-total.cart-total--cross-sell:not([hidden])) > .cart-footer {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* Espaço entre cross-sell e total: fechado via JS (margin-top + --hm-cart-total-bg-ext) */
#cart-modal #cart-view:has(> #cart-cross-sell-dock.is-active:not([hidden])) > #cart-view-total.cart-total--cross-sell:not([hidden]) {
    margin-top: 0;
}

/* Painel branco: sobe até a base do #cart-scroll-area (altura via --hm-cart-total-bg-ext no JS) */
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--hm-cart-total-bg-ext, 7px);
    background: #ffffff;
    pointer-events: none;
    z-index: 0;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell > * {
    position: relative;
    z-index: 1;
}

#cart-modal #cart-view #cart-cross-sell-dock,
#cart-modal #cart-view #cart-cross-sell-dock * {
    position: relative;
}

#cart-modal #cart-view #cart-cross-sell-dock #crossSellCloseBtn {
    z-index: 61 !important;
}
#cart-modal #cart-view #cart-cross-sell-dock #crossSellCarouselControls {
    z-index: 65 !important;
}
#cart-modal #cart-view #cart-cross-sell-dock #cross-sell-items-body,
#cart-modal #cart-view #cart-cross-sell-dock #cross-sell-items-body > .marquee-container {
    z-index: 60 !important;
}

#cart-modal #cart-view > #free-delivery-progress.hm-free-progress--outside-dock {
    z-index: 66 !important;
}

#cart-modal #cart-view:has(> #cart-cross-sell-dock.is-active:not([hidden])) {
    background: #ffffff !important;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-main-chip,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-installments-chip {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    color: #0F172A;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-installments-chip {
    color: #15803d;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-label,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-label--avista,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-installments-label {
    color: #6b7280;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-main-line,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell #cart-total-price,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-pix-ic {
    color: var(--pcv2-header-solid, #e53935);
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-installments-line,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-installments-line.cart-total-installments-picker,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell #cart-total-installments,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell #cart-total-installments-x,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell #cart-total-installments-value,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-card-ic {
    color: #15803d;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell #cart-total-installments {
    position: relative;
    top: 0;
}

#cart-modal #cart-view .cart-total-installments-picker {
    position: relative;
}

#cart-modal #cart-view .cart-total-installments-trigger {
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

#cart-modal #cart-view .cart-total-installments-trigger:focus-visible {
    outline: 2px solid rgba(15, 23, 42, 0.28);
    outline-offset: 2px;
    border-radius: 4px;
}

#cart-modal #cart-view .cart-total-installments-menu {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(100% + 6px);
    z-index: 500;
    min-width: 148px;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    box-sizing: border-box;
}

#cart-modal #cart-view .cart-total-installments-menu[hidden] {
    display: none !important;
}

#cart-modal #cart-view .cart-total-installments-menu__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

#cart-modal #cart-view .cart-total-installments-menu__item:hover,
#cart-modal #cart-view .cart-total-installments-menu__item:focus-visible {
    background: #f1f5f9;
    outline: none;
}

#cart-modal #cart-view .cart-total-installments-menu__item.is-selected {
    background: rgba(229, 57, 53, 0.1);
    color: #c62828;
}

#cart-modal #cart-view .cart-cross-sell-dock__inner,
#cart-modal #checkout-view .cart-cross-sell-dock__inner {
    position: relative;
    margin: 8px 0 10px;
}

/* Quando o banner de entrega grátis estiver "solto" acima do #cross-sell-items */
#cart-modal #cart-view .cart-cross-sell-dock__inner > #free-delivery-progress,
#cart-modal #checkout-view .cart-cross-sell-dock__inner > #free-delivery-progress {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box;
}

/* Cross-sell: banner entrega grátis (+3px padding vertical superior e inferior) */
#cart-modal #cart-view #cross-sell-items > #free-delivery-progress.free-delivery-progress,
#cart-modal #checkout-view #cross-sell-items > #free-delivery-progress.free-delivery-progress {
    top: calc(var(--hm-free-progress-top, 0px) - 3px) !important;
    padding: 8px 34px 8px 12px !important;
}

/* Cross-sell: agrupa ícone + frase + caminhão + barra e centraliza no banner */
#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active.is-revealed {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #freeDeliveryProgressRow {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter):not(.is-truck-arrival-visible) #freeDeliveryProgressInner {
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 3px !important;
    column-gap: 3px !important;
    row-gap: 0 !important;
    min-height: 13px !important;
    max-height: 13px !important;
    transform: none !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter):not(.is-truck-arrival-visible) #freeDeliveryProgressText {
    display: inline-flex !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter):not(.is-truck-arrival-visible) .free-delivery-gratis-label {
    display: inline-flex !important;
    align-items: flex-end !important;
    line-height: 1 !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter):not(.is-truck-arrival-visible) #free-delivery-truck-wrap:not([hidden]) {
    align-self: flex-end !important;
    align-items: flex-end !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 3px !important;
    padding: 0 !important;
    transform: none !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering:not([hidden]) {
    animation: none !important;
    align-self: center !important;
    align-items: center !important;
    will-change: transform, opacity;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active .free-delivery-truck-wrap.is-settled:not([hidden]) {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 3px !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #free-delivery-truck-wrap,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active.is-revealed #free-delivery-truck-wrap,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating #free-delivery-truck-wrap:not(.is-truck-entering) {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 3px !important;
    padding: 0 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering:not([hidden]) {
    animation: none !important;
    align-self: center !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 3px !important;
    padding: 0 !important;
    will-change: transform, opacity;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering:not([hidden]) .free-delivery-truck-icon {
    transition: none !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #freeDeliveryProgressBar,
#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active .free-delivery-progress-bar {
    flex-shrink: 0 !important;
    margin: 0 auto !important;
}

/* Minimizado: sem espaço sobrando antes do footer */
#cart-modal #cart-view .cart-cross-sell-dock__inner:has(.cross-sell-items--minimized),
#cart-modal #checkout-view .cart-cross-sell-dock__inner:has(.cross-sell-items--minimized) {
    margin: 0;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 68px;
    max-height: min(36vh, 240px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items {
    /* 6px (right do ×) + 10px (largura do ×) → borda direita do + Adicionar no lado esquerdo do × */
    --hm-cross-sell-close-inset: 6px;
    --hm-cross-sell-close-size: 10px;
    padding: 8px calc(var(--hm-cross-sell-close-inset) + var(--hm-cross-sell-close-size)) 8px 10px;
    margin-top: 7px !important;
    transform: none !important;
}

/* Reforço por ID (mais específico) */
#cart-modal #cart-view #cross-sell-items {
    margin-top: 7px !important;
    margin-bottom: 10px !important;
    transform: none !important;
}

/* Respiro entre a lista e o fim do container (#cross-sell-items) */
#cart-modal #cart-view #cross-sell-items > #cross-sell-items-body,
#cart-modal #checkout-view #cross-sell-items > #cross-sell-items-body {
    margin-bottom: 10px !important;
}

/* Sem padding-right extra: alinha .cross-sell-add à borda direita do .cart-total */
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items {
    padding: 8px 0 8px 10px;
    margin-top: 7px !important;
    transform: none !important;
}

#cart-modal #checkout-view #cross-sell-items {
    margin-top: 7px !important;
    margin-bottom: 10px !important;
    transform: none !important;
}

#cart-modal #cart-view .cross-sell-bg-palette,
#cart-modal #checkout-view .cross-sell-bg-palette {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#cart-modal #cart-view .cross-sell-bg-palette[hidden],
#cart-modal #checkout-view .cross-sell-bg-palette[hidden] {
    display: none !important;
}

.cross-sell-bg-palette__heading {
    flex: 1 1 100%;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
    line-height: 1.2;
}

.cross-sell-bg-palette__swatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 52px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}

.cross-sell-bg-palette__chip {
    display: block;
    width: 100%;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(15, 23, 42, 0.14);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cross-sell-bg-palette__swatch:hover .cross-sell-bg-palette__chip {
    transform: scale(1.06);
    border-color: rgba(229, 57, 53, 0.45);
}

.cross-sell-bg-palette__swatch.is-active .cross-sell-bg-palette__chip {
    border-color: var(--pcv2-header-solid, #e53935);
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.22);
}

.cross-sell-bg-palette__name {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    color: #475569;
    text-align: center;
    max-width: 52px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items > .cross-sell-hide,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items > .cross-sell-hide {
    position: absolute;
    top: 6px;
    z-index: 4;
    margin: 0;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items > .cross-sell-hide {
    right: var(--hm-cross-sell-close-inset, 6px);
    width: var(--hm-cross-sell-close-size, 10px);
    height: var(--hm-cross-sell-close-size, 10px);
    margin: 0;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized {
    min-height: var(--hm-cross-header-height, 34px);
    display: block;
    position: relative;
    padding-bottom: 0 !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > .cross-sell-hide,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > .cross-sell-hide {
    justify-content: center !important;
    text-align: center !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > .cross-sell-hide .cross-sell-hide__prompt,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > .cross-sell-hide .cross-sell-hide__prompt {
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > .cross-sell-hide .cross-sell-hide__icon,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > .cross-sell-hide .cross-sell-hide__icon {
    position: absolute !important;
    right: var(--hm-cross-header-pad-right, 13px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    font-size: calc(1rem + 3px) !important;
    font-weight: 700 !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > #free-delivery-progress,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized > #free-delivery-progress {
    position: absolute;
    top: calc(var(--hm-free-progress-top, 0px) - 12px) !important;
    bottom: auto !important;
    left: var(--hm-free-progress-left, 13px);
    right: var(--hm-free-progress-right, 13px);
    width: calc(100% - var(--hm-free-progress-left, 13px) - var(--hm-free-progress-right, 13px));
    max-width: calc(100% - var(--hm-free-progress-left, 13px) - var(--hm-free-progress-right, 13px));
    height: auto !important;
    min-height: 46px !important;
    padding: 7px 34px 7px 12px !important;
    overflow: visible !important;
    z-index: 62;
    border: 1px solid #eef1f4 !important;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.1) !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized .cross-sell-items__body,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized .cross-sell-items__body,
#cart-modal #cart-cross-sell-dock[data-minimized="1"] #cross-sell-items #cross-sell-items-body,
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized #cross-sell-items-body,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized #cross-sell-items-body {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

#cart-modal #cart-cross-sell-dock[data-minimized="1"] #cross-sell-items #cross-sell-items-body > .marquee-container,
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized #cross-sell-items-body > .marquee-container,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized #cross-sell-items-body > .marquee-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation-play-state: paused !important;
}

#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items > .cross-sell-hide {
    right: 6px;
    width: 10px;
    height: 10px;
}

#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body .cross-sell-item {
    padding-right: 0;
    margin-right: 0;
}

#cart-modal #checkout-view .cross-sell-add {
    margin-right: 0;
}

#cart-modal #cart-scroll-area #cross-sell-box,
#cart-modal #cart-scroll-area .cross-sell-header {
    display: none !important;
}

#cart-modal #cart-view .cart-footer #free-delivery-progress .free-delivery-progress-bar {
    flex-shrink: 0;
    align-self: center;
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    height: 15px;
    min-height: 15px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

#cart-modal #cart-view .cart-total {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 0;
    color: #0F172A;
}

#cart-modal #cart-view .cart-total .cart-total-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    width: 100%;
}

#cart-modal #cart-view .cart-total .cart-total-main-chip,
#cart-modal #cart-view .cart-total .cart-total-installments-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 7px;
    background: transparent;
    white-space: nowrap;
}

#cart-modal #cart-view .cart-total .cart-total-main-chip {
    color: #0F172A;
}

#cart-modal #cart-view .cart-total .cart-total-installments-chip {
    color: #15803d;
}

#cart-modal #cart-view .cart-total .cart-total-label,
#cart-modal #cart-view .cart-total .cart-total-label--avista,
#cart-modal #cart-view .cart-total .cart-total-installments-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
    color: #6b7280;
}

#cart-modal #cart-view .cart-total .cart-total-main-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    text-align: center;
    color: var(--pcv2-header-solid, #e53935);
}

#cart-modal #cart-view .cart-total .cart-total-installments-line,
#cart-modal #cart-view .cart-total .cart-total-installments-line.cart-total-installments-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    text-align: center;
    color: #15803d;
}

#cart-modal #cart-view .cart-total #cart-total-price {
    color: var(--pcv2-header-solid, #e53935);
    font-size: 15px;
    line-height: 1;
}

#cart-modal #cart-view .cart-total .cart-total-pix-ic {
    color: var(--pcv2-header-solid, #e53935);
    font-size: 12px;
    line-height: 1;
    flex: 0 0 auto;
}

#cart-modal #cart-view .cart-total #cart-total-installments {
    color: #15803d;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

#cart-modal #cart-view .cart-total #cart-total-installments-x,
#cart-modal #cart-view .cart-total #cart-total-installments-value {
    display: inline-block;
    line-height: 1;
}

#cart-modal #cart-view .cart-total #cart-total-installments-x {
    font-size: 13px;
}

#cart-modal #cart-view .cart-total .cart-total-card-ic {
    color: #15803d;
    font-size: 12px;
    line-height: 1;
    flex: 0 0 auto;
}

#cart-modal #cart-view .cart-footer .cart-footer-actions {
    gap: 8px;
    margin-top: -13px;
}

#cart-modal #cart-view .cart-footer .cart-footer-actions .btn-checkout {
    padding: 11px 10px;
    font-size: 0.92rem;
    border-radius: 8px;
    line-height: 1.15;
}

#cart-modal #cart-view .cart-footer #free-delivery-progress.is-truck-enter .free-delivery-progress-inner {
    padding-right: 28px;
}

/* Cart Item */
.cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#cart-modal #cart-items-container > .cart-item {
    margin-bottom: 0;
    border-bottom: 1px solid #e9ecef;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
}

#cart-modal #cart-items-container > .cart-item:not(:last-child) {
    margin-bottom: 0;
}

#cart-modal #cart-items-container > .cart-item:first-child {
    padding-top: 8px;
}

#cart-modal #cart-items-container > .cart-item:last-child {
    padding-bottom: 8px;
}

.cart-item-img {
    width: 50px;
    height: 50px;
    border: 0.5px solid #eef1f4;
    border-radius: 6px;
    box-sizing: border-box;
    object-fit: cover;
    margin-right: 15px;
    flex-shrink: 0;
}

.cart-item-details {
    flex: 0 0 auto;
    min-width: 0;
}

.cart-item-title-row {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cart-item-title {
    font-size: 0.9rem;
    font-weight: 600;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.cart-item-price {
    color: var(--primary-color);
    font-weight: 600;
}

/* Áreas que abrem edição do item no carrinho */
.cart-item .cart-item-title,
.cart-item-details .cart-item-addons-line,
.cart-item-details .cart-item-price,
.cart-item-details .cart-item-obs-line {
    cursor: pointer;
}

.cart-item-details .cart-item-addons-line {
    overflow-wrap: break-word;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-item-addon-row {
    line-height: 1.35;
}

.cart-item-img.cart-item-img--zoomable {
    cursor: zoom-in;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cart-item-img.cart-item-img--zoomable:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Carrinho: miniatura + coluna principal; gap 5px entre título e bloco (preço / adicionais) */
#cart-modal .cart-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
}

#cart-modal .cart-item .cart-item-img {
    margin-right: 0;
    width: 56px;
    height: 56px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
}

#cart-modal .cart-item .cart-item-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
}

#cart-modal .cart-item .cart-item-details {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    flex: 0 0 auto;
}

#cart-modal .cart-item .cart-item-addons-line,
#cart-modal .cart-item .cart-item-details > .cart-item-obs-line {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
}

#cart-modal .cart-item .cart-item-addon-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#cart-modal .cart-item .cart-item-meta-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
    margin-top: 0;
    min-width: 0;
    width: 100%;
}

#cart-modal .cart-item .cart-item-meta-row .cart-item-price {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    background: transparent;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    color: var(--pcv2-header-solid, #e53935);
    font-weight: 800;
}

#cart-modal .cart-item .cart-item-price .hm-money-inline {
    align-items: center;
}

#cart-modal .cart-item .cart-item-price > .cart-item-price-value,
#cart-modal .cart-item .cart-item-price > .cart-item-installments {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 32px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 7px;
    background: #f1f3f5;
    overflow: hidden;
}

#cart-modal .cart-item .cart-item-price > .cart-item-installments {
    align-items: baseline;
}

#cart-modal .cart-item .cart-item-price > .cart-item-price-value > .cart-item-price-value__inner,
#cart-modal .cart-item .cart-item-price > .cart-item-installments > .cart-item-installments__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    transform-origin: center center;
}

#cart-modal .cart-item .cart-item-price > .cart-item-installments > .cart-item-installments__inner,
#cart-modal .cart-item .cart-item-install-inline,
#cart-modal .cart-item .cart-item-install-value.hm-money-inline {
    align-items: baseline;
}

#cart-modal .cart-item .cart-item-card-ic {
    align-self: baseline;
    line-height: 1;
}

#cart-modal .cart-item .cart-item-qty-actions {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    position: static;
    flex-shrink: 0;
}

#cart-modal .cart-item .cart-item-title-row .cart-item-title {
    padding-right: 0;
}

#cart-modal .cart-item .cart-item-remove-btn {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    z-index: 2;
    flex-shrink: 0;
    align-self: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: #f1f3f5;
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: transform 0.16s ease, filter 0.16s ease;
}

#cart-modal .cart-item .cart-item-remove-btn-icon {
    display: block;
    font-size: 0.82rem;
    line-height: 1;
    color: inherit;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    #cart-modal .cart-item .cart-item-remove-btn:hover {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff;
        background: var(--pcv2-header-bg, var(--pcv2-header-solid, #e53935));
        transform: scale(1.12);
        filter: brightness(1.05);
    }
}

#cart-modal .cart-item .cart-item-remove-btn:active {
    transform: scale(0.94);
    opacity: 0.85;
}

/* Seletor de qtd no carrinho: largura fixa alinhada ao card (98×32 área útil) */
#cart-modal .cart-item .addon-qty-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f1f3f5;
    padding: 2px 4px; /* −6px na horizontal vs 7px (só o “fundo” do chip) */
    border-radius: 14px;
    box-sizing: border-box;
    width: 98px;
    min-width: 98px;
    max-width: 98px;
}

#cart-modal .cart-item .addon-qty-controls input.addon-qty-val.cart-item-qty-val {
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    flex: 0 0 30px;
    min-width: 30px;
    max-width: 30px;
    width: 30px;
    height: auto;
    min-height: 0;
    font: inherit;
    font-weight: 800;
    font-size: calc(0.72rem + 2.2px);
    line-height: 1;
    text-align: center;
    color: inherit;
    box-sizing: border-box;
}

#cart-modal .cart-item .addon-qty-controls input.addon-qty-val.cart-item-qty-val:focus {
    outline: 2px solid rgba(229, 57, 53, 0.5);
    outline-offset: 0;
    border-radius: 4px;
}

#cart-modal .cart-item .addon-qty-val {
    font-size: calc(0.72rem + 2.2px);
    font-weight: 800;
    line-height: 1;
    min-width: 30px;
    text-align: center;
}

#cart-modal .cart-item .addon-qty-btn {
    font-size: calc(0.85rem - 0.5px);
    line-height: 1;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}

#cart-modal .cart-item .addon-qty-btn.minus {
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

#cart-modal .cart-item .addon-qty-btn.plus {
    background: var(--pcv2-header-bg, var(--pcv2-header-solid, #e53935));
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 6px rgba(183, 28, 28, 0.22);
    -webkit-text-fill-color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    #cart-modal .cart-item .addon-qty-btn.minus:hover {
        background: var(--pcv2-header-bg, var(--pcv2-header-solid, #e53935));
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.12);
        -webkit-text-fill-color: #fff;
        filter: brightness(1.05);
        box-shadow: 0 1px 6px rgba(183, 28, 28, 0.22);
    }

    #cart-modal .cart-item .addon-qty-btn.plus:hover {
        color: #fff !important;
        -webkit-text-fill-color: #fff;
        filter: brightness(1.06);
    }
}

#cart-modal .cart-item .addon-qty-btn.minus:active {
    background: #9a141c;
    color: #fff !important;
    border-color: rgba(0, 0, 0, 0.14);
    -webkit-text-fill-color: #fff;
}

#cart-modal .cart-item .addon-qty-btn.plus:active {
    filter: brightness(0.92);
}

/* Card de catálogo (v2): mesma largura horizontal do chip do carrinho (98px) */
.product-card-v2 .product-card-v2__card-qty.addon-qty-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f1f3f5;
    padding: 2px 4px;
    border-radius: 14px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.2),
        0 4px 12px rgba(15, 23, 42, 0.14),
        0 1px 3px rgba(15, 23, 42, 0.1);
    width: 98px;
    min-width: 98px;
    max-width: 98px;
}

.product-card-v2 .product-card-v2__card-qty .addon-qty-val {
    font-size: calc(0.72rem + 2.2px);
    font-weight: 800;
    line-height: 1;
    min-width: 20px;
    text-align: center;
}

.product-card-v2 .product-card-v2__card-qty input.addon-qty-val.product-card-v2__card-qty-val {
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 2px;
    margin: 0;
    min-width: 18px;
    max-width: 30px;
    flex: 1 1 0;
    font: inherit;
    font-weight: 800;
    font-size: calc(0.72rem + 2.2px);
    line-height: 1.15;
    color: inherit;
    text-align: center;
    box-sizing: border-box;
}

.product-card-v2 .product-card-v2__card-qty input.addon-qty-val.product-card-v2__card-qty-val:focus {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    outline-offset: 1px;
    border-radius: 4px;
}

.product-card-v2--salg20 .product-card-v2__card-qty input.addon-qty-val.product-card-v2__card-qty-val:focus {
    outline-color: rgba(229, 57, 53, 0.55);
}

.product-card-v2 .product-card-v2__card-qty .addon-qty-btn {
    font-size: calc(0.85rem - 0.5px);
    line-height: 1;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.product-card-v2 .product-card-v2__card-qty .addon-qty-btn.minus {
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.product-card-v2 .product-card-v2__card-qty .addon-qty-btn.plus {
    background: var(--primary-color);
    color: var(--primary-color-text, #fff) !important;
    border: 1px solid var(--primary-color);
    -webkit-text-fill-color: var(--primary-color-text, #fff);
}

/* SALG20: “+” no card com o mesmo vermelho do header */
.product-card-v2--salg20 .product-card-v2__card-qty .addon-qty-btn.plus {
    background: var(--pcv2-header-bg, var(--lv-header-solid));
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    -webkit-text-fill-color: #fff;
    box-shadow: 0 1px 6px rgba(183, 28, 28, 0.28);
}

@media (hover: hover) and (pointer: fine) {
    .product-card-v2:not(.product-card-v2--salg20) .product-card-v2__card-qty .addon-qty-btn.minus:hover {
        background: var(--primary-color);
        color: var(--primary-color-text, #fff) !important;
        border-color: var(--primary-color);
        -webkit-text-fill-color: var(--primary-color-text, #fff);
        filter: brightness(1.08);
    }

    .product-card-v2--salg20 .product-card-v2__card-qty .addon-qty-btn.minus:hover {
        background: var(--pcv2-header-bg, var(--lv-header-solid));
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.12);
        -webkit-text-fill-color: #fff;
        filter: brightness(1.05);
        box-shadow: 0 1px 6px rgba(183, 28, 28, 0.28);
    }

    .product-card-v2:not(.product-card-v2--salg20) .product-card-v2__card-qty .addon-qty-btn.plus:hover {
        background: var(--primary-color);
        color: var(--primary-color-text, #fff) !important;
        -webkit-text-fill-color: var(--primary-color-text, #fff);
        filter: brightness(1.08);
    }

    .product-card-v2--salg20 .product-card-v2__card-qty .addon-qty-btn.plus:hover {
        background: var(--lv-primary-deep, #9a141c);
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.14);
        -webkit-text-fill-color: #fff;
        filter: brightness(1.06);
    }
}

.product-card-v2:not(.product-card-v2--salg20) .product-card-v2__card-qty .addon-qty-btn.plus:active {
    filter: brightness(0.92);
}

.product-card-v2--salg20 .product-card-v2__card-qty .addon-qty-btn.plus:active {
    filter: brightness(0.94);
}

.product-card-v2:not(.product-card-v2--salg20) .product-card-v2__card-qty .addon-qty-btn.minus:active {
    background: var(--primary-color);
    color: var(--primary-color-text, #fff) !important;
    border-color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color-text, #fff);
}

.product-card-v2--salg20 .product-card-v2__card-qty .addon-qty-btn.minus:active {
    background: var(--lv-primary-deep, #9a141c);
    color: #fff !important;
    border-color: rgba(0, 0, 0, 0.14);
    -webkit-text-fill-color: #fff;
}

.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: bold;
    transition: transform 0.15s ease;
}

/* Checkout Form Styles */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
}

.form-input:focus {
    border-color: var(--primary-color);
}

.option-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
}

.option-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.option-card i {
    font-size: 1.2rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-card span {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
}

.option-card:hover {
    background: #fdfdfd;
}

.option-card:has(input:checked) {
    border-color: var(--primary-color);
    background-color: #fff8f6;
}

.option-card:has(input:checked) i,
.option-card:has(input:checked) span {
    color: var(--primary-color);
}


/* Footer */
.payment-methods-banner {
    margin-top: 36px;
    padding: 18px 14px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.payment-methods-banner__inner {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}
.payment-methods-banner__title {
    font-weight: 800;
    color: #2c3e50;
    font-size: 1rem;
    margin-bottom: 12px;
    text-align: center;
}
.payment-methods-banner__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
}
.payment-methods-banner__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--light-gray);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.payment-methods-banner__item:hover {
    transform: scale(1.06);
    filter: brightness(1.02);
}
.payment-methods-banner__img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 5px;
    flex: 0 0 auto;
}
.payment-methods-banner__label {
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #334155;
    font-size: 0.85rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Links do topo (Voltar ao Menu / Perfil) */
.topbar a.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.topbar a.back:hover {
    transform: scale(1.06);
    filter: brightness(1.05);
}

.main-footer {
    position: static;
    background-color: var(--light-gray);
    color: #666;
    text-align: center;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    /* Evita ficar escondido atrás do menu inferior fixo */
    margin-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color);
}

/* Barra flutuante antiga do carrinho (substituída por .bottom-app-nav) */
.floating-cart-bar {
    display: none !important;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    /* Limit width on larger screens */
    background: var(--primary-color);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(255, 69, 0, 0.4);
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    z-index: 900;
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: 600;
}

.floating-cart-bar:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 15px 35px rgba(255, 69, 0, 0.5);
}

/* =========================================
   CROSS-SELL (Checkout)
   ========================================= */
.cross-sell-box {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 14px;
    margin: 0 17px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.cross-sell-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.cross-sell-title {
    font-weight: 800;
    color: #2c3e50;
}
.cross-sell-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cross-sell-hide {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: -2px -2px 0 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cross-sell-hide__label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}
.cross-sell-hide__prompt {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    font-style: italic;
    color: inherit;
    white-space: nowrap;
    text-align: center;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    pointer-events: auto;
}
.cross-sell-hide__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 1;
    margin-left: 0;
    font-size: calc(1rem + 3px);
    font-weight: 700;
    line-height: 1;
    color: inherit;
    border: none;
    background: transparent;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    pointer-events: auto;
}
.cross-sell-hide:hover {
    background: #f1f3f5;
    color: #495057;
}
.cross-sell-hide:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    outline-offset: 2px;
}
.cross-sell-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}
.cross-sell-item {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-self: stretch;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    padding: 10px;
    background: #e8f4fc;
    position: relative;
}
.cross-sell-img {
    width: 56px;
    height: 56px;
    border: 0.5px solid #eef1f4;
    border-radius: 10px;
    box-sizing: border-box;
    object-fit: cover;
    background: #f1f3f5;
}

.cross-sell-img.cross-sell-img--zoomable {
    cursor: zoom-in;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
    #cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-img--zoomable:hover,
    #cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-img--zoomable:hover {
        transform: scale(1.12);
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
        filter: brightness(1.04);
    }
}
.cross-sell-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cross-sell-name {
    font-weight: 800;
    color: #212529;
    font-size: 0.95rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cross-sell-price {
    margin-top: 4px;
    font-weight: 800;
    color: var(--pcv2-header-bg, var(--pcv2-header-solid, #e53935));
    font-size: 0.9rem;
}
.cross-sell-add {
    background: var(--pcv2-header-bg, var(--pcv2-header-solid, #e53935));
    border: none;
    color: #fff;
    border-radius: 10px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.cross-sell-add:active {
    transform: scale(0.98);
}

@media (min-width: 600px) {
    #cart-modal .cross-sell-items__body {
        grid-template-columns: 1fr;
    }
}

/* Carrinho lateral: uma coluna (evita card estreito no desktop) */
#cart-modal #cart-view .cross-sell-items__body,
#cart-modal #checkout-view .cross-sell-items__body {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    box-sizing: border-box;
}

#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel),
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) {
    gap: 11px;
    background: #fad4d4 !important;
    border: none !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Cross-sell modo Lista — card branco com cantos 7px e contorno vermelho */
#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) > .cross-sell-item:not(.cross-sell-item--carousel),
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) > .cross-sell-item:not(.cross-sell-item--carousel) {
    background: #fff !important;
    border-radius: 7px !important;
    border: 2px solid var(--pcv2-header-solid, #e53935) !important;
    box-sizing: border-box !important;
}

/* Cross-sell modo Lista (stack) — pills de preço/parcelamento */
#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-price-row,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-price-row,
#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-installments,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-installments {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

#cart-modal #cart-view .cross-sell-items__body .cross-sell-item,
#cart-modal #checkout-view .cross-sell-items__body .cross-sell-item {
    width: 100%;
    max-width: 100%;
    grid-column: 1 / -1;
    justify-self: stretch;
    align-items: center;
}

/* Cross-sell no carrinho — desktop (somente lista de sugestões) */
@media (min-width: 768px) {
    #cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body,
    #cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    #cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-item:not(.cross-sell-item--carousel),
    #cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-item:not(.cross-sell-item--carousel) {
        width: 100%;
        max-width: none;
        background: #fff !important;
        border: 2px solid var(--pcv2-header-solid, #e53935) !important;
        border-radius: 7px !important;
        padding: 8px 10px !important;
        box-shadow: none;
        box-sizing: border-box !important;
    }
}

/* Barra flutuante — alinhada ao layoutnovo (nav #main-navigation: h-10, gap 10px, bg-white/95, blur, sombras) */
.floating-catalog-toolbar {
    position: relative;
    top: auto;
    /* Abaixo do rodapé (1990), bottom-nav (1995), submenu MENU (1998) e carrinho (2100) */
    z-index: 1985;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    /* +10px de “fundo branco” e centralização vertical */
    padding: 10px 0;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

/* JS: ao encostar no topo da página, congela flutuante; ao rolar de volta, retorna ao fluxo */
.floating-catalog-toolbar.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    z-index: 1985;
}

.floating-catalog-toolbar.has-search-open {
    /* Busca aberta: levemente acima da barra, ainda abaixo do carrinho e do submenu */
    z-index: 1988;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translateZ(0);
}

.floating-catalog-toolbar__inner {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 16px;
    pointer-events: auto;
    box-sizing: border-box;
}

/* Tooltip (hover/click) */
.app-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(17, 24, 39, 0.96);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.app-tooltip.is-open {
    opacity: 1;
    transform: translateY(0);
}
.app-tooltip__gold {
    color: #fbbf24; /* amarelo ouro */
    font-size: 14px; /* ~2px maior que 12px base */
    font-weight: 900;
    white-space: nowrap;
}
.app-tooltip__gold-prefix {
    font-size: 12px; /* 2px menor que o valor */
    font-weight: 900;
    color: inherit;
    white-space: nowrap;
}
.app-tooltip__white {
    color: #fff;
    font-size: 14px; /* ~2px maior que 12px base */
    font-weight: 900;
    white-space: nowrap;
}
.app-tooltip__wa {
    color: #22c55e; /* verde WhatsApp */
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}
.app-tooltip::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(17, 24, 39, 0.96);
    transform: rotate(45deg);
}
.app-tooltip[data-place="top"]::after {
    left: var(--tip-arrow-left, 14px);
    bottom: -5px;
}
.app-tooltip[data-place="bottom"]::after {
    left: var(--tip-arrow-left, 14px);
    top: -5px;
}

@media (min-width: 768px) {
    .floating-catalog-toolbar__inner {
        padding: 0 30px;
    }
}

.floating-catalog-toolbar__controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    height: 40px;
    min-height: 40px;
    position: relative;
    z-index: 1;
}

.floating-catalog-toolbar .floating-toolbar-cat-trigger,
.floating-catalog-toolbar .floating-toolbar-icon-btn,
.floating-catalog-toolbar .floating-toolbar-search-fab {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.floating-toolbar-search-unit:not(.is-search-open) .floating-toolbar-search-grow,
.floating-toolbar-search-unit:not(.is-search-open) .floating-toolbar-search-grow-inner,
.floating-toolbar-search-unit:not(.is-search-open) .floating-toolbar-search-field {
    pointer-events: none;
}

.floating-toolbar-search-unit.is-search-open .floating-toolbar-search-grow,
.floating-toolbar-search-unit.is-search-open .floating-toolbar-search-grow-inner,
.floating-toolbar-search-unit.is-search-open .floating-toolbar-search-field,
.floating-toolbar-search-unit.is-search-open .floating-menu-search-input {
    pointer-events: auto;
}

.floating-toolbar-select-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    flex: 1 1 auto;
    height: 40px;
}

.floating-toolbar-select-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #4b5563;
    font-size: 0.88rem;
    pointer-events: none;
    z-index: 1;
}

.floating-toolbar-select {
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: linear-gradient(145deg, #f9fafb 0%, #e5e7eb 100%);
    color: #374151;
    font-weight: 700;
    font-size: 0.6875rem;
    padding: 0 32px 0 30px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .floating-toolbar-select {
        font-size: 0.875rem;
        padding: 0 34px 0 32px;
    }
}

.floating-toolbar-select:hover {
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 100%);
}

.floating-toolbar-select:focus {
    outline: none;
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.35);
}

.floating-toolbar-select-wrap::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.62rem;
    color: #9ca3af;
    pointer-events: none;
}

.floating-toolbar-cat-wrap::after {
    content: none;
}

.floating-toolbar-select.floating-toolbar-cat-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    text-align: left;
    box-shadow: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        filter 0.15s ease;
}

.floating-toolbar-cat-trigger__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    margin-left: -5px;
}

.floating-toolbar-cat-trigger .floating-toolbar-select-icon {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.floating-toolbar-cat-trigger__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
}

@media (min-width: 640px) {
    .floating-toolbar-cat-trigger__label {
        font-size: 0.8125rem;
        max-width: none;
    }
}

.floating-toolbar-cat-trigger__chev {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.72rem;
}

.floating-cat-pop {
    position: fixed;
    inset: auto;
    /* Acima do .rodape-container / .cart-button (1997), abaixo do #cart-modal (2100) */
    z-index: 2090;
    display: block;
    padding: 0;
    pointer-events: auto;
}

/* Mobile/Tablet: largura “full bleed” com margens laterais na viewport (JS adiciona a classe) */
.floating-cat-pop.floating-cat-pop--viewport {
    position: fixed;
    left: 20px;
    right: 20px;
    width: auto;
}

.floating-cat-pop[hidden] {
    display: none !important;
}

.floating-cat-pop__backdrop {
    display: none;
}

.floating-cat-pop:not([hidden]) .floating-cat-pop__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: auto;
    z-index: 0;
}

.floating-cat-pop:not([hidden]) .floating-cat-pop__sheet {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.floating-cat-pop__sheet {
    position: relative;
    width: 100%;
    max-width: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
}

.floating-cat-pop.floating-cat-pop--viewport .floating-cat-pop__sheet {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}

.floating-cat-pop__list {
    display: flex;
    flex-direction: column;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.floating-cat-pop__item {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 0 16px;
    min-height: 48px;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font: inherit;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.floating-cat-pop__item:last-child {
    border-bottom: none;
}

.floating-cat-pop__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.floating-cat-pop__item-visual {
    width: 48px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
    border: 1px solid #f3f4f6;
}

.floating-cat-pop__emoji {
    font-size: 20px;
    line-height: 1;
}

.floating-cat-pop__emoji i {
    font-size: 16px;
    color: #4b5563;
}

.floating-cat-pop__item-txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-cat-pop__item.is-active .floating-cat-pop__row {
    margin-left: -5px;
}

.floating-cat-pop__item.is-active .floating-cat-pop__item-txt {
    color: #ef4444;
}

.floating-cat-pop__item.is-active {
    background: rgba(239, 68, 68, 0.2);
}

.floating-cat-pop__item:hover .floating-cat-pop__item-txt {
    color: #dc2626;
}

.floating-cat-pop__item:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.02);
}

.floating-cat-pop__item:active {
    transform: scale(0.99);
}

/* (dropdown) sem padding responsivo */

.floating-toolbar-icon-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: linear-gradient(145deg, #f9fafb 0%, #e5e7eb 100%);
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        background 0.15s ease;
}

.floating-toolbar-icon-btn:hover {
    transform: scale(1.1);
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 100%);
}

.floating-toolbar-icon-btn:active {
    transform: scale(0.95);
}

.floating-toolbar-search-fab {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 6px;
    border: none;
    background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.floating-toolbar-search-fab:hover {
    transform: scale(1.1);
    filter: brightness(1.05);
}

.floating-toolbar-search-unit.is-search-open .floating-toolbar-search-fab:hover {
    transform: none;
    filter: none;
}

.floating-toolbar-search-fab:active {
    transform: scale(0.95);
}

/* Busca expansível: abre da direita para a esquerda (referência layoutnovo) */
.floating-toolbar-search-unit {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.floating-catalog-toolbar__controls {
    position: relative;
}

.floating-catalog-toolbar__controls.is-search-overlay > :not(.floating-toolbar-search-unit) {
    opacity: 0;
    pointer-events: none;
}

.floating-toolbar-search-unit.is-search-open {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    z-index: 12;
    transform-origin: right center;
    transition: transform 0.15s ease;
    align-items: stretch;
}

.floating-toolbar-search-unit.is-search-open.is-search-hover {
    transform: scale(1.04);
}

.floating-toolbar-search-grow {
    display: grid;
    min-width: 0;
    transition: grid-template-columns 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    grid-template-columns: 0fr;
    flex: 1 1 auto;
    height: 40px;
    align-items: stretch;
}

.floating-toolbar-search-unit.is-search-open .floating-toolbar-search-grow {
    grid-template-columns: 1fr;
}

.floating-toolbar-search-grow-inner {
    min-width: 0;
    overflow: hidden;
    height: 40px;
}

.floating-toolbar-search-field {
    display: flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px 0 12px;
    background: #fff;
    border: 1px solid #ef4444;
    border-right: none;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.floating-toolbar-search-unit.is-search-open .floating-toolbar-search-field:focus-within {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22);
    border-color: #dc2626;
}

.floating-menu-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0 6px 0 0;
    font-size: 0.8125rem;
    color: #374151;
    outline: none;
    font-family: inherit;
}

.floating-menu-search-input::placeholder {
    color: #9ca3af;
}

.floating-search-clear-btn {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    border: none;
    background: transparent;
    color: #ef4444;
    font-weight: 800;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 6px 2px;
    font-family: inherit;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.floating-search-clear-btn:hover {
    filter: brightness(0.88);
    transform: scale(1.06);
}

.floating-toolbar-search-unit.is-search-open .floating-toolbar-search-fab {
    border-radius: 0 6px 6px 0;
}

@media (prefers-reduced-motion: reduce) {
    .floating-toolbar-search-grow {
        transition: none;
    }
}

.floating-filter-pop {
    position: fixed;
    inset: auto;
    z-index: 2090;
    background: transparent;
    display: block;
    padding: 0;
    pointer-events: auto;
    transform: translateX(-50%);
}

.floating-filter-pop[hidden] {
    display: none !important;
}

.floating-filter-pop__card {
    background: #fff;
    border-radius: 14px;
    padding: 0;
    max-width: 360px;
    width: 360px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
    overflow: hidden;
}

.floating-filter-pop__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #1f2937;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.floating-filter-pop__close {
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    padding: 6px;
    border-radius: 10px;
    transition: background 0.2s, color 0.2s;
}

.floating-filter-pop__close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #e5e7eb;
}

#floating-filter-title {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.floating-filter-pop__list {
    display: flex;
    flex-direction: column;
}

.floating-filter-pop__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    min-height: 48px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-align: left;
    font-weight: 800;
    font-size: 0.95rem;
    color: #374151;
    transition: background 0.15s, color 0.15s, transform 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
}

.floating-filter-pop__item:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
    transform: scale(1.02);
}

.floating-filter-pop__item:active {
    transform: scale(0.99);
}

.floating-filter-pop__item.is-active {
    background: rgba(239, 68, 68, 0.20);
    color: #dc2626;
}

.floating-filter-pop__item-ic {
    width: 48px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
    color: inherit;
}

.floating-filter-pop__item-txt {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.floating-filter-pop__footer {
    display: none !important;
}

.floating-filter-pop__clear-sort {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25);
    transition: filter 0.15s, transform 0.15s;
}

.floating-filter-pop__clear-sort:hover {
    filter: brightness(1.05);
    transform: translateY(-1px) scale(1.03);
}

.floating-filter-pop__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: #444;
    cursor: pointer;
    margin-bottom: 12px;
}

.floating-filter-pop__row input {
    margin-top: 3px;
}

.floating-filter-pop__clear {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e0e0e5;
    background: #f7f7fa;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    color: #333;
}

.category-nav--secondary {
    display: flex !important;
    justify-content: center;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 4px 6px -4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: none;
    border-right: none;
}

.category-nav.category-nav--secondary {
    max-width: 1250px;
    width: 100%;
    margin: 10px auto 18px;
    padding: 10px 16px;
    gap: 10px;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Category Quick Nav */
.category-nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 15px 10px;
    margin: 10px auto 25px;
    max-width: 800px;
    /* Alinhado com o corpo do site */
    width: 95%;
    /* Pequena margem nas laterais em telas menores */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Firefox: Barra fina */
    scrollbar-color: var(--primary-color) #f0f0f0;
}

/* Estilização da barra de rolagem para Chrome/Edge/Safari (Desktop) */
.category-nav::-webkit-scrollbar {
    height: 4px;
    /* Barra bem fininha e elegante */
    display: block;
    /* Garante que apareça no desktop */
}

.category-nav::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.category-nav::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

/* No celular, mantemos a barra escondida para o visual ficar limpo como estava */
@media (max-width: 768px) {
    .category-nav::-webkit-scrollbar {
        display: none;
    }

    .category-nav {
        scrollbar-width: none;
    }
}

/* =========================================
   PREMIUM MODAL STYLES
   ========================================= */

.modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10000 !important;
    align-items: center;
    /* Center on desktop default */
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Evita overlay invisível (display:flex sem .open) bloquear toda a página */
    pointer-events: none;
}

.modal-overlay.open {
    display: flex;
    /* overridden by JS usually, but here for reference */
    opacity: 1;
    pointer-events: auto;
}

#hm-checkout-final-map-modal:not(.is-open) {
    display: none !important;
    pointer-events: none !important;
}

/* Acima do #image-zoom-modal (13350) e do #product-modal (13100) */
#auth-modal.modal-overlay {
    z-index: 13600 !important;
}

/* Auth modal: sempre centralizado (principalmente no mobile) */
#auth-modal.modal-overlay.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px;
    height: 100dvh !important;
}

#auth-modal .auth-modal-card {
    margin: auto !important;
}

@media (max-width: 768px) {
    #auth-modal.modal-overlay.open {
        padding: 14px;
    }

    #auth-modal .auth-modal-card {
        width: min(400px, calc(100vw - 28px)) !important;
        max-height: calc(100dvh - 28px) !important;
    }
}

/* Acima do #product-modal.open (13100) quando o zoom abre por cima do modal do produto */
#image-zoom-modal.modal-overlay,
#image-zoom-modal.image-zoom-modal.open {
    z-index: 13350 !important;
}

#geo-modal.modal-overlay {
    z-index: 11000 !important;
}

.modal-card {
    background: white;
    width: 100%;
    max-width: 500px;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    position: relative;
}

/* Store info modal: centralizar no mobile */
#store-info-modal.modal-overlay.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px;
    height: 100dvh !important;
}

@media (max-width: 768px) {
    #store-info-modal.modal-overlay.open {
        padding: 14px;
    }

    #store-info-modal .modal-card {
        width: min(420px, calc(100vw - 28px)) !important;
        max-height: calc(100dvh - 28px) !important;
        margin: auto !important;
    }
}

.modal-grabber {
    display: none;
    width: 40px;
    height: 5px;
    background: #e0e0e0;
    border-radius: 10px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

.modal-overlay.open .modal-card {
    transform: translateY(0);
}

.product-share-modal__card {
    max-width: 360px;
    padding: 24px 22px 22px;
}

.product-share-modal__title {
    margin: 0 32px 6px 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.product-share-modal__sub {
    font-size: 0.75rem;
    color: #64748b;
    word-break: break-all;
    margin: 0 0 14px;
    line-height: 1.35;
}

.product-share-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-share-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 12.9px;
    font-weight: 600;
    color: #1e293b;
    text-align: left;
}

.product-share-action-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.product-share-action-btn i {
    width: 22px;
    text-align: center;
    color: #475569;
}

.product-share-modal__empty {
    font-size: 0.86rem;
    color: #64748b;
    margin: 10px 0 0;
    line-height: 1.45;
}

/* Modal "Informações da loja": Entrega / Retirada (referência cabeçalho escuro) */
#store-info-modal .store-info-modal__mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 18px;
}

#store-info-modal .store-info-modal__mode-pill {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(28, 28, 34, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#store-info-modal .store-info-modal__mode-pill i {
    font-size: 1.05rem;
    opacity: 0.95;
}

/* Pop-up endereço de entrega (cabeçalho escuro, alinhado ao visual layoutnovo) */
.header-address-modal .header-address-modal__card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(62, 39, 35, 0.35);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.header-address-modal .header-address-modal__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #5d4037, #3e2723);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.header-address-modal__close {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition:
        background 0.2s,
        transform 0.2s ease;
}

.header-address-modal__close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.08);
}

.header-address-modal__body {
    padding: 18px 18px 20px;
    background: #fff;
}

.header-address-modal__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #6b7280;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.header-address-modal__text {
    margin: 0 0 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.45;
}

.header-address-modal__primary {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    margin-bottom: 12px;
    font-family: inherit;
    transition: filter 0.15s, transform 0.15s;
}

.header-address-modal__primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.header-address-modal__secondary {
    display: block;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    padding: 8px;
}

.header-address-modal__secondary:hover {
    text-decoration: underline;
}

/* Modal endereço — variante lista “MEUS ENDEREÇOS” (layoutnovo) */
.header-address-modal--layoutnv .header-address-modal__hd {
    background: #1e2732;
    padding: 9px 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

#header-address-modal .header-address-modal__hd {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Editor inline (HOME): usa o layout do modal de endereço */
#hmAddressEditorModal .hm-inline-editor__card {
    max-width: 432px;
    width: calc(100% - 24px);
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28);
}

/* Editor inline: alinha padding vertical ao modal principal (layoutnv) */
#hmAddressEditorModal .header-address-modal__hd {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Editor inline: oculta o texto de cadastro (só faz sentido no fluxo "novo endereço") */
#hmAddressEditorModal .header-address-modal__add-q {
    display: none !important;
}

#hmAddressEditorModal .hm-inline-editor__section {
    padding-top: 14px;
}

/* Editor inline: espaçamento acima do "Nome do endereço" */
#hmAddressEditorModal .header-address-modal__field--full .header-address-modal__ctrl-label {
    margin-top: 5px;
}

/* Editor inline: mais respiro acima de "Rua / logradouro" */
#hmAddressEditorModal .header-address-modal__field--street .header-address-modal__ctrl-label {
    margin-top: 7px;
}

/* Editor inline: mais respiro acima de "Número" */
#hmAddressEditorModal .header-address-modal__field--num .header-address-modal__ctrl-label {
    margin-top: 7px;
}

/* Editor inline: input apelido em maiúsculas */
#hmAddressEditorModal .hm-inline-editor__upper {
    text-transform: uppercase;
}

/* Editor inline: espaço abaixo do campo apelido */
#hmAddressEditorModal #hm-editor-custom-label-wrap {
    margin-bottom: 7px;
}

/* Editor inline: botão salvar "cresce" no hover */
#hmAddressEditorModal .header-address-modal__save-addr-btn {
    transition: transform 180ms ease, filter 180ms ease;
}

#hmAddressEditorModal .header-address-modal__save-addr-btn:hover {
    transform: scale(1.06);
}

#hmAddressEditorModal .header-address-modal__save-addr-btn:active {
    transform: scale(1.02);
}

.header-address-modal__back {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition:
        background 0.15s,
        transform 0.2s ease;
}

.header-address-modal__back:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-50%) scale(1.12);
}

.header-address-modal__title {
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-left: 2px;
    text-align: center;
    line-height: 1.25;
}

.header-address-modal--layoutnv .header-address-modal__close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    width: auto;
    height: auto;
    padding: 6px;
    font-size: 1rem;
    border-radius: 8px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        transform 0.2s ease;
}

.header-address-modal--layoutnv .header-address-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
    transform: translateY(-50%) scale(1.12);
}

.header-address-modal__body--layoutnv {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: min(640px, 72vh);
    min-height: 0;
}

.header-address-modal--twostep .header-address-modal__step {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.header-address-modal__list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    background: #fff;
}

.header-address-modal__list--plain {
    background: #fff;
}

.header-address-modal__list-hint {
    margin: 0;
    padding: 0 16px 12px;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.45;
}

.header-address-modal__list-inline-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
}

.header-address-modal__secondary--compact {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    font-size: 0.82rem;
}

.header-address-modal__list-footer {
    flex-shrink: 0;
    padding: 14px 16px 18px;
    background: #fff;
    border-top: 1px solid #eef0f3;
}

.header-address-modal__guest-cta-card {
    background: rgba(0, 86, 179, 0.06);
    border: 1px solid rgba(0, 86, 179, 0.18);
    border-radius: 14px;
    padding: 12px 12px;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
    margin-top: 10px;
}

.header-address-modal__guest-list-note {
    font-size: 0.74rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

.header-address-modal__list-footer.is-hidden-by-input {
    display: none !important;
}

.header-address-modal__ghost-link--footer {
    margin-top: 10px;
}

.header-address-modal__novo-btn {
    border-radius: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    gap: 10px;
}

.header-address-modal__novo-ic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.header-address-modal__form-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.header-address-modal__form-lead {
    margin: 0;
    padding: 14px 16px 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.45;
}

.header-address-modal__cep-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
}

.header-address-modal__field-hint {
    margin: 6px 0 0;
    font-size: 0.72rem;
    color: #9ca3af;
    line-height: 1.35;
}

.header-address-modal__field-hint--geo {
    margin-top: 8px;
}

.header-address-modal__req {
    color: #e31e24;
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: 0;
}

.header-address-modal__guest-form-note {
    margin: 12px 0 0;
    padding: 12px;
    background: #f9fafb;
    border-radius: 12px;
    font-size: 0.78rem;
    color: #4b5563;
    line-height: 1.4;
}

.header-address-modal__form-footer-bar {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid #eef0f3;
    background: #fff;
}

.header-address-modal__step--form .header-address-modal__add-section {
    padding-top: 8px;
}

.header-address-modal__guest-lead {
    margin: 0;
    padding: 18px 18px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.45;
}

.header-address-modal__empty {
    margin: 0;
    padding: 20px 18px;
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

.header-address-modal__list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.header-address-modal__row {
    display: grid;
    grid-template-columns: 36px 1fr max-content;
    grid-template-rows: auto;
    align-items: start;
    gap: 8px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
}

.header-address-modal__row.is-default {
    background: #e8f4fc;
}

/* Linha a deslizar para o topo ao definir PRINCIPAL (animação longa no JS) */
.header-address-modal__row.hm-moving-to-top {
    position: relative;
    z-index: 3;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
}

#header-address-modal .header-address-modal__row {
    align-items: center;
}

.header-address-modal__row-ic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: #4b5563;
    font-size: 0.95rem;
}

.header-address-modal__row-main {
    min-width: 0;
}

.header-address-modal__row-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.header-address-modal__row-addr {
    margin-top: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}

.header-address-modal__row-cep {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
}

.header-address-modal__badge {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border: 0;
    outline: 0;
    box-shadow: none;
    border-radius: 999px;
    background: #e9ecef;
    color: #4b5563;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, color 180ms ease, filter 180ms ease;
}

.header-address-modal__row-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    justify-self: end;
    min-width: 0;
}

.header-address-modal__row-aside .header-address-modal__badge-form {
    margin: 0;
}

.header-address-modal__row-aside .header-address-modal__badge {
    align-self: center;
}

.header-address-modal__badge:focus,
.header-address-modal__badge:focus-visible {
    outline: 0;
    box-shadow: none;
}

.header-address-modal__badge-form .header-address-modal__badge:hover {
    background: #d1fae5;
    color: #065f46;
    transform: scale(1.08);
}

.header-address-modal__badge-form .header-address-modal__badge:active {
    transform: scale(1.02);
}

.header-address-modal__badge.is-on {
    background: #d1fae5;
    color: #065f46;
}

.header-address-modal__row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.header-address-modal__del-form {
    margin: 0;
    display: inline;
}

.header-address-modal__icon-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.82rem;
    padding: 0;
    transition:
        background 0.15s,
        color 0.15s;
}

.header-address-modal__icon-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.header-address-modal__icon-btn--danger:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.header-address-modal__footer-btns {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border-top: 1px solid #eef0f3;
    flex-shrink: 0;
}

.header-address-modal__primary--wide {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0066cc, #0056b3);
    box-shadow: 0 6px 16px rgba(0, 86, 179, 0.35);
}

.header-address-modal__primary--wide:hover {
    filter: brightness(1.05);
}

.header-address-modal__primary--link {
    text-align: center;
}

.header-address-modal__ghost-link {
    width: 100%;
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 6px;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.header-address-modal__ghost-link:hover {
    color: #1d4ed8;
}

.header-address-modal__secondary--btn {
    display: block;
    width: calc(100% - 36px);
    margin: 0 auto 8px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #f9fafb;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    color: #374151;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.header-address-modal__secondary--btn.header-address-modal__secondary--compact {
    margin-top: 12px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.32);
    background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 55%, #0ea5e9 100%);
    color: #fff;
    border: 2px solid transparent;
    background-image:
        linear-gradient(135deg, #1d4ed8 0%, #0284c7 55%, #0ea5e9 100%),
        linear-gradient(135deg, #0b2a6f 0%, #38bdf8 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    text-decoration: none;
}

.header-address-modal__secondary--compact .header-address-modal__secondary-word {
    text-decoration: none;
}

.header-address-modal__secondary--compact .header-address-modal__secondary-word--sep {
    opacity: 0.92;
    text-transform: none;
}

.header-address-modal__secondary--compact:hover .header-address-modal__secondary-word--action {
    text-decoration: none;
    transform: scale(1.08);
}

.header-address-modal__secondary--compact:hover .header-address-modal__secondary-word--sep {
    text-decoration: none !important;
}

.header-address-modal__secondary--btn:hover {
    background: linear-gradient(135deg, #1e40af 0%, #0369a1 55%, #0284c7 100%);
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.header-address-modal--layoutnv .header-address-modal__body .header-address-modal__primary--wide:first-of-type:not(.header-address-modal__primary--link) {
    margin: 0 18px 12px;
    width: calc(100% - 36px);
}

.header-address-modal--layoutnv .header-address-modal__guest-lead + .header-address-modal__primary--wide {
    margin: 0 18px 12px;
    width: calc(100% - 36px);
}

/* Modal endereço — cadastro CEP + chips (layoutnovo, 2º print) */
.header-address-modal--sheet .header-address-modal__hd {
    background: #1d2636;
    border-radius: 18px 18px 0 0;
}

.header-address-modal__add-section {
    padding: 14px 16px 16px;
    background: #fff;
}

.header-address-modal__add-q {
    margin: 10px 0 12px;
    padding: 10px 10px 12px 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    line-height: 1.35;
    background: #1d2636;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    box-sizing: border-box;
}

.header-address-modal__chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13.33px;
    margin-bottom: 14px;
}

@media (max-width: 360px) {
    .header-address-modal__chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

.header-address-modal__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 54px;
    padding: 6px 2px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.2s ease;
}

.header-address-modal__chip:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    border-color: #2563eb;
}

.header-address-modal__chip.is-selected:hover {
    box-shadow: 0 6px 16px rgba(0, 86, 179, 0.4);
    border-color: #93c5fd;
}

.header-address-modal__chip i {
    font-size: 1.15rem;
    color: #9ca3af;
}

.header-address-modal__chip.is-selected {
    background: #0056b3;
    color: #fff;
    border-color: #004a9a;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.35);
}

.header-address-modal__chip.is-selected i {
    color: #fff;
}

/* Foco no CEP: os 4 chips parecem sem seleção + contorno vermelho (convite a escolher tipo) */
.header-address-modal__add-section:has(#header-modal-cep:focus):not(:has(.header-address-modal__chip.is-selected)) .header-address-modal__chip {
    background: #fff;
    color: #6b7280;
    border: 2px solid #e31e24;
    box-shadow: none;
}

.header-address-modal__add-section:has(#header-modal-cep:focus):not(:has(.header-address-modal__chip.is-selected)) .header-address-modal__chip i {
    color: #9ca3af;
}

.header-address-modal__add-section:has(#header-modal-cep:focus):not(:has(.header-address-modal__chip.is-selected)) .header-address-modal__chip:hover {
    border-color: #b91c1c;
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.2);
    transform: scale(1.05);
}

.header-address-modal__cep-geo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(186px, 227px);
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
    min-width: 0;
}

/* Bloco minimizado: conferir endereço no mapa */
.header-address-modal__confirm-map {
    margin-top: 12px;
    margin-bottom: 4px;
}

.header-address-modal__confirm-map-toggle {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 42px 10px 16px;
    border: 1px solid rgba(6, 95, 70, 0.22);
    border-radius: 999px;
    background: #d1fae5;
    color: #065f46;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        filter 0.15s ease,
        transform 0.15s ease;
}

.header-address-modal__confirm-map-toggle:hover {
    background: #bbf7d0;
    border-color: rgba(6, 95, 70, 0.45);
    filter: brightness(1.02);
}

.header-address-modal__confirm-map-toggle.is-open .header-address-modal__confirm-map-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.header-address-modal__confirm-map-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    color: #065f46;
    flex-shrink: 0;
    opacity: 0.9;
    pointer-events: none;
}

/* Título centralizado, uma linha, capitalização do HTML (ex.: "ou", "endereço") */
.header-address-modal__confirm-map-title {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    white-space: nowrap;
    font-size: clamp(0.58rem, 1.85vw + 0.28rem, 0.75rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.2;
    color: inherit;
    text-align: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.header-address-modal__confirm-map-title::-webkit-scrollbar {
    height: 0;
}

.header-address-modal__confirm-map-panel {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.header-address-modal__confirm-map-canvas {
    width: 100%;
    height: min(42vh, 280px);
    min-height: 200px;
    background: #e5e7eb;
}

.header-address-modal__confirm-map-coords {
    margin: 0;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-address-modal__confirm-map-coord-label {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4b5563;
}

.header-address-modal__confirm-map-coords-line {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.header-address-modal__confirm-map-fill-status {
    margin: 0;
    padding: 8px 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #1e3a5f;
    background: #eff6ff;
    border-top: 1px solid #dbeafe;
    font-weight: 600;
}

.header-address-modal__confirm-map-hint {
    margin: 0;
    padding: 8px 12px 10px;
    font-size: 0.75rem;
    color: #6b7280;
    background: #fff;
}

/* Leaflet: botão de tela cheia (controle custom) */
.hm-leaflet-fs-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 18px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.hm-leaflet-fs-btn:hover {
    background: #f3f3f3;
}

.hm-confirm-map-store-pin-leaflet {
    background: transparent !important;
    border: none !important;
}

.hm-confirm-map-store-pin {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transform: translateY(-4px);
}

/* Pin da loja só com ícone; nome completo no title do marcador */
.hm-confirm-map-store-pin.hm-confirm-map-store-pin--icon-only {
    display: block;
    flex-direction: unset;
    align-items: unset;
    gap: 0;
    transform: none;
    box-sizing: border-box;
}

.hm-confirm-map-store-name {
    max-width: 160px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #a3e635; /* verde limão */
    color: #14532d;      /* verde escuro */
    font-weight: 800;
    font-size: 12px;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid #14532d;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.hm-confirm-map-store-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #a3e635;
    border: 3px solid #14532d;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.hm-confirm-map-store-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% - 4px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #a3e635;
    filter: drop-shadow(0 2px 0 rgba(20,83,45,.9));
}

.header-address-modal__cep-tool {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header-address-modal__cep-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    background: #fff;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Grelha: 1fr CEP + coluna geo (coluna geo mais larga; CEP ~7px mais estreito) */
.header-address-modal__cep-geo-row > .header-address-modal__cep-wrap {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.header-address-modal__cep-input {
    flex: 1 1 0%;
    min-width: 0;
    border: none;
    padding: 12px 10px 12px 14px;
    font-size: calc(0.95rem - 5px);
    font-weight: 600;
    font-family: inherit;
    color: #111827;
}

/* Editor inline: CEP alinhado com o botão geo (39px) */
#hmAddressEditorModal .header-address-modal__cep-input {
    height: 39px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 39px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #hmAddressEditorModal .header-address-modal__cep-input {
        font-size: calc(0.95rem - 5px + 5px);
    }

    #hmAddressEditorModal .header-address-modal__cep-input::placeholder {
        font-size: calc(0.95rem - 5px);
    }
}

.header-address-modal__cep-input::placeholder {
    color: #9ca3af;
    font-size: inherit;
}

.header-address-modal__cep-input:focus {
    outline: none;
}

.header-address-modal__cep-go {
    flex: 0 0 38px;
    width: 38px;
    border: none;
    background: #0056b3;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition:
        filter 0.15s,
        transform 0.2s ease;
}

.header-address-modal__cep-go:hover {
    filter: brightness(1.08);
    transform: scale(1.08);
}

.header-address-modal__cep-go:focus,
.header-address-modal__cep-go:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: -2px;
}

.header-address-modal__geo-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    background: #d31219;
    color: #fff;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 14px rgba(211, 18, 25, 0.35);
    transition:
        filter 0.15s,
        transform 0.2s ease;
}

.header-address-modal__geo-btn--side {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 39px;
    padding: 0 6px 0 13px;
    font-size: 0.48rem;
    line-height: 1.15;
    text-align: left;
    box-sizing: border-box;
    box-shadow: none;
}

.header-address-modal__geo-btn--side i {
    flex-shrink: 0;
    font-size: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-address-modal__geo-btn--side span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(1em + 4px);
    line-height: 1.15;
    align-self: center;
}

#header-address-modal .header-address-modal__cep-geo-row {
    grid-template-columns: minmax(0, 1fr) minmax(178px, 219px);
    align-items: center;
}

#header-address-modal .header-address-modal__cep-input {
    height: 37px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 37px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #header-address-modal .header-address-modal__cep-input {
        font-size: calc(0.95rem - 5px + 5px);
    }

    #header-address-modal .header-address-modal__cep-input::placeholder {
        font-size: calc(0.95rem - 5px);
    }
}

#header-address-modal .header-address-modal__cep-go {
    flex: 0 0 38px;
    width: 38px;
}

#header-address-modal .header-address-modal__geo-btn--side,
#checkout-form #address-group > .header-address-modal__geo-btn--side {
    height: 37px;
}

#header-address-modal .header-address-modal__geo-btn--side span,
#checkout-form #address-group > .header-address-modal__geo-btn--side span {
    font-size: calc(1em + 3px);
    transform: translateY(1px);
}

#checkout-form #address-group > .header-address-modal__geo-btn.header-address-modal__geo-btn--side {
    margin-bottom: 15px;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
}

#checkout-form #address-group > .header-address-modal__geo-btn--side span {
    flex: 0 1 auto;
    text-align: center;
}

@media (max-width: 340px) {
    .header-address-modal__cep-geo-row {
        grid-template-columns: minmax(0, 1fr) minmax(157px, 195px);
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .header-address-modal__geo-btn--side {
        font-size: 0.45rem;
        height: 39px;
        padding: 0 5px 0 12px;
    }

    #checkout-form #address-group > .header-address-modal__geo-btn--side {
        padding: 0 10px;
    }

    #header-address-modal .header-address-modal__cep-geo-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #header-address-modal .header-address-modal__geo-btn--side,
    #checkout-form #address-group > .header-address-modal__geo-btn--side {
        height: 37px;
    }

    #header-address-modal .header-address-modal__cep-input {
        font-size: 0.68rem;
        padding-left: 6px;
        padding-right: 4px;
    }
}

.header-address-modal__geo-btn:hover {
    filter: brightness(1.05);
    transform: scale(1.04);
}

.header-address-modal__geo-btn:active {
    transform: scale(0.98);
}

.header-address-modal__geo-btn i {
    font-size: 1rem;
}

.header-address-modal__profile-form {
    display: block;
    margin: 0;
    padding: 0;
}

.header-address-modal__addr-fields {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e5e7eb;
}

.header-address-modal__saved-inline {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
}

.header-address-modal__saved-inline-title {
    margin: 0 0 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.86rem;
    font-weight: 800;
    background: #1e2732;
    color: #fff;
    border-radius: 12px;
}

.header-address-modal__saved-inline-ic {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c81d25;
    font-size: 0.95rem;
    line-height: 1;
}

.header-address-modal__saved-inline-title-text {
    min-width: 0;
}

.header-address-modal__addr-fields-lead {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.4;
}

.header-address-modal__field-grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 10px 12px;
    margin-bottom: 14px;
}

.header-address-modal__field--full {
    grid-column: 1 / -1;
}

.header-address-modal__field--street {
    grid-column: 1 / span 11;
}

.header-address-modal__field--num {
    grid-column: 12 / -1;
    position: relative;
    overflow: visible;
    padding-bottom: 0;
}

.header-address-modal__field--neighborhood {
    grid-column: 1 / span 11;
}

.header-address-modal__field--city {
    grid-column: 12 / -1;
}

.header-address-modal__field--uf {
    grid-column: 1 / span 11;
}

.header-address-modal__field--complement {
    grid-column: 12 / -1;
}

.header-address-modal__field--reference {
    grid-column: 1 / span 11;
}

.header-address-modal__field--save {
    grid-column: 12 / -1;
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.header-address-modal__field--save .header-address-modal__save-addr-btn {
    width: 100%;
    margin: 0;
    display: block;
}

.header-address-modal__field--note {
    grid-column: 1 / -1;
}

/* Modal de endereço: no mobile manter centralizado (não bottom sheet) */
@media (max-width: 768px) {
    .header-address-modal.modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
    }

    .header-address-modal .header-address-modal__card {
        width: calc(100% - 24px) !important;
        max-width: 432px !important;
        border-radius: 18px !important;
        max-height: calc(100vh - 24px) !important;
    }

    /* CEP + geo na mesma linha: colunas flexíveis + tipo compacto para o placeholder completo */
    #header-address-modal .header-address-modal__cep-geo-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    #header-address-modal .header-address-modal__cep-wrap {
        min-width: 0;
        width: auto;
    }

    #header-address-modal .header-address-modal__cep-go {
        flex: 0 0 34px;
        width: 34px;
    }

    #header-address-modal .header-address-modal__cep-input {
        font-size: 0.72rem;
        padding-left: 8px;
        padding-right: 6px;
    }

    #header-address-modal .header-address-modal__geo-btn--side,
    #checkout-form #address-group > .header-address-modal__geo-btn--side {
        width: 100%;
        min-width: 0;
        padding: 0 5px 0 8px;
        gap: 4px;
        font-size: 0.42rem;
    }

    #checkout-form #address-group > .header-address-modal__geo-btn--side {
        padding: 0 8px;
    }

    #header-address-modal .header-address-modal__geo-btn--side i,
    #checkout-form #address-group > .header-address-modal__geo-btn--side i {
        font-size: 26px;
    }

    #header-address-modal .header-address-modal__geo-btn--side span,
    #checkout-form #address-group > .header-address-modal__geo-btn--side span {
        font-size: calc(1em + 1px);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #header-address-modal .header-address-modal__guest-cta-card {
        text-align: center;
    }

    #header-address-modal .header-address-modal__guest-list-note {
        font-size: 0.58rem;
        white-space: normal;
        line-height: 1.3;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 4px;
        box-sizing: border-box;
        letter-spacing: -0.015em;
        text-align: center;
    }
}

@media (max-width: 360px) {
    #header-address-modal .header-address-modal__guest-list-note {
        font-size: 0.52rem;
        letter-spacing: -0.02em;
        padding: 0 2px;
    }
}

.header-address-modal__ctrl-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 5px;
}

.header-address-modal__ctrl {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
}

.header-address-modal__ctrl:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}

.header-address-modal__profile-form.was-validated .header-address-modal__ctrl:invalid {
    border-color: #e31e24;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.18);
}

.header-address-modal__profile-form.was-validated .header-address-modal__ctrl:invalid:focus {
    border-color: #e31e24;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.22);
}

.header-address-modal__ctrl.is-required-attention {
    border-color: #e31e24;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.18);
}

.header-address-modal__number-hint {
    margin: 0;
    white-space: normal;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    color: #e31e24;
    pointer-events: none;
}

/* Modal principal: dica do número 1px menor */
#header-address-modal .header-address-modal__number-hint {
    font-size: calc(0.72rem - 1px);
}

@media (max-width: 768px) {
    #header-address-modal .header-address-modal__field--number-hint {
        min-width: 0;
    }

    #header-address-modal .header-address-modal__field--number-hint .header-address-modal__number-hint {
        white-space: nowrap;
        font-size: 0.54rem;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }
}

@media (max-width: 360px) {
    #header-address-modal .header-address-modal__field--number-hint .header-address-modal__number-hint {
        font-size: 0.5rem;
        letter-spacing: -0.03em;
    }
}

/* Editor inline: dica do número 1px menor */
#hmAddressEditorModal .header-address-modal__number-hint {
    font-size: calc(0.72rem - 1px);
}

.header-address-modal__field--num:not(.has-number-hint) .header-address-modal__number-hint {
    display: none;
}

.header-address-modal__field--num.has-number-hint {
    padding-bottom: 10px;
}

.header-address-modal__field--number-hint {
    display: none;
    grid-column: 1 / -1;
    text-align: right;
}

.header-address-modal__field--num.has-number-hint + .header-address-modal__field--number-hint {
    display: block;
    margin-top: 5px;
    margin-bottom: -5px;
}

.header-address-modal__field--num.has-number-hint + .header-address-modal__field--number-hint .header-address-modal__number-hint {
    transform: translateY(-7px);
}

.header-address-modal__chips.is-error .header-address-modal__chip {
    border-color: #e31e24 !important;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.14) !important;
}

.header-address-modal__addr-type-hint {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e31e24;
    line-height: 1.35;
    text-align: center;
}

/* display:block acima vence o [hidden] padrão em alguns navegadores — forçar ocultar */
.header-address-modal__addr-type-hint[hidden] {
    display: none !important;
}

.header-address-modal__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.header-address-modal__cep-followup {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
}

.header-address-modal__follow-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #374151;
    margin-bottom: 6px;
}

.header-address-modal__follow-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    margin-bottom: 10px;
}

.header-address-modal__save-addr-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #0066cc, #0056b3);
    color: #fff;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 86, 179, 0.35);
}

.header-address-modal__save-addr-btn:hover {
    filter: brightness(1.05);
}

.header-address-modal__profile-more {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2563eb;
}

.header-address-modal__saved-bar {
    background: #1d2636;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 16px;
    margin: 0;
}

.header-address-modal__guest-lead--compact {
    padding: 12px 16px 8px;
    font-size: 0.88rem;
}

.header-address-modal__footer-btns--tight {
    border-top: none;
    padding-top: 0;
}

.header-address-modal__cards {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: 12px 12px 16px;
    background: #f3f4f6;
}

.header-address-modal__row.header-address-modal__card {
    border-bottom: none;
}

.header-address-modal__card {
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 10px;
    padding: 12px 12px;
}

.header-address-modal__card:last-of-type {
    margin-bottom: 0;
}

.header-address-modal__row.is-default,
.header-address-modal__card.is-default {
    background: #f0f7ff;
    border-color: rgba(0, 86, 179, 0.15);
}

.header-address-modal__empty--in-cards {
    padding: 16px 8px;
    background: transparent;
}

.header-address-modal__footer-btns--in-cards {
    border-top: none;
    padding: 8px 0 0;
    background: transparent;
}

.header-address-modal__ghost-link--center {
    text-align: center;
}

.header-address-modal__row-ic--casa {
    color: #ea580c !important;
    background: #ffedd5 !important;
}

.header-address-modal__row-ic--trabalho {
    color: #92400e !important;
    background: #fef3c7 !important;
}

.header-address-modal__row-ic--faculdade {
    color: #7c3aed !important;
    background: #ede9fe !important;
}

.header-address-modal__row-ic--outro {
    color: #db2777 !important;
    background: #fce7f3 !important;
}

/* Mobile / tablets: posicionar o modal de produto e o zoom mais para cima e aproximar a imagem */
@media (max-width: 768px) {
    /* Afeta apenas o modal de produto, não os outros modais (rastreio, loja fechada etc.) */
    #product-modal.modal-overlay {
        overflow: hidden !important;
    }

    #product-modal {
        align-items: flex-end !important;
        padding-top: 0;
    }

    /* Card do modal de produto em mobile: bottom-sheet — cantos superiores arredondados, inferiores retos */
    #product-modal .modal-card {
        margin-top: 0;
        padding: 10px 4px 0;
        max-height: 92vh;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        min-height: 0;
    }

    /* Área rolável só no .modal-body; sem barra visível (WebKit/Android/iOS) */
    #product-modal .modal-body {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 0 !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #product-modal .modal-body::-webkit-scrollbar,
    #product-modal .modal-body::-webkit-scrollbar-track,
    #product-modal .modal-body::-webkit-scrollbar-thumb,
    #product-modal .modal-body::-webkit-scrollbar-thumb:hover {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Lista de adicionais: um único scroll no .modal-body (evita barra extra da .addon-list) */
    #product-modal #modal-addons-list.addon-list {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 8px !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        flex: none !important;
        min-height: 0;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #product-modal #modal-addons-list.addon-list::-webkit-scrollbar,
    #product-modal #modal-addons-list.addon-list::-webkit-scrollbar-track,
    #product-modal #modal-addons-list.addon-list::-webkit-scrollbar-thumb {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Cartões das etapas e blocos relacionados: sem margem extra lateral */
    #product-modal .addon-option,
    #product-modal .item-obs-container,
    #product-modal .modal-qty-actions-row,
    #product-modal .modal-qty-actions-row--floating {
        margin-left: 0;
        margin-right: 0;
    }

    /* Padronizar paddings horizontais "duros" para alinhar à mesma largura dos cartões */
    #product-modal #addons-subtitle,
    #product-modal .item-obs-container,
    #product-modal .modal-qty-actions-row,
    #product-modal .modal-qty-actions-row--floating {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Box de ajuda dos adicionais: reduzir margens internas */
    #product-modal #modal-addons-section > div:has(#addons-helper-text) {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    #product-modal #addons-helper-text {
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
    }

    /* Título (coluna direita) e preço no header */
    #product-modal .modal-product-highlight__side #modal-product-name {
        font-size: 1.1rem;
        line-height: 1.25;
    }

    /* Descrição do produto: ocupa toda largura útil */
    #product-modal #modal-product-desc {
        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* Barra inferior (flutuante): fundo branco em largura total da tela (bottom sheet) */
    #product-modal .modal-qty-actions-row--floating {
        flex-wrap: nowrap;
        gap: 8px;
        z-index: 25;
        margin-top: -18px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        padding-top: 10px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: none !important;
        filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, 0.35)) !important;
    }

    #product-modal .modal-qty-actions-row--floating #modal-qty-wrapper {
        flex: 0 0 auto;
        min-width: 0;
    }

    #product-modal .modal-qty-actions-row--floating .modal-actions--product-inline {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    #product-modal .modal-qty-actions-row--floating .modal-add-inline .btn-confirm {
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    #product-modal .modal-qty-actions-row--floating .modal-footer-subtotal {
        font-size: 0.95rem;
    }

    /* Nome do complemento: 3px menor que no desktop e sem negrito */
    #product-modal .addon-option .addon-name {
        font-size: calc(1rem - 3px) !important;
        font-weight: 400 !important;
    }

    /* Modal de zoom da imagem no mobile */
    #image-zoom-modal {
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0;
    }

    #image-zoom-modal .modal-card {
        max-height: 90vh;
    }
}

/* Refinos para telas muito estreitas */
@media (max-width: 420px) {
    #product-modal .modal-card {
        padding: 8px 2px 0;
        padding-bottom: 0;
    }

    #product-modal .modal-body {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    #product-modal #modal-addons-list.addon-list {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    #product-modal #addons-subtitle,
    #product-modal .item-obs-container,
    #product-modal .modal-qty-actions-row,
    #product-modal .modal-qty-actions-row--floating {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Barra flutuante: em telas muito estreitas permite quebra controlada */
    #product-modal .modal-qty-actions-row--floating {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #product-modal .modal-qty-actions-row--floating #modal-qty-wrapper,
    #product-modal .modal-qty-actions-row--floating .modal-actions--product-inline {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    #product-modal .modal-qty-actions-row--floating .modal-add-inline {
        width: 100%;
    }
}

/* Modal produto: barra fixa no rodapé — fundo branco full-bleed; sombra por cima dos adicionais ao rolar */
#product-modal .modal-qty-actions-row--floating {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 25;
    box-sizing: border-box;
    width: calc(100% + 60px);
    max-width: none;
    margin-left: -30px;
    margin-right: -30px;
    margin-top: -18px;
    padding: 10px 30px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: none;
    /* Mesma sombra do #bottom-app-nav (.bottom-app-nav__bg) */
    filter: drop-shadow(0 -10px 24px rgba(0, 0, 0, 0.12));
    isolation: isolate;
}

@media (max-width: 768px) {
    #product-modal .modal-qty-actions-row--floating {
        filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, 0.35));
    }
}

#product-modal .modal-qty-actions-row--floating #modal-qty-wrapper {
    flex: 0 0 auto;
    min-width: 0;
}

#product-modal .modal-qty-actions-row--floating #modal-qty-wrapper .addon-qty-controls {
    position: static;
    flex-shrink: 0;
}

#product-modal .modal-qty-actions-row--floating #modal-qty-wrapper .addon-qty-btn {
    box-shadow: none !important;
}

#product-modal .modal-qty-actions-row--floating #modal-qty-wrapper .addon-qty-val {
    min-width: 28px;
    text-align: center;
}

/* Quantidade digitável no modal (produto + complementos): estilo alinhado ao input do carrinho, mesma pegada visual do chip */
#product-modal .addon-qty-controls input.addon-qty-val.modal-addon-qty-val,
#product-modal #modal-qty-wrapper .addon-qty-controls input.addon-qty-val.modal-product-qty-val {
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    min-width: 25px;
    width: 28px;
    max-width: 34px;
    font: inherit;
    font-weight: 800;
    font-size: inherit;
    line-height: 1.2;
    text-align: center;
    color: inherit;
    box-sizing: border-box;
}

#product-modal .addon-qty-controls input.addon-qty-val.modal-addon-qty-val:focus,
#product-modal #modal-qty-wrapper .addon-qty-controls input.addon-qty-val.modal-product-qty-val:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

#product-modal .modal-qty-actions-row--floating .modal-actions--product-inline {
    margin-top: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    background: transparent !important;
    border-top: none !important;
}

#product-modal .modal-add-inline {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
}

#product-modal .modal-add-inline .btn-confirm {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px;
    font-size: 1.05rem;
    background: var(--primary-color);
    color: #fff;
    box-shadow: none;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-color);
}

#product-modal .modal-add-inline .btn-confirm .btn-add-modal__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: 10px;
}

#product-modal .modal-add-inline .btn-confirm .btn-add-modal__label {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
    #product-modal #btn-add-modal:hover #btn-add-modal-label.btn-add-modal__label,
    #product-modal .modal-add-inline .btn-confirm:hover .btn-add-modal__label {
        transform: scale(1.12);
    }
}

#product-modal .modal-footer-subtotal {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
    white-space: nowrap;
}

/* Wider modal on larger screens for better use of space */
@media (min-width: 768px) {
    .modal-card {
        max-width: 640px;
    }
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;
    margin-bottom: 15px;
    position: relative;
}

/* No modal de produto, reduzir margens laterais para dar mais espaço aos textos das etapas */
#product-modal .modal-card {
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Desktop/tablet: card com cantos arredondados em todos os lados */
@media (min-width: 769px) {
    #product-modal .modal-card {
        border-radius: 24px;
    }
}

/* Mobile: bottom-sheet — só cantos superiores (sobrescreve .modal-card { border-radius: 24px }) */
@media (max-width: 768px) {
    #product-modal .modal-card {
        border-radius: 20px 20px 0 0 !important;
    }
}

#product-modal .modal-body {
    padding-left: 4px;
    padding-right: 4px;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
    /* Espaço para a barra flutuante; o conteúdo rola por baixo dela */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* Bloco foto + selo/descrição: no desktop duas colunas 50/50, imagem 1:1 */
#product-modal .modal-product-highlight {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 16px;
    box-sizing: border-box;
}

#product-modal .modal-product-highlight .modal-product-media {
    position: relative;
    width: calc(100% - 20px);
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#product-modal .modal-product-highlight .modal-product-media #modal-product-image {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: none;
    aspect-ratio: unset;
}

#product-modal .modal-product-highlight__side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
}

#product-modal .modal-product-highlight__text-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
}

@media (min-width: 768px) {
    #product-modal .modal-product-highlight {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 0 6px;
        margin-bottom: 18px;
    }

    #product-modal .modal-product-highlight .modal-product-media {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        max-width: none;
        margin: 0;
        aspect-ratio: 1 / 1;
        height: auto;
        align-self: flex-start;
    }

    #product-modal .modal-product-highlight .modal-product-media #modal-product-image {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        aspect-ratio: unset;
    }

    #product-modal .modal-product-highlight__side {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        justify-content: flex-start;
        padding: 4px 0 0 4px;
    }

    #product-modal .modal-product-highlight__side #modal-product-desc {
        text-align: left;
    }

    #product-modal .modal-product-highlight__side #modal-product-name {
        text-align: left;
    }

    #product-modal .modal-product-highlight__side .modal-product-badge-wrap {
        padding: 0;
    }
}

/*
 * Até ~992px: foto + texto em duas colunas e selo (#modal-product-badge-wrap) abaixo da imagem.
 * (Evita confundir “mobile” com viewport largo no DevTools; sobrescreve o flex do desktop ≥768.)
 */
@media (max-width: 991px) {
    #product-modal .modal-product-highlight {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 8px;
        align-items: start;
        padding: 0 4px;
        margin-bottom: 18px;
    }

    #product-modal .modal-product-highlight .modal-product-media {
        grid-column: 1;
        grid-row: 1;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        aspect-ratio: 1 / 1;
        height: auto;
        align-self: stretch;
    }

    #product-modal .modal-product-highlight .modal-product-media #modal-product-image {
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        object-fit: cover;
        aspect-ratio: unset;
    }

    #product-modal .modal-product-highlight__side {
        display: contents !important;
    }

    #product-modal #modal-product-badge-wrap {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        justify-self: stretch;
        width: 100%;
        margin: -5px 0 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #product-modal #modal-product-badge-wrap .product-badge {
        margin-left: auto;
        margin-right: auto;
    }

    #product-modal .modal-product-highlight__text-col {
        grid-column: 2;
        grid-row: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        align-self: start;
        padding: 4px 0 0 4px !important;
    }

    #product-modal .modal-product-highlight__side #modal-product-desc,
    #product-modal .modal-product-highlight__text-col #modal-product-desc {
        text-align: left !important;
    }

    #product-modal .modal-product-highlight__side #modal-product-name,
    #product-modal .modal-product-highlight__text-col #modal-product-name {
        text-align: left !important;
    }

    #product-modal .modal-product-highlight__side .modal-product-badge-wrap {
        padding: 0 !important;
    }
}

/* Galeria no modal: reutiliza classes do card v2; sem “scale” do hover do card */
#product-modal .modal-product-media.product-card-v2__media {
    cursor: default;
    transition: none;
}

@media (hover: hover) and (pointer: fine) {
    #product-modal .modal-product-media.product-card-v2__media:hover {
        transform: none;
    }
}

/* Ícone compartilhar no modal: mesma opacidade/efeitos do card SALG20 */
#product-modal .modal-product-media.product-card-v2__media .product-card-v2__media-corner-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 6;
    width: 28px;
    max-width: 22%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#product-modal .modal-product-media.product-card-v2__media .product-card-v2__media-corner-btn__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    #product-modal .modal-product-media.product-card-v2__media .product-card-v2__media-corner-btn:hover .product-card-v2__media-corner-btn__img {
        transform: scale(1.08);
        filter: brightness(1.05);
    }
}

#product-modal .modal-product-media.product-card-v2__media:hover .product-card-v2__media-corner-btn,
#product-modal .modal-product-media.product-card-v2__media:focus-within .product-card-v2__media-corner-btn {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

#product-modal .modal-product-badge-wrap {
    position: static;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: normal;
}

#product-modal .modal-product-badge-wrap .product-badge {
    position: static;
    display: inline-block;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Custom Scrollbar for Modal Body */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Modal de produto: barra de rolagem visível só em telas maiores (mobile sem barra) */
@media (min-width: 769px) {
    #product-modal .modal-body {
        scrollbar-width: thin;
        scrollbar-color: #b0b0b0 #f1f1f1;
    }

    #product-modal .modal-body::-webkit-scrollbar-thumb {
        background: #b0b0b0;
    }

    #product-modal .modal-body::-webkit-scrollbar-thumb:hover {
        background: #909090;
    }
}

/* Addon Selection Cards */
.addon-list,
.addon-group {
    margin: 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Space between items */
}

.addon-group {
    margin: 0 0 20px 0;
    /* Margin between groups */
}

/* Estado de erro para grupos obrigatórios não selecionados */
.addon-group.addon-group-error {
    border: 2px solid #c62828 !important;
    border-radius: 12px;
    padding: 6px;
    background: #fff5f5;
    position: relative;
}

.addon-group.addon-group-error::before {
    content: 'Selecione pelo menos uma opção deste grupo';
    display: block;
    font-size: 0.75rem;
    color: #b71c1c;
    font-weight: 600;
    margin-bottom: 6px;
}

.addon-group.addon-group-error .addon-name {
    color: #c62828 !important;
}

.addon-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 8px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    gap: 10px;
}

/* Foto do complemento à esquerda (modal do produto) */
.addon-option__inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.addon-option__thumb-wrap {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-left: 3px;
    align-self: center;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.addon-option__thumb-wrap--empty {
    color: #94a3b8;
    font-size: 0.82rem;
}

.addon-option__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.addon-option__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Modal produto: +/- na vertical do cartão inteiro (não só da linha de texto) */
#product-modal .addon-option {
    position: relative;
}

/* Fundo/borda iguais ao hover do cartão, de forma estática (não selecionado) */
#product-modal .addon-option:not(.selected) {
    background: #fff;
    border-color: #d0d7de;
}

#product-modal .addon-option .addon-qty-controls:not(.addon-check-wrapper) {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

#product-modal .addon-option .addon-actions:has(.addon-qty-btn) {
    padding-right: 120px;
    box-sizing: border-box;
}

#product-modal .addon-option:has(.addon-qty-btn) .addon-option__body {
    padding-right: 118px;
    box-sizing: border-box;
}

/* Espaço vertical fixo 5px entre nome do complemento e preço (gap no corpo; sem margin-top na linha de ações) */
#product-modal .addon-option__body {
    gap: 5px;
}

#product-modal .addon-option__body > .addon-actions {
    margin-top: 0;
}

#product-modal .addon-header .addon-name {
    line-height: 1.2;
}

#product-modal .addon-actions .addon-price {
    line-height: 1.2;
    color: var(--primary-color);
}

#product-modal .addon-group__req-badge {
    background: var(--primary-color);
    color: var(--primary-color-text, #fff);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    font-weight: 700;
}

#product-modal .addon-group__opt-badge {
    background: #b71c1c;
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    font-weight: 700;
}

/* Etapa opcional: fundo rosado claro + tracejado no tom do header do card */
#product-modal #modal-addons-list .addon-group[data-required="false"]:not(.addon-group-error) {
    background: #fff5f5;
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed #c62828;
    box-sizing: border-box;
    gap: 12px;
}

#product-modal .step-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

#product-modal .step-counter__text {
    color: var(--primary-color);
}

#product-modal .step-counter__check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff !important;
    font-size: 0.65rem;
    line-height: 1;
    flex-shrink: 0;
}

#product-modal .step-counter__check:not([hidden]) {
    display: inline-flex;
}

#product-modal .addon-qty-btn {
    font-size: calc(1.2rem - 5px);
    line-height: 1;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
}

#product-modal .addon-qty-btn.minus {
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

#product-modal .addon-qty-btn.plus {
    background: var(--primary-color);
    color: var(--primary-color-text, #fff) !important;
    border: 1px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Hover apenas em dispositivos com mouse — evita estado "preso" pós-toque no mobile */
@media (hover: hover) and (pointer: fine) {
    #product-modal .addon-qty-btn.minus:hover {
        background: var(--primary-color);
        color: var(--primary-color-text, #fff) !important;
        border-color: var(--primary-color);
        filter: brightness(1.08);
    }

    #product-modal .addon-qty-btn.plus:hover {
        background: var(--primary-color);
        color: var(--primary-color-text, #fff) !important;
        filter: brightness(1.08);
    }
}

/* No mobile, mostrar o destaque vermelho apenas enquanto o botão estiver pressionado */
#product-modal .addon-qty-btn.minus:active {
    background: var(--primary-color);
    color: var(--primary-color-text, #fff) !important;
    border-color: var(--primary-color);
}

#product-modal .addon-qty-btn.plus:active {
    filter: brightness(0.92);
}

/* Mobile (≤768px): vermelhos do header SALG20 / botão Adicionar — alinhados ao desktop do card */
@media (max-width: 768px) {
    #product-modal .addon-group__req-badge {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
        color: #fff !important;
        -webkit-text-fill-color: #fff;
    }

    #product-modal .addon-group__opt-badge {
        background: var(--pcv2-header-solid-end, #b71c1c);
        color: #fff !important;
        -webkit-text-fill-color: #fff;
    }

    #product-modal .step-counter__text {
        color: var(--pcv2-header-solid, #e53935);
        -webkit-text-fill-color: var(--pcv2-header-solid, #e53935);
    }

    #product-modal .addon-actions .addon-price,
    #product-modal .addon-header .addon-price {
        color: var(--pcv2-header-solid, #e53935) !important;
        -webkit-text-fill-color: var(--pcv2-header-solid, #e53935);
    }

    #product-modal p.modal-subtitle,
    #product-modal #addons-subtitle.modal-subtitle {
        color: var(--pcv2-header-solid, #e53935) !important;
        -webkit-text-fill-color: var(--pcv2-header-solid, #e53935);
        border-color: rgba(229, 57, 53, 0.35) !important;
        background: #fff5f5;
    }

    #product-modal .addon-qty-btn.plus {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
        color: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.12);
        -webkit-text-fill-color: #fff;
        box-shadow: 0 2px 8px rgba(183, 28, 28, 0.28);
    }

    /* Botão "Adicionar" (rodapé do modal) com a mesma cor do "+" dos adicionais */
    #product-modal .modal-add-inline .btn-confirm {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
        border: 1px solid rgba(0, 0, 0, 0.12);
        -webkit-text-fill-color: #fff;
    }

    #product-modal .addon-qty-btn.minus:active {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.12);
        -webkit-text-fill-color: #fff;
    }
}

@media (max-width: 768px) and (hover: hover) and (pointer: fine) {
    #product-modal .addon-qty-btn.minus:hover {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.12);
        -webkit-text-fill-color: #fff;
        filter: brightness(1.05);
        box-shadow: 0 2px 8px rgba(183, 28, 28, 0.28);
    }

    #product-modal .addon-qty-btn.plus:hover {
        background: var(--lv-primary-deep, #9a141c);
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.14);
        -webkit-text-fill-color: #fff;
        filter: brightness(1.06);
    }
}

/* Mobile: +/- da quantidade do produto (barra flutuante) = mesmo vermelho do #btn-add-modal */
@media (max-width: 991px) {
    #product-modal .modal-qty-actions-row--floating #modal-qty-wrapper .addon-qty-btn.plus {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%)) !important;
        color: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        -webkit-text-fill-color: #fff;
        box-shadow: 0 2px 8px rgba(183, 28, 28, 0.28);
    }

    #product-modal .modal-qty-actions-row--floating #modal-qty-wrapper .addon-qty-btn.minus:active {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%)) !important;
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        -webkit-text-fill-color: #fff;
    }
}

@media (max-width: 991px) and (hover: hover) and (pointer: fine) {
    #product-modal .modal-qty-actions-row--floating #modal-qty-wrapper .addon-qty-btn.minus:hover {
        background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%)) !important;
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        -webkit-text-fill-color: #fff;
        filter: brightness(1.05);
        box-shadow: 0 2px 8px rgba(183, 28, 28, 0.28);
    }

    #product-modal .modal-qty-actions-row--floating #modal-qty-wrapper .addon-qty-btn.plus:hover {
        background: var(--lv-primary-deep, #9a141c) !important;
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.14) !important;
        -webkit-text-fill-color: #fff;
        filter: brightness(1.06);
    }
}

/* Garante que o preço dos adicionais nunca quebre em duas linhas */
#product-modal .addon-price {
    white-space: nowrap;
}

#product-modal .addon-qty-val {
    font-size: calc(1rem + 3px);
    font-weight: 800;
}

/* Complemento selecionado no modal: mesmo verde do cartão multi-qtd (inclui qtd = 1 sem --multi-qty) */
#product-modal .addon-option.selected:not(.addon-option--qty-locked) {
    border: 1.5px solid #22c55e !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
    background: #ecfdf5 !important;
}

#product-modal .addon-option.selected:not(.addon-option--qty-locked):hover {
    background: #ecfdf5 !important;
    border-color: #22c55e !important;
}

#product-modal .addon-option.selected:not(.addon-option--qty-locked) .check-indicator {
    background: #22c55e;
    border-color: #16a34a;
}

#product-modal .addon-option.selected:not(.addon-option--qty-locked):has(.addon-qty-btn) .addon-price {
    color: #16a34a !important;
}

#product-modal .addon-option.selected:not(.addon-option--qty-locked) .addon-subtotal {
    color: #15803d !important;
}

/* Limite (X/Y) atingido: opções ainda com 0 ficam neutras; todos os "+" desabilitados */
#product-modal .addon-group--max-reached .addon-option--qty-locked {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(1);
    transition:
        opacity 0.2s ease,
        filter 0.2s ease;
}

#product-modal .addon-group--max-reached .addon-option--qty-locked .addon-name {
    color: #94a3b8 !important;
}

#product-modal .addon-group--max-reached .addon-option--qty-locked .addon-price {
    color: #94a3b8 !important;
}

#product-modal .addon-group--max-reached .addon-option--qty-locked .addon-subtotal {
    color: #94a3b8 !important;
}

#product-modal .addon-group--max-reached .addon-option--qty-locked.addon-option--multi-qty {
    border-color: #e5e7eb !important;
    box-shadow: none !important;
}

#product-modal .addon-group--max-reached .addon-option--qty-locked .addon-qty-controls {
    background: #eef0f3 !important;
    border-color: #e5e7eb !important;
}

#product-modal .addon-group--max-reached .addon-qty-btn.plus:disabled {
    background: #22c55e !important;
    border-color: #16a34a !important;
    color: #fff !important;
    opacity: 1;
    filter: none;
    cursor: not-allowed;
}

/* Etapa no limite (X/Y): check verde, selo e cartões selecionados em tons de verde */
#product-modal .addon-group--max-reached .step-counter__text {
    color: #16a34a !important;
}

#product-modal .addon-group--max-reached .addon-group__req-badge {
    background: #16a34a;
    color: #fff;
}

#product-modal .addon-group--max-reached .addon-group__opt-badge {
    background: #16a34a;
    color: #fff;
}

#product-modal .addon-group--max-reached .addon-option.selected:not(.addon-option--qty-locked) .addon-qty-val {
    font-size: calc((1rem + 3px) - 3px);
}

#product-modal #modal-addons-section.modal-addons-section--has-max #addons-subtitle {
    color: #15803d !important;
    font-weight: 800;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98) 0%, rgba(209, 250, 229, 0.65) 100%);
    border-radius: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

/* Banner de ajuda dos adicionais: oculto no modal (cashback fica na coluna do produto) */
#product-modal #modal-addons-section > div:has(#addons-helper-text) {
    display: none !important;
}

/* Miniatura complemento: hover amplia na moldura; clique abre zoom (JS) */
#product-modal .addon-option__thumb-wrap:not(.addon-option__thumb-wrap--empty) {
    cursor: zoom-in;
}
#product-modal .addon-option__thumb {
    transition: transform 0.2s ease;
    transform-origin: center center;
}
#product-modal .addon-option__thumb-wrap:not(.addon-option__thumb-wrap--empty):hover .addon-option__thumb {
    transform: scale(1.14);
}

.addon-option:hover {
    background: #fff;
    border-color: #d0d7de;
}

.addon-qty-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f1f3f5;
    padding: 4px 10px;
    border-radius: 20px;
}

.addon-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: white;
    color: var(--primary-color);
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.addon-qty-btn:active {
    transform: scale(0.9);
}

/* Wrapper da bolinha quando usada no lugar do seletor de quantidade */
.addon-check-wrapper {
    justify-content: center;
    gap: 0;
}

/* Hidden real checkbox */
.addon-option input[type="checkbox"],
.addon-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    pointer-events: none;
}

/* State when checked (handled by JS toggling a class or :has selector) */
.addon-option.selected {
    border-color: var(--primary-color);
    background: #e3f2fd; /* azul claro */
}

/* The indicator circle */
.check-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ddd;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.addon-option.selected .check-indicator {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.check-indicator::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
    display: none;
}

.addon-option.selected .check-indicator::after {
    display: block;
}

.addon-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.addon-name {
    font-weight: 600;
    color: var(--text-color);
}

.addon-price {
    font-weight: 700;
    color: var(--primary-color);
}

/* Modal Headers */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.modal-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--heading-color);
}

.modal-price-tag {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
}

/* Nome do produto: ao lado da foto (coluna direita), texto escuro */
#product-modal .modal-product-highlight__side #modal-product-name.modal-title {
    display: block;
    color: var(--heading-color, #1f2937);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0 0 8px;
}

/* Mesmo vermelho do .modal-header; × centralizado no círculo (grid) */
#product-modal .modal-close {
    z-index: 50;
    display: grid !important;
    place-items: center !important;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    line-height: 1 !important;
    font-size: 1.5rem;
    font-weight: 400;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

#product-modal .modal-close:hover {
    transform: scale(1.05);
    filter: brightness(1.08);
    color: #fff;
}

/* Close button (X) floating on top-right of modal */
.modal-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, transform 0.1s, color 0.2s;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    transform: scale(1.05);
}

/* Ajuste fino do X no modal de zoom da imagem (mais próximo da foto) */
#image-zoom-modal .modal-close {
    top: 4px;
    right: 4px;
}

.modal-subtitle {
    background: #fff5f5;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 15px;
    border-radius: 50px;
    margin: 15px 0 10px;
    border: 1px solid rgba(229, 57, 53, 0.22);
    letter-spacing: 0.5px;
    display: table;
    /* To allow center with margin auto if needed, or stick to block */
    width: 100%;
}

/* Modal Actions */
.modal-actions {
    margin-top: auto;
    display: grid;
    gap: 12px;
    flex-shrink: 0;
}

.btn-confirm {
    width: 100%;
    padding: 18px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.btn-confirm:active {
    transform: scale(0.98);
}

.btn-cancel {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #888;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel:hover {
    color: #333;
}

.cat-nav-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #374151;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.cat-nav-item:hover,
.cat-nav-item.active {
    background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    border-color: rgba(185, 28, 28, 0.7);
    transform: translateY(-1px);
}

/* Header WhatsApp Button */
.btn-header-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #25d366;
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    margin-top: 0;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-header-wa:hover {
    transform: scale(1.05);
}

/* Header greeting dropdown (Olá, Nome) */
.header-greeting {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: #555;
}

.header-greeting-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    background: #f7f7f7;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.header-greeting-toggle .header-greeting-caret {
    font-size: 0.7rem;
}

.header-greeting-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 160px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    display: none;
    z-index: 50;
}

.header-greeting-menu button:not(.header-greeting-menu__close) {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.8rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.header-greeting-menu button:not(.header-greeting-menu__close):hover {
    background: #f5f5f5;
}

.header-greeting-menu-item-perfil {
    position: relative;
    padding-right: 30px;
}

.header-greeting-menu-item-perfil__label {
    flex: 1;
    min-width: 0;
}

.header-greeting-menu-perfil-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
}

.header-greeting-menu-perfil-badge[hidden] {
    display: none !important;
}

.header-greeting-dropdown.open .header-greeting-menu {
    display: block;
}

@media (max-width: 768px) {
    .header-greeting-toggle {
        font-size: 0.78rem;
    }
}

/* =========================================
   CUSTOMER BALANCE (Cashback / Pré-pago)
   ========================================= */
.customer-balance-summary {
    margin-top: 8px;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    justify-content: center;
}

.balance-card {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.balance-cashback {
    border-color: #cfe9da;
    background: #f4fbf6;
    color: #155724;
}

.balance-wallet {
    border-color: #d5e0ff;
    background: #f5f7ff;
    color: #1c3c8c;
}

@media (max-width: 768px) {
    .customer-balance-summary {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .balance-card {
        white-space: normal;
        width: auto;
    }
}

/* =========================================
   MOBILE IMPROVEMENTS (Only affects screens < 768px)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Header Layout - Stacked & Centered */
    .restaurant-info-card {
        flex-direction: column;
        text-align: center;
        margin-top: -40px;
        gap: 15px;
        padding: 20px 15px;
        width: 94%;
    }

    .restaurant-logo {
        width: 90px;
        height: 90px;
        margin-top: -55px;
        /* Pull higher */
        border-width: 4px;
    }

    .restaurant-details h1 {
        font-size: 1.3rem;
    }

    .badges-row,
    .action-row {
        justify-content: center;
        gap: 8px;
    }

    .btn-header-wa {
        padding: 10px 20px;
        font-size: 0.9rem;
        flex-grow: 1;
        /* Bigger touch target */
        justify-content: center;
        min-width: 140px;
    }

    /* 2. Category Navigation - Edge-to-Edge */
    .category-nav {
        margin: 10px -15px 20px;
        /* Negative margin to bleed */
        padding: 5px 15px 15px;
        justify-content: flex-start;
    }

    .cat-nav-item {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    /* 3. Product List - Better Spacing */
    .product-item {
        padding: 12px;
        gap: 12px;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .product-image-container {
        width: 90px;
        height: 90px;
        /* Square image looks better on mobile */
    }

    .product-name {
        font-size: 1rem;
        line-height: 1.3;
    }

    .product-desc {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* 4. Modal (Add Product) - Fixed Footer Issue */
    .modal-overlay {
        align-items: flex-end;
        /* Bottom sheet style */
        padding: 0;
    }

    .modal-card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        width: 100%;
        max-width: 100%;
        max-height: 80vh;
        /* Reduced a bit for premium feel */
        display: flex;
        flex-direction: column;
        padding: 0;
        position: relative;
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.1);
    }

    .modal-grabber {
        display: block;
    }

    .modal-header {
        flex-shrink: 0;
        padding: 15px 20px;
        background: white;
        z-index: 10;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Scrollable Content Area */
    .addon-list {
        flex: 1;
        overflow-y: auto;
        padding: 5px 20px 20px;
        margin: 0;
        /* Reset margins */
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        /* Critical fix for flex child scrolling */
    }

    .modal-subtitle {
        padding: 10px 20px 0;
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    .modal-price-tag {
        font-size: 1.1rem;
    }

    .modal-title {
        font-size: 1.2rem;
    }

    /* Fixed Footer Actions */
    .modal-actions {
        flex-shrink: 0;
        padding: 15px 20px;
        background: white;
        border-top: 1px solid #f0f0f0;
        z-index: 10;
        padding-bottom: max(15px, env(safe-area-inset-bottom));
        /* iOS Safe Area */
    }
}

/* FIX: Force Modal Subtitle Centering on Mobile */
@media screen and (max-width: 768px) {

    #product-modal p.modal-subtitle,
    #addons-subtitle,
    .modal-subtitle {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* =========================================================
   ADMIN ONLY - RESPONSIVE + COLLAPSIBLE SIDEBAR (HOVER)
   Apply ONLY when <body class="admin-panel"> exists
   ========================================================= */

body.admin-panel {
    padding-bottom: 0 !important;
    /* evita “rodapé do carrinho” no admin */
}

/* Base layout assumptions:
   - sidebar element uses .sidebar or aside.sidebar or #sidebar
   - main content uses .main-content or .content or main
   We'll support common selectors without breaking existing ones.
*/

body.admin-panel .sidebar,
body.admin-panel aside.sidebar,
body.admin-panel #sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transition: none !important;
    will-change: auto !important;
}

/* Collapsed width on desktop */
@media (min-width: 992px) {

    body.admin-panel .sidebar,
    body.admin-panel aside.sidebar,
    body.admin-panel #sidebar {
        width: 250px !important;
        min-width: 250px !important;
    }

    /* Expand on hover */
    body.admin-panel .sidebar:hover,
    body.admin-panel aside.sidebar:hover,
    body.admin-panel #sidebar:hover {
        width: 250px !important;
        min-width: 250px !important;
    }

    /* Content should adapt (support common wrappers) */
    body.admin-panel .main-content,
    body.admin-panel main,
    body.admin-panel .content,
    body.admin-panel .page-content {
        transition: margin-left 0.25s ease;
    }
}

/* Hide labels when collapsed (try common patterns) */
@media (min-width: 992px) {

    body.admin-panel .sidebar:not(:hover) .nav-text,
    body.admin-panel .sidebar:not(:hover) .menu-text,
    body.admin-panel .sidebar:not(:hover) span.label,
    body.admin-panel aside.sidebar:not(:hover) .nav-text,
    body.admin-panel aside.sidebar:not(:hover) .menu-text,
    body.admin-panel aside.sidebar:not(:hover) span.label,
    body.admin-panel #sidebar:not(:hover) .nav-text,
    body.admin-panel #sidebar:not(:hover) .menu-text,
    body.admin-panel #sidebar:not(:hover) span.label {
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        transition: none !important;
    }

    body.admin-panel .sidebar:hover .nav-text,
    body.admin-panel .sidebar:hover .menu-text,
    body.admin-panel .sidebar:hover span.label,
    body.admin-panel aside.sidebar:hover .nav-text,
    body.admin-panel aside.sidebar:hover .menu-text,
    body.admin-panel aside.sidebar:hover span.label,
    body.admin-panel #sidebar:hover .nav-text,
    body.admin-panel #sidebar:hover .menu-text,
    body.admin-panel #sidebar:hover span.label {
        opacity: 1 !important;
        width: auto !important;
        transition: none !important;
    }
}

/* Improve touch/mobile: sidebar becomes off-canvas (doesn't break desktop hover) */
@media (max-width: 991px) {

    body.admin-panel .sidebar,
    body.admin-panel aside.sidebar,
    body.admin-panel #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 260px;
        transform: translateX(-105%);
        z-index: 9999;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    }

    body.admin-panel.sidebar-open .sidebar,
    body.admin-panel.sidebar-open aside.sidebar,
    body.admin-panel.sidebar-open #sidebar {
        transform: translateX(0);
    }

    /* overlay for mobile */
    body.admin-panel::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 9998;
    }

    body.admin-panel.sidebar-open::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* Content full width */
    body.admin-panel .main-content,
    body.admin-panel main,
    body.admin-panel .content,
    body.admin-panel .page-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Tables / cards in admin become scrollable on small screens */
@media (max-width: 768px) {
    body.admin-panel table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.admin-panel .container,
    body.admin-panel .content,
    body.admin-panel .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Admin login responsiveness (generic) */
body.admin-panel .login-container,
body.admin-panel .login-box,
body.admin-panel .auth-card,
body.admin-panel .login-card {
    width: 100%;
    max-width: 420px;
    margin: 40px auto;
}

@media (max-width: 480px) {

    body.admin-panel .login-container,
    body.admin-panel .login-box,
    body.admin-panel .auth-card,
    body.admin-panel .login-card {
        margin: 20px auto;
        padding: 18px !important;
        border-radius: 14px;
    }

    body.admin-panel input,
    body.admin-panel select,
    body.admin-panel button {
        font-size: 16px;
        /* evita zoom iOS */
    }
}

@media (max-width: 768px) {
    .product-card {
        margin-bottom: 50px !important;
    }

    .product-card:last-child {
        margin-bottom: 0 !important;
    }

    [data-product-id] {
        margin-bottom: 50px !important;
    }

    [data-product-id]:last-child {
        margin-bottom: 0 !important;
    }
}

@supports (-webkit-touch-callout: none) {
    /* iOS Safari: evita "jitter" do background do rodapé ao rolar */
    #bottom-app-nav,
    .bottom-app-nav {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .bottom-app-nav__bg {
        position: absolute;
        inset: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        will-change: transform;
        /* iOS: manter sombra no fundo abaixo dos 5 botões */
        -webkit-filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, 0.35));
        filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, 0.35));
    }

    #product-modal .modal-qty-actions-row--floating {
        -webkit-filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, 0.35));
        filter: drop-shadow(0 -12px 22px rgba(0, 0, 0, 0.35));
    }
}

/* Espaçamento vertical entre categorias (a partir da 2ª) */
.category-section + .category-section {
    margin-top: 70px;
}

/* Override final: remover QUALQUER efeito visual do .serves-badge no hover/focus/active (mantém tooltip) */
.serves-badge,
.serves-badge:hover,
.serves-badge:focus,
.serves-badge:focus-visible,
.serves-badge:active,
button.serves-badge:hover,
button.serves-badge:focus,
button.serves-badge:focus-visible,
button.serves-badge:active {
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  background-image: none !important;
}

/* Mantém o fundo base apenas para o badge padrão (não afeta o --textline que usa fundo branco) */
.serves-badge:not(.serves-badge--textline),
.serves-badge:not(.serves-badge--textline):hover,
.serves-badge:not(.serves-badge--textline):focus,
.serves-badge:not(.serves-badge--textline):focus-visible,
.serves-badge:not(.serves-badge--textline):active {
  background: #f3f4f6 !important;
}

/* Override final (estático total): mantém aparência idêntica em hover/focus/active (mantém tooltip) */
.serves-badge,
.serves-badge:hover,
.serves-badge:focus,
.serves-badge:focus-visible,
.serves-badge:active,
button.serves-badge:hover {
  background-color: rgb(249, 250, 251) !important;
  border: 1px solid rgb(209, 213, 219) !important;
  border-color: rgb(209, 213, 219) !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  background-image: none !important;
}

.serves-badge {
  transition: none !important;
}

/* Isolamento contra hover/active de containers pais (ex.: cards) */
.product-card:hover .serves-badge,
.product-card:active .serves-badge,
.product-card-v2:hover .serves-badge,
.product-card-v2:active .serves-badge,
.product-card-v2__body:hover .serves-badge,
.product-card-v2__body:active .serves-badge,
.product-card-v2__body-footer:hover .serves-badge,
.product-card-v2__body-footer:active .serves-badge {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  background-color: rgb(249, 250, 251) !important;
  border-color: rgb(209, 213, 219) !important;
}

/* Neutraliza qualquer “pressed effect” no próprio botão */
.serves-badge,
.serves-badge:hover,
.serves-badge:active,
.serves-badge:focus,
.serves-badge:focus-visible {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
}

/* Tooltip continua funcionando: overlays não capturam clique */
.serves-badge::before,
.serves-badge::after {
  pointer-events: none;
}

/* Desativar overlay do card no hover (evita “sombra interna” no SERVE ...) */
.product-card:hover::before,
.product-card:hover::after,
.product-card-v2:hover::before,
.product-card-v2:hover::after {
  display: none !important;
}

/* Bloquear qualquer efeito herdado no botão quando o card estiver em hover/active */
.product-card:hover .serves-badge,
.product-card:active .serves-badge,
.product-card-v2:hover .serves-badge,
.product-card-v2:active .serves-badge {
  background: rgb(249, 250, 251) !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Neutralizar estados do botão */
.serves-badge,
.serves-badge:hover,
.serves-badge:active {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  background: rgb(249, 250, 251) !important;
}

/* Carrinho: barra de progresso entrega grátis (12px altura, −20px largura) */
#cart-modal #cart-view .cart-footer #free-delivery-progress .free-delivery-progress-bar {
    flex-shrink: 0 !important;
    align-self: center !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    height: 15px !important;
    min-height: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#cart-modal #cart-view .cart-footer #free-delivery-progress #freeDeliveryProgressFill {
    display: block !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    box-sizing: border-box !important;
}

/* Caminhão entrega grátis — tamanho/contorno (prioridade no carrinho) */
#cart-modal .free-delivery-progress-bar .free-delivery-truck-wrap,
#cart-modal .free-delivery-progress-bar .free-delivery-truck-clone {
    display: none !important;
    visibility: hidden !important;
}

#cart-modal #free-delivery-progress .free-delivery-truck-wrap,
#cart-modal #free-delivery-progress.is-active #free-delivery-truck-wrap {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: center !important;
    align-items: center !important;
}

#cart-modal #free-delivery-progress .free-delivery-truck-icon,
#cart-modal #free-delivery-progress.is-active .free-delivery-truck-icon {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    max-width: none !important;
    max-height: none !important;
    font-size: 13px !important;
    line-height: 1 !important;
    overflow: visible !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px #1b9b52 !important;
    text-stroke: 1px #1b9b52 !important;
    paint-order: stroke fill !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress #free-delivery-truck-wrap:not(.is-truck-entering) {
    top: auto !important;
    transform: none !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 3px !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    align-items: center !important;
    display: inline-flex !important;
}

/* × do banner alinhado ao × do .cart-header (posição via JS: hmSyncCartDrawerCloseButtonsAlign) */
#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress .free-delivery-progress-close {
    top: 50% !important;
    transform: translateY(calc(-50% - 9px)) !important;
    margin: 0 !important;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: calc(1rem + 3px) !important;
    line-height: 1 !important;
}

#cart-modal #cart-cross-sell-dock #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #free-delivery-truck-wrap {
    overflow: visible !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    align-items: center !important;
}

#cart-modal #free-delivery-progress.is-active #freeDeliveryProgressInner,
#cart-modal #free-delivery-progress.is-truck-enter #freeDeliveryProgressInner {
    align-items: center !important;
}

#cart-modal #free-delivery-progress.is-active #freeDeliveryProgressText,
#cart-modal #free-delivery-progress.is-active .free-delivery-active-label {
    align-self: center !important;
    align-items: center !important;
    min-height: 0 !important;
}

#cart-modal #free-delivery-progress.is-active .free-delivery-active-label {
    line-height: 1 !important;
}

#cart-modal #free-delivery-progress.is-active #free-delivery-check-icon,
#cart-modal #free-delivery-progress.is-truck-enter #free-delivery-check-icon,
#cart-modal #free-delivery-progress.is-truck-arrival-visible #free-delivery-check-icon,
#cart-modal #free-delivery-progress.is-celebrating #free-delivery-check-icon {
    align-self: center !important;
    transform: none !important;
}

#cart-modal #free-delivery-progress.is-active .free-delivery-truck-wrap {
    align-self: center !important;
    align-items: center !important;
}

#cart-modal #free-delivery-progress.is-active .free-delivery-truck-icon {
    position: relative;
    top: 0;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress #freeDeliveryProgressRow {
    align-items: flex-end !important;
    min-height: 0 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress #freeDeliveryProgressText {
    min-height: 0 !important;
    line-height: 1 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress #freeDeliveryProgressText .free-delivery-falta-value {
    font-size: inherit !important;
    line-height: 1 !important;
    align-self: flex-end !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress #freeDeliveryProgressText .free-delivery-gratis-label {
    line-height: 1 !important;
    align-self: flex-end !important;
    min-height: 0 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active .free-delivery-active-label,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-active-label,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible .free-delivery-active-label,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating .free-delivery-active-label {
    line-height: 1 !important;
    align-self: center !important;
    min-height: 0 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #free-delivery-truck-wrap:not([hidden]),
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter #free-delivery-truck-wrap:not([hidden]),
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible #free-delivery-truck-wrap:not([hidden]),
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating #free-delivery-truck-wrap:not([hidden]),
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress #free-delivery-truck-wrap:not([hidden]):not(.is-truck-entering) {
    align-self: center !important;
    align-items: center !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 3px !important;
    padding: 0 !important;
    transform: none !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter) #freeDeliveryProgressRow {
    align-items: flex-end !important;
    min-height: 0 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter) #freeDeliveryProgressInner {
    transform: translateY(-2px) !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter) #freeDeliveryProgressBar,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter) .free-delivery-progress-bar {
    margin-top: 2px !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter) #freeDeliveryProgressText {
    display: inline-flex !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    min-height: 0 !important;
    line-height: 1 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress #free-delivery-truck-wrap:not([hidden]) .free-delivery-truck-icon {
    display: inline-flex !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    line-height: 1 !important;
    position: static !important;
    top: auto !important;
}

/* Cross-sell inativo: linha 13px, base inferior (Faltam… + caminhão) */
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-truck-enter):not(.is-truck-arrival-visible):not(.is-celebrating) #freeDeliveryProgressRow,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-truck-enter):not(.is-truck-arrival-visible):not(.is-celebrating) #freeDeliveryProgressInner {
    display: inline-flex !important;
    align-items: flex-end !important;
    min-height: 13px !important;
    max-height: 13px !important;
    height: 13px !important;
}

/* Cross-sell ativo / transição: mesma altura visual (centro + 1em) */
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #freeDeliveryProgressRow,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter #freeDeliveryProgressRow,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible #freeDeliveryProgressRow,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating #freeDeliveryProgressRow,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #freeDeliveryProgressInner,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter #freeDeliveryProgressInner,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible #freeDeliveryProgressInner,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating #freeDeliveryProgressInner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    column-gap: 3px !important;
    row-gap: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #free-delivery-check-icon,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter #free-delivery-check-icon,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible #free-delivery-check-icon,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating #free-delivery-check-icon {
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    min-height: 1em !important;
    font-size: 1em !important;
    line-height: 1 !important;
    align-self: center !important;
    transform: none !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #freeDeliveryProgressText,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter #freeDeliveryProgressText,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible #freeDeliveryProgressText,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating #freeDeliveryProgressText,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active .free-delivery-active-label,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-active-label,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible .free-delivery-active-label {
    align-self: center !important;
    align-items: center !important;
    line-height: 1 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #free-delivery-truck-wrap,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter #free-delivery-truck-wrap,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible #free-delivery-truck-wrap,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating #free-delivery-truck-wrap {
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    min-height: 1em !important;
    align-self: center !important;
    align-items: center !important;
    transform: none !important;
    margin-left: 3px !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active .free-delivery-truck-icon,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-truck-icon,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-arrival-visible .free-delivery-truck-icon,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-celebrating .free-delivery-truck-icon {
    width: 1em !important;
    height: 1em !important;
    font-size: 1em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering .free-delivery-truck-icon {
    transform: none !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter):not(.is-truck-arrival-visible) #freeDeliveryProgressText {
    display: inline-flex !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress:not(.is-active):not(.is-celebrating):not(.is-truck-enter):not(.is-truck-arrival-visible) .free-delivery-gratis-label {
    display: inline-flex !important;
    align-items: flex-end !important;
    line-height: 1 !important;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-truck-enter .free-delivery-truck-wrap.is-truck-entering:not([hidden]) {
    animation: none !important;
    align-self: center !important;
    align-items: center !important;
    will-change: transform, opacity;
}

#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active #freeDeliveryProgressText,
#cart-modal #cart-cross-sell-dock #cross-sell-items #free-delivery-progress,
#cart-modal #cart-view > #free-delivery-progress.is-active.is-revealed #freeDeliveryProgressText {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    width: max-content !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
}

/* Global responsive normalization: checkout + cart drawer + cross-sell */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

:root {
    --hm-cart-shell-max: clamp(360px, 38vw, 480px);
    --hm-cart-shell-pad: clamp(12px, 2vw, 18px);
    --hm-cart-panel-bg: #f1f5f9;
    --hm-cart-footer-space: clamp(128px, 16vh, 168px);
    --hm-cross-sell-gap: 12px;
    --hm-cross-card-basis: 140px;
    --hm-cross-top-space: 12px;
    --hm-cross-header-height: 34px;
}

#cart-modal {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

#cart-modal .cart-sidebar {
    width: min(100%, var(--hm-cart-shell-max)) !important;
    max-width: min(100%, var(--hm-cart-shell-max)) !important;
    min-width: 0;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden;
}

#cart-modal #cart-view,
#cart-modal #checkout-view,
#cart-modal #cart-view > .cart-header,
#cart-modal #cart-view .cart-footer,
#cart-modal #cart-view .cart-footer-actions,
#cart-modal #cart-view .cart-item,
#cart-modal #cart-view .cart-item-main,
#cart-modal #cart-view .cart-item-details,
#cart-modal #cart-view .cart-item-meta-row,
#cart-modal #cart-view .cart-item-price,
#cart-modal #cart-view .cart-item-price > .cart-item-price-value,
#cart-modal #cart-view .cart-item-price > .cart-item-installments,
#cart-modal #cart-view .cart-item-qty-actions,
#cart-modal #cart-view .addon-qty-controls,
#cart-modal #cart-view .cart-cross-sell-dock,
#cart-modal #cart-view .cart-cross-sell-dock__inner,
#cart-modal #cart-view .cross-sell-items,
#cart-modal #cart-view .cross-sell-items__body,
#cart-modal #cart-view .cross-sell-item {
    min-width: 0;
    max-width: 100%;
}

#cart-modal #cart-view,
#cart-modal #checkout-view {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#cart-modal #cart-view #cart-items-container.cart-body {
    padding: 3px clamp(12px, 2vw, 18px) 0 !important;
}

#cart-modal #cart-view .cart-scroll-area {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

#cart-modal #cart-view .cart-footer,
#cart-modal #checkout-footer.cart-footer {
    padding-left: var(--hm-cart-shell-pad) !important;
    padding-right: var(--hm-cart-shell-pad) !important;
}

#cart-modal #cart-view > .cart-header {
    padding-left: var(--hm-cart-shell-pad) !important;
    padding-right: var(--hm-cart-shell-pad) !important;
}

#cart-modal #cart-view .cart-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: -8px;
}

#cart-modal #cart-view .cart-item-title,
#cart-modal #cart-view .cart-item-addon-row,
#cart-modal #cart-view .cart-item-obs-line,
#cart-modal #cart-view .cross-sell-subtitle,
#cart-modal #checkout-view .cross-sell-subtitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

#cart-modal #cart-view .cross-sell-name,
#cart-modal #checkout-view .cross-sell-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

#cart-modal #cart-view .cart-item-meta-row {
    gap: 8px;
}

#cart-modal #cart-view .cross-sell-item--carousel,
#cart-modal #checkout-view .cross-sell-item--carousel {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

#cart-modal #cart-view .cart-cross-sell-dock,
#cart-modal #checkout-view .cart-cross-sell-dock {
    width: 100%;
    overflow: visible;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

#cart-modal #cart-view .cart-cross-sell-dock.is-active,
#cart-modal #checkout-view .cart-cross-sell-dock.is-active {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#cart-modal #cart-view .cart-cross-sell-dock__inner,
#cart-modal #checkout-view .cart-cross-sell-dock__inner {
    margin: 0 !important;
    overflow: visible;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items {
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--hm-cross-sell-gap) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    padding: var(--hm-cross-top-space) 12px 12px 12px !important;
    scrollbar-width: thin;
    touch-action: pan-x;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.notification-bar,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel.notification-bar {
    margin: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

#cart-modal #cart-view #cross-sell-items-body.cross-sell-items__body,
#cart-modal #cart-view .cart-cross-sell-dock #cross-sell-items-body,
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee,
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-show-native-scrollbar,
#cart-modal #cart-view #cross-sell-items-body.cross-sell-items__body--carousel,
#cart-modal #checkout-view #cross-sell-items-body.cross-sell-items__body--carousel {
    margin: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel {
    background: transparent !important;
}

/* Cross-sell: marquee igual barra de avisos */
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee,
#cart-modal #cart-view #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee,
#cart-modal #checkout-view #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee,
#cart-modal #cart-view #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee.hm-show-native-scrollbar,
#cart-modal #checkout-view #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee.hm-show-native-scrollbar {
    overflow: hidden !important;
    scroll-snap-type: none !important;
    display: block !important;
    position: absolute !important;
    top: var(--hm-cross-body-top, calc(var(--hm-cross-close-top, 0px) + var(--hm-cross-header-height, 34px) + 19px)) !important;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0 !important;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

/* Minimizado: ocultar marquee (especificidade maior que display:block do bloco acima) */
#cart-modal #cart-cross-sell-dock[data-minimized="1"] #cross-sell-items #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee,
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items.cross-sell-items--minimized #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee > .marquee-container,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee > .marquee-container,
#cart-modal #cart-view #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee > .marquee-container,
#cart-modal #checkout-view #cross-sell-items-body.cross-sell-items__body--carousel.hm-cross-sell-notification-marquee > .marquee-container {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    gap: var(--hm-cross-sell-gap);
    margin-top: -26px;
    animation: marquee 30s linear infinite;
    will-change: transform;
}

#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee .marquee-item,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee .marquee-item {
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

/* Scrollbar tradicional ao interagir (hover/click) */
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee.hm-show-native-scrollbar,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel.hm-cross-sell-notification-marquee.hm-show-native-scrollbar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    touch-action: pan-x;
    box-sizing: border-box;
    scrollbar-gutter: stable;
}

/* Carrossel: com 3 itens ou menos (1 página), centraliza os cards */
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel[data-carousel-pages="1"],
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel[data-carousel-pages="1"],
#cart-modal #cart-view .cart-cross-sell-dock .cross-sell-items__body--carousel.cross-sell-items__body--carousel-few,
#cart-modal #checkout-view .cart-cross-sell-dock .cross-sell-items__body--carousel.cross-sell-items__body--carousel-few {
    justify-content: center !important;
}

#cart-modal #cart-view .cross-sell-items__body--carousel > .cross-sell-item:first-child,
#cart-modal #checkout-view .cross-sell-items__body--carousel > .cross-sell-item:first-child {
    margin-left: 0 !important;
}

#cart-modal #cart-view .cross-sell-items__body--carousel .cross-sell-item,
#cart-modal #checkout-view .cross-sell-items__body--carousel .cross-sell-item {
    flex: 0 0 var(--hm-cross-card-basis) !important;
    width: var(--hm-cross-card-basis) !important;
    min-width: var(--hm-cross-card-basis) !important;
    max-width: var(--hm-cross-card-basis) !important;
    height: 193px !important;
    min-height: 0 !important;
    max-height: none !important;
    scroll-snap-align: start;
    overflow: hidden !important;
    position: relative !important;
}

/* Permite o botão “+” (bottom/right negativos) ficar acima do card */
#cart-modal #cart-view .cross-sell-items__body--carousel .cross-sell-item--carousel,
#cart-modal #checkout-view .cross-sell-items__body--carousel .cross-sell-item--carousel {
    overflow: visible !important;
    z-index: 1;
}

#cart-modal #cart-view .cross-sell-items__body--carousel .cross-sell-item--carousel,
#cart-modal #checkout-view .cross-sell-items__body--carousel .cross-sell-item--carousel {
    position: relative !important;
    overflow: visible !important;
}

#cart-modal #cart-view .cross-sell-items__body--carousel .cross-sell-item--carousel > .cross-sell-name,
#cart-modal #checkout-view .cross-sell-items__body--carousel .cross-sell-item--carousel > .cross-sell-name {
    width: calc(100% + 2px) !important;
    max-width: calc(100% + 2px) !important;
    margin: 0 -1px !important;
    padding: 0 12px !important;
    border-radius: 12px 12px 0 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
}

#cart-modal #cart-view .cross-sell-items__body--carousel .cross-sell-item--carousel > .cross-sell-name > .cross-sell-name__text,
#cart-modal #checkout-view .cross-sell-items__body--carousel .cross-sell-item--carousel > .cross-sell-name > .cross-sell-name__text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Título do cross-sell como “header” (igual product-card-v2__header) */
#cart-modal #cart-view .cross-sell-items__body--carousel .cross-sell-item--carousel > .cross-sell-name,
#cart-modal #checkout-view .cross-sell-items__body--carousel .cross-sell-item--carousel > .cross-sell-name {
    position: relative;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% - 6px);
    max-width: calc(100% - 6px);
    min-height: 28px;
    padding: 6px 10px;
    margin: 4px auto 7px;
    background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%));
    border-radius: 10px;
    color: #fff !important;
    line-height: 1.12;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* Força o mesmo “header” mesmo se o nome vier com style inline */
#cart-modal #cart-view .cross-sell-items__body--carousel .cross-sell-item--carousel .cross-sell-name,
#cart-modal #checkout-view .cross-sell-items__body--carousel .cross-sell-item--carousel .cross-sell-name {
    background: var(--pcv2-header-bg, linear-gradient(135deg, #c62828 0%, #b71c1c 100%)) !important;
    color: #fff !important;
    padding: 6px 10px !important;
    /* cantos inferiores retos */
    border-radius: 12px 12px 0 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments__inner,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments__inner {
    width: auto !important;
    max-width: 100% !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-row,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-row {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-pix-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-pix-ic,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-card-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-card-ic {
    width: 12px !important;
    font-size: 12px !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price.hm-money-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price.hm-money-inline {
    font-size: 11px !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price .hm-money-currency,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price .hm-money-currency,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price .hm-money-amount,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price .hm-money-amount {
    font-size: 11px !important;
}

/* Micro-ajustes de alinhamento vertical (preview) */
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price .hm-money-currency,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price .hm-money-currency,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price .hm-money-amount,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price .hm-money-amount {
    position: relative !important;
    top: -2px !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-inline,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-value,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-value,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-currency,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-currency,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-amount,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-amount {
    font-size: 13px !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-currency,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-currency,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-amount,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-value .hm-money-amount {
    position: static !important;
    top: auto !important;
    transform: translateY(1px) !important;
}

#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-installments,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-installments,
#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-installments__inner,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-installments__inner,
#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-inline,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-inline,
#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-value.hm-money-inline,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-value.hm-money-inline {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-value .hm-money-currency,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-value .hm-money-currency,
#cart-modal #cart-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-value .hm-money-amount,
#cart-modal #checkout-view .cross-sell-items__body:not(.cross-sell-items__body--carousel) .cross-sell-install-value .hm-money-amount {
    position: static !important;
    top: auto !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-value,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-value {
    position: static !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price.hm-money-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price.hm-money-inline,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-value.hm-money-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-value.hm-money-inline {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-item__media,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-item__media {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    padding: 10px 10px 0 !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-img,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-img {
    width: min(100%, 96px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin-top: 9px !important;
    border-radius: 6px !important;
    cursor: zoom-in;
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-info,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-info {
    min-width: 0;
    padding: 10px 10px 12px !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-block,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-block {
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    margin: 8px auto 0 !important;
    align-items: stretch !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-row,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-row,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments {
    grid-template-columns: auto auto !important;
    column-gap: 5px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-inline {
    text-align: right !important;
    justify-self: end !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-pix-ic,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-card-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-pix-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-card-ic {
    justify-self: end !important;
    text-align: right !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-row,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-row,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments {
    align-items: center !important;
    transform: translateY(4px) !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-row__inner,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-row__inner {
    min-height: 100% !important;
    align-items: center !important;
    transform: translateY(0) !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments__inner,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments__inner {
    min-height: 100% !important;
    align-items: center !important;
    transform: translateY(1px) !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-row__inner,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments__inner,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-row__inner,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments__inner {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 4px !important;
    column-gap: 4px !important;
}

/* Ícone + valor juntos (não esticar com justify-self:end no container largo) */
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-row__inner > .cross-sell-price,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments__inner > .cross-sell-install-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-row__inner > .cross-sell-price,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments__inner > .cross-sell-install-inline {
    justify-self: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price-row__inner > .cross-sell-pix-ic,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-installments__inner > .cross-sell-card-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price-row__inner > .cross-sell-pix-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-installments__inner > .cross-sell-card-ic {
    justify-self: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-pix-ic,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-price,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-card-ic,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-pix-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-price,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-card-ic,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-inline {
    align-self: center !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-install-inline,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-install-inline {
    top: 0 !important;
}

#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-add--compact,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-add--compact {
    top: auto !important;
    bottom: -13px !important;
    right: -10px !important;
    z-index: 500 !important;
}

#cart-modal #cart-view .cross-sell-header-bar,
#cart-modal #checkout-view .cross-sell-header-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--hm-cross-close-top, 0px) + var(--hm-cross-header-offset-y, -6px)) !important;
    height: var(--hm-cross-header-height, 34px);
    z-index: 61;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    pointer-events: none;
    --hm-cross-header-offset-y: -6px;
    --hm-cross-header-border-color: #86efac;
    --hm-cross-header-border-color-hover: #6ee7b7;
    --hm-cross-header-bg-solid: #ecfdf5;
    --hm-cross-header-bg-solid-hover: #dcfce7;
    --hm-cross-header-bg: linear-gradient(180deg, #ecfdf5 0%, #ecfdf5 100%);
    --hm-cross-header-bg-hover: linear-gradient(180deg, #dcfce7 0%, #ecfdf5 100%);
    --hm-cross-header-border-grad: linear-gradient(180deg, #86efac 0%, #86efac 100%);
    --hm-cross-header-border-grad-hover: linear-gradient(180deg, #6ee7b7 0%, #86efac 100%);
    --hm-cross-header-text: #166534;
    --hm-cross-header-text-accent: #15803d;
}

#cart-modal #cart-view .cross-sell-header-bar > .cross-sell-carousel-controls,
#cart-modal #checkout-view .cross-sell-header-bar > .cross-sell-carousel-controls {
    pointer-events: auto;
}

#cart-modal #cart-view .cross-sell-header-bar > .cross-sell-hide,
#cart-modal #checkout-view .cross-sell-header-bar > .cross-sell-hide {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 100%;
    height: var(--hm-cross-header-height, 34px);
    margin: 0;
    z-index: 61;
    justify-content: flex-end !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    pointer-events: auto !important;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

#cart-modal #cart-view .cross-sell-header-bar > .cross-sell-hide .cross-sell-hide__icon,
#cart-modal #checkout-view .cross-sell-header-bar > .cross-sell-hide .cross-sell-hide__icon {
    position: absolute !important;
    top: 50% !important;
    right: var(--hm-cross-close-icon-right, var(--hm-cross-header-pad-right, 13px)) !important;
    transform: translateY(-50%) !important;
    font-size: calc(1rem + 3px) !important;
    font-weight: 700 !important;
    z-index: 70 !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    border: none !important;
    background: transparent !important;
    color: inherit !important;
    -webkit-appearance: none;
    appearance: none;
}

#cart-modal #cart-view #cart-cross-sell-dock.is-active:not([data-minimized="1"]) .cross-sell-header-bar > .cross-sell-hide .cross-sell-hide__prompt,
#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > .cross-sell-hide .cross-sell-hide__prompt,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > .cross-sell-hide .cross-sell-hide__prompt {
    position: absolute;
    left: var(--hm-cart-shell-pad, 14px) !important;
    right: 44px !important;
    top: 50%;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cart-modal #cart-view .cross-sell-header-bar > .cross-sell-carousel-controls,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > .cross-sell-carousel-controls {
    position: absolute;
    left: var(--hm-cross-controls-center-x, 50%);
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 65;
    pointer-events: auto;
    flex: 0 0 auto;
    transition: transform 0.2s ease, filter 0.2s ease;
}

#cart-modal #cart-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-nav,
#cart-modal #checkout-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-nav {
    transition: all 0.2s !important;
}

#cart-modal #cross-sell-items > .cross-sell-carousel-nav,
#cart-modal #cross-sell-items > .cross-sell-carousel-controls,
#cart-modal #cross-sell-items > #crossSellCarouselPrev,
#cart-modal #cross-sell-items > #crossSellCarouselPause,
#cart-modal #cross-sell-items > #crossSellCarouselNext {
    display: none !important;
}

#cart-modal #cart-view .cross-sell-carousel-nav,
#cart-modal #checkout-view .cross-sell-carousel-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    font-size: calc(0.85rem - 0.5px);
    line-height: 1;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-text-fill-color: #6b7280;
    transition: all 0.2s;
}

#cart-modal #cart-view .cross-sell-carousel-pause,
#cart-modal #checkout-view .cross-sell-carousel-pause {
    width: auto;
    min-width: 48px;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    -webkit-text-fill-color: #6b7280;
}

@media (hover: hover) and (pointer: fine) {
    #cart-modal #cart-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-nav:hover,
    #cart-modal #checkout-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-nav:hover {
        background: var(--pcv2-header-bg, var(--pcv2-header-solid, #e53935));
        color: #fff !important;
        border-color: rgba(0, 0, 0, 0.12);
        -webkit-text-fill-color: #fff;
        filter: brightness(1.05);
        box-shadow: 0 1px 6px rgba(183, 28, 28, 0.22);
        transform: none !important;
    }
}

#cart-modal #cart-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-nav:active,
#cart-modal #checkout-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-nav:active {
    background: #9a141c;
    color: #fff !important;
    border-color: rgba(0, 0, 0, 0.14);
    -webkit-text-fill-color: #fff;
    transform: none !important;
}

#cart-modal #cart-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-pause,
#cart-modal #checkout-view .cross-sell-header-bar .cross-sell-carousel-controls .cross-sell-carousel-pause {
    align-self: center;
    margin: 0;
    vertical-align: middle;
}

#cart-modal #cart-view .cross-sell-carousel-pause.is-paused,
#cart-modal #checkout-view .cross-sell-carousel-pause.is-paused {
    background: #9a141c;
    color: #fff !important;
    border-color: rgba(0, 0, 0, 0.14);
    -webkit-text-fill-color: #fff;
}

#cart-modal #cart-view #crossSellCloseBtn {
    top: 0 !important;
    height: var(--hm-cross-header-height, 34px) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--hm-cross-header-border-color, #86efac) !important;
    border-bottom: 1px solid var(--hm-cross-header-border-color, #86efac) !important;
    box-sizing: border-box !important;
    color: var(--hm-cross-header-text, #166534) !important;
    background: var(--hm-cross-header-bg-solid, #ecfdf5) !important;
    background-image: none !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
}

#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn {
    color: var(--hm-cross-header-text, #166534) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--hm-cross-header-border-color, #86efac) !important;
    border-bottom: 1px solid var(--hm-cross-header-border-color, #86efac) !important;
    box-sizing: border-box !important;
    background: var(--hm-cross-header-bg-solid, #ecfdf5) !important;
    background-image: none !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn .cross-sell-hide__prompt,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn .cross-sell-hide__prompt {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    font-style: normal !important;
    color: var(--hm-cross-header-text-accent, #15803d) !important;
    -webkit-text-fill-color: var(--hm-cross-header-text-accent, #15803d) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn .cross-sell-hide__icon,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn .cross-sell-hide__icon {
    color: var(--hm-cross-header-text-accent, #15803d) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:hover,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:hover {
    color: var(--hm-cross-header-text-accent, #15803d) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--hm-cross-header-border-color-hover, #6ee7b7) !important;
    border-bottom: 1px solid var(--hm-cross-header-border-color-hover, #6ee7b7) !important;
    background: var(--hm-cross-header-bg-solid-hover, #dcfce7) !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:hover .cross-sell-hide__prompt,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:hover .cross-sell-hide__prompt {
    color: var(--hm-cross-header-text-accent, #15803d) !important;
    -webkit-text-fill-color: var(--hm-cross-header-text-accent, #15803d) !important;
}

#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:focus,
#cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:focus-visible,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:focus,
#cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > #crossSellCloseBtn:focus-visible {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--hm-cross-header-border-color-hover, #6ee7b7) !important;
    border-bottom: 1px solid var(--hm-cross-header-border-color-hover, #6ee7b7) !important;
    background: var(--hm-cross-header-bg-solid-hover, #dcfce7) !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#cart-modal #cart-view #cross-sell-items > #free-delivery-progress {
    top: var(--hm-free-progress-top, 0px) !important;
    left: var(--hm-free-progress-left, 13px) !important;
    right: var(--hm-free-progress-right, 13px) !important;
    width: calc(100% - var(--hm-free-progress-left, 13px) - var(--hm-free-progress-right, 13px)) !important;
    max-width: calc(100% - var(--hm-free-progress-left, 13px) - var(--hm-free-progress-right, 13px)) !important;
    transform: none !important;
    z-index: 62 !important;
}

#cart-modal #cart-view .cart-item .cart-item-remove-btn:hover {
    transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
    #cart-modal #cart-view .cross-sell-item--carousel:hover,
    #cart-modal #checkout-view .cross-sell-item--carousel:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }

    #cart-modal #cart-view > .cart-header button:hover,
    #cart-modal #checkout-view > .cart-header button:hover {
        transform: scale(1.12);
        filter: brightness(1.06);
    }

    #cart-modal #cart-view .cross-sell-item--carousel .cross-sell-add--compact:hover,
    #cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-add--compact:hover {
        transform: none !important;
        filter: none !important;
    }

    #cart-modal #cart-view .cross-sell-item--carousel .cross-sell-img:hover,
    #cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-img:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }

    #cart-modal #cart-view .cross-sell-items--carousel .cross-sell-header-bar > .cross-sell-carousel-controls:hover,
    #cart-modal #checkout-view .cross-sell-items--carousel .cross-sell-header-bar > .cross-sell-carousel-controls:hover {
        transform: translate(-50%, -50%) !important;
        filter: none;
    }

    #cart-modal #cart-view .cart-item .cart-item-remove-btn:hover,
    #cart-modal #checkout-view .cart-item .cart-item-remove-btn:hover {
        transform: scale(1.12) !important;
        filter: brightness(1.05);
    }
}

/* Cross-sell: remover transições/efeitos visuais */
#cart-modal #cart-view .cross-sell-item--carousel,
#cart-modal #checkout-view .cross-sell-item--carousel,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-img,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-img,
#cart-modal #cart-view .cross-sell-item--carousel .cross-sell-add--compact,
#cart-modal #checkout-view .cross-sell-item--carousel .cross-sell-add--compact {
    transition: none !important;
}

@media (max-width: 1024px) {
    :root {
        --hm-cart-shell-max: 440px;
        --hm-cross-card-basis: 140px;
    }
}

@media (max-width: 768px) {
    :root {
        --hm-cart-shell-max: 100%;
        --hm-cart-shell-pad: 14px;
        --hm-cart-footer-space: clamp(132px, 18vh, 176px);
        --hm-cross-card-basis: 140px;
    }

    #cart-modal.hm-cart-open,
    body.hm-checkout-standalone-page #cart-modal.hm-cart-open {
        left: 0;
        right: 0;
        justify-content: flex-start;
    }

    #cart-modal .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
}

@media (max-width: 430px) {
    :root {
        --hm-cross-card-basis: 140px;
    }
}

@media (max-width: 390px) {
    :root {
        --hm-cross-card-basis: 140px;
    }
}

@media (max-width: 360px) {
    :root {
        --hm-cart-shell-pad: 12px;
        --hm-cross-card-basis: 140px;
    }

    #cart-modal #cart-view .cart-footer-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1366px) {
    :root {
        --hm-cart-shell-max: 500px;
    }
}

@media (min-width: 1600px) {
    :root {
        --hm-cart-shell-max: 520px;
        --hm-cross-card-basis: 140px;
    }
}

/* Override final: tons do #cart-view-total = mesmos dos itens do carrinho */
#cart-modal #cart-view-total .cart-total-label,
#cart-modal #cart-view-total .cart-total-label--avista,
#cart-modal #cart-view-total .cart-total-installments-label {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
}

#cart-modal #cart-view-total .cart-total-main-line,
#cart-modal #cart-view-total #cart-total-price,
#cart-modal #cart-view-total .cart-total-pix-ic {
    color: var(--pcv2-header-solid, #e53935) !important;
    -webkit-text-fill-color: var(--pcv2-header-solid, #e53935) !important;
}

#cart-modal #cart-view-total .cart-total-installments-line,
#cart-modal #cart-view-total .cart-total-installments-line.cart-total-installments-picker,
#cart-modal #cart-view-total .cart-total-installments-trigger,
#cart-modal #cart-view-total #cart-total-installments,
#cart-modal #cart-view-total #cart-total-installments-x,
#cart-modal #cart-view-total #cart-total-installments-value,
#cart-modal #cart-view-total .cart-total-card-ic {
    color: #15803d !important;
    -webkit-text-fill-color: #15803d !important;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell,
#cart-modal #cart-view-total {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    overflow: visible !important;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 100% !important;
    height: var(--hm-cart-total-bg-ext, 7px) !important;
    background: #ffffff !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

#cart-modal #cart-view:has(> #cart-cross-sell-dock.is-active:not([hidden])) > #cart-cross-sell-dock.is-active:not([hidden]) {
    margin-bottom: 0 !important;
}

#cart-modal #cart-view:has(> #cart-cross-sell-dock.is-active:not([hidden])) #cross-sell-items {
    margin-bottom: 0 !important;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell > .cart-footer-actions {
    gap: 8px !important;
    margin-top: 17px !important;
}

#cart-modal #cart-view #cart-view-total .cart-total-main-chip,
#cart-modal #cart-view #cart-view-total .cart-total-installments-chip {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell > .cart-footer-actions .btn-checkout {
    padding: 11px 10px !important;
    font-size: 0.92rem !important;
    border-radius: 8px !important;
    line-height: 1.15 !important;
    height: 43px !important;
}

#cart-modal #cart-view:has(> #cart-view-total.cart-total--cross-sell:not([hidden])) > .cart-footer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell.hm-cart-total-installments-menu-open,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell:has(#cart-total-installments-menu:not([hidden])) {
    z-index: 50 !important;
}

#cart-modal #cart-view .cart-total-installments-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 500 !important;
}

#cart-modal #cart-view .cart-total-installments-menu__item {
    text-align: center !important;
}

/* Cross-sell carrinho: fundos sem sombra/contorno */
#cart-modal #cart-view #cross-sell-items-body,
#cart-modal #cart-view #cross-sell-items-body.notification-bar,
#cart-modal #cart-view #cross-sell-items-body.hm-cross-sell-notification-marquee {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-main-chip,
#cart-modal #cart-view > #cart-view-total.cart-total--cross-sell .cart-total-installments-chip {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}