:root {
  --text: #f4f2ea;
  --muted: #ddd7ca;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #f7d8a6;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #0b0b0b;
  color: var(--text);
  font-family: "Manrope", sans-serif;
}

.hero-wrap {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(1.05) contrast(1.02);
}

.video-dark-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 1;
}

.vignette,
.top-shadow,
.bottom-shadow,
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vignette {
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.02) 16%, rgba(0, 0, 0, 0.20) 58%, rgba(0, 0, 0, 0.52) 100%);
  z-index: 2;
}

.top-shadow {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.54) 12%, rgba(0, 0, 0, 0.34) 24%, rgba(0, 0, 0, 0.16) 40%, rgba(0, 0, 0, 0.04) 58%, rgba(0, 0, 0, 0) 72%);
  z-index: 3;
}

.bottom-shadow {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 22%, rgba(0, 0, 0, 0) 60%);
  z-index: 3;
}

.grain {
  opacity: 0.07;
  background-image: radial-gradient(circle at 20% 20%, #fff 0.6px, transparent 0.6px),
    radial-gradient(circle at 80% 35%, #fff 0.6px, transparent 0.6px),
    radial-gradient(circle at 35% 80%, #fff 0.6px, transparent 0.6px);
  background-size: 5px 5px, 4px 4px, 6px 6px;
}

.nav {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.55rem 2.4rem;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: blur(3px);
  top: 0;
  position: relative;
  z-index: 200 !important;
}


.brand {
  display:none;
}

.brand-top {
  position: relative;
  z-index: 6;
  text-align: center;
  padding: 0.55rem 0 0.35rem;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  font-size: 1.5rem;
  color: var(--text);
  position: relative;
  z-index: 110 !important;
}


.nav ul {
  position: relative;
  z-index: 210 !important;
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  gap: 3.1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase !important;
  position: relative;
  z-index: 220 !important;
}


.nav a:hover {
  color: var(--text);
}

.hero-content {
  position: relative;
  z-index: 5;
  max-width: 820px;
  padding: 14vh 2.4rem 2rem;
}

.kicker {
  margin: 0 0 0.8rem;
  letter-spacing: 0.18em;
  font-size: 1.8rem;
  color: var(--accent);
  font-weight: 700;
}

h1 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 7.4vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.sub {
  margin-top: 1.1rem;
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.55;
  font-size: 1rem;
}

.cta {
  display: inline-block;
  margin-top: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text);
  text-decoration: none;
  padding: 0.78rem 1.2rem;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

.cta:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  .nav {
    padding: 0.9rem 1.1rem;
    gap: 0.8rem;
    flex-direction: column;
    align-items: center;
  }

  .brand-top {
    font-size: 1.2rem;
    padding-top: 0.45rem;
  }

  .hero-content {
    padding: 10vh 1.1rem 2rem;
  }
}


.top-ticker {
  position: relative;
  z-index: 6;
  height: 32px;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker-track {
  white-space: nowrap;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  font-size: 0.84rem;
  text-transform: uppercase;
  animation: ticker 28s linear infinite;
  display: inline-flex;
  align-items: center;
}

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

.nav:hover {
  background: rgba(255,255,255,0.98);
  border-bottom: none;
  box-shadow: none;
}

.nav:hover a {
  color: #111;
}


.hero-content.centered {
  max-width: none;
  text-align: center;
  padding-top: 20vh;
  transform: translateY(-2cm) !important;
  position: relative;
}

.hero-content.centered .sub {
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  text-transform: uppercase;
  transform: translateY(1cm) !important;
  position: relative;
}


.hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
  transform: translateY(1cm) !important;
  position: relative;
}


.cta-secondary {
  background: rgba(255,255,255,0.14);
}


.hero-content.centered h1 {
  font-size: clamp(1.6rem, 4.2vw, 3.8rem);
  line-height: 1.05;
  font-weight: 700;
}


.brand-top:hover {
  background: rgba(255,255,255,0.98);
  color: #111;
}


.hero-wrap:hover .brand-top,
.hero-wrap:hover .nav {
  background: rgba(255,255,255,0.98);
  position: relative;
  z-index: 200 !important;
}


.hero-wrap:hover .brand-top,
.hero-wrap:hover .nav a {
  color: #111;
  position: relative;
  z-index: 220 !important;
}



.ticker-item {
  display: inline-block;
  margin-right: 7.2rem;
}

.ticker-flash { color: #ffffff; }

.ticker-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  line-height: 1;
  margin-right: 0.35rem;
  transform: translateY(0px);
}


.no-video-bg {
  background: #ffffff;
  color: #111;
}
.no-video-bg .bg-video {
  display: none !important;
}


.no-video-bg .vignette,
.no-video-bg .top-shadow,
.no-video-bg .bottom-shadow,
.no-video-bg .grain {
  display: none;
}

.no-video-bg .brand-top,
.no-video-bg .nav a,
.no-video-bg .kicker,
.no-video-bg h1,
.no-video-bg .sub {
  color: #111;
}

.no-video-bg .nav {
  border-bottom: 1px solid rgba(0,0,0,0.12);
  position: relative;
  z-index: 200 !important;
}


.no-video-bg .top-ticker {
  background: #000;
}


.no-video-bg .brand-top:hover {
  background: rgba(255,255,255,0.98);
  color: #111;
}

.no-video-bg .nav:hover {
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  box-shadow: none;
}

.no-video-bg .hero-wrap:hover .brand-top,
.no-video-bg .hero-wrap:hover .nav {
  background: rgba(255,255,255,0.98);
  position: relative;
  z-index: 200 !important;
}


.no-video-bg .hero-wrap:hover .brand-top,
.no-video-bg .hero-wrap:hover .nav a,
.no-video-bg .nav:hover a {
  color: #111;
}


.hero-wrap.no-video-bg .brand-top,
.hero-wrap.no-video-bg .nav {
  background: rgba(255,255,255,0.98) !important;
  position: relative;
  z-index: 200 !important;
}


.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .brand-top {
  color: #111 !important;
  position: relative;
  z-index: 110 !important;
}


.hero-wrap.no-video-bg .nav {
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 200 !important;
}


.hero-wrap.no-video-bg:hover .brand-top,
.hero-wrap.no-video-bg:hover .nav,
.hero-wrap.no-video-bg .nav:hover,
.hero-wrap.no-video-bg .brand-top:hover {
  background: rgba(255,255,255,0.98) !important;
  color: #111 !important;
}

.hero-wrap.no-video-bg:hover .nav a,
.hero-wrap.no-video-bg .nav:hover a {
  color: #111 !important;
}

.home-title {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 5.4vw, 4.6rem) !important;
  letter-spacing: 0.03em;
  margin: 0 0 0.35rem !important;
  color: #fff !important;
  position: relative;
  z-index: 12;
}

.home-kicker {
  margin-top: 0.1rem !important;
  font-size: 2rem;
  color: #ffffff !important;
  transform: none !important;
  position: relative;
}


@media (max-width: 1200px) {
  .nav ul {
  position: relative;
  z-index: 210 !important;
    gap: 1.8rem !important;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 820px) {
  .nav ul {
  position: relative;
  z-index: 210 !important;
    gap: 1rem !important;
    font-size: 0.88rem;
  }
}

/* Versand page: compact layout so content stays in one desktop viewport */
.versand-compact {
  padding-top: 6.2vh !important;
}

.versand-compact .kicker {
  margin-bottom: 0.45rem;
  font-size: 1.25rem;
  letter-spacing: 0.15em;
}

.versand-compact h1 {
  font-size: clamp(1.55rem, 2.9vw, 2.7rem);
  line-height: 1.02;
}

.versand-compact .versand-text {
  font-size: 0.92rem;
  line-height: 1.42 !important;
}

.versand-compact .versand-text p {
  margin: 0 0 0.58rem;
}

@media (max-width: 1100px) {
  .versand-compact {
    padding-top: 6vh !important;
  }

  .versand-compact .versand-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 820px) {
  .versand-compact {
    padding-top: 6.5vh !important;
  }

  .versand-compact .versand-text {
    font-size: 0.92rem;
    line-height: 1.48 !important;
  }
}


/* Align subpages (Design / Sticker & Bags / Impressum) to Versand vertical position */
.subpage-align-versand {
  padding-top: 6.2vh !important;
}

.subpage-align-versand .sub {
  margin-top: 1.5cm !important;
}

@media (max-width: 1100px) {
  .subpage-align-versand {
    padding-top: 6vh !important;
  }
}

@media (max-width: 820px) {
  .subpage-align-versand {
    padding-top: 6.5vh !important;
  }
}


.brand-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.1rem;
  padding-bottom: 0rem;
  position: relative;
  z-index: 110 !important;
}


.brand-top .site-logo {
  display: block;
  width: 271px !important;
  max-width: 271px !important;
  height: auto !important;
  object-fit: contain;
  flex: 0 0 auto;
  transform: translateY(-3mm) rotate(10deg);
  position: relative;
  z-index: 120 !important;
}


@media (max-width: 900px) {
  .brand-top .site-logo {
    width: 218px !important;
    max-width: 218px !important;
  }
}


.home-logo-title {
  margin: 0 auto -4.2cm;
}

.home-main-logo {
  display: block;
  width: min(616px, 71.3vw);
  max-width: 616px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  transform: translateY(-5cm) rotate(10deg);
}

@media (max-width: 900px) {
  .home-main-logo {
    width: min(421px, 74.5vw);
    max-width: 421px;
  }
}

@media (max-width: 900px) {
  .home-logo-title {
    margin-bottom: -2.8cm;
  }
}

@media (max-width: 900px) {
  .home-kicker {
  margin-top: 0.1rem !important;
  font-size: 2rem;
  color: #ffffff !important;
  transform: none !important;
  position: relative;
}

}


@media (max-width: 900px) {
  .home-kicker {
  margin-top: 0.1rem !important;
  font-size: 2rem;
  color: #ffffff !important;
  transform: none !important;
  position: relative;
}
}


@media (max-width: 900px) {
  .hero-content.centered .sub {
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  text-transform: uppercase;
  transform: translateY(1cm) !important;
  position: relative;
}
  .hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
  transform: translateY(1cm) !important;
  position: relative;
}
}

@media (max-width: 900px) {
  .nav {
    top: 0;
  }
}


/* Default state (dark/transparent background) */
.nav a {
  color: #fff !important;
  position: relative;
  z-index: 220 !important;
}


/* White bar state */
.nav:hover {
  background: rgba(255,255,255,0.98) !important;
}

.nav:hover a,
.hero-wrap:hover .nav a {
  color: #111 !important;
  text-shadow: none !important;
  position: relative;
  z-index: 220 !important;
}



.impressum-logo-title {
  margin: 0 auto;
}

.impressum-main-logo {
  display: block;
  width: min(520px, 72vw);
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  transform: rotate(10deg);
}

@media (max-width: 900px) {
  .impressum-main-logo {
    width: min(360px, 82vw);
    max-width: 360px;
  }
}


@media (max-width: 900px) {
  .hero-content.centered {
    transform: translateY(-1.2cm) !important;
  }
  .hero-content.centered .sub {
    transform: translateY(0.6cm) !important;
  }
  .hero-actions {
    transform: translateY(0.6cm) !important;
  }
}


/* Uniform subpage heading offset: exactly 2cm below white nav bar */
.subpage-main {
  margin-top: 2cm !important;
  padding-top: 0 !important;
  transform: none !important;
  text-align: center;
}

.subpage-main h1 {
  margin: 0 !important;
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.8rem, 7.2vw, 6.2rem) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  color: #111 !important;
}

@media (max-width: 900px) {
  .subpage-main {
    margin-top: 1.4cm !important;
  }
  .subpage-main h1 {
    font-size: clamp(2rem, 9vw, 3.4rem) !important;
  }
}


/* Stable subpage title layout fix */
.subpage-main {
  margin-top: 1.5cm !important;
  padding-top: 0 !important;
  transform: none !important;
}

.subpage-main .subpage-title {
  margin: 0 auto !important;
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.01em !important;
  color: #111 !important;
  text-transform: none !important;
  display: inline-block;
  max-width: 92vw;
  text-align: center;
  white-space: normal;
  word-break: normal;
}


/* Subpage vertical position hard-fix */
.hero-content.centered.subpage-main {
  padding-top: 1cm !important;
  margin-top: 0 !important;
  transform: none !important;
}


/* Hover wobble fix */
.brand-top,
.nav {
  transition: background-color 140ms ease, color 140ms ease;
  position: relative;
  z-index: 200 !important;
}


.brand-top,
.brand-top:hover {
  padding-top: 0.1rem !important;
  padding-bottom: 0rem !important;
}

.nav,
.nav:hover {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}


/* default transparent/dark state */
.hero-wrap .nav a { color: #fff !important; }

/* when white bar is active (hover on nav/hero) */
.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg:hover .nav a,
.hero-wrap.no-video-bg .nav:hover a {
  color: #111 !important;
}


/* Default (home transparent) */
.hero-wrap .nav a { color: #fff !important; }

/* White bar state */
.hero-wrap:hover .nav,
.hero-wrap .nav:hover,
.hero-wrap.no-video-bg .nav {
  background: rgba(255,255,255,0.98) !important;
}

.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a,
.hero-wrap.no-video-bg:hover .nav a {
  color: #111 !important;
}


/* keep bar background behavior */
.hero-wrap .nav { background: transparent !important; }
.hero-wrap:hover .nav,
.hero-wrap .nav:hover,
.hero-wrap.no-video-bg .nav,
.hero-wrap.no-video-bg:hover .nav {
  background: rgba(255,255,255,0.98) !important;
}

/* menu text layering */
.hero-wrap .nav nav,
.hero-wrap .nav ul,
.hero-wrap .nav li,
.hero-wrap .nav a {
  position: relative !important;
  z-index: 4100 !important;
}

/* default on home */
.hero-wrap .nav a {
  color: #fff !important;
  text-transform: uppercase !important;
}

/* white bar state in home + subpages */
.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a,
.hero-wrap.no-video-bg:hover .nav a {
  color: #111 !important;
}


/* default on home */
.hero-wrap .nav a { color: #fff !important; }

/* white bar active => black + foreground */
.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg:hover .nav a,
.hero-wrap.no-video-bg .nav:hover a {
  color: #111 !important;
}

@media (max-width: 900px) {
  .hero-wrap .nav,
  .hero-wrap .nav:hover {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }
}


/* default home */
.hero-wrap .nav a {
  color: #fff !important;
  text-transform: uppercase !important;
}

/* white bar active */
.hero-wrap:hover .nav,
.hero-wrap .nav:hover,
.hero-wrap.no-video-bg .nav,
.hero-wrap.no-video-bg:hover .nav {
  background: rgba(255,255,255,0.98) !important;
}

.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a,
.hero-wrap.no-video-bg:hover .nav a {
  color: #111 !important;
}

@media (max-width: 900px) {
  .hero-wrap .nav,
  .hero-wrap .nav:hover {
    padding: 0.6rem 1.1rem !important;
  }
}


/* keep text behavior */
.hero-wrap .nav a { color: #fff !important; }
.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a,
.hero-wrap.no-video-bg:hover .nav a { color: #111 !important; }

@media (max-width: 900px) {
  .hero-wrap .nav,
  .hero-wrap .nav:hover {
    padding: 0.35rem 1.1rem !important;
  }
}


/* Default home text (light) */
.hero-wrap .nav a {
  color: #fff !important;
  text-transform: uppercase !important;
}

/* White bar behavior */
.hero-wrap:hover .nav,
.hero-wrap .nav:hover,
.hero-wrap.no-video-bg .nav,
.hero-wrap.no-video-bg:hover .nav {
  background: rgba(255,255,255,0.98) !important;
}

.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a,
.hero-wrap.no-video-bg:hover .nav a {
  color: #111 !important;
}

@media (max-width: 900px) {
  .hero-wrap .nav,
  .hero-wrap .nav:hover {
    padding: 1rem 1.1rem !important;
  }
}


/* SCOPE-LOCK FIX: only logo bigger+front, restore original bar/menu geometry */
.hero-wrap .brand-top,
.hero-wrap .brand-top:hover {
  padding: 0.55rem 0 0.35rem !important;
  margin: 0 !important;
  transform: none !important;
}

.hero-wrap .nav,
.hero-wrap .nav:hover {
  top: 0 !important;
  padding: 1.2rem 2.4rem !important;
  margin: 0 !important;
  min-height: auto !important;
  height: auto !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .hero-wrap .nav,
  .hero-wrap .nav:hover {
    padding: 1rem 1.1rem !important;
  }
}

/* keep requested logo change only (+10%) */
.hero-wrap .brand-top .site-logo {
  width: 298px !important;
  max-width: 298px !important;
  height: auto !important;
  position: relative !important;
  z-index: 500 !important;
}

@media (max-width: 900px) {
  .hero-wrap .brand-top .site-logo {
    width: 240px !important;
    max-width: 240px !important;
  }
}

/* menu text visibility behavior */
.hero-wrap .nav,
.hero-wrap .nav nav,
.hero-wrap .nav ul,
.hero-wrap .nav li,
.hero-wrap .nav a {
  position: relative !important;
  z-index: 600 !important;
}

.hero-wrap .nav a { color: #fff !important; text-transform: uppercase !important; }
.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a,
.hero-wrap.no-video-bg:hover .nav a { color: #111 !important; }


/* OPERATOR REQUEST — THIN BAR RESTORE */
.hero-wrap .brand-top,
.hero-wrap .brand-top:hover,
.hero-wrap.no-video-bg .brand-top,
.hero-wrap.no-video-bg .brand-top:hover {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.hero-wrap .nav,
.hero-wrap .nav:hover,
.hero-wrap.no-video-bg .nav,
.hero-wrap.no-video-bg .nav:hover {
 transform: translateY(-1cm) !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

.hero-wrap .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a {
  line-height: 1 !important;
}

/* FIX: Home menu text above white bar */
.hero-wrap .nav {
  position: relative !important;
  z-index: 9999 !important;
}

.hero-wrap .nav nav,
.hero-wrap .nav ul,
.hero-wrap .nav li,
.hero-wrap .nav a {
  position: relative !important;
  z-index: 10000 !important;
}

/* Default transparent state: white text */
.hero-wrap .nav a {
  color: #fff !important;
}

/* White bar state: switch to black */
.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg .nav:hover a,
.hero-wrap.no-video-bg:hover .nav a {
  color: #111 !important;
}

/* White bar overlay placed behind text — REMOVED */
/* FINAL OVERRIDE — ensure black menu text on white bar */
.hero-wrap:hover .nav a,
.hero-wrap .nav:hover a,
.hero-wrap.no-video-bg .nav a,
.hero-wrap.no-video-bg:hover .nav a,
.hero-wrap.no-video-bg .nav:hover a {
  color: #111 !important;
  text-shadow: none !important;
  z-index: 11000 !important;
}

/* ===== NAV RESET (single source of truth) ===== */
main.hero-wrap > header.nav {
  position: relative !important;
  z-index: 5000 !important;
  background: transparent !important;
}

main.hero-wrap > header.nav nav,
main.hero-wrap > header.nav ul,
main.hero-wrap > header.nav li,
main.hero-wrap > header.nav a {
  position: relative !important;
  z-index: 6000 !important;
}

main.hero-wrap > header.nav a {
  color: #fff !important;
}

main.hero-wrap:hover > header.nav,
main.hero-wrap > header.nav:hover {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: none !important;
}

main.hero-wrap:hover > header.nav a,
main.hero-wrap > header.nav:hover a {
  color: #111 !important;
}

main.hero-wrap.no-video-bg > header.nav,
main.hero-wrap.no-video-bg > header.nav:hover {
  background: rgba(255, 255, 255, 0.98) !important;
}

main.hero-wrap.no-video-bg > header.nav a,
main.hero-wrap.no-video-bg > header.nav:hover a {
  color: #111 !important;
}

/* Focus/active state: keep text visible when links clicked */
main.hero-wrap > header.nav:focus-within,
main.hero-wrap > header.nav:active {
  background: rgba(255, 255, 255, 0.98) !important;
}

main.hero-wrap > header.nav:focus-within a,
main.hero-wrap > header.nav a:focus,
main.hero-wrap > header.nav a:active {
  color: #111 !important;
}

/* HARD FIX — hover state must be black */
main.hero-wrap:hover > header.nav a,
main.hero-wrap > header.nav:hover a {
  color: #111 !important;
  position: relative !important;
  z-index: 20000 !important;
  opacity: 1 !important;
}


/* Subpages: move thin separator line slightly downward to align with white bar edge */
.hero-wrap.subpage-wrap.no-video-bg .nav,
.hero-wrap.subpage-wrap.no-video-bg .nav:hover,
.hero-wrap.subpage-wrap .nav,
.hero-wrap.subpage-wrap .nav:hover {
  border-bottom: 1px solid rgba(0,0,0,0.18) !important;
  padding-bottom: calc(0.55rem + 3mm) !important;
}


/* Custom background pages: dark fade only below nav separator */
.hero-wrap.custom-bg {
  position: relative;
}

.hero-wrap.custom-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 146px;
  bottom: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.62) 16%, rgba(0,0,0,0.28) 34%, rgba(0,0,0,0.42) 100%),
    radial-gradient(circle at center, rgba(0,0,0,0.22) 16%, rgba(0,0,0,0.82) 100%);
  z-index: 1;
}

.hero-wrap.custom-bg .hero-content,
.hero-wrap.custom-bg .brand-top,
.hero-wrap.custom-bg .nav,
.hero-wrap.custom-bg .top-ticker {
  position: relative;
  z-index: 2;
}


@media (max-width: 768px) {
  .nav-about,
  .nav-design,
  .nav-shipping,
  .nav-whatsapp,
  .nav-signal,
  .nav-tiktok {
    display: none !important;
  }

  .nav {
    padding: 0.2rem 0.9rem !important;
  }

  .nav ul {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto auto auto !important;
    align-items: center !important;
    column-gap: 0.65rem !important;
    row-gap: 0 !important;
    flex-wrap: nowrap !important;
  }

  .nav li {
    margin: 0 !important;
    min-width: 0 !important;
  }

  .nav-telegram { justify-self: start !important; display: flex !important; }
  .nav-home { justify-self: center !important; display: flex !important; }
  .nav-shop { justify-self: center !important; display: flex !important; }
  .nav-cart { justify-self: end !important; display: flex !important; }
  .nav-instagram { justify-self: end !important; display: flex !important; }

  .nav a {
    font-size: 0.83rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }
}