/* =====================================================================
   brand.css – echtes Goldstudio-Logo + Kopfleiste
   Logo: Wort-/Bildmarke "GoldStudio jewellery" von gold-studio.de,
   per potrace nachgezeichnet (assets/brand/gs-logo*.svg, viewBox 989 x 319).
   Die Farbe kommt aus currentColor (Maske), dadurch folgt das Logo
   automatisch der Schriftfarbe der Leiste: Tinte auf hell, Platin auf dunkel.
   ===================================================================== */

.gs-logo {
  --gs-h: 28px;
  display: block; flex: none;
  height: var(--gs-h); width: calc(var(--gs-h) * 3.1003);
  background: currentColor;
  -webkit-mask: url("assets/brand/gs-logo.svg") center / contain no-repeat;
          mask: url("assets/brand/gs-logo.svg") center / contain no-repeat;
}

/* ---------- Kopfleiste: das Logo ersetzt die alte Wortmarke (links bzw. mobil mittig) ---------- */
.nav__mark { align-items: center; align-self: center; }
.nav__logo { --gs-h: 44px; opacity: .96; transition: opacity .3s; }
.nav__mark:hover .nav__logo { opacity: 1; }
.nav__cart, .nav__burger { flex: none; }
.nav__links a, .nav__cta { white-space: nowrap; }

@media (min-width: 1440px) { .nav__logo { --gs-h: 46px; } }
/* schmale Desktops: Warenkorb nur als Symbol, engere Abstände */
@media (min-width: 1080px) and (max-width: 1279px) {
  .nav { gap: 18px; }
  .nav__links { gap: 18px; }
  .nav__cart-t { display: none; }
  .nav__cart { padding: 0 10px; }
  .nav__logo { --gs-h: 40px; }
}

/* mobil: Warenkorb links | Logo exakt mittig | Menü rechts (gleich breite Seitenspalten) */
@media (max-width: 899px) {
  .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
  .nav__mark { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .nav__cart { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav__burger { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav__links, .nav__cta { display: none; }
  .nav__logo { --gs-h: 36px; }
}
@media (max-width: 360px) {
  .nav { gap: 8px; }
  .nav__logo { --gs-h: 32px; }
}

/* ---------- Sticky-Leiste auf allen Breiten: dunkel, leicht transparent, mit Unschärfe ---------- */
.nav.is-hidden { transform: none; }      /* Leiste bleibt beim Scrollen immer stehen */
.nav.is-ink {
  background: rgba(5, 5, 5, .9);
  color: #F6F5F2;
  border-bottom-color: rgba(246, 245, 242, .08);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
          backdrop-filter: saturate(1.2) blur(14px);
}
.nav.is-ink .nav__cta { background: #F6F5F2; color: #050505; }
.nav.is-ink .nav__cta:hover { background: var(--champ); color: #050505; }
.nav.is-ink .nav__cart:hover { background: #F6F5F2; color: #050505; border-color: #F6F5F2; }
.nav.is-ink .nav__cart b { background: #F6F5F2; color: #050505; box-shadow: none; opacity: 1; }
.nav.is-ink .nav__cart:not(.has-items) b { background: transparent; color: #F6F5F2; box-shadow: inset 0 0 0 1px rgba(246, 245, 242, .7); }
.nav.is-ink .nav__logo { color: #EDEDEE; }  /* Platin, neutral */

/* ---------- Footer: Logo als Abschluss-Signet ---------- */
.foot__signet {
  display: flex; align-items: center; gap: 22px;
  margin-top: 44px;
}
.foot__signet::before, .foot__signet::after { content: ""; flex: 1; height: 0; background: none; }
.foot__logo {
  --gs-h: 50px;
  /* Platin-Schliff statt Gold */
  background: linear-gradient(100deg, #A9A9AC 0%, #F4F4F5 36%, #C4C4C6 60%, #EDEDEE 100%);
}
@media (min-width: 900px) { .foot__logo { --gs-h: 64px; } .foot__signet { margin-top: 56px; } }

/* Desktop: Navipunkte mittig zwischen Logo und Buttons rechts */
@media (min-width: 1080px) {
  .nav__mark { margin-right: 0; }
  .nav__links { margin-left: auto; margin-right: auto; }
}

/* Warenkorb nur als Symbol: runder Knopf, Anzahl als kleines Badge oben rechts */
.nav__cart-t { display: none !important; }
.nav__cart { position: relative; width: 44px; height: 44px; padding: 0 !important; justify-content: center; gap: 0; }
.nav__cart svg { width: 20px; height: 20px; }
.nav__cart b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }
.nav__cart:not(.has-items) b { display: none; }

/* Im Hero noch keine dunkle Leiste: transparent, über dem Video helle Schrift */
.nav:not(.is-ink), .nav.is-mdark:not(.is-ink), .nav.is-solid:not(.is-ink) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-mdark:not(.is-ink):not(.is-vid) { color: var(--ink); }
.nav.is-vid:not(.is-ink) { color: #F6F5F2; }
.nav.is-vid:not(.is-ink) .nav__logo { color: #F6F5F2; }
.nav.is-vid:not(.is-ink) .nav__cta { background: #F6F5F2; color: #050505; }
.nav.is-vid:not(.is-ink) .nav__cart b { color: #F6F5F2; }