/* ==========================================================================
   Neila Beauty Store — Mobile navigation (v2)
   Bottom tab bar (5 tabs, ≥44px targets) + Blocksy off-canvas drawer skin.
   ========================================================================== */

/* ---- Bottom tab bar (mobile only) ---------------------------------------- */
.nbs-tabbar { display: none; }

@media (max-width: 999px) {
  .nbs-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    display: flex;
    height: calc(74px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid var(--nbs-sand);
    box-shadow: 0 -4px 18px rgba(80, 55, 30, .08);
  }
  .nbs-tab {
    flex: 1;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--nbs-caption);
    text-decoration: none;
  }
  .nbs-tab.is-active { color: var(--nbs-orange); }
  .nbs-tab__icon { position: relative; display: flex; }
  .nbs-tab__label { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }

  .nbs-tab-cart-count {
    position: absolute;
    top: -6px; right: -10px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--nbs-orange);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nbs-tab-cart-count.is-empty { display: none; }

  /* Give the page room so content never hides behind the bar */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

  /* Search pill under the mobile header, per handoff, when Blocksy's
     header search element is placed in the mobile bottom row */
  #header [data-row="bottom"] .ct-header-search input[type="search"] {
    border-radius: 40px;
    background: #fff;
    border: 1px solid var(--nbs-sand);
  }
}

/* ---- Off-canvas drawer (Blocksy) skin ------------------------------------- */
#offcanvas .ct-panel-inner, .ct-panel-content {
  background: #fff;
}
#offcanvas { --side-panel-width: 300px; }
#offcanvas .ct-panel-actions { border-bottom: 1px solid var(--nbs-sand); }

/* scrim */
.ct-panel[data-behaviour*="side"] ~ .ct-overlay,
#offcanvas + .ct-overlay, .ct-panel-overlay {
  background: rgba(26, 23, 20, .45);
}

/* drawer rows: 15px, chevron */
#offcanvas .ct-menu-link, #offcanvas .ct-mobile-menu .ct-menu-link {
  font-family: var(--nbs-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--nbs-ink);
  padding-block: 12px;
  border-bottom: 1px solid var(--nbs-img-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#offcanvas .ct-menu-link::after {
  content: "\203A";
  color: var(--nbs-caption);
  font-size: 18px;
}
#offcanvas .ct-menu-link:hover { color: var(--nbs-orange); }

/* drawer footer help line — add an HTML widget to the offcanvas with this class */
.nbs-drawer-help {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--nbs-sand);
  font-size: 13.5px;
}
.nbs-drawer-help a { color: var(--nbs-orange); font-weight: 600; }

/* Mobile menu: show the complete Shop all list once, without duplicate shortcuts. */
@media(max-width:999px){
  #offcanvas .ct-menu > li:not(.nbs-shop-all),
  .ct-panel-content .ct-menu > li:not(.nbs-shop-all){display:none!important}
  #offcanvas .nbs-shop-all > .sub-menu,
  .ct-panel-content .nbs-shop-all > .sub-menu{display:grid!important;visibility:visible!important;opacity:1!important;max-height:none!important}
}