/** Shopify CDN: Minification failed

Line 1488:18 Unexpected "{"
Line 1488:27 Expected ":"
Line 1498:18 Unexpected "{"
Line 1498:27 Expected ":"
Line 1508:18 Unexpected "{"
Line 1508:27 Expected ":"
Line 1516:18 Unexpected "{"
Line 1516:27 Expected ":"
Line 1523:18 Unexpected "{"
Line 1523:27 Expected ":"
... and 126 more hidden warnings

**/
/* =========================================================
   CLEAN PATCH (nur das Nötigste)
   - ruhige, runde Card + softer Shadow (kein Lift)
   - Bild größer + dezenter Drop-Shadow + leichter Zoom
   - Price oben, Titel/Vendor mittig, Beschreibung aus
   - Actions immer im Flow, immer untereinander, nichts läuft raus
   - bump-pill klein (38%), im Layout, direkt am Bild
   ========================================================= */

/* 0) Safety: nichts darf aus Grid/Flex rausdrücken */
.productcard--minimal,
.productcard--minimal * { box-sizing: border-box; }
.productcard--minimal .productitem,
.productcard--minimal .productitem__container { min-width: 0; }

/* 1) Card-Variablen */
.productcard--minimal{ 
  --pc-pad: 16px;
  --pc-radius: clamp(18px, 1.6vw, 22px);
  --pc-shadow: 0 8px 20px rgba(0,0,0,0.06);
  --pc-border: 1px solid rgba(0,0,0,0.05);
  --pc-soft: rgba(0,0,0,0.035);
  --pc-divider: rgba(0,0,0,0.07);
}

/* 2) Card-Container */
.productcard--minimal .productitem{
  border-radius: var(--pc-radius) !important;
  box-shadow: var(--pc-shadow) !important;
  border: var(--pc-border) !important;
  overflow: hidden; /* rund bleibt clean */
}

@media (hover:hover){
  .productcard--minimal:hover .productitem{
    transform: none !important;
    box-shadow: var(--pc-shadow) !important;
  }
}

/* 3) Layout: Info oben flexibel, Actions unten “geankert” */
.productcard--minimal .productitem__container{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}
.productcard--minimal .productitem--info{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--pc-pad) var(--pc-pad) 0;
  gap: 10px;
}

/* 4) Reihenfolge: Preis ganz oben */
.productcard--minimal .productitem__price-row{ order: 0; margin: 0 0 2px; }
.productcard--minimal .productitem--title{ order: 1; margin: 0; }
.productcard--minimal .productitem--vendor{ order: 2; }
.productcard--minimal :is(.productitem__stock-level, .product__rating){ order: 3; }
.productcard--minimal .productitem--swatches{ order: 5; }

/* 5) Typo: Title + Vendor zentriert */
.productcard--minimal .productitem--title{
  text-align: center;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 650;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
}
.productcard--minimal .productitem--title a{ text-align: center; }

.productcard--minimal .productitem--vendor{
  opacity: 1;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pc-soft);
  font-size: .86rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.productcard--minimal .productitem--vendor a{
  color: inherit;
  text-decoration: none;
}
.productcard--minimal .productitem--vendor a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 6) Beschreibung NIE anzeigen */
.productcard--minimal .productitem--description{ display: none !important; }

/* 7) Price-Pill */
.productcard--minimal .productitem__price-row{
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--pc-soft);
}
.productcard--minimal .productitem__price-row :is(.productitem--price,.product-price,.price){
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  min-width: 0;
}
.productcard--minimal .productitem__price-row :is(
  .productitem--price-current,.price__current,.price-item--sale,.price-item--final
){
  font-weight: 750;
  letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 1.0rem + 0.35vw, 1.22rem);
  line-height: 1.1;
  white-space: nowrap;
}
.productcard--minimal .productitem__price-row :is(
  .productitem--price-original,.productitem--price-compare,.price__compare,.price-item--regular,s
){
  font-weight: 550;
  font-size: clamp(0.90rem, 0.88rem + 0.15vw, 0.98rem);
  opacity: .55;
  white-space: nowrap;
  text-decoration: line-through;
}
.productcard--minimal .productitem__price-row :is(.productitem--unit-price,.unit-price,.price__unit){
  flex-basis: 100%;
  margin-top: 4px;
  font-size: .9em;
  
}

/* 8) Bild: größer + dezenter Shadow + kleiner Zoom */
.productcard--minimal .productitem__image-container{
  padding: clamp(8px, 0.9vw, 12px) !important;
  padding-top: 0 !important; /* für bump-pill “kein Gap” */
  background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
}

.productcard--minimal .productitem--image{
  margin: 0;
  overflow: visible !important;
  border-radius: clamp(14px, 1vw, 18px);
  background: transparent;
}

/* drop-shadow (funktioniert auch bei PNG-Alpha) */
.productcard--minimal :is(
  .productitem--image-primary,
  .productitem--image-alternate,
  img.productitem--image-primary,
  img.productitem--image-alternate,
  picture.productitem--image-primary,
  picture.productitem--image-alternate,
  canvas.productitem--image-primary,
  canvas.productitem--image-alternate
){
  border-radius: clamp(14px, 1vw, 18px) !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.10)) !important;
  transform: translateZ(0);
  transition: transform .22s ease, filter .22s ease;
  will-change: transform, filter;
}

@media (hover:hover){
  .productcard--minimal:hover :is(.productitem--image-primary,.productitem--image-alternate){
    transform: scale(1.03) !important;
  }
  .productcard--minimal:hover :is(
    .productitem--image-primary,
    .productitem--image-alternate,
    img.productitem--image-primary,
    img.productitem--image-alternate,
    picture.productitem--image-primary,
    picture.productitem--image-alternate,
    canvas.productitem--image-primary,
    canvas.productitem--image-alternate
  ){
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.09)) !important;
  }
}

/* 9) Actions: immer unten, immer untereinander, keine Hover-Accordion-Spielchen */
.productcard--minimal :is(.productitem--actions, .productitem__actions, .productitem--actions-wrapper){
  margin-top: auto !important;
  padding: 0 var(--pc-pad) var(--pc-pad) !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;
  transition: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.00), rgba(0,0,0,0.018));
}

/* Divider innerhalb */
.productcard--minimal .productitem--actions::before{
  content: "";
  display: block;
  height: 1px;
  background: var(--pc-divider);
  border-radius: 999px;
  margin: 2px 0 12px;
}

/* Buttons: niemals über die Karte hinaus */
.productcard--minimal .productitem--action{ width: 100% !important; min-width: 0 !important; }
.productcard--minimal .productitem--action-trigger{
  width: 100% !important;
  min-width: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: clamp(12px, 1vw, 14px);
  min-height: 44px;
  padding: 12px 14px;
  line-height: 1.1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
}

.productcard--minimal .button-secondary.productitem--action-trigger{
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.14);
  backdrop-filter: blur(6px);
}

/* 10) bump-pill: klein, im Layout, direkt am Bild */
.productcard--minimal .bump-pill{
  --w: 38%;
  --h: 18px;
  --lift: 10px;
  --b: 30px;

  width: var(--w) !important;
  inline-size: var(--w) !important;
  height: calc(var(--h) + var(--lift)) !important;

  position: relative !important;
  display: block !important;

  margin: 10px auto 0 !important; /* unten 0 -> direkt am Bild */
  pointer-events: none;
  flex: 0 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
}

.productcard--minimal .bump-pill::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--pc-bg, #fff);
  box-shadow: inset 0 14px 30px rgba(0,0,0,0.32) !important;

  -webkit-mask:
    radial-gradient(circle calc(var(--b)/2) at 50% calc(var(--b)/2), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--h)/2) at calc(var(--h)/2) calc(var(--lift) + calc(var(--h)/2)), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--h)/2) at calc(100% - calc(var(--h)/2)) calc(var(--lift) + calc(var(--h)/2)), #000 99%, transparent 100%),
    linear-gradient(#000 0 0);
  -webkit-mask-size:
    100% 100%,
    100% 100%,
    100% 100%,
    calc(100% - (2 * calc(var(--h)/2))) var(--h);
  -webkit-mask-position:
    0 0,
    0 0,
    0 0,
    calc(var(--h)/2) var(--lift);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over, source-over, source-over;

  mask:
    radial-gradient(circle calc(var(--b)/2) at 50% calc(var(--b)/2), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--h)/2) at calc(var(--h)/2) calc(var(--lift) + calc(var(--h)/2)), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--h)/2) at calc(100% - calc(var(--h)/2)) calc(var(--lift) + calc(var(--h)/2)), #000 99%, transparent 100%),
    linear-gradient(#000 0 0);
  mask-size:
    100% 100%,
    100% 100%,
    100% 100%,
    calc(100% - (2 * calc(var(--h)/2))) var(--h);
  mask-position:
    0 0,
    0 0,
    0 0,
    calc(var(--h)/2) var(--lift);
  mask-repeat: no-repeat;
  mask-composite: add, add, add;
}

/* Kein zusätzlicher Abstand zwischen bump-pill und Bildcontainer */
.productcard--minimal .bump-pill + .productitem__image-container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =========================================================
   Bump-Pill: breiter + Shadow softer (leichter) + mehr Blur
   ========================================================= */

.productcard--minimal .bump-pill{
  --w: 47%;   /* breiter */
  /* Größe sonst wie zuletzt klein lassen */
  --h: 15px;
  --lift: 7px;
  --b: 25px;

  width: var(--w) !important;
  inline-size: var(--w) !important;
}

/* Shadow: leichter, aber weicher (mehr Blur) */
.productcard--minimal .bump-pill::before{
  /* weniger Opacity + mehr Blur */
  box-shadow: inset 4px 4px 13px rgba(0,0,0,0.2) !important;
}


/* =========================================================
   bump-pill: näher an die Decke + Abstand zum Bild
   ========================================================= */

.productcard--minimal .bump-pill{
  margin-top: 0px !important;     /* weniger Abstand zur Decke */
  margin-bottom: 30px !important; /* Abstand zum Bild */
}

/* Falls du vorher den Abstand zum Bild "weggenullt" hast: wieder erlauben */
.productcard--minimal .bump-pill + .productitem__image-container{
  padding-top: unset !important;
  margin-top: 0 !important;
}

/* Wichtig: nicht global padding-top:0 erzwingen */
.productcard--minimal .productitem__image-container{
  padding-top: clamp(8px, 0.9vw, 12px) !important;
}


/* =========================================================
   Bild größer + Schatten härter
   ========================================================= */

/* Weniger Padding = Bild wirkt größer */
.productcard--minimal .productitem__image-container{
  padding: clamp(4px, 0.6vw, 8px) !important;
}

/* Härterer Shadow (weniger Blur, mehr Präsenz) */
.productcard--minimal :is(
  img.productitem--image-primary,
  img.productitem--image-alternate,
  picture.productitem--image-primary,
  picture.productitem--image-alternate,
  canvas.productitem--image-primary,
  canvas.productitem--image-alternate,
  .productitem--image-primary,
  .productitem--image-alternate
){
  /* 2 Shadows: ein crisp + ein leichter weicher -> wirkt „hart“ aber nicht schmutzig */
  filter:
    drop-shadow(0 6px 10px rgba(0,0,0,0.26))
    drop-shadow(0 2px 2px rgba(0,0,0,0.18)) !important;
}


.productcard--minimal :is(
  img.productitem--image-primary,
  img.productitem--image-alternate,
  picture.productitem--image-primary,
  picture.productitem--image-alternate,
  canvas.productitem--image-primary,
  canvas.productitem--image-alternate,
  .productitem--image-primary,
  .productitem--image-alternate
){
  /* kompakt: kleiner Offset + kleiner Blur */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28)) !important;
}

/* Optional: beim Hover minimal stärker, aber immer noch kompakt */
@media (hover:hover){
  .productcard--minimal:hover :is(
    img.productitem--image-primary,
    img.productitem--image-alternate,
    picture.productitem--image-primary,
    picture.productitem--image-alternate,
    canvas.productitem--image-primary,
    canvas.productitem--image-alternate,
    .productitem--image-primary,
    .productitem--image-alternate
  ){
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.30)) !important;
  }
}


/* =========================================================
   NO-HOVER-EXPAND: Karte darf beim Hover NICHT höher werden
   - Actions nie einklappen/ausklappen
   - Bildbereich bleibt höhenstabil (auch mit Second Image)
   ========================================================= */

/* 1) Card: keine Hover-Animation, die “größer wirkt” */
@media (hover:hover){
  .productcard--minimal:hover .productitem{
    transform: none !important;
    box-shadow: var(--pc-shadow) !important;
  }
}

/* 2) Actions: Theme-SlideDown/Accordion hart deaktivieren */
.productcard--minimal :is(
  .productitem--actions,
  .productitem__actions,
  .productitem--actions-wrapper,
  [data-product-actions]
){
  /* immer normal im Flow */
  position: static !important;
  inset: auto !important;
  transform: none !important;

  /* nie collapse/expand */
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transition: none !important;
}

/* auch im Hover exakt gleich -> keine Höhenänderung */
@media (hover:hover){
  .productcard--minimal:hover :is(
    .productitem--actions,
    .productitem__actions,
    .productitem--actions-wrapper,
    [data-product-actions]
  ){
    height: auto !important;
    max-height: none !important;
    transform: none !important;
  }
}

/* 3) Bildbereich: höhenstabil (verhindert Jump beim Second Image) */
.productcard--minimal .productitem--image{
  position: relative !important;
  overflow: visible !important;

  /* stabilisiert die Höhe des Bildblocks */
  aspect-ratio: var(--product-grid-item-image-aspect-ratio, 1 / 1) !important;
}

/* Alles im figure wird “überlagert”, nicht layout-bestimmend */
.productcard--minimal .productitem--image :is(img, picture, canvas, svg){
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* oder cover, wenn du willst */
}

/* 4) Optional: nur Bild leicht zoomen, ohne Layout-Jump */
@media (hover:hover){
  .productcard--minimal:hover :is(.productitem--image-primary, .productitem--image-alternate){
    transform: scale(1.03) !important;
  }
}


/* =========================================================
   Empire: verhindert Hover-"Expand" der Card (CSS + Layout-Stabilität)
   ========================================================= */

/* Actions/Swatches dürfen nie per Hover ihre Höhe ändern */
.productgrid--item.productcard--minimal :is(
  .productitem--actions,
  .productitem--swatches,
  .productitem--description
){
  transition: none !important;
}

/* Actions: nie collapsed/expanded */
.productgrid--item.productcard--minimal :is(
  .productitem--actions,
  .productitem__actions,
  .productitem--actions-wrapper,
  [data-product-actions]
){
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Bildbereich: stabilisiert die Höhe (verhindert Jump beim 2. Bild/Lazyload) */
.productgrid--item.productcard--minimal .productitem--image{
  position: relative !important;
}

/* Reserviert konstant Platz über ein Ratio (funktioniert auch wenn Empire via CSS-Var arbeitet) */
.productgrid--item.productcard--minimal .productitem--image::before{
  content: "";
  display: block;
  padding-top: calc(100% / var(--product-grid-item-image-aspect-ratio, 1)) !important;
}

/* Bilder absolut überlagern -> kein Layout-Change beim Hover-Bild */
.productgrid--item.productcard--minimal .productitem--image :is(
  .rimg-wrapper,
  img,
  picture,
  canvas
){
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* nur falls nötig: Hover-Bild niemals "display:block" reinwerfen lassen */
.productgrid--item.productcard--minimal .productitem--image-alternate{
  display: block !important;
}


/* =========================================================
   Empire FIX: Compare erscheint beim Hover -> KEIN Layout-Shift
   - Compare out of flow (absolut)
   - Container streckt nicht / keine riesigen Luecken
   - Actions bleiben direkt unter dem Content
   ========================================================= */

/* Card als Position-Anker */
.productcard--minimal .productitem{
  position: relative !important;
}

/* Compare-Wrapper IMMER aus dem Flow nehmen */
.productcard--minimal :is(
  .productitem__compare-wrapper,
  [class*="productitem__compare-wrapper"]
){
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  width: auto !important;
  height: auto !important;
  max-height: none !important;

  z-index: 20 !important;
  pointer-events: auto !important; /* weiterhin klickbar */
}

/* Sicherstellen, dass Compare innen keine Abstaende "aufzieht" */
.productcard--minimal :is(
  .productitem__compare,
  .productitem__compare-wrapper label,
  .productitem__compare-wrapper .productitem__compare-checkbox-label
){
  margin: 0 !important;
}

/* Container soll nicht "strecken" / space-between etc. verursachen */
.productcard--minimal .productitem__container{
  height: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
}

/* Info soll nicht wachsen und dadurch riesige Luecken erzeugen */
.productcard--minimal .productitem--info{
  flex: 0 0 auto !important;
}

/* Actions NICHT mit margin-top:auto nach unten druecken (das macht die Luecke riesig) */
.productcard--minimal .productitem--actions{
  margin-top: 12px !important;  /* statt auto */
}


/* =========================================================
   FIX: Kein Extra-Abstand UNTER den Buttons (auch nicht beim Hover)
   ========================================================= */

/* 1) Container darf keinen "Reserve-Padding" unten bekommen */
.productcard--minimal .productitem__container{
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
@media (hover:hover){
  .productcard--minimal:hover .productitem__container{
    padding-bottom: 0 !important;
  }
}

/* 2) Actions: festes Bottom-Padding, keine Margins die "nach unten" ziehen */
.productcard--minimal .productitem--actions{
  margin-bottom: 0 !important;
  padding-bottom: var(--pc-pad) !important; /* definiert den "echten" Abschluss */
}

/* Falls Empire im Hover irgendwo extra Padding/Margin setzt */
@media (hover:hover){
  .productcard--minimal:hover .productitem--actions{
    margin-bottom: 0 !important;
    padding-bottom: var(--pc-pad) !important;
  }
}

/* 3) Letztes Element im Actions-Bereich: niemals extra Margin */
.productcard--minimal .productitem--actions > *{
  margin-bottom: 0 !important;
}
.productcard--minimal .productitem--actions > *:last-child{
  margin-bottom: 0 !important;
}

/* 4) Falls Empire ein pseudo-element unten nutzt (selten, aber kommt vor) */
.productcard--minimal .productitem--actions::after{
  content: none !important;
}

.productgrid--item.productcard--minimal{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   EMPIRE: Hover erzeugt unten Reserve-Space -> auf 0 zwingen
   (keine Höhenänderung / kein Extra-Leerraum unter Buttons)
   ========================================================= */

/* WICHTIG: Empire reserviert oft Platz über padding-bottom am Container/Info */
@media (hover:hover){
  .productgrid--item.productcard--minimal:hover :is(
    .productitem,
    .productitem__container,
    .productitem--info
  ){
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Falls Empire mit CSS-Variablen “Actions-Höhe” reserviert */
.productgrid--item.productcard--minimal :is(.productitem, .productitem__container, .productitem--info){
  --actions-height: 0px !important;
  --product-actions-height: 0px !important;
  --productitem-actions-height: 0px !important;
  --product-item-actions-height: 0px !important;
}

/* Manchmal ist der Leerraum ein ::after-Block (Spacer/Overlay) */
.productgrid--item.productcard--minimal :is(
  .productitem,
  .productitem__container,
  .productitem--info,
  .productitem--actions
)::after{
  content: none !important;
}

/* Actions: definierter Abschluss unten (damit es “fertig” wirkt) */
.productgrid--item.productcard--minimal .productitem--actions{
  margin-bottom: 0 !important;
  padding-bottom: var(--pc-pad) !important;
}


/* =========================================================
   EMPIRE HARD FIX: kein Hover-Reserve-Space unten
   -> verhindert Extra-Abstand unter Buttons + Höhen-Jump
   ========================================================= */

/* 1) Nimm dem Grid-Item selbst jeden Hover-Spacing-Trick */
.productgrid--item.productcard--minimal,
.productgrid--item.productcard--minimal:hover,
.productgrid--item.productcard--minimal:focus-within{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 2) Häufiger Übeltäter: Empire reserviert Platz am Container/Info */
.productgrid--item.productcard--minimal :is(.productitem, .productitem__container, .productitem--info){
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;

  /* falls per Transition “hochgezogen” wird */
  transition: none !important;
}

/* 3) Falls Empire per JS/CSS Variablen Platz reserviert -> auf 0 */
.productgrid--item.productcard--minimal :is(.productitem, .productitem__container, .productitem--info){
  --actions-height: 0px !important;
  --product-actions-height: 0px !important;
  --productitem-actions-height: 0px !important;
  --product-item-actions-height: 0px !important;
  --compare-height: 0px !important;
}

/* 4) Manche Empire-Versionen nutzen unten Spacer-Pseudo-Elemente */
.productgrid--item.productcard--minimal :is(.productitem, .productitem__container, .productitem--info)::after{
  content: none !important;
  display: none !important;
}

/* 5) Actions: fester “Abschluss” – aber keine Extrafläche darunter */
.productgrid--item.productcard--minimal .productitem--actions{
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  padding-bottom: var(--pc-pad) !important;
}
@media (hover:hover){
  .productgrid--item.productcard--minimal:hover .productitem--actions{
    margin-bottom: 0 !important;
    padding-bottom: var(--pc-pad) !important;
  }
}

/* =========================================================
   Stärkerer Außenschatten für die komplette Karte
   ========================================================= */

.productcard--minimal{
  /* stärker + etwas mehr Tiefe */
  --pc-shadow: 0 14px 20px rgba(0,0,0,0.14);
  --pc-shadow-hover: 0 18px 30px rgba(0,0,0,0.16);
}

.productcard--minimal .productitem{
  box-shadow: var(--pc-shadow) !important;
}

/* optional: beim Hover minimal stärker (ohne "aufklappen") */
@media (hover:hover){
  .productcard--minimal:hover .productitem{
    box-shadow: var(--pc-shadow-hover) !important;
    transform: none !important;
  }
}


/* =========================================================
   Preis: schwarz + fett auf weißem "Schild" mit weichem Shadow
   ========================================================= */

.productcard--minimal .productitem__price-row{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
  border-radius: 14px !important;

  padding: 10px 12px !important;
}

/* Alle Preis-Texte: neutral (kein Blau) */
.productcard--minimal .productitem__price-row :is(
  .productitem--price,
  .product-price,
  .price,
  .money,
  .price__current,
  .price-item--sale,
  .price-item--final,
  .productitem--price-current
){
  color: #000 !important;
}

/* Current Price: extra fett */
.productcard--minimal .productitem__price-row :is(
  .productitem--price-current,
  .price__current,
  .price-item--sale,
  .price-item--final
){
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

/* Compare/original bleibt dezenter */
.productcard--minimal .productitem__price-row :is(
  .productitem--price-original,
  .productitem--price-compare,
  .price__compare,
  .price-item--regular,
  s
){
  color: rgba(0,0,0,0.50) !important;
}



/* =========================================================
   Preisschild: Schriftart wie Überschriften (Heading Font)
   ========================================================= */

.productcard--minimal .productitem__price-row,
.productcard--minimal .productitem__price-row :is(
  .productitem--price,
  .product-price,
  .price,
  .money,
  .price__current,
  .price-item--sale,
  .price-item--final,
  .productitem--price-current,
  .productitem--price-original,
  .productitem--price-compare,
  .price__compare,
  .price-item--regular,
  s,
  .productitem--unit-price,
  .unit-price,
  .price__unit
){
  font-family: var(--font-heading-family,
               var(--font-heading,
               var(--font--heading,
               var(--typeHeaderPrimary, inherit)))) !important;
}


.productcard--minimal .productitem__price-row,
.productcard--minimal .productitem__price-row *{
  font-family: "Montserrat", sans-serif !important;
  font-weight: 100 !important; /* normal/medium statt fett */
  opacity: 0.88;
}

/* Current price minimal stärker (optional) */
.productcard--minimal .productitem__price-row :is(
  .productitem--price-current,
  .price__current,
  .price-item--sale,
  .price-item--final
){
  font-weight: 100 !important;
}



/* =========================================================
   Preisschild entfernen -> nur Preis anzeigen
   ========================================================= */

.productcard--minimal .productitem__price-row{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* optional: etwas Abstand zum Titel, falls nötig */
.productcard--minimal .productitem--title{
  margin-top: 8px;
}

/* =========================================================
   Preis-Wrapper: kein Innen-Padding + kein L/R Margin
   ========================================================= */

.productcard--minimal .productitem__price-row{
  padding: 0 !important;           /* kein Padding innen */
  margin-left: 0 !important;       /* kein Margin links */
  margin-right: 0 !important;      /* kein Margin rechts */
  width: 100% !important;          /* falls vorher fit-content war */
}

/* Falls der eigentliche Preisblock noch eigenes Padding/Margin hat */
.productcard--minimal .productitem__price-row :is(
  .productitem--price,
  .product-price,
  .price
){
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   MOBILE FIX: 2 Produkte pro Reihe (max. 50% Breite)
   - passt auch wenn das Grid Flex ODER CSS-Grid nutzt
   - verhindert horizontales Overflow (Text/Buttons)
   ========================================================= */

@media (max-width: 749px){
  /* Gap, der wirklich in die 2-Spalten-Rechnung einfließt */
  .productgrid--items{
    --pg-gap-mobile: 12px;
    column-gap: var(--pg-gap-mobile) !important;
    row-gap: var(--pg-gap-mobile) !important;
    gap: var(--pg-gap-mobile) !important;

    /* falls das Theme Flex nutzt */
    flex-wrap: wrap !important;

    /* falls das Theme CSS-Grid nutzt */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Flex-Fallback: exakte 2-up Breite inkl. Gap (kein “zu breit”) */
  .productgrid--item.productcard--minimal{
    flex: 0 0 calc((100% - var(--pg-gap-mobile, 12px)) / 2) !important;
    max-width: calc((100% - var(--pg-gap-mobile, 12px)) / 2) !important;
    min-width: 0 !important; /* wichtig gegen Overflow */
  }

  /* Karte selbst darf nie breiter als ihr Grid-Item werden */
  .productgrid--item.productcard--minimal .productitem{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Innenabstände etwas tighten für 2-up Mobile */
  .productgrid--item.productcard--minimal{
    --pc-pad: 12px;
    --pc-radius: 16px;
  }
  .productgrid--item.productcard--minimal .productitem__image-container{
    padding: 6px !important;
  }

  /* Text darf die Karte nicht “sprengen” */
  .productgrid--item.productcard--minimal .productitem--title,
  .productgrid--item.productcard--minimal .productitem--vendor{
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .productgrid--item.productcard--minimal .productitem--title a,
  .productgrid--item.productcard--minimal .productitem--vendor a{
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Buttons etwas kompakter, damit 2-up sauber bleibt */
  .productgrid--item.productcard--minimal .productitem--action-trigger{
    min-height: 40px;
    padding: 10px 12px;
    font-size: 0.92rem;
    min-width: 0 !important;
  }

  /* bump-pill: sicherstellen, dass sie nie “zu breit” wird */
  .productgrid--item.productcard--minimal .bump-pill{
    --w: 60%;
    max-width: 100%;
  }
}


/* =========================================================
   MOBILE 2-UP HARD OVERRIDE (Empire-safe)
   -> erzwingt 2 Spalten + killt 25%-Breite/space-between/Gutters
   ========================================================= */

@media (max-width: 749px){

  /* 1) Grid-Wrapper: 2 Spalten erzwingen (egal ob Theme vorher Flex/Grid nutzt) */
  body .productgrid--items{
    /* häufige Theme-Variablen gleich mit setzen */
    --products-per-row: 2 !important;
    --product-grid-columns: 2 !important;
    --grid-columns: 2 !important;
    --columns: 2 !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    /* falls Theme mit space-between/neg margins arbeitet */
    justify-content: stretch !important;
    justify-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) Items: alles zurücksetzen, was 25%/Gutters erzeugt */
  body .productgrid--items .productgrid--item.productcard--minimal{
    width: auto !important;
    max-width: none !important;

    /* falls Theme Flex-Regeln drauf hat */
    flex: none !important;

    /* diese beiden sind oft der "¼ Gap" Übeltäter */
    margin: 0 !important;
    padding: 0 !important;

    min-width: 0 !important;
  }

  /* 3) Karte füllt die Grid-Zelle sauber aus */
  body .productgrid--items .productgrid--item.productcard--minimal .productitem{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 4) Kleine Mobile-Tightenings (optional, aber hilft bei 2-up) */
  body .productgrid--items .productgrid--item.productcard--minimal{
    --pc-pad: 12px;
    --pc-radius: 16px;
  }

  /* lange Titel/Vendor dürfen NICHT drücken */
  body .productgrid--items .productgrid--item.productcard--minimal .productitem--title a,
  body .productgrid--items .productgrid--item.productcard--minimal .productitem--vendor a{
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* =========================================================
   MOBILE: immer 2-up (½ Breite) – robust gegen 4-up/space-between
   ========================================================= */
@media (max-width: 749px){

  /* A) Fallback: Wenn das Theme mobile 4 Spalten macht -> Item spannt 2 Spalten = ½ Breite */
  body .productgrid--item.productcard--minimal{
    grid-column: span 2 !important;    /* macht aus 4-up -> 2-up */
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  /* B) Wenn wir den echten Parent erwischen: Parent wird zu sauberem 2-Spalten-Grid */
  body :is(ul, ol, div, section):not(.swiper-wrapper):not(.flickity-enabled):not(.splide__list)
  :has(> .productgrid--item.productcard--minimal){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    /* killt typische “Gutter/Space-between”-Tricks */
    justify-content: stretch !important;
    justify-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Wenn Parent wirklich 2 Spalten ist: Item soll wieder normal 1 Spalte nutzen */
  body :is(ul, ol, div, section):not(.swiper-wrapper):not(.flickity-enabled):not(.splide__list)
  :has(> .productgrid--item.productcard--minimal)
  > .productgrid--item.productcard--minimal{
    grid-column: auto !important;
  }

  /* Optional: etwas kompakter für 2-up */
  body .productgrid--item.productcard--minimal{
    --pc-pad: 12px;
    --pc-radius: 16px;
  }

  /* Lange Titel/Vendor dürfen nicht die Breite “sprengen” */
  body .productgrid--item.productcard--minimal .productitem--title a,
  body .productgrid--item.productcard--minimal .productitem--vendor a{
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}




/* Recently viewed: grauen Hintergrund entfernen */
.recently-viewed--section,
.recently-viewed--section .product-section--container,
.recently-viewed--section .product-recently-viewed__wrapper,
.recently-viewed--section .product-section--content {
  background: transparent !important;
}

/* Platz für den unteren Schatten */
.recently-viewed--section .product-recently-viewed__wrapper {
  padding-bottom: 16px; /* ggf. erhöhen */
}




/* === Modern Rounded Search Bar === */
.live-search .live-search-form {
  /* optional: wenn dein Layout es zulässt */
  width: 100%;
}

.live-search .live-search-form .form-field.no-label {
  position: relative;
  display: flex;
  align-items: center;

  /* pill container */
  border-radius: 999px;
  background: #fff;

  /* soft shadow */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  
  /* subtle border for definition */
  border: 1px solid rgba(0, 0, 0, 0.08);

  /* smooth interactions */
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
  overflow: hidden; /* keeps button edges clean */
}

/* Hover: a bit more lift */
.live-search .live-search-form .form-field.no-label:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Focus within: modern focus ring */
.live-search .live-search-form .form-field.no-label:focus-within {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.14),
    0 0 0 4px rgba(59, 130, 246, 0.22); /* soft blue ring */
  border-color: rgba(59, 130, 246, 0.45);
  transform: translateY(-1px);
}

/* Input styling */
.live-search .form-field-input.live-search-form-field {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;

  /* spacing */
  padding: 14px 56px 14px 18px; /* right padding leaves room for button */
  font-size: 16px;
  line-height: 1.2;

  /* makes placeholder nicer */
  color: inherit;
}

.live-search .form-field-input.live-search-form-field::placeholder {
  opacity: 0.6;
}

/* Search button: round, slightly separated */
.live-search .live-search-button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  
  width: 42px;
  height: 42px;
  border-radius: 999px;

  border: 0;
  background: rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.live-search .live-search-button:hover {
  background: rgba(0, 0, 0, 0.10);
  transform: translateY(-50%) scale(1.03);
}

.live-search .live-search-button:active {
  transform: translateY(-50%) scale(0.98);
}

/* Ensure icons fit nicely */
.live-search .live-search-button .search-icon svg {
  width: 18px;
  height: 18px;
}

/* Cancel button (takeover): keep it subtle */
.live-search .live-search-takeover-cancel {
  background: transparent;
  border: 0;
  opacity: 0.7;
  padding: 0 14px;
  transition: opacity 160ms ease;
}

.live-search .live-search-takeover-cancel:hover {
  opacity: 1;
}

/* Flydown: match rounded modern style */
.live-search .search-flydown {
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}




.live-search,
.live-search::before,
.live-search::after,
.live-search .live-search-form,
.live-search .live-search-form::before,
.live-search .live-search-form::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --- FIX: Abgerundetes Feld ist NUR der .form-field-Wrapper (ein Rahmen, keine Doppelrahmen) --- */
.live-search .form-field.no-label {
  border-radius: 9999px;
  overflow: hidden;               /* clippt alles "hinter" den Rundungen */
  background-clip: padding-box;
  position: relative;
  z-index: 2;                      /* liegt über dem Flydown */
}

/* Input/Buttons ohne eigenen Rahmen/Shadow */
.live-search .form-field-input.live-search-form-field,
.live-search .live-search-button,
.live-search .live-search-takeover-cancel {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent;
}

/* --- FIX: falls die Linie vom Flydown oben kommt --- */
.live-search .search-flydown {
  border-top: 0 !important;
  margin-top: -1px;               /* schließt eine 1px-Naht */
  position: relative;
  z-index: 1;
}



/* Button wieder sichtbar + klickbar */
.live-search .form-field.no-label{
  display: flex;           /* sorgt dafür, dass Input + Button nebeneinander bleiben */
  align-items: center;
}

.live-search .live-search-button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  color: inherit;          /* wichtig für SVGs mit currentColor */
}

/* SVG-Icon sicher einfärben */
.live-search .live-search-button svg{
  fill: currentColor;
  stroke: currentColor;
}

/* Input darf den Button nicht überdecken */
.live-search .form-field-input.live-search-form-field{
  flex: 1 1 auto;
  min-width: 0;
}


/* ===== Live Search – modern pill + button ===== */

.live-search {
  /* falls dein Theme hier einen Rahmen/Shadow setzt */
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.live-search .form-field.no-label{
  display: flex;
  align-items: center;

  /* Pill Look */
  border-radius: 9999px;
  overflow: hidden;                 /* verhindert "Rahmen dahinter" */
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);

  /* angenehme Größe */
  height: 44px;
  padding-left: 14px;
  padding-right: 6px;

  /* schöner Fokus */
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.live-search .form-field.no-label:focus-within{
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 0 0 4px rgba(0,0,0,.08);
}

/* Input */
.live-search .form-field-input.live-search-form-field{
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;

  font-size: 15px;
  line-height: 1;
  padding: 0;
  color: inherit;
}

.live-search .form-field-input.live-search-form-field::placeholder{
  opacity: .6;
}

/* Button rechts */
.live-search .live-search-button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border: 0 !important;
  border-radius: 9999px;

  background: rgba(0,0,0,.06);
  color: inherit;

  cursor: pointer;
  transition: background-color .18s ease, transform .08s ease, opacity .18s ease;
}

.live-search .live-search-button:hover{
  background: rgba(0,0,0,.10);
}

.live-search .live-search-button:active{
  transform: scale(.96);
}

/* SVG Icons im Button sicher sichtbar */
.live-search .live-search-button svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
}

/* Optional: Cancel Button (wenn du ihn nutzt) etwas dezenter */
.live-search .live-search-takeover-cancel{
  border: 0 !important;
  background: transparent;
  opacity: .75;
  transition: opacity .18s ease;
}
.live-search .live-search-takeover-cancel:hover{
  opacity: 1;
}

/* Flydown: keine "Naht" direkt unter dem Pill */
.live-search .search-flydown{
  border-top: 0 !important;
  margin-top: 8px;                 /* Abstand unter dem Suchfeld */
}


/* 1) Farbe des Icons definieren (Beispiel: weißes Icon auf dunklem Button) */
.live-search .live-search-button{
  background: #111;   /* Button-Hintergrund */
  color: #fff;        /* <-- Icon-Farbe */
}

/* 2) Erzwingt die Farbe auch, wenn das SVG intern schwarz gesetzt ist */
.live-search .live-search-button svg,
.live-search .live-search-button svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* Lupe: NICHT füllen, sonst ist das Loch weg */
.live-search .search-icon--inactive svg,
.live-search .search-icon--inactive svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Spinner darf gefüllt sein (falls dein Spinner Fill braucht) */
.live-search .search-icon--active svg,
.live-search .search-icon--active svg *{
  fill: currentColor;
  stroke: currentColor;
}




#shopify-section-{{ section.id }} .promo-mosaic--inner.promo-mosaic--variant-b.promo-mosaic--layout-3{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}




#shopify-section-{{ section.id }} .promo-mosaic--inner.promo-mosaic--variant-b.promo-mosaic--layout-3{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 70px;
}



/* Basis-Card */
#shopify-section-{{ section.id }} .promo-block{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(11,15,25,.10);
}

/* Inhalt */
#shopify-section-{{ section.id }} .promo-block--content{
  position: relative;
  z-index: 1;
  padding: clamp(16px, 2vw, 28px);
}

/* Textfarben aus Block-Setting "color" */
#shopify-section-{{ section.id }} .promo-block--header,
#shopify-section-{{ section.id }} .promo-block--text{
  color: var(--promo-text-color);
}

/* Optionales Overlay direkt aus show_overlay/background/opacity */
#shopify-section-{{ section.id }} .promo-block--has-overlay .promo-block--content::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--promo-overlay-color);
  z-index: -1;
}

/* Typography */
#shopify-section-{{ section.id }} .promo-block--header{
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.12;
  margin-bottom: 10px;
}

#shopify-section-{{ section.id }} .promo-block--text{
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 18px;
  opacity: .95;
}

/* Button */
#shopify-section-{{ section.id }} .promo-block--button{
  border-radius: 999px;
  padding: 10px 18px;
}

/* Einzelnes Item gezielt stylen */
#shopify-section-{{ section.id }} .promo-block--index-1{
  border-radius: 28px;
}
#shopify-section-{{ section.id }} .promo-block--index-2 .promo-block--header{
  font-size: clamp(24px, 2.2vw, 38px);
}
#shopify-section-{{ section.id }} .promo-block--index-3 .promo-block--button{
  border-radius: 12px;
}


/* ===== Promotional Items Redesign (Soft Premium) ===== */

#shopify-section-{{ section.id }} .promo-block{
  --pb-radius: clamp(18px, 2vw, 28px);
  --pb-shadow: 0 14px 35px rgba(11,15,25,.12);
  --pb-shadow-hover: 0 22px 48px rgba(11,15,25,.20);
  --pb-panel-bg: rgba(255,255,255,.78);
  --pb-panel-border: rgba(255,255,255,.62);
  --pb-panel-shadow: 0 8px 24px rgba(11,15,25,.12);

  position: relative;
  border-radius: var(--pb-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--pb-shadow);
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

/* subtiler Kontrastverlauf über dem Bild */
#shopify-section-{{ section.id }} .promo-block::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(12,18,30,.22) 0%,
    rgba(12,18,30,.10) 28%,
    rgba(12,18,30,0) 55%
  );
}

/* Bild leicht animieren */
#shopify-section-{{ section.id }} .promo-block .promo-block--background{
  transition: transform .9s ease, filter .9s ease;
  transform-origin: center;
}

#shopify-section-{{ section.id }} .promo-block--content{
  position: relative;
  z-index: 2;
  padding: clamp(14px, 1.2vw, 20px);
}

/* Text-Panel */
#shopify-section-{{ section.id }} .promo-block--content-wrapper{
  max-width: min(56ch, 88%);
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: var(--pb-panel-bg);
  border: 1px solid var(--pb-panel-border);
  box-shadow: var(--pb-panel-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

#shopify-section-{{ section.id }} .promo-block--header{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--promo-text-color, #1f2937);
  text-wrap: balance;
}

#shopify-section-{{ section.id }} .promo-block--text{
  margin: 0 0 18px;
  font-size: clamp(14px, .95vw, 17px);
  line-height: 1.55;
  color: var(--promo-text-color, #1f2937);
  opacity: .92;
  max-width: 52ch;
}

/* Button */
#shopify-section-{{ section.id }} .promo-block--button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Falls Theme die Klasse als "button-primary"/"button-secondary" liefert */
#shopify-section-{{ section.id }} .promo-block--button.button-primary,
#shopify-section-{{ section.id }} .button-primary.promo-block--button{
  background: #111827;
  color: #fff;
  box-shadow: 0 7px 16px rgba(17,24,39,.35);
}

#shopify-section-{{ section.id }} .promo-block--button.button-secondary,
#shopify-section-{{ section.id }} .button-secondary.promo-block--button{
  background: rgba(255,255,255,.86);
  color: #111827;
  border: 1px solid rgba(17,24,39,.16);
}

/* Fokuszustand */
#shopify-section-{{ section.id }} a[data-promo-block-content]:focus-visible{
  outline: 3px solid rgba(59,130,246,.55);
  outline-offset: 3px;
  border-radius: calc(var(--pb-radius) - 2px);
}

/* Hover nur auf Desktop/Mouse */
@media (hover: hover) and (pointer: fine){
  #shopify-section-{{ section.id }} .promo-block:hover{
    transform: translateY(-4px);
    box-shadow: var(--pb-shadow-hover);
  }

  #shopify-section-{{ section.id }} .promo-block:hover .promo-block--background{
    transform: scale(1.05);
    filter: saturate(1.06) contrast(1.03);
  }

  #shopify-section-{{ section.id }} .promo-block:hover .promo-block--content-wrapper{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11,15,25,.16);
    background: rgba(255,255,255,.82);
  }

  #shopify-section-{{ section.id }} .promo-block:hover .promo-block--button{
    transform: translateY(-1px);
    filter: brightness(1.02);
  }
}

/* Einzelne Items feinjustieren */
#shopify-section-{{ section.id }} .promo-block--index-1{
  --pb-radius: clamp(22px, 2.2vw, 32px);
}

#shopify-section-{{ section.id }} .promo-block--index-2 .promo-block--content-wrapper{
  border-left: 4px solid rgba(17,24,39,.16);
}

#shopify-section-{{ section.id }} .promo-block--index-3 .promo-block--button{
  padding-inline: 22px;
}

/* Placeholder ohne Bild */
#shopify-section-{{ section.id }} .promo-block--placeholder{
  background: linear-gradient(135deg, #eef2f7 0%, #dde4ee 100%);
}

#shopify-section-{{ section.id }} .promo-block--placeholder::after{
  display: none;
}

/* Mobile */
@media (max-width: 767px){
  #shopify-section-{{ section.id }} .promo-block--content-wrapper{
    max-width: 100%;
    padding: 14px 14px 16px;
    border-radius: 14px;
  }

  #shopify-section-{{ section.id }} .promo-block--header{
    font-size: clamp(20px, 6vw, 28px);
  }
}


/* ===== Feintuning: weniger Weiß, mehr Blur ===== */

#shopify-section-{{ section.id }} .promo-block{
  --pb-radius: clamp(18px, 2vw, 28px);
  --pb-shadow: 0 14px 35px rgba(11,15,25,.12);
  --pb-shadow-hover: 0 22px 48px rgba(11,15,25,.18);

  /* vorher war es deutlich weißer */
  --pb-panel-bg: rgba(255,255,255,.10);
  --pb-panel-bg-hover: rgba(255,255,255,.14);

  /* helles, leichtes Weiß für Border */
  --pb-panel-border: rgba(255,255,255,.52);

  --pb-panel-shadow: 0 8px 24px rgba(11,15,25,.10);

  position: relative;
  border-radius: var(--pb-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--pb-shadow);
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

/* optional: Kontrast-Overlay etwas sanfter */
#shopify-section-{{ section.id }} .promo-block::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(12,18,30,.18) 0%,
    rgba(12,18,30,.08) 30%,
    rgba(12,18,30,0) 58%
  );
}

#shopify-section-{{ section.id }} .promo-block--content{
  position: relative;
  z-index: 2;
  padding: clamp(14px, 1.2vw, 20px);
}

/* Das ist der wichtigste Part für "nur blurry" */
#shopify-section-{{ section.id }} .promo-block--content-wrapper{
  max-width: min(56ch, 88%);
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: clamp(12px, 1.4vw, 18px);

  /* deutlich transparenter statt weißer Fläche */
  background: var(--pb-panel-bg);
  border: 1px solid var(--pb-panel-border);
  box-shadow: var(--pb-panel-shadow);

  /* mehr Blur, weniger Weiß */
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);

  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}

/* Hover: nur minimal heller */
@media (hover: hover) and (pointer: fine){
  #shopify-section-{{ section.id }} .promo-block:hover{
    transform: translateY(-4px);
    box-shadow: var(--pb-shadow-hover);
  }

  #shopify-section-{{ section.id }} .promo-block:hover .promo-block--content-wrapper{
    transform: translateY(-2px);
    background: var(--pb-panel-bg-hover);
    border-color: rgba(255,255,255,.60);
    box-shadow: 0 12px 28px rgba(11,15,25,.14);
  }
}

/* Secondary Button ebenfalls weniger weiß */
#shopify-section-{{ section.id }} .promo-block--button.button-secondary,
#shopify-section-{{ section.id }} .button-secondary.promo-block--button{
  background: rgba(255,255,255,.16);
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ===== Glass ohne Border + Blur-Fade ===== */

#shopify-section-{{ section.id }} .promo-block--content-wrapper{
  position: relative;
  max-width: min(56ch, 88%);
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: clamp(12px, 1.4vw, 18px);

  /* Kein klassischer Kasten-Look */
  background: transparent;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}

/* Inhalt über dem Blur-Layer halten */
#shopify-section-{{ section.id }} .promo-block--content-wrapper > *{
  position: relative;
  z-index: 2;
}

/* Blur-Layer mit weichem Übergang nach außen */
#shopify-section-{{ section.id }} .promo-block--content-wrapper::before{
  content: "";
  position: absolute;
  inset: -6px; /* wie weit der Blur über den Content hinausgeht */
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;

  /* Mini-Tint nötig, damit Layer sauber rendert */
  background: rgba(255,255,255,.03);

  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);

  /* Weicher Fade: Mitte stark, Rand läuft auf 0 aus */
  -webkit-mask-image: radial-gradient(
    140% 120% at 50% 50%,
    rgba(0,0,0,1) 52%,
    rgba(0,0,0,.88) 66%,
    rgba(0,0,0,.52) 82%,
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    140% 120% at 50% 50%,
    rgba(0,0,0,1) 52%,
    rgba(0,0,0,.88) 66%,
    rgba(0,0,0,.52) 82%,
    rgba(0,0,0,0) 100%
  );

  transition: backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease, opacity .35s ease;
}

/* Optional Hover etwas "glossier" */
@media (hover: hover) and (pointer: fine){
  #shopify-section-{{ section.id }} .promo-block:hover .promo-block--content-wrapper::before{
    backdrop-filter: blur(14px) saturate(128%);
    -webkit-backdrop-filter: blur(14px) saturate(128%);
    opacity: 1;
  }
}



/* ===== Produktseite: Hauptbild kleiner + Schatten ===== */
.template-product :is(.product__media, .product__media-item, [data-product-media]) img {
  width: 86% !important;
  max-width: 620px !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  border-radius: 16px !important;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.24)) !important;
}

/* Schatten darf nicht abgeschnitten werden */
.template-product :is(.product__media, .product__media-item, [data-product-media]) {
  overflow: visible !important;
}

/* Thumbnails NICHT verändern */
.template-product :is(.product__thumbnails, [data-product-thumbnails]) img {
  width: 100% !important;
  max-width: none !important;
  filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}



/* =========================================
   Product Form – Modern Refresh
   Scope: .product-form--modern
   ========================================= */

.product-form--modern {
  --pf-radius-xs: 10px;
  --pf-radius-sm: 12px;
  --pf-radius-md: 14px;
  --pf-radius-lg: 18px;
  --pf-radius-xl: 22px;

  --pf-border: #e5e7eb;
  --pf-border-strong: #d1d5db;
  --pf-bg: #ffffff;
  --pf-bg-soft: #f8fafc;
  --pf-text: #0f172a;
  --pf-muted: #64748b;
  --pf-accent: #111827;

  --pf-shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.06);
  --pf-shadow-md: 0 10px 24px rgba(2, 6, 23, 0.10);
}

/* Gleichmäßiger vertikaler Rhythmus */
.product-form--modern > * + * {
  margin-top: 14px;
}

/* Sektionen als klare "Cards" */
.product-form--modern .variant-selection,
.product-form--modern .recipient-disclosure,
.product-form--modern .product-form--atc {
  display: block;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 14px;
  box-shadow: var(--pf-shadow-sm);
}

/* Option-Gruppen */
.product-form--modern .form-options,
.product-form--modern .options-selection__option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-form--modern .options-selection__option-header {
  margin-bottom: 8px;
}

.product-form--modern .options-selection__option-name,
.product-form--modern .form-field-title {
  font-weight: 600;
  color: var(--pf-text);
  font-size: 0.95rem;
  line-height: 1.3;
}

/* Chips für Radio/Optionen */
.product-form--modern .options-selection__option-value-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--pf-border);
  border-radius: 999px; /* deutliche Rundung */
  background: var(--pf-bg-soft);
  color: var(--pf-text);
  cursor: pointer;
  transition: all 0.18s ease;
}

/* Häufige Strukturen für "selected" abdecken */
.product-form--modern .options-selection__option-value-input:checked + .options-selection__option-value-name,
.product-form--modern .options-selection__option-value-input:checked + .options-selection__option-value-label,
.product-form--modern .options-selection__option-value[aria-checked="true"] .options-selection__option-value-label {
  border-color: var(--pf-accent);
  background: #eef2ff;
  box-shadow: inset 0 0 0 1px var(--pf-accent);
  font-weight: 600;
}

/* Swatches runder */
.product-form--modern .option-value-swatch-wrapper,
.product-form--modern .swatch,
.product-form--modern .swatch-inner {
  border-radius: 999px !important;
}

/* Inputs / Selects / Textareas */
.product-form--modern .form-field-input,
.product-form--modern .form-field-select,
.product-form--modern .recipient-form__input,
.product-form--modern .recipient-form__input--message,
.product-form--modern input[type="date"],
.product-form--modern select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  background: #fff;
  color: var(--pf-text);
  padding: 10px 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.product-form--modern textarea {
  min-height: 104px;
  resize: vertical;
}

/* Hover/Fokus */
.product-form--modern .form-field-input:hover,
.product-form--modern .form-field-select:hover,
.product-form--modern .recipient-form__input:hover,
.product-form--modern select:hover,
.product-form--modern textarea:hover {
  border-color: var(--pf-border-strong);
}

.product-form--modern :is(
  .form-field-input,
  .form-field-select,
  .recipient-form__input,
  .options-selection__option-value-label,
  .product-form--atc-button,
  .shopify-payment-button__button
):focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.22);
  outline-offset: 2px;
}

/* Recipient Details sauberer */
.product-form--modern .recipient-disclosure__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.product-form--modern .recipient-disclosure__summary::-webkit-details-marker {
  display: none;
}
.product-form--modern .recipient-disclosure[open] .recipient-disclosure__summary {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--pf-border);
}

.product-form--modern .recipient-form__field + .recipient-form__field {
  margin-top: 10px;
}

.product-form--modern .recipient-form__label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--pf-text);
}

.product-form--modern .recipient-form__max-characters-message {
  color: var(--pf-muted);
}

/* ATC-Zone moderner + klarer */
.product-form--modern .product-form__action-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: stretch;
}

/* Falls quantity-selector so heißt (typisch): */
.product-form--modern .quantity-selector {
  min-width: 110px;
}

/* Hauptbutton */
.product-form--modern .product-form--atc-button {
  min-height: 50px;
  width: 100%;
  border: 0;
  border-radius: var(--pf-radius-md);
  background: var(--pf-accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--pf-shadow-md);
  transition: transform 0.14s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.product-form--modern .product-form--atc-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.product-form--modern .product-form--atc-button:disabled,
.product-form--modern .product-form--atc-button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Dynamic Checkout in eigene Zeile */
.product-form--modern .shopify-payment-button {
  grid-column: 1 / -1;
}
.product-form--modern .shopify-payment-button__button,
.product-form--modern .shopify-payment-button__button--unbranded {
  border-radius: var(--pf-radius-md) !important;
  overflow: hidden;
  min-height: 50px;
}

/* Local pickup optisch einheitlich */
.product-form--modern .surface-pick-up {
  margin-top: 12px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  padding: 10px 12px;
  background: var(--pf-bg-soft);
}

/* Mobile Feintuning */
@media (max-width: 767px) {
  .product-form--modern .product-form__action-wrapper {
    grid-template-columns: 1fr;
  }

  .product-form--modern .quantity-selector {
    min-width: 0;
  }
}

/* Weniger Motion wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  .product-form--modern * {
    transition: none !important;
  }
}

/* --- Varianten-Auswahl ohne umkreiste Chips --- */
.product-form--modern .options-selection__option-value-label {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 4px 0 !important;
}

/* Ausgewählte Variante: nur Text-Highlight statt Kreis/Outline */
.product-form--modern .options-selection__option-value-input:checked + .options-selection__option-value-name,
.product-form--modern .options-selection__option-value-input:checked + .options-selection__option-value-label,
.product-form--modern .options-selection__option-value[aria-checked="true"] .options-selection__option-value-label {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}

/* Hover ohne Chip-Effekt */
.product-form--modern .options-selection__option-value-label:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.85;
}

/* Falls Swatches genutzt werden: keine erzwungene Kreisform */
.product-form--modern .option-value-swatch-wrapper,
.product-form--modern .swatch,
.product-form--modern .swatch-inner {
  border-radius: 8px !important;
}


/* --- Varianten-Auswahl: subtil, modern, ohne harte Umkreisung --- */
.product-form--modern .options-selection__option-value-label {
  border: 1px solid transparent !important;   /* kein sichtbarer Ring */
  border-radius: 10px !important;             /* weiche Kanten, nicht rund */
  background: transparent !important;
  box-shadow: none !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* Hover: sehr leichtes Feedback */
.product-form--modern .options-selection__option-value-label:hover {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Aktiv: dezent hinterlegt statt umkreist */
.product-form--modern .options-selection__option-value-input:checked + .options-selection__option-value-name,
.product-form--modern .options-selection__option-value-input:checked + .options-selection__option-value-label,
.product-form--modern .options-selection__option-value[aria-checked="true"] .options-selection__option-value-label {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Fokus bleibt zugänglich, aber weich */
.product-form--modern .options-selection__option-value-label:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.25) !important;
  outline-offset: 2px;
}

/* Swatches nicht kreisförmig erzwingen */
.product-form--modern .option-value-swatch-wrapper,
.product-form--modern .swatch,
.product-form--modern .swatch-inner {
  border-radius: 10px !important;
}


/* =========================================
   Compact Spacing Override
   (am ENDE deines <style> einfügen)
   ========================================= */

/* Weniger Abstand zwischen den Hauptblöcken */
.product-form--modern > * + * {
  margin-top: 8px !important; /* vorher deutlich größer */
}

/* Karten kompakter */
.product-form--modern .variant-selection,
.product-form--modern .recipient-disclosure,
.product-form--modern .product-form--atc {
  padding: 10px !important;
  border-radius: 14px !important;
}

/* Optionen enger zusammen */
.product-form--modern .form-options,
.product-form--modern .options-selection__option-values {
  gap: 6px !important;
}

.product-form--modern .options-selection__option-header {
  margin-bottom: 4px !important;
}

/* Falls Theme eigene Margins auf Option-Items setzt */
.product-form--modern .options-selection__option-value {
  margin: 0 !important;
}

/* Labels + Felder dichter */
.product-form--modern .form-field-title,
.product-form--modern .recipient-form__label {
  margin-bottom: 4px !important;
}

/* Input-Höhe etwas kleiner */
.product-form--modern .form-field-input,
.product-form--modern .form-field-select,
.product-form--modern .recipient-form__input,
.product-form--modern input[type="date"],
.product-form--modern select {
  min-height: 40px !important;
  padding: 8px 10px !important;
}

/* Textarea kompakter */
.product-form--modern textarea,
.product-form--modern .recipient-form__input--message {
  min-height: 84px !important;
  padding: 8px 10px !important;
}

/* Recipient-Form enger */
.product-form--modern .recipient-form__field + .recipient-form__field {
  margin-top: 6px !important;
}

/* ATC-Zeile enger */
.product-form--modern .product-form__action-wrapper {
  gap: 8px !important;
}

.product-form--modern .product-form--atc-button,
.product-form--modern .shopify-payment-button__button,
.product-form--modern .shopify-payment-button__button--unbranded {
  min-height: 46px !important;
}

/* Local pickup kompakter */
.product-form--modern .surface-pick-up {
  margin-top: 8px !important;
  padding: 8px 10px !important;
}

/* Mobile: noch etwas dichter */
@media (max-width: 767px) {
  .product-form--modern > * + * {
    margin-top: 6px !important;
  }

  .product-form--modern .variant-selection,
  .product-form--modern .recipient-disclosure,
  .product-form--modern .product-form--atc {
    padding: 9px !important;
  }
}



/* =========================================
   Compact Spacing Override
   (am ENDE deines <style> einfügen)
   ========================================= */

/* Weniger Abstand zwischen den Hauptblöcken */
.product-form--modern > * + * {
  margin-top: 8px !important; /* vorher deutlich größer */
}

/* Karten kompakter */
.product-form--modern .variant-selection,
.product-form--modern .recipient-disclosure,
.product-form--modern .product-form--atc {
  padding: 10px !important;
  border-radius: 14px !important;
}

/* Optionen enger zusammen */
.product-form--modern .form-options,
.product-form--modern .options-selection__option-values {
  gap: 6px !important;
}

.product-form--modern .options-selection__option-header {
  margin-bottom: 4px !important;
}

/* Falls Theme eigene Margins auf Option-Items setzt */
.product-form--modern .options-selection__option-value {
  margin: 0 !important;
}

/* Labels + Felder dichter */
.product-form--modern .form-field-title,
.product-form--modern .recipient-form__label {
  margin-bottom: 4px !important;
}

/* Input-Höhe etwas kleiner */
.product-form--modern .form-field-input,
.product-form--modern .form-field-select,
.product-form--modern .recipient-form__input,
.product-form--modern input[type="date"],
.product-form--modern select {
  min-height: 40px !important;
  padding: 8px 10px !important;
}

/* Textarea kompakter */
.product-form--modern textarea,
.product-form--modern .recipient-form__input--message {
  min-height: 84px !important;
  padding: 8px 10px !important;
}

/* Recipient-Form enger */
.product-form--modern .recipient-form__field + .recipient-form__field {
  margin-top: 6px !important;
}

/* ATC-Zeile enger */
.product-form--modern .product-form__action-wrapper {
  gap: 8px !important;
}

.product-form--modern .product-form--atc-button,
.product-form--modern .shopify-payment-button__button,
.product-form--modern .shopify-payment-button__button--unbranded {
  min-height: 46px !important;
}

/* Local pickup kompakter */
.product-form--modern .surface-pick-up {
  margin-top: 8px !important;
  padding: 8px 10px !important;
}

/* Mobile: noch etwas dichter */
@media (max-width: 767px) {
  .product-form--modern > * + * {
    margin-top: 6px !important;
  }

  .product-form--modern .variant-selection,
  .product-form--modern .recipient-disclosure,
  .product-form--modern .product-form--atc {
    padding: 9px !important;
  }
}




/* =========================================
   HARD COMPACT OVERRIDE (verkleinert Abstände wirklich)
   ========================================= */
form.product-form--modern {
  margin: 0 !important;
  padding: 0 !important;
}

/* Abstand zwischen Hauptbereichen deutlich reduzieren */
form.product-form--modern > * + * {
  margin-top: 6px !important;
}

/* Karten kompakter + keine zusätzlichen Außenabstände */
form.product-form--modern .variant-selection,
form.product-form--modern .recipient-disclosure,
form.product-form--modern .product-form--atc {
  margin: 0 !important;
  padding: 9px !important;
  border-radius: 12px !important;
}

/* Sehr häufige Abstandstreiber im Variantenteil */
form.product-form--modern .options-selection--compact,
form.product-form--modern .options-selection--compact .options-selection__option,
form.product-form--modern .options-selection--compact .form-field {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Abstand zwischen Option-Gruppen (z. B. Farbe/Größe) */
form.product-form--modern .options-selection--compact .options-selection__option + .options-selection__option {
  margin-top: 6px !important;
}

/* Header zu Values enger */
form.product-form--modern .options-selection--compact .options-selection__option-header {
  margin: 0 0 3px 0 !important;
}

/* Werte enger packen */
form.product-form--modern .options-selection--compact .options-selection__option-values,
form.product-form--modern .options-selection--compact .form-options {
  margin: 0 !important;
  gap: 4px !important;
}

/* Varianten-Buttons kompakter, aber weiterhin klickbar */
form.product-form--modern .options-selection--compact .options-selection__option-value-label {
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}



/* =========================================================
   CENTER CARD REDESIGN (klar, ruhig, bessere Hierarchie)
   -> am Ende des <style> einfügen
   ========================================================= */

#fg-hero-{{ section.id }}{
  --center-pad: clamp(14px, 1.8vw, 22px);
  --center-media-h: 44%;
  --center-media-radius: calc(var(--radius) - 10px);
}

/* Center Card als klare "Produktkarte" */
#fg-hero-{{ section.id }} .card.card-center{
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      color-mix(in srgb, var(--card-bg) 90%, #f5f7fb) 100%
    );
  border: 1px solid color-mix(in srgb, var(--card-border) 74%, #cfd6e2);
  box-shadow:
    0 28px 62px rgba(10,12,20,.18),
    0 10px 22px rgba(10,12,20,.09),
    inset 0 1px 0 rgba(255,255,255,.96);
}

/* Das dunkle Overlay der Standardkarten raus -> cleaner */
#fg-hero-{{ section.id }} .card.card-center::after{
  display: none;
}

/* Medienbereich oben (Bild/Placeholder) */
#fg-hero-{{ section.id }} .card.card-center::before{
  left: var(--center-pad);
  right: var(--center-pad);
  top: var(--center-pad);
  height: var(--center-media-h);
  border-radius: var(--center-media-radius);

  border: 1px solid color-mix(in srgb, var(--card-border) 72%, transparent);
  box-shadow:
    0 7px 16px rgba(10,12,20,.11),
    inset 0 1px 0 rgba(255,255,255,.7);

  background-color: #f2f5fa;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20160%20110%27%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%27148%27%20height%3D%2798%27%20rx%3D%2714%27%20fill%3D%27none%27%20stroke%3D%27%23B7C2CE%27%20stroke-width%3D%276%27/%3E%3Ccircle%20cx%3D%2754%27%20cy%3D%2744%27%20r%3D%2710%27%20fill%3D%27%23B7C2CE%27/%3E%3Cpath%20d%3D%27M28%2088l28-30%2020%2020%2014-12%2034%2022H28z%27%20fill%3D%27%23B7C2CE%27/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(255,255,255,.7), rgba(230,236,245,.6));
  background-repeat: no-repeat, no-repeat;
  background-size: 56% auto, cover;
  background-position: center, center;
  transform: translateZ(2px);
}

/* Wenn Bild gesetzt ist: leichter Verlauf für bessere Lesbarkeit */
#fg-hero-{{ section.id }} .card.card-center.has-image::before{
  background-image:
    linear-gradient(to top, rgba(10,12,20,.24), rgba(10,12,20,.02) 52%),
    var(--card-image);
  background-size: cover, cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Headline-Block klar unten links statt "schwebend mittig" */
#fg-hero-{{ section.id }} .card.card-center .card-headline{
  left: var(--center-pad);
  right: var(--center-pad);
  top: calc(var(--center-pad) + var(--center-media-h) + clamp(14px, 1.6vw, 20px));
  z-index: 10;

  display: grid;
  gap: 8px;
  justify-items: start;
  text-align: left;
  pointer-events: none;
}

#fg-hero-{{ section.id }} .card.card-center .card-headline::before{
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 40%, #ffffff)
  );
  margin-bottom: 2px;
}

#fg-hero-{{ section.id }} .card.card-center .front-title{
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 2.35vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 18ch;
}

#fg-hero-{{ section.id }} .card.card-center .front-sub{
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 650;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 62%, #5b6575);
}

/* CTA als klare Action-Zeile statt riesige Pill */
#fg-hero-{{ section.id }} .card.card-center .cta-card-main{
  left: var(--center-pad);
  right: var(--center-pad);
  bottom: var(--center-pad);
  width: auto;
  min-width: 0;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 14px;

  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 850;
  letter-spacing: 0;
  justify-content: space-between;

  border: 1px solid color-mix(in srgb, var(--cta-bg-end) 48%, transparent);
  box-shadow: 0 10px 24px rgba(10,12,20,.18);

  transform: translateZ(8px);
}

/* Verhindert Konflikt mit globalem .cta-main:hover (translateZ behalten) */
#fg-hero-{{ section.id }} .card.card-center .cta-card-main:hover{
  transform: translateY(-1px) translateZ(8px);
  filter: brightness(1.03);
}

#fg-hero-{{ section.id }} .card.card-center .cta-card-main:active{
  transform: translateY(0) translateZ(8px);
}

/* Optional: Nebenkarten minimal ruhiger -> Fokus auf Mitte */
#fg-hero-{{ section.id }} .deck[data-state="expanded"] .card:not(.card-center){
  filter: saturate(.9) contrast(.98);
}

/* ---------- Responsive Feinschliff ---------- */
@media (max-width: 640px){
  #fg-hero-{{ section.id }}{
    --center-pad: 12px;
    --center-media-h: 43%;
  }

  #fg-hero-{{ section.id }} .card.card-center .card-headline{
    top: calc(var(--center-pad) + var(--center-media-h) + 12px);
    gap: 6px;
  }

  #fg-hero-{{ section.id }} .card.card-center .front-title{
    font-size: clamp(18px, 5.8vw, 24px);
    max-width: 15ch;
  }

  #fg-hero-{{ section.id }} .card.card-center .front-sub{
    font-size: 12px;
  }

  #fg-hero-{{ section.id }} .card.card-center .cta-card-main{
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 12px;
  }
}


/* Box-Hintergrund: statt blurry/glass -> feste wählbare Farbe */
.promo-block .promo-block--content-wrapper {
  background: var(--promo-box-bg, rgba(0,0,0));
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Falls dein Theme den Blur eher auf dem Klick-Wrapper hat */
.promo-block [data-promo-block-content] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Falls ein ::before Overlay den Blur/Glass macht */
.promo-block [data-promo-block-content]::before {
  background: var(--promo-box-bg, rgba(0,0,0,0)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* =========================================================
   Promo Block: Glas/Blur Overlay entfernen + Box-Farbe nutzen
   ========================================================= */

/* 1) Der eigentliche Box-Background */
.promo-block .promo-block--content-wrapper {
  background: var(--promo-box-bg, rgba(0,0,0)) !important;
}

/* 2) Wenn ein "Glass"-Overlay auf dem Wrapper liegt (häufig via ::before/::after) */
.promo-block [data-promo-block-content]::before,
.promo-block [data-promo-block-content]::after,
.promo-block .promo-block--content::before,
.promo-block .promo-block--content::after {
  /* Overlay weg oder neutralisieren */
  content: none !important;

  /* Falls content:none bei deinem Theme nicht greift, neutralisieren wir es zusätzlich: */
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* 3) Falls der Blur direkt auf dem Klick-Wrapper liegt */
.promo-block [data-promo-block-content],
.promo-block .promo-block--content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background: transparent !important; /* wichtig, damit nicht noch ein "Glass"-BG drüber liegt */
}

/* 4) "liegt drüber": sicherstellen, dass dein Content über allem liegt */
.promo-block .promo-block--content-wrapper {
  position: relative !important;
  z-index: 2 !important;
}

/* 5) Falls dein Theme ein Overlay-Element im Block hat (manche nutzen .promo-block--overlay o.ä.) */
.promo-block .promo-block--overlay,
.promo-block .promo-block__overlay,
.promo-block .promo-block--glass,
.promo-block .glass,
.promo-block .backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}


/* =========================================================
   NUCLEAR: Promo-Block Glas/Blur wirklich komplett entfernen
   ========================================================= */

/* Promo-Block isolieren, damit fremde Overlay-Layer nicht "drüber" mischen */
.promo-block {
  isolation: isolate !important;
}

/* Deine Box soll sichtbar bleiben */
.promo-block .promo-block--content-wrapper {
  position: relative !important;
  z-index: 10 !important;
  background: var(--promo-box-bg, #000) !important;
  /* typische "Glas"-Optik-Komponenten entfernen */
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ALLES innerhalb des Promo-Blocks: Blur/Filter abschalten */
.promo-block,
.promo-block * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Pseudo-Elemente sind sehr oft der Übeltäter: komplett ausknipsen */
.promo-block *::before,
.promo-block *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
  /* wenn irgendwas "drüber liegt": unsichtbar machen */
  background: transparent !important;
  opacity: 1 !important;
}

/* Häufige Overlay-Kandidaten direkt entfernen (falls vorhanden) */
.promo-block .overlay,
.promo-block .Overlay,
.promo-block .glass,
.promo-block .Glass,
.promo-block .backdrop,
.promo-block .Backdrop,
.promo-block .promo-block--overlay,
.promo-block .promo-block__overlay,
.promo-block .promo-overlay,
.promo-block .promo-glass {
  display: none !important;
}

/* Falls dein Theme den Glas-Effekt auf dem Klick-Wrapper selbst erzeugt */
.promo-block [data-promo-block-content],
.promo-block .promo-block--content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* Deckender Box-Background */
.promo-block .promo-block--content-wrapper {
  background-color: var(--promo-box-bg, #000) !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Häufigster Grund für "leicht transparent": opacity am Wrapper/Link-Container */
.promo-block [data-promo-block-content],
.promo-block .promo-block--content {
  opacity: 1 !important;              /* <- wenn hier vorher 0.8 o.ä. stand, war das der Übeltäter */
  background: transparent !important;  /* verhindert zusätzliches halbtransparentes Layer */
}

/* Falls noch ein Overlay/Glass-Pseudo-Element drüber liegt */
.promo-block [data-promo-block-content]::before,
.promo-block [data-promo-block-content]::after,
.promo-block .promo-block--content::before,
.promo-block .promo-block--content::after {
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.promo-block {
  opacity: 1 !important;
}


/* Entfernt den schwarzen Kasten/Overlay hinter dem Promo-Text */
.promo-block--content,
.promo-block--content-wrapper {
  background: transparent !important;
}

/* Falls das Overlay über ein Pseudo-Element kommt */
.promo-block--content::before,
.promo-block--content::after,
.promo-block--content-wrapper::before,
.promo-block--content-wrapper::after {
  content: none !important;
  display: none !important;
}

/* 1) Entfernt Hintergrund/Overlay direkt auf dem Content-Link/Wrapper */
.promo-block [data-promo-block-content] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2) Entfernt Hintergrund im inneren Wrapper */
.promo-block [data-promo-block-content] .promo-block--content-wrapper {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) Falls der “schwarze Block” als ::before/::after Overlay kommt */
.promo-block [data-promo-block-content]::before,
.promo-block [data-promo-block-content]::after,
.promo-block [data-promo-block-content] .promo-block--content-wrapper::before,
.promo-block [data-promo-block-content] .promo-block--content-wrapper::after,
.promo-block .promo-block--background::before,
.promo-block .promo-block--background::after {
  content: none !important;
  display: none !important;
}

/* Dynamische Textfarbe aus Shopify (block.settings.color -> --promo-text-color) */
.promo-block .promo-block--header,
.promo-block .promo-block--text,
.promo-block .promo-block--button{
  color: var(--promo-text-color) !important;
}


.productcard--minimal .productcard-btn-primary,
.productcard--minimal .productcard-btn-primary.button-primary,
.productcard--minimal .productcard-btn-primary[type="button"] {
  background: var(--pc-btn-primary-bg) !important;
  color: var(--pc-btn-primary-text) !important;
  border-color: var(--pc-btn-primary-bg) !important;
}

.productcard--minimal .productcard-btn-primary:hover,
.productcard--minimal .productcard-btn-primary:focus,
.productcard--minimal .productcard-btn-primary:active {
  background: var(--pc-btn-primary-bg) !important;
  color: var(--pc-btn-primary-text) !important;
  border-color: var(--pc-btn-primary-bg) !important;
  opacity: 0.92;
}

.productcard--minimal .productcard-btn-primary::before,
.productcard--minimal .productcard-btn-primary::after {
  background: var(--pc-btn-primary-bg) !important;
  border-color: var(--pc-btn-primary-bg) !important;
}

.productcard--minimal .productcard-btn-secondary,
.productcard--minimal .productcard-btn-secondary.button-secondary,
.productcard--minimal .productcard-btn-secondary[type="button"] {
  background: var(--pc-btn-secondary-bg) !important;
  color: var(--pc-btn-secondary-text) !important;
  border: 1px solid var(--pc-btn-secondary-border) !important;
}

.productcard--minimal .productcard-btn-secondary:hover,
.productcard--minimal .productcard-btn-secondary:focus,
.productcard--minimal .productcard-btn-secondary:active {
  background: var(--pc-btn-secondary-bg) !important;
  color: var(--pc-btn-secondary-text) !important;
  border: 1px solid var(--pc-btn-secondary-border) !important;
  opacity: 0.92;
}

.productcard--minimal .productcard-btn-secondary::before,
.productcard--minimal .productcard-btn-secondary::after {
  background: var(--pc-btn-secondary-bg) !important;
  border-color: var(--pc-btn-secondary-border) !important;
}

.productcard--minimal .productcard-btn-primary[disabled],
.productcard--minimal .productcard-btn-secondary[disabled],
.productcard--minimal .productcard-btn-primary.disabled,
.productcard--minimal .productcard-btn-secondary.disabled {
  opacity: 0.6 !important;
  cursor: not-allowed;
}