/* === HEADER STRUCTURE HELPERS === */
.nav-brand { margin-right: auto; }
.nav { margin: 0 auto; }
/* nav-toggle removed */
.logo-link { text-decoration: none; display: inline-block; }
.logo { display: flex; align-items: center; gap: 10px; transition: transform 0.3s ease; }
.logo:hover { transform: scale(1.05); }
.logo-text { color: var(--color-accent); font-size: 1.5rem; letter-spacing: -0.5px; }
.logo-svg { width:90px; height: 80px; object-fit: contain; }

/* Header base (zonder glas) */
.header { position: fixed; top: 20px; left: 0; right: 0; width: 100%; z-index: 20; background: transparent; }
.header .container { display:flex; align-items:center; justify-content:space-between; gap: 12px; padding-inline: 16px; position: relative; }

/* NAV PILL */
.nav {
  display: flex; gap: 2rem; align-items: center; padding: 15px 20px;
  background-color: rgba(31, 41, 55, 0.75);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0) 60%);
  border-radius: 30px;
}
.nav-item { position: relative; }
.nav .nav-link { text-decoration: none; color: var(--color-white); letter-spacing: 0.05em; transition: color 0.3s ease; position: relative; display: flex; align-items: center; gap: 5px; }
.nav .nav-link:hover { color: var(--color-accent); }
.nav .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--color-accent); transition: width 0.3s ease; }
.nav .nav-link:hover::after { width: 100%; }
.nav .nav-icon-btn { border: none; background: none; padding: 0; cursor: pointer; }

/* Spacing only between nav items (no separators) */
.nav > * { position: relative; }
.nav > * + * { margin-left: 0; }

/* Desktop: center the nav visually regardless of left/right content widths */
@media (min-width: 769px) {
  .nav { position: absolute; left: 50%; transform: translateX(-50%); }
}

/* Ensure search/cart actions are aligned to the far right */
.header-actions { margin-left: auto; display:flex; gap:10px; align-items:center; }

/* Make search/cart look like nav items */
.header .header-actions .pill-btn,
.header .nav-brand .pill-btn {
  background-color: rgba(31, 41, 55, 0.75);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0) 60%);
  border-radius: 16px;
  border: none;
  color: var(--color-white);
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  font-weight: 500;
}
.header .header-actions .pill-btn:hover,
.header .nav-brand .pill-btn:hover {
  background-color: rgba(31, 41, 55, 0.9);
}
.header .header-actions .pill-btn .icon,
.header .nav-brand .pill-btn .icon { color: currentColor; }

/* Override glass variant background for actions */
.header.header--glass .header-actions .pill-btn {
  background: var(--color-overlay);
  border: none;
}

/* Mobile nav */
@media (max-width: 768px) {
  .nav {
    position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px);
    background: #0f1720; flex-direction: column; justify-content: flex-start; align-items: center;
    padding-top: 2rem; transition: left 0.3s ease;
  }
  /* toggle removed: keep nav closed by default */
}