/** Shopify CDN: Minification failed

Line 604:0 Unexpected "}"

**/
/* =========================================================================
   gloofy — enhance.css
   Additive Animations- & Politur-Ebene.
   Verändert KEINEN Inhalt, KEIN Layout — nur Bewegung, Tiefe und Lebendigkeit.
   Wird NACH styles.css geladen und ergänzt diese.
   Alles respektiert prefers-reduced-motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0 · Globale Feinheiten
   ------------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --rise: 22px;
}

/* sanfteres, durchgehendes Scroll-Gefühl */
html { scroll-behavior: smooth; }

/* dezente, weichere Übergänge auf interaktiven Standard-Elementen */
a, button, .btn, .card, .benefit, .rev, .note, .bundle__chip,
.gthumb, .sw, .add, .pill, .trust__item, .footer__col a,
.cart__checkout, .buy__add, .upsell__btn {
  transition-timing-function: var(--ease-out);
}

/* -------------------------------------------------------------------------
   1 · Scroll-Reveal — Elemente gleiten beim Scrollen sanft ein
   JS fügt .reveal hinzu; sobald sichtbar -> .is-in
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* gestaffelte Kinder (Karten, Kacheln, Reviews ...) ploppen nacheinander auf */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-pop);
  will-change: opacity, transform;
}
.reveal-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-stagger.is-in > *:nth-child(1)  { transition-delay: .00s; }
.reveal-stagger.is-in > *:nth-child(2)  { transition-delay: .06s; }
.reveal-stagger.is-in > *:nth-child(3)  { transition-delay: .12s; }
.reveal-stagger.is-in > *:nth-child(4)  { transition-delay: .18s; }
.reveal-stagger.is-in > *:nth-child(5)  { transition-delay: .24s; }
.reveal-stagger.is-in > *:nth-child(6)  { transition-delay: .30s; }
.reveal-stagger.is-in > *:nth-child(7)  { transition-delay: .36s; }
.reveal-stagger.is-in > *:nth-child(8)  { transition-delay: .42s; }
.reveal-stagger.is-in > *:nth-child(9)  { transition-delay: .48s; }
.reveal-stagger.is-in > *:nth-child(n+10) { transition-delay: .54s; }

/* -------------------------------------------------------------------------
   2 · Hover-Lifts & Tiefe — Karten heben sich sanft an
   ------------------------------------------------------------------------- */
.card {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(74, 53, 40, 0.28);
  }
  .card:hover .card__media img { transform: scale(1.06); }

  .benefit {
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  }
  .benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px -20px rgba(74, 53, 40, 0.26);
    border-color: rgba(225, 75, 106, 0.35);
  }

  .rev {
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  }
  .rev:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -18px rgba(74, 53, 40, 0.22);
  }

  .note {
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  }
  .note:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -18px rgba(74, 53, 40, 0.2);
  }

  .slot--life {
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  }
  .slot--life:hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow: 0 18px 38px -20px rgba(74, 53, 40, 0.3);
  }

  .trust__item { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
  .trust__item:hover { opacity: 1; transform: translateY(-2px); }

  .footer__col a { transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
  .footer__col a:hover { opacity: 1; transform: translateX(3px); }
}

/* -------------------------------------------------------------------------
   3 · Buttons — lebendiger Press + sanfter Glanz
   ------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--ease-out), box-shadow .3s var(--ease-out), filter .25s var(--ease-out);
}
@media (hover: hover) {
  .btn--dark:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(74, 53, 40, 0.5); }
  .btn--light:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(74, 53, 40, 0.32); }
}
.btn:active { transform: translateY(0) scale(.97); }

/* Glanz-Schimmer, der einmal über den Button wandert (Hover) */
.btn::after {
  content: "";
  position: absolute; top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover::after { animation: btn-sheen .85s var(--ease-out); }
}
@keyframes btn-sheen {
  to { left: 130%; }
}

/* Plus-Add-Button auf Cards: dreht & ploppt beim Hover */
.add {
  transition: transform .25s var(--ease-pop), background .25s var(--ease-out);
}
@media (hover: hover) {
  .add:hover { transform: rotate(90deg) scale(1.08); }
}
.add:active { transform: scale(.9); }

/* -------------------------------------------------------------------------
   4 · Aufploppen beim Klick — kleiner Quittungs-Effekt
   JS vergibt kurz .tap-pop
   ------------------------------------------------------------------------- */
.tap-pop { animation: tap-pop .4s var(--ease-pop); }
@keyframes tap-pop {
  0% { transform: scale(1); }
  40% { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* Warenkorb-Badge hüpft, wenn sich die Anzahl ändert */
.cart-btn__count.bump { animation: count-bump .5s var(--ease-pop); }
@keyframes count-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* -------------------------------------------------------------------------
   5 · Produktbilder / Galerie — weiche Tiefe
   ------------------------------------------------------------------------- */
@media (hover: hover) {
  .gallery__main { transition: box-shadow .4s var(--ease-out); }
  .gallery__main:hover { box-shadow: 0 22px 50px -26px rgba(74, 53, 40, 0.3); }
  .bundle__chip:hover { transform: translateY(-4px) scale(1.03); }
  .sw:hover { transform: scale(1.12); }
}

/* -------------------------------------------------------------------------
   6 · Sektions-Überschriften gleiten leicht versetzt ein
   ------------------------------------------------------------------------- */
.section-head.reveal .eyebrow,
.section-head.reveal .section-title {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.section-head.reveal.is-in .eyebrow { opacity: .5; transform: translateY(0); transition-delay: .05s; }
.section-head.reveal.is-in .section-title { opacity: 1; transform: translateY(0); transition-delay: .12s; }

/* -------------------------------------------------------------------------
   7 · Dezente schwebende Akzente (Glows / Pearls)
   ------------------------------------------------------------------------- */
.bundle__glow,
.newsletter__card::before {
  animation: soft-float 7s ease-in-out infinite;
}
@keyframes soft-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 10px); }
}

.logo__pearl {
  animation: pearl-glow 3.5s ease-in-out infinite;
}
@keyframes pearl-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244, 194, 204, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(244, 194, 204, 0.5); }
}

/* -------------------------------------------------------------------------
   8 · Hero — Inhalt staffelt sich beim Laden ein
   ------------------------------------------------------------------------- */
.hero__inner > * {
  animation: hero-in .8s var(--ease-out) both;
}
.hero__inner > *:nth-child(1) { animation-delay: .05s; }
.hero__inner > *:nth-child(2) { animation-delay: .14s; }
.hero__inner > *:nth-child(3) { animation-delay: .22s; }
.hero__inner > *:nth-child(4) { animation-delay: .30s; }
.hero__inner > *:nth-child(5) { animation-delay: .38s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero-Bild zoomt beim Laden ganz langsam heran (Ken-Burns, sehr dezent) */
.hero__photo {
  animation: hero-kenburns 18s ease-out both;
}
@keyframes hero-kenburns {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* -------------------------------------------------------------------------
   9 · Karten-Bilder + Slots bekommen weichen Schein beim Hover
   ------------------------------------------------------------------------- */
@media (hover: hover) {
  .card__media { transition: box-shadow .4s var(--ease-out); }
  .card:hover .card__media { box-shadow: inset 0 0 0 1px rgba(225, 75, 106, 0.15); }
}

/* -------------------------------------------------------------------------
   10 · Drawer-/Cart-Links erscheinen gestaffelt beim Öffnen
   (greift auf bestehende .is-open Zustände zu)
   ------------------------------------------------------------------------- */
.drawer.is-open .drawer__links a {
  animation: drawer-link-in .45s var(--ease-out) both;
}
.drawer.is-open .drawer__links a:nth-child(1) { animation-delay: .08s; }
.drawer.is-open .drawer__links a:nth-child(2) { animation-delay: .14s; }
.drawer.is-open .drawer__links a:nth-child(3) { animation-delay: .20s; }
.drawer.is-open .drawer__links a:nth-child(4) { animation-delay: .26s; }
.drawer.is-open .drawer__links a:nth-child(5) { animation-delay: .32s; }
.drawer.is-open .drawer__links a:nth-child(6) { animation-delay: .38s; }
@keyframes drawer-link-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

/* -------------------------------------------------------------------------
   11 · FAQ-Antwort gleitet weicher auf (ergänzt bestehende max-height)
   ------------------------------------------------------------------------- */
.faq__a { transition: max-height .4s var(--ease-out); }
.faq__item .faq__q::after { transition: transform .3s var(--ease-pop), content .3s; }
.faq__item.is-open .faq__q::after { transform: translateY(-50%) rotate(180deg); }

/* -------------------------------------------------------------------------
   12 · Sticky-CTA gleitet etwas weicher / bouncy herein
   ------------------------------------------------------------------------- */
.sticky-cta { transition: transform .45s var(--ease-pop); }

/* -------------------------------------------------------------------------
   13 · Newsletter-Karte: sanfter Schimmer-Verlauf im Hintergrund
   ------------------------------------------------------------------------- */
.newsletter__card { position: relative; }
.newsletter__card::before {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   14 · Bilder laden weich ein (fade), wenn JS .img-ready setzt
   ------------------------------------------------------------------------- */
img { transition: opacity .5s var(--ease-out), filter .5s var(--ease-out); }

/* -------------------------------------------------------------------------
   FIX · Bilder/Karten blockieren vertikales Scrollen (Homepage + PDP)
   Symptom: Fasst man auf dem Handy ein Produktbild an und wischt vertikal,
   ließ sich die Seite nicht scrollen — die horizontalen Slider/Rails fingen
   die Geste ab (ihnen fehlte touch-action).
   Lösung: Auf allen horizontalen Scroll-Containern UND ihren Bildern/Karten
   `touch-action: pan-x pan-y` setzen. Damit erlaubt der Browser beide
   Richtungen und entscheidet anhand der dominanten Wischrichtung:
   horizontal = durch die Produkte, vertikal = Seite scrollen.
   (Kein pointer-events:none -> Klicks/Links/Drag bleiben voll funktionsfähig.)
   ------------------------------------------------------------------------- */

/* Homepage-Rails (Düfte-Karussell, Community-Bilder, Trust-Leiste) */
.rail,
.community__rail,
.trust__track {
  touch-action: pan-x pan-y;
}
.rail .card,
.rail .card__media,
.rail .card__media img,
.community__rail .slot--life,
.community__rail .slot--life img {
  touch-action: pan-x pan-y;
}

/* Produktseite — Galerie-Slider */
.gallery__track {
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.gallery__track img,
.gallery__track .gallery__slide,
.gallery__track .gallery__slide img {
  touch-action: pan-x pan-y;
}
/* Einzelbild ohne Track (nur 1 Produktbild): volles Scrollen */
.gallery__main,
.gallery__main > img {
  touch-action: pan-x pan-y;
}

/* -------------------------------------------------------------------------
   REDUCED MOTION — alles Bewegliche aus
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in,
  .reveal-stagger > *, .reveal-stagger.is-in > *,
  .section-head.reveal .eyebrow, .section-head.reveal .section-title,
  .hero__inner > *, .hero__photo,
  .drawer.is-open .drawer__links a {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .bundle__glow, .newsletter__card::before, .logo__pearl,
  .btn::after, .add, .card, .benefit, .rev, .note, .slot--life {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   Startseiten-Produktkarten: Bild füllt den Container komplett
   Überschreibt nur die Größenbegrenzung von .card__media img aus styles.css.
   Betrifft ausschließlich die Karten im Startseiten-Slider (scents.liquid) —
   die Produktseite nutzt .gallery__* und bleibt unberührt.
   ------------------------------------------------------------------------- */
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: cover;
}

/* =========================================================================
   ABO / EINMALKAUF — Segmented Control (echte Selling Plans)
   Dünne dezente Box über dem Warenkorb mit zwei Optionen nebeneinander.
   Ein weißer Indikator gleitet smooth zwischen Abo (links) & Einmalig (rechts).
   ========================================================================= */
.pseg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 18px;
  padding: 4px;
  background: #F1EDE7;
  border-radius: 13px;
  border: 1px solid rgba(74, 53, 40, 0.05);
  isolation: isolate;
}

/* gleitender weißer Indikator hinter der aktiven Option */
.pseg__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px -5px rgba(74, 53, 40, 0.2), 0 1px 2px rgba(74, 53, 40, 0.04);
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.5, 1.4, .4, 1);
  will-change: transform;
}
/* wenn die rechte Option aktiv ist, gleitet der Indikator nach rechts */
.pseg.is-right .pseg__thumb {
  transform: translateX(100%);
}

.pseg__opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  padding: 8px 13px;
  border-radius: 10px;
  text-align: left;
  transition: opacity .35s ease, transform .2s ease;
  opacity: 0.5;
}
.pseg__opt.is-active { opacity: 1; }
.pseg__opt:active { transform: scale(.985); }

/* obere Zeile: Name + Sparbadge */
.pseg__top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.pseg__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pseg__badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--rose, #E8915C);
  padding: 1.5px 6px;
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* Preiszeile — jetzt einzeilig neben dem Namen */
.pseg__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
}
.pseg__price strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color .3s ease;
}
.pseg__opt.is-active .pseg__price strong { color: var(--ink, #4A3528); }
.pseg__hint {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pseg__thumb, .pseg__opt, .pseg__badge, .pseg__price strong {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   FIX · Galerie-Bilder müssen IMMER sichtbar sein
   Die Galerie steuert ihre Sichtbarkeit selbst (script.js). Sie darf nie an
   einem versehentlichen opacity:0-Zustand aus der globalen img-Transition oder
   aus fadeInImages hängen bleiben. Diese Regel garantiert Sichtbarkeit.
   ------------------------------------------------------------------------- */
.gallery__slide img:not(#gallery-img),
.gallery__main > img:not(#gallery-img),
.gthumb img {
  opacity: 1 !important;
}
/* #gallery-img steuert script.js per Inline-opacity (Cross-Fade beim Swap) —
   daher hier KEIN !important, damit der Fade funktioniert. Inline-Styles aus
   dem JS gewinnen ohnehin gegen diese Regel. */
#gallery-img { opacity: 1; }

/* =========================================================================
   GIFT-BAR · Gratis-Schlüsselanhänger-Hinweis auf der Produktseite
   Höherer Balken: Bild links, Text rechts. Sanfter Schimmer, dezentes Pulsieren.
   Respektiert prefers-reduced-motion.
   ========================================================================= */
.giftbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--sans, inherit);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink, #4A3528);
  background: linear-gradient(100deg, var(--rose-soft, #FBD9BE) 0%, #FCEAD9 55%, var(--rose-soft, #FBD9BE) 100%);
  border: 1px solid rgba(232, 145, 92, 0.35);
  box-shadow: 0 4px 14px -8px rgba(232, 145, 92, 0.55), inset 0 0 0 1px rgba(255,255,255,0.35);
  animation: giftbar-glow 2.6s ease-in-out infinite;
}

/* sanft pulsierender Rand/Schatten (das „Blinken", aber dezent) */
@keyframes giftbar-glow {
  0%, 100% { box-shadow: 0 4px 14px -8px rgba(232, 145, 92, 0.45), inset 0 0 0 1px rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 6px 20px -8px rgba(232, 145, 92, 0.75), inset 0 0 0 1px rgba(255,255,255,0.5); }
}

/* durchwandernder Glanz-Streifen */
.giftbar__shine {
  position: absolute;
  top: 0; left: -40%;
  width: 38%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: giftbar-shine 3.4s ease-in-out infinite;
}
@keyframes giftbar-shine {
  0%   { left: -45%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Bild-Bereich links */
.giftbar__media {
  position: relative;
  z-index: 1;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 0 0 1px rgba(232, 145, 92, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: giftbar-bob 2.8s ease-in-out infinite;
}
.giftbar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes giftbar-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-2deg); }
}

/* Platzhalter, wenn noch kein Bild gewählt wurde */
.giftbar__ph {
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  color: rgba(74, 53, 40, 0.5);
  padding: 0 4px;
}

/* Text rechts */
.giftbar__text {
  position: relative;
  z-index: 1;
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .giftbar { animation: none; }
  .giftbar__shine, .giftbar__media { animation: none; }
  .giftbar__shine { display: none; }
}
}