/* home-nav.css — sticky nav, search row, category pills, bottom nav */

/* ── TOP NAV ── */
.xb-topnav{
  position:sticky;top:0;z-index:200;
  width:min(100%, 430px);margin-inline:auto;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid #eaeae6;
  height:56px;
}
.xb-nav-inner{
  height:100%;padding-inline:16px;
  display:flex;align-items:center;gap:12px;
}

/* ── LOGO ── */
.xb-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.03em;color:var(--xb-ink);white-space:nowrap;
  display:flex;align-items:center;gap:5px;flex:1;
}
.xb-logo-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--xb-accent);display:inline-block;flex-shrink:0;
}

/* ── NAV SEARCH (desktop) ── */
.xb-nav-search{
  flex:1;max-width:420px;display:none;
  position:relative;
}
.xb-nav-search input{
  width:100%;height:36px;padding:0 12px 0 36px;
  border:1.5px solid #e5e5e3;border-radius:var(--xb-r-full);
  background:#f5f5f3;font-size:.88rem;color:var(--xb-ink);
  transition:border-color .2s,background .2s;outline:none;
}
.xb-nav-search input:focus{border-color:var(--xb-accent);background:#fff}
.xb-nav-search-ico{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--xb-ink3);pointer-events:none;
}

/* ── NAV ACTIONS ── */
.xb-nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.xb-icon-btn{
  position:relative;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#5a5a55;background:#fff;
  border:1px solid #eaeae6;box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background .2s,color .2s;
}
.xb-icon-btn:hover{background:var(--xb-bg);color:var(--xb-ink)}
.xb-icon-btn svg{width:16px;height:16px;stroke:currentColor}
.xb-cart-badge{
  position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;
  background:var(--xb-accent);color:#fff;font-size:8px;font-weight:700;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  padding-inline:3px;line-height:1;pointer-events:none;border:1.5px solid #fff;
}
.xb-cart-badge:empty,.xb-cart-badge[data-count="0"]{display:none}

.xb-btn-signin{
  display:none;
  padding:7px 16px;border-radius:var(--xb-r-full);
  background:var(--xb-ink);color:#fff;font-size:.82rem;font-weight:600;
  transition:opacity .2s;white-space:nowrap;
}
.xb-btn-signin:hover{opacity:.85}

/* ── SEARCH ROW ── */
.xb-search-shell,
.xb-cat-bar,
#xb-filter-results{
  width:min(100%, 430px);margin-inline:auto;
}
.xb-search-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px 0;background:transparent;
}
.xb-search-bar{flex:1}
.xb-search-input-wrap{
  position:relative;display:flex;align-items:center;
  height:44px;padding:0 14px 0 40px;background:#fff;
  border:1.5px solid #eaeae6;border-radius:var(--xb-r-full);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:border-color .15s;
}
.xb-search-input-wrap:focus-within{border-color:var(--xb-blue)}
.xb-search-input-wrap input{
  width:100%;height:100%;border:none;outline:none;background:transparent;
  font-size:14px;color:var(--xb-ink);line-height:1;
}
.xb-search-input-wrap input::placeholder{color:var(--xb-ink3)}
.xb-search-ico{
  position:absolute;left:14px;width:14px;height:14px;color:var(--xb-ink3);pointer-events:none;
}
.xb-filter-btn{
  width:44px;height:44px;border-radius:12px;margin-top:0;
  background:#fff;border:1.5px solid #eaeae6;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--xb-ink2);box-shadow:0 1px 2px rgba(0,0,0,.05);
}

/* ── CATEGORY PILLS ── */
.xb-cat-bar{
  background:transparent;border-bottom:none;
  position:relative;top:auto;z-index:auto;
}
.xb-cat-inner{
  display:flex;gap:6px;overflow-x:auto;
  padding:12px 16px 4px;scrollbar-width:none;white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.xb-cat-inner::-webkit-scrollbar{display:none}
.xb-cat-pill{
  padding:7px 14px;border-radius:var(--xb-r-full);
  font-size:12px;font-weight:500;white-space:nowrap;
  background:#fff;color:#5a5a55;
  border:1.5px solid #eaeae6;transition:all .15s;flex-shrink:0;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.xb-cat-pill:hover{border-color:var(--xb-ink);color:var(--xb-ink)}
.xb-cat-pill.active{background:var(--xb-ink);color:#fff;border-color:var(--xb-ink)}

/* ── FILTER RESULTS ── */
#xb-filter-results{padding-top:16px}
#xb-filter-close{color:var(--xb-blue);font-size:12px;font-weight:500}

/* ── BOTTOM NAV (hidden ≥768px) ── */
.xb-bot-nav{
  display:flex;align-items:stretch;
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:200;
  width:100%;max-width:430px;height:var(--xb-bot-h);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid #eaeae6;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.xb-bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding-top:4px;
  font-size:9px;font-weight:500;color:var(--xb-ink3);
  transition:color .2s;
}
.xb-bn-item svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8}
.xb-bn-item.active{color:var(--xb-ink)}
.xb-bn-item.active svg{stroke:var(--xb-ink)}
.xb-bn-center{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font-size:9px;font-weight:500;color:var(--xb-ink3);
  padding-top:4px;
}
.xb-bn-fab{
  width:44px;height:44px;border-radius:14px;
  background:var(--xb-ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);margin-top:-14px;
}
.xb-bn-fab svg{width:18px;height:18px;stroke:#fff;stroke-width:2}

/* ── RESPONSIVE OVERRIDES ── */
@media(min-width:600px){
  .xb-nav-search{display:flex}
  .xb-search-shell{display:none}
  .xb-nav-inner{padding-inline:24px}
}
@media(min-width:768px){.xb-bot-nav{display:none}.xb-home{padding-bottom:0}}
@media(min-width:900px){
  .xb-nav-inner{padding-inline:32px}
  .xb-logo{font-size:1.3rem}
  .xb-btn-signin{display:inline-flex}
}