/* === Header Styles (polished) === */

/* Fallback tokens (safe to keep if already defined globally) */
:root{
  --brand: #0ea5e9;      /* primary blue */
  --brand-2: #22d3ee;    /* cyan accent */
  --text: #0f172a;
  --muted: #64748b;
  --line: #eef2f7;
}

/* Wrapper */
header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, white 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(2,6,23,0.06);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
header.is-scrolled{
  background: color-mix(in oklab, white 96%, transparent);
  border-bottom-color: rgba(2,6,23,0.10);
  box-shadow: 0 8px 24px rgba(2,8,23,0.06);
}

/* Put everything on one flex line, brand left, rest right */
.container.nav{
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* was space-between */
  padding: 12px 0;
  gap: 12px;                    /* tighter global gap */
}

/* push nav + actions to the right */
.brand { margin-right: auto; }
.brand-badge{
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid color-mix(in oklab, var(--brand) 60%, white);
  color: #0b1220;
  font-weight: 900; font-size: 16px;
  box-shadow: 0 6px 16px rgba(14,165,233,0.30);
}
.brand span{ font-size: 20px; color: var(--text); }

.navlinks{ 
  display: flex;
  gap: 14px;
  margin-left: 8px;             /* tiny space between actions and links */
}
.navlinks a{
  text-decoration: none;
  color: inherit;
  opacity: .9;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: color .2s ease, opacity .2s ease, background .2s ease;
}
.navlinks a:hover{
  opacity: 1;
  color: var(--brand);
  background: #f3f6fb;
}

.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;                    /* tighter than 12px */
}

/* Cart link → pill with icon + label; animated badge */
.cart-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
}

/* pill container around icon (and optional "Cart" text) */
.icon-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, white 86%, transparent);
  border: 1px solid rgba(14,165,233,0.25);
  box-shadow: 0 6px 16px rgba(2,8,23,0.05);
  transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.cart-link:hover .icon-pill{
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(14,165,233,0.4);
  box-shadow: 0 10px 24px rgba(14,165,233,0.16);
}

/* your inline SVG gets this class */
.cart-svg{ display: block; color: var(--brand); }

/* optional text next to icon (hidden on mobile) */
.cart-label{ font-weight: 700; }

/* Badge (count) */
.cart-badge{
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  font-size: 12px; line-height: 1; font-weight: 800;
  color: #0b1220;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 18px rgba(14,165,233,0.35);
  transform-origin: center;
}

/* bump anim — add/remove .bump class via JS when count changes */
@keyframes badge-bump{ 0%{transform:scale(1)} 35%{transform:scale(1.18)} 100%{transform:scale(1)} }
.cart-badge.bump{ animation: badge-bump .28s ease-out; }

/* CTA button */
.btn{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
  color: #0b1220;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(14,165,233,.28);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: filter .2s ease, transform .1s ease, box-shadow .2s ease;
}
.btn:hover{ filter: brightness(1.02); transform: translateY(-1px); }

/* Hamburger */
.hamburger{
  display: none;
  font-size: 26px;
  cursor: pointer;
  background: transparent;
  border: 0;
  line-height: 1;
}

/* Mobile */
@media (max-width: 768px){
  /* hide desktop CTA on mobile; keep cart visible */
  .btn.nav-cta{ display: none; }

  .hamburger{ display: inline-block; }

  .navlinks{
    display: none;                 /* hidden by default */
    flex-direction: column;
    position: absolute;
    top: 60px; right: 12px;
    width: min(82vw, 300px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 16px 32px rgba(2,8,23,0.10);
  }
  .navlinks.active{ display: flex; }

  .navlinks a{ padding: 12px; border-radius: 10px; }
  .navlink-contact-mobile{ display: block; }

  /* inside the pill, hide the "Cart" text for compactness */
  .cart-label{ display: none; }
}

/* Extra small fallback (older rule kept for safety) */
@media (max-width: 560px){
  /* If you still want to fully hide links on very small screens, comment out if not needed */
  /* .navlinks{ display: none; } */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  header, .icon-pill, .cart-badge{ transition: none !important; animation: none !important; }
}