/* ═══════════════════════════════════════════════════════════════════════
   VividHome — Header, Nav, Promo Bar (loads on ALL pages)
   Uses design tokens from design-system.css (--vh-* prefix)
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   PROMO BAR
   ───────────────────────────────────────────────────────────────────── */

.vh-promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--vh-z-header) + 1);
  background: var(--vh-gradient-h);
  min-height: var(--vh-promo-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: transform 0.35s var(--vh-ease-out), opacity 0.35s var(--vh-ease-out);
}

.vh-promo-bar__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: promoScroll 25s linear infinite;
  will-change: transform;
}

.vh-promo-bar__msg {
  flex-shrink: 0;
  padding: 0 var(--vh-space-2);
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-xs);
  font-weight: var(--vh-weight-semibold);
  letter-spacing: var(--vh-tracking-wider);
  text-transform: uppercase;
  color: var(--vh-white);
}

.vh-promo-bar__sep {
  flex-shrink: 0;
  padding: 0 16px;
  font-size: 0.5rem;
  color: rgba(255,255,255,0.5);
}

@keyframes promoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ─────────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────────── */

.vh-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--vh-z-header);
  transition: background var(--vh-duration-medium) var(--vh-ease-out),
              box-shadow var(--vh-duration-medium) var(--vh-ease-out),
              border-color var(--vh-duration-medium) var(--vh-ease-out),
              top 0.35s var(--vh-ease-out);
}

/* When promo bar is visible, header sits below it */
.vh-promo-bar + .vh-header {
  top: var(--vh-promo-height);
}

.vh-promo-bar + .vh-header.is-scrolled {
  top: 0;
}

/* ── Transparent state (on hero) ── */
.vh-header--transparent {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vh-header--transparent .s-nav-link,
.vh-header--transparent .vh-icon-btn {
  color: rgba(255, 255, 255, 0.85);
}

.vh-header--transparent .s-nav-link:hover {
  color: var(--vh-white);
}

.vh-header--transparent .vh-icon-btn:hover {
  color: var(--vh-white);
  background: rgba(255, 255, 255, 0.1);
}

.vh-header--transparent .vh-header__brand img {
  filter: brightness(0) invert(1);
}

.vh-header--transparent .s-cart-badge {
  background: #E53935;
  color: #fff;
}

.vh-header--transparent .s-nav-link.s-nav-sale {
  color: var(--vh-amber);
}

/* ── Solid state (scrolled or inner pages) ── */
.vh-header--solid,
.vh-header--transparent.is-scrolled {
  background: var(--vh-header-bg);
  backdrop-filter: var(--vh-backdrop-blur);
  -webkit-backdrop-filter: var(--vh-backdrop-blur);
  border-bottom: 1px solid var(--vh-sand);
  box-shadow: 0 1px 12px rgba(44, 40, 37, 0.06);
}

.vh-header--transparent.is-scrolled .s-nav-link,
.vh-header--solid .s-nav-link {
  color: var(--vh-charcoal);
}

.vh-header--transparent.is-scrolled .s-nav-link:hover,
.vh-header--solid .s-nav-link:hover {
  color: var(--vh-ink);
}

.vh-header--transparent.is-scrolled .vh-icon-btn,
.vh-header--solid .vh-icon-btn {
  color: var(--vh-charcoal);
}

.vh-header--transparent.is-scrolled .vh-icon-btn:hover,
.vh-header--solid .vh-icon-btn:hover {
  color: var(--vh-ink);
  background: var(--vh-linen);
}

.vh-header--transparent.is-scrolled .vh-header__brand img,
.vh-header--solid .vh-header__brand img {
  filter: none;
}

.vh-header--transparent.is-scrolled .s-cart-badge,
.vh-header--solid .s-cart-badge {
  background: #E53935;
  color: #fff;
}

.vh-header--transparent.is-scrolled .s-nav-link.s-nav-sale,
.vh-header--solid .s-nav-link.s-nav-sale {
  color: var(--vh-orange);
}


/* ── Container ── */

.vh-container {
  max-width: var(--vh-container);
  margin: 0 auto;
  padding: 0 var(--vh-page-gutter);
}

/* ── Header inner layout ── */

.vh-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--vh-space-6);
  height: var(--vh-header-height);
}

.vh-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.vh-header__brand img {
  height: 44px;
  width: auto;
  transition: filter var(--vh-duration-base) var(--vh-ease-out);
}

.vh-header__brand a {
  display: inline-flex;
}

/* Text logo */
.vh-logo-text {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--vh-font-body);
  font-size: 22px;
  font-weight: var(--vh-weight-semibold);
  letter-spacing: -0.5px;
  line-height: 1;
}

.vh-logo-vivid {
  color: var(--vh-ink);
}

.vh-logo-home {
  color: var(--vh-orange);
}

/* Text logo on transparent header */
.vh-header--transparent .vh-logo-vivid,
.vh-header--transparent .vh-logo-home {
  color: var(--vh-white);
}

.vh-header--transparent.is-scrolled .vh-logo-vivid,
.vh-header--solid .vh-logo-vivid {
  color: var(--vh-ink);
}

.vh-header--transparent.is-scrolled .vh-logo-home,
.vh-header--solid .vh-logo-home {
  color: var(--vh-orange);
}

/* ── Navigation ── */

.vh-nav {
  display: flex;
  justify-content: center;
  gap: 0;
}

.s-nav-item {
  position: relative;
}

.s-nav-link {
  display: block;
  padding: var(--vh-space-2) var(--vh-space-5);
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-xs);
  font-weight: var(--vh-weight-semibold);
  letter-spacing: var(--vh-tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--vh-duration-fast) var(--vh-ease-out);
  white-space: nowrap;
}

.s-nav-chevron {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  transition: transform 0.2s ease;
  stroke: currentColor;
}

.s-has-mega:hover .s-nav-chevron {
  transform: rotate(180deg);
}

/* ── Icon buttons ── */

.vh-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--vh-radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--vh-duration-fast) var(--vh-ease-out);
}

.vh-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.vh-icon-btn--cart {
  width: 52px;
  height: 52px;
}
.vh-icon-btn--cart svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.6;
  transition: color 0.3s ease, stroke 0.3s ease;
}
.vh-icon-btn--cart.has-items svg {
  color: #E53935;
  stroke: #E53935;
  animation: cartWiggle 3s ease-in-out infinite;
}

/* Transparent header (homepage before scroll): give cart icon a visible bg */
.vh-header--transparent:not(.is-scrolled) .vh-icon-btn--cart.has-items {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

@keyframes cartWiggle {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(-8deg); }
  90% { transform: rotate(8deg); }
  95% { transform: rotate(-5deg); }
}

.s-cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  border-radius: var(--vh-radius-full);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  background: #E53935;
  color: #fff;
  box-shadow: 0 2px 6px rgba(229,57,53,0.35);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
.s-cart-badge:empty,
.s-cart-badge[data-count="0"] {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

/* ── Wishlist badge ── */

.vh-icon-btn--wishlist {
  position: relative;
  display: none;
}

.vh-icon-btn--wishlist.has-items {
  display: flex;
}

.vh-wishlist-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: var(--vh-radius-full);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: #E53935;
  color: #fff;
  box-shadow: 0 2px 6px rgba(229,57,53,0.35);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.vh-icon-btn--wishlist.has-items svg {
  fill: #E53935;
  stroke: #E53935;
}


.vh-header__actions {
  display: flex;
  align-items: center;
  gap: var(--vh-space-1);
}

/* ── Hamburger ── */

.vh-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.vh-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--vh-radius-full);
  transition: all var(--vh-duration-base) var(--vh-ease-out);
}

.vh-header--transparent .vh-hamburger span {
  background: var(--vh-white);
}

.vh-header--transparent.is-scrolled .vh-hamburger span,
.vh-header--solid .vh-hamburger span {
  background: var(--vh-ink);
}

/* Secure checkout badge */
.vh-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vh-space-2);
  font-size: var(--vh-text-sm);
  font-weight: var(--vh-weight-medium);
  color: var(--vh-charcoal);
}

/* ── Body offset for fixed header ── */
body {
  padding-top: calc(var(--vh-promo-height) + var(--vh-header-height));
}

body.home.page {
  padding-top: 0; /* hero is full-viewport, no offset needed */
}


/* ─────────────────────────────────────────────────────────────────────
   MOBILE DRAWER
   ───────────────────────────────────────────────────────────────────── */

.vh-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 21, 0.55);
  z-index: calc(var(--vh-z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--vh-ease-out);
}

.vh-mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.vh-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  z-index: var(--vh-z-drawer);
  background: var(--vh-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -8px 0 48px rgba(26, 23, 21, 0.12);
}

.vh-mobile-drawer.is-open {
  transform: translateX(0);
}

.vh-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vh-space-5) var(--vh-space-6);
  border-bottom: 1px solid var(--vh-sand);
  flex-shrink: 0;
}

.vh-mobile-drawer__brand img {
  height: 32px;
  width: auto;
}

.vh-mobile-drawer__close {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--vh-linen);
  border-radius: var(--vh-radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--vh-duration-fast) var(--vh-ease-out);
}

.vh-mobile-drawer__close svg {
  width: 20px;
  height: 20px;
  stroke: var(--vh-ink);
}

.vh-mobile-drawer__close:hover {
  background: var(--vh-sand);
}

.vh-mobile-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--vh-space-4) 0;
}

.vh-mobile-drawer__nav {
  display: flex;
  flex-direction: column;
}

.vh-mobile-drawer__nav a,
.vh-mobile-drawer__link {
  display: block;
  padding: var(--vh-space-4) var(--vh-space-6);
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-md);
  font-weight: var(--vh-weight-medium);
  color: var(--vh-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--vh-linen);
  transition: background var(--vh-duration-fast) var(--vh-ease-out),
              color var(--vh-duration-fast) var(--vh-ease-out);
}

.vh-mobile-drawer__nav a:hover,
.vh-mobile-drawer__link:hover {
  background: var(--vh-cream);
  color: var(--vh-purple);
}

.vh-mobile-drawer__link--sale {
  color: var(--vh-orange) !important;
}

.vh-mobile-drawer__foot {
  flex-shrink: 0;
  padding: var(--vh-space-4) var(--vh-space-6);
  border-top: 1px solid var(--vh-sand);
  display: flex;
  flex-direction: column;
  gap: var(--vh-space-1);
}

.vh-mobile-drawer__foot-link {
  display: flex;
  align-items: center;
  gap: var(--vh-space-3);
  padding: var(--vh-space-3) 0;
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-sm);
  color: var(--vh-charcoal);
  text-decoration: none;
  transition: color var(--vh-duration-fast) var(--vh-ease-out);
}

.vh-mobile-drawer__foot-link:hover {
  color: var(--vh-purple);
}

.vh-mobile-drawer__foot-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Hamburger "X" animation when open */
.vh-hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.vh-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.vh-hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ─────────────────────────────────────────────────────────────────────
   GLOBAL ANIMATIONS
   ───────────────────────────────────────────────────────────────────── */

/* Page load fade-in */
body {
  animation: vh-page-fade 0.6s var(--vh-ease-out) both;
}

@keyframes vh-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll-triggered fade-in (applied via JS IntersectionObserver) */
.vh-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--vh-ease-out), transform 0.7s var(--vh-ease-out);
}

.vh-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — add delay via nth-child */
.vh-fade-in:nth-child(2) { transition-delay: 0.1s; }
.vh-fade-in:nth-child(3) { transition-delay: 0.2s; }
.vh-fade-in:nth-child(4) { transition-delay: 0.3s; }
.vh-fade-in:nth-child(5) { transition-delay: 0.15s; }
.vh-fade-in:nth-child(6) { transition-delay: 0.25s; }
.vh-fade-in:nth-child(7) { transition-delay: 0.3s; }
.vh-fade-in:nth-child(8) { transition-delay: 0.35s; }

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .vh-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body {
    animation: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   MOBILE STICKY CTA BAR
   ───────────────────────────────────────────────────────────────────── */

.vh-mobile-cta {
  display: none;
}

@media (max-width: 767px) {
  .vh-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--vh-z-header) - 1);
    background: var(--vh-white);
    border-top: 1px solid var(--vh-sand);
    padding: var(--vh-space-3) var(--vh-space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--vh-space-3);
    box-shadow: 0 -2px 16px rgba(26, 23, 21, 0.08);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s var(--vh-ease-out), opacity 0.35s var(--vh-ease-out);
  }

  .vh-mobile-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
  }

  .vh-mobile-cta__text {
    font-family: var(--vh-font-body);
    font-size: var(--vh-text-xs);
    color: var(--vh-charcoal);
    line-height: var(--vh-leading-snug);
  }

  .vh-mobile-cta__text strong {
    display: block;
    font-size: var(--vh-text-sm);
    color: var(--vh-ink);
  }

  .vh-mobile-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--vh-space-2);
    padding: var(--vh-space-3) var(--vh-space-6);
    font-family: var(--vh-font-body);
    font-size: var(--vh-text-sm);
    font-weight: var(--vh-weight-semibold);
    color: var(--vh-white);
    background: var(--vh-gradient-cta);
    border: none;
    border-radius: var(--vh-radius-full);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.3);
  }

  /* Offset back-to-top and cookie banner when CTA bar is visible */
  .vh-mobile-cta.is-visible ~ .vh-btt {
    bottom: 76px;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .vh-nav {
    display: none;
  }

  .vh-hamburger {
    display: flex;
  }

  .vh-header__inner {
    grid-template-columns: auto 1fr auto;
  }
}

@media (max-width: 767px) {
  .vh-promo-bar {
    min-height: 36px;
  }

  .vh-promo-bar__msg {
    font-size: 0.65rem;
  }

  .vh-header__inner {
    height: var(--vh-header-height);
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--vh-space-4);
  }

  .vh-header__brand img {
    height: 36px;
  }

  /* Mobile: show only cart + hamburger */
  .vh-header__actions .vh-icon-btn {
    display: none;
  }

  .vh-header__actions .vh-icon-btn--cart {
    display: flex;
  }

  .vh-hamburger {
    order: 99;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   SEARCH OVERLAY
   ───────────────────────────────────────────────────────────────────── */

.vh-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.vh-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.vh-search-overlay__inner {
  width: 100%;
  max-width: 580px;
  padding: 0 clamp(20px, 4vw, 48px);
  position: relative;
  transform: translateY(-12px);
  transition: transform 0.25s ease;
}

.vh-search-overlay.is-open .vh-search-overlay__inner {
  transform: translateY(0);
}

.vh-search-overlay__close {
  position: absolute;
  top: -48px;
  right: clamp(20px, 4vw, 48px);
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.vh-search-overlay__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Style the search form inside the overlay */
.vh-search-overlay .s-search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.vh-search-overlay .s-search-wrap svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: #8A8A8A;
  pointer-events: none;
}

.vh-search-overlay .s-search-input {
  width: 100%;
  height: 60px;
  padding: 0 20px 0 52px;
  border: none;
  background: transparent;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 18px;
  color: #1A1A1A;
  outline: none;
}

.vh-search-overlay .s-search-input::placeholder {
  color: #B0B0B0;
}

@media (max-width: 767px) {
  .vh-search-overlay {
    padding-top: 80px;
  }

  .vh-search-overlay .s-search-input {
    height: 52px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Main Nav — vivid-design-tokens restyle
   Pill-underline + 7-stop rainbow gradient on hover/active, 1.08× scale.
   Overrides the uppercase/tracking treatment above.
   ========================================================================== */

:root {
  --vivid-gradient-main: linear-gradient(135deg,
      #1e3a8a 0%, #2563eb 15%, #06b6d4 30%, #9333ea 50%,
      #f43f5e 70%, #fb923c 85%, #facc15 100%);
  --vivid-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vivid-dur-med: 0.28s;
}

.vh-nav {
  gap: 26px;
  align-items: center;
}

.vh-nav .s-nav-item {
  display: inline-flex;
  align-items: center;
}

.vh-nav .s-nav-link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--vh-font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition:
    transform var(--vivid-dur-med) var(--vivid-ease),
    color var(--vivid-dur-med) var(--vivid-ease);
}

.vh-nav .s-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--vivid-gradient-main);
  background-size: 100% 100%;
  transition: width var(--vivid-dur-med) ease;
}

/* Transparent state — white pill underline grows on hover */
.vh-header--transparent:not(.is-scrolled) .vh-nav .s-nav-link::after {
  background: rgba(255, 255, 255, 0.9);
}

.vh-header--transparent:not(.is-scrolled) .vh-nav .s-nav-link:hover::after,
.vh-header--transparent:not(.is-scrolled) .vh-nav .s-nav-link.is-active::after,
.vh-header--transparent:not(.is-scrolled) .vh-nav .s-nav-link[aria-current="page"]::after,
.vh-header--transparent:not(.is-scrolled) .vh-nav .current-menu-item > .s-nav-link::after,
.vh-header--transparent:not(.is-scrolled) .vh-nav .current_page_item > .s-nav-link::after {
  width: 100%;
}

/* Scrolled/solid state — default dark, gradient text + underline + gradual scale on hover/active */
.vh-header--solid .vh-nav .s-nav-link,
.vh-header--transparent.is-scrolled .vh-nav .s-nav-link {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              color var(--vivid-dur-med) var(--vivid-ease);
  transform-origin: center;
}

.vh-header--solid .vh-nav .s-nav-link:hover,
.vh-header--transparent.is-scrolled .vh-nav .s-nav-link:hover,
.vh-header--solid .vh-nav .s-nav-link.is-active,
.vh-header--transparent.is-scrolled .vh-nav .s-nav-link.is-active,
.vh-header--solid .vh-nav .s-nav-link[aria-current="page"],
.vh-header--transparent.is-scrolled .vh-nav .s-nav-link[aria-current="page"],
.vh-header--solid .vh-nav .current-menu-item > .s-nav-link,
.vh-header--transparent.is-scrolled .vh-nav .current-menu-item > .s-nav-link,
.vh-header--solid .vh-nav .current_page_item > .s-nav-link,
.vh-header--transparent.is-scrolled .vh-nav .current_page_item > .s-nav-link {
  background: var(--vivid-gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: scale(1.06);
}

.vh-header--solid .vh-nav .s-nav-link:hover::after,
.vh-header--transparent.is-scrolled .vh-nav .s-nav-link:hover::after,
.vh-header--solid .vh-nav .s-nav-link.is-active::after,
.vh-header--transparent.is-scrolled .vh-nav .s-nav-link.is-active::after,
.vh-header--solid .vh-nav .s-nav-link[aria-current="page"]::after,
.vh-header--transparent.is-scrolled .vh-nav .s-nav-link[aria-current="page"]::after,
.vh-header--solid .vh-nav .current-menu-item > .s-nav-link::after,
.vh-header--transparent.is-scrolled .vh-nav .current-menu-item > .s-nav-link::after,
.vh-header--solid .vh-nav .current_page_item > .s-nav-link::after,
.vh-header--transparent.is-scrolled .vh-nav .current_page_item > .s-nav-link::after {
  width: 100%;
}

.vh-nav .s-nav-link:hover .s-nav-chevron,
.vh-nav .s-has-mega:hover .s-nav-link .s-nav-chevron {
  stroke: #f43f5e;
}


/* ==========================================================================
   Logo — vivid-design-tokens effects
   Entrance + float + breathing multi-color glow + hover halo + scale
   ========================================================================== */

@keyframes vh-logo-entrance {
  from { opacity: 0; transform: translateY(-10px) scale(0.92); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0);   }
}
@keyframes vh-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes vh-logo-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.72; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.vh-header__brand .vh-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.vh-header__brand .vh-logo {
  position: relative;
  display: inline-block;
}

.vh-header__brand .vh-logo img {
  display: block;
  position: relative;
  z-index: 1;
  animation:
    vh-logo-entrance 0.72s var(--vivid-ease) both,
    vh-logo-float    3.8s  var(--vivid-ease) 0.9s infinite;
  transition: transform 0.4s var(--vivid-ease), filter 0.4s ease;
}

.vh-header__brand .vh-logo-glow {
  position: absolute;
  inset: 18% 20%;
  background: radial-gradient(circle,
    rgba(244, 63, 94, 0.18),
    rgba(249, 115, 22, 0.16),
    rgba(37, 99, 235, 0.12),
    transparent 70%);
  filter: blur(24px);
  animation: vh-logo-breathe 5s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.vh-header__brand .vh-logo::after {
  content: "";
  position: absolute;
  inset: -12px;
  background: radial-gradient(circle,
    rgba(249, 115, 22, 0.25),
    rgba(147, 51, 234, 0.20),
    transparent 70%);
  filter: blur(25px);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--vivid-dur-fast, 0.25s) var(--vivid-ease),
              transform var(--vivid-dur-fast, 0.25s) var(--vivid-ease);
  pointer-events: none;
}

.vh-header__brand .vh-brand:hover .vh-logo::after {
  opacity: 1;
  transform: scale(1.1);
}

.vh-header__brand .vh-brand:hover .vh-logo img {
  animation-play-state: paused;
  transform: scale(1.06);
  filter: drop-shadow(0 4px 16px rgba(37, 99, 235, 0.32));
}

/* Transparent (pre-scroll) — keep logo monochrome white, hide colored glow/halo */
.vh-header--transparent:not(.is-scrolled) .vh-header__brand .vh-logo-glow,
.vh-header--transparent:not(.is-scrolled) .vh-header__brand .vh-logo::after {
  display: none;
}

/* Force white filter even during entrance keyframes (which animate filter → blur(0)) */
.vh-header--transparent:not(.is-scrolled) .vh-header__brand .vh-logo img {
  filter: brightness(0) invert(1) !important;
}

.vh-header--transparent:not(.is-scrolled) .vh-header__brand .vh-brand:hover .vh-logo img {
  filter: brightness(0) invert(1) drop-shadow(0 4px 16px rgba(255, 255, 255, 0.4)) !important;
}

/* ─── Language switcher dropdown ─── */
.vh-lang { position: relative; display: inline-block; }
.vh-lang__toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  min-width: 64px;
  padding: 0 10px !important;
}
.vh-lang__globe { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.vh-lang__current {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
}
.vh-lang__caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.2s;
}
.vh-lang.is-open .vh-lang__caret { transform: rotate(180deg); opacity: 1; }
.vh-lang.is-open .vh-lang__toggle { background: rgba(0, 0, 0, 0.04); }

/* Panel — hidden by default via [hidden]; .vh-lang.is-open switches to visible */
.vh-lang__panel[hidden] { display: none !important; }
.vh-lang__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  max-height: 420px;
  background: #FFFFFF;
  border: 1px solid #E8E6E1;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: 9000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: vhLangFadeIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vhLangFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vh-lang__panel { animation: none; }
  .vh-lang__caret { transition: none; }
}

.vh-lang__panel-head {
  padding: 14px 16px 10px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #7B2D8E;
  border-bottom: 1px solid #F5F5F3;
}

.vh-lang__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  max-height: 360px;
  scrollbar-width: thin;
  scrollbar-color: #C8C5BE transparent;
}
.vh-lang__list::-webkit-scrollbar { width: 6px; }
.vh-lang__list::-webkit-scrollbar-thumb { background: #C8C5BE; border-radius: 3px; }
.vh-lang__list::-webkit-scrollbar-track { background: transparent; }

.vh-lang__item { margin: 0; }
.vh-lang__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #2D2B28;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 14px;
  transition: background-color 0.15s, color 0.15s;
}
.vh-lang__link:hover {
  background: linear-gradient(90deg, rgba(27, 58, 140, 0.06), rgba(123, 45, 142, 0.06));
  color: #1B3A8C;
}
.vh-lang__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 6px;
  background: #F5F5F3;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #6B6860;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background-color 0.15s, color 0.15s;
}
.vh-lang__link:hover .vh-lang__code {
  background: #1B3A8C;
  color: #FFFFFF;
}
.vh-lang__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vh-lang__check { color: #2A7C4A; flex-shrink: 0; }
.vh-lang__link.is-active {
  background: linear-gradient(90deg, rgba(27, 58, 140, 0.08), rgba(123, 45, 142, 0.08));
  font-weight: 600;
  color: #1A1A1E;
}
.vh-lang__link.is-active .vh-lang__code {
  background: linear-gradient(135deg, #1B3A8C, #7B2D8E);
  color: #FFFFFF;
}

/* Transparent header (pre-scroll on front page) — keep toggle text white */
.vh-header--transparent:not(.is-scrolled) .vh-lang__toggle { color: #FFFFFF; }

/* Mobile: dropdown becomes a sheet docked to the bottom-right */
@media (max-width: 720px) {
  .vh-lang__panel {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    min-width: 0;
    max-height: 70vh;
    border-radius: 16px;
  }
  .vh-lang__list { max-height: calc(70vh - 50px); }
  .vh-lang__current { display: none; }
}