/** Shopify CDN: Minification failed

Line 1836:24 Unexpected "*"
Line 1836:83 Unterminated string token
Line 1838:89 Unterminated string token

**/
:root{
  color-scheme:light;
  --bg:#f6f4f0;
  --bg-alt:#e9dcc4;
  --stone:#c9ac7c;
  --surface:#fffdfa;
  --text:#2a221c;
  --text-soft:rgba(42,34,28,.64);
  --line:rgba(42,34,28,.14);
  --accent-orange:#f1772c;
  --accent-teal:#c1dbda;
  --teal-ink:#2f4d4c;
  --leather:#796254;
  --orange-wash:rgba(241,119,44,.12);
  --teal-wash:rgba(193,219,218,.45);
  --leather-wash:rgba(121,98,84,.09);

  /* fixed dark accent — used only for the countdown card & utility bar, by design, in both themes */
  --dark-bg:#241a13;
  --dark-bg-2:#3a2a1c;
  --dark-ink:#f8f6f2;
  --dark-soft:rgba(248,246,242,.68);
  --dark-line:rgba(248,246,242,.16);

  --font-display:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  --font-accent:'Anek Bangla','Arial Narrow',sans-serif;
}

/* Dark Mode bewusst deaktiviert: die Seite bleibt unabhängig von der
   Geräteeinstellung immer im gestalteten hellen Kalea-Look — kein Umfärben
   mehr nötig, wenn Besucher:innen im Betriebssystem Dark Mode aktiviert haben. */

*{box-sizing:border-box;}
html{overflow-x:hidden;scroll-padding-top:100px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* fine paper grain — subtle, sitewide, keeps flat colour fields from feeling flat */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.03;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{max-width:100%;display:block;}

.expanded{
  font-family:var(--font-accent);
  font-variation-settings:'wdth' 130;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
}

a{color:inherit;text-decoration:none;}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-left:clamp(48px,6vw,100px);
  padding-right:clamp(48px,6vw,100px);
}
@media (max-width:600px){
  .wrap{padding-left:20px;padding-right:20px;}
}
/* A third wider than the standard 1180px content column. */
.wrap--wide{max-width:1573px;}

/* ---------- utility bar / marquee ---------- */
.utility-bar{
  background:linear-gradient(135deg, var(--dark-bg), var(--dark-bg-2) 85%);
  overflow:hidden;
}
.marquee{
  display:flex;
  width:max-content;
  animation:marquee-scroll 140s linear infinite;
}
.marquee:hover{animation-play-state:paused;}
.marquee span{
  display:flex;
  align-items:center;
  white-space:nowrap;
  padding:9px 0;
  font-size:0.88rem;
  letter-spacing:.14em;
  color:var(--dark-ink);
  font-family:var(--font-accent);
  font-variation-settings:'wdth' 130;
  text-transform:uppercase;
  font-weight:600;
}
.marquee span::after{content:"\25C6";margin:0 28px;opacity:.5;color:var(--accent-orange);}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Shopify wraps the header section in its own div that's only as tall as the
   marquee + nav together — too short for header.main-nav's "position:sticky"
   to have any room to stick past that. Flattening it out of the layout makes
   body (full page height) the sticky containing block instead. */
.shopify-section-group-header-group{display:contents;}

/* ---------- main nav ---------- */
header.main-nav{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  /* Extend the header's own opaque background up into the notch/Dynamic-Island
     safe area, so nothing scrolls "through" that strip above it on iPhones
     during overscroll/bounce — without this, that sliver isn't painted by the
     header and whatever sits behind it can peek through while scrolling. */
  padding-top:env(safe-area-inset-top, 0px);
}
/* iOS Safari's own toolbar shrinks/hides while scrolling down, which briefly
   makes the visible viewport taller than the sticky header accounts for —
   revealing a sliver of whatever's scrolled underneath, right above the
   header, near the Dynamic Island. A generous same-colour panel anchored to
   the header's own top edge (moving with it, since it sticks) permanently
   covers that sliver no matter how much taller the viewport gets. Scoped to
   .header-stuck (toggled by JS once the header has actually docked at the
   top) so it doesn't also cover the marquee bar sitting above it at the very
   top of the page, before any scrolling has happened. */
header.main-nav.header-stuck::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:120px;
  background:var(--bg);
}
/* Full bar width (matching the marquee above it) instead of the 1180px content
   max-width — side padding now matches the generic .wrap everywhere else. */
header.main-nav .wrap{max-width:none;}
.nav-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:24px;
  padding-top:20px;
  padding-bottom:20px;
}
.nav-links{
  display:flex;
  flex-wrap:nowrap;
  gap:clamp(16px,2.2vw,56px);
  font-size:clamp(1.05rem,1.3vw,1.31rem);
}
.nav-links.right{justify-content:flex-end;}
.nav-links a{
  opacity:.82;
  transition:opacity .15s ease;
  white-space:nowrap;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1;border-bottom-color:var(--leather);}
.wordmark{
  font-family:var(--font-display);
  font-size:3.2rem;
  font-weight:700;
  letter-spacing:.16em;
  text-align:center;
  font-style:normal;
  color:var(--dark-bg-2);
}

@media (max-width:760px){
  .nav-links:not(.right){display:none;}
  .nav-links.right{display:flex;}
  .nav-links.right > a,
  .nav-links.right > .nav-item{display:none;}
}

/* ---------- pill ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--leather-wash);
  color:var(--leather);
  border-radius:999px;
  padding:8px 16px;
  font-size:1.02rem;
}
.pill.teal{background:var(--teal-wash);color:var(--teal-ink);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:0;
}
.hero .wrap{
  position:relative;
  padding-top:clamp(36px,5vw,56px);
  padding-bottom:clamp(36px,5vw,56px);
}
.hero-top{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
@media (max-width:860px){
  .hero-top{grid-template-columns:1fr;text-align:center;}
  .hero-top .hero-headline,
  .hero-top p.lede{margin-left:auto;margin-right:auto;}
  .hero-photo{order:-1;}
}
.hero-headline{
  font-size:clamp(3.68rem,5.4vw,5.76rem);
  line-height:1.2;
  letter-spacing:.02em;
  margin:20px 0 16px;
  max-width:13ch;
  color:var(--leather);
}
.hero p.lede{
  font-size:1.68rem;
  line-height:1.6;
  color:var(--text-soft);
  max-width:38ch;
  margin:0 0 30px;
}
.hero-photo{position:relative;}
.photo-frame{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  background:var(--stone);
}
.photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.photo-frame:hover img{transform:scale(1.045);}
.photo-frame .fallback{
  display:none;
  position:absolute;
  inset:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:20px;
  color:var(--text-soft);
}
.photo-frame.img-fallback .fallback{display:flex;}
.photo-frame.img-fallback img{display:none;}
.photo-frame.img-fallback .photo-tag{display:none;}
.photo-frame .fallback .icon-chip{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.photo-frame .fallback svg{width:18px;height:18px;opacity:.7;stroke:var(--leather);}
.photo-frame .fallback .label{font-size:1.02rem;color:var(--text);}
.photo-frame .fallback .desc{font-size:1.25rem;max-width:26ch;line-height:1.5;color:var(--text-soft);}
.hero-photo .photo-frame{aspect-ratio:4/5;box-shadow:0 34px 70px -32px rgba(42,34,28,.4);}
.photo-tag{
  display:none;
  position:absolute;
  bottom:14px;
  left:14px;
  background:rgba(248,246,242,.94);
  color:#2a1608;
  padding:6px 13px;
  border-radius:999px;
  font-size:0.9rem;
  box-shadow:0 10px 22px -10px rgba(42,34,28,.4);
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--text);
  color:var(--bg);
  padding:15px 28px;
  border-radius:999px;
  font-size:1.18rem;
  transition:transform .15s ease, background .15s ease;
}
.hero-cta:hover{background:var(--leather);transform:translateY(-1px);}

/* filled CTA used for Instagram / secondary conversion moments — same weight as hero-cta so it actually invites a click */
.ig-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--text);
  color:var(--bg);
  padding:13px 24px;
  border-radius:999px;
  font-size:1.15rem;
  transition:transform .15s ease, background .15s ease;
}
.ig-cta:hover{background:var(--leather);transform:translateY(-1px);}
.ig-cta svg{width:16px;height:16px;stroke:currentColor;}

/* countdown card — deliberately dark in both themes, so it pops off the light hero */
.countdown-card{
  margin:32px auto 0;
  max-width:980px;
  background:linear-gradient(135deg, var(--dark-bg), var(--dark-bg-2) 85%);
  border:1px solid rgba(248,246,242,.08);
  border-radius:28px;
  padding:clamp(24px,3vw,36px) clamp(22px,4vw,46px) clamp(28px,3vw,40px);
  box-shadow:0 40px 80px -34px rgba(20,13,8,.55);
  text-align:left;
  color:var(--dark-ink);
}
.countdown-card .cc-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  gap:12px;
  flex-wrap:wrap;
}
.countdown-card .cc-top .expanded{font-size:1.09rem;color:var(--accent-orange);}
.countdown-card .cc-top .drop-name{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.6rem;
  color:var(--dark-soft);
}
.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  text-align:center;
}
.countdown-grid .unit{
  padding:6px 4px;
}
.countdown-grid .num{
  font-family:var(--font-accent);
  font-variation-settings:'wdth' 130;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:clamp(3.84rem,6.4vw,6.08rem);
  line-height:1;
  color:var(--dark-ink);
}
.countdown-grid .lbl{
  display:block;
  margin-top:10px;
  font-size:0.96rem;
  color:var(--dark-soft);
  letter-spacing:.16em;
}
.countdown-grid .unit + .unit{border-left:1px solid var(--dark-line);}
.countdown-foot{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--dark-line);
}
.countdown-foot .cf-label{
  display:block;
  font-size:1.09rem;
  color:var(--dark-soft);
  margin-bottom:12px;
}
.countdown-foot .signup{
  background:rgba(248,246,242,.07);
  border:1px solid rgba(248,246,242,.18);
}
.countdown-foot .signup input{color:var(--dark-ink);}
.countdown-foot .signup input::placeholder{color:var(--dark-soft);}
.countdown-foot .signup button{background:var(--dark-ink);color:var(--dark-bg);}
.countdown-foot .signup button:hover{background:var(--accent-orange);color:#2a1608;}
.countdown-foot .signup-note{color:var(--dark-soft);}

/* ---------- media placeholders ---------- */
.media-slot{
  background:var(--stone);
  border:1px solid var(--line);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  padding:28px 20px;
  color:var(--text-soft);
}
.media-slot .icon-chip{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-slot svg{width:18px;height:18px;opacity:.7;stroke:var(--leather);}
.media-slot .label{font-size:1.02rem;color:var(--text);}
.media-slot .desc{font-size:1.25rem;max-width:34ch;line-height:1.5;}

.hero-media{padding-top:0;}
.hero-media .hero-loop{height:clamp(220px,32vw,380px);border-radius:26px;}
.play-badge{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(255,253,250,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 32px -12px rgba(20,15,10,.45);
}
.play-badge svg{width:20px;height:20px;stroke:var(--leather);}
.photo-frame.img-fallback .play-badge{display:none;}

/* ---------- big statement break ---------- */
.statement{padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(48px,7vw,84px);}
.statement-text{
  font-family:var(--font-display);
  font-size:clamp(3.36rem,5.6vw,6.4rem);
  line-height:1.18;
  text-align:center;
  max-width:16ch;
  margin:0 auto;
}
.statement-text .hl{color:var(--accent-orange);font-style:italic;}

/* ---------- emblem ---------- */
.emblem{width:34px;height:34px;}
.emblem path,.emblem circle{stroke:currentColor;fill:none;stroke-width:1.3;}

/* ---------- section basics ---------- */
section{padding-top:clamp(64px,9vw,108px);padding-bottom:clamp(64px,9vw,108px);}
#kollektion-product-section{padding-bottom:clamp(24px,3vw,40px);}
#kollektion-product-section + section{padding-top:clamp(24px,3vw,40px);}
.section-alt{background:var(--bg-alt);}
.eyebrow{
  color:var(--leather);
  font-size:1.09rem;
  display:block;
  margin-bottom:16px;
}
.eyebrow-lg{font-size:1.31rem;letter-spacing:.1em;}
.hl{color:var(--accent-orange);}
h1,h2{
  font-size:clamp(3.04rem,3.4vw,4.32rem);
  line-height:1.15;
  font-weight:400;
  margin:0 0 20px;
  text-wrap:balance;
}
p{color:var(--text-soft);line-height:1.75;font-size:1.6rem;}

/* ---------- page header (subpages) ---------- */
.page-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:clamp(40px,6vw,64px);
  padding-bottom:clamp(40px,6vw,64px);
  text-align:center;
}
.breadcrumb{font-size:1.12rem;color:var(--text-soft);margin-bottom:20px;}
.breadcrumb a:hover{color:var(--leather);}
.page-header h1{
  color:var(--leather);
  max-width:24ch;
  margin-left:auto;
  margin-right:auto;
}
.page-header .lede{max-width:48ch;font-size:1.68rem;color:var(--text-soft);margin:0 auto;}

/* ---------- legal content (freely editable rich text, e.g. Impressum) ---------- */
.legal-content{
  max-width:760px;
  margin:0 auto;
  padding-top:8px;
  padding-bottom:80px;
}
.legal-content h2{font-size:1.9rem;color:var(--leather);margin:40px 0 14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-size:1.4rem;color:var(--text);margin:28px 0 10px;}
.legal-content p{margin:0 0 16px;}
.legal-content ul,.legal-content ol{margin:0 0 16px;padding-left:22px;color:var(--text-soft);}
.legal-content li{margin-bottom:6px;line-height:1.75;}
.legal-content a{color:var(--leather);text-decoration:underline;text-underline-offset:2px;}
.legal-content a:hover{color:var(--accent-orange);}

/* ---------- teaser strip (home) ---------- */
.teaser{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
@media (max-width:860px){.teaser{grid-template-columns:1fr;}}
.teaser blockquote{margin:0 0 18px;}
.teaser p{margin:0 0 20px;}

/* ---------- philosophy ---------- */
.philosophy{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,5vw,56px);
  align-items:start;
}
@media (max-width:860px){.philosophy{grid-template-columns:1fr;}}
.sw-brown{background:linear-gradient(160deg,#8a705f,var(--leather));}
.sw-orange{background:linear-gradient(160deg,#f89757,var(--accent-orange));}
.sw-blue{background:linear-gradient(160deg,#d7e8e7,var(--accent-teal));}
.sw-steel{background:linear-gradient(160deg,#e9e9ea,#b9bcc0);}

/* craft panel */
.craft-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
}
.craft-panel .photo-frame{border-radius:0;aspect-ratio:16/11;}

.philosophy-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(28px,4vw,44px);
}
.philosophy-card blockquote{margin-top:2px;}
.feature-list{
  list-style:none;
  margin:0;
  padding:18px 22px 22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 14px;
}
@media (max-width:640px){
  .feature-list{grid-template-columns:1fr;gap:10px;justify-items:center;}
}
.feature-list li{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-size:1.31rem;
  color:var(--text);
}
.feature-dot{width:7px;height:7px;border-radius:50%;background:var(--leather);flex:none;}

blockquote{
  font-size:clamp(2.16rem,2.4vw,3.04rem);
  line-height:1.4;
  font-style:italic;
  margin:0 0 22px;
  text-wrap:balance;
}
blockquote span{color:var(--accent-orange);}
.about-quote-row{display:flex;align-items:center;gap:22px;}
.about-quote-row blockquote{margin:0;}
.about-avatar{
  width:120px;
  height:120px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 14px 30px -14px rgba(42,34,28,.4);
}
@media (max-width:600px){
  .about-quote-row{flex-direction:column;align-items:flex-start;gap:16px;}
}
.cite{font-size:1.2rem;color:var(--text-soft);line-height:1.6;margin:0;}
.cite-note{font-size:1.09rem;opacity:.7;font-style:italic;}
.founder-row{display:flex;align-items:center;gap:14px;}
.media-slot.avatar{
  width:52px;height:52px;flex:none;
  border-radius:50%;
  padding:0;
  overflow:hidden;
}
.media-slot.avatar svg{width:22px;height:22px;}
.media-slot.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- values ---------- */
.values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
}
@media (max-width:760px){.values{grid-template-columns:1fr;}}
.value h3{
  font-weight:400;
  font-size:1.84rem;
  margin:16px 0 10px;
}
.value .expanded{font-size:0.99rem;color:var(--leather);}

/* ---------- collection ---------- */
.coll-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.coll-head p{max-width:44ch;margin:0;}
.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media (max-width:760px){.cards{grid-template-columns:1fr;}}
/* Produkte/Halsbänder/Leinen on mobile: 2 compact cards side by side instead of 1
   full-width card per row — photo, name and price only, the rest (collection label,
   description, "Farbe ansehen"/"Ansehen & bestellen") is hidden to keep it readable
   at that width. Desktop is untouched. */
@media (max-width:760px){
  #produkteCards,
  #halsbaenderCards,
  #leinenCards{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  #produkteCards .card-kicker,
  #halsbaenderCards .card-kicker,
  #leinenCards .card-kicker,
  #produkteCards .card-body > p,
  #halsbaenderCards .card-body > p,
  #leinenCards .card-body > p,
  #produkteCards .card-cta,
  #halsbaenderCards .card-cta,
  #leinenCards .card-cta{
    display:none;
  }
  #produkteCards .card-visual,
  #halsbaenderCards .card-visual,
  #leinenCards .card-visual{
    height:150px;
  }
  #produkteCards .card-body,
  #halsbaenderCards .card-body,
  #leinenCards .card-body{
    padding:14px 16px 18px;
  }
  #produkteCards .card h3,
  #halsbaenderCards .card h3,
  #leinenCards .card h3{
    font-size:1.22rem;
    margin:0 0 8px;
  }
  #produkteCards .spec-list,
  #halsbaenderCards .spec-list,
  #leinenCards .spec-list{
    font-size:1.05rem;
    margin:0;
  }
  #produkteCards .spec-list li,
  #halsbaenderCards .spec-list li,
  #leinenCards .spec-list li{
    border-top:none;
    padding:0;
  }
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 52px -30px rgba(30,22,15,.35);
}
.card-visual{
  height:230px;
  border-radius:0;
  border:none;
  border-bottom:1px solid var(--line);
  margin:0;
}
.card-body{padding:24px 26px 28px;}
.card-description{font-size:1.22rem;}
.chip-row{display:flex;align-items:center;gap:8px;margin:0 0 18px;}
.chip{width:20px;height:20px;border-radius:50%;border:1px solid rgba(42,34,28,.15);}
.chip-label{font-size:1.15rem;color:var(--text-soft);margin-left:2px;}
.card-kicker{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.card-kicker .expanded{font-size:0.96rem;color:var(--leather);}
.badge{
  font-size:0.99rem;
  letter-spacing:.06em;
  color:var(--text-soft);
  border:1px solid var(--line);
  border-radius:20px;
  padding:4px 10px;
}
.card h3{
  font-weight:400;
  font-size:2.08rem;
  margin:0 0 12px;
}
.feature-price{
  font-size:1.15rem;
  color:var(--text);
  margin:0 0 6px;
  text-align:right;
}
.spec-list{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  font-size:1.31rem;
  color:var(--text-soft);
}
.spec-list li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-top:1px solid var(--line);
}
.spec-list li:first-child{border-top:none;}
.spec-list li > span{flex-shrink:0;}
.spec-list b{color:var(--text);font-weight:400;text-align:right;}
.spec-list li.spec-list-dropdown{display:block;padding:0;}
.spec-dropdown{padding:8px 0;}
.spec-dropdown summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  cursor:pointer;
  list-style:none;
}
.spec-dropdown summary::-webkit-details-marker{display:none;}
.spec-dropdown-chevron{width:14px;height:14px;flex-shrink:0;color:var(--text-soft);transition:transform .2s ease;}
.spec-dropdown[open] .spec-dropdown-chevron{transform:rotate(180deg);}
.spec-dropdown-content{margin-top:10px;font-size:0.92em;line-height:1.55;color:var(--text-soft);}
.card-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:1.15rem;
  color:var(--text);
  border-bottom:1px solid var(--leather);
  padding-bottom:2px;
  width:max-content;
}
.card-cta:hover{color:var(--leather);}
.card-add-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:28px;
  background:var(--text);
  color:var(--bg);
  border:none;
  border-radius:999px;
  padding:16px 20px;
  font-size:1.15rem;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.card-add-btn:hover{background:var(--leather);color:var(--bg);transform:translateY(-1px);}
.card-add-btn:disabled{background:var(--line);color:var(--text-soft);cursor:not-allowed;}
.card-add-btn:disabled:hover{background:var(--line);color:var(--text-soft);transform:none;}

/* ---------- feature card: single product, colour swatch swaps the whole photo set ---------- */
/* "article." prefix is load-bearing: Dawn's own component-card.css (now loaded
   sitewide by the cart drawer) has a same-specificity ".card:not(.ratio)" rule
   that also sets flex-direction — without the extra tag-name qualifier here,
   whichever stylesheet happens to load second wins the tie, which is exactly
   what silently broke this row layout once the cart drawer started pulling in
   component-card.css. */
article.card.feature-card{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  overflow:visible;
}
@media (max-width:860px){
  /* align-items:flex-start above means "top-align the two columns" in the desktop
     row layout, but once flex-direction flips to column here, the very same
     property instead means "left-align" on the cross axis — so the gallery and
     card-body stopped stretching to the card's full width and shrank down to
     their own minimum content size, which is why the gallery photos rendered
     tiny. Reset to stretch so both columns fill the width again when stacked. */
  article.card.feature-card{flex-direction:column;align-items:stretch;}
}
.feature-card .feature-gallery{
  flex:0 0 54%;
  padding:20px;
  border-right:1px solid var(--line);
}
@media (max-width:860px){
  .feature-card .feature-gallery{
    flex:none;
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:12px;
  }
}
.feature-gallery .gallery-set{
  display:none;
  flex-direction:column;
  gap:16px;
}
.feature-gallery .gallery-set.active{display:flex;}
.feature-gallery .gallery-photo{
  height:auto;
  aspect-ratio:4/3.2;
  border:none;
  border-bottom:none;
  border-radius:18px;
}
/* Mobile only: instead of stacking every photo of the active colourway underneath each
   other, let them scroll/swipe left-right as a snapping carousel (one photo — with a
   peek of the next — per screen), with the description sitting right below the gallery
   thanks to the row→column switch already happening at this breakpoint. Explicitly
   excludes #gallery-alle (the "Alle ansehen" overview grid) — it shares the
   .gallery-set/.gallery-photo classes but is its own 2-column grid, not a carousel of
   single photos, and turning it into a flex row too let its grid blow out past the
   viewport width (gallery_alle has no defined width for its "1fr" columns to resolve
   against once its parent becomes an auto-sized flex item). */
@media (max-width:860px){
  .feature-gallery .gallery-set.active:not(#gallery-alle){
    flex-direction:row;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .feature-gallery .gallery-set.active:not(#gallery-alle)::-webkit-scrollbar{display:none;}
  .feature-gallery .gallery-set:not(#gallery-alle) .gallery-photo{
    flex:0 0 94%;
    scroll-snap-align:center;
  }
}
.feature-card .card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px,4vw,56px);
  position:sticky;
  top:98px;
  align-self:flex-start;
}
@media (max-width:860px){
  .feature-card .card-body{
    position:static;
    top:auto;
  }
}
.swatch-picker{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;}
/* Personalisierung checkbox inside the "In den Warenkorb" form: ticking it reveals a
   name field right below, submitted as a cart line item property so the name shows up
   on the order in Shopify Admin without any extra backend wiring. */
.personalize-toggle{margin:4px 0 4px;}
.personalize-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.22rem;
  color:var(--text);
  cursor:pointer;
  user-select:none;
}
.personalize-checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--leather);
  cursor:pointer;
  flex-shrink:0;
}
.personalize-field{margin:10px 0 0;}
.personalize-name-input{
  width:100%;
  box-sizing:border-box;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  font-family:inherit;
  font-size:1.15rem;
  color:var(--text);
}
.personalize-name-input::placeholder{color:var(--text-soft);}
.personalize-name-input:focus{outline:none;box-shadow:none;border-color:var(--leather);}
/* Category-page filter bar (Farbe/Kollektion/Preis) — dropdowns side by side instead
   of chip rows, so it stays compact no matter how many colours/collections exist. */
.filter-groups{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.filter-select-wrap{position:relative;display:inline-flex;}
.filter-select-wrap::after{
  content:"";
  position:absolute;
  right:17px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.6px solid var(--text-soft);
  border-bottom:1.6px solid var(--text-soft);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}
.filter-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:11px 40px 11px 18px;
  font-family:inherit;
  font-size:1.15rem;
  color:var(--text);
  cursor:pointer;
  min-width:150px;
  transition:border-color .15s ease;
}
.filter-select:hover{border-color:var(--leather);}
.filter-select:focus-visible{outline:2px solid var(--leather);outline-offset:2px;}
@media (max-width:600px){
  .filter-select-wrap{flex:1 1 auto;}
  .filter-select{width:100%;min-width:0;}
}
/* .card sets its own "display:flex", which — being an author stylesheet rule —
   otherwise wins over the browser's built-in "[hidden]{display:none}" default no
   matter how the filter JS sets the hidden property, so a filtered-out card would
   stay visible. This makes hidden actually hide it. */
.cards .card[hidden]{display:none !important;}
.swatch-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 16px 6px 8px;
  font-family:inherit;
  font-size:1.15rem;
  color:var(--text-soft);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.swatch-btn .chip{width:16px;height:16px;}
.swatch-btn .chip + .chip{margin-left:-7px;}
.swatch-btn:hover{border-color:var(--leather);}
.swatch-btn.active{border-color:var(--leather);color:var(--text);background:var(--leather-wash);}
.swatch-btn:focus-visible{outline:2px solid var(--leather);outline-offset:2px;}
/* "Beide ansehen" — a separate, non-swatch control (icon + text, no fill/border) set off
   from the two real color swatches by a thin divider, so it reads as "compare/view all"
   rather than as a third, visually identical color choice. */
.swatch-divider{width:1px;height:22px;background:var(--line);flex:0 0 auto;}
.swatch-btn.view-all-link{background:none;border:none;padding:0;}
.swatch-btn.view-all-link .view-all-icon{width:16px;height:16px;flex:0 0 auto;}
.swatch-btn.view-all-link:hover{border-color:transparent;color:var(--leather);}
.swatch-btn.view-all-link.active{background:none;border-color:transparent;color:var(--leather);}
.swatch-btn.view-all-link.active .view-all-icon{stroke:var(--leather);}
/* "Alle Halsbänder" overview tab — shows both colourways side-by-side as clickable
   tiles; picking one switches straight into that colour's own single-colour tab. */
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:480px){
  .overview-grid{gap:10px;}
}
.overview-tile{display:flex;flex-direction:column;gap:10px;cursor:pointer;}
@media (max-width:480px){
  .overview-tile{gap:6px;}
}
/* .card-visual normally sets border-radius:0 (correct inside a .card, which already
   clips its own rounded corners) — but an .overview-tile isn't a bordered card, it's
   a standalone photo, so it should keep the same rounded look as every other
   photo-frame on the site instead of looking sharp-cornered. */
.overview-tile .card-visual{border-radius:18px;}
.overview-tile:focus-visible{outline:2px solid var(--leather);outline-offset:3px;border-radius:18px;}
.overview-tile-label{display:flex;align-items:center;gap:8px;font-size:1.31rem;color:var(--text);}
.overview-tile-label .chip{width:18px;height:18px;}
.overview-tile-label .chip + .chip{margin-left:-7px;}
.overview-hint{font-family:Georgia,'Times New Roman',serif;color:var(--text-soft);line-height:1.6;margin:0;}
.trust-bar{
  list-style:none;
  margin:36px 0 0;
  padding:20px 24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px 24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
}
.trust-bar li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:1.22rem;
  color:var(--text-soft);
  white-space:nowrap;
}
@media (max-width:640px){
  .trust-bar{justify-content:flex-start;}
  .trust-bar li{white-space:normal;flex:1 1 100%;}
}

/* ---------- handwerk ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}
.step{border-top:1px solid var(--line);padding-top:20px;}
.step .num{
  font-family:var(--font-display);
  font-style:italic;
  font-size:2.56rem;
  color:var(--leather);
  display:block;
  margin-bottom:14px;
}
.step h3{font-size:1.6rem;font-weight:400;margin:0 0 8px;}
.step p{font-size:1.41rem;}

/* ---------- drop banner ---------- */
.banner{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:26px;
  padding:clamp(36px,5vw,56px);
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
  align-items:center;
}
@media (max-width:760px){.banner{grid-template-columns:1fr;}}
.banner h2{margin-bottom:12px;}
.banner p{color:var(--text-soft);margin:0;max-width:42ch;}
.signup{
  display:flex;
  gap:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 6px 6px 20px;
}
.signup input{
  flex:1;
  background:transparent;
  border:none;
  color:var(--text);
  font-family:var(--font-display);
  font-size:1.52rem;
  padding:8px 4px;
}
.signup input::placeholder{color:var(--text-soft);}
.signup input:focus{outline:none;box-shadow:none;}
.signup button{
  background:var(--text);
  border:none;
  border-radius:999px;
  color:var(--bg);
  cursor:pointer;
  font-size:1.09rem;
  padding:10px 18px;
  transition:background .15s ease;
}
.signup button:hover{background:var(--leather);}
.signup-note{font-size:1.09rem;color:var(--text-soft);margin-top:12px;}
@media (max-width:480px){
  .signup{flex-direction:column;border-radius:20px;padding:14px;gap:10px;}
  .signup input{padding:8px 6px;}
  .signup button{width:100%;padding:12px;}
}

/* ---------- contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(28px,4vw,40px);
}
.contact-card .eyebrow{margin-bottom:12px;}
.contact-card h3{font-size:1.92rem;font-weight:400;margin:0 0 10px;}

/* ---------- footer ---------- */
/* Full bar width like the header, instead of the 1180px content max-width —
   so the footer's outer edge lines up with the nav bar's outer edge. */
footer .wrap{max-width:none;}
footer{
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  padding-top:20px;
  padding-bottom:20px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:44px;
}
.foot-brand .wordmark{text-align:left;font-size:2.08rem;margin-bottom:14px;}
.foot-brand p{font-size:1.36rem;max-width:36ch;}
.foot-col-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:0;margin:0;cursor:default;text-align:left;}
.foot-col .expanded{font-size:0.96rem;color:var(--text-soft);display:block;margin-bottom:16px;}
.foot-col-chevron{display:none;width:14px;height:14px;flex-shrink:0;color:var(--text-soft);transition:transform .2s ease;}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin-bottom:10px;font-size:1.36rem;}
.foot-col a:hover{color:var(--accent-orange);}
.foot-col-static{display:flex;flex-direction:column;align-items:flex-start;}
.foot-social-icons{display:flex;align-items:center;gap:14px;}
.foot-social-icon{display:inline-flex;color:var(--text);transition:color .15s ease;}
.foot-social-icon svg{width:22px;height:22px;}
.foot-social-icon:hover{color:var(--accent-orange);}
/* Mobile: Marke/Service stack one under another, each collapsed behind its own
   dropdown toggle instead of always listing every link. Folgen (icon-only, no
   toggle) stays a plain always-visible item. Desktop is untouched — the columns
   stay side by side with the lists always visible (see .foot-col-list below, which
   forces them open again above this breakpoint). */
@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr;}
  .foot-col-head{cursor:pointer;border-bottom:1px solid var(--line);padding-bottom:14px;}
  .foot-col-head .expanded{margin-bottom:0;}
  .foot-col-chevron{display:block;}
  .foot-col-head[aria-expanded="true"] .foot-col-chevron{transform:rotate(180deg);}
  .foot-col-list{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .foot-col-list.open{max-height:500px;padding-top:14px;}
}
.foot-bottom{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:1.12rem;
  color:var(--text-soft);
}

:focus-visible{outline:2px solid var(--leather);outline-offset:2px;}

/* ---------- scroll reveal ----------
   Content is visible by default. Only once JS confirms it's running does it add
   "js-ready" to <html> — from that point .reveal elements fade in on scroll.
   If the script never runs (blocked, missing, file opened oddly), nothing hides. */
.js-ready .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.js-ready .reveal.is-visible{opacity:1;transform:translateY(0);}
.values .value:nth-child(2){transition-delay:.08s;}
.values .value:nth-child(3){transition-delay:.16s;}
.cards .card:nth-child(2){transition-delay:.08s;}
.steps .step:nth-child(2){transition-delay:.06s;}
.steps .step:nth-child(3){transition-delay:.12s;}
.steps .step:nth-child(4){transition-delay:.18s;}

/* ---------- social proof strip ---------- */
.social-line{
  text-align:center;
  max-width:54ch;
  margin:0 auto;
}
.social-line p{margin:0 0 22px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
  .marquee{animation:none;}
}


/* ---------- mega nav dropdown ---------- */
.nav-item{position:relative;}
.nav-item > a{display:inline-flex;align-items:center;gap:5px;}
/* Invisible hover bridge: closes any residual gap between the trigger row and the panel
   below it, so the panel can never close while the pointer is travelling toward it. */
.nav-item::after{content:"";position:absolute;top:100%;left:-160px;right:-160px;height:22px;}
.nav-caret{width:8px;height:8px;opacity:.55;transition:transform .18s ease;}
.nav-item:hover .nav-caret{transform:rotate(180deg);}
.mega-panel{
  position:absolute;
  top:100%;
  left:0;
  min-width:920px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px 30px;
  box-shadow:0 30px 60px -30px rgba(42,34,28,.35);
  display:none;
  grid-template-columns:1fr 1fr;
  gap:4px 40px;
  z-index:60;
}
.nav-item:hover .mega-panel{display:grid;}
.mega-col{display:flex;flex-direction:column;gap:2px;}
.mega-col-title{display:block;font-size:0.96rem;color:var(--leather);margin-bottom:8px;}
.mega-panel a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:11px 14px;
  border-radius:12px;
  white-space:nowrap;
  transition:background .15s ease;
}
.mega-panel a span{font-family:var(--font-display);font-size:1.5rem;color:var(--text);}
.mega-panel a small{font-size:1.15rem;color:var(--text-soft);white-space:normal;}
.mega-panel a:hover{background:var(--leather-wash);}
.mega-panel.mega-panel--3col{grid-template-columns:repeat(3,1fr);min-width:1300px;}
.nav-links.right .nav-item .mega-panel{left:auto;right:0;transform:none;}
@media (max-width:900px){
  .mega-panel,
  .mega-panel.mega-panel--3col{min-width:340px;grid-template-columns:1fr;gap:18px 0;}
}

/* ---------- nav actions: search / cart / account ---------- */
.nav-actions{display:flex;align-items:center;gap:14px;margin-left:16px;padding-left:16px;border-left:1px solid var(--line);flex-shrink:0;}
.nav-actions a,
.nav-actions button{background:none;border:none;padding:0;cursor:pointer;color:var(--text);opacity:.8;display:flex;transition:opacity .15s ease;}
.nav-actions a:hover,
.nav-actions button:hover{opacity:1;}
.nav-actions svg{width:29px;height:29px;stroke-width:1.5;}
.nav-search{position:relative;display:flex;align-items:center;}
@media (max-width:760px){
  .nav-actions{
    border-left:none;
    margin-left:0;
    padding-left:0;
    gap:12px;
  }
  .nav-actions svg{width:22px;height:22px;}
}

/* ---------- search dropdown overlay (top half of the screen) ---------- */
.search-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:62vh;
  z-index:300;
  background:var(--bg);
  box-shadow:0 40px 70px -30px rgba(20,15,10,.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:calc(env(safe-area-inset-top, 0px) + 36px) 24px 36px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-14px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.search-overlay.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
body.search-overlay-open{overflow:hidden;}
.search-overlay-close{
  position:absolute;
  top:24px;
  right:24px;
  background:none;
  border:none;
  padding:6px;
  cursor:pointer;
  color:var(--text);
}
.search-overlay-close svg{width:22px;height:22px;display:block;}
.search-overlay-inner{width:100%;max-width:840px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px;}
.search-overlay-logo{font-size:1.8rem;margin-bottom:-12px;}
.search-overlay-columns{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.search-overlay-form{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:2px solid var(--line);
  padding-bottom:18px;
}
.search-overlay-form svg{width:22px;height:22px;stroke:var(--text-soft);flex-shrink:0;}
.search-overlay-form input{
  flex:1;
  border:none;
  background:transparent;
  font-family:var(--font-display);
  font-size:clamp(1.4rem,3vw,2.1rem);
  color:var(--text);
  padding:6px 0;
}
.search-overlay-form input:focus{outline:none;box-shadow:none;}
.search-overlay-form input::placeholder{color:var(--text-soft);}
.search-overlay-form button[type="submit"]{
  background:var(--text);
  color:var(--bg);
  border:none;
  border-radius:999px;
  padding:10px 22px;
  font-family:var(--font-accent);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s ease;
}
.search-overlay-form button[type="submit"]:hover{background:var(--leather);}
.search-overlay-section{width:100%;}
.search-overlay-label{display:block;font-size:.9rem;color:var(--text-soft);margin-bottom:16px;}
.search-overlay-tags{display:flex;flex-wrap:wrap;gap:8px;}
.search-overlay-tags a{
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:1.02rem;
  color:var(--text);
  transition:background .15s ease, border-color .15s ease;
}
.search-overlay-tags a:hover{background:var(--leather-wash);border-color:var(--leather);}
.search-overlay-products{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.search-overlay-product{display:flex;flex-direction:column;gap:8px;}
.search-overlay-product-image{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--stone);}
.search-overlay-product-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.search-overlay-product:hover .search-overlay-product-image img{transform:scale(1.05);}
.search-overlay-product-noimage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.search-overlay-product-noimage svg{width:24px;height:24px;stroke:var(--leather);opacity:.7;}
.search-overlay-product-title{font-family:var(--font-display);font-size:.98rem;color:var(--text);}
.search-overlay-product-price{font-size:.88rem;color:var(--text-soft);}
.search-overlay-empty{color:var(--text-soft);font-size:1.02rem;}
@media (max-width:760px){
  .search-overlay{position:fixed;inset:0;height:auto;box-shadow:none;padding-top:calc(env(safe-area-inset-top, 0px) + 32px);}
  .search-overlay-logo{font-size:1.5rem;}
  .search-overlay-inner{gap:32px;}
  .search-overlay-columns{grid-template-columns:1fr;gap:32px;}
}

/* ---------- hero video stage ---------- */
.hero-stage{position:relative;aspect-ratio:16/8.5;overflow:hidden;background:var(--stone);margin-bottom:clamp(28px,4vw,44px);border-radius:26px;}
@media (max-width:760px){.hero-stage{aspect-ratio:4/5;}}
.hero-stage video,
.hero-stage > img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-stage .fallback{position:absolute;inset:0;}
.hero-stage-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(20,14,9,.03), rgba(20,14,9,.16));
  pointer-events:none;
}
.hero-video-word{
  font-family:var(--font-display);
  color:#fff;
  font-size:clamp(5.2rem,16vw,11rem);
  letter-spacing:.06em;
  text-shadow:0 12px 40px rgba(0,0,0,.35);
}
.hero-stage .play-badge{position:absolute;top:auto;left:auto;bottom:20px;right:20px;transform:none;}
.hero-stage .photo-tag{z-index:2;}
.hero-stage .fallback{display:none !important;}

.nav-wordmark{opacity:1;transition:opacity .1s linear, transform .1s linear;}
.nav-wordmark.nav-wordmark-hidden{opacity:0;transform:translateY(10px);}
@media (max-width:760px){
  .nav-wordmark{font-size:1.5rem;white-space:nowrap;}
}


/* ---------- mobile menu (hamburger + full-screen drawer) ---------- */
.nav-left-mobile{display:none;}
.nav-hamburger{display:none;background:none;border:none;padding:6px;margin:0;cursor:pointer;color:var(--text);}
.nav-hamburger svg{width:22px;height:22px;display:block;}
/* Search trigger that sits next to the hamburger on mobile only — desktop keeps its
   magnifying glass on the right, inside .nav-actions. */
.nav-search-mobile{display:none;background:none;border:none;padding:6px;margin:0;cursor:pointer;color:var(--text);}
.nav-search-mobile svg{width:22px;height:22px;display:block;}
@media (max-width:760px){
  .nav-left-mobile{display:flex;align-items:center;gap:6px;}
  .nav-hamburger{display:flex;align-items:center;justify-content:center;}
  .nav-search-mobile{display:flex;align-items:center;justify-content:center;}
  .nav-actions .nav-search{display:none;}
  .nav-grid{grid-template-columns:auto 1fr auto;}
}
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--bg);
  transform:translateX(-100%);
  transition:transform .3s ease;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:20px clamp(20px,6vw,40px) 40px;
}
.mobile-nav.open{transform:translateX(0);}
@media (min-width:761px){.mobile-nav{display:none;}}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.mobile-nav-head .wordmark{font-size:1.3rem;}
.mobile-nav-close{background:none;border:none;padding:6px;color:var(--text);cursor:pointer;}
.mobile-nav-close svg{width:20px;height:20px;display:block;}
.mobile-nav-search input{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  font-family:var(--font-display);
  font-size:1.44rem;
  background:var(--surface);
  color:var(--text);
  margin-bottom:6px;
}
.mobile-nav-links{display:flex;flex-direction:column;margin-top:8px;}
.mobile-nav-links a{padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:1.63rem;color:var(--text);}
.mobile-nav-links a.sub{padding:9px 0 9px 16px;font-size:1.31rem;color:var(--text-soft);border-bottom:none;}
/* Accordion: a category with sub-pages (Produkte, Material & Handwerk) shows its
   sub-links only after tapping the chevron, instead of always listing everything
   flat underneath it. */
.mobile-nav-group{border-bottom:1px solid var(--line);}
.mobile-nav-group-head{display:flex;align-items:center;}
.mobile-nav-group-head > a{flex:1;border-bottom:none;}
.mobile-nav-toggle{background:none;border:none;padding:12px 6px;margin:0;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mobile-nav-toggle svg{width:16px;height:16px;transition:transform .2s ease;}
.mobile-nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.mobile-nav-sub{display:flex;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .3s ease;}
.mobile-nav-sub.open{max-height:600px;}
.mobile-nav-sub a.sub:last-child{margin-bottom:10px;}
.mobile-nav-actions{display:flex;gap:10px;margin-top:20px;}
.mobile-nav-actions a{
  flex:1;
  text-align:center;
  padding:13px;
  border-radius:999px;
  border:1px solid var(--line);
  font-family:var(--font-accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.15rem;
  color:var(--text);
}
body.mobile-nav-open{overflow:hidden;}

/* ---------- reusable info panels (size guide / versand / pflege) ---------- */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;}
@media (max-width:600px){.info-grid{grid-template-columns:1fr;}}
.info-item{border-top:1px solid var(--line);padding-top:18px;}
.info-item .expanded{font-size:0.99rem;color:var(--leather);}
.info-item h3{font-weight:400;font-size:1.76rem;margin:10px 0 8px;}
.info-item p{font-size:1.36rem;color:var(--text-soft);margin:0;}

/* ---------- personalization panel ---------- */
.personalize-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(28px,4vw,44px);
  text-align:center;
}
.personalize-panel h2{max-width:26ch;margin:14px auto 16px;}
.personalize-panel p{max-width:56ch;margin:0 auto 18px;color:var(--text-soft);}

/* ---------- instagram preview grid ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:840px;margin:22px auto;}
.ig-tile{aspect-ratio:1/1;border-radius:14px;display:block;transition:transform .25s ease;}
.ig-tile:hover{transform:translateY(-3px);}
.ig-tile .fallback{padding:16px;gap:12px;}
.ig-tile .fallback .icon-chip{width:64px;height:64px;}
.ig-tile .fallback svg{width:28px;height:28px;}
.ig-tile .fallback .label{font-size:1.72rem;}
.ig-tile .fallback .desc{display:none;}

.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;}
@media (max-width:600px){.size-grid{grid-template-columns:1fr;}}
.size-item{border-top:1px solid var(--line);padding-top:18px;}
.size-item .expanded{font-size:0.99rem;color:var(--leather);}
.size-item h3{font-weight:400;font-size:1.76rem;margin:10px 0 8px;}
.size-item p{font-size:1.36rem;color:var(--text-soft);margin:0;}

/* craft intro — text + workshop photo */
.craft-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
@media (max-width:860px){.craft-intro{grid-template-columns:1fr;}}
.craft-intro-text h2{max-width:16ch;}
.craft-intro-text .num{
  font-family:var(--font-display);
  font-style:italic;
  font-size:2.56rem;
  color:var(--leather);
  display:block;
  margin-bottom:14px;
}
.craft-intro-text p{max-width:48ch;}
.craft-intro-media .photo-frame{aspect-ratio:4/3.3;}
.guide-diagram{background:var(--bg-alt);}
.guide-diagram svg,
.guide-diagram img{width:100%;height:100%;object-fit:cover;display:block;}
.guide-steps{display:flex;flex-direction:column;margin-top:28px;}
.guide-step{display:flex;gap:16px;position:relative;padding-bottom:24px;}
.guide-step:last-child{padding-bottom:0;}
.guide-step:not(:last-child)::before{
  content:'';
  position:absolute;
  left:19px;
  top:44px;
  bottom:2px;
  width:1px;
  background:var(--line);
}
.guide-step-num{
  flex:none;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.68rem;
  color:var(--leather);
  position:relative;
  z-index:1;
}
.guide-step-body{padding-top:6px;}
.guide-step-body h3{font-size:1.57rem;font-weight:400;margin:0 0 6px;color:var(--text);}
.guide-step-body p{font-size:1.38rem;line-height:1.6;color:var(--text-soft);margin:0;max-width:44ch;}
.guide-step-body strong{color:var(--text);font-weight:600;}

/* craft steps — alternating photo/text editorial blocks */
.craft-step{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.craft-step + .craft-step{margin-top:clamp(56px,7vw,88px);}
.craft-step.reverse .craft-step-media{order:2;}
.craft-step.reverse .craft-step-text{order:1;}
.craft-step-media .photo-frame{aspect-ratio:4/3.2;}
.craft-step-text .num{
  font-family:var(--font-display);
  font-style:italic;
  font-size:2.56rem;
  color:var(--leather);
  display:block;
  margin-bottom:14px;
}
.craft-step-text h3{font-size:2.24rem;font-weight:400;margin:0 0 14px;}
.craft-step-text p{font-size:1.57rem;max-width:46ch;}
.craft-step-text p + p{margin-top:12px;}
@media (max-width:860px){
  .craft-step{grid-template-columns:1fr;}
  .craft-step-media,
  .craft-step.reverse .craft-step-media{order:-1;}
  .craft-step-text,
  .craft-step.reverse .craft-step-text{order:0;}
}

/* quality grid — "was Qualität ausmacht" */
.quality-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 28px;
  margin-top:44px;
}
@media (max-width:860px){.quality-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.quality-grid{grid-template-columns:1fr;}}
.quality-item{border-top:1px solid var(--line);padding-top:18px;}
.quality-item h3{font-size:1.6rem;font-weight:400;margin:0 0 8px;}
.quality-item p{font-size:1.36rem;margin:0;}
.quality-grid .quality-item:nth-child(2){transition-delay:.05s;}
.quality-grid .quality-item:nth-child(3){transition-delay:.1s;}
.quality-grid .quality-item:nth-child(4){transition-delay:.15s;}
.quality-grid .quality-item:nth-child(5){transition-delay:.2s;}
.quality-grid .quality-item:nth-child(6){transition-delay:.25s;}

/* ---------- faq ---------- */
.faq-head{text-align:center;max-width:56ch;margin:0 auto 44px;}
.faq-head p{margin:0;}
.faq-list{
  max-width:760px;
  margin:0 auto;
}
.faq-item{
  border-top:1px solid var(--line);
  padding:26px 0;
}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item h3{font-size:1.68rem;font-weight:400;margin:0 0 10px;color:var(--text);}
.faq-item p{font-size:1.47rem;margin:0;max-width:60ch;}
.faq-list .faq-item:nth-child(2){transition-delay:.04s;}
.faq-list .faq-item:nth-child(3){transition-delay:.08s;}
.faq-list .faq-item:nth-child(4){transition-delay:.12s;}
.faq-list .faq-item:nth-child(5){transition-delay:.16s;}
.faq-list .faq-item:nth-child(6){transition-delay:.2s;}

/* ---------- password / "opening soon" page ---------- */
body.password{
  background:var(--bg);
  color:var(--text);
  letter-spacing:normal;
}
.kalea-password-header{
  padding:32px 24px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  max-width:none;
}
.kalea-password-header .wordmark{
  font-size:2.4rem;
  color:var(--text);
}
.kalea-password-header .password-content{color:var(--text-soft);font-size:1.22rem;}
.kalea-password-header password-modal{position:fixed;top:16px;right:16px;z-index:50;}
/* Deliberately subtle: the store-password login is only for staff, so it
   should not catch a regular visitor's eye on the "Bald verfügbar" page. */
.kalea-password-header .password-link{font-size:.72rem;opacity:.45;transition:opacity .15s ease;}
.kalea-password-header .password-link .svg-wrapper{width:1.05rem;height:1.05rem;margin-right:.35rem;}
.kalea-password-header .password-link:hover{opacity:1;}
.password-hero{padding:clamp(56px,12vw,140px) 24px;text-align:center;}
.password-hero .wrap{max-width:640px;margin:0 auto;}
.password-hero .pill{margin-bottom:20px;}
.password-hero h1{font-size:clamp(2.72rem,5vw,4.32rem);}
.password-hero .lede{max-width:52ch;margin:0 auto 32px;}
.password-signup-wrap{max-width:480px;margin:0 auto;}
.kalea-password-footer{
  padding:32px 24px 48px;
  text-align:center;
  background:var(--bg);
  color:var(--text-soft);
}
.kalea-password-footer .list-social{display:flex;justify-content:center;align-items:center;gap:14px;list-style:none;padding:0;margin:0 0 20px;}
.kalea-password-footer .password__footer-text{color:var(--text-soft);font-size:1.05rem;}
.kalea-password-footer .password__footer-text a{color:var(--leather);}
.kalea-password-footer .password__footer-text a:hover{color:var(--accent-orange);}
.kalea-password-footer .password__footer-caption{display:flex;flex-direction:column;align-items:center;gap:6px;}
.kalea-password-footer .shopify-link{display:flex;justify-content:center;}

/* password-entry modal (kept functional, restyled to match) */
.password-link{color:var(--text-soft);}
.password-link:hover{color:var(--leather);}
.password-modal__content{background:var(--bg);color:var(--text);}
.password-modal__content-heading{font-family:var(--font-display);color:var(--text);font-weight:400;}
.password-form .field__input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  font-family:inherit;
  background:var(--surface);
  color:var(--text);
}
.password-button{
  background:var(--text);
  color:var(--bg);
  border-radius:999px;
  border:none;
  padding:12px 24px;
  cursor:pointer;
  transition:background .15s ease;
}
.password-button:hover{background:var(--leather);}

/* ---------- Widerruf form ---------- */
.widerruf-form{max-width:560px;margin:32px 0 0;}
.widerruf-field{margin:0 0 20px;}
.widerruf-field label{display:block;font-size:1.15rem;color:var(--text);margin-bottom:8px;}
.widerruf-field input,.widerruf-field textarea{
  width:100%;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  font-family:inherit;
  font-size:1.15rem;
  color:var(--text);
}
.widerruf-field textarea{resize:vertical;line-height:1.6;}
.widerruf-field input:focus,.widerruf-field textarea:focus{outline:none;box-shadow:none;border-color:var(--leather);}
.form-success{color:var(--leather);margin:0 0 20px;font-size:1.15rem;}
.form-error{background:rgba(200,60,40,.09);color:#b3402b;padding:14px 18px;border-radius:12px;margin:0 0 20px;font-size:1.15rem;}
.widerruf-hint{font-size:1.09rem;color:var(--text-soft);margin-top:-8px;}

/* ---------- Gewährleistungs-Hinweis Modal ---------- */
.guarantee-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(20,16,12,.72);
  padding:24px;
  align-items:center;
  justify-content:center;
}
.guarantee-modal.open{display:flex;}
.guarantee-modal-inner{
  position:relative;
  max-width:560px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  background:var(--bg);
  border-radius:16px;
  padding:12px;
}
.guarantee-modal-inner img{display:block;width:100%;height:auto;border-radius:10px;}
.guarantee-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--text);
  z-index:2;
}
.guarantee-modal-close:hover{color:var(--leather);}
.guarantee-modal-close svg{width:18px;height:18px;}
@media (max-width:600px){
  .guarantee-modal{padding:12px;}
}

/* ---------- cart drawer: re-theme to match Kalea instead of raw Dawn scheme-1 ---------- */
.cart-drawer .drawer__inner{
  --color-background: 246, 244, 240;
  --color-foreground: 42, 34, 28;
  --color-button: 42, 34, 28;
  --color-button-text: 246, 244, 240;
  --color-secondary-button: 246, 244, 240;
  --color-secondary-button-text: 42, 34, 28;
  --color-link: 121, 98, 84;
  --color-shadow: 42, 34, 28;
}
.cart-drawer{
  --font-heading-family: var(--font-display);
  --font-body-family: var(--font-display);
}
.cart-drawer .drawer__heading{font-family:var(--font-display);font-weight:400;font-size:1.8rem;margin:0;}
/* Cart items inherit the site's large default paragraph/heading sizes (built
   for hero/marketing copy) unless scoped back down here — same fix pattern as
   the drawer heading above. */
.cart-drawer .cart-item__name{font-size:1.31rem;}
.cart-drawer p,
.cart-drawer .product-option,
.cart-drawer .cart-item__price-wrapper{font-size:1.09rem;}
.cart-drawer .totals__total,
.cart-drawer .totals__total-value{font-size:1.31rem;}
.cart-drawer .tax-note{font-size:1.02rem;color:var(--text-soft);}
/* Uniform, cropped-to-fit thumbnails in the cart drawer, regardless of the
   uploaded photo's own dimensions/aspect ratio — no need to pre-crop product
   images to matching sizes before uploading them in Admin. */
.cart-drawer img.cart-item__image{
  width:110px;
  height:110px;
  max-width:110px;
  object-fit:cover;
  border-radius:12px;
}
.cart-drawer .button,
.cart-drawer .cart__checkout-button{border-radius:999px;}

/* ---------- Dawn product page: re-theme to match Kalea instead of raw Dawn scheme-1 ----------
   Customers land here from outside our own Kollektion/Leine buy pages (e.g. a product
   link inside the Shopify-hosted customer-account order history, which we can't point
   anywhere else) — same override technique as the cart drawer above: reassign Dawn's
   own --color-*/--font-*/--buttons-radius custom properties at the section's outer
   <product-info> element so every Dawn component underneath (price, buttons, variant
   picker, accordion, …) picks up Kalea's palette/fonts automatically, no per-component
   overrides needed. */
/* !important here: this is fighting Shopify's own PLATFORM-generated
   ".color-scheme-N" CSS (auto-injected from the color_scheme_group setting,
   not something in our theme files we can inspect/out-specificity reliably)
   which sits on this exact same element (<product-info class="… color-
   scheme-N">). A plain or even ID-attribute-boosted selector still lost to
   it, so this is the one place in the project where !important is the
   pragmatic, deliberate choice rather than a reach for more specificity. */
product-info{
  --color-background: 246, 244, 240 !important;
  --color-foreground: 42, 34, 28 !important;
  --color-button: 42, 34, 28 !important;
  --color-button-text: 246, 244, 240 !important;
  /* Same dark fill as the primary button — Dawn demotes "In den Warenkorb" to an
     outlined "secondary" look whenever an express-checkout button (PayPal, …) is
     also shown, but our own Kollektion/Leine pages have no such two-tier concept
     (every CTA is one solid dark pill), so matching that here keeps this page
     visually consistent with the rest of the site instead of looking different. */
  --color-secondary-button: 42, 34, 28 !important;
  --color-secondary-button-text: 246, 244, 240 !important;
  --color-link: 121, 98, 84 !important;
  --color-shadow: 42, 34, 28 !important;
  --font-heading-family: var(--font-display) !important;
  --font-body-family: var(--font-display) !important;
  --buttons-radius: 999px !important;
  --buttons-radius-outset: 999px !important;
}
.product__title{font-weight:400;}
.product__media-wrapper .product__media-item,
.product__media-wrapper .product__media{border-radius:18px;overflow:hidden;}
.product__info-container{gap:2.4rem;}
.product__accordion summary .accordion__title{font-family:var(--font-display);font-weight:400;}
.price{font-family:var(--font-display);}

/* Farbe/Größe as clean "Label Wert" lines (bold value, no colon) instead of
   Dawn's default definition-list styling — closer to the reference layout
   the merchant asked to match. */
.cart-drawer .product-option{
  display:flex;
  gap:6px;
  font-size:1.09rem;
  color:var(--text-soft);
  margin:2px 0;
}
.cart-drawer .product-option dt{font-weight:400;}
.cart-drawer .product-option dd{margin:0;font-weight:600;color:var(--text);}

/* Quantity stepper + remove button recomposed into one bordered bar (remove
   on the far left, then minus/number/plus) instead of two separate controls —
   same functionality throughout, just visually merged. */
.cart-drawer .quantity-popover-wrapper{
  display:flex;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  width:100%;
  margin-top:10px;
}
.cart-drawer .quantity-popover-container{flex:1;min-width:0;}
.cart-drawer .quantity{
  width:100%;
  border-radius:0;
  min-height:40px;
}
.cart-drawer .quantity:after,
.cart-drawer .quantity:before{content:none;box-shadow:none;background:none;}
.cart-drawer cart-remove-button{order:-1;display:flex;}
.cart-drawer .cart-remove-button{
  width:44px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-soft);
  border-right:1px solid var(--line);
  border-radius:0;
}
.cart-drawer .cart-remove-button:hover{color:var(--leather);background:none;}

/* Only one price per line, small and on the left under the product name —
   drop the separate right-aligned line-total column entirely (the drawer's
   overall total at the bottom already reflects quantity × price correctly). */
/* "td." prefix is load-bearing here, same reason as the feature-card fix
   further up: Dawn's own component-cart-drawer.css sets display:flex on this
   exact same ".cart-drawer .cart-item__totals" selector and loads AFTER this
   file, so an equal-specificity rule here would silently lose the tie. */
.cart-drawer td.cart-item__totals{display:none;}

/* ---------- cart drawer: "Das könnte dir auch gefallen" quick-add strip ---------- */
.cart-drawer-recs{
  border-top:1px solid var(--line);
  padding:20px 20px 4px;
}
.cart-drawer-recs h3{font-size:1.22rem;font-weight:400;margin:0 0 14px;color:var(--text);}
.cart-drawer-recs-list{display:flex;flex-direction:column;gap:14px;}
.cart-drawer-rec{display:flex;align-items:center;gap:12px;}
.cart-drawer-rec-image{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-alt);
}
.cart-drawer-rec-image img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-drawer-rec-info{flex:1;min-width:0;}
.cart-drawer-rec-info a{color:var(--text);font-size:1.09rem;display:block;}
.cart-drawer-rec-info a:hover{color:var(--leather);}
.cart-drawer-rec-price{color:var(--text-soft);font-size:0.98rem;}
.cart-drawer-rec-add{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.4rem;
  line-height:1;
  padding:0;
}
.cart-drawer-rec-add:hover{background:var(--text);color:var(--bg);}
.cart-drawer-rec-add:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- full cart page: "Das könnte dir auch gefallen" card grid ---------- */
/* Deliberately its own "cart-recs-card" class, not the shared ".card" — Dawn's
   component-card.css (loaded globally now that the cart drawer is on) has a
   same-specificity ".card" rule that silently wins ties, exactly what broke
   the Kollektion feature card earlier; a distinct class sidesteps that
   entirely instead of relying on specificity tricks again. */
.cart-recs-section{
  max-width:var(--page-width,1200px);
  margin:56px auto 0;
  padding:40px 20px 0;
  border-top:1px solid var(--line);
}
.cart-recs-heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.92rem;
  color:var(--text);
  margin:0 0 28px;
}
.cart-recs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:28px;
}
.cart-recs-card{display:flex;flex-direction:column;}
.cart-recs-card-image{
  display:block;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  background:var(--bg-alt);
  margin-bottom:14px;
}
.cart-recs-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.cart-recs-card-image:hover img{transform:scale(1.045);}
.cart-recs-card-body{display:flex;flex-direction:column;gap:4px;}
.cart-recs-card-title{color:var(--text);font-size:1.22rem;}
.cart-recs-card-title:hover{color:var(--leather);}
.cart-recs-card-price{color:var(--text-soft);font-size:1.09rem;margin-bottom:10px;}
.cart-recs-card-add{
  background:var(--text);
  color:var(--bg);
  border:none;
  border-radius:999px;
  padding:11px 20px;
  font-size:1.02rem;
  cursor:pointer;
  transition:background .15s ease;
}
.cart-recs-card-add:hover{background:var(--leather);}
.cart-recs-card-add:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- header cart icon: own bag icon + item count beside it ---------- */
.kalea-cart-icon{display:flex;align-items:center;gap:5px;}
.kalea-cart-count-visible{font-size:1.15rem;color:var(--text);line-height:1;}
@media (max-width:760px){
  .kalea-cart-count-visible{font-size:1.02rem;}
}

/* ---------- cart drawer: "Zum Warenkorb" link below checkout ---------- */
.kalea-view-cart-link{
  display:block;
  text-align:center;
  margin-top:14px;
  font-size:1.09rem;
  color:var(--text-soft);
  border-bottom:1px solid transparent;
}
.kalea-view-cart-link:hover{color:var(--leather);border-bottom-color:var(--leather);}