/* ============================================================
   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:var(--lc-primary);
  --mo-purple-2:var(--lc-primary-deep);
  --mo-purple-3:var(--lc-primary-soft);
  --mo-green:var(--lc-success);
  --mo-green-2:var(--lc-success-700);
  --mo-ink:var(--lc-ink);
  --mo-ink-2:var(--lc-ink-2);
  --mo-ink-3:var(--lc-ink-3);
  --mo-line:var(--lc-line);
  --mo-line-2:var(--lc-line-2);
  --mo-paper:var(--lc-paper-2);
  --mo-tabbar-h:64px;
  --mo-fab:58px;          /* botão central do WhatsApp */
  --mo-fab-rise:25px;     /* quanto ele sai para cima da barra */
}

/* 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;
    position:relative;
    transition-property:background-color, scale;
    transition-duration:.15s;
  }
  .mo-drawer__close::after { content:""; position:absolute; inset:-5px; border-radius:50%; } /* alvo 44px */
  .mo-drawer__close:active { scale:.96; }

  .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; }
  /* Linha com 68px (a mesma altura de antes: 16 + 36 + 16), mas agora o link
     ocupa a altura toda — antes só a faixa de 25px do texto era clicável.
     padding-right 8px em todas: os chevrons (›, ⌄) caem na mesma coluna. */
  .mo-drawer__row {
    display:flex; align-items:center; gap:10px;
    padding:0 8px 0 18px; min-height:68px;
  }
  .mo-drawer__row-link {
    flex:1; align-self:stretch;
    display:flex; align-items:center;
    color:var(--mo-ink); text-decoration:none;
  }
  .mo-drawer__item--feature .mo-drawer__row-chev { margin-left:auto; }
  .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); }
  /* o glifo ⌄ tem a tinta abaixo do centro da caixa: sobe 3px (e desce ao girar) */
  .mo-drawer__row-toggle .mo-drawer__row-chev { position:relative; top:-3px; }
  .mo-drawer__item.is-open .mo-drawer__row-toggle .mo-drawer__row-chev {
    transform:rotate(180deg);
    top:3px;
  }
  .mo-drawer__row-toggle { position:relative; }
  .mo-drawer__row-toggle::after { content:""; position:absolute; inset:-4px; border-radius:50%; } /* alvo 44px */
  .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:12px 36px;   /* 40px de alvo */
    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" → botão flutuante no formato do logo, saindo da barra para cima.
     O slot do ícone tem a altura dos irmãos (22px); o botão (58px) se apoia no fundo do
     slot e sobe var(--mo-fab-rise) acima da borda da barra. Label alinhado aos demais. */
  .mo-tabbar__item--wa { color:var(--lc-success-700); -webkit-tap-highlight-color:transparent; }
  .mo-tabbar__item--wa .mo-tabbar__lbl { color:var(--lc-success-700); font-weight:800; }
  .mo-tabbar__ic--wa { width:22px; height:22px; }
  .mo-tabbar__fab {
    position:absolute; left:50%; bottom:1px;       /* respiro de ~4px até o label */
    width:var(--mo-fab); height:var(--mo-fab);
    translate:-50% 0;
    transform-origin:50% 100%;
    border-radius:50%;
    transition-property:scale;
    transition-duration:.2s;
    transition-timing-function:cubic-bezier(.2,0,0,1);
  }
  .mo-tabbar__fab .lc-wa-logo {
    display:block; width:100%; height:100%; overflow:visible; stroke:none;
    filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.16)) drop-shadow(0 6px 12px rgba(0,0,0,.18));
  }
  .mo-tabbar__item--wa:active .mo-tabbar__fab { scale:.96; }
  .mo-tabbar__item--wa:focus-visible { outline:none; }
  .mo-tabbar__item--wa:focus-visible .mo-tabbar__fab { outline:2px solid var(--lc-primary); outline-offset:2px; box-shadow:0 0 0 2px #fff; }
  /* PDP: quando a barra de compra sobe, o botão se recolhe na barra (não fica por baixo dela) */
  body:has(.pdp-sbb-root.is-mobile-shown) .mo-tabbar__fab { scale:.66; }

  /* 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: var(--lc-font-body);
  }
  .mo-tabbar__count[hidden] { display:none; }

  /* Padding bottom no body para o tab bar não cobrir conteúdo */
  body.lc-has-tabbar {
    padding-bottom:calc(var(--mo-tabbar-h) + var(--mo-fab-rise) + 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:not(.mo-tabbar__ic--wa) svg { width:20px; height:20px; }
  .mo-tabbar { --mo-fab:56px; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-tabbar__fab { transition:none; }
}