/**
 * Menu mobile — drawer lateral esquerdo (estilo santoconceito.com.br).
 * Apenas max-width: 768px.
 */

@media (min-width: 769px) {
    .mobile-drawer-backdrop,
    .mobile-drawer {
        display: none !important;
    }

    .mobile-menu-dropdown {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-menu-dropdown {
        display: none !important;
    }

    .mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 22000;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }

    body.mobile-drawer-open .mobile-drawer-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 22010;
        width: min(88vw, 320px);
        max-width: 320px;
        height: 100%;
        height: 100dvh;
        background: #fff;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    body.mobile-drawer-open .mobile-drawer {
        transform: translateX(0);
    }

    body.mobile-drawer-open {
        overflow: hidden;
        touch-action: none;
    }

    .mobile-drawer-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 12px 48px;
        background: #000;
        color: #fff;
        border-bottom: 1px solid #000;
        flex-shrink: 0;
    }

    .mobile-drawer-title {
        margin: 0;
        flex: 0 0 auto;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
        text-align: center;
    }

    .mobile-drawer-account-card {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 16px 8px;
        padding: 14px 14px;
        background: #fff;
        border: 1px solid #e0e6ef;
        border-radius: 10px;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 1px 4px rgba(16, 48, 112, 0.06);
        flex-shrink: 0;
    }

    .mobile-drawer-account-card:hover {
        background: #f5f8fc;
        border-color: #c5d4eb;
    }

    .mobile-drawer-account-card__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--ap-accent, #103070);
        color: #fff;
        flex-shrink: 0;
        font-size: 18px;
    }

    .mobile-drawer-account-card__text {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .mobile-drawer-account-card__title {
        font-size: 15px;
        font-weight: 700;
        color: var(--ap-accent, #103070);
        line-height: 1.2;
    }

    .mobile-drawer-account-card__title span {
        font-weight: 700;
        color: var(--ap-accent, #103070);
    }

    .mobile-drawer-account-card__sub {
        font-size: 12px;
        font-weight: 400;
        color: #666;
        line-height: 1.35;
    }

    .mobile-drawer-account-card__chev {
        flex-shrink: 0;
        font-size: 12px;
        color: #888;
    }

    .mobile-drawer-nav--account {
        border-top: none;
    }

    .mobile-drawer-link--logout {
        color: #c62828;
        font-weight: 600;
    }

    .mobile-drawer-link--logout:hover {
        color: #b71c1c;
        background: rgba(198, 40, 40, 0.06);
    }

    /* Logado: some o ícone de login, entra o botão de conta (usuário + seta)
       à direita do carrinho, com dropdown próprio. */
    body.store-mobile-logged-header-minimal .mobile-compact-header__account--guest,
    body.store-mobile-logged-header-minimal #headerMobileAccountGuest,
    body.store-mobile-logged-header-minimal .header-mobile-account,
    body.store-mobile-logged-header-minimal #headerMobileAccount,
    body.store-mobile-logged-header-minimal #mobileCompactUser {
        display: none !important;
    }

    body:not(.store-mobile-logged-header-minimal) .mobile-compact-header__user-menu-trigger,
    .mobile-compact-header__user-menu-trigger[hidden] {
        display: none !important;
    }

    body.store-mobile-logged-header-minimal .mobile-compact-header__account-wrap {
        display: block !important;
        position: relative;
    }

    body.store-mobile-logged-header-minimal .mobile-compact-header__user-menu-trigger {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        height: 40px;
        padding: 0 2px;
        background: none;
        border: 0;
        cursor: pointer;
        color: #1a1a1a;
    }

    /* Só o ícone + seta cabem no header; o nome fica no drawer. */
    .mobile-compact-header__user-menu-trigger .mobile-compact-header__user-lines {
        display: none !important;
    }

    .mobile-compact-header__user-menu-trigger .mobile-drawer-account-card__icon {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        border-radius: 50%;
        background: var(--ap-accent, #103070);
        color: #fff !important;
    }
    .mobile-compact-header__user-menu-trigger .mobile-drawer-account-card__icon i { color: #fff !important; }

    .mobile-compact-header__user-caret {
        font-size: 10px;
        color: #6b7280;
        transition: transform 0.2s ease;
    }

    .mobile-compact-header__user-menu-trigger[aria-expanded="true"] .mobile-compact-header__user-caret {
        transform: rotate(180deg);
    }

    /* fixed em vez de absolute: a linha do header tem overflow:hidden e
       recortava o dropdown. A posição é calculada no JS a partir do botão. */
    .mobile-compact-header__user-menu {
        position: fixed;
        z-index: 10060;
        min-width: 190px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-compact-header__user-menu[hidden] { display: none !important; }

    .mobile-compact-header__user-menu a,
    .mobile-compact-header__user-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        border-radius: 8px;
        background: none;
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-compact-header__user-menu a:active,
    .mobile-compact-header__user-menu button:active { background: #f5f5f5; }

    .mobile-compact-header__user-menu i { width: 16px; font-size: 14px; color: #6b7280; }
    .mobile-compact-header__user-menu #headerMobileUserLogout { color: #c62828; }
    .mobile-compact-header__user-menu #headerMobileUserLogout i { color: #c62828; }

    .mobile-drawer-close {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .mobile-drawer-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 24px;
    }

    .mobile-drawer-nav {
        display: flex;
        flex-direction: column;
    }

    .mobile-drawer-link,
    .mobile-drawer-accordion-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 16px 20px;
        border: none;
        background: transparent;
        color: #333;
        font-size: 15px;
        font-weight: 400;
        text-align: left;
        text-decoration: none;
        font-family: inherit;
        cursor: pointer;
        box-sizing: border-box;
        line-height: 1.35;
    }

    .mobile-drawer-link:hover,
    .mobile-drawer-accordion-trigger:hover {
        background: #f5f5f5;
    }

    .mobile-drawer-chevron {
        font-size: 11px;
        color: #888;
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .mobile-drawer-accordion.is-open .mobile-drawer-chevron {
        transform: rotate(180deg);
    }

    .mobile-drawer-accordion-panel {
        display: none;
        padding: 0 0 8px;
        background: #fafafa;
    }

    .mobile-drawer-accordion.is-open .mobile-drawer-accordion-panel {
        display: block;
    }

    .mobile-drawer-sublink {
        display: block;
        padding: 11px 20px 11px 28px;
        color: #555;
        font-size: 14px;
        text-decoration: none;
        line-height: 1.35;
    }

    .mobile-drawer-sublink--cat {
        font-weight: 600;
        color: #1a1a1a;
        padding-top: 12px;
    }

    .mobile-drawer-sublink--all {
        font-weight: 600;
        color: var(--ap-accent, #103070);
        padding: 12px 20px 10px 28px;
    }

    .mobile-drawer-sublink--all:hover {
        color: var(--ap-accent, #103070);
    }

    .mobile-drawer-sublink:hover {
        background: #f0f0f0;
        color: var(--ap-accent, #103070);
    }

    .mobile-drawer-link--all {
        display: none !important;
    }

    .mobile-drawer-sep {
        border: none;
        border-top: 1px solid #e8e8e8;
        margin: 8px 20px 16px;
    }

    .mobile-drawer-contact {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0 20px;
    }

    .mobile-drawer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0;
        color: #555;
        font-size: 13px;
        line-height: 1.4;
        text-decoration: none;
    }

    .mobile-drawer-contact-item i {
        width: 18px;
        text-align: center;
        flex-shrink: 0;
        margin-top: 2px;
        color: #333;
        font-size: 15px;
    }

    .mobile-drawer-contact-item .fab.fa-whatsapp {
        color: #25d366;
    }

    .mobile-drawer-contact-item:hover {
        color: var(--ap-accent, #103070);
    }

    .mobile-drawer-social {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px 8px;
    }

    .mobile-drawer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a1a1a;
        text-decoration: none;
        opacity: 0.85;
        transition: opacity 0.2s;
    }

    .mobile-drawer-social a:hover {
        opacity: 1;
    }

    .mobile-drawer-social svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    .mobile-drawer-social-ra {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        opacity: 1;
        margin-left: 2px;
    }

    .mobile-drawer-social-ra:hover {
        opacity: 0.88;
    }

    .mobile-drawer-ra-seal {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
        flex-shrink: 0;
    }

    .mobile-drawer-ra-logo {
        height: 14px;
        width: auto;
        max-width: 72px;
        object-fit: contain;
        display: block;
    }

    .mobile-drawer-link .cart-badge {
        position: static;
        margin-left: auto;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
    }
}

/* =====================================================================
   Menu lateral + cabeçalho — versão mobile premium (só ≤ 768px).
   Tokens do stelc-design.css; prefixo html body para vencer regras antigas.
   Sem setas decorativas (pedido do cliente): só os carets de abrir/fechar.
   ===================================================================== */
@media (max-width: 768px) {
    /* ---------- Cabeçalho ---------- */
    html body .mobile-compact-header { background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--ap-line-soft) !important;
        box-shadow: none !important; }
    html body .mobile-compact-header__menu-btn,
    html body .mobile-compact-header__cart,
    html body .mobile-compact-header__user-menu-trigger { border-radius: 12px !important; transition: background .15s; }
    html body .mobile-compact-header__menu-btn { width: 40px !important; height: 40px !important; display: inline-flex !important;
        align-items: center; justify-content: center; background: var(--ap-bg) !important; color: var(--ap-ink) !important; border: 0 !important; }
    html body .mobile-compact-header__menu-btn:active { background: var(--ap-accent-08) !important; }
    html body .mobile-compact-header__cep-label { font: 500 .66rem var(--ap-body) !important; color: var(--ap-ink-3) !important; }
    html body .mobile-compact-header__cep-value { font: 700 .76rem var(--ap-body) !important; color: var(--ap-ink) !important; }
    html body .mobile-compact-header__cep-pin { color: var(--ap-accent) !important; }
    html body .mobile-compact-header__user-caret { display: none !important; }
    html body #headerMobileSearch input, html body .search-bar-mobile input {
        height: 44px !important; border-radius: 12px !important; border: 1px solid var(--ap-line-soft) !important;
        background: var(--ap-bg) !important; box-shadow: none !important; font: 500 .92rem var(--ap-body) !important; color: var(--ap-ink) !important; }
    html body #headerMobileSearch input:focus, html body .search-bar-mobile input:focus {
        background: #fff !important; border-color: var(--ap-accent) !important; box-shadow: 0 0 0 3px var(--ap-accent-14) !important; outline: none; }
    html body #headerMobileSearch input::placeholder { color: var(--ap-ink-3) !important; }
    html body #headerMobileSearch .search-btn-mobile { color: var(--ap-accent) !important; }
    html body #headerMobileSearch .search-input-wrapper { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; position: relative; }
    html body #headerMobileSearch .search-btn-mobile { position: absolute !important; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
        border: 0 !important; background: none !important; display: inline-flex !important; align-items: center; justify-content: center; }
    html body #headerMobileSearch input { width: 100% !important; padding: 0 44px 0 14px !important; }

    /* ---------- Gaveta ---------- */
    html body .mobile-drawer, html body aside#mobileDrawer.mobile-drawer { width: min(86vw, 360px) !important; max-width: 360px !important; background: var(--ap-bg) !important;
        border-radius: 0 22px 22px 0 !important; box-shadow: 24px 0 60px -20px rgba(17,17,18,.35) !important; font-family: var(--ap-body); }
    html body .mobile-drawer-backdrop { background: rgba(10,16,36,.45) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    html body .mobile-drawer-header { display: flex !important; align-items: center; justify-content: space-between !important;
        padding: 18px 18px 10px !important; border: 0 !important; background: transparent !important; }
    html body .mobile-drawer-title { margin: 0 !important; font: 800 1.25rem var(--ap-display) !important; letter-spacing: -.02em; color: var(--ap-ink) !important; text-align: left !important; }
    html body .mobile-drawer-close { width: 38px !important; height: 38px !important; border-radius: 12px !important; border: 1px solid var(--ap-line-soft) !important;
        background: #fff !important; color: var(--ap-ink) !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: .95rem !important; }
    html body .mobile-drawer-body { padding: 6px 14px 24px !important; }

    /* Cartão da conta: navy, como o topo do /meuperfil */
    html body .mobile-drawer-account-card { display: flex !important; align-items: center; gap: 12px; padding: 14px !important; margin: 0 0 14px !important;
        border: 0 !important; border-radius: 18px !important; text-decoration: none !important;
        background: linear-gradient(135deg, var(--ap-accent) 0%, color-mix(in srgb, var(--ap-accent, #1e3370) 66%, #000) 100%) !important; box-shadow: 0 14px 30px -18px var(--ap-accent-40) !important; }
    html body .mobile-drawer .mobile-drawer-account-card__icon { width: 44px !important; height: 44px !important; flex: 0 0 44px; border-radius: 13px !important;
        background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important;
        display: inline-flex !important; align-items: center; justify-content: center; }
    html body .mobile-drawer-account-card__title, html body .mobile-drawer-account-card__title * { color: #fff !important; font: 700 .98rem var(--ap-body) !important; }
    html body .mobile-drawer-account-card__sub { color: rgba(255,255,255,.72) !important; font-size: .78rem !important; }
    html body .mobile-drawer-account-card__chev { display: none !important; }

    /* Itens: linha de 50px com ícone em quadrado suave */
    html body .mobile-drawer-nav { display: flex !important; flex-direction: column; gap: 2px; padding: 6px !important; margin: 0 0 14px !important;
        background: #fff; border: 1px solid var(--ap-line-soft); border-radius: 18px; }
    html body .mobile-drawer-link, html body .mobile-drawer-accordion-trigger {
        position: relative; display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 50px; box-sizing: border-box;
        padding: 0 12px !important; border: 0 !important; border-radius: 12px !important; background: none !important;
        font: 600 .95rem var(--ap-body) !important; color: var(--ap-ink) !important; text-decoration: none !important; text-align: left; justify-content: flex-start !important; }
    html body.mobile-drawer-open .stelc-chat-bubble, html.mobile-drawer-open .stelc-chat-bubble { display: none !important; }
    html body .mobile-drawer-link:active, html body .mobile-drawer-accordion-trigger:active,
    html body .mobile-drawer-accordion.open > .mobile-drawer-accordion-trigger,
    html body .mobile-drawer-accordion-trigger[aria-expanded="true"] { background: var(--ap-accent-08) !important; color: var(--ap-accent) !important; }
    html body .mobile-drawer-link::before, html body .mobile-drawer-accordion-trigger::before {
        font-family: inherit; font-weight: 900; font-size: .85rem; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center; background: var(--ap-accent-08); color: var(--ap-accent); }
    html body .mobile-drawer-nav > a[href="/inicio"]::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-house) center / 1em 1em no-repeat; mask: var(--si-house) center / 1em 1em no-repeat; background-color: currentColor !important; }
    html body #mobileDrawerProdutosBtn::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-package) center / 1em 1em no-repeat; mask: var(--si-package) center / 1em 1em no-repeat; background-color: currentColor !important; }
    html body #mobileDrawerMarcasBtn::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-tag) center / 1em 1em no-repeat; mask: var(--si-tag) center / 1em 1em no-repeat; background-color: currentColor !important; }
    html body #mobileDrawerCart::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-shopping-cart) center / 1em 1em no-repeat; mask: var(--si-shopping-cart) center / 1em 1em no-repeat; background-color: currentColor !important; }
    html body .mobile-drawer-nav > a[href*="tab=orders"]::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-receipt) center / 1em 1em no-repeat; mask: var(--si-receipt) center / 1em 1em no-repeat; background-color: currentColor !important; }
    html body .mobile-drawer-link--logout { color: var(--ap-danger) !important; }
    html body .mobile-drawer-link--logout::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-power-off) center / 1em 1em no-repeat; mask: var(--si-power-off) center / 1em 1em no-repeat; background-color: currentColor !important; background: rgba(217,45,32,.08) !important; color: var(--ap-danger) !important; }
    html body .mobile-drawer-accordion-trigger > span { flex: 1; }
    html body .mobile-drawer-chevron { font-size: .7rem !important; color: var(--ap-ink-3) !important; transition: transform .2s; }
    html body .mobile-drawer-accordion-trigger[aria-expanded="true"] .mobile-drawer-chevron,
    html body .mobile-drawer-accordion.open .mobile-drawer-chevron { transform: rotate(180deg); color: var(--ap-accent) !important; }
    html body #mobileDrawerCart .cart-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
        background: var(--ap-accent) !important; color: #fff !important; font: 700 .72rem var(--ap-body) !important; display: inline-flex; align-items: center; justify-content: center; }
    html body .mobile-drawer-accordion-panel { padding: 2px 6px 6px 58px !important; background: none !important; }
    html body .mobile-drawer-sublink { display: block; padding: 9px 10px !important; border-radius: 10px; font: 500 .88rem var(--ap-body) !important;
        color: var(--ap-ink-2) !important; text-decoration: none !important; }
    html body .mobile-drawer-sublink:active { background: var(--ap-surface-2) !important; color: var(--ap-accent) !important; }
    html body .mobile-drawer-sublink--cat, html body .mobile-drawer-sublink--all { font-weight: 700 !important; color: var(--ap-ink) !important; }

    /* Contato + redes num cartão próprio */
    html body .mobile-drawer-sep { display: none !important; }
    html body .mobile-drawer-contact { display: flex !important; flex-direction: column; gap: 2px; padding: 8px !important; margin: 0 !important;
        background: #fff; border: 1px solid var(--ap-line-soft); border-bottom: 0; border-radius: 18px 18px 0 0; }
    html body .mobile-drawer-contact-item { display: flex !important; align-items: flex-start; gap: 12px; padding: 10px 8px !important; border-radius: 10px;
        font: 500 .84rem var(--ap-body) !important; color: var(--ap-ink-2) !important; line-height: 1.45; text-decoration: none !important; }
    html body .mobile-drawer-contact-item i { flex: 0 0 18px; margin-top: 2px; color: var(--ap-accent) !important; text-align: center; }
    html body .mobile-drawer-contact-item i.fa-whatsapp { color: #25d366 !important; }
    html body .mobile-drawer-social { display: flex !important; align-items: center; gap: 8px; padding: 6px 16px 16px !important; margin: 0 0 14px !important;
        background: #fff; border: 1px solid var(--ap-line-soft); border-top: 0; border-radius: 0 0 18px 18px; }
    html body .mobile-drawer-social > a:not(.mobile-drawer-social-ra) { width: 40px; height: 40px; border-radius: 12px; display: inline-flex !important;
        align-items: center; justify-content: center; background: #fff; border: 1px solid var(--ap-line-soft); color: var(--ap-ink) !important; }
    html body .mobile-drawer-social-ra { margin-left: auto; }

    /* ---------- Refinos: cabeçalho ---------- */
    html body .mobile-compact-header__cart, html body .mobile-compact-header__user-menu-trigger {
        width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; display: inline-flex !important;
        align-items: center; justify-content: center; background: var(--ap-bg) !important; border: 0 !important; position: relative; }
    html body .mobile-compact-header__user-menu-trigger .mobile-drawer-account-card__icon {
        width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--ap-accent) !important; color: #fff !important;
        display: inline-flex !important; align-items: center; justify-content: center; font-size: .8rem !important; }
    html body .mobile-compact-header__user-lines { display: none !important; }
    html body .mobile-compact-header__cart img, html body .mobile-compact-header__cart-icon { width: 22px !important; height: 22px !important; }
    html body .mobile-compact-header__cart .cart-badge { position: absolute !important; top: -4px !important; right: -4px !important; min-width: 18px; height: 18px;
        padding: 0 5px; border-radius: 999px; border: 2px solid #fff; background: var(--ap-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
        font: 700 .62rem/1 var(--ap-body) !important; display: inline-flex !important; align-items: center; justify-content: center; text-indent: 0 !important; overflow: visible !important; }
    html body .mobile-compact-header__logo img { max-height: 40px !important; width: auto !important; }

    /* ---------- Refinos: busca ---------- */
    html body #headerMobileSearch { padding: 8px 14px 10px !important; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--ap-line-soft) !important; }
    html body #headerMobileSearch input { height: 42px !important; padding: 0 44px 0 40px !important; border-radius: 999px !important;
        background: var(--ap-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377777f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center/17px !important; }
    html body #headerMobileSearch input:focus { background-color: #fff !important; }
    /* lupa já está dentro do campo: o botão vira só a área de envio, sem ícone duplicado */
    html body #headerMobileSearch .search-btn-mobile { opacity: 0; }
    html body #headerMobileSearch input:not(:placeholder-shown) ~ .search-btn-mobile,
    html body #headerMobileSearch .search-input-wrapper:focus-within .search-btn-mobile { opacity: 1; }

    /* ---------- Refinos: dropdown Produtos / Marcas ---------- */
    html body .mobile-drawer-accordion-panel { padding: 4px 4px 8px 22px !important; }
    html body .mobile-drawer-accordion-panel > div { position: relative; padding-left: 14px; border-left: 2px solid var(--ap-accent-14); }
    html body .mobile-drawer-sublink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px !important; font-size: .86rem !important; }
    html body .mobile-drawer-sublink--all { display: inline-flex !important; width: auto; margin: 4px 0 8px; padding: 7px 12px !important; border-radius: 999px !important;
        background: var(--ap-accent) !important; color: #fff !important; font: 600 .78rem var(--ap-body) !important; }
    html body .mobile-drawer-sublink--cat { margin-top: 8px; padding: 6px 10px !important; font: 700 .72rem var(--ap-body) !important;
        letter-spacing: .06em; text-transform: uppercase; color: var(--ap-ink-3) !important; }
    html body .mobile-drawer-sublink:not(.mobile-drawer-sublink--all):not(.mobile-drawer-sublink--cat):active { background: var(--ap-accent-08) !important; }
}

/* ===== Modal "Informe seu CEP" (todas as larguras) ===== */
html body .header-cep-modal { background: rgba(10,16,36,.5) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html body .header-cep-modal-panel { box-sizing: border-box !important; max-width: none !important; width: min(420px, calc(100vw - 32px)) !important; padding: 28px 24px 22px !important; border-radius: 24px !important;
    border: 1px solid var(--ap-line-soft) !important; background: #fff !important; box-shadow: 0 30px 70px -24px rgba(17,17,18,.45) !important;
    font-family: var(--ap-body); text-align: left; }
html body .header-cep-modal-title { display: flex; align-items: center; gap: 12px; margin: 0 0 6px !important;
    font: 800 1.2rem var(--ap-display) !important; letter-spacing: -.02em; color: var(--ap-ink) !important; }
html body .header-cep-modal-title::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-map-pin) center / 1em 1em no-repeat; mask: var(--si-map-pin) center / 1em 1em no-repeat; background-color: currentColor !important; font-family: inherit; font-weight: 900; font-size: .95rem;
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ap-accent-08); color: var(--ap-accent); }
html body .header-cep-modal-desc { margin: 0 0 18px 52px !important; font-size: .86rem !important; color: var(--ap-ink-2) !important; }
html body .header-cep-close-btn { top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; border-radius: 12px !important;
    border: 1px solid var(--ap-line-soft) !important; background: #fff !important; color: var(--ap-ink) !important; }
html body .header-cep-input-group { display: flex !important; gap: 8px !important; }
html body .header-cep-input { flex: 1; min-width: 0; height: 50px !important; border-radius: 14px !important; border: 1px solid var(--ap-line) !important;
    background: var(--ap-bg) !important; padding: 0 16px !important; font: 600 1.05rem var(--ap-body) !important; letter-spacing: .08em; color: var(--ap-ink) !important; box-shadow: none !important; }
html body .header-cep-input:focus { outline: none; background: #fff !important; border-color: var(--ap-accent) !important; box-shadow: 0 0 0 3px var(--ap-accent-14) !important; }
html body .header-cep-submit-btn { height: 50px !important; padding: 0 22px !important; border: 0 !important; border-radius: 14px !important;
    background: var(--ap-accent) !important; color: #fff !important; font: 700 .92rem var(--ap-body) !important; box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--ap-accent, #1e3370) 70%, transparent) !important; }
html body .header-cep-submit-btn:hover { background: var(--ap-accent-hi) !important; }
html body .header-cep-help-link { display: inline-block; margin-top: 12px !important; font: 600 .82rem var(--ap-body) !important; color: var(--ap-accent) !important; }

/* ===== Menu mobile: folha inferior com abas (igual aos Filtros) ===== */
@media (max-width: 768px) {
    html body .mobile-drawer, html body aside#mobileDrawer.mobile-drawer {
        top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; max-width: none !important; height: auto !important; max-height: 88dvh !important;
        display: flex !important; flex-direction: column; border-radius: 24px 24px 0 0 !important;
        transform: translateY(105%) !important; transition: transform .38s cubic-bezier(.16,1,.3,1) !important;
        box-shadow: 0 -24px 60px -20px rgba(17,17,18,.35) !important; }
    html body.mobile-drawer-open .mobile-drawer, html body.mobile-drawer-open aside#mobileDrawer.mobile-drawer { transform: none !important; }
    html body .mobile-drawer .mobile-drawer-header { position: relative; flex: 0 0 auto; padding: 22px 18px 12px !important; }
    html body .mobile-drawer .mobile-drawer-header::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px;
        margin-left: -20px; border-radius: 4px; background: rgba(17,17,18,.15); }
    html body .mobile-drawer .mobile-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overscroll-behavior: contain;
        padding: 0 14px calc(18px + env(safe-area-inset-bottom)) !important; }

    .md-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 14px 12px; padding: 6px;
        background: #fff; border: 1px solid var(--ap-line-soft); border-radius: 18px; }
    .md-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 7px; border: 0; background: none;
        border-radius: 12px; font: 600 .72rem var(--ap-body); color: var(--ap-ink-2); cursor: pointer; }
    .md-tab i { width: 52px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
        font-size: 1rem; transition: background .2s, color .2s; }
    .md-tab.is-active { color: var(--ap-accent); }
    .md-tab.is-active i { background: var(--ap-accent); color: #fff; }

    /* o que aparece em cada aba */
    #mobileDrawer:not([data-tab="menu"]) .mobile-drawer-nav--account,
    #mobileDrawer:not([data-tab="contato"]) .mobile-drawer-contact,
    #mobileDrawer:not([data-tab="contato"]) .mobile-drawer-social,
    #mobileDrawer[data-tab="contato"] .mobile-drawer-nav:not(.mobile-drawer-nav--account),
    #mobileDrawer[data-tab="menu"] .mobile-drawer-accordion,
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) > :not(#mobileDrawerProdutosAccordion),
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) > :not(#mobileDrawerMarcasAccordion) { display: none !important; }

    /* aba Menu: nav principal + nav da conta formam um card só */
    #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:has(+ .mobile-drawer-nav--account > a:not([hidden])) {
        margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0; border-radius: 18px 18px 0 0; }
    #mobileDrawer[data-tab="menu"] .mobile-drawer-nav--account { padding-top: 2px !important; border-top: 0; border-radius: 0 0 18px 18px; }
    .mobile-drawer-nav--account:not(:has(> a:not([hidden]))) { display: none !important; }

    /* card da conta fica fixo acima das abas (movido via JS) */
    /* conta + abas = um cabeçalho navy só; abas viram segmentos claros sobre o navy */
    #mobileDrawer > .mobile-drawer-account-card { flex: 0 0 auto; margin: 0 14px !important; padding-bottom: 10px !important;
        border-radius: 20px 20px 0 0 !important; box-shadow: none !important; background: linear-gradient(180deg, var(--ap-accent) 0%, #182858 100%) !important; }
    #mobileDrawer > .mobile-drawer-account-card + .md-tabs { margin-bottom: 14px; padding: 4px 8px 10px; border: 0; border-radius: 0 0 20px 20px;
        background: linear-gradient(180deg, #182858 0%, color-mix(in srgb, var(--ap-accent, #1e3370) 66%, #000) 100%); box-shadow: 0 14px 30px -18px var(--ap-accent-40); }
    #mobileDrawer > .mobile-drawer-account-card + .md-tabs .md-tab { color: rgba(255,255,255,.66); }
    #mobileDrawer > .mobile-drawer-account-card + .md-tabs .md-tab.is-active { color: #fff; }
    #mobileDrawer > .mobile-drawer-account-card + .md-tabs .md-tab.is-active i { background: #fff; color: var(--ap-accent); }

    /* nas abas Produtos/Marcas o acordeão vira a própria lista */
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-accordion-trigger,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-accordion-trigger { display: none !important; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-accordion-panel,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-accordion-panel { display: block !important; max-height: none !important; overflow: visible !important;
        padding: 6px 4px !important; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-accordion-panel > div,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-accordion-panel > div { border-left: 0 !important; padding-left: 0 !important; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink:not(.mobile-drawer-sublink--all):not(.mobile-drawer-sublink--cat),
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink { min-height: 44px; display: flex !important; align-items: center; padding: 0 12px !important;
        border-radius: 12px; font-size: .92rem !important; color: var(--ap-ink) !important; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-subgroup { margin-top: 6px; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink--all { margin: 4px 8px 6px !important; }
    #mobileDrawer .mobile-drawer-contact { margin-top: 0 !important; }

    /* busca + paginação nas abas Produtos/Marcas */
    #mobileDrawer .mobile-drawer-accordion-panel .mobile-drawer-sublink[hidden] { display: none !important; }
    #mobileDrawer .mobile-drawer-subgroup:not(:has(.mobile-drawer-sublink:not([hidden]))) { display: none !important; }
    #mobileDrawer:not([data-tab="produtos"]):not([data-tab="marcas"]) .md-list-search,
    #mobileDrawer:not([data-tab="produtos"]):not([data-tab="marcas"]) .md-pager { display: none; }
    .md-list-search { display: block; width: 100%; box-sizing: border-box; height: 44px; margin: 2px 0 8px; padding: 0 14px;
        border: 1px solid var(--ap-line-soft); border-radius: 12px; background: var(--ap-accent-08); font: 500 .92rem var(--ap-body); color: var(--ap-ink); }
    .md-list-search:focus { outline: 2px solid var(--ap-accent); outline-offset: -1px; background: #fff; }
    .md-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 10px;
        border-top: 1px solid var(--ap-line-soft); font: 600 .8rem var(--ap-body); color: var(--ap-ink-2); }
    .md-pager button { height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--ap-accent); color: #fff;
        font: 600 .82rem var(--ap-body); cursor: pointer; }
    .md-pager button:disabled { background: var(--ap-accent-08); color: var(--ap-ink-3); cursor: default; }
}

/* Menu mobile: altura fixa igual para todas as abas (conteúdo rola por dentro) */
@media (max-width: 768px) {
    html body .mobile-drawer, html body aside#mobileDrawer.mobile-drawer { height: min(82dvh, 680px) !important; max-height: 88dvh !important; }
}

/* Menu mobile: padrão de enquadramento único para as 4 abas.
   Mesmo frame (card branco que ocupa a altura restante), mesmo respiro (14px), mesma linha (48px, ícone 34px). */
@media (max-width: 768px) {
    #mobileDrawer { --md-gap: 14px; --md-row: 48px; }
    html body #mobileDrawer .mobile-drawer-body { display: flex !important; flex-direction: column; padding: 0 var(--md-gap) var(--md-gap) !important; }
    #mobileDrawer .mobile-drawer-body > * { flex-shrink: 0; }
    #mobileDrawer .mobile-drawer-nav, #mobileDrawer .mobile-drawer-social { margin-bottom: 0 !important; }

    /* o último card visível de cada aba estica até o fim: todas as abas têm o mesmo quadro */
    #mobileDrawer[data-tab="menu"] .mobile-drawer-nav--account,
    #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:not(:has(+ .mobile-drawer-nav--account > a:not([hidden]))),
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-nav:not(.mobile-drawer-nav--account),
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-nav:not(.mobile-drawer-nav--account),
    #mobileDrawer[data-tab="contato"] .mobile-drawer-social { flex: 1 0 auto; }

    /* linhas: mesma altura e mesmo ícone em todas as abas */
    html body #mobileDrawer .mobile-drawer-link, html body #mobileDrawer .mobile-drawer-accordion-trigger { min-height: var(--md-row); }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink:not(.mobile-drawer-sublink--cat),
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink { min-height: var(--md-row) !important; }
    html body #mobileDrawer .mobile-drawer-contact { padding: 6px !important; gap: 2px; }
    html body #mobileDrawer .mobile-drawer-contact-item { min-height: var(--md-row); align-items: center; padding: 7px 12px !important; border-radius: 12px; }
    html body #mobileDrawer .mobile-drawer-contact-item i { flex: 0 0 34px; width: 34px; height: 34px; margin: 0; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center; background: var(--ap-accent-08); }
    html body #mobileDrawer .mobile-drawer-contact-item i.fa-whatsapp { background: rgba(37,211,102,.12); }
    html body #mobileDrawer .mobile-drawer-social { align-items: flex-end; padding: 12px 18px 18px !important; }

    /* listas: busca no topo, itens no meio, paginação presa no rodapé do quadro */
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-accordion,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-accordion,
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-accordion-panel,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-accordion-panel { flex: 1 0 auto; display: flex !important; flex-direction: column; }
    #mobileDrawer .md-list-search { height: var(--md-row); margin: 0 0 6px; }
    #mobileDrawer .md-pager { margin-top: auto; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-subgroup { margin-top: 0; }
}

/* Menu mobile: filtro de categoria da aba Produtos + ícones de Entrar/Criar conta/Todos os produtos */
@media (max-width: 768px) {
    #mobileDrawer .mobile-drawer-accordion-panel .mobile-drawer-sublink--cat[hidden] { display: none !important; }
    html body #mobileDrawer .mobile-drawer-link[hidden] { display: none !important; }
    html body #mobileDrawer .mobile-drawer-link--all::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-layout-grid) center / 1em 1em no-repeat; mask: var(--si-layout-grid) center / 1em 1em no-repeat; background-color: currentColor !important; }
    html body #mobileDrawer .mobile-drawer-link--login::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-log-in) center / 1em 1em no-repeat; mask: var(--si-log-in) center / 1em 1em no-repeat; background-color: currentColor !important; }
    html body #mobileDrawer .mobile-drawer-link--signup::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-user-round-plus) center / 1em 1em no-repeat; mask: var(--si-user-round-plus) center / 1em 1em no-repeat; background-color: currentColor !important; }
}

/* Menu mobile: aba Menu — WhatsApp em destaque; visitante ganha botões Entrar/Criar conta no rodapé do quadro;
   logado, Sair desce para o rodapé */
@media (max-width: 768px) {
    html body #mobileDrawer .mobile-drawer-link--whats::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-brand-whatsapp) center / 1em 1em no-repeat; mask: var(--si-brand-whatsapp) center / 1em 1em no-repeat; background-color: currentColor !important; font-family: inherit; font-weight: 400;
        background: rgba(37,211,102,.12); color: #1faa55; }
    #mobileDrawer[data-tab="menu"] .mobile-drawer-nav--account:has([data-drawer-guest-only]:not([hidden])) {
        flex-direction: row !important; flex-wrap: wrap; align-content: flex-end; gap: 8px !important; padding: 8px 10px 10px !important; }
    html body #mobileDrawer .mobile-drawer-link--login, html body #mobileDrawer .mobile-drawer-link--signup {
        flex: 1 1 calc(50% - 4px); justify-content: center !important; min-height: 46px; border-radius: 14px !important; font-weight: 700 !important; }
    html body #mobileDrawer .mobile-drawer-link--login { background: var(--ap-accent) !important; color: #fff !important; }
    html body #mobileDrawer .mobile-drawer-link--signup { background: #fff !important; color: var(--ap-accent) !important;
        box-shadow: inset 0 0 0 1.5px var(--ap-accent) !important; }
    html body #mobileDrawer .mobile-drawer-link--login::before, html body #mobileDrawer .mobile-drawer-link--signup::before {
        flex: 0 0 auto; width: auto; height: auto; background: none !important; color: inherit !important; }
    #mobileDrawer[data-tab="menu"] .mobile-drawer-nav--account .mobile-drawer-link--logout { margin-top: auto; }
}

/* Menu mobile: Contato com rótulo em cada linha + CTA de WhatsApp no rodapé */
@media (max-width: 768px) {
    html body #mobileDrawer .mobile-drawer-contact-item span[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px;
        font: 700 .68rem var(--ap-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ap-ink-3); }
    html body #mobileDrawer .mobile-drawer-contact-item span { color: var(--ap-ink) !important; font-weight: 600; }
    html body #mobileDrawer .mobile-drawer-contact-item { min-height: 58px; }
    #mobileDrawer .mobile-drawer-subgroup:has(.mobile-drawer-sublink:not([hidden]):not(.mobile-drawer-sublink--cat)) { display: block !important; }
    #mobileDrawer .mobile-drawer-subgroup:not(:has(.mobile-drawer-sublink:not([hidden]):not(.mobile-drawer-sublink--cat))) { display: none !important; }
}

/* Menu mobile premium: lista com altura travada no quadro, monograma por item, divisórias finas, CTA WhatsApp */
@media (max-width: 768px) {
    /* altura das listas vem do layout, não do conteúdo: paginação nunca sai do quadro */
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-nav:not(.mobile-drawer-nav--account),
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-nav:not(.mobile-drawer-nav--account),
    #mobileDrawer[data-tab="produtos"] #mobileDrawerProdutosAccordion,
    #mobileDrawer[data-tab="marcas"] #mobileDrawerMarcasAccordion,
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-accordion-panel,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-accordion-panel { flex: 1 1 0 !important; min-height: 0 !important; }
    #mobileDrawer[data-tab="produtos"] #mobileDrawerProdutosSub,
    #mobileDrawer[data-tab="marcas"] #mobileDrawerMarcasSub { flex: 1 1 0; min-height: 0; overflow: hidden; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-body,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-body { overflow: hidden !important; }

    /* linhas das listas no mesmo padrão das linhas do Menu: monograma 34px + divisória */
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink:not(.mobile-drawer-sublink--cat),
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink { position: relative; gap: 12px; margin: 0 !important; font-weight: 600 !important; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink[data-initial]::before,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink[data-initial]::before { content: attr(data-initial); flex: 0 0 34px; width: 34px; height: 34px;
        border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ap-accent-08); color: var(--ap-accent);
        font: 800 .85rem var(--ap-body); }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink:not(.mobile-drawer-sublink--cat) + .mobile-drawer-sublink:not([hidden])::after,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink + .mobile-drawer-sublink:not([hidden])::after { content: ""; position: absolute; top: 0; left: 58px; right: 12px;
        border-top: 1px solid var(--ap-line-soft); }
    #mobileDrawer .md-pager span { font-variant-numeric: tabular-nums; color: var(--ap-ink-3); }
    #mobileDrawer .md-list-search { padding-left: 42px; background: var(--ap-accent-08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center/18px; border-color: transparent; }

    /* Contato: CTA principal preenche o quadro */
    #mobileDrawer .md-cta-whats { display: flex; align-items: center; gap: 12px; margin: 10px 6px 4px; padding: 14px 16px; border-radius: 16px;
        background: linear-gradient(135deg, #25d366 0%, #128c4a 100%); color: #fff !important; text-decoration: none !important;
        box-shadow: 0 14px 28px -16px rgba(18,140,74,.7); }
    #mobileDrawer .md-cta-whats i { font-size: 1.5rem; flex: 0 0 auto; }
    #mobileDrawer .md-cta-whats span { display: flex; flex-direction: column; gap: 2px; }
    #mobileDrawer .md-cta-whats strong { font: 800 .98rem var(--ap-body); }
    #mobileDrawer .md-cta-whats small { font: 500 .76rem var(--ap-body); opacity: .88; }
    #mobileDrawer .md-cta-whats:active { transform: scale(.98); }
}

/* sem monograma nas listas; divisória só entre itens visíveis */
@media (max-width: 768px) {
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink[data-initial]::before,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink[data-initial]::before { content: none; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink::after,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink::after { content: none !important; }
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-sublink:not(.mobile-drawer-sublink--cat):not([hidden]) ~ .mobile-drawer-sublink:not([hidden])::after,
    #mobileDrawer[data-tab="produtos"] .mobile-drawer-subgroup:has(.mobile-drawer-sublink:not([hidden]):not(.mobile-drawer-sublink--cat)) ~ .mobile-drawer-subgroup .mobile-drawer-sublink:not([hidden]):not(.mobile-drawer-sublink--cat)::after,
    #mobileDrawer[data-tab="marcas"] .mobile-drawer-sublink:not([hidden]) ~ .mobile-drawer-sublink:not([hidden])::after {
        content: "" !important; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid var(--ap-line-soft); }
    html body #mobileDrawer .mobile-drawer-title { display: none !important; }
}
@media (max-width: 768px) { html body #mobileDrawer .mobile-drawer-close { margin-left: auto !important; } }

/* [hidden] vence as regras de display das abas (a de Produtos tinha especificidade maior e ignorava a paginação) */
@media (max-width: 768px) {
    html body #mobileDrawer[data-tab] .mobile-drawer-sublink[hidden]:not(.x):not(.y) { display: none !important; }
    #mobileDrawer .md-cta-whats { margin-top: 10px; }
}
@media (max-width: 768px) { #mobileDrawer .md-list-search, #mobileDrawer .md-pager { flex-shrink: 0; } }