/* File: styles/navbar.css */
/* (only burger-related bits adjusted) */

:root {
  --navbar-bg: #fff2de;
  --accent-orange: #f78e26;
  --accent-green: #0e504a;
  --accent-red: #ff0000;
  --mobile-nav-h: 78px;
  --desktop-nav-h: 72px;
  --search-nudge-y: 3px;
}

.icon { width: 22px; height: 22px; fill: currentColor; vertical-align: middle; color: var(--accent-green); }

/* DESKTOP NAV … (unchanged) */
.sidebar { display: none; }
@media (min-width: 1024px) {
  body { padding-top: var(--desktop-nav-h); }
  .sidebar {
    display: flex; position: fixed; top: 0; left: 0; right: 0; height: var(--desktop-nav-h);
    background: var(--navbar-bg); border-bottom: 1px solid #e7d7bf; padding: 10px 16px; box-sizing: border-box; color:#000; z-index:20000;
    flex-direction: row; align-items: center; gap: 16px;
  }
  .sidebar__logo   { order:1; flex:0 0 auto; }
  .sidebar__nav    { order:2; flex:1 1 auto; }
  .sidebar__search { order:3; flex:0 1 360px; }
  .sidebar__icons  { order:4; flex:0 0 auto; margin-left:auto; }
  .sidebar__logo img { height: calc(var(--desktop-nav-h) - 20px); width:auto; display:block; border-radius:6px; }
  .sidebar__nav { display:flex; justify-content:center; align-items:center; gap:18px; min-width:0; }
  .sidebar__nav a { text-decoration:none; color:#000; font-weight:600; padding:8px 6px; border-radius:4px; transition:color .2s; white-space:nowrap; }
  .sidebar__nav a:hover { color: var(--accent-orange); }
  .sidebar__search{ position:relative; top: var(--search-nudge-y); display:flex; align-items:center; height:40px; max-width:360px; width:100%; min-width:200px; }
  .sidebar__search input{ width:100%; height:40px; padding:0 40px 0 14px; border:1px solid #e7d7bf; border-radius:999px; outline:none; font-size:14px; background:#fff; }
  .sidebar__search input::placeholder{ color:#6b7280; }
  .sidebar__search .search-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; background:transparent; cursor:pointer; display:grid; place-items:center; color:#6b7280; }
  .sidebar__search .search-btn:hover{ color:#111827; }
  .sidebar__icons { display:flex; justify-content:flex-end; align-items:center; gap:14px; position:relative; }
  .sidebar-icon { background:none; border:none; font-size:0; color:var(--accent-green); cursor:pointer; transition: color .2s, transform .2s; position:relative; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
  .sidebar-icon:hover { color: var(--accent-orange); transform: scale(1.06); }
  .sidebar-icon[data-tooltip]::after { content: attr(data-tooltip); position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); background:#000; color:#fff; padding:3px 6px; border-radius:4px; font-size:12px; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; }
  .sidebar-icon[data-tooltip]:hover::after { opacity:1; }
  .cart-btn { position:relative; }
  .cart-badge { position:absolute; top:-4px; right:-4px; background:none!important; color:var(--accent-red); font-size:.75rem; font-weight:bold; padding:0!important; border-radius:0!important; pointer-events:none; line-height:1; }
  .user-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid #ccc; border-radius:8px; min-width:180px; box-shadow:0 8px 24px rgba(0,0,0,.10), 0 1.5px 4px rgba(0,0,0,.13); z-index:20002; padding:6px 0; }
  .user-dropdown a { display:block; padding:12px 16px; color:#222; text-decoration:none; transition:background .1s; }
  .user-dropdown a:hover { background:#f8f8f8; }
  #user-icon:hover + .user-dropdown, .user-dropdown:hover, .user-dropdown.show { display:block; }
}

/* MOBILE NAV */
.mobile-nav { display:flex; flex-direction:column; background: var(--navbar-bg); border-bottom:1px solid #e7d7bf; }
@media (min-width:1024px){ .mobile-nav{ display:none; } }
@media (max-width:1023px){
  .mobile-nav{ position:fixed; top:0; left:0; right:0; z-index:20000; width:100%; padding-top: env(safe-area-inset-top); }
  body{ padding-top: calc(var(--mobile-nav-h) + env(safe-area-inset-top)); }
  .page{ margin-top:0 !important; }
}

.mobile-nav__bar{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; }
.mobile-nav__logo img{ height:54px; width:auto; }
.mobile-nav__actions{ display:flex; align-items:center; gap:12px; }

.mobile-nav__icon,
.mobile-nav__burger{ background:none; border:none; cursor:pointer; color:var(--accent-green); width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; position:relative; }

.mobile-nav__menu{
  display:none; flex-direction:column; padding:.5rem 1rem; background:var(--navbar-bg); box-sizing:border-box;
  position:relative; z-index:20001; /* ensure over page */
}
.mobile-nav__menu a{ text-decoration:none; color:#000; font-weight:500; padding:.5rem 0; }
.mobile-nav__menu a:hover{ color: var(--accent-orange); }

/* The ONE rule that opens the drawer */
@media (max-width:1023px){
  .mobile-nav[data-menu-open="true"] #mobile-menu{
    display:flex !important;
  }
}

/* Cart badge on mobile */
@media (max-width:1023px){
  .mobile-cart{ position:relative; }
  .mobile-cart .cart-badge{ position:absolute; top:-4px; right:-4px; left:auto; background:none!important; color:var(--accent-red); font-size:.75rem; font-weight:bold; padding:0!important; border-radius:0!important; pointer-events:none; line-height:1; }
}

/* Cleanup cart icon artifacts */
.cart-btn::before, .cart-btn::after{ content:none; display:none; }
.cart-btn *, .cart-btn svg{ background:transparent; border:0; box-shadow:none; }
.cart-btn svg circle, .cart-btn svg ellipse{ display:none; fill:none; stroke:none; }

/* Free Shipping banner (unchanged) */
.freeship{ position:sticky; top:0; z-index:19000; background:#fff8f2; color:#0c3f4c; border:2px solid #fcd5b8; border-left:0; border-right:0; padding:10px 14px; font-weight:800; margin-top:0; }
.freeship .fs-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.freeship .fs-left{ display:grid; gap:8px; min-width:0; }
.freeship .fs-text{ font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.freeship .fs-subnote{ font-weight:700; opacity:.85; }
.freeship .fs-bar{ position:relative; width:100%; height:8px; background:#e8eef1; border-radius:999px; overflow:hidden; }
.freeship .fs-bar__fill{ height:100%; width:0%; background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); transition: width 320ms ease; }
.freeship .fs-right{ display:flex; align-items:center; }
.freeship .fs-cta{ display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid currentColor; text-decoration:none; font-weight:800; font-size:12px; line-height:1; color:inherit; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05); white-space:nowrap; }
.freeship.is-free{ background:#eefcf3; border-color:#c8f0d6; }
@media (min-width:1024px){ .fs-spacer{ display:none; } }
@media (max-width:1023px){ .freeship{ top:0 !important; } .fs-spacer{ display:none !important; height:0 !important; } }

/* Live search + modal (unchanged) */
.live-results{ display:none; background:#fff; border:1px solid #e5e1da; border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:6px; z-index:20003; max-height:62vh; overflow:auto; }
.live-results.show{ display:block; }
.sidebar__search .live-results{ position:absolute; left:0; right:0; top: calc(100% + 6px); }
.ls-group-hd{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; padding:8px 10px; }
.ls-item{ display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; text-decoration:none; color:#111; }
.ls-item:hover{ background:#fff7ef; }
.ls-thumb{ width:40px; height:40px; object-fit:cover; border-radius:6px; background:#f3f4f6; }
.ls-meta{ min-width:0; }
.ls-title{ font-weight:700; font-size:14px; line-height:1.2; }
.ls-snippet{ font-size:12px; color:#6b7280; margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Search modal (unchanged essentials) */
@media (max-width:1023px){
  html, body{ overflow-x:hidden; }
  .search-modal[hidden]{ display:none !important; }
  .search-modal{ position:fixed; inset:0; z-index:22000; }
  .search-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.4); }
  .search-modal__sheet{ position:absolute; inset:0; background: var(--navbar-bg); padding: 12px; padding-top: calc(12px + env(safe-area-inset-top)); display:flex; flex-direction:column; box-sizing:border-box; max-width:100vw; }
  .search-modal__form{ position:relative; display:flex; align-items:center; gap:8px; }
  .search-modal__form input{ flex:1 1 auto; height:46px; padding:0 46px 0 14px; border:1px solid #e0d7c8; border-radius:14px; background:#fff; font-size:16px; outline:none; min-width:0; }
  .search-modal__form .search-btn{ position:absolute; right:52px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; color:#6b7280; cursor:pointer; }
  .search-modal__close{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e0d7c8; border-radius:12px; color:#0f172a; cursor:pointer; }
  .live-results--modal{ margin-top:10px; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:8px; border-radius:12px; border:1px solid #e9e3d9; box-shadow:0 16px 40px rgba(0,0,0,.18); background:#fff; }
}

body.pn-lock{ overflow:hidden; }

/* Accessibility: show “Search” label on desktop if present */
@media (min-width:1024px){
  .sidebar__search label.sr-only{
    position:static!important; clip:auto!important; width:auto!important; height:auto!important; overflow:visible!important; margin-right:12px!important; white-space:nowrap;
  }
}
/* ==== FIX: Mobile user dropdown styling (force + above drawer) ==== */
@media (max-width: 1023px) {
  .mobile-nav__user {
    position: relative !important;
  }

  .mobile-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e9e3d9;
    border-radius: 12px;
    width: min(72vw, 240px);
    box-shadow: 0 12px 24px rgba(0,0,0,.14);
    z-index: 22010; /* above mobile menu & bar */
    overflow: hidden;
  }

  /* ensure it shows when JS adds .show */
  .mobile-user-dropdown.show {
    display: block !important;
  }

  .mobile-user-dropdown a {
    display: block;
    padding: 12px 14px;
    color: #111;
    text-decoration: none;
    font-weight: 600;
  }

  .mobile-user-dropdown a + a {
    border-top: 1px dashed #eee7dc;
  }

  .mobile-user-dropdown a:hover {
    background: #fff7ef;
  }
}