/** Shopify CDN: Minification failed

Line 31:0 Unexpected "}"

**/
.header__inline-menu .header__menu-item {
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: rgb(var(--color-foreground)); /* Textfarbe aus dem Farbschema */
  padding: 0 1.6rem;
}

/* Aktive Seite (z.B. Home) in der Navigation nicht mehr unterstreichen. */
.header__active-menu-item {
  text-decoration: none;
}

.header__inline-menu {
  grid-column: 2;
  justify-self: center;
}

.header__icons {
  grid-column: 3;
  justify-self: end;
}

/*
.header__inline-menu .header__menu-item:hover {
  color: var(--brand-gold-dark); /* Hover-Akzent in Gold dunkel */
}
*/

.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Höhe/Größe der Ankündigungsleiste */
.announcement-bar {
  padding-top: 2px;
  padding-bottom: 2px;
}

.announcement-bar__message,
.announcement-bar p {
  font-size: 1.5rem; /* Standard bei Dawn ist meist ~1.2–1.3rem */
}

/* Dawn setzt hier standardmäßig min-height:3.8rem + padding:1rem 0 - das
   macht die Leiste deutlich höher, als die Schriftgröße erfordert */
.announcement-bar__message {
  padding: 1rem 0;
  min-height: 0;
  line-height: 1.4;
}

/* Farbe direkt überschreiben, falls du keinen eigenen Color Scheme anlegen willst */
.utility-bar {
  background-color: var(--brand-gold);
}

.utility-bar--bottom-border {
  border-bottom: 0;
}

.announcement-bar__message,
.announcement-bar a,
.utility-bar__close {
  color: #ffffff;
}

/* Links in der Ankündigungsleiste nie unterstreichen (Dawn setzt beim Hovern eine Unterstreichung) */
.announcement-bar .announcement-bar__link,
.announcement-bar .announcement-bar__link:hover,
.announcement-bar .announcement-bar__link:focus,
.announcement-bar .announcement-bar__link:active {
  text-decoration: none;
}

/* Schließbare Ankündigungsleiste (X links, Text zentriert) wie bei Snocks mobile */
.utility-bar__grid {
  position: relative;
}

.utility-bar__close {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  padding: 0.8rem;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.utility-bar__close svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Swiper-Karussell der mehrteiligen Ankündigungsleiste */
.announcement-bar {
  /* Verhindert, dass sich das Grid-Item am ungewrappten Inhalt der
     nebeneinanderliegenden Swiper-Slides aufbläht (min-width:auto-Bug) */
  min-width: 0;
}

.announcement-bar .swiper {
  width: 100%;
}

/* Karussell über die volle Breite der Leiste laufen lassen, ohne die
   übliche Seitenpolsterung von .page-width */
.announcement-bar-section .utility-bar__grid.page-width {
  padding-left: 0;
  padding-right: 0;
}

.announcement-bar .swiper-slide {
  height: auto;
}

/* Mobiles Menü wie der Warenkorb-Drawer: nicht bildschirmfüllend, sondern
   max. 48rem breit mit 3rem Streifen am Rand, durch den die abgedunkelte Seite
   sichtbar bleibt (Werte aus .drawer__inner in component-cart-drawer.css).
   "header-drawer" im Selektor, damit die Regel component-menu-drawer.css schlägt,
   das erst nach dieser Datei geladen wird. */
header-drawer .menu-drawer {
  width: 48rem;
  max-width: calc(100vw - 3rem);
  border-width: 0 var(--drawer-border-width) 0 0;
  border-style: solid;
  border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
}

/* Abdunklung neben dem Menü. Liegt auf dem Menü-Button (summary), dadurch schließt
   ein Tipp auf die dunkle Fläche das Menü - wie beim Warenkorb. Dawn hat diese
   Regel nur für <menu-drawer>, nicht für <header-drawer>. */
.js header-drawer > details > summary::before {
  content: '';
  position: absolute;
  cursor: default;
  width: 100%;
  height: calc(100vh - 100%);
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  top: 100%;
  left: 0;
  background: rgba(var(--color-foreground), 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: opacity 0s, visibility 0s;
}

.js header-drawer > details[open].menu-opening > summary::before {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
}