/** Shopify CDN: Minification failed

Line 15:0 Unexpected "{"
Line 15:1 Expected identifier but found "%"
Line 16:18 Unexpected "{"
Line 16:27 Expected ":"
Line 22:18 Unexpected "{"
Line 22:27 Expected ":"
Line 27:0 Unexpected "{"
Line 27:1 Expected identifier but found "%"
Line 278:0 Unexpected "}"
Line 552:0 Unexpected "("

**/
{%- style -%}
#shopify-section-{{ section.id }} .ticker {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}
#shopify-section-{{ section.id }} .ticker__text {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: .3px !important;
}
{%- endstyle -%}



/* Tight labels – keine überschüssige Höhe */
.label{
  display: inline-flex !important;         /* statt block */
  align-items: center !important;          /* vertikal zentriert */
  justify-content: center !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;               /* Zeilenhöhe neutralisieren */
  font-size: 10px !important;
  padding: 2px 6px !important;             /* nur das gewollte Padding */
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Falls das Theme irgendwas dazuschmuggelt */
.label *{ line-height: 1 !important; }
.label::before,
.label::after{ content: none !important; }

/* Farben (optional, wie gehabt) */
.label--new { background:#145b4d !important; color:#fff !important; }
.label--hot { background:#e63946 !important; color:#fff !important; }
.label--sale{ background:#ffcc00 !important; color:#000 !important; }
.label--b2g3 { background:#1a1a1a !important; color:#fff !important; }
/* Respektiere Theme-Hiding */
.d-none-important { display: none !important; }


.cart-reserve{
  background:#f7f7f7;
  border:1px solid #eee;
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0 18px;
  font-size:14px;
  display:flex;
  gap:8px;
  align-items:center;
}
.cart-reserve b{ font-variant-numeric:tabular-nums; }
.cart-reserve.hidden{ display:none; }






/* === Announcement Bar (header__tape) – kleiner & schlanker === */
.header__tape .text-center{
  font-size: 12px !important;    /* mobil */
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
}

@media (min-width: 992px){
  .header__tape .text-center{ font-size: 13px !important; }
}

/* Weniger Höhe/Padding */
.header__tape{ padding-top: 4px !important; padding-bottom: 4px !important; }
.header__tape .px-35{ padding-left: 10px !important; padding-right: 10px !important; }
.header__tape .px-30{ padding-left: 10px !important; padding-right: 10px !important; }

/* Notbremse: falls das Theme eine CSS-Variable nutzt */
.header__tape{ --tape-font-size: 12px !important; }
@media (min-width: 992px){
  .header__tape{ --tape-font-size: 13px !important; }
}

/* Ultimatives Fallback – erzwingt kleinere Schrift überall in der Leiste */
.header__tape, .header__tape *{
  font-size: 12px !important;
  line-height: 1.2 !important;
}
@media (min-width: 992px){
  .header__tape, .header__tape *{ font-size: 13px !important; }
}


/* Avatar/Profilbild in Judge.me Reviews ausblenden */
.jdgm-rev__avatar,
.jdgm-rev__avatar-wrapper,
.jdgm-rev__avatar-wrapper img,
.jdgm-rev__profile-pic {
  display: none !important;
  visibility: hidden !important;
}

/* Kopfzeile der Review ohne Avatar sauber ausrichten */
.jdgm-rev__header {
  gap: 0 !important;
  align-items: flex-start !important;
  padding-left: 0 !important;
}

/* Falls irgendwo noch Platz reserviert wird */
.jdgm-rev {
  grid-template-columns: 1fr !important;
}






/* === Modell-Filter (Dropdown) – überarbeitet === */
.section.model-filter-bar .model-filter-bar-wrapper {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Innenabstände angepasst – nicht mehr so nah am Rand */
.section.model-filter-bar .model-filter-bar.container {
  max-width: var(--page-width, 1200px);
  padding-left: clamp(18px, 3vw, 30px);
  padding-right: clamp(18px, 3vw, 30px);
  gap: 10px;
  display: flex;
  align-items: center;
}

/* Label klarer & mittig auf Linie mit Select */
.section.model-filter-bar label {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

/* Select exakt wie Produktmodell unten – eckig, zentriert, dünner */
.section.model-filter-bar .model-filter-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 420px;
  height: 38px;
  padding: 0 38px 0 12px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0; /* keine Rundung */
  background-color: #fff;
  font-size: 14px;
  line-height: 38px; /* Text exakt mittig */
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}

/* Einheitlicher Dropdown-Pfeil */
.section.model-filter-bar .model-filter-select {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Hover- und Fokuszustände */
.section.model-filter-bar .model-filter-select:hover {
  border-color: rgba(0,0,0,.28);
}
.section.model-filter-bar .model-filter-select:focus {
  outline: none;
  border-color: rgba(0,0,0,.45);
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}

/* Mobile: Label über dem Dropdown, saubere Abstände */
@media (max-width: 749px) {
  .section.model-filter-bar .model-filter-bar.container {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .section.model-filter-bar label {
    font-size: 13px;
  }

  .section.model-filter-bar .model-filter-select {
    height: 36px;
    line-height: 36px;
    border-radius: 0;
    font-size: 14px;
  }
}



/* MOBILE: Produktseite Feintuning */
 

  /* 1. Preis kleiner & dezenter (leicht grau) */
  .product-page-info__price .price {
    font-size: 16px;          /* vorher 24px */
    color: #777777;
    font-weight: 400;
  }

  /* 2. Produkttitel in GROSSBUCHSTABEN wie im Beispiel */
  .product-page-info__title h1 {
    text-transform: uppercase;
    letter-spacing: .08em;    /* bisschen Luxus-Spacing */
  }

  /* 3. Preis + Reviews (Judge.me) auf einer Linie */
  .product-page-info__price,
  .product-page-info__reviews {
    display: inline-flex;
    align-items: center;
    text-align: left;
    margin-bottom: 0;
  }

  .product-page-info__reviews {
    margin-left: 10px;        /* kleiner Abstand rechts vom Preis */
  }

  /* Judge.me Sterne stylen wie im Screenshot */
  .product-page-info__reviews .jdgm-widget,
  .product-page-info__reviews .jdgm-preview-badge,
  .product-page-info__reviews .jdgm-prev-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Sterne-Farbe & Größe */
  .product-page-info__reviews .jdgm-prev-badge__stars {
    font-size: 11px;
    color: #000000 !important;     /* oder #555555, wenn du’s noch dezenter willst */
  }

  /* Text "(5.0)" daneben */
  .product-page-info__reviews .jdgm-prev-badge__text {
    font-size: 11px;
    color: #777777;
  }
}

/* nur wenn direkt nach dem Preis eine Border kommt */
.product-page-info__price + .product-page-info__border {
  margin-top: 8px !important;
}





.label--personalisierbar { background: linear-gradient(135deg, #e5c27f, #c8a64c); }



/* ================================
   Produkttyp: Label ausblenden,
   Wert behalten + linksbündig
   ================================ */

/* Container linksbündig */
.product-page-info__details {
  text-align: left !important;
}

/* Text "PRODUKTTYP:" ausblenden */
[data-js-product-type] {
  font-size: 0;
}

/* Produkttyp-Wert wieder sichtbar machen */
[data-js-product-type] span,
[data-js-product-type] span a {
  font-size: 14px;   /* ggf. anpassen (z. B. 16px) */
  line-height: 1.4;
  text-align: left;
}





.mope-card.is-loading {
  opacity: .75;
  pointer-events: none;
}


#CollectionHeadingTop,
#CollectionHeadingProductsGridWidth,
#CollectionHeadingBottom {
  display: none !important;
}






/* =========================================================
   HOMEPAGE / LANDINGPAGE:
   Header transparent (auch Mobile) + weiße Icons + weißes LOGO
   Restliche Seiten bleiben normal (weiß + schwarz)
========================================================= */

/* 1) Landingpage: Farben auf WEISS (nur wenn Header NICHT sticky) */
body.template-index .header.header--transparent:not(.header--sticky) {
  --header-btns-d-c: #fff;
  --header-btns-d-h-c: #fff;

  --header-btns-line-1-d-c: #fff;
  --header-btns-line-1-d-h-c: #fff;

  --header-btns-line-2-d-c: #fff;
  --header-btns-line-2-d-h-c: #fff;

  --header-btns-m-c: #fff;

  --header-menu-d-c: #fff;
  --header-menu-h-c: #fff;

  --header-counter-d-c: #fff;
  --header-counter-d-h-c: #fff;
  --header-counter-line-1-d-c: #fff;
  --header-counter-line-2-d-c: #fff;
}

/* 2) Mobile: Transparenter Header Hintergrund NUR auf Landingpage */
@media (max-width: 1024px) {
  body.template-index .header.header--transparent:not(.header--sticky) .header__content,
  body.template-index .header.header--transparent:not(.header--sticky) .header__line-additional,
  body.template-index .header.header--transparent:not(.header--sticky) .header__line--colorize-1,
  body.template-index .header.header--transparent:not(.header--sticky) .header__line--colorize-2,
  body.template-index .header.header--transparent:not(.header--sticky) .header__nav {
    background: transparent !important;
    border-color: transparent !important;
  }
}

/* 3) LANDINGPAGE LOGO ERSETZEN (Desktop + Mobile)
      -> Normales Logo ausblenden und weißes PNG anzeigen */
body.template-index .header.header--transparent:not(.header--sticky) .header__logo .logo .rimage {
  display: none !important;
}

body.template-index .header.header--transparent:not(.header--sticky) .header__logo .logo a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* White Logo als Pseudo-Element */
body.template-index .header.header--transparent:not(.header--sticky) .header__logo .logo a::before {
  content: "";
  display: block;
  width: 100%;
  height: 42px;
  background: url("/cdn/shop/files/logowhitereallywhite.png?v=1768745610") center / contain no-repeat;
}

/* Mobile Logo Höhe etwas kleiner */
@media (max-width: 1024px) {
  body.template-index .header.header--transparent:not(.header--sticky) .header__logo .logo a::before {
    height: 48px;
  }
}

/* =========================================================
   MOBILE: Landingpage Logo größer machen (weißes Logo)
========================================================= */

@media (max-width: 1024px) {

  /* Logo-Container darf größer sein */
  body.template-index .header.header--transparent:not(.header--sticky) .header__logo,
  body.template-index .header.header--transparent:not(.header--sticky) .header__logo .logo,
  body.template-index .header.header--transparent:not(.header--sticky) .header__logo .logo a {
    max-width: none !important;
    width: auto !important;
  }

  /* Weißes PNG Logo größer machen */
  body.template-index .header.header--transparent:not(.header--sticky) .header__logo .logo a::before {
    width: 95px !important;     /* <<< DAS macht's wirklich größer */
    height: 44px !important;     /* <<< Höhe auch größer */
    background-size: contain !important;
  }

}



.collection-grid-insert__media {
  overflow: hidden;
  border-radius: 0px;
}

.collection-grid-insert__content p {
  opacity: 0.85;
}




/* FIX: Swatches sollen Farbe ODER Bild anzeigen (Circle + Square) */
.product-options__value--circle,
.product-options__value--square {
  background: var(--product-options-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* =========================================================
   GRID AUSREISSER (editorial)
   - Text unten links im Bild
   - Optional Preis oben rechts (Produkt-Highlight)
========================================================= */
.collection-grid-insert__media {
  position: relative;
}
.collection-grid-insert__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.collection-grid-insert__overlay-text {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.collection-grid-insert__overlay-kicker {
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.collection-grid-insert__overlay-main {
  font-size: 14px;
  font-weight: 600;
}
.collection-grid-insert__overlay-price {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.collection-grid-insert__price-compare {
  opacity: 0.7;
  text-decoration: line-through;
  font-weight: 500;
}
.collection-grid-insert__overlay--light {
  color: #fff;
}
.collection-grid-insert__overlay--dark {
  color: #111;
}
.collection-grid-insert__overlay.has-shadow .collection-grid-insert__overlay-text,
.collection-grid-insert__overlay.has-shadow .collection-grid-insert__overlay-price {
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.collection-grid-insert__overlay--dark.has-shadow .collection-grid-insert__overlay-text,
.collection-grid-insert__overlay--dark.has-shadow .collection-grid-insert__overlay-price {
  text-shadow: 0 2px 10px rgba(255,255,255,0.35);
}
@media (max-width: 767px) {
  .collection-grid-insert__overlay-text {
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
  }
  .collection-grid-insert__overlay-main {
    font-size: 13px;
  }
  .collection-grid-insert__overlay-price {
    right: 10px;
    top: 10px;
    font-size: 12px;
  }
}

/* Produktkarten: Titel etwas kleiner (Meta/Description bleibt wie bisher) */
.product-collection__title h4 {
  font-size: 14px;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .product-collection__title h4 {
    font-size: 13px;
  }
}


/* Optional: active state ebenfalls sauber */
.product-options__value--circle.active,
.product-options__value--square.active {
  background: var(--product-options-act-bg) !important;
}
/* Swatches LINKS ausrichten (dein echter Wrapper) */
.product-options__section[data-style="color"] {
  justify-content: flex-start !important;
}


(() => {
  const CSS = `
    /* Das Element, das unten rechts sitzt (der ganze Chat Host) */
    :host {
      right: 8px !important;
      bottom: 110px !important; /* ggf. anpassen wegen Safari/Bottom Bar */
    }

    /* Der Button selbst (Launcher) */
    button[data-spec="toggle-button"]{
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;

      padding: 0 !important;
      border-radius: 8px !important;     /* eckig/leicht rounded */
      box-shadow: none !important;       /* kein fetter Shadow */
      background: #fff !important;       /* Hintergrund */
      border: 1px solid rgba(0,0,0,.12) !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* Icon kleiner */
    button[data-spec="toggle-button"] svg{
      width: 14px !important;
      height: 14px !important;
    }

    /* Badge (die "1" etc.) kleiner / optional aus */
    span[data-spec="notification-badge"]{
      transform: scale(0.75) !important;
      transform-origin: top right !important;
    }
  `;

  function inject() {
    const el = document.querySelector('inbox-online-store-chat#ShopifyChat, shopify-chat#ShopifyChat, shopify-inbox#ShopifyChat');
    if (!el) return;

    const root = el.shadowRoot;
    if (!root) return;

    if (root.querySelector('#mini-chat-launcher-style')) return;

    const style = document.createElement('style');
    style.id = 'mini-chat-launcher-style';
    style.textContent = CSS;
    root.appendChild(style);
  }

  document.addEventListener('DOMContentLoaded', inject);
  new MutationObserver(inject).observe(document.documentElement, { childList: true, subtree: true });
})();