/* NetStore UI: barra de app, folha do menu e cabeçalho compacto (≤921 px, o ponto do menu móvel do Astra) */

:root{ --ns-appnav-h:0px; }

.ns-appnav, .ns-sheet, .ns-sheet-backdrop{
  --ns-font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ns-ink:#1B2430; --ns-dim:#5B6672; --ns-mute:#8A94A0; --ns-line:#E3E8E8;
  --ns-teal-strong:#0B7A6F; --ns-teal-tint:#E7F6F4; --ns-surface:#F6F8F8;
}
.ns-appnav, .ns-sheet, .ns-sheet-backdrop{ display:none; }

@media (max-width:921px){
  body.ns-has-appnav{
    --ns-appnav-h:calc(60px + env(safe-area-inset-bottom, 0px));
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
  }

  /* ---------- barra ---------- */
  body.ns-has-appnav .ns-appnav{
    display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
    position:fixed; left:0; right:0; bottom:0; z-index:9990;
    box-sizing:border-box; height:var(--ns-appnav-h); margin:0;
    /* no tablet as abas ficam juntas no meio, sem se espalhar pela largura toda */
    padding:0 max(env(safe-area-inset-right, 0px), calc((100% - 640px) / 2)) env(safe-area-inset-bottom, 0px) max(env(safe-area-inset-left, 0px), calc((100% - 640px) / 2));
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--ns-line);
    box-shadow:0 -6px 20px -12px rgba(27,36,48,.18);
    font-family:var(--ns-font);
    transform:none; visibility:visible;
    transition:transform .2s ease, visibility 0s linear 0s;
  }
  body.ns-has-appnav.ns-kb-open .ns-appnav{
    transform:translateY(100%); visibility:hidden;
    transition:transform .2s ease, visibility 0s linear .2s;
  }

  .ns-appnav .ns-appnav-tab{
    display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    min-width:0; min-height:48px; height:60px; margin:0 !important; padding:0 2px !important;
    box-sizing:border-box; position:relative;
    background:transparent !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; transform:none !important; transition:color .15s ease !important;
    color:var(--ns-dim) !important; font-family:var(--ns-font) !important; font-weight:600 !important;
    letter-spacing:0 !important; line-height:1 !important; text-decoration:none !important; text-transform:none !important;
    cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;
  }
  .ns-appnav .ns-appnav-tab:focus{ outline:none !important; }
  .ns-appnav-pill{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:52px; height:30px; border-radius:999px; transition:background-color .15s ease, box-shadow .15s ease;
  }
  .ns-appnav-pill svg{ display:block; width:24px; height:24px; }
  .ns-appnav-label{
    display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:11.5px; font-weight:600; line-height:1.15;
  }
  .ns-appnav .ns-appnav-tab:focus-visible .ns-appnav-pill{ box-shadow:0 0 0 2px var(--ns-teal-strong); }
  .ns-appnav .ns-appnav-tab:active .ns-appnav-pill{ background:#EEF1F1; }
  .ns-appnav .ns-appnav-tab[aria-current="page"],
  .ns-appnav .ns-appnav-tab[aria-expanded="true"]{ color:var(--ns-teal-strong) !important; }
  .ns-appnav .ns-appnav-tab[aria-current="page"] .ns-appnav-pill,
  .ns-appnav .ns-appnav-tab[aria-expanded="true"] .ns-appnav-pill{ background:var(--ns-teal-tint); }
  .ns-appnav .ns-appnav-tab[aria-current="page"] .ns-appnav-label,
  .ns-appnav .ns-appnav-tab[aria-expanded="true"] .ns-appnav-label{ font-weight:700; }

  .ns-appnav-tab--menu .ns-i-close, .ns-appnav-tab--menu .ns-l-close{ display:none; }
  .ns-appnav-tab--menu[aria-expanded="true"] .ns-i-menu,
  .ns-appnav-tab--menu[aria-expanded="true"] .ns-l-menu{ display:none; }
  .ns-appnav-tab--menu[aria-expanded="true"] .ns-i-close{ display:block; }
  .ns-appnav-tab--menu[aria-expanded="true"] .ns-l-close{ display:inline; }

  .ns-appnav-badge{
    position:absolute; top:-3px; left:calc(50% + 4px);
    box-sizing:border-box; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background:var(--ns-teal-strong); color:#fff; box-shadow:0 0 0 2px #fff;
    font-family:var(--ns-font); font-size:11px; font-weight:700; line-height:1; letter-spacing:0;
    font-variant-numeric:tabular-nums; pointer-events:none;
  }
  .ns-appnav-badge[hidden]{ display:none !important; }

  /* ---------- a página abre espaço para a barra ---------- */
  body.ns-has-appnav .site-footer{ padding-bottom:var(--ns-appnav-h) !important; }
  body.ns-has-appnav:not(:has(.site-footer)){ padding-bottom:var(--ns-appnav-h); }
  body.ns-has-appnav #ast-scroll-top{ bottom:calc(var(--ns-appnav-h) + 12px) !important; }
  body.ns-has-appnav .ns-appnav-lift{ bottom:var(--ns-appnav-h) !important; }

  /* ---------- cabeçalho móvel: só o logo; o menu mora na barra ---------- */
  body.ns-has-appnav #ast-mobile-header .ast-button-wrap,
  body.ns-has-appnav #ast-mobile-header .ast-mobile-header-content,
  body.ns-has-appnav #ast-mobile-popup{ display:none !important; }
  body.ns-has-appnav #ast-mobile-header .ast-primary-header-bar,
  body.ns-has-appnav #ast-mobile-header .site-primary-header-wrap,
  body.ns-has-appnav #ast-mobile-header .ast-builder-grid-row{ min-height:64px !important; }
  body.ns-has-appnav #masthead #ast-mobile-header .ast-primary-header-bar{
    padding-top:0 !important; padding-bottom:0 !important; padding-left:16px !important; padding-right:16px !important;
  }
  /* sem nada à direita, o logo fica sozinho no centro da linha (SPEC §10) */
  body.ns-has-appnav #ast-mobile-header .ast-builder-grid-row{ grid-template-columns:1fr !important; justify-items:center; }
  body.ns-has-appnav #ast-mobile-header .site-header-primary-section-right{ display:none !important; }
  body.ns-has-appnav #ast-mobile-header .site-header-primary-section-left{ justify-content:center !important; width:100%; }
  /* o tema dá margin-right:12px ao logo, e o centro sairia 6 px para a esquerda */
  body.ns-has-appnav #ast-mobile-header .site-logo-img{ padding-right:0 !important; margin-right:0 !important; }
  body.ns-has-appnav #ast-mobile-header .site-branding{ justify-content:center; padding:0 !important; margin:0 !important; }
  /* logo de 46 px na linha de 64; a largura acompanha a altura */
  body.ns-has-appnav #ast-mobile-header .custom-logo,
  body.ns-has-appnav #ast-mobile-header .custom-logo-link img.custom-logo,
  body.ns-has-appnav #ast-mobile-header .site-logo-img img{
    display:block; height:46px !important; max-height:46px !important; width:auto !important; max-width:none !important;
  }

  /* busca do snippet 3219, mais baixa; 16 px no campo para o iPhone não dar zoom */
  body.ns-has-appnav .svp-product-search{ padding:8px 16px 10px !important; }
  body.ns-has-appnav .svp-product-search input[type=search]{
    box-sizing:border-box; height:42px !important; padding:0 14px !important; font-size:16px !important; line-height:normal;
  }
  body.ns-has-appnav .svp-product-search button{
    box-sizing:border-box; width:48px !important; min-width:48px !important; height:42px !important; padding:0 !important;
  }

  /* ---------- folha do menu ---------- */
  .ns-sheet-backdrop{
    position:fixed; z-index:9995; top:0; left:0; right:0; bottom:var(--ns-appnav-h, 0px);
    background:rgba(15,23,42,.42); opacity:0; transition:opacity .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .ns-sheet-backdrop.is-open{ opacity:1; }
  .ns-sheet{
    position:fixed; z-index:9995; left:0; right:0; bottom:var(--ns-appnav-h, 0px);
    box-sizing:border-box; width:100%; max-width:560px; margin:0 auto;
    max-height:calc(100vh - var(--ns-appnav-h, 0px) - 56px);
    max-height:calc(100dvh - var(--ns-appnav-h, 0px) - 56px);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -12px 32px -12px rgba(15,23,42,.25);
    color:var(--ns-ink); font-family:var(--ns-font); text-align:left;
    opacity:0; transform:translateY(16px);
    transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s cubic-bezier(.2,.8,.2,1);
  }
  .ns-sheet.is-open{ opacity:1; transform:none; }
  .ns-sheet-backdrop:not([hidden]), .ns-sheet:not([hidden]){ display:block; }

  .ns-sheet-head{
    position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between;
    min-height:56px; padding:12px 8px 4px 16px; box-sizing:border-box;
    background:#fff; border-radius:20px 20px 0 0; touch-action:none;
  }
  .ns-sheet-handle{
    position:absolute; top:6px; left:50%; width:36px; height:4px; margin-left:-18px;
    border-radius:2px; background:#D1D5DB;
  }
  .ns-sheet .ns-sheet-title{
    margin:0 !important; padding:0; font-family:var(--ns-font) !important; font-size:17px !important; font-weight:800 !important;
    line-height:1.3 !important; letter-spacing:-.01em; color:var(--ns-ink) !important; text-transform:none;
  }
  .ns-sheet .ns-sheet-title:focus{ outline:none; }

  /* todo botão da folha zera a regra global de botão teal */
  .ns-sheet button.ns-sheet-x,
  .ns-sheet button.ns-sheet-toggle{
    background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
    transform:none !important; letter-spacing:0 !important; text-transform:none !important; margin:0 !important;
    -webkit-tap-highlight-color:transparent; cursor:pointer;
  }
  .ns-sheet button.ns-sheet-x{
    display:flex !important; align-items:center; justify-content:center; flex:0 0 40px;
    width:40px; height:40px; padding:0 !important; border-radius:999px !important; color:var(--ns-ink) !important;
  }
  .ns-sheet button.ns-sheet-x svg{ width:22px; height:22px; }
  .ns-sheet button.ns-sheet-x:active{ background:var(--ns-surface) !important; }

  .ns-sheet-cap{
    margin:8px 0 0 !important; padding:8px 16px 6px; font-family:var(--ns-font);
    font-size:12px; font-weight:700; letter-spacing:.06em; line-height:1.4; text-transform:uppercase; color:var(--ns-dim);
  }
  .ns-sheet .ns-sheet-list, .ns-sheet .ns-sheet-sub{ list-style:none !important; margin:0 !important; padding:0 !important; }
  .ns-sheet .ns-sheet-list > li, .ns-sheet .ns-sheet-sub > li{ margin:0 !important; padding:0 !important; list-style:none; }
  .ns-sheet .ns-sheet-cats > li{ border-top:1px solid #EEF1F1; }
  .ns-sheet .ns-sheet-cats > li:last-child{ border-bottom:1px solid #EEF1F1; }

  .ns-sheet .ns-sheet-link{
    position:relative; display:flex !important; align-items:center; gap:12px;
    box-sizing:border-box; width:100%; min-height:56px; padding:0 16px !important;
    color:var(--ns-ink) !important; font-family:var(--ns-font) !important; font-size:16px !important;
    font-weight:600 !important; line-height:1.3 !important; text-align:left; text-decoration:none !important;
    -webkit-tap-highlight-color:transparent;
  }
  .ns-sheet .ns-sheet-link:active{ background:var(--ns-surface) !important; }
  .ns-sheet-tile{
    display:flex; align-items:center; justify-content:center; flex:0 0 36px;
    width:36px; height:36px; border-radius:10px; background:var(--ns-accent, #94A3B8); color:#0F172A;
  }
  .ns-sheet-tile--all{ background:var(--ns-ink); color:#fff; }
  .ns-sheet-tile svg{ width:20px; height:20px; }
  .ns-sheet-label{ flex:1 1 auto; min-width:0; }
  .ns-sheet-go{ flex:0 0 16px; width:16px; height:16px; margin-right:8px; color:var(--ns-mute); }
  .ns-sheet-chev{
    display:flex; align-items:center; justify-content:center; flex:0 0 32px;
    width:32px; height:32px; border-radius:999px; background:var(--ns-surface); color:var(--ns-dim);
  }
  .ns-sheet-chev svg{ width:16px; height:16px; transition:transform .2s ease; }
  .ns-sheet-toggle[aria-expanded="true"] .ns-sheet-chev svg{ transform:rotate(180deg); }

  .ns-sheet .ns-sheet-sub{ padding:0 0 8px !important; }
  .ns-sheet .ns-sheet-sub[hidden]{ display:none !important; }
  .ns-sheet .ns-sheet-sublink{
    position:relative; display:flex !important; align-items:center; gap:10px;
    min-height:44px; padding:0 16px 0 64px !important; box-sizing:border-box;
    color:#334155 !important; font-family:var(--ns-font) !important; font-size:15px !important;
    font-weight:500 !important; line-height:1.3 !important; text-decoration:none !important;
    -webkit-tap-highlight-color:transparent;
  }
  .ns-sheet .ns-sheet-sublink:active{ background:var(--ns-surface) !important; }
  .ns-sheet .ns-sheet-sublink--all{ color:var(--ns-teal-strong) !important; font-weight:600 !important; }
  .ns-sheet-dot{ flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--ns-dot, #94A3B8); }

  .ns-sheet .ns-sheet-hlink{
    position:relative; display:flex !important; align-items:center; gap:12px;
    min-height:48px; padding:0 16px !important; box-sizing:border-box;
    color:var(--ns-ink) !important; font-family:var(--ns-font) !important; font-size:15px !important;
    font-weight:500 !important; line-height:1.3 !important; text-decoration:none !important;
    -webkit-tap-highlight-color:transparent;
  }
  .ns-sheet .ns-sheet-hlink:active{ background:var(--ns-surface) !important; }
  .ns-sheet .ns-sheet-hlink svg{ flex:0 0 20px; width:20px; height:20px; color:var(--ns-mute); }

  /* idiomas (netstore-i18n): o código num selo do tamanho dos ícones da ajuda; o atual em teal */
  .ns-sheet-lang{
    display:flex; align-items:center; justify-content:center; flex:0 0 28px; box-sizing:border-box;
    width:28px; height:20px; margin:0 -4px; border-radius:6px; background:var(--ns-surface); color:var(--ns-dim);
    font-size:10.5px; font-weight:800; line-height:1; letter-spacing:.04em;
  }
  .ns-sheet .ns-sheet-langs .ns-sheet-hlink[aria-current]{ font-weight:700 !important; }
  .ns-sheet .ns-sheet-hlink[aria-current] .ns-sheet-lang{ background:var(--ns-teal-tint); color:var(--ns-teal-strong); }

  /* link atual: texto teal e barra de 3 px à esquerda */
  .ns-sheet .ns-sheet-link[aria-current],
  .ns-sheet .ns-sheet-sublink[aria-current],
  .ns-sheet .ns-sheet-hlink[aria-current]{ color:var(--ns-teal-strong) !important; }
  .ns-sheet .ns-sheet-sublink[aria-current]{ font-weight:600 !important; }
  .ns-sheet [aria-current]::before{
    content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
    border-radius:0 3px 3px 0; background:var(--ns-teal-strong);
  }

  .ns-sheet .ns-sheet-link:focus, .ns-sheet .ns-sheet-sublink:focus, .ns-sheet .ns-sheet-hlink:focus,
  .ns-sheet .ns-sheet-x:focus, .ns-sheet .ns-sheet-note a:focus{ outline:none; }
  .ns-sheet .ns-sheet-link:focus-visible, .ns-sheet .ns-sheet-sublink:focus-visible,
  .ns-sheet .ns-sheet-hlink:focus-visible{ outline:2px solid var(--ns-teal-strong) !important; outline-offset:-2px; }
  .ns-sheet .ns-sheet-x:focus-visible{ box-shadow:0 0 0 2px var(--ns-teal-strong) !important; }
  .ns-sheet .ns-sheet-note a:focus-visible{ outline:2px solid var(--ns-teal-strong); outline-offset:2px; border-radius:2px; }

  .ns-sheet-note{
    margin:12px 16px 16px; padding:12px 14px; border-radius:12px; background:var(--ns-surface);
    font-family:var(--ns-font); font-size:13px; line-height:1.5; color:var(--ns-dim);
  }
  .ns-sheet-note p{ margin:0 !important; font-size:13px; color:var(--ns-dim); }
  .ns-sheet-note a{ color:var(--ns-teal-strong) !important; font-weight:600; text-decoration:underline; text-underline-offset:2px; }

  @media (hover:hover){
    .ns-appnav .ns-appnav-tab:not([aria-current]):not([aria-expanded="true"]):hover{ color:var(--ns-ink) !important; }
    .ns-sheet .ns-sheet-link:hover, .ns-sheet .ns-sheet-sublink:hover, .ns-sheet .ns-sheet-hlink:hover{ background:var(--ns-surface) !important; }
    .ns-sheet button.ns-sheet-x:hover{ background:var(--ns-surface) !important; }
  }
}

/* rolagem travada com a folha (ou o diálogo do carrinho) aberta */
html.ns-lock, html.ns-lock body, html.ns-appnav-open, html.ns-appnav-open body{ overflow:hidden !important; }

/* ---------- menu do Astra, caso ainda abra (checkout): seta leve no lugar da caixa teal ---------- */
@media (max-width:921px){
  .ast-builder-menu-mobile .main-navigation .menu-item-has-children > button.ast-menu-toggle{
    display:flex !important; align-items:center !important; justify-content:center !important;
    top:0 !important; right:8px !important; left:auto !important;
    width:44px !important; height:44px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
    background:transparent !important; border:0 !important; border-radius:999px !important;
    box-shadow:none !important; transform:none !important; color:#5B6672 !important;
    -webkit-tap-highlight-color:transparent;
  }
  .ast-builder-menu-mobile .main-navigation .menu-item-has-children > button.ast-menu-toggle .ast-icon{
    display:flex !important; align-items:center; justify-content:center;
    width:30px !important; height:30px !important; margin:0 !important; border-radius:999px; background:#F6F8F8;
  }
  .ast-builder-menu-mobile .main-navigation .menu-item-has-children > button.ast-menu-toggle .ast-icon svg{
    position:static !important; top:auto !important; width:11px !important; height:11px !important;
    margin:0 !important; fill:currentColor !important; transform:none !important; transition:transform .2s ease;
  }
  .ast-builder-menu-mobile .main-navigation .menu-item-has-children.ast-submenu-expanded > button.ast-menu-toggle .ast-icon svg{
    transform:rotate(180deg) !important;
  }
  .ast-builder-menu-mobile .main-navigation .menu-item-has-children > button.ast-menu-toggle:focus{ outline:none !important; }
  .ast-builder-menu-mobile .main-navigation .menu-item-has-children > button.ast-menu-toggle:focus-visible .ast-icon{
    box-shadow:0 0 0 2px #0B7A6F;
  }
}

@media (prefers-reduced-motion:reduce){
  .ns-appnav, .ns-sheet, .ns-sheet-backdrop, .ns-sheet-chev svg, .ns-appnav-pill,
  .ast-builder-menu-mobile .main-navigation button.ast-menu-toggle .ast-icon svg{ transition:none !important; }
}

@media print{
  .ns-appnav, .ns-sheet, .ns-sheet-backdrop{ display:none !important; }
  body.ns-has-appnav .site-footer{ padding-bottom:0 !important; }
}