/* Loja no celular (≤768px), padrão de app: topo com menu/logo/carrinho, busca, linha de CEP,
   banner em cartão, categorias em fila e barra inferior. Cores sempre do tema de cada loja. */
.mobile-cep-line, .store-tabbar { display: none; }

@media (max-width: 768px) {
  html body { --sm-accent: var(--ap-accent, #0f766e); --sm-ink: var(--ap-ink, #0f172a); --sm-muted: #64748b; --sm-line: #e6e9ee; --sm-soft: #f5f7f9;
    --sm-r: var(--ap-r-card, 16px); --sm-tab-h: 64px; }

  /* Topo: menu · logo · carrinho */
  html body #headerMobileRow.mobile-compact-header { display: grid !important; grid-template-columns: 48px 1fr auto !important; align-items: center !important; gap: 8px !important;
    min-height: 60px !important; padding: 6px 12px !important; }
  html body #headerMobileRow .mobile-compact-header__menu { grid-column: 1 !important; display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; margin: 0 !important;
    padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; }
  html body #headerMobileRow .mobile-compact-header__menu i, html body #headerMobileRow .mobile-compact-header__cart-ico { font-size: 22px !important; }
  html body #headerMobileRow .mobile-compact-header__center { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; justify-content: center !important; min-width: 0 !important;
    position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; width: auto !important; }
  html body #headerMobileRow .mobile-compact-header__logo img { display: block !important; width: auto !important; height: 46px !important; max-width: 180px !important; object-fit: contain !important; }
  html body #headerMobileRow .mobile-compact-header__end { grid-column: 3 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; margin: 0 !important; }
  html body #headerMobileRow .mobile-compact-header__cart { position: relative !important; display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; font-size: 22px !important; }
  html body #headerMobileRow #cartBadge { position: absolute !important; top: 0 !important; right: -2px !important; min-width: 20px !important; height: 20px !important; padding: 0 5px !important;
    border: 2px solid var(--site-header-bg, #fff) !important; border-radius: 999px !important; background: var(--sm-accent) !important; color: #fff !important;
    font: 700 11px/16px var(--ap-body, system-ui) !important; text-align: center !important; }

  /* Busca */
  html body #headerMobileSearch.search-bar-mobile { padding: 4px 16px 0 !important; background: var(--site-header-bg, #fff) !important; }
  html body #headerMobileSearch .search-input-wrapper { position: relative !important; display: flex !important; align-items: center !important; gap: 0 !important; height: 52px !important;
    padding: 0 4px 0 0 !important; border: 1px solid var(--sm-line) !important; border-radius: 16px !important; background: var(--sm-soft) !important; box-shadow: none !important; }
  html body #headerMobileSearch #searchInputMobile { flex: 1 !important; min-width: 0 !important; height: 100% !important; padding: 0 8px 0 16px !important; border: 0 !important; background: transparent !important;
    color: var(--sm-ink) !important; font-size: 15px !important; outline: none !important; }
  html body #headerMobileSearch .search-btn-mobile { display: grid !important; place-items: center !important; flex: none !important; width: 52px !important; height: 44px !important; margin: 0 !important;
    border: 0 !important; border-radius: 12px !important; background: var(--sm-accent) !important; color: #fff !important; font-size: 18px !important; }

  /* CEP: ícone compacto ao lado do carrinho, no topo */
  html body #headerMobileRow #headerCepBtn.mobile-cep-line { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: var(--sm-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
  html body #headerMobileRow #headerCepBtn.mobile-cep-line:active { background: var(--sm-soft); }
  html body #headerMobileRow #headerCepBtn.mobile-cep-line:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }
  html body #headerCepBtn .mobile-cep-line__pin { display: grid; place-items: center; width: 100%; height: 100%; color: var(--sm-accent); font-size: 19px; }
  html body #headerCepBtn.mobile-cep-line.is-empty .mobile-cep-line__pin { color: var(--sm-accent); }

  /* Banner em cartão arredondado */
  html body #homeHeroBanner.home-hero-banner-slot { width: auto !important; max-width: none !important; margin: 6px 16px 0 !important; border-radius: calc(var(--sm-r) + 4px) !important; overflow: hidden !important;
    box-shadow: 0 14px 30px -18px rgba(15,23,42,.45) !important; }
  html body #homeHeroBanner > *, html body #homeHeroBanner .home-banner-fullwidth { width: 100% !important; max-width: 100% !important; margin: 0 !important; left: auto !important; }
  html body #homeHeroBanner img { display: block !important; width: 100% !important; height: auto !important; }

  /* Seções: título e "Ver todas" no padrão da referência */
  html body .main-content .category-section-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 16px !important; margin-bottom: 12px !important; }
  html body .main-content .category-section-title { font-size: 20px !important; line-height: 1.2 !important; letter-spacing: -.01em !important; color: var(--sm-ink) !important; }
  html body .category-section .category-section-view-all, html body #departmentsSection .category-section-view-all { color: var(--sm-accent) !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important; white-space: nowrap !important; }
  html body .products-section .category-section-view-all { font-size: 13.5px !important; }
  html body #departmentsSection .category-section-view-all::before { font-size: 13.5px !important; }
  html body #departmentsSection .departments-section-head::before { font-size: 20px !important; color: var(--sm-ink) !important; }

  /* Compre por categoria: fila de miniaturas com rolagem lateral natural */
  html body #departmentsSection .carousel-nav-btn { display: none !important; }
  html body #departmentsSection .departments-carousel { display: flex !important; gap: 10px !important; overflow-x: auto !important; padding: 2px 16px 6px !important; scroll-snap-type: x proximity !important;
    scrollbar-width: none !important; transform: none !important; }
  html body #departmentsSection .departments-carousel::-webkit-scrollbar { display: none !important; }
  html body #departmentsSection .department-card { flex: 0 0 86px !important; width: 86px !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important; scroll-snap-align: start !important; text-align: center !important; }
  html body #departmentsSection .department-image-container { display: grid !important; place-items: center !important; width: 86px !important; height: 86px !important; margin: 0 0 8px !important;
    padding: 8px !important; border: 1px solid var(--sm-line) !important; border-radius: var(--sm-r) !important; background: var(--sm-soft) !important; }
  html body #departmentsSection .department-image { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  html body #departmentsSection .department-name { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
    color: var(--sm-ink) !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.3 !important; }

  /* Cartões de produto */
  html body .main-content .product-card { border: 1px solid var(--sm-line) !important; border-radius: var(--sm-r) !important; background: #fff !important; box-shadow: 0 10px 24px -20px rgba(15,23,42,.5) !important; overflow: hidden !important; }
  html body .main-content .product-card .product-image { background: var(--sm-soft) !important; }
  html body .main-content .product-card .product-name { color: var(--sm-ink) !important; font-weight: 600 !important; }

  /* Barra inferior */
  html body .store-tabbar { position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--sm-tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--sm-line); background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -8px 24px -18px rgba(15,23,42,.35); }
  html body .store-tabbar > a, html body .store-tabbar > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0; border: 0;
    background: none; color: var(--sm-muted); font: 500 12px/1.1 var(--ap-body, system-ui); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html body .store-tabbar i { font-size: 21px; }
  html body .store-tabbar [aria-current="page"] { color: var(--sm-accent); font-weight: 700; }
  html body .store-tabbar a:focus-visible, html body .store-tabbar button:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: -4px; border-radius: 12px; }
  html body.has-store-tabbar { padding-bottom: calc(var(--sm-tab-h) + env(safe-area-inset-bottom)) !important; }
  html body.has-store-tabbar .stelc-chat-bubble:not(.stelc-chat-bubble--in-header) { bottom: calc(var(--sm-tab-h) + 14px + env(safe-area-inset-bottom)) !important; }
  html body.has-store-tabbar .stelc-chat-panel { bottom: calc(var(--sm-tab-h) + 80px + env(safe-area-inset-bottom)) !important; max-height: calc(100dvh - var(--sm-tab-h) - 120px) !important; }
}

/* Menu (gaveta), aba Menu: lista com ícone, divisória e seta; conta embaixo com "Entrar" e "Criar conta". */
@media (max-width: 768px) {
  /* Aba Menu: lista única num cartão, linhas com ícone · título · seta e divisória fina */
  html body #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) { flex: 0 0 auto !important; gap: 0 !important; margin: 0 !important; padding: 2px 6px !important;
    border: 1px solid var(--sm-line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; }
  html body #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) > .mobile-drawer-link { min-height: 50px !important; gap: 14px !important; padding: 0 10px !important;
    border: 0 !important; border-radius: 10px !important; background: none !important; box-shadow: none !important; font-size: .95rem !important; }
  html body #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) > .mobile-drawer-link ~ .mobile-drawer-link:not([hidden]) {
    background: linear-gradient(var(--sm-line), var(--sm-line)) 48px 0 / calc(100% - 58px) 1px no-repeat !important; }
  html body #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) > .mobile-drawer-link:active { background-color: var(--sm-soft) !important; }
  html body #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) > .mobile-drawer-link::before {
    flex: 0 0 22px !important; width: 22px !important; height: 22px !important; border-radius: 0 !important; color: var(--sm-accent) !important;
    -webkit-mask-size: 20px 20px !important; mask-size: 20px 20px !important; }
  html body #mobileDrawer[data-tab="menu"] .mobile-drawer-nav:not(.mobile-drawer-nav--account) > .mobile-drawer-link::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-left: auto;
    -webkit-mask: var(--si-chevron-right) center / 14px 14px no-repeat; mask: var(--si-chevron-right) center / 14px 14px no-repeat; background-color: #a3acb9; }
  html body #mobileDrawer .mobile-drawer-link--cats::before { content: ""; -webkit-mask: var(--si-layers) center no-repeat; mask: var(--si-layers) center no-repeat; background-color: currentColor !important; }
  html body #mobileDrawer .mobile-drawer-link--ofertas::before { content: ""; -webkit-mask: var(--si-percent) center no-repeat; mask: var(--si-percent) center no-repeat; background-color: currentColor !important; }
  html body #mobileDrawer .mobile-drawer-link--pedidos::before { content: ""; -webkit-mask: var(--si-package) center no-repeat; mask: var(--si-package) center no-repeat; background-color: currentColor !important; }
  html body #mobileDrawer .mobile-drawer-link--cupons::before { content: ""; -webkit-mask: var(--si-ticket) center no-repeat; mask: var(--si-ticket) center no-repeat; background-color: currentColor !important; }
  html body #mobileDrawer .mobile-drawer-link--dados::before { content: ""; -webkit-mask: var(--si-user-round-cog) center no-repeat; mask: var(--si-user-round-cog) center no-repeat; background-color: currentColor !important; }
  html body #mobileDrawer .mobile-drawer-link--ajuda::before { content: ""; -webkit-mask: var(--si-headset) center no-repeat; mask: var(--si-headset) center no-repeat; background-color: currentColor !important; }
  html body #mobileDrawer #mobileDrawerCart .cart-badge { position: absolute; right: 36px; margin: 0 !important; }
  html body #mobileDrawer #mobileDrawerCart .cart-badge:empty { display: none !important; }

  /* Conta: fora do cartão, presa no rodapé do quadro */
  html body #mobileDrawer#mobileDrawer[data-tab="menu"] .mobile-drawer-nav--account.mobile-drawer-nav--account { flex: 1 0 auto !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-end !important;
    gap: 10px !important; margin-top: 12px !important; padding: 0 2px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  html body #mobileDrawer#mobileDrawer .mobile-drawer-link--login { flex: 0 0 auto !important; width: 100% !important; min-height: 50px !important; justify-content: center !important; gap: 10px !important;
    border-radius: 16px !important; background: linear-gradient(135deg, var(--sm-accent), color-mix(in srgb, var(--sm-accent) 72%, #000)) !important; color: #fff !important;
    font-size: 1rem !important; box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--sm-accent) 80%, transparent) !important; }
  html body #mobileDrawer .mobile-drawer-link--login::before { content: "" !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important;
    -webkit-mask: var(--si-user-round) center / 20px 20px no-repeat !important; mask: var(--si-user-round) center / 20px 20px no-repeat !important; background: #fff !important; }
  html body #mobileDrawer .mobile-drawer-link--login::after { content: ""; position: absolute; right: 18px; width: 18px; height: 18px;
    -webkit-mask: var(--si-chevron-right) center / 18px 18px no-repeat; mask: var(--si-chevron-right) center / 18px 18px no-repeat; background: #fff; }

  /* aba Menu: a folha cresce até o conteúdo (sem cortar "Criar conta") */
  html body aside#mobileDrawer.mobile-drawer[data-tab="menu"] { height: auto !important; max-height: 92dvh !important; }
  html body #mobileDrawer#mobileDrawer[data-tab="menu"] .mobile-drawer-nav--account.mobile-drawer-nav--account { flex: 0 0 auto !important; padding-bottom: 4px !important; }
  /* cartão da conta + abas: degradê só com a cor da loja */
  html body #mobileDrawer > .mobile-drawer-account-card { background: linear-gradient(180deg, var(--sm-accent) 0%, color-mix(in srgb, var(--sm-accent) 82%, #000) 100%) !important; }
  html body #mobileDrawer > .mobile-drawer-account-card + .md-tabs { background: linear-gradient(180deg, color-mix(in srgb, var(--sm-accent) 82%, #000) 0%, color-mix(in srgb, var(--sm-accent) 66%, #000) 100%) !important; }
}