/* ============================================================
   Mobile Obra Certa · Drawer de categorias + Bottom tab bar
   Visível só em ≤900px
   ============================================================ */

/* Tokens locais (independentes do escopo da home/PDP) */
:root {
  --mo-purple:#421685;
  --mo-purple-2:#2e0a64;
  --mo-purple-3:#7641c4;
  --mo-green:#4eb33a;
  --mo-green-2:#3d8f2a;
  --mo-ink:#1b1226;
  --mo-ink-2:#3a2e4a;
  --mo-ink-3:#6b6478;
  --mo-line:#ece8f0;
  --mo-line-2:#dad5e0;
  --mo-paper:#f6f4f9;
  --mo-tabbar-h:64px;
}

/* Esconde drawer/tabbar em desktop por padrão */
.mo-drawer { display:none; }
.mo-tabbar { display:none; }

/* ─────────────────────────────────────────────────────────────
   MOBILE (≤900px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Esconde a mobile-nav antiga (drawer cobrirá tudo) */
  .ob-mobile-nav { display:none !important; }

  /* Drawer */
  .mo-drawer {
    display:block; position:fixed; inset:0; z-index:1500;
    pointer-events:none;
  }
  .mo-drawer__overlay {
    position:absolute; inset:0;
    background:rgba(15,8,30,.55);
    opacity:0; transition:opacity .2s ease;
    pointer-events:none;
  }
  .mo-drawer__panel {
    position:absolute; top:0; bottom:0; left:0;
    width:min(85vw, 380px);
    background:#fff;
    transform:translateX(-105%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
    box-shadow:0 0 40px rgba(0,0,0,.18);
    pointer-events:none;
  }

  .mo-drawer.is-open { pointer-events:auto; }
  .mo-drawer.is-open .mo-drawer__overlay { opacity:1; pointer-events:auto; }
  .mo-drawer.is-open .mo-drawer__panel  { transform:translateX(0); pointer-events:auto; }

  .mo-drawer__head {
    background:var(--mo-purple);
    color:#fff;
    padding:18px 18px;
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:2;
  }
  .mo-drawer__login {
    flex:1; display:flex; align-items:center; gap:14px;
    color:#fff; text-decoration:none;
  }
  .mo-drawer__login-ic {
    width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .mo-drawer__login-text {
    font-size:16px; font-weight:800; line-height:1.2;
  }
  .mo-drawer__close {
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.15); color:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }

  .mo-drawer__list {
    list-style:none; margin:0; padding:0;
    flex:1; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .mo-drawer__item { border-bottom:1px solid var(--mo-line); }
  .mo-drawer__item.has-sub .mo-drawer__row { padding-right:8px; }
  .mo-drawer__row {
    display:flex; align-items:center; gap:10px;
    padding:16px 18px; min-height:54px;
  }
  .mo-drawer__row-link {
    flex:1; color:var(--mo-ink); text-decoration:none;
  }
  .mo-drawer__row-text {
    font-size:15px; font-weight:700; line-height:1.3;
  }
  .mo-drawer__item--feature .mo-drawer__row-text {
    color:var(--mo-purple); font-weight:900;
  }
  .mo-drawer__row-toggle,
  .mo-drawer__row-chev {
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:transparent; color:var(--mo-ink-3); font-size:20px;
    font-weight:600; line-height:1; flex-shrink:0;
    transition:transform .15s, background .15s;
  }
  .mo-drawer__row-toggle { color:var(--mo-ink-2); }
  .mo-drawer__row-chev--passive { font-size:22px; color:var(--mo-ink-3); }
  .mo-drawer__item.is-open .mo-drawer__row-toggle .mo-drawer__row-chev {
    transform:rotate(180deg);
  }
  .mo-drawer__row-toggle:hover { background:var(--mo-paper); }

  .mo-drawer__sublist {
    list-style:none; margin:0; padding:0 0 8px;
    background:var(--mo-paper);
  }
  .mo-drawer__sublist[hidden] { display:none; }
  .mo-drawer__sublink {
    display:block; padding:11px 36px;
    font-size:13px; font-weight:700; color:var(--mo-ink-2);
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,.04);
  }
  .mo-drawer__sublink--all { color:var(--mo-purple); font-weight:900; }

  .mo-drawer__foot {
    padding:14px 18px;
    border-top:1px solid var(--mo-line);
    background:#fff;
    position:sticky; bottom:0;
  }
  .mo-drawer__foot-link {
    color:var(--mo-purple); font-weight:900; font-size:13px;
    letter-spacing:.3px;
  }

  /* Bottom Tab Bar */
  .mo-tabbar {
    display:grid; grid-template-columns:repeat(5, 1fr);
    position:fixed; left:0; right:0; bottom:0;
    background:#fff;
    border-top:1px solid var(--mo-line);
    box-shadow:0 -6px 18px rgba(15,8,30,.07);
    z-index:1400;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mo-tabbar__item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 4px;
    background:transparent; border:0; cursor:pointer;
    color:var(--mo-ink-3); text-decoration:none;
    min-height:var(--mo-tabbar-h);
    font-family:inherit;
  }
  .mo-tabbar__ic { display:flex; align-items:center; justify-content:center; line-height:1; position:relative; }
  .mo-tabbar__lbl {
    font-size:10px; font-weight:800; letter-spacing:.2px;
    line-height:1.1; color:inherit;
  }
  .mo-tabbar__item.is-active { color:var(--mo-purple); }
  .mo-tabbar__item.is-active .mo-tabbar__lbl { color:var(--mo-purple); font-weight:900; }
  .mo-tabbar__item:focus-visible { outline:2px solid var(--mo-purple); outline-offset:-2px; }

  /* Indicador roxo no topo do item ativo */
  .mo-tabbar__item.is-active { position:relative; }
  .mo-tabbar__item.is-active::before {
    content:""; position:absolute; top:0; left:25%; right:25%; height:3px;
    background:var(--mo-purple); border-radius:0 0 3px 3px;
  }

  /* Item "WhatsApp" → verde WhatsApp (#25D366) */
  .mo-tabbar__item--wa { color:#25D366; }
  .mo-tabbar__item--wa .mo-tabbar__lbl { color:#25D366; font-weight:800; }
  .mo-tabbar__ic--wa svg { width:26px; height:26px; }

  /* Cart badge */
  .mo-tabbar__ic--cart { position:relative; }
  .mo-tabbar__count {
    position:absolute; top:-4px; right:-8px;
    min-width:16px; height:16px; padding:0 4px;
    background:var(--mo-green); color:#fff;
    border-radius:9px; font-size:9px; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
    font-family:'Nunito',sans-serif;
  }
  .mo-tabbar__count[hidden] { display:none; }

  /* Padding bottom no body para o tab bar não cobrir conteúdo */
  body {
    padding-bottom:calc(var(--mo-tabbar-h) + env(safe-area-inset-bottom)) !important;
  }
  /* Lock scroll quando drawer aberto */
  body.mo-drawer-open { overflow:hidden; }

  /* Esconde botões de favoritos/etc no header desktop, se aparecerem */
  .ob-mobile-actions .ob-mobile-actions__cart { /* keep visible at top if existing */ }
}

/* Mobile pequeno: reduz tabbar */
@media (max-width: 380px) {
  .mo-tabbar__lbl { font-size:9px; }
  .mo-tabbar__ic svg { width:20px; height:20px; }
}