/* Kolbo Shop Nav – Glam styling (black/white/gold), glassmorphism, shimmer, icons */
/* Variables */
:root {
  --kolbo-sdnav-maxw: 1200px;
  --kolbo-bg: #0b0b0c;
  --kolbo-fg: #ffffff;
  --kolbo-fg-dim: rgba(255,255,255,0.75);
  --kolbo-accent: #D4AF37; /* gold */
  --kolbo-accent-2: #F6E27A; /* light gold */
  --kolbo-ink: #111;
  --kolbo-sticky-top: 96px; /* mobile offset base */
  --kolbo-border: rgba(255,255,255,0.10);
  --kolbo-border-strong: rgba(255,255,255,0.18);
  --kolbo-chip-bg: rgba(255,255,255,0.06);
  --kolbo-chip-hover: rgba(255,255,255,0.14);
  --kolbo-shadow: 0 8px 24px rgba(0,0,0,0.28);
  --kolbo-gold-grad: linear-gradient(135deg, #F6E27A 0%, #D4AF37 50%, #B88A1E 100%);
}

/* Container */
.kolbo-shop-nav {
  position: relative;
  z-index: 25;
  color: var(--kolbo-fg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25)), var(--kolbo-bg);
  border: 1px solid var(--kolbo-border);
  border-radius: 16px;
  padding: 12px;
  margin: 16px 0 18px;
  box-shadow: var(--kolbo-shadow);
  backdrop-filter: blur(6px);
}
@supports not (backdrop-filter: blur(6px)) {
  .kolbo-shop-nav { background: var(--kolbo-bg); }
}

/* subtle noise overlay */
.kolbo-shop-nav::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .12;
  border-radius: inherit;
}

/* Decorative faint musical-notes pattern */
.kolbo-shop-nav::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'><text x='10' y='30' font-size='20' fill='rgba(255,255,255,0.08)'>♪</text><text x='80' y='65' font-size='18' fill='rgba(255,255,255,0.06)'>♫</text></svg>") repeat;
  background-size: 160px 80px;
  opacity: .25;
}

/* Inner */
.kolbo-sdnav-inner {
  max-width: var(--kolbo-sdnav-maxw);
  margin: 0 auto;
  position: relative;
}

/* List */
.kolbo-sdnav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}

/* Chip links */
.kolbo-sdnav-link, .kolbo-sdnav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .15px;
  color: var(--kolbo-fg);
  background: var(--kolbo-chip-bg);
  border: 1px solid var(--kolbo-border-strong);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  will-change: transform;
  box-shadow: 0 2px 8px rgba(0,0,0,0.16) inset;
}

/* shimmer highlight on hover */
.kolbo-sdnav-link::after {
  content: "";
  position: absolute;
  left: -30%; top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg) translateX(-120%);
  transition: transform .6s ease-in-out;
  opacity: .0;
}
.kolbo-sdnav-list a:hover::after {
  transform: skewX(-20deg) translateX(360%);
  opacity: .6;
}

.kolbo-sdnav-list a:hover {
  transform: translateY(-1px);
  background: var(--kolbo-chip-hover);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Active -> gold pill */
.kolbo-sdnav-item.is-active > a,
.kolbo-sdnav-list .current-menu-item > a {
  background: var(--kolbo-gold-grad);
  color: var(--kolbo-ink);
  border-color: #E2C251;
  box-shadow: 0 8px 24px rgba(212,175,55,0.45);
}

/* Emoji/icon bubble */
.kolbo-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  font-size: 14px;
  line-height: 1;
}

/* Link text */
.kolbo-sdnav-link-text { white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* Target landing & scroll offset */
.kolbo-shop-nav { scroll-margin-top: calc(var(--kolbo-sticky-top) + env(safe-area-inset-top)); }

/* Mobile */
@media (max-width: 1024px) {
  .kolbo-shop-nav {
    position: sticky;
    top: calc(var(--kolbo-sticky-top) + env(safe-area-inset-top));
    border-radius: 0;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-width: 0 0 1px 0;
  }
  .kolbo-shop-nav::before { opacity: .18; } /* softer pattern */
  .kolbo-shop-nav::after { opacity: .10; }  /* softer noise */

  /* Spacer so first paint is already lower */
  .kolbo-shop-nav::marker { display:none; } /* no-op but keeps specificity tidy */
  .kolbo-shop-nav::selection { background: transparent; } /* safe */
  .kolbo-shop-nav::first-letter { color: inherit; } /* safe */

  .kolbo-sdnav-list {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .kolbo-sdnav-list::-webkit-scrollbar { display: none; }
  .kolbo-sdnav-item { flex: 0 0 auto; }
  .kolbo-sdnav-link, .kolbo-sdnav-list a {
    padding: 9px 13px;
    font-size: 15px;
  }

  /* stronger gradient edges to hint scroll */
  .kolbo-sdnav-inner:before,
  .kolbo-sdnav-inner:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 2;
  }
  .kolbo-sdnav-inner:before {
    left: 0;
    background: linear-gradient(to right, var(--kolbo-bg) 0%, rgba(15,15,16,0) 100%);
  }
  .kolbo-sdnav-inner:after {
    right: 0;
    background: linear-gradient(to left, var(--kolbo-bg) 0%, rgba(15,15,16,0) 100%);
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .kolbo-shop-nav { border-radius: 18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kolbo-sdnav-list a:hover::after { transition: none; transform: none; opacity: 0; }
  .kolbo-sdnav-list a, .kolbo-sdnav-link { transition: none; }
}