/** Shopify CDN: Minification failed

Line 122:56 Expected ")" to end URL token
Line 123:58 Expected ")" to end URL token
Line 124:53 Expected ")" to end URL token

**/
/* ===== S++ ULTRA LUXURY SLOW MOTION DRAWER ===== */

/* Noch langsamer + „glide & melt“ feel */
:root{
  --drawer-speed: .85s; /* vorher .35s → jetzt Ultra Slow */
  --drawer-ease: cubic-bezier(.20,.80,.26,1); /* sehr weich & luxuriös */
}

/* Drawer Slide-In */
.menu-drawer,
.drawer,
.menu-sidebar,
#menu-drawer,
details[aria-label="Menu"] .menu-drawer__inner {
  transition: transform var(--drawer-speed) var(--drawer-ease) !important;
}

/* Overlay ultra smooth fade */
.drawer__overlay,
.menu-drawer__overlay,
.menu-overlay,
body::after {
  transition: opacity .85s var(--drawer-ease) !important;
}

/* Page slight-shift (Parallax glide) */
html.menu-open body,
.menu-drawer.is-open ~ .shopify-section,
.drawer.is-open ~ .shopify-section {
  transform: translateX(12px); /* darf etwas mehr sein bei Slow-Mo */
  transition: transform .85s var(--drawer-ease) !important;
}

/* Menu items: Very slow stagger entrance */
.menu-drawer__menu li,
.drawer .menu li,
.menu-sidebar nav li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .7s var(--drawer-ease), transform .7s var(--drawer-ease) !important;
}

/* Stagger timing (verzögert mehr für S++) */
.menu-drawer__menu li:nth-child(1){ transition-delay:.14s !important; }
.menu-drawer__menu li:nth-child(2){ transition-delay:.22s !important; }
.menu-drawer__menu li:nth-child(3){ transition-delay:.30s !important; }
.menu-drawer__menu li:nth-child(4){ transition-delay:.38s !important; }
.menu-drawer__menu li:nth-child(5){ transition-delay:.46s !important; }
.menu-drawer__menu li:nth-child(6){ transition-delay:.54s !important; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}
/* SAFETY RESET – Kategorien wieder sichtbar machen */
.menu-drawer__menu li,
.drawer .menu li,
.menu-sidebar nav li{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* ==== HAYAT LUX – Personalisierung ==== */
:root{
  --hl-bg: #EDE3D2;        /* dein Wunschhintergrund */
  --hl-gold-soft: #E5C98A; /* softer Gold-Rand (kannst du ändern) */
  --hl-border: rgba(0,0,0,.08);
  --hl-radius: 12px;
  --hl-gap: 12px;
}

/* Container */
.hl-pers{
  background: var(--hl-bg);
  border: 1px solid var(--hl-gold-soft);
  border-radius: var(--hl-radius);
  padding: 16px;
  margin: 18px 0;
}

/* Toggle */
.hl-toggle{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; cursor:pointer; }
.hl-toggle input{ transform: scale(1.2); }

/* Felder */
.hl-fields{ margin-top: 14px; display:block; }
.hl-field{ margin-bottom: 14px; }
.hl-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.hl-row label{ font-weight:700; }
.hl-count{ margin-left:auto; font-size:12px; color:#666; }

.hl-field input[type="text"],
.hl-field select{
  width:100%; padding:10px 12px;
  border:1px solid var(--hl-border);
  border-radius:10px;
  background:#fff;
  font-size:15px;
}

/* --- MUSTER Swatches --- */
.hl-legend{ font-weight:700; margin: 8px 0 6px; }
.hl-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.hl-swatch{ position:relative; border:1px solid var(--hl-border); border-radius:10px; overflow:hidden; }
.hl-swatch input{ display:none; }
.hl-swatch span{ display:block; padding:8px 10px; background:#fff; font-size:14px; }
.hl-swatch::before{
  content:""; position:absolute; inset:0;
  background-size: cover; background-position:center;
  opacity:.25; pointer-events:none;
}
.hl-swatch.is-active{ outline: 2px solid var(--hl-gold-soft); }

/* Swatch-Bilder nur per CSS definieren → später leicht erweiterbar */
.hl-swatch--klassisch::before{ background-image: url({{ 'muster_klassisch.jpg' | asset_url }}); }
.hl-swatch--geometrisch::before{ background-image: url({{ 'muster_geometrisch.jpg' | asset_url }}); }
.hl-swatch--floral::before{ background-image: url({{ 'muster_floral.jpg' | asset_url }}); }

/* --- EXTRAS: Gebetskette --- */
.hl-subtoggle{ display:flex; gap:8px; font-weight:600; align-items:center; cursor:pointer; margin-bottom:6px; }
.hl-subtoggle input{ transform: scale(1.1); }

.hl-extra-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hl-gap);
}
@media (max-width: 480px){
  .hl-extra-grid{ grid-template-columns: repeat(2, 1fr); }
}
.hl-extra{
  display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--hl-border); border-radius:10px; padding:8px; background:#fff;
  text-align:center;
}
.hl-extra input{ display:none; }
.hl-extra img{ width:100%; height:80px; object-fit:cover; border-radius:8px; }
.hl-extra span{ font-size:13px; }

/* Active-Rahmen wenn ausgewählt */
.hl-extra input:checked + img,
.hl-extra input:checked ~ img{
  outline: 2px solid var(--hl-gold-soft);
  outline-offset: 0;
}