/* ==========================================================================
   Shared topbar — loaded raw by both /dashboard (React) and /tables (static)
   to guarantee byte-identical render. Do NOT bundle through Vite.
   ========================================================================== */

.gw-topnav{
  position:fixed;top:0;left:0;right:0;
  background:hsl(165 56% 12%);
  color:hsl(41 56% 92%);
  padding:21px 36px;
  z-index:1000;
  display:flex;gap:13px;align-items:center;flex-wrap:wrap;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1.37rem;
  line-height:normal;
  box-shadow:0 5px 20px rgba(0,0,0,0.14);
  margin:0;
  direction:rtl;
}
.gw-topnav *{
  line-height:normal;
  box-sizing:border-box;
}
.gw-topnav-brand{
  font-family:'Cormorant Garamond','Frank Ruhl Libre',serif;
  font-size:2.15rem;
  font-weight:500;
  color:hsl(41 56% 92%);
  text-decoration:none;
  margin-left:21px;
  padding:0;
  letter-spacing:normal;
}
.gw-topnav-brand em{
  font-style:italic;
  color:hsl(31 41% 59%);
  font-size:inherit;
  font-family:inherit;
  font-weight:inherit;
}
.gw-topnav a,
.gw-topnav button{
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1.37rem;
  font-weight:500;
}
.gw-topnav a{
  color:hsl(41 56% 92%);
  padding:10px 21px;
  border-radius:10px;
  text-decoration:none;
  transition:background .15s;
}
.gw-topnav a:hover{ background:rgba(255,255,255,.1) }
.gw-topnav a.current{
  background:linear-gradient(180deg,#FFFBF1,#F2E8D0);
  color:hsl(165 56% 12%);
  font-weight:600;
}
.gw-topnav .gw-topnav-btn{
  color:hsl(41 56% 92%);
  padding:10px 21px;
  border-radius:10px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:1.37rem;
  font-weight:500;
}
.gw-topnav .gw-topnav-btn:hover{ background:rgba(255,255,255,.1) }
.gw-topnav .cart-link{
  margin-right:auto;
  display:inline-flex;
  align-items:center;
  gap:13px;
  background:linear-gradient(180deg,#FFFBF1,#F2E8D0);
  color:hsl(165 56% 12%);
  padding:10px 23px;
  border-radius:10px;
  font-weight:600;
  font-size:1.37rem;
  position:relative;
  border:0;
  cursor:pointer;
  text-decoration:none;
}
.gw-topnav .cart-link:hover{ background:linear-gradient(180deg,#FFFEF5,#F8EFD4) }
.gw-topnav .cart-link svg{ width:29px;height:29px }
.gw-topnav .cart-badge{
  background:hsl(165 56% 12%);
  color:hsl(41 56% 92%);
  border-radius:999px;
  padding:3px 13px;
  font-size:1.1rem;
  min-width:29px;
  text-align:center;
}
.gw-topnav .cart-link.has-items{
  animation:gw-cart-pulse 2s ease-in-out infinite;
}
@keyframes gw-cart-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(198,164,106,.55) }
  50%{ box-shadow:0 0 0 8px rgba(198,164,106,0) }
}
.gw-topnav-logout{
  background:none;
  border:none;
  color:hsl(41 56% 92%);
  opacity:.75;
  cursor:pointer;
  padding:10px 18px;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1.3rem;
}
.gw-topnav-logout:hover{ opacity:1 }

/* ---- Mobile (≤760px) — single-row, fully responsive (clamp/vw) layout ----
   Order RTL: brand → 4 nav links → settings button → cart → (logout hidden).
   All sizing uses clamp(min, vw, max) so the bar scales with the device width.
   The 30% desktop bump does NOT apply to mobile — phone width is too tight. */
@media (max-width: 760px){
  .gw-topnav{
    padding: clamp(5px, 1.4vw, 10px) clamp(5px, 1.6vw, 12px);
    gap: clamp(0px, 0.5vw, 4px);
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
  }
  .gw-topnav-brand{
    font-size: clamp(0.72rem, 2.9vw, 1.1rem);
    margin-left: clamp(2px, 0.6vw, 5px);
    flex-shrink: 0;
  }
  /* Nav links + settings button — same compact, shrinkable style */
  .gw-topnav a:not(.gw-topnav-brand):not(.cart-link),
  .gw-topnav .gw-topnav-btn{
    padding: clamp(2px, 0.7vw, 6px) clamp(3px, 0.9vw, 6px);
    font-size: clamp(0.6rem, 2.35vw, 0.86rem);
    flex-shrink: 1;
    text-align: center;
    border-radius: 6px;
    white-space: nowrap;
  }
  /* Cart sits right after settings — no auto margin so all items pack onto one row */
  .gw-topnav .cart-link{
    padding: clamp(3px, 0.9vw, 6px) clamp(5px, 1.6vw, 9px);
    margin-inline-start: 0;
    flex-shrink: 0;
  }
  .gw-topnav .cart-link span:not(.cart-badge){ display: none }
  .gw-topnav .cart-link svg{
    width: clamp(13px, 3.6vw, 17px);
    height: clamp(13px, 3.6vw, 17px);
  }
  .gw-topnav .cart-badge{
    padding: 0 clamp(4px, 1.3vw, 6px);
    font-size: clamp(0.55rem, 2vw, 0.72rem);
    min-width: clamp(13px, 3.6vw, 17px);
  }
  /* Logout removed from the toolbar on mobile (owner request 2026-05-10) */
  .gw-topnav .gw-topnav-logout{ display: none }
}

/* ---- Reserve top space for the FIXED topbar ----
   Only pages that actually contain a <nav class="gw-topnav"> get the padding,
   so landing/login/signup (no topbar) aren't affected. */
body:has(.gw-topnav){ padding-top: 80px; }
@media (max-width: 760px){
  body:has(.gw-topnav){ padding-top: 46px; }
}