/** Shopify CDN: Minification failed

Line 502:15 Unexpected "{"
Line 502:24 Expected ":"
Line 509:15 Unexpected "{"
Line 509:24 Expected ":"
Line 514:15 Unexpected "{"
Line 514:24 Expected ":"
Line 1393:5 Unexpected "{"
Line 1393:14 Expected ":"
Line 1551:5 Unexpected "{"
Line 1551:14 Expected ":"
... and 22 more hidden warnings

**/
/* =======================================
   FIGURENWELT – CUSTOM CART STYLING
   ======================================= */

/* Grundschrift im Drawer */
#PrestigeCart-cart-drawer {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
}

/* ---------- oberer blauer Balken ---------- */

#PrestigeCart-cart-drawer .cart-hd {
  background-color: #001a3d !important;   /* dein Dunkelblau */
  color: #ffffff !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
}

/* Titel & Count im blauen Balken ausblenden
   -> „Warenkorb / 1 Position“ nur unten im weißen Bereich */
#PrestigeCart-cart-drawer .cart-hd .cart-title,
#PrestigeCart-cart-drawer .cart-hd .cart-count {
  display: none !important;
}

/* ---------- Weißer Bereich: großer Warenkorb-Titel ---------- */

#PrestigeCart-cart-drawer .cart-title-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 24px 8px 24px;
  border-bottom: 1px solid #e5e5e5;
}

#PrestigeCart-cart-drawer .cart-title-main .title-text {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}

#PrestigeCart-cart-drawer .cart-title-main .title-count {
  font-size: 14px;
  font-weight: 500;
  color: #666666;
  margin: 0;
}
/* Produktseite: zentriertes Logo oben */
.product-logo-banner {
  width: 100%;
  text-align: center;
  padding-top: 40px;
  margin-bottom: 40px;
  z-index: 100;
}

.product-logo-banner img {
  max-width: 220px;
  height: auto;
  opacity: 0.95;
}


/* ---------- Produktkachel (bis unter den Preis) ---------- */

/* komplettes Item */
#PrestigeCart-cart-drawer .cart-item {
  padding: 18px 24px 18px 24px !important;
}

/* Bildbereich links */
#PrestigeCart-cart-drawer .cart-thumb {
  width: 90px !important;
  max-width: 90px !important;
  height: 90px !important;
  background: #f5f5f5 !important;
  border-radius: 8px !important;
  border: 1px solid #e0e0e0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#PrestigeCart-cart-drawer .cart-thumb img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Textbereich rechts neben dem Bild */
#PrestigeCart-cart-drawer .cart-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Produkttitel (fett, wie links) */
#PrestigeCart-cart-drawer .cart-item-title,
#PrestigeCart-cart-drawer .cart-item__title,
#PrestigeCart-cart-drawer .cart-item a {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #000000 !important;
  text-decoration: none !important;
}

/* kleine Infos (Produkt-Nr., Zusatztext) */
#PrestigeCart-cart-drawer .cart-item small,
#PrestigeCart-cart-drawer .cart-item__meta,
#PrestigeCart-cart-drawer .cart-item__subtitle {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #777777 !important;
}

/* Lieferzeit(raum) */
#PrestigeCart-cart-drawer .cart-item__delivery-label {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #777777 !important;
}

/* „Anzahl“-Label */
#PrestigeCart-cart-drawer .cart-item__quantity-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  color: #000000 !important;
}

/* Menge + +/- Buttons */
#PrestigeCart-cart-drawer .quantity,
#PrestigeCart-cart-drawer .quantity-selector {
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Preis unten rechts */
#PrestigeCart-cart-drawer .cart-item__price,
#PrestigeCart-cart-drawer .cart-item__final-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-align: right;
}

/* dünne Linie unter dem Produkt (wie links) */
#PrestigeCart-cart-drawer .cart-item + .cart-item {
  border-top: 1px solid #e5e5e5 !important;
}
/* === Abstand zwischen Titel und Produkt im Cart-Drawer korrigieren === */

/* Container, in den die Produkte per JS gerendert werden */
#PrestigeCart-cart-drawer .cart-items {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Sicherheitshalber auch Karteneigener Abstand */
#PrestigeCart-cart-drawer .cart-item {
  margin-top: 0 !important;
}
/* ===== Lücke zwischen Titel und Produkt schließen ===== */

/* Cart-Panel: Elemente nicht über die volle Höhe verteilen */
#PrestigeCart-cart-drawer .cart-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;  /* NICHT space-between */
  align-items: stretch !important;
}

/* Items sollen sich wie normaler Block verhalten, nicht strecken */
#PrestigeCart-cart-drawer .cart-items {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Falls das Theme den ersten Cart-Item noch nach unten drückt */
#PrestigeCart-cart-drawer .cart-item {
  margin-top: 0 !important;
}
#PrestigeCart-cart-drawer .cart-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
#PrestigeCart-cart-drawer .cart-item-title,
#PrestigeCart-cart-drawer .cart-item__title,
#PrestigeCart-cart-drawer .cart-item a {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #000000 !important;
    width: 100% !important;
    display: block !important;
    margin-top: 4px !important;
}
#PrestigeCart-cart-drawer .cart-item__price,
#PrestigeCart-cart-drawer .cart-item__final-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}


/* =======================================
   FEINTUNING PRODUKTANZEIGE IM CART
   ======================================= */

/* 1. Layout: Bild oben, Text darunter */
#PrestigeCart-cart-drawer .cart-items .cart-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#PrestigeCart-cart-drawer .cart-items .cart-item > .cart-thumb {
  margin-bottom: 6px !important;
}

#PrestigeCart-cart-drawer .cart-items .cart-item > .cart-meta {
  width: 100% !important;
}

/* 2. Produkttitel unter dem Bild, fett & größer */
#PrestigeCart-cart-drawer .cart-meta a:first-child,
#PrestigeCart-cart-drawer .cart-meta .cart-item__title,
#PrestigeCart-cart-drawer .cart-meta .cart-item-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #000000 !important;
  display: block !important;
  margin-top: 2px !important;
}

/* 3. Preis fett + Eurozeichen hinten */
#PrestigeCart-cart-drawer .cart-item__price,
#PrestigeCart-cart-drawer .cart-item__final-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

/* =======================================
   FIGURENWELT – PRODUKTANZEIGE IM CART
   ======================================= */

/* Bild + Inhalt untereinander statt nebeneinander */
#PrestigeCart-cart-drawer .cart-items > .cart-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Abstand unter dem Bild */
#PrestigeCart-cart-drawer .cart-items > .cart-item > .cart-thumb {
  margin-bottom: 8px !important;
}

/* Produkttitel (div.cart-name) – fett, größer, unter dem Bild */
#PrestigeCart-cart-drawer .cart-items > .cart-item .cart-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #000000 !important;
  margin: 0 0 4px 0 !important;
}

/* Preis fett */
#PrestigeCart-cart-drawer .cart-items > .cart-item .cart-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

/* =======================================
   FIGURENWELT – HEADER & ABSTÄNDE IM CART
   ======================================= */

/* Blaues Header-Band: Icon ausblenden, "Weiter einkaufen" anzeigen */
#PrestigeCart-cart-drawer .cart-hd {
  justify-content: space-between !important;
  position: relative;
}

/* Warenkorb-Icon links verstecken */
#PrestigeCart-cart-drawer .cart-hd .cart-icon {
  display: none !important;
}


#PrestigeCart-cart-drawer .cart-title-main {
  margin-top: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 8px !important;
}

/* "1 Position" etwas kleiner */
#PrestigeCart-cart-drawer .cart-.btn--add-to-cart {
  background-color: #d4a017; /* Jedi Gold */
  color: #000;
}
.btn--add-to-cart:hover {
  background-color: #f0b429;
}
-main .title-count {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* "Anzahl" etwas kleiner */
#PrestigeCart-cart-drawer .cart-item__quantity-label {
  font-size: 12px !important;
  font-weight: 600 !important;
}
/* =======================================
   HARD OVERRIDES HEADER & ABSTÄNDE CART
   ======================================= */


/* Titelzeile "Warenkorb | 1 Position" direkt unter dem Balken */
.cart-title-main {
  margin-top: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

/* "1 Position" etwas kleiner */
.cart-title-main .title-count {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* "Anzahl" etwas kleiner */
.cart-item__quantity-label {
  font-size: 12px !important;
  font-weight: 600 !important;
}
/* ==========================================
   HARD FIX — CART HEADER REBUILD
   ========================================== */

#PrestigeCart-cart-drawer .custom-cart-hd {
    background: #001a3d !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Linker Text: „Weiter einkaufen“ */
#PrestigeCart-cart-drawer .custom-cart-hd .back-to-shop {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

/* Close-Button rechts */
#PrestigeCart-cart-drawer .custom-cart-hd .cart-close svg {
    stroke: #ffffff !important;
}

/* Den ursprünglichen Header vollständig entfernen */
#PrestigeCart-cart-drawer .cart-hd:not(.custom-cart-hd) {
    display: none !important;
}
#PrestigeCart-cart-drawer .custom-cart-hd .cart-close {
    display: none !important;
}
#PrestigeCart-cart-drawer .back-to-shop {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

#PrestigeCart-cart-drawer .back-to-shop .back-arrow {
    stroke: #ffffff !important;
}
/* Linkes Euro-Zeichen vor dem Preis im Warenkorb entfernen */
#PrestigeCart-cart-drawer .cart-item__price span::before,
#PrestigeCart-cart-drawer .cart-item__final-price span::before {
    content: "" !important;
    display: none !important;
}
/* Entfernt € vor der Gesamtsumme */
#PrestigeCart-cart-drawer .cart-ft span:last-child::before {
    content: "" !important;
}
/* Erfolgsleiste im Cart ausblenden, damit alles direkt unter dem blauen Balken sitzt */
#PrestigeCart-cart-drawer .cart-success {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
#PrestigeCart-cart-drawer .cart-title-main .title-count {
    font-size: 13px !important; /* kleiner */
    font-weight: 400 !important; /* dünner */
    color: #777777 !important;   /* hellgrau */
    margin-top: 4px !important;
}
#PrestigeCart-cart-drawer .cart-title-main .title-count {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}
#PrestigeCart-cart-drawer .cart-title-main .title-count {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #666666 !important;  /* schönes neutrales Grau */
}
/* Menge-Zeile: Label links, Box rechts */
#PrestigeCart-cart-drawer .cart-qtyline {
  display: flex !important;
  align-items: center !important;
}

/* Die Box (– 1 +) nach rechts schieben */
#PrestigeCart-cart-drawer .cart-qtyline .cart-qty {
  margin-left: auto !important;
}
/* === CART-QTY endlich beweglich machen === */

#PrestigeCart-cart-drawer .cart-qty {
    min-width: unset !important;
    width: auto !important;
    margin-left: auto !important;   /* schiebt den ganzen Block nach rechts */
    border-radius: 12px !important; /* optional: Form ändern */
    background: #fafafa !important;
}
#PrestigeCart-cart-drawer .cart-qty button,
#PrestigeCart-cart-drawer .cart-qty input {
    margin: 0 !important;
}
/* ========================
   Menge-Block nach rechts
   ======================== */

/* Container von "Anzahl" + +/- Box */
#PrestigeCart-cart-drawer .cart-qtyline {
  display: flex !important;
  justify-content: flex-end !important;  /* alles nach rechts schieben */
  align-items: center !important;
}

/* Abstand zwischen "Anzahl" und der Box */
#PrestigeCart-cart-drawer .cart-qtyline .cart-label {
  margin-right: 12px !important;
}
/* =========================
   FIGURENWELT – Menge rechts
   ========================= */

/* Zeile "Anzahl  [ - 1 + ]" als Flex:
   Label links, Kasten rechts */
#PrestigeCart-cart-drawer .cart-qtyline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Der weiße Mengen-Kasten soll ganz nach rechts rutschen */
#PrestigeCart-cart-drawer .cart-qtyline .cart-qty {
    margin-left: auto !important;
}

/* (Optional) Kasten eckig lassen – falls noch nicht drin */
#PrestigeCart-cart-drawer .cart-qtyline .cart-qty {
    border-radius: 0 !important;
}
/* Qty row */
#PrestigeCart-{{ section.id }} .cart-qtyline{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
}

#PrestigeCart-{{ section.id }} .cart-qtyline .cart-label{
  flex:0 0 auto;
}

/* Menge-Kasten [ - 1 + ] ganz nach rechts */
#PrestigeCart-{{ section.id }} .cart-qty{
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #cfcfcf;
  border-radius:0;          /* eckig lassen */
  width:auto;
  min-width:114px;
  background:#fafafa;
  margin-left:auto;         /* schiebt die ganze Box an den rechten Rand */
}
/* ========================
   FIX: Titel wieder links
   ======================== */

/* Gesamter Meta-Block links ausrichten */
#PrestigeCart-cart-drawer .cart-meta {
    text-align: left !important;
}

/* Produkttitel links lassen */
#PrestigeCart-cart-drawer .cart-name {
    text-align: left !important;
}

/* Untertitel links lassen */
#PrestigeCart-cart-drawer .cart-sub {
    text-align: left !important;
}

/* Lieferzeit links lassen */
#PrestigeCart-cart-drawer .cart-infline {
    justify-content: flex-start !important;
}

/* Menge bleibt rechts */
#PrestigeCart-cart-drawer .cart-qtyline {
    display: flex !important;
    justify-content: space-between !important;
}
/* ===============================
   FIGURENWELT – Remove-X oben rechts beim Bild
   =============================== */

#PrestigeCart-cart-drawer .cart-item {
    position: relative !important;
}

#PrestigeCart-cart-drawer .cart-remove {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    background: transparent !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #000 !important;
    z-index: 20 !important;
}
/* ==== Figurenwelt: FIX — Checkout-Button nicht kleben ==== */
#PrestigeCart-cart-drawer .cart-ft,
#PrestigeCart-cart-drawer .cart-ft-bottom,
#PrestigeCart-cart-drawer .cart-pay {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
}
/* Platz damit der Button nicht abgeschnitten ist */
#PrestigeCart-cart-drawer .cart-items {
    padding-bottom: 40px !important;
}/* Scrollfix – nur Inhalt scrollen, Footer nicht fest */
#PrestigeCart-cart-drawer .cart-panel {
    overflow-y: hidden !important;
}
#PrestigeCart-cart-drawer .cart-items {
    overflow-y: auto !important;
    max-height: calc(100vh - 210px) !important;
}

/* ===== Figurenwelt: Kleinere Höhe für die Quantity-Box ===== */
#PrestigeCart-cart-drawer .cart-qty {
  height: 38px !important;      /* vorher 36–40px → jetzt kompakter */
  min-height: 38px !important;
  border-radius: 6px !important; /* etwas kantiger wie der gelbe Button */
}

#PrestigeCart-cart-drawer .cart-qty button {
  height: 38px !important;
  width: 34px !important;
  font-size: 16px !important;
  line-height: 38px !important;
}

#PrestigeCart-cart-drawer .cart-qty input {
  height: 38px !important;
  line-height: 38px !important;
  font-size: 16px !important;
}
#PrestigeCart-cart-drawer .cart-qty {
  height: 36px !important;     /* Deine neue, schlankere Höhe */
  display: flex;
  align-items: center;          /* Vertikale Zentrierung */
}

#PrestigeCart-cart-drawer .cart-qty button {
  height: 100% !important;      /* Füllt die Box komplett */
  display: flex;
  align-items: center;
  justify-content: center;      /* Zentriert das Symbol auch horizontal */
  padding: 0 !important;
  line-height: normal !important;
}

#PrestigeCart-cart-drawer .cart-qty input {
  height: 100% !important;
  line-height: normal !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#PrestigeCart-cart-drawer .cart-qtyline .cart-label {
  font-size: 14px !important;
}
#PrestigeCart-cart-drawer,
#PrestigeCart-cart-drawer * {
    font-family: sans-serif !important;
}
#PrestigeCart-cart-drawer .cart-sku {
    margin-top: 0 !important;
}
#PrestigeCart-cart-drawer .cart-thumb {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
#PrestigeCart-cart-drawer .cart-thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.cart-free-text {
  font-size: 14px;
  margin: 15px 0 5px 0;
  font-weight: 600;
}

.cart-free-bar {
  width: 100%;
  height: 6px;
  background: #e5e5e5;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 15px;
}

.cart-free-fill {
  height: 100%;
  background: #FFD700;
  border-radius: 50px;
  transition: width 0.4s ease;
}
.cart-free-text {
    font-weight: 400 !important;
}
 :root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;

  /* Farbpalette Jedi World */
  --jedi-bg: #f3f4ff;          /* sehr helles Blau für Flächen */
  --jedi-card: #ffffff;        /* Karten / Boxen */
  --jedi-accent:rgb(198, 205, 211);      /* dein Button-Blau */
  --jedi-accent-soft: #e0e7ff; /* leichte Akzent-Flächen / Linien */
  --jedi-text-main: #111827;   /* Haupttext */
  --jedi-text-muted: #4b5563;  /* dezentere Texte */

}
/* Eurozeichen hinter Preis – Produktseite */
.product__price,
.product__price span,
.price--large,
.price-item {
    font-weight: 700 !important;     /* Preis wieder fett */
}

.product__price .price-item,
.price--large .price-item,
.price-item {
    display: inline-flex;
    flex-direction: row;             /* Preis + Euro hintereinander */
}

.price-item::after {
    content: " €";                   /* Euro hinter Preis */
    font-weight: 700 !important;     /* Sternchen / Euro ebenfalls fett */
}
.price-item .price-item__currency {
    display: none !important;
}
/* ==== Figurenwelt: Eurozeichen hinter den Preisen auf Produktseite ==== */
.pd-info__price {
    font-weight: 700 !important; /* dick */
    font-size: 26px !important;  /* gleiche Größe wie vorher */
}

.pd-info__price .money {
    font-weight: 700 !important; /* Preis bleibt fett */
}

/* €-Zeichen nach hinten setzen */
.pd-info__price .money:before {
    content: ""; /* Standard-EURO VORNE ENTFERNEN */
}

.pd-info__price .money:after {
    content: " €"; /* Eurozeichen HINTEN */
    font-weight: 700 !important;
}
/* ==== Figurenwelt: Eurozeichen hinter den Preisen (Produktseite) ==== */
.pd-info__price {
    font-weight: 700 !important;
    font-size: 26px !important;
}

.pd-info__price .money:before {
    content: ""; /* entfernt das Shopify-€ vorne */
}

.pd-info__price .money:after {
    content: " €"; /* setzt neue Eurozeichen hinten */
    font-weight: 700 !important;
}
/* EVP-Info-Icon neben Vergleichspreis */
.pd-info__compare .evp-price {
  font-size: 17px;
  font-weight: 400;
  color: #888;
}

/* kleiner Kreis mit i */
.pd-info__compare .evp-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #000;
  font-size: 13px;
  line-height: 1;     /* verhindert, dass das i nach oben gedrückt wird */
  position: relative;
  top: 1px;           /* 1–2px nach unten, damit es mittig sitzt */
  cursor: default;
}

/* Tooltip-Bubble */
.pd-info__compare .evp-tooltip {
  position: absolute;
  left: 50%;
  top: 120%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 260px;
  padding: 10px 12px;
  background: #000;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 50;
  white-space: normal;
}

/* kleiner Pfeil unter dem Tooltip */
.pd-info__compare .evp-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #000;
}

/* Tooltip nur beim Hover anzeigen */
.pd-info__compare .evp-info:hover .evp-tooltip {
  opacity: 1;
}
.pulse-dot {
  color: #4CAF50;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -3px; /* Punkt minimal höher */
  animation: pulse 1.2s infinite ease-in-out;
  display: inline-block;
}

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.25); opacity: 0.75; }
  100% { transform: scale(1); opacity: 1; }
}
/* Hauptpreis – immer groß & fett */
.pd-info__price {
  font-size: 30px;
  font-weight: 700;
  color: #000000;
}

/* Hauptpreis ROT wenn Vergleichspreis existiert */
.has-compare .pd-info__price-main {
    color: #FF0000 !important;
}

/* Hauptpreis schwarz wenn KEIN Vergleichspreis */
.no-compare .pd-info__price-main {
    color: #000000 !important;
}
/* Wenn ein EVP/Streichpreis existiert: Hauptpreis knallrot */
.pd-info__price--sale {
  color: #ff0000;
}
/* Preisblock: EVP über dem Hauptpreis anordnen */
.pd-info__price-row {
  display: flex;
  flex-direction: column;   /* statt nebeneinander → untereinander */
  align-items: flex-start;  /* linksbündig */
  gap: 4px;                 /* kleiner Abstand zwischen EVP und Hauptpreis */
}

/* Sicherstellen, dass die Reihenfolge stimmt */
.pd-info__compare {
  order: 0;
}

.pd-info__price {
  order: 1;
}
/* Hauptpreis groß darstellen */
.pd-price-main {
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: inline-block;
}
/* Hauptpreis rot, wenn Vergleichspreis vorhanden */
.pd-info__price-sale .pd-price-main {
    color: #cc0000 !important; /* knallrot */
}
/* EVP schwarz */
.evp-price {
    color: #000 !important;
}

/* "i"-Icon schwarz */
.evp-info {
    color: #000 !important;
}

/* Der durchgestrichene Preis im EVP (s) auch schwarz */
.evp-price s {
    color: #000 !important;
}
/* EVP Text & Streichpreis – 16px */
.evp-price {
    font-size: 16px !important;
    color: #000 !important;
}

/* "i"-Icon passend dazu */
.evp-info {
    font-size: 16px !important;
    color: #ffffff !important;
}

/* Der durchgestrichene EVP-Preis */
.evp-price s {
    font-size: 16px !important;
    color: #ffffff !important;
}
/* ----------------------------- */
/*   EVP – Rabatt-Badge (-xx%)   */
/* ----------------------------- */

/* Rabatt-Badge neben EVP, z.B. -52% */
.evp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: #fff;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 3px;
}

/* EVP-Preis schwarz */
.evp-price {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
}

/* Info-Icon schwarz */
.evp-info {
  display: inline-block;
  font-size: 14px;
  color: #ffffff !important;
  margin-left: 4px;
  position: relative;
  cursor: pointer;
}

/* Tooltip */
.evp-tooltip {
  display: none;
  position: absolute;
  top: 18px;
  left: 0;
  background: #ffffff;
  color: #ffffff;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 20;
}

.evp-info:hover .evp-tooltip {
  display: block;
}
/* Hauptpreis */
.pd-price-main {
  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
}

/* Rot, wenn Vergleichspreis vorhanden */
.pd-price-main--sale {
  color: #e30613;
}

/* EVP-Zeile */
.evp-price {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

/* %-Badge */
.evp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  background: #ffffff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
  line-height: 1.6;
}

/* Info-Icon + Tooltip (hast du im Prinzip schon) */
.evp-info {
  margin-left: 6px;
  position: relative;
  display: inline-block;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
/* ===== EVP-Zeile: alles auf einer Linie ===== */
.evp-price {
  display: inline-flex;
  align-items: center;   /* alles vertikal mittig */
  gap: 6px;              /* kleiner Abstand zwischen Text, Badge und Icon */
}

/* Streichpreis direkt hinter "EVP" */
.evp-price s {
  margin-right: 4px;
}

/* Prozent-Badge */
.evp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  height: 18px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;        /* wichtig, damit es nicht nach oben/unten verrutscht */
}

/* Info-Icon „i“ */
.evp-info {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.evp-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 3px 6px;
  background: #e30613;
  color: #000;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
/* Abstand zwischen EVP und Hauptpreis entfernen */
.pd-info__price {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.pd-info__price {
  margin-top: -10px !important;
}
/* Info-Icon besser vertikal ausrichten */
.evp-info {
  display: inline-flex;
  align-items: center;     /* vertikal zentrieren */
  justify-content: center;
  margin-left: 6px;
}

.evp-info i {
  position: relative;
  top: 1px;                /* 1–2px nach unten je nach Optik */
  font-size: 13px;         /* optional minimal kleiner */
}
.evp-info svg {
  position: relative;
  top: 1.5px;              /* passt perfekt für typische SVG icons */
}
.pd-breadcrumbs {
  font-size: 14px;
  margin-bottom: 15px;
  color: #888;
}

.pd-breadcrumbs a {
  color: #666;
  text-decoration: none;
}

.pd-breadcrumbs a:hover {
  text-decoration: underline;
}

.pd-breadcrumbs-sep {
  margin: 0 6px;
  color: #aaa;
}

.pd-breadcrumbs-current {
  font-weight: 600;
  color: #ffffff;
}
.pd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 8px;
}

.pd-breadcrumb a,
.pd-breadcrumb span {
  white-space: nowrap;
}

.pd-breadcrumb__current {
  font-weight: 600;
  max-width: 280px;   /* Breite, ab der abgeschnitten wird */
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-info__vendor {
  display: flex;
  justify-content: flex-end; /* nach rechts */
  margin-bottom: 4px;        /* kleiner Abstand zum Titel */
}

.WEITERE INFORMATIONENgo {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}
.vendor-logo {
  display: block;
  margin-left: auto; /* schiebt das Logo nach rechts */
}
.vendor-logo {
  display: block;
  margin-left: auto; /* Logo rechtsbündig, wenn du willst */
}
.pd-info__vendor-logo-wrapper {
  display: flex;
  justify-content: flex-end; /* Logo nach rechts ziehen */
}
/* === MOBILE FIXES ========================================== */
@media (max-width: 768px) {

  /* Verhindert seitliches Scrollen */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Innenabstände für Mobil */
  .pd-prestige__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* Bilder dürfen nicht aus dem Bildschirm laufen */
  .pd-gallery__stage,
  .pd-gallery__thumbs {
    max-width: 100% !important;
    width: 100% !important;
  }

  .pd-gallery__stage img,
  .pd-gallery__thumbs img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }

  /* Produktinformationen rechts */
  .pd-info {
    max-width: 100% !important;
  }
}
/* --- INFO LIST STYLE --- */
.pd-info-benefits {
  margin-top: 12px;
  margin-bottom: 16px;
}

.pd-info-benefits li {
  list-style: none;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #333; /* Schwarz wie Beispiel */
  display: flex;
  align-items: flex-start;
}

.pd-info-benefits li::before {
  content: "✔";
  color: #4CAF50; /* Grün wie Beispiel */
  font-weight: 700;
  margin-right: 8px;
  font-size: 16px;
  margin-top: 2px;
}

.pd-info-benefits strong {
  font-weight: 700; /* Dick für Schlüsselwörter */
}
.pd-info__features {
  margin-bottom: 20px;
}

.pd-info__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pd-info__features-list li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.pd-info__features-icon {
  color: #4CAF50;
  font-size: 18px;
  margin-right: 6px;
}

.pd-info__features-list li strong {
  font-weight: 600;
}
/* Produkt-Feature-Liste unter dem Titel */
.pd-info__features {
  margin: 10px 0 20px;
}

.pd-info__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pd-info__features-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
  font-size: 14px;
  color: #777777; /* wie im Holz-Beispiel */
}

.pd-info__check {
  color: #4CAF50;          /* grüner Haken */
  font-size: 18px;
  margin-right: 6px;
  line-height: 1.2;
}
/* --- BENEFITS LIST FIX --- */
.pd-info-benefits li strong {
  color: #000000 !important;     /* schwarze fetten Wörter */
}

.pd-info-benefits .benefit-icon {
  color: #4CAF50 !important;     /* grüner Haken */
}
/* ✅ Produkt Feature Liste – Farben & Stil */
.pd-info__features-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 20px;
}

.pd-info__features-list li {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  color: #777777; /* Grauer Text wie im Kaminholz-Beispiel */
}

.pd-info__features-icon {
  color: #4CAF50; /* Kräftiges Grün für den Haken */
  font-size: 18px;
  margin-right: 6px;
  line-height: 1.2;
}

.pd-info__features-list li strong {
  color: #000000; /* Schwarze Fettschrift */
  font-weight: 600;
}
/* Produktseite: "In den Warenkorb"-Button wie Checkout-Button */
button.pd-cta.pd-cta--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  background: var(--color-primary);
  color: #f0b429;
  cursor: pointer;
}

button.pd-cta.pd-cta--primary:hover {
  background: var(--color-primary-hover, #001D3C);
}
/* Abstand zwischen "In den Warenkorb" und PayPal/Dynamic Checkout */
.pd-form button.pd-cta.pd-cta--primary {
  margin-bottom: 12px;
}

.pd-form .shopify-payment-button {
  margin-top: 4px;
}
/* Container der Animation */
.fw-cart-burst {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -10px);
}

/* Nur das schwarze Warenkorb-Icon, KEIN Kreis */
.fw-cart-burst-icon {
  font-size: 22px;
  color: #ffffff;
  line-height: 1;
}

/* Wrapper für die Strahlen */
.fw-cart-burst-lines {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Einzelne Strahlen – erst unsichtbar */
.fw-cart-burst-line {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;              /* Start: keine Länge */
  background: #ffffff;   /* Striche */
  transform-origin: left center;
  opacity: 0;            /* erst beim Explodieren sichtbar */
}

/* Wenn die Explosion startet, Strahlen animieren */
.fw-cart-burst--explode .fw-cart-burst-line {
  animation: fw-burst-line 0.35s ease-out forwards;
}

/* Strahlen schießen radial nach außen und verblassen */
@keyframes fw-burst-line {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: 18px;   /* Länge der Striche */
    opacity: 0;
  }
}
/* Stil für den "In den Warenkorb"-Button */
.btn--add-to-cart {
  background-color: #e53935;
  color: #fff;
  box-shadow: 0 0 12px rgba(229,57,53,0.6);
}
.btn--add-to-cart:hover {
  background-color: #ff4c4c;
  box-shadow: 0 0 16px rgba(255,76,76,0.8);
}

/* Produktbereich hervorheben (Bild + Infos) */
.pd-prestige_grid {
  background-color: var(--jedi-card);
  border-radius: 18px;
  padding: 24px 24px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Bullet-Liste (deine 4 Vorteile) leicht einfärben */
.pd-info__features-list {
  background-color: var(--jedi-accent-soft);
  border-radius: 12px;
  padding: 12px 18px;
}

/* Häkchen grün lassen, Textfarbe dezent anpassen */
.pd-info__features-list li {
  color: var(--jedi-text-muted);
}

.pd-info__features-list strong {
  color: var(--jedi-text-main);
}

/* Dein “IN DEN WARENKORB”-Button – Farbe wie gewünscht */
#PD-{{ section.id }} .pd-cta-primary,
.pd-cta-primary {
  background-color: #001d3c;
  color: #ffffff;
  border-color: #001d3c;
}

/* --- Jedi World Produktseite: weiße Schrift --- */
.template-product,
.template-product * {
  color: #ffffff !important;
}

/* Ausnahmen: Preise & Hervorhebungen (falls gewünscht) */
.template-product .price,
.template-product .price-item,
.template-product .price__regular,
.template-product .price__sale {
  color: #ff4040 !important; /* rote Preisfarbe */
}

.template-product .btn,
.template-product button {
  color: #ffffff !important;
}
.template-product a {
  color: #ffffff !important;
}
.template-product a:hover {
  opacity: 0.8;
}

/* =========================================
   JediWorld – Produkttitel auf Produktseite
   ========================================= */
body.template-product h1.pd-info__title,
body.template-product .pd-info__title {
  color: #ffffff !important;
}

/* EVP-Schrift weiß */
strong.evp-price {
  color: #ffffff !important;
}
/* Entfernt den "More payment options"-Link unter dem PayPal-Button */
#more-payment-options-link {
  display: none !important;
  visibility: hidden !important;
}

.pd-sku {
  color: #9fa1ad !important;
  font-size: 12px;
  margin-top: 6px;
}
/* Verfügbarkeits-Zeile */
.availability-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* Pulsierender Punkt */
.pulse-dot {
  font-size: 14px;
  animation: pulse 1.4s infinite;
}

/* Farben */
.pulse-dot--green {
  color: #00c851; /* oder dein Grün */
}

.pulse-dot--red {
  color: #ff4444;
}

/* Textfarbe hinter dem <strong> */
.availability-text {
  font-size: 14px;
  color: #9fa1ad;
}

.availability-text strong {
  color: #ffffff;
}

/* Pulse-Animation (zweite Version, leicht andere Werte) */
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}
/* Anzahl-Label weiß und fett */
.pd-qty__label {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px;
}
/* 🔥 Kauf-Button mit Glow-Effekt */
.product-form__submit,
button[name="add"],
.btn--add-to-cart {
  background-color:rgb(4, 129, 0) !important;
  color: #fff !important;
  border: none !important;
  text-transform: uppercase;
  font-weight: 1000;
  letter-spacing: 0.5px;
  box-shadow: 0 0 14px rgb(255, 255, 255);
  transition: all 0.25s ease-in-out;
}

.product-form__submit:hover,
button[name="add"]:hover,
.btn--add-to-cart:hover {
  background-color: #ff1a1a !important;
  box-shadow: 0 0 20px rgba(255, 26, 26, 0.9);
  transform: scale(1.02);
}
.pulse-dot {
  font-size: 16px;
  position: relative;
  top: 2px;
  animation: pulse 1.2s infinite;
}

.pulse-dot--green { color: #4CAF50; }
.pulse-dot--red   { color: #ff3b3b; }

.availability-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.availability-text strong {
  color: #ffffff;
}

/* Separater Bereich für die Produktbeschreibung unter dem Hero */
.product-description-section {
  background-color: #ffffff;      /* heller Bereich unten */
  color: #000000;
  padding: 40px 0 80px;
}

.product-description-section .pd-description {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}
.product-description-section {
  border-top: 1px solid rgba(255,255,255,0.08); /* wirkt wie Übergang vom dunklen Bereich */
}
/* Pulsierender Verfügbarkeits-Punkt */
#PD-{{ section.id }} .pulse-dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

#PD-{{ section.id }} .pulse-dot--green {
  background-color: #4caf50;
}

#PD-{{ section.id }} .pulse-dot--red {
  background-color: #ff5252;
}

/* Ring-Effekt */
#PD-{{ section.id }} .pulse-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: pd-pulse 1.4s infinite;
}

#PD-{{ section.id }} .pulse-dot--green::after {
  color: #4caf50;
}

#PD-{{ section.id }} .pulse-dot--red::after {
  color: #ff5252;
}

@keyframes pd-pulse {
  0%   { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}
button.pd-tab {
  font-size: 14px;   /* Standard */
  font-weight: 600;  /* Etwas fetter */
  letter-spacing: 0.5px; /* Optional, falls du mehr Abstand willst */
}
button.pd-tab.is-active {
  font-size: 15px;
  font-weight: 700;
  color: #00ff66;
}
/* Tabs im Produktbereich – Schriftgröße anpassen */
.pd-tabs button.pd-tab,
section.pd-tabs button.pd-tab {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Aktiver Tab (z. B. „BESCHREIBUNG“) */
.pd-tabs button.pd-tab.is-active {
  color: #000027 !important;
  border-bottom: 2px solid #00ff66;
}
/* Produktbeschreibungstext anpassen */
.pd-description p {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.6;
}

/* Als H2-Stil */
.pd-description h2 {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: none;
}
.pd-description p:first-of-type {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Produktseiten: Header komplett transparent,
   damit der Body-Hintergrund bis ganz nach oben durchläuft */
body.template-product header.hero-header,
body.template-product header.hero-header .page,
body.template-product header.site-header,
body.template-product header.site-header .page,
body.template-product .prestige-header-section {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Icons & Text im Header auf Produktseiten weiß */
body.template-product header.hero-header,
body.template-product header.hero-header .group,
body.template-product header.hero-header .primary-nav a,
body.template-product header.hero-header .ic,
body.template-product header.site-header,
body.template-product header.site-header .icon-tap {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

main[role="main"],
#MainContent {
  background: transparent !important;
}

/* Produktseiten: Header vorbereiten */
body.template-product header.hero-header {
  position: relative;
}

/* Produktseiten: Logo zentriert und über dem Header "schweben" lassen */
body.template-product header.hero-header .brand-desktop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  z-index: 30;
}

/* Optional: Logo etwas größer auf Produktseiten */
body.template-product header.hero-header .brand-logo {
  max-height: 80px;
}
/* --- Trennlinie bei Produktinfos in Gold einfärben --- */
.pd_info_separator {
  height: 2px !important;
  background-color: #c9a24a !important;
  margin: 10px 0 !important;
}
/* --- Produktinfo-Trennlinien gold einfärben --- */
.pd_info_separator,
.pd_info_separator::before,
.pd_info_separator::after {
  background-color: #c9a24a !important;
  border-color: #c9a24a !important;
}

.product__info-wrapper hr,
.product__info hr {
  background-color: #c9a24a !important;
  border-color: #c9a24a !important;
  color: #c9a24a !important;
}
/* Farbe der vier Bullet-Sätze anpassen */
.product__policies li {
  color: #d4af37 !important;
}

/* Optional: Häkchen ebenfalls einfärben */
.product__policies li::before {
  color: #d4af37 !important;
}
/* Textfarbe der vier Bullet-Sätze */
.product__info-container ul li {
  color: #d4af37 !important;
}

/* Häkchen ebenfalls in Gold einfärben */
.product__info-container ul li::before {
  color: #d4af37 !important;
}

/* Höhe des Produkt-Headers festlegen (nur, wenn du diese Section nutzt) */
#Header-header-product_page {
  height: 84px;
  display: flex;
  align-items: center;
}

#Header-header-product_page .header-product {
  height: 100%;
}

#Header-header-product_page .brand-desktop {
  height: 100%;
  display: flex;
  align-items: center;
}

#Header-header-product_page .brand-logo img {
  height: 60px;
  width: auto;
}

/* Abstand unter dem Header entfernen, damit das Bild direkt unter dem Header beginnt */
body.template-product #MainContent {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Sicherheitshalber: Header selbst transparent halten */
body.template-product .prestige-header-section,
body.template-product .prestige-header,
body.template-product .hero-header {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Desktop-Header + Mobile-Header auf Produktseiten */
body.template-product #Header-header-product .hero-header,
body.template-product #Header-header-product .site-header{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Falls das Sticky-Behaviour den Hintergrund wieder setzt */
body.template-product #Header-header-product.is-solid .hero-header,
body.template-product #Header-header-product.is-solid .site-header{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* === Jedi World – Produktseiten: Vollflächiger Hintergrund über Header + Body === */

body.template-product::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    url("/cdn/shop/files/A_digital_art_texture_image_features_a_deep_dark__png?v=1763919777"),
    radial-gradient(circle at 50% 0%, #071222 0%, #000000 70%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, center;
  background-size: 2200px auto, cover;
}

/* Sicherheitshalber: Produkt-Content ohne eigenen Hintergrund */
body.template-product main[role="main"] {
  background: transparent !important;
}

/* Pseudo-Elemente, die evtl. Balken erzeugen, neutralisieren */
body.template-product header.hero-header::before,
body.template-product header.hero-header::after,
body.template-product header.site-header::before,
body.template-product header.site-header::after {
  background: none !important;
  box-shadow: none !important;
}

/* ==== Produktseiten-Header komplett entfarben ===== */
body.template-product #Header-header-product,
body.template-product #Header-header-product * {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* eventuelle Farbvariablen dieser Sektion deaktivieren */
body.template-product #Header-header-product {
  --color-header: transparent !important;
  --color-background: transparent !important;
  --color-bg: transparent !important;
  --header-bg: transparent !important;
  --sticky-bg: transparent !important;
  --panel-bg: transparent !important;
  --hdr-bg: transparent !important;
}

/* Top-Header auf Produktseiten ausblenden/neutralisieren */
body.template-product .top-header {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* =========================================
   WICHTIG: Hero-Header auf Produktseiten transparent
   ========================================= */

body.template-product #Header-header-product .hero-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
/* === FORCE: Produktseiten-Header dauerhaft transparent === */

body.template-product #Header-header-product,
body.template-product #Header-header-product *,
body.template-product #Header-header-product .hero-header,
body.template-product #Header-header-product.is-solid .hero-header,
body.template-product #Header-header-product .site-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Sicherheitshalber: falls das JS später beim Scrollen überschreibt */
body.template-product [class*="hero-header"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* === Transparenter Header nur auf Produktseiten === */
.template-product .hero-header.hero-header--overlay-product {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 50;
}

/* Sobald gescrollt wird, wieder Farbe */
.template-product .hero-header.hero-header--overlay-product.hero-header--solid {
  background-color: #020617 !important; /* dein dunkles Blau */
  position: fixed;
  transition: background-color 0.3s ease;
}
/* =============================
   Produktseite: Banner-Hintergrund
   über Header + Produktbereich
   ============================= */

/* Körper der Produktseite vorbereiten */
body.template-product {
  position: relative;
  /* normale Hintergrundfarbe der Seite, wenn Banner „zu Ende“ ist */
  background-color: #000000;
}

/* Pseudo-Element als Banner-Hintergrund oben */
body.template-product::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  /* Höhe des Banners – nach Bedarf anpassen (z.B. 900–1100px testen) */
  height: 980px;

  /* DEIN BILD + Verlauf – nur im Banner-Bereich */
  background-image:
    url("/cdn/shop/files/Hintergrundbild_20.png?v=1764080439");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;

  z-index: -1;         /* hinter allem Inhalt */
  pointer-events: none;
}
/* =============================
   Produktseite: Header transparent
   ============================= */

/* alle üblichen Header-Wrapper auf der Produktseite erwischen */
body.template-product header,
body.template-product .header,
body.template-product .hero-header,
body.template-product .hero-header-product,
body.template-product .header.hero-header,
body.template-product .header.hero-header-product,
body.template-product .header::before,
body.template-product .header::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* sicherstellen, dass der Header über dem Banner liegt */
body.template-product .header,
body.template-product header {
  position: relative;
  z-index: 50;
}
/* Logo mittig oben */
.product-logo-banner {
  width: 100%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 50px;
  z-index: 100;
}

.product-logo-banner img {
  max-width: 220px;
  height: auto;
  opacity: 0.95;
}


/* Hintergrund bis ganz oben */
body.template-product::before {
  top: 0;
  height: 100vh; /* Banner reicht über gesamten Bildschirm */
  background-image: url("/cdn/shop/files/Hintergrundbild_20.png?v=1764080439");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
}

.template-product .product-logo-banner__img {
  max-width: 220px;
  height: auto;
}

.product-logo-banner {
  width: 100%;
  text-align: center;
  padding: 40px 0 24px; /* schiebt den Inhalt nach unten */
}
/* ===== Produktseite: zentriertes Logo + Content nach unten ===== */

/* Logo-Bereich oben */
body.template-product .product-logo-banner {
  width: 100%;
  position: relative;
  text-align: center;
  padding-top: 32px;      /* Abstand von oben */
  margin-bottom: 32px;    /* Abstand zum Produktbereich */
  z-index: 20;
}

body.template-product .product-logo-banner__img {
  max-width: 220px;
  height: auto;
  opacity: 0.95;
}

/* Produktbereich etwas nach unten schieben,
   damit er nicht mit dem Logo kollidiert */
body.template-product .pd-prestige {
  padding-top: 40px;
}
/* ===== DESKTOP-FIX: Zweispaltiges Layout wieder aktivieren ===== */
@media (min-width: 769px) {
  .pd-prestige__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    column-gap: 40px !important;
    align-items: flex-start;
  }

  /* Galerie links, Info rechts jeweils volle Spaltenbreite */
  .pd-prestige__grid .pd-gallery {
    width: 100% !important;
  }

  .pd-prestige__grid .pd-info {
    width: 100% !important;
  }

  /* Bühne der Galerie begrenzen, damit die Bilder nicht „explodieren“ */
  .pd-gallery__stage {
    max-width: 640px;
    margin: 0 auto;
  }

  .pd-gallery__stage img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}
/* === Anzahl + Warenkorb nebeneinander ==================== */

/* Gesamter Block (Label + Anzahl + Button) */
.template-product .pd-qty {
  display: flex;
  flex-wrap: wrap;          /* erlaubt, dass das Label in einer eigenen Zeile steht */
  gap: 12px;
  align-items: stretch;
}

/* "Anzahl"-Label soll über allem stehen */
.template-product .pd-qty_label {
  flex: 0 0 100%;           /* nimmt die komplette Breite */
  margin-bottom: 0;
}

/* Box mit Minus / Zahl / Plus = ca. 25% Breite */
.template-product .pd-qty_box {
  flex: 0 0 25%;
  max-width: 25%;
}

/* "In den Warenkorb" nimmt den restlichen Platz rechts */
.template-product .pd-cta.pd-cta-primary {
  flex: 1 0 0;
  width: 100%;
}

/* === Farben der Anzahl-Steuerung ========================= */

/* Zahl im Eingabefeld schwarz */
.template-product .pd-qty_input {
  color: #000 !important;
  background: #ffffff !important;
}

/* Plus/Minus-Buttons schwarz */
.template-product .pd-qty_btn {
  color: #000 !important;
  border-color: #000 !important;
}

/* Falls die Icons als SVG eingebunden sind */
.template-product .pd-qty_btn svg,
.template-product .pd-qty_btn path {
  fill: #000 !important;
  stroke: #000 !important;
}
/* === Breakpoint nach vorne ziehen: ab < 1490px nur noch Mobile-Header === */

/* Desktop ab 1490px Breite */
@media screen and (min-width: 1490px) {
  .header--desktop {
    display: flex !important;
  }
  .header--mobile {
    display: none !important;
  }
}

/* Darunter: nur noch Mobile-Ansicht */
@media screen and (max-width: 1489px) {
  .header--desktop,
  .jedi-topbar,
  .product-logo-banner,
  .fixed-top-right-banner,
  .fixed-top-left-banner {
    display: none !important;   /* Desktop-Header + Banner ausblenden */
  }

  .header--mobile {
    display: flex !important;   /* Mobile-Header erzwingen */
  }
}
/* =========================================
   PRODUKTSEITE – MOBILER HEADER FIX
   (Figurenwelt / Jedi-World)
   ========================================= */

/* Nur auf Produktseiten + nur bis 768px Breite */
@media (max-width: 768px) {

  /* 1. Desktop-Header auf Produktseiten mobil ausblenden,
        wir nutzen nur die mobile Variante (.site-header) */
  body.template-product #Header-{{ section.id }} .hero-header,
  body.template-product .prestige-header-section .hero-header {
    display: none !important;
  }

  /* 2. Mobile Header auf Produktseiten fixieren und sichtbar machen */
  body.template-product #Header-{{ section.id }} .site-header,
  body.template-product .prestige-header-section .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999 !important;

    /* Feste Hintergrundfarbe, damit er sich klar vom Hero-Bild abhebt */
    background: #020617 !important;          /* dunkles Blau/Schwarz */
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.35) !important;
  }

  /* 3. Icons & Text im mobilen Header auf Produktseiten weiß halten */
  body.template-product #Header-{{ section.id }} .site-header,
  body.template-product #Header-{{ section.id }} .site-header .icon-tap,
  body.template-product #Header-{{ section.id }} .site-header .brand,
  body.template-product #Header-{{ section.id }} .site-header .cart-badge,
  body.template-product .prestige-header-section .site-header,
  body.template-product .prestige-header-section .site-header .icon-tap,
  body.template-product .prestige-header-section .site-header .brand,
  body.template-product .prestige-header-section .site-header .cart-badge {
    color: #ffffff !important;
  }

  /* 4. Content nach unten schieben, damit er nicht unter dem fixen Header klebt
        (Höhe 56–64px je nach deiner Header-Höhe) */
  body.template-product main[role="main"],
  body.template-product #MainContent {
    padding-top: 64px !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 768px) {
  body.template-product #Header-header-product .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999 !important;
    background: #020617 !important;
  }
}
/* ================================
   MOBILE FIX – HEADER AUF PRODUKTSEITEN
   ================================ */
@media screen and (max-width: 768px) {

  body.template-product #Header-header-product,
  body.template-product header.hero-header,
  body.template-product header.site-header,
  body.template-product .prestige-header-section {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300 !important;
    background-color: #020617 !important;
  }

  body.template-product .header--mobile {
    display: flex !important;
    position: relative;
    z-index: 305 !important;
  }

  body.template-product #Header-header-product * {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.template-product #MainContent,
  body.template-product main[role="main"] {
    margin-top: 80px !important;
    padding-top: 0 !important;
  }

  body.template-product::before {
    position: fixed;
    z-index: -1 !important;
  }
}


/* =========================================================
   Featured Tab Collection – FINAL FIX (kein Crop)
   Bildfläche quadratisch, Bild immer vollständig (contain),
   Text darunter, keine Linien unter Badge
   ========================================================= */

.featured-tab-collection article.product.slider__slide {
  width: clamp(180px, 14vw, 260px) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.featured-tab-collection a.product__img {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Bildfläche (Quadrat) */
.featured-tab-collection .product__img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  background: transparent !important;
}

/* Bild IM Quadrat: immer vollständig sichtbar */
.featured-tab-collection .product__img-wrap img,
.featured-tab-collection img.img-main {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  display: block !important;
}

/* Badge clean */
.featured-tab-collection .badge,
.featured-tab-collection [class*="badge"] {
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.featured-tab-collection .badge::before,
.featured-tab-collection .badge::after {
  content: none !important;
}


/* =========================================================
   FTC – FINAL FIX (Desktop bleibt stabil, Mobile = Full-Width)
   Ziel:
   - Desktop: kein Rechts-Drift, Rahmen + Shadow bleiben sichtbar
   - Mobile (wenn Header auf Mobile geht): FTC-Block full-bleed,
     Slider/Track = volle Bildschirmbreite, keine Überlappung
   WICHTIG: Ganz ans ENDE deiner CSS-Datei setzen.
   ========================================================= */


/* ---------------------------------------------------------
   0) DESKTOP RESET: verhindert "100vw/calc" Drift aus alten Snippets
   (wir neutralisieren NUR für FTC)
--------------------------------------------------------- */
section[id^="FTC-"]{
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: visible !important; /* Shadow darf leben */
}

section[id^="FTC-"] .collection__container.page-width{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* Desktop-Padding wie gewünscht */
  padding-left: 70px !important;
  padding-right: 70px !important;

  box-sizing: border-box !important;
  overflow: visible !important; /* Shadow nicht schneiden */
}

@media (min-width: 1600px){
  section[id^="FTC-"] .collection__container.page-width{
    padding-left: 110px !important;
    padding-right: 110px !important;
  }
}

/* Slider/Track dürfen Shadow nicht abschneiden */
section[id^="FTC-"] .slider,
section[id^="FTC-"] .slider__viewport,
section[id^="FTC-"] .slider__wrapper{
  overflow: visible !important;
  max-width: 100% !important;
}

section[id^="FTC-"] .slider__track{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  /* Desktop-Gap */
  --gap: 28px !important;
  gap: var(--gap) !important;
  column-gap: var(--gap) !important;
}

/* Card-Style (Rahmen + Shadow) – gilt Desktop + Mobile */
section[id^="FTC-"] article.product.slider__slide{
  box-sizing: border-box !important;
}

section[id^="FTC-"] article.product.slider__slide > a.product__img{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  background: #fff !important;
  padding: 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(165, 130, 76, 0.45) !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.16),
    0 22px 48px rgba(0, 0, 0, 0.12) !important;

  overflow: visible !important;
}

/* Bild bleibt Quadrat + contain */
section[id^="FTC-"] article.product.slider__slide .product__img-wrap{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

section[id^="FTC-"] article.product.slider__slide .product__img-wrap img,
section[id^="FTC-"] article.product.slider__slide img.img-main{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  display: block !important;
}

/* Badge "Spare" aus */
section[id^="FTC-"] span.badge,
section[id^="FTC-"] span.badge--sale{
  display: none !important;
}


/* ---------------------------------------------------------
   1) MOBILE MODE (wenn Header auf Mobile geht)
   -> Full-Bleed Block + Track volle Breite + kein Überlappen
   HINWEIS: Breakpoint bewusst bei 1024, weil dein Header dort umschaltet.
--------------------------------------------------------- */
@media (max-width: 1024px){

  /* FTC Block full-bleed: wirklich bis an den Rand */
  section[id^="FTC-"]{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* Container ohne Innenpadding, damit der "blaue Block" bis an den Rand geht */
  section[id^="FTC-"] .collection__container.page-width{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  /* Slider darf horizontal scrollen, ohne Shadow zu killen */
  section[id^="FTC-"] .slider__viewport,
  section[id^="FTC-"] .slider__wrapper{
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Track: volle Breite + Padding für Shadow + sauberes Scroll-Snap */
  section[id^="FTC-"] .slider__track{
    display: flex !important;
    flex-wrap: nowrap !important;

    /* WICHTIG: das ist die "volle Breite" */
    width: 100% !important;
    max-width: 100% !important;

    /* Padding = Platz für Shadow links/oben/unten */
    padding: 14px 12px 22px 12px !important;

    /* kleineres Gap mobil */
    --gap: 14px !important;
    gap: var(--gap) !important;

    scroll-snap-type: x mandatory;
    box-sizing: border-box !important;
  }

  /* KEIN ÜBERLAPPEN: feste Slide-Breite + keine Transform-Spielchen */
  section[id^="FTC-"] article.product.slider__slide{
    flex: 0 0 auto !important;
    width: 78vw !important;
    max-width: 320px !important;
    position: relative !important;
    transform: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 360px){
  section[id^="FTC-"] article.product.slider__slide{
    width: 86vw !important;
  }
}
/* =========================================================
   FTC – SHADOW FIX (nur Shadow nicht mehr abschneiden)
   Ganz ans ENDE setzen.
   ========================================================= */

/* 1) Nichts darf den Shadow clippen (Slider/Viewport/Wrapper/Track) */
section[id^="FTC-"] .slider,
section[id^="FTC-"] .slider__viewport,
section[id^="FTC-"] .slider__wrapper,
section[id^="FTC-"] .slider__track{
  overflow: visible !important;
}

/* 2) In vielen Themes clippt ein "inner" Wrapper (bei dir: .collection__inner).
      Der muss ebenfalls overflow: visible bekommen. */
section[id^="FTC-"] .collection__inner,
section[id^="FTC-"] .collection__container,
section[id^="FTC-"] .collection__container.page-width{
  overflow: visible !important;
}

/* 3) Damit der Shadow links/oben Platz hat:
      Track bekommt ein kleines "Shadow-Padding" (Desktop + Mobile) */
section[id^="FTC-"] .slider__track{
  padding: 18px 18px 26px 18px !important; /* oben/rechts/unten/links */
  box-sizing: border-box !important;
}

/* 4) Falls irgendein Eltern-Element trotzdem noch clippt:
      auf FTC-Section selbst kein Clip/Hidden erzwingen */
section[id^="FTC-"]{
  overflow: visible !important;
}
/* =========================================================
   FTC – SHADOW FIX (OHNE Rechts-Overflow)
   Idee:
   - Slider bleibt "geclippt", damit nichts nach rechts rausläuft.
   - Der Shadow wird NICHT mehr außerhalb gerendert, sondern bekommt
     innen Platz durch PADDING am Slider (box-sizing: border-box).
   - Track bekommt KEIN Padding (Padding am Track macht oft Overflow).
   Ganz ans ENDE setzen und den vorherigen "SHADOW FIX" ersetzen.
   ========================================================= */

/* 0) FTC darf niemals horizontales Scrollen erzeugen */
section[id^="FTC-"]{
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 1) Slider: clippt nach außen (verhindert Rechts-Drift),
      ABER bekommt innen Luft für Schatten (oben/links/rechts/unten) */
section[id^="FTC-"] .slider{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  /* HIER kommt der Platz für den Shadow her */
  padding: 18px 18px 26px 18px !important;

  /* verhindert "geht rechts raus" */
  overflow: hidden !important;

  /* typische Theme-Offets killen */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) WICHTIG: Track darf KEIN Padding/Margin bekommen */
section[id^="FTC-"] .slider__track{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Manche Themes haben zusätzlich einen Viewport/Wrapper der clippt/zieht */
section[id^="FTC-"] .slider__viewport,
section[id^="FTC-"] .slider__wrapper{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important; /* ok, Slider selbst clippt sauber */
}
/* =========================================================
   FTC – MOBILE FULL BLEED + WISCHBAR
   Ziel:
   - Mobile: Section/Container geht bis an den Rand (kein grüner Rand)
   - Slider bleibt horizontal wischbar
   - Kein Layout-Drift auf Desktop (Desktop bleibt unberührt)
   ========================================================= */

/* NUR Mobile/Tablet – du kannst die Grenze bei Bedarf anpassen */
@media (max-width: 989px){

  /* 1) Page-Width Padding im FTC auf 0 -> kein "grüner Rand" mehr */
  section[id^="FTC-"] .collection__container.page-width{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Auch der innere Wrapper darf nichts wieder einrücken */
  section[id^="FTC-"] .collection__inner,
  section[id^="FTC-"] .collection__grid{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Slider muss wieder horizontal scrollen dürfen (wischbar) */
  section[id^="FTC-"] .slider{
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;

    /* optional: etwas Luft oben/unten ohne Rand links/rechts */
    padding-top: 10px !important;
    padding-bottom: 18px !important;

    /* scrollbar "clean" */
    scrollbar-width: none !important;        /* Firefox */
  }
  section[id^="FTC-"] .slider::-webkit-scrollbar{ display:none !important; } /* Chrome/Safari */

  /* 4) Track: als horizontale Reihe erzwingen + Snap */
  section[id^="FTC-"] .slider__track{
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;

    gap: 14px !important;
    column-gap: 14px !important;

    padding-left: 14px !important;   /* kleiner "safe inset" */
    padding-right: 14px !important;
    box-sizing: border-box !important;

    scroll-snap-align: start !important;
  }

  /* 5) Slides: feste Breite, damit nichts überlappt */
  section[id^="FTC-"] article.product.slider__slide{
    flex: 0 0 78% !important;  /* 1 Card groß sichtbar, nächste angeschnitten */
    max-width: 78% !important;
    scroll-snap-align: start !important;
  }

  /* 6) Shadow darf nicht abgeschnitten werden */
  section[id^="FTC-"] article.product.slider__slide > a.product__img{
    overflow: visible !important;
  }
}
/* =========================
   MOBILE: Featured Collection Full Width
   ========================= */
@media (max-width: 768px) {

  /* äußeren Page-Width-Container neutralisieren */
  .collection_container.page-width {
    max-width: none !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: visible !important;
  }

  /* inneren Container auf volle Breite */
  .collection__inner {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  /* Carousel selbst wischbar machen */
  .featured-collections-carousel {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    padding-left: 16px;   /* optional: leichter Startabstand */
    padding-right: 16px;
  }

  /* einzelne Items dürfen nicht schrumpfen */
  .featured-collections-carousel__item {
    flex: 0 0 auto !important;
  }

}
/* =========================================================
   FTC – MOBILE: PAGE-WIDTH RAND KOMPLETT ENTFERNEN
   (ohne Full-Bleed / ohne Desktop-Effekt)
   ========================================================= */

@media (max-width: 768px){

  /* 1) Der Übeltäter: page-width */
  section[id^="FTC-"] .collection__container.page-width{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2) Inner darf ebenfalls keinen Eigenrand haben */
  section[id^="FTC-"] .collection__inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 3) Slider bleibt wischbar */
  section[id^="FTC-"] .slider{
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

}
/* =========================================================
   FTC – MOBILE: PAGE-WIDTH RAND RADIKAL ENTFERNEN
   Nur für FTC-Section, Desktop bleibt unangetastet
   ========================================================= */
@media (max-width: 768px){

  /* 1) Page-width Padding killen (auch logical props) */
  body.template-index section[id^="FTC-"] div.collection__container.page-width{
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2) Inner ebenfalls ohne Rand */
  body.template-index section[id^="FTC-"] div.collection__inner{
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;

    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3) Wischbarkeit sicherstellen */
  body.template-index section[id^="FTC-"] .slider{
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
  }

}
/* =========================================================
   FTC / Neu & beliebt – Desktop: Slides dürfen NICHT überlappen
   Ziel: article.product_slider__slide muss in Grid-Spalte bleiben
   ========================================================= */
@media (min-width: 990px){

  /* Track: Grid-Mechanik beibehalten + saubere Berechnung */
  section[id^="FTC-"] .slider__track{
    --cols-desktop: 8 !important;
    --gap: 24px !important;

    display: grid !important;
    grid-auto-flow: column !important;

    grid-auto-columns: calc(
      (100% - (var(--gap) * (var(--cols-desktop) - 1))) / var(--cols-desktop)
    ) !important;

    column-gap: var(--gap) !important;
    gap: var(--gap) !important;

    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* DAS ist der entscheidende Fix gegen Overlap: */
  section[id^="FTC-"] article.product_slider__slide{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Kinder dürfen nicht „Breite erzwingen“ (Links/Titel/Bilder) */
  section[id^="FTC-"] article.product_slider__slide *{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Pfeile: sicher über dem Track + klickbar */
  section[id^="FTC-"] .slider__nav{
    z-index: 50 !important;
  }
  section[id^="FTC-"] .slider__arrow{
    z-index: 51 !important;
    pointer-events: auto !important;
  }
}
@media (min-width: 990px){
  section[id^="FTC-"] .product__img,
  section[id^="FTC-"] .product__img-wrap{
    aspect-ratio: 1 / 1 !important;
  }
}
@media (min-width: 990px){
  section[id^="FTC-"] .product__img{
    padding: 0 !important;
  }
}
@media (min-width: 990px){
  section[id^="FTC-"] .product__img img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}
@media (min-width: 990px){
  section[id^="FTC-"] .slider{
    overflow: visible !important;
  }

  section[id^="FTC-"] .slider__track{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}
@media (min-width: 990px){
  section[id^="FTC-"] .collection__grid{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media (min-width: 990px){
  section[id^="FTC-"] .collection__inner{
    gap: 32px !important;
  }
}
@media (min-width: 990px){
  section[id^="FTC-"] .collection__cta{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* FTC – Desktop: Abstand zwischen Slider und CTA reduzieren */
@media (min-width: 990px) {

  /* 1) Der Hauptverursacher: gap im Flex-Stack */
  section[id^="FTC-"] .collection__inner{
    gap: 18px !important; /* testweise 12–24px */
  }

  /* 2) Falls irgendwo Default-Margins reinhauen: alles glattziehen */
  section[id^="FTC-"] .collection__grid,
  section[id^="FTC-"] .collection__cta{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3) CTA minimal näher an den Slider */
  section[id^="FTC-"] .collection__cta{
    margin-top: 6px !important;
  }
}
/* FTC – Produkttitel auf exakt 2 Zeilen begrenzen */
section[id^="FTC-"] h3.product_title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.3;
  max-height: calc(1.3em * 2); /* Sicherheit */
}
section[id^="FTC-"] h3.product_title{
  font-size: 13px;
}
/* FTC – Produkttitel auf exakt 2 Zeilen begrenzen */
section[id^="FTC-"] .product__title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  line-height: 1.3 !important;
  max-height: calc(1.3em * 2) !important;
}

/* Optional: falls der Link im Titel eigene display-Regeln hat */
section[id^="FTC-"] .product__title a{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  line-height: 1.3 !important;
  max-height: calc(1.3em * 2) !important;
}
/* ===============================
   FTC – Bild-Schatten gezielt verstärken
   NUR das Bild, nicht Text/Preis
================================ */

/* 1) Sicherstellen: KEIN Schatten auf der gesamten Card */
#FTC-template- .product_slider__slide,
#FTC-template- article.product_slider__slide {
  box-shadow: none !important;
  filter: none !important;
}

/* 2) Kräftiger, sauberer Schatten NUR hinter dem Bild */
#FTC-template- .product__img {
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* 3) Auch beim Hover nichts auf Text vererben */
#FTC-template- .product_slider__slide:hover {
  box-shadow: none !important;
}

/* 4) Titel & Preis explizit ohne Schatten */
#FTC-template- .product__title,
#FTC-template- .product__price {
  box-shadow: none !important;
  filter: none !important;
}
/* =========================================
   FTC – Bild-Schatten mit echtem Hover-Effekt
   Nur auf dem Bild, nicht auf Text/Preis
========================================= */

/* Sicherheit: Card selbst bleibt ohne Schatten */
#FTC-template- article.product_slider__slide {
  box-shadow: none !important;
  filter: none !important;
}

/* Grundzustand – kräftiger Basisschatten */
#FTC-template- .product__img {
  position: relative;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.12);
  transition: 
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Hover: dunkler + minimaler Lift */
#FTC-template- .product_slider__slide:hover .product__img {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.32),
    0 6px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* Titel & Preis bleiben clean */
#FTC-template- .product__title,
#FTC-template- .product__price {
  box-shadow: none !important;
  filter: none !important;
}

/* Auch bei Hover nichts auf Text vererben */
#FTC-template- .product_slider__slide:hover {
  box-shadow: none !important;
}
/* FTC – Bild-Schatten + Hover (greift sicher) */
section[id^="FTC-"] a.product__img,
section[id^="FTC-"] .product__img {
  box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.14) !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}

/* Hover auf dem Slide ODER direkt auf dem Bild-Link */
section[id^="FTC-"] article.product.slider__slide:hover a.product__img,
section[id^="FTC-"] article.product.slider__slide:hover .product__img,
section[id^="FTC-"] article.product_slider__slide:hover a.product__img,
section[id^="FTC-"] article.product_slider__slide:hover .product__img,
section[id^="FTC-"] a.product__img:hover,
section[id^="FTC-"] .product__img:hover {
  box-shadow: 0 18px 44px rgba(0,0,0,.38), 0 6px 18px rgba(0,0,0,.20) !important;
  transform: translateY(-2px) !important;
}

/* Sicherstellen: KEIN Schatten auf Titel/Preis */
section[id^="FTC-"] .product__title,
section[id^="FTC-"] .product__price {
  box-shadow: none !important;
  filter: none !important;
}
/* Jedi World Footer: 14px, nichts fett */
footer .row,
footer .row p,
footer .row a,
footer .row span,
footer .row strong,
footer .row b {
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* falls das Theme Überschriften im Footer nutzt */
footer .row h1,
footer .row h2,
footer .row h3,
footer .row h4,
footer .row h5,
footer .row h6 {
  font-weight: 400 !important;
}
/* Footer – Mobile: Logo zentrieren & Firmenname darunter */
@media (max-width: 749px) {
  footer .footer__block--text {
    text-align: center;
  }

  /* Logo zentrieren */
  footer .footer__block--text img {
    display: block;
    margin: 0 auto 8px auto;
  }

  /* Firmenname unter Logo */
  footer .footer__block--text .company-line,
  footer .footer__block--text p:first-of-type {
    display: block;
    margin-top: 6px;
  }
}
@media (max-width: 749px) {
  footer .footer__block--text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  footer .footer__block--text img {
    order: 1;
  }

  footer .footer__block--text .company-line {
    order: 2;
    margin-top: 6px;
  }

  footer .footer__block--text p:not(.company-line) {
    order: 3;
  }
}
/* Footer Brand: 14px, keine Fettschrift */
footer .footer-brand,
footer .footer-brand * {
  font-size: 14px;
  font-weight: 400;
}

footer .footer-brand strong {
  font-weight: 400; /* falls irgendwo noch strong vorkommt */
}

footer .footer-brand__logo {
  max-width: 220px;      /* falls du es begrenzen willst */
  height: auto;
  display: block;
  margin: 0 0 10px 0;    /* Desktop: links */
}

footer .footer-brand__company {
  margin: 0 0 10px 0;
}

footer .footer-brand__text a {
  font-weight: 400;
  text-decoration: underline;
}

/* Mobile: alles mittig */
@media (max-width: 749px) {
  footer .footer-brand {
    text-align: center;
  }

  footer .footer-brand__logo {
    margin: 0 auto 10px auto;
  }
}
/* Scroll-to-top Falcon (global) */
#falcon-scrolltop.falcon-scrolltop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* WICHTIG: kein Container-Schatten */
  background: transparent;
  box-shadow: none;
}

#falcon-scrolltop.falcon-scrolltop.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Falcon Icon – Schatten NUR auf das SVG/PNG */
#falcon-scrolltop.falcon-scrolltop img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,0.55))
    drop-shadow(0 0 10px rgba(0,0,0,0.35));
  transition: filter .25s ease, transform .25s ease;
}

/* Hover: stärkerer Schatten + leichtes Abheben */
@media (hover:hover){
  #falcon-scrolltop.falcon-scrolltop:hover img{
    filter:
      drop-shadow(0 10px 18px rgba(0,0,0,0.7))
      drop-shadow(0 0 16px rgba(0,0,0,0.45));
    transform: translateY(-2px);
  }
}
/* Mobile: Header immer über dem Hero */
@media (max-width: 989px){
  .shopify-section-group-header-group,
  .prestige-header,
  header,
  #Header{
    position: sticky;
    top: 0;
    z-index: 10050 !important;
  }

  /* Startseite: Hero/Content unter den Header schieben */
  body.template-index main{
    padding-top: 110px; /* <- ggf. anpassen */
  }
}
/* HERO SLIDER – feste Höhe 165px */
.hero_viewport,
.hero_slide,
.hero_bg {
  height: 165px !important;
  min-height: 165px !important;
  max-height: 165px !important;
}

/* Inhalt vertikal sauber zentrieren */
.hero_slide {
  display: flex;
  align-items: center;
}

/* Hintergrund korrekt skalieren */
.hero_bg {
  background-size: cover;
  background-position: center;
}
@media (min-width: 990px){
  .hero_viewport,
  .hero_slide,
  .hero_bg {
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
  }
}
/* =========================================================
   NUR dieser Featured Tab Slider:
   Tabs + CTA Button entfernen
   ========================================================= */

#shopify-section-template--26768548323600__featured_tab_collection_LBrIA
[role="tablist"],
#shopify-section-template--26768548323600__featured_tab_collection_LBrIA
.collection-tabs,
#shopify-section-template--26768548323600__featured_tab_collection_LBrIA
.tabs {
  display: none !important;
}

/* Unteren Button "View collection" entfernen */
#shopify-section-template--26768548323600__featured_tab_collection_LBrIA
.collection__footer,
#shopify-section-template--26768548323600__featured_tab_collection_LBrIA
.collection__button,
#shopify-section-template--26768548323600__featured_tab_collection_LBrIA
a.btn {
  display: none !important;
}

/* Überflüssige Abstände entfernen */
#shopify-section-template--26768548323600__featured_tab_collection_LBrIA
.collection__inner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Text Feature Grid – voller Hintergrund */
#shopify-section-template--26768548233600__text_feature_grid_PFqVtR {
  background: #DADADA; /* DEIN Blauton */
}
#shopify-section-template--26768548233600__text_feature_grid_PFqVtR
.page-width,
#shopify-section-template--26768548233600__text_feature_grid_PFqVtR
.shopify-section {
  background: transparent !important;
}
/* Text Feature Grid – Titel Farbe */
#shopify-section-template--26768548233600__text_feature_grid_PFqVtR
.textfeature-title {
  color: #A5824C;
}
#shopify-section-template--26768548233600__text_feature_grid_PFqVtR
.textfeature-title {
  color: #A5824C !important;
}
/* Header immer über Hero-Slider */
.prestige-header,
header.prestige-header {
  position: relative;
  z-index: 50;
}
.hero_track {
  transform: translate3d(...);
}
/* Hero bewusst unter Header halten */
.hero,
.hero_viewport,
.hero_bg {
  position: relative;
  z-index: 1;
}
/* Header IMMER oben */
.prestige-header,
header.prestige-header {
  position: relative;
  z-index: 50;
}

/* Hero bewusst darunter */
.hero,
.hero_viewport,
.hero_bg {
  position: relative;
  z-index: 1;
}
/* === Cart Drawer immer über Header === */
.cart-overlay,
.cart-drawer,
aside.cart_panel,
.cart-panel,
#cart-drawer {
  z-index: 999999 !important;
  position: relative;
}

/* Overlay (Backdrop) ebenfalls hoch */
#cart-overlay,
.cart-overlay {
  z-index: 999998 !important;
}

/* Header darf deutlich darunter bleiben */
.prestige-header,
.shopify-section--header,
header,
#shopify-section-header {
  z-index: 9000 !important;
}
body.template-index .shopify-section--slideshow::before,
body.template-index .shopify-section--hero::before,
body.template-index .shopify-section--image-banner::before {
  content: "";
  display: block;
  height: 100px;
  background: #4f7398;
}
/* === Startseite: Hero nicht unter Header schieben === */
body.template-index .shopify-section--slideshow,
body.template-index .shopify-section--hero,
body.template-index .shopify-section--image-banner {
  margin-top: 0 !important;
}
/* ===== Topbar IMMER ganz vorne ===== */

/* Shopify-Section der Topbar (dein Screenshot zeigt "__top_header_bar__...") */
.shopify-section[id*="__top_header_bar__"],
#shopify-section-sections--top_header_bar,
[id*="top_header_bar"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}

/* Falls Prestige dafür andere Wrapper nutzt */
.announcement-bar,
.header__topbar,
.header-top-bar,
.topbar,
.top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}

/* Banner/Slider/hero bewusst darunter halten */
.shopify-section--image-banner,
.shopify-section--slideshow,
.hero,
.hero_section,
.hero__viewport,
.hero_bg,
.hero_bg-media {
  position: relative;
  z-index: 1 !important;
}