/** Shopify CDN: Minification failed

Line 143:0 All "@import" rules must come first

**/
/* ==========================================================================
   LuCycle Micro-Interactions (added 2026-04-25)
   --------------------------------------------------------------------------
   Zentrale Datei für 5 brand-konsistente Micro-Interactions.
   Brand-Lila: #6923fb. Reduced-Motion wird respektiert (scoped).
   Klassen-Präfix: .lc-* — kein Scope-Bleeding in Standard-Dawn.
   ========================================================================== */

:root {
  --lc-accent: #6923fb;
  --lc-accent-rgb: 105, 35, 251;
  --lc-dur-fast: 150ms;
  --lc-dur-med: 300ms;
  --lc-ease: cubic-bezier(.2, .8, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Hero-CTA — Lila-Glow + leichtes Scale on Hover
   Selektor: nur Slideshow- und Image-Banner-Buttons + Klassen-Hook .lc-cta-glow
   (Newsletter-/Email-Banner werden bewusst ausgenommen.)
   -------------------------------------------------------------------------- */
[id*="image_banner"] .button--primary,
[id*="slideshow"] .button--primary,
.lc-cta-glow {
  transition:
    transform var(--lc-dur-med) var(--lc-ease),
    box-shadow var(--lc-dur-med) var(--lc-ease);
}

[id*="image_banner"] .button--primary:hover,
[id*="image_banner"] .button--primary:focus-visible,
[id*="slideshow"] .button--primary:hover,
[id*="slideshow"] .button--primary:focus-visible,
.lc-cta-glow:hover,
.lc-cta-glow:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 3px rgba(var(--lc-accent-rgb), 0.18),
    0 8px 24px rgba(var(--lc-accent-rgb), 0.28);
}

[id*="image_banner"] .button--primary:active,
[id*="slideshow"] .button--primary:active,
.lc-cta-glow:active {
  transform: translateY(0) scale(0.99);
}

/* --------------------------------------------------------------------------
   2. Produkt-Cards — Cross-Fade beim Bild-Swap
   Hover-Lift + first-child-Zoom werden in lucycle-brand.css definiert
   und hier bewusst NICHT überschrieben. Wir ergänzen nur die opacity-
   Transition auf das zweite Bild für ein sanfteres Cross-Fade.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  .product-card-wrapper .media.media--hover-effect > img:nth-child(2) {
    transition: opacity var(--lc-dur-med) var(--lc-ease);
  }
}

/* --------------------------------------------------------------------------
   3. Add-to-Cart — Press-Feedback (scale 0.97) + Lila-Pulse nach Click
   Pulse via Klasse .lc-pulse (600ms, gesetzt durch JS in global.js)
   -------------------------------------------------------------------------- */
.product-form__submit {
  transition: transform var(--lc-dur-fast) var(--lc-ease);
}

.product-form__submit:active:not([disabled]) {
  transform: scale(0.97);
}

.product-form__submit.lc-pulse {
  animation: lc-pulse-anim 600ms var(--lc-ease);
}

@keyframes lc-pulse-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--lc-accent-rgb), 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(var(--lc-accent-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--lc-accent-rgb), 0);
  }
}

/* --------------------------------------------------------------------------
   4. Header-Cart-Icon — Bounce wenn Cart-Update
   Klasse .lc-bounce wird durch JS gesetzt (subscribed auf cart-update Event)
   -------------------------------------------------------------------------- */
#cart-icon-bubble.lc-bounce {
  animation: lc-bounce-anim 600ms var(--lc-ease);
}

@keyframes lc-bounce-anim {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-6px) scale(1.12); }
  55%  { transform: translateY(0) scale(0.96); }
  75%  { transform: translateY(-2px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   5. Newsletter-Form — Focus-Glow + Success-State
   -------------------------------------------------------------------------- */
.newsletter-form .field__input {
  transition:
    box-shadow var(--lc-dur-med) var(--lc-ease),
    border-color var(--lc-dur-med) var(--lc-ease);
}

.newsletter-form .field__input:focus,
.newsletter-form .field__input:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--lc-accent-rgb), 0.22);
  border-color: var(--lc-accent);
}

.newsletter-form__message--success {
  animation: lc-fade-up 400ms var(--lc-ease);
}

@keyframes lc-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   LuCycle-Wordmark-Font (Modak via Google Fonts) — für das Wort "Bike"
   im Hero. Closeup-Match zum LuCycle-Logo-Wordmark.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');

.lc-bike-mark {
  font-family: 'Modak', system-ui, sans-serif;
  color: var(--lc-accent);
  font-weight: 400;
  /* leichter optischer Ausgleich, weil Modak optisch grösser wirkt */
  font-size: 0.92em;
  letter-spacing: 0;
  display: inline-block;
}

/* "Smile." Morph-Container: Text und Smiley liegen übereinander.
   Beim Scrollen (.is-morphed) blendet Text aus, Smiley ein. */
.lc-smile-mark {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  /* min-width damit der Container nicht kollabiert wenn Text-Span verschwindet */
  min-height: 1em;
}
.lc-smile-text {
  display: inline-block;
  transition: opacity 320ms var(--lc-ease), transform 320ms var(--lc-ease);
  will-change: opacity, transform;
}
.lc-smile-emoji {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.4);
  opacity: 0;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lc-accent);
  transition: opacity 320ms var(--lc-ease), transform 420ms var(--lc-ease-spring, cubic-bezier(.34, 1.56, .64, 1));
  pointer-events: none;
}
.lc-smile-emoji .lc-smile-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lc-smile-mark.is-morphed .lc-smile-text {
  opacity: 0 !important;
  transform: translateY(-12px) !important;
}
.lc-smile-mark.is-morphed .lc-smile-emoji {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) rotate(0deg) !important;
}

/* --------------------------------------------------------------------------
   6. Hero Banner — Full-Viewport + Wort-pro-Wort gestapelte Headline
   Greift nur auf das Image-Banner auf der Startseite (per Section-ID-Prefix).
   -------------------------------------------------------------------------- */
[id*="image_banner"] .banner--large {
  height: 100vh;
  height: 100svh; /* small viewport für mobile, klammert URL-Bar weg */
  min-height: 100vh;
  min-height: 100svh;
}

[id*="image_banner"] .banner--large .banner__media,
[id*="image_banner"] .banner--large .banner__media img,
[id*="image_banner"] .banner--large .banner__media svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Content-Block links unten/middle, mit Padding für Atemluft */
[id*="image_banner"] .banner__content--middle-left {
  align-items: flex-start;
  justify-content: center;
  padding-left: clamp(2rem, 6vw, 6rem);
}

/* Wort-pro-Wort gestapelte Headline: width: min-content sorgt dafür, dass
   die Box nur so breit ist wie das längste Wort → Browser bricht nach
   jedem Wort um. word-break: keep-all + overflow-wrap: normal stellt sicher,
   dass nicht auf Zeichen-Ebene gebrochen wird (Dawn-Override). */
[id*="image_banner"] .banner__content--middle-left .banner__heading {
  width: min-content;
  line-height: 0.9;
  letter-spacing: -0.025em;
  font-size: clamp(4rem, 13vw, 11rem);
  margin: 0 0 1.5rem 0;
  text-align: left;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal;
}

/* CTA unter der Headline — leicht versetzt, voller Brand-Glow ist schon
   in Sektion 1 oben definiert. */
[id*="image_banner"] .banner__content--middle-left .banner__buttons {
  justify-content: flex-start;
  margin-top: 0;
}

/* Pill-Style für Hero-CTA: runde Ecken, mehr horizontales Padding */
[id*="image_banner"] .button--primary {
  border-radius: 999px !important;
  padding: 1.4rem 3rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
[id*="image_banner"] .button--primary::before,
[id*="image_banner"] .button--primary::after {
  border-radius: 999px !important;
}

/* Mobile: kleinere Schrift, weniger Padding, mehr Abstand zum Header
   damit "Make" nicht hinter den Logo/Header rutscht. */
@media screen and (max-width: 749px) {
  [id*="image_banner"] .banner--large {
    /* Auf Mobile sicheres Viewport-Höhen-Handling */
    height: 100svh;
    min-height: 100svh;
  }
  [id*="image_banner"] .banner__content--middle-left {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0;
    padding-bottom: 3rem;
    align-self: flex-end !important;
    align-items: flex-start;
    justify-content: flex-end;
  }
  [id*="image_banner"] .banner__content--middle-left .banner__heading {
    font-size: clamp(3rem, 15vw, 5.5rem);
    line-height: 0.95;
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------
   6b. Hero — Slide-In aus dem Boden + Scroll-Parallax (Text schneller als Bild)
   - Beim Laden: Heading und CTA fahren von unten ins Bild
   - Beim Scrollen: Text bewegt sich schneller als das Bild (Parallax)
   JS-Hook (in global.js): setzt transform auf .banner__content auf Basis von
   window.scrollY mal Faktor 0.5 (= Text bewegt sich 1.5x so schnell wie der
   Page-Scroll, also 0.5x schneller "wegscrollen" als das Bild).
   -------------------------------------------------------------------------- */
[id*="image_banner"] .banner__content--middle-left {
  will-change: transform;
}

[id*="image_banner"] .banner__content--middle-left .banner__heading,
[id*="image_banner"] .banner__content--middle-left .banner__buttons {
  animation: lc-hero-rise 900ms cubic-bezier(.2, .8, .2, 1) both;
}

[id*="image_banner"] .banner__content--middle-left .banner__buttons {
  animation-delay: 200ms;
}

@keyframes lc-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   Logo-Swap: ersetzte Logo-Variante hat keinen weißen Hintergrund mehr.
   Wrapper-Padding/-Background entfernen, damit das transparente SVG sauber
   über dem Hero-Bild sitzt.
   -------------------------------------------------------------------------- */
.header__heading-logo-wrapper:has(.lc-logo-swapped),
.header__heading-link:has(.lc-logo-swapped) {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.header__heading-logo-wrapper:has(.lc-logo-swapped) {
  width: auto !important;
  max-width: 7.5rem !important;
  height: auto !important;
}
.lc-logo-swapped {
  max-height: 7.5rem !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain;
  display: block;
}
@media screen and (max-width: 749px) {
  .lc-logo-swapped {
    max-height: 5.5rem !important;
  }
}

/* --------------------------------------------------------------------------
   7. Hero-Overlay-Header (only on Homepage when first section is image_banner)
   - Header transparent + weiß über dem Hero
   - Beim Scroll past Hero: solidifiziert mit weißem semi-transparentem BG
   Body bekommt class `lc-hero-overlay` wenn Hero da ist;
   `lc-header-solid` wird beim Scrollen hinzugefügt.
   -------------------------------------------------------------------------- */
body.lc-hero-overlay .header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition:
    background-color 300ms var(--lc-ease),
    color 300ms var(--lc-ease),
    box-shadow 300ms var(--lc-ease);
}

body.lc-hero-overlay .header,
body.lc-hero-overlay .header *:not(svg):not(path):not(.header__icon-bubble) {
  color: #fff !important;
}

/* Mobile-Menu-Drawer-Inhalte: NICHT die weiße Hero-Overlay-Schrift erben.
   Nur das geöffnete Drawer-Inhalt-Panel (#menu-drawer), NICHT der Toggle-Button
   (Hamburger), der ebenfalls im `#Details-menu-drawer-container` sitzt aber
   weiß bleiben soll, wenn der Header transparent über dem Hero liegt. */
#menu-drawer,
#menu-drawer * {
  color: #000 !important;
}

#menu-drawer svg,
#menu-drawer path {
  stroke: #000 !important;
  fill: #000 !important;
}

body.lc-hero-overlay .header__icon svg,
body.lc-hero-overlay .header__icon path {
  stroke: #fff !important;
  color: #fff !important;
}

/* Logo bleibt original — keine Invertierung, da das LuCycle-Logo
   mehrfarbig ist und durch invert() weiß wird. Das Logo selbst soll
   sichtbar bleiben gegen das Hero-Bild. */

body.lc-hero-overlay .header-wrapper a:hover,
body.lc-hero-overlay .header-wrapper button:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Underline-Indikator des aktiven Menüs sollte auch weiß sein */
body.lc-hero-overlay .header__active-menu-item::after,
body.lc-hero-overlay .header__menu-item:hover::after {
  background: #fff !important;
}

/* Hero-Section sollte unter dem absoluten Header durch nach oben gehen
   (das passiert automatisch, da header-wrapper aus dem Flow ist) */

/* --- Solid-State beim Scrollen --- */
body.lc-hero-overlay.lc-header-solid .header-wrapper {
  position: fixed;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.lc-hero-overlay.lc-header-solid .header,
body.lc-hero-overlay.lc-header-solid .header *:not(svg):not(path):not(.header__icon-bubble) {
  color: rgb(var(--color-foreground)) !important;
}

body.lc-hero-overlay.lc-header-solid .header__icon svg,
body.lc-hero-overlay.lc-header-solid .header__icon path {
  stroke: currentColor !important;
  color: currentColor !important;
}

/* (Logo unverändert — siehe Kommentar oben) */

body.lc-hero-overlay.lc-header-solid .header-wrapper a:hover,
body.lc-hero-overlay.lc-header-solid .header-wrapper button:hover {
  color: var(--lc-accent) !important;
}

/* --------------------------------------------------------------------------
   8. "Über mich" / About-Me-Section — größere Headline + Lead-Paragraphen
   Greift auf alle image-with-text-Sections (Section-ID-Prefix).
   -------------------------------------------------------------------------- */
[id*="image_with_text"] .image-with-text__heading {
  font-size: 35px !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

/* Bild mit abgerundeten Ecken + Parallax-Container */
[id*="image_with_text"] .image-with-text__media,
[id*="image_with_text"] .image-with-text__image-item .image-with-text__media,
[id*="image_with_text"] .global-media-settings {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Parallax: Bild ist 10% größer im Container, JS verschiebt es vertikal */
[id*="image_with_text"] .lc-parallax-img {
  height: 110% !important;
  top: -5% !important;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   9. Section-Titel als Pill-Badge (leichtes Lila, weiße Schrift)
   Greift auf featured-collection-Titles + image-with-text-Headings.
   -------------------------------------------------------------------------- */
[id*="featured_collection"] .collection__title .title,
[id*="image_with_text"] .image-with-text__heading,
[id*="collection_list"] .title,
[id*="collection_list"] .collection-list-title,
.collection-hero .collection-hero__title {
  display: inline-block !important;
  background: #6923fb !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.6rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  transition:
    transform var(--lc-dur-med) var(--lc-ease),
    background-color var(--lc-dur-med) var(--lc-ease),
    box-shadow var(--lc-dur-med) var(--lc-ease) !important;
  transform-origin: left center;
}

[id*="featured_collection"] .collection__title .title:hover,
[id*="image_with_text"] .image-with-text__heading:hover,
[id*="collection_list"] .title:hover,
[id*="collection_list"] .collection-list-title:hover,
.collection-hero .collection-hero__title:hover {
  background: #5018d4 !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 4px rgba(var(--lc-accent-rgb), 0.18),
    0 12px 28px rgba(var(--lc-accent-rgb), 0.32);
}

/* Wrapper soll trotzdem korrekt floaten — kein full-width-block */
[id*="featured_collection"] .collection__title {
  text-align: left;
}
@media screen and (max-width: 749px) {
  [id*="featured_collection"] .collection__title .title,
  [id*="image_with_text"] .image-with-text__heading,
  [id*="collection_list"] .title,
  [id*="collection_list"] .collection-list-title,
  .collection-hero .collection-hero__title {
    padding: 0.55rem 1.3rem !important;
    font-size: 30px !important;
  }

  /* Pillen-Parents mittig zentrieren (überschreibt Desktop text-align: left) */
  [id*="featured_collection"] .collection__title,
  [id*="collection_list"] .title-wrapper-with-link,
  [id*="collection_list"] .title-wrapper {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Pillen selbst: transform-origin auf center damit Hover-Lift mittig skaliert */
  [id*="featured_collection"] .collection__title .title,
  [id*="collection_list"] .title,
  [id*="collection_list"] .collection-list-title {
    transform-origin: center center !important;
  }
}

/* Erste 2 Paragraphen (Intro) deutlich größer als Body — "Lead"-Style.
   Px-Werte statt rem, weil Dawn font-size: 62.5% (10px-Base) nutzt. */
[id*="image_with_text"] .image-with-text__text.rte > p:first-child,
[id*="image_with_text"] .image-with-text__text.rte > p:nth-child(2) {
  font-size: 22px !important;
  line-height: 1.5;
}

@media screen and (max-width: 749px) {
  [id*="image_with_text"] .image-with-text__heading {
    font-size: 30px !important;
  }
  [id*="image_with_text"] .image-with-text__text.rte > p:first-child,
  [id*="image_with_text"] .image-with-text__text.rte > p:nth-child(2) {
    font-size: 19px !important;
  }
  /* Mobile: Heading wird per JS vor das Bild verschoben — zentriert + Atemluft */
  [id*="image_with_text"] .image-with-text__heading[data-lc-moved] {
    margin: 0 auto 1.6rem auto !important;
    justify-self: center !important;
    transform-origin: center center !important;
  }
}

/* --------------------------------------------------------------------------
   10. Collection-List on.com-Style: Liste links, Bild rechts beim Hover.
   -------------------------------------------------------------------------- */
[id*="collection_list"] .lc-coll-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 2rem;
}

/* Liste links: nur Titel, keine Cards/Bilder */
[id*="collection_list"] .collection-list {
  display: flex !important;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
[id*="collection_list"] .collection-list__item {
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Original-Card-Hülle transparent machen */
[id*="collection_list"] .card,
[id*="collection_list"] .card-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Nur die Bild/Media-Bereiche verstecken (Title bleibt) */
[id*="collection_list"] .card__inner,
[id*="collection_list"] .card__media,
[id*="collection_list"] .media {
  display: none !important;
}
/* Card-Information-Wrapper auf normale Größe ziehen */
[id*="collection_list"] .card__information,
[id*="collection_list"] .card__content {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

/* Titel als großer Listen-Eintrag */
[id*="collection_list"] .card__heading,
[id*="collection_list"] .card-information__text {
  display: block !important;
  margin: 0 !important;
  padding: 0.4rem 0 !important;
  font-size: clamp(2.6rem, 4vw, 4rem) !important;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: rgba(26, 26, 26, 0.55);
  transition: color var(--lc-dur-med) var(--lc-ease), transform var(--lc-dur-med) var(--lc-ease);
  transform-origin: left center;
}
[id*="collection_list"] .card__heading a,
[id*="collection_list"] .card__heading .full-unstyled-link {
  color: inherit !important;
  text-decoration: none !important;
}
[id*="collection_list"] .collection-list__item:hover .card__heading,
[id*="collection_list"] .collection-list__item.is-active .card__heading {
  color: rgba(26, 26, 26, 1);
  transform: translateX(8px);
}

/* Mobile-Primed-State: Item ist vorbereitet, zweiter Tap navigiert */
[id*="collection_list"] .collection-list__item.is-primed .card__heading {
  color: var(--lc-accent) !important;
  transform: translateX(8px);
}

/* Showcase rechts */
.lc-coll-showcase {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: rgba(105, 35, 251, 0.06);
  border-radius: 16px;
  overflow: hidden;
}
.lc-coll-showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 420ms var(--lc-ease), transform 600ms var(--lc-ease);
  pointer-events: none;
}
.lc-coll-showcase__img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Mobile: Single column, showcase oben, mehr vertikaler Atemraum */
@media screen and (max-width: 749px) {
  [id*="collection_list"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
  [id*="collection_list"] .lc-coll-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
  }
  .lc-coll-showcase {
    aspect-ratio: 4 / 5;
    width: 100%;
    margin: 0 auto;
  }
  /* Liste kompakt: Items eng, kein Slider-Padding, keine min-height */
  [id*="collection_list"] .collection-list {
    gap: 0.4rem !important;
    padding: 0 !important;
  }
  [id*="collection_list"] .collection-list__item {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  [id*="collection_list"] .card__heading,
  [id*="collection_list"] .card-information__text {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    padding: 0.4rem 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Produkt-Kacheln: abgerundete Ecken auf den Bildern
   -------------------------------------------------------------------------- */
.product-card-wrapper .card,
.product-card-wrapper .card__inner,
.product-card-wrapper .card__media,
.product-card-wrapper .media,
.card-wrapper .card__media,
.card-wrapper .card__inner > .media,
[id*="featured_collection"] .card__media,
[id*="featured_collection"] .media {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   11. Mehr Atemluft zwischen Sections auf der Startseite
   -------------------------------------------------------------------------- */
#MainContent > .shopify-section + .shopify-section,
main > .shopify-section + .shopify-section {
  margin-top: 4rem;
}

@media screen and (max-width: 749px) {
  #MainContent > .shopify-section + .shopify-section,
  main > .shopify-section + .shopify-section {
    margin-top: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   12. Footer-Newsletter — Brand-Aligned
   -------------------------------------------------------------------------- */
.footer-block__newsletter {
  background: linear-gradient(180deg, #f8f6ff 0%, #efe9ff 100%) !important;
  border-radius: 24px !important;
  padding: 48px 28px !important;
  margin: 24px auto 32px !important;
  max-width: 720px !important;
  text-align: center !important;
  border: 1px solid rgba(105, 35, 251, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}

.footer-block__newsletter .footer-block__heading {
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Footer-Newsletter: scroll-trigger animation neutralisieren — sonst Heading blass */
.footer-block--newsletter.scroll-trigger,
.footer-block--newsletter.scroll-trigger.animate--slide-in {
  opacity: 1 !important;
  transform: none !important;
}

.footer-block__newsletter .field__input::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

.footer-block__newsletter form.footer__newsletter,
.footer-block__newsletter .newsletter-form {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  background: transparent !important;
  padding: 0 !important;
}

.footer__newsletter .newsletter-form__field-wrapper {
  position: relative !important;
  background: #fff !important;
  border-radius: 999px !important;
  padding: 6px !important;
  box-shadow: 0 4px 16px rgba(105, 35, 251, 0.10) !important;
  width: 100% !important;
  max-width: 440px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: none !important;
}

.footer__newsletter .field {
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
}

.footer__newsletter .field__input {
  border: none !important;
  background: transparent !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  width: 100% !important;
  outline: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.footer__newsletter .field__input:focus,
.footer__newsletter .field__input:focus-visible {
  box-shadow: none !important;
  border-color: transparent !important;
}

.footer__newsletter .field__label {
  display: none !important;
}

.footer__newsletter .newsletter-form__button,
.footer__newsletter .newsletter-form__button.field__button {
  background: var(--lc-accent, #6923fb) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform .18s var(--lc-ease, ease), box-shadow .18s var(--lc-ease, ease) !important;
  padding: 0 !important;
}

.footer__newsletter .newsletter-form__button:hover {
  transform: translateX(2px) !important;
  box-shadow: 0 6px 18px rgba(105, 35, 251, 0.32) !important;
  background: #5018d4 !important;
}

.footer__newsletter .newsletter-form__button svg {
  width: 18px !important;
  height: 18px !important;
  color: #fff !important;
}

@media screen and (max-width: 749px) {
  .footer__newsletter {
    border-radius: 20px !important;
    padding: 36px 20px !important;
    margin: 16px 16px 24px !important;
  }
}

/* --------------------------------------------------------------------------
   Reduced-Motion-Guard (scoped — überschreibt nur LuCycle-Klassen)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [id*="image_banner"] .button--primary,
  [id*="slideshow"] .button--primary,
  .lc-cta-glow,
  .product-card-wrapper .media.media--hover-effect > img:nth-child(2),
  .product-form__submit,
  #cart-icon-bubble,
  .newsletter-form .field__input,
  .newsletter-form__message--success,
  [id*="image_banner"] .banner__content--middle-left,
  [id*="image_banner"] .banner__content--middle-left .banner__heading,
  [id*="image_banner"] .banner__content--middle-left .banner__buttons,
  .lc-smile-text,
  .lc-smile-emoji,
  [id*="featured_collection"] .collection__title .title,
  [id*="image_with_text"] .image-with-text__heading,
  [id*="collection_list"] .title {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  [id*="image_banner"] .button--primary:hover,
  [id*="image_banner"] .button--primary:focus-visible,
  [id*="slideshow"] .button--primary:hover,
  [id*="slideshow"] .button--primary:focus-visible,
  .lc-cta-glow:hover,
  .lc-cta-glow:focus-visible {
    transform: none !important;
  }
}