/** Shopify CDN: Minification failed

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

**/
/* ─────────────────────────────────────────
   FEMMAS PREMIUM · ATELIER · Light Theme
   Shopify Theme — Light/Cream + Dunkle Akzente
   ───────────────────────────────────────── */

:root {
  --bg:#F8F4ED;
  --bg-2:#F1ECE2;
  --bg-3:#FFFFFF;
  --line:#D9D2C5;
  --line-soft:#E6DFD2;
  --ink:#0F0D0B;
  --ink-soft:#2C2823;
  --muted:#6F685E;
  --gold:#9D7E48;
  --gold-soft:#B89866;
  --gold-deep:#7A6238;
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --display:'Italiana', 'Cormorant Garamond', serif;
  --sans:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1440px;margin:0 auto;padding:0 48px}
.container-narrow{max-width:960px;margin:0 auto;padding:0 48px}
@media(max-width:768px){.container,.container-narrow{padding:0 24px}}

/* Announcement */
.fp-announce{background:#0F0D0B;color:#E6DFD2;text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:10px 20px}
.fp-announce span{color:var(--gold-soft)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,244,237,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 48px;gap:32px}
.nav-left,.nav-right{display:flex;gap:30px;align-items:center}
.nav-right{justify-content:flex-end}
.nav-link{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);transition:color .25s;font-weight:400}
.nav-link:hover{color:var(--gold)}
.nav-link.active{color:var(--ink);font-weight:500}
.logo{font-family:var(--display);font-size:28px;letter-spacing:.32em;color:var(--ink);text-align:center;line-height:1}
.logo small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.45em;color:var(--gold);margin-top:4px}
.lang-pill{border:1px solid var(--line);padding:6px 12px;font-size:10px;letter-spacing:.2em;border-radius:999px;color:var(--ink-soft)}
.icon-btn{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.18em;color:var(--ink-soft)}
.icon-btn svg{width:16px;height:16px;stroke:var(--ink-soft);stroke-width:1.4;fill:none}
.cart-num{background:var(--ink);color:var(--bg);font-size:9px;font-weight:600;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
@media(max-width:920px){.site-header .nav{grid-template-columns:auto 1fr auto;padding:16px 24px}.nav-left{display:none}.nav-right .lang-pill,.nav-right .icon-btn span{display:none}}

/* Breadcrumb */
.breadcrumb{padding:24px 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{margin:0 12px;color:var(--line)}

/* Common */
.eyebrow{color:var(--gold-deep);font-size:11px;letter-spacing:.4em;text-transform:uppercase;margin-bottom:18px;display:inline-flex;align-items:center;gap:14px;font-weight:500}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold-deep)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:24px;height:1px;background:var(--gold-deep)}

h1.page-title{font-family:var(--display);font-size:clamp(48px,6vw,84px);line-height:.95;font-weight:300;color:var(--ink)}
h1.page-title em,h2 em,h3 em{font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-weight:300}
h2{font-family:var(--display);font-size:clamp(40px,4.5vw,64px);line-height:1;font-weight:300;color:var(--ink)}
h3{font-family:var(--display);font-size:clamp(28px,3vw,42px);line-height:1.05;font-weight:300;color:var(--ink)}
.lead{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-soft);line-height:1.5;max-width:720px}

/* Buttons */
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 32px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;transition:all .3s;border:1px solid transparent;text-align:center}
.btn-primary{background:var(--ink);color:var(--bg);font-weight:500}
.btn-primary:hover{background:var(--gold-deep);transform:translateY(-1px)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-link{border-bottom:1px solid var(--ink);padding:0 0 6px;color:var(--ink);font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500}

/* Form */
.field{margin-bottom:24px}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;font-weight:500}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:var(--bg-3);padding:16px 18px;font-family:var(--sans);font-size:14px;font-weight:300;color:var(--ink);transition:border-color .25s;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)}
.field textarea{resize:vertical;min-height:140px}

/* HERO (Homepage) */
.fp-hero{position:relative;height:92vh;min-height:720px;overflow:hidden;display:flex;align-items:flex-end;background:#000}
.fp-hero-img{position:absolute;inset:0;background-size:cover;background-position:center 25%;filter:brightness(.55) contrast(1.05) saturate(.85);transform:scale(1.04);transition:transform 12s ease-out}
.fp-hero:hover .fp-hero-img{transform:scale(1.08)}
.fp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,.5) 0%,rgba(15,13,11,.2) 35%,rgba(15,13,11,.65) 80%,var(--bg) 100%);pointer-events:none}
.fp-hero-content{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:0 48px 96px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.fp-hero h1{font-family:var(--display);font-size:clamp(54px,6.5vw,96px);line-height:.95;letter-spacing:-.01em;font-weight:300;color:#fff}
.fp-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:300;color:#D4B98C}
.fp-hero p{color:#E6DFD2;font-size:16px;line-height:1.7;max-width:440px}
.fp-hero p em{color:#D4B98C;font-family:var(--serif);font-style:italic}
.fp-hero .eyebrow{color:#C9A66B;margin-bottom:24px}
.fp-hero .eyebrow::before{background:#C9A66B}
.fp-hero .btn-primary{background:#C9A66B;color:#0F0D0B}
.fp-hero .btn-primary:hover{background:#D4B98C}
.fp-hero .btn-ghost{border-color:#E6DFD2;color:#fff}
.fp-hero .btn-ghost:hover{border-color:#C9A66B;color:#C9A66B;background:transparent}
.fp-hero-right{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
@media(max-width:880px){.fp-hero{height:auto;min-height:0;padding:140px 0 80px}.fp-hero-content{grid-template-columns:1fr;padding:0 24px;gap:36px}}

/* Marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:24px 0;background:var(--bg)}
.marquee-track{display:flex;gap:80px;animation:slide 36s linear infinite;white-space:nowrap}
.marquee-item{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:22px;display:flex;align-items:center;gap:80px}
.marquee-item::after{content:"✦";color:var(--gold);font-size:16px;font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections */
.fp-section{padding:120px 0;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;gap:40px;flex-wrap:wrap}
.section-head .text{max-width:380px;color:var(--ink-soft);font-size:15px;line-height:1.7}

/* Category grid */
.cat-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.cat{position:relative;overflow:hidden;aspect-ratio:1/1.15;background:#000;cursor:pointer}
.cat.large{grid-row:span 2;aspect-ratio:auto;min-height:560px}
.cat-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s ease}
.cat:hover .cat-bg{transform:scale(1.06)}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%)}
.cat-content{position:absolute;left:32px;right:32px;bottom:28px;z-index:2}
.cat-num{color:#E6DFD2;font-size:10px;letter-spacing:.4em;font-weight:500}
.cat h3{font-family:var(--display);font-size:30px;margin:6px 0 6px;font-weight:400;color:#fff}
.cat.large h3{font-size:42px}
.cat-sub{color:#E6DFD2;font-size:13px;display:flex;align-items:center;gap:10px}
.cat-sub::after{content:"→";color:#E6DFD2;font-size:16px;transition:transform .3s}
.cat:hover .cat-sub::after{transform:translateX(4px)}
@media(max-width:880px){.cat-grid{grid-template-columns:1fr 1fr}.cat.large{grid-row:span 1;min-height:0;aspect-ratio:1/1.15}}
@media(max-width:540px){.cat-grid{grid-template-columns:1fr}}

/* BFS philosophy */
.bfs{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);position:relative;overflow:hidden}
.bfs::before{content:"BFS";position:absolute;top:50%;right:-80px;transform:translateY(-50%);font-family:var(--display);font-size:560px;line-height:.8;color:rgba(15,13,11,.04);pointer-events:none}
.bfs-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:90px;align-items:center;position:relative}
.bfs-img{position:relative;aspect-ratio:4/5;background-size:cover;background-position:center}
.bfs-img::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);transform:translate(20px,20px);pointer-events:none}
.bfs-quote{font-family:var(--display);font-size:36px;line-height:1.15;color:var(--ink);margin:32px 0;font-weight:300}
.bfs-quote em{font-family:var(--serif);font-style:italic;color:var(--gold-deep)}
.bfs-list{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;margin-top:48px;border-top:1px solid var(--line);padding-top:36px;list-style:none}
.bfs-list li dt{font-family:var(--display);color:var(--ink);font-size:34px;line-height:1;margin-bottom:8px}
.bfs-list li dt small{color:var(--gold)}
.bfs-list li dd{color:var(--ink-soft);font-size:13px;letter-spacing:.06em;line-height:1.5}
@media(max-width:880px){.bfs-grid{grid-template-columns:1fr;gap:48px}}

/* Product card */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-card{position:relative;cursor:pointer}
.product-card .pc-img{aspect-ratio:3/4;background:linear-gradient(180deg,#FFFFFF 0%,#F1ECE2 100%);position:relative;overflow:hidden;margin-bottom:20px}
.product-card .pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:36px;transition:transform 1.2s ease,opacity .4s}
.product-card:hover .pc-img img{transform:scale(1.04)}
.pc-tag{position:absolute;top:14px;left:14px;background:var(--ink);color:var(--bg);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;z-index:2;font-weight:500}
.pc-quick{position:absolute;left:14px;right:14px;bottom:14px;background:var(--ink);color:var(--bg);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:14px;text-align:center;transform:translateY(110%);transition:transform .35s ease;z-index:2;font-weight:500}
.product-card:hover .pc-quick{transform:translateY(0)}
.pc-cat{color:var(--gold-deep);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.product-card h4{font-family:var(--display);font-size:22px;letter-spacing:.02em;margin:8px 0 6px;font-weight:400;color:var(--ink)}
.pc-desc{font-size:13px;color:var(--muted);margin-bottom:14px}
.pc-bot{display:flex;justify-content:space-between;align-items:center}
.price{font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:400}
.price small{color:var(--muted);font-size:11px;font-family:var(--sans)}
.price-old{font-family:var(--serif);font-size:15px;color:var(--muted);text-decoration:line-through;margin-left:8px}
.swatches{display:flex;gap:6px}
.swatch{width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}
@media(max-width:1080px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.products-grid{grid-template-columns:repeat(2,1fr)}}

/* PDP */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:flex-start}
.pdp .gallery{position:sticky;top:80px;display:grid;grid-template-columns:80px 1fr;gap:16px;padding:48px 24px 48px 0}
.pdp .thumbs{display:flex;flex-direction:column;gap:10px}
.pdp .thumb{aspect-ratio:1/1.1;background-size:cover;background-position:center;background-color:var(--bg-3);border:1px solid var(--line-soft);cursor:pointer;transition:border-color .2s;opacity:.7}
.pdp .thumb:hover,.pdp .thumb.active{opacity:1;border-color:var(--ink)}
.pdp .main-img{aspect-ratio:4/5;background:var(--bg-3);background-size:contain;background-position:center;background-repeat:no-repeat;position:relative;border:1px solid var(--line-soft)}
.pdp .info{padding:48px 0 48px 64px;max-width:560px}
.pdp-title{font-family:var(--display);font-size:54px;line-height:1;font-weight:300;margin-bottom:12px;color:var(--ink)}
.pdp-sub{font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:22px;margin-bottom:24px}
.price-block{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.price-current{font-family:var(--serif);font-size:36px;color:var(--ink);font-weight:400}
.swatch-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.swatch-item{cursor:pointer;text-align:center;position:relative}
.swatch-circle{width:100%;aspect-ratio:1/1;border-radius:50%;border:2px solid transparent;transition:all .2s}
.swatch-item:hover .swatch-circle{transform:scale(1.05)}
.swatch-item.active .swatch-circle{border-color:var(--ink);box-shadow:0 0 0 1px var(--bg) inset}
.swatch-num{font-size:9px;color:var(--muted);margin-top:6px;letter-spacing:.05em}
.cta-add{background:var(--ink);color:var(--bg);font-weight:500;height:60px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.cta-add:hover{background:var(--gold-deep);transform:translateY(-1px)}
@media(max-width:880px){.pdp{grid-template-columns:1fr}.pdp .gallery{position:relative;top:0;padding:24px 0}.pdp .info{padding:32px 0}}

/* Collection / PLP */
.plp-hero{position:relative;height:46vh;min-height:380px;overflow:hidden;display:flex;align-items:flex-end;background:#000}
.plp-hero-img{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:brightness(.6) contrast(1.05)}
.plp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,.5) 0%,rgba(15,13,11,.35) 50%,var(--bg) 100%)}
.plp-hero-content{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:0 48px 64px;width:100%}
.plp-hero h1{font-family:var(--display);color:#fff;font-weight:300;font-size:clamp(48px,5.5vw,84px);line-height:.95}
.plp-hero h1 em{font-family:var(--serif);font-style:italic;color:#D4B98C}
.plp-hero .eyebrow{color:#C9A66B;margin-bottom:14px}
.plp-hero .eyebrow::before{background:#C9A66B}
.plp-hero p{color:#E6DFD2;font-size:15px;margin-top:14px;max-width:560px;line-height:1.7}
.plp-main{padding:48px 0 120px}
.plp-layout{display:grid;grid-template-columns:240px 1fr;gap:60px}
.filter-sidebar{border-right:1px solid var(--line-soft);padding-right:40px}
.filter-group{border-bottom:1px solid var(--line-soft);padding:24px 0}
.filter-group h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:18px}
.filter-opt{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);padding:6px 0;cursor:pointer}
@media(max-width:980px){.plp-layout{grid-template-columns:1fr;gap:32px}.filter-sidebar{display:none}}

/* Footer */
.site-footer{background:var(--ink);color:#C9C2B5;padding:90px 0 40px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:60px;margin-bottom:80px}
.foot-logo{font-family:var(--display);font-size:36px;letter-spacing:.3em;color:#fff}
.foot-logo small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.4em;color:var(--gold-soft);margin-top:6px}
.foot-tag{color:#C9C2B5;font-family:var(--serif);font-style:italic;font-size:18px;margin-top:24px;line-height:1.5}
.foot-social{display:flex;gap:14px;margin-top:28px}
.foot-social a{width:36px;height:36px;border:1px solid #3A332C;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#C9C2B5;font-size:14px;transition:all .3s}
.foot-social a:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.foot-col h5{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:24px;font-weight:500}
.foot-col a{display:block;color:#C9C2B5;font-size:13px;padding:7px 0;transition:color .25s}
.foot-col a:hover{color:#fff}
.foot-bot{border-top:1px solid #3A332C;padding-top:30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;color:#9A9388;font-size:11px}
@media(max-width:980px){.foot-top{grid-template-columns:1fr 1fr;gap:48px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}

/* Prose */
.prose{max-width:760px;color:var(--ink-soft);font-size:15px;line-height:1.85}
.prose h2{font-size:32px;margin:48px 0 16px;line-height:1.1}
.prose h3{font-size:22px;margin:32px 0 12px;font-family:var(--display);font-weight:400}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{padding-left:24px;margin-bottom:20px}
.prose li{padding:4px 0}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold)}
/* ──────────────────────────────────────────────
   THEME PATCHES — Append to assets/femmas-theme.css
   ────────────────────────────────────────────── */

/* ── PDP Improvements ────────────────────────── */
.pdp-sale-badge{position:absolute;top:24px;left:24px;background:var(--ink);color:var(--bg);font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:6px 12px;font-weight:500;z-index:2}
.pdp-eyebrow{color:var(--gold-deep);font-size:11px;letter-spacing:.4em;text-transform:uppercase;margin-bottom:20px;font-weight:500;display:flex;align-items:center;gap:14px}
.pdp-eyebrow::before{content:"";width:24px;height:1px;background:var(--gold-deep)}
.pdp-rating-row{display:flex;align-items:center;gap:14px;padding-bottom:24px;border-bottom:1px solid var(--line-soft);margin-bottom:30px}
.pdp-stars{color:var(--gold);font-size:13px;letter-spacing:2px}
.pdp-rating-num{color:var(--ink-soft);font-size:13px}
.pdp-rating-num a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.price-old{font-family:var(--serif);font-size:22px;color:var(--muted);text-decoration:line-through;margin-left:10px}
.price-save{color:var(--bg);background:var(--ink);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;padding:5px 11px;margin-left:6px}
.price-meta{color:var(--muted);font-size:12px;margin-bottom:36px}
.pdp-desc{color:var(--ink-soft);font-size:15px;line-height:1.8;margin-bottom:36px}

.opt-group{margin-bottom:32px}
.opt-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;font-weight:500;gap:12px;flex-wrap:wrap}
.opt-label strong{color:var(--ink);font-weight:500}
.opt-help-link{color:var(--ink);font-size:11px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}

/* Family-grouped swatches */
.swatch-families{display:flex;flex-direction:column;gap:8px}
.swatch-family-group{border:1px solid var(--line);background:var(--bg-3);transition:border-color .2s}
.swatch-family-group[open]{border-color:var(--ink)}
.swatch-family-group summary{padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:14px;list-style:none;font-family:var(--display);font-size:18px;font-weight:400;color:var(--ink)}
.swatch-family-group summary::-webkit-details-marker{display:none}
.swatch-family-group summary .fam-name{flex:1}
.swatch-family-group summary .fam-meta{font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.swatch-family-group summary .fam-toggle{color:var(--gold);font-family:var(--display);font-size:22px;width:24px;text-align:center;transition:transform .3s}
.swatch-family-group[open] summary .fam-toggle{transform:rotate(45deg)}
.swatch-family-group .swatch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:6px 18px 18px}
@media(max-width:640px){.swatch-family-group .swatch-grid{grid-template-columns:repeat(4,1fr)}}

.swatch-item{cursor:pointer;text-align:center;display:block;padding:8px 4px;border:1px solid transparent;transition:all .2s;position:relative}
.swatch-item:hover{border-color:var(--line)}
.swatch-item.active{border-color:var(--ink);background:var(--bg-2)}
.swatch-item input{display:none}
.swatch-circle{width:100%;aspect-ratio:1/1;border-radius:50%;margin:0 auto 6px;box-shadow:0 1px 3px rgba(0,0,0,.12) inset}
.swatch-code{font-family:var(--display);font-size:14px;color:var(--ink);font-weight:400;line-height:1}
.swatch-name{font-size:9px;letter-spacing:.04em;color:var(--muted);line-height:1.2;margin-top:3px;min-height:22px}

/* Segmented buttons for size/concentration */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-btn{flex:1;min-width:80px;padding:14px 12px;border:1px solid var(--line);background:var(--bg-3);text-align:center;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:all .2s;position:relative}
.seg-btn input{display:none}
.seg-btn:hover{border-color:var(--ink-soft)}
.seg-btn.active{border-color:var(--ink);background:var(--ink);color:var(--bg)}

/* QTY + CTA */
.qty-cta{display:grid;grid-template-columns:120px 1fr;gap:12px;margin:8px 0 16px}
.qty{display:flex;align-items:center;border:1px solid var(--line);background:var(--bg-3);height:60px}
.qty button{flex:1;height:100%;color:var(--ink-soft);font-size:18px;cursor:pointer}
.qty input{width:36px;text-align:center;background:none;border:none;color:var(--ink);font-size:15px;padding:8px 0}
.cta-add{background:var(--ink);color:var(--bg);font-weight:500;height:60px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:none;cursor:pointer}
.cta-add:hover{background:var(--gold-deep);transform:translateY(-1px)}
.cta-price{border-left:1px solid rgba(248,244,237,.2);padding-left:14px;font-family:var(--serif);font-size:16px;letter-spacing:0;text-transform:none;font-weight:400}
.wishlist-btn{width:100%;border:1px solid var(--line);background:var(--bg-3);height:54px;color:var(--ink-soft);font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .25s}
.wishlist-btn:hover{border-color:var(--ink);color:var(--ink)}

.usp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:32px 0 0;border-top:1px solid var(--line-soft);padding-top:32px;text-align:center}
.usp-row div{font-size:10px;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase;line-height:1.5}
.usp-row strong{display:block;color:var(--ink);font-family:var(--display);font-size:24px;line-height:1;margin-bottom:8px;font-weight:400}

.accordion{margin-top:40px}
.accordion details{border-bottom:1px solid var(--line-soft)}
.accordion summary{padding:24px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);font-weight:500;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .plus{color:var(--gold);font-family:var(--display);font-size:24px;transition:transform .3s}
.accordion details[open] summary .plus{transform:rotate(45deg)}
.accordion .acc-body{padding:0 0 24px;color:var(--ink-soft);font-size:14px;line-height:1.85}

/* ── Brand Story Section ─────────────────────── */
.brand-story{padding:160px 0;background:var(--bg-2)}
.brand-story .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.brand-story .story-img-wrap{position:relative}
.brand-story .story-img{aspect-ratio:4/5;background-size:cover;background-position:center}
.brand-story .story-img-2{position:absolute;width:55%;aspect-ratio:1/1;background-size:cover;background-position:center;bottom:-60px;right:-40px;border:8px solid var(--bg-2)}
.brand-story .story-text h2{margin-bottom:32px}
.brand-story .story-prose{color:var(--ink-soft);font-size:16px;line-height:1.85}
.brand-story .story-prose p{margin-bottom:20px}
.brand-story .story-prose strong{color:var(--ink);font-weight:500}
.brand-story .signature{margin-top:32px;font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:24px}
.brand-story .signature span{display:block;font-family:var(--sans);font-style:normal;color:var(--muted);font-size:11px;letter-spacing:.3em;margin-top:6px;text-transform:uppercase}
@media(max-width:880px){.brand-story .story-grid{grid-template-columns:1fr;gap:80px}.brand-story .story-img-2{display:none}}

/* ── Ingredients Section ─────────────────────── */
.ingredients{padding:140px 0;border-top:1px solid var(--line)}
.ingr-head{text-align:center;margin-bottom:64px}
.ingr-head h2.center{text-align:center}
.ingr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:64px}
.ingredient{text-align:center}
.ingredient-symbol{width:90px;height:90px;border:1px solid var(--ink);border-radius:50%;margin:0 auto 28px;display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--ink);font-size:32px;transition:all .4s}
.ingredient:hover .ingredient-symbol{background:var(--ink);color:var(--bg)}
.ingredient h4{font-family:var(--display);font-size:28px;margin-bottom:6px;font-weight:400;color:var(--ink)}
.ingredient-latin{font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:14px;margin-bottom:18px}
.ingredient p{color:var(--ink-soft);font-size:14px;line-height:1.7}
@media(max-width:780px){.ingr-grid{grid-template-columns:1fr;gap:48px}}

/* ── Editorial Feature (Dark split) ──────────── */
.editorial-feature{background:var(--ink);color:#E6DFD2;border-top:1px solid var(--line-soft)}
.editorial-feature .ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.editorial-feature .ed-img{aspect-ratio:4/5;background-size:cover;background-position:center}
.editorial-feature .ed-text{padding:80px;display:flex;flex-direction:column;justify-content:center}
.editorial-feature .ed-text .eyebrow{color:#C9A66B}
.editorial-feature .ed-text .eyebrow::before{background:#C9A66B}
.editorial-feature .ed-text h3{font-family:var(--display);font-size:48px;line-height:1.05;font-weight:300;margin:18px 0 24px;color:#FFFFFF}
.editorial-feature .ed-text h3 em{font-family:var(--serif);font-style:italic;color:#D4B98C}
.editorial-feature .ed-prose{color:#C9C2B5;line-height:1.8;font-size:15px;margin-bottom:32px}
.editorial-feature .ed-text .btn-primary{background:var(--bg);color:var(--ink)}
.editorial-feature .ed-text .btn-primary:hover{background:#C9A66B;color:var(--ink)}
@media(max-width:880px){.editorial-feature .ed-grid{grid-template-columns:1fr}.editorial-feature .ed-text{padding:48px 24px}}

/* ── Reviews Section ─────────────────────────── */
.reviews-section{padding:140px 0;border-top:1px solid var(--line-soft)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px}
.reviews-section .review{border:1px solid var(--line-soft);padding:36px 32px;transition:all .3s;background:var(--bg-3)}
.reviews-section .review:hover{border-color:var(--ink);transform:translateY(-4px)}
.rev-stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:18px}
.review-q{font-family:var(--display);font-size:22px;line-height:1.4;margin-bottom:24px;color:var(--ink);font-weight:300}
.review-meta{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line-soft)}
.avatar{width:42px;height:42px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0}
.review-name{font-size:13px;color:var(--ink)}
.review-role{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:880px){.review-grid{grid-template-columns:1fr}}

/* ── Salons / Trust ──────────────────────────── */
.salons-section{border-top:1px solid var(--line-soft);padding:80px 0;text-align:center}
.salons-tag{color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:36px;font-weight:500}
.salon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:48px;align-items:center}
.salon-logo{font-family:var(--display);font-size:22px;color:var(--ink-soft);text-align:center;letter-spacing:.1em;opacity:.7;transition:all .3s;padding:18px 8px}
.salon-logo:hover{opacity:1;color:var(--gold-deep)}
.salon-logo small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.3em;color:var(--muted);margin-top:4px}
@media(max-width:780px){.salon-grid{grid-template-columns:repeat(3,1fr);gap:24px}}

/* ── Instagram Feed ──────────────────────────── */
.instagram-section{padding:120px 0;border-top:1px solid var(--line-soft)}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:48px}
.insta-tile{aspect-ratio:1/1;position:relative;overflow:hidden;display:block;background:var(--bg-2)}
.insta-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s ease}
.insta-tile:hover .insta-bg{transform:scale(1.05)}
@media(max-width:780px){.insta-grid{grid-template-columns:repeat(3,1fr)}}

/* Centered headlines */
h2.center{text-align:center}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v2
   Anhängen ans Ende der bestehenden Assets/femmas-theme.css
   in Shopify Admin → Edit code.

   Fixes:
   1) Skip-to-content link nur bei Tastatur-Fokus sichtbar
   2) Default Shopify Search-Forms im Body verstecken
   3) Premium Two-Tier Variant Picker (Familie-Pills + Swatch-Grid)
   ───────────────────────────────────────────────────────────── */

/* ── 1. Skip-to-content nur bei Fokus ────────────────────────── */
.skip-to-content-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-to-content-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--bg);
  clip: auto;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ── 2. Native/Unstyled Search-Form verstecken ────────────────
   Shopify rendert manchmal ein default <form action="/search">
   außerhalb von Modal/Drawer. Wir verstecken alles was nicht in
   einem expliziten Search-Modal oder Footer-Bereich liegt.
   Die Lupe im Header bleibt aktiv und führt zu /search.        */
body > form[action*="/search"],
.template-index form[action*="/search"]:not(.search-modal form),
.template-page form[action*="/search"]:not(.search-modal form) {
  display: none !important;
}

/* ── 3. PDP Two-Tier Variant Picker ──────────────────────────── */

.farbton-group { margin-bottom: 40px; }

.selected-shade {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.selected-shade-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.18) inset, 0 0 0 1px rgba(255,255,255,.4) inset;
  transition: background .25s;
}
.selected-shade-text { flex: 1; min-width: 0; }
.selected-shade-label {
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.1;
}
.selected-shade-family {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Family Pills row (scrollable horizontal) */
.family-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
  margin-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  -webkit-overflow-scrolling: touch;
}
.family-pills::-webkit-scrollbar { height: 4px; }
.family-pills::-webkit-scrollbar-track { background: transparent; }
.family-pills::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.family-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
}
.family-pill:hover { border-color: var(--ink-soft); }
.family-pill.active {
  background: var(--ink);
  border-color: var(--ink);
}
.family-pill.active .family-pill-label,
.family-pill.active .family-pill-count {
  color: var(--bg);
}
.family-pill-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}
.family-pill-label {
  font-size: 12px;
  color: var(--ink);
  letter-spacing: .04em;
  font-weight: 500;
}
.family-pill-count {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(0,0,0,.05);
}
.family-pill.active .family-pill-count {
  background: rgba(255,255,255,.15);
  color: var(--bg);
}

/* Family Grids (only active one visible) */
.family-grids {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  min-height: 200px;
}
.family-grid { display: none; }
.family-grid.active {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  .family-grid.active { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .family-grid.active { grid-template-columns: repeat(3, 1fr); }
}

.swatch-item {
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 10px 6px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all .2s;
  position: relative;
}
.swatch-item:hover { border-color: var(--line); background: var(--bg-2); }
.swatch-item.active {
  border-color: var(--ink);
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.swatch-item input { position: absolute; opacity: 0; pointer-events: none; }

.swatch-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin: 0 auto 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) inset, 0 0 0 1px rgba(255,255,255,.35) inset;
  transition: transform .2s;
}
.swatch-item:hover .swatch-circle { transform: scale(1.05); }
.swatch-item.active .swatch-circle {
  box-shadow: 0 0 0 2px var(--bg-3), 0 0 0 3px var(--ink), 0 1px 3px rgba(0,0,0,.12) inset;
}
.swatch-code {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.1;
}
.swatch-item.active .swatch-code { font-weight: 500; }
.swatch-name {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1.25;
  margin-top: 3px;
  min-height: 22px;
}

/* ── PDP small polish (in case Patch v1 nicht voll appliziert) ── */
.pdp-sale-badge {
  position: absolute; top: 24px; left: 24px;
  background: var(--ink); color: var(--bg);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 12px; font-weight: 500; z-index: 2;
}
.pdp-eyebrow {
  color: var(--gold-deep); font-size: 11px; letter-spacing: .4em;
  text-transform: uppercase; margin-bottom: 20px; font-weight: 500;
  display: flex; align-items: center; gap: 14px;
}
.pdp-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--gold-deep); }

.opt-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 14px; font-weight: 500;
  gap: 12px; flex-wrap: wrap;
}
.opt-label strong { color: var(--ink); font-weight: 500; }
.opt-help-link {
  color: var(--ink); font-size: 11px;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-btn {
  flex: 1; min-width: 80px;
  padding: 14px 12px;
  border: 1px solid var(--line); background: var(--bg-3);
  text-align: center; font-size: 13px; color: var(--ink-soft);
  cursor: pointer; transition: all .2s; position: relative;
}
.seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.seg-btn:hover { border-color: var(--ink-soft); }
.seg-btn.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v4
   Anhängen ans Ende der bestehenden femmas-theme.css

   Bringt:
   1) Prose-Styling für Shopify product.description im Accordion
   2) Styling für die Inline-Sections (USP-Band, Wirkstoffe, HowTo, Bundles)
      die jetzt direkt in main-product.liquid v4 stecken
   3) Kleine Anpassungen am Description-Accordion (Boxing entfernt)
   ───────────────────────────────────────────────────────────── */

/* ── Description Accordion: schönes Prose-Styling ──────────── */
.accordion details {
  border-bottom: 1px solid var(--line-soft);
  border-top: none;
}
.accordion details:first-of-type { border-top: 1px solid var(--line-soft); }

.accordion summary {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  border: none;
  background: transparent;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--gold-deep); }
.accordion summary .plus {
  color: var(--gold);
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  transition: transform .3s;
  font-weight: 300;
}
.accordion details[open] summary .plus { transform: rotate(45deg); }

.accordion .acc-body {
  padding: 0 0 28px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

/* PROSE-Styling für Shopify product.description HTML innerhalb des Accordion */
.prose-content { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.prose-content > *:first-child { margin-top: 0; }
.prose-content > *:last-child { margin-bottom: 0; }

.prose-content p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
}
.prose-content p strong { color: var(--ink); font-weight: 500; }
.prose-content p em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
}

.prose-content h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.prose-content h4 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin: 22px 0 8px;
  line-height: 1.2;
}

.prose-content ul, .prose-content ol {
  margin: 0 0 18px;
  padding-left: 18px;
  list-style: none;
}
.prose-content ul li,
.prose-content ol li {
  position: relative;
  padding: 4px 0 4px 4px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.prose-content ul li::before {
  content: "·";
  position: absolute;
  left: -14px;
  top: 4px;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
.prose-content ol { counter-reset: prose-counter; }
.prose-content ol li {
  counter-increment: prose-counter;
}
.prose-content ol li::before {
  content: counter(prose-counter, decimal-leading-zero);
  position: absolute;
  left: -28px;
  top: 4px;
  font-family: var(--display);
  color: var(--gold-deep);
  font-size: 13px;
}

.prose-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

/* ── Eyebrow-Tag (kleiner Suffix neben Eyebrow) ────────────── */
.eyebrow-tag {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .3em;
}

/* ── PDP USP Band (Inline, direkt unter PDP main area) ──────── */
.pdp-usp-band {
  padding: 100px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
}
.pdp-usp-band .pusp-head {
  text-align: center;
  margin-bottom: 56px;
}
.pdp-usp-band .eyebrow.center {
  justify-content: center;
  display: inline-flex;
}
.pdp-usp-band .eyebrow.center::after {
  content: ""; width: 24px; height: 1px; background: var(--gold-deep);
}
.pdp-usp-band h2 {
  text-align: center;
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 0;
}
.pdp-usp-band h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 300;
}

.pdp-usp-band .pusp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--bg-3);
  max-width: 1240px;
  margin: 0 auto;
}
.pdp-usp-band .pusp-item {
  padding: 48px 28px;
  text-align: center;
  border-right: 1px solid var(--line-soft);
  transition: background .2s;
}
.pdp-usp-band .pusp-item:last-child { border-right: none; }
.pdp-usp-band .pusp-item:hover { background: var(--bg-2); }
.pdp-usp-band .pusp-icon {
  width: 72px; height: 72px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  color: var(--ink);
  font-size: 24px;
  font-weight: 400;
  transition: all .3s;
  letter-spacing: -.01em;
}
.pdp-usp-band .pusp-item:hover .pusp-icon { background: var(--ink); color: var(--bg); }
.pdp-usp-band .pusp-title {
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 6px;
  line-height: 1.2;
}
.pdp-usp-band .pusp-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1.5;
}
@media (max-width: 880px) {
  .pdp-usp-band .pusp-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-usp-band .pusp-item { border-bottom: 1px solid var(--line-soft); }
  .pdp-usp-band .pusp-item:nth-child(2n) { border-right: none; }
  .pdp-usp-band .pusp-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 500px) {
  .pdp-usp-band .pusp-grid { grid-template-columns: 1fr; }
  .pdp-usp-band .pusp-item { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .pdp-usp-band .pusp-item:last-child { border-bottom: none; }
}

/* ── PDP Wirkstoffe (Inline) ──────────────────────────────── */
.pdp-ingredients {
  padding: 120px 0;
  border-top: 1px solid var(--line-soft);
}
.pdp-ingredients .ping-head { text-align: center; margin-bottom: 64px; }
.pdp-ingredients .eyebrow.center { justify-content: center; display: inline-flex; }
.pdp-ingredients .eyebrow.center::after {
  content: ""; width: 24px; height: 1px; background: var(--gold-deep);
}
.pdp-ingredients h2.center {
  text-align: center;
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink);
}
.pdp-ingredients h2.center em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
}
.pdp-ingredients .ping-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
}
.pdp-ingredients .ping-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 48px 32px;
  text-align: center;
  transition: all .3s;
}
.pdp-ingredients .ping-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}
.pdp-ingredients .ping-symbol {
  width: 80px; height: 80px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  color: var(--ink);
  font-size: 32px;
  transition: all .3s;
}
.pdp-ingredients .ping-card:hover .ping-symbol { background: var(--ink); color: var(--bg); }
.pdp-ingredients .ping-card h4 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink);
}
.pdp-ingredients .ping-latin {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
  font-size: 13px;
  margin-bottom: 16px;
}
.pdp-ingredients .ping-card p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 880px) {
  .pdp-ingredients .ping-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── PDP Anwendung / HowTo (Inline) ───────────────────────── */
.pdp-howto {
  padding: 120px 0;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.pdp-howto .phow-head { text-align: center; margin-bottom: 72px; }
.pdp-howto .eyebrow.center { justify-content: center; display: inline-flex; }
.pdp-howto .eyebrow.center::after {
  content: ""; width: 24px; height: 1px; background: var(--gold-deep);
}
.pdp-howto h2.center {
  text-align: center;
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink);
}
.pdp-howto h2.center em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
}
.pdp-howto .phow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
}
.pdp-howto .phow-step {
  padding-top: 64px;
  position: relative;
}
.pdp-howto .phow-num {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--display);
  font-size: 60px;
  line-height: 1;
  color: var(--gold);
  opacity: .55;
  font-weight: 300;
}
.pdp-howto .phow-step h4 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--ink);
}
.pdp-howto .phow-step p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 880px) {
  .pdp-howto .phow-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 500px) {
  .pdp-howto .phow-steps { grid-template-columns: 1fr; }
}

/* ── PDP Bundles / Empfehlungen (Inline) ──────────────────── */
.pdp-bundles {
  padding: 120px 0;
  border-top: 1px solid var(--line-soft);
}
.pdp-bundles .pbun-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.pdp-bundles .pbun-head h2 {
  font-family: var(--display);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink);
}
.pdp-bundles .pbun-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
}
.pdp-bundles .pbun-head .text {
  max-width: 380px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.pdp-bundles .related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.pdp-bundles .related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  transition: all .25s;
}
.pdp-bundles .related-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}
.pdp-bundles .related-img {
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1ECE2 100%);
  position: relative;
  overflow: hidden;
}
.pdp-bundles .related-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  transition: transform .8s ease;
}
.pdp-bundles .related-card:hover .related-img img { transform: scale(1.04); }
.pdp-bundles .related-cat {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  padding: 18px 18px 0;
}
.pdp-bundles .related-card h4 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  margin: 6px 18px 12px;
  line-height: 1.3;
}
.pdp-bundles .related-bot {
  padding: 0 18px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdp-bundles .related-price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
}
.pdp-bundles .related-cta {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
@media (max-width: 980px) {
  .pdp-bundles .related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 500px) {
  .pdp-bundles .related-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v6
   1) Modernes Such-Modal (animated drawer)
   2) Sticky-Header Overlap-Fix (Background fest, kein Bleed-Through)
   3) Native-Filter-Form / Browser-Search-Form unterdrücken
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */

/* ── 1. SEARCH MODAL ─────────────────────────────────────── */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.search-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

.search-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 11, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.search-modal-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(15,13,11,.18);
}
.search-modal.is-open .search-modal-panel {
  transform: translateY(0);
}

.search-modal-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 48px;
  border-bottom: 1px solid var(--line-soft);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 768px) {
  .search-modal-head { padding: 20px 24px; gap: 14px; }
}

.search-modal-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0;
}
.search-modal-icon {
  flex-shrink: 0;
  color: var(--ink);
}
.search-modal-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.search-modal-input {
  flex: 1;
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 0;
  letter-spacing: -.005em;
}
.search-modal-input::placeholder {
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
}
.search-modal-submit {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  font-weight: 500;
}
.search-modal-submit:hover {
  color: var(--gold-deep);
}

.search-modal-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
}
.search-modal-close:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.search-modal-body {
  padding: 40px 48px 60px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 768px) {
  .search-modal-body { padding: 28px 24px 40px; }
}

.search-hint-label {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 16px;
}

.search-hint-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.search-hint {
  display: inline-block;
  padding: 10px 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: none;
  transition: all .2s;
}
.search-hint:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-2);
}

.search-hint-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (max-width: 720px) {
  .search-hint-links { grid-template-columns: 1fr 1fr; }
}
.search-link {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  transition: color .2s;
}
.search-link:hover {
  color: var(--gold-deep);
}

/* Results */
.search-modal-results {
  display: block;
}
.search-results-loading {
  text-align: center;
  padding: 40px;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
}
.search-results-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .search-results-list { grid-template-columns: 1fr; }
}
.search-result {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 14px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  align-items: center;
}
.search-result:hover {
  border-color: var(--ink);
  background: var(--bg-2);
}
.search-result-img {
  width: 80px;
  height: 80px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.search-result-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.search-result-type {
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 4px;
}
.search-result-title {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.search-result-price {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold-deep);
}
.search-no-results {
  padding: 40px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 16px;
  grid-column: 1 / -1;
}
.search-results-view-all {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.search-results-view-all a {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  text-decoration: none;
}

/* Body scroll lock when modal open */
body:has(.search-modal.is-open) { overflow: hidden; }


/* ── 2. STICKY HEADER OVERLAP FIX ────────────────────────── */

/* Stelle sicher dass der Header eine SOLIDE Hintergrundfarbe hat
   (nicht durchsichtig), damit Collection-Inhalte nicht "durchscheinen".
   Außerdem sicherstellen, dass die fp-announce ÜBER dem Header bleibt
   nur wenn beide sichtbar sind. */

header.site-header {
  background: var(--bg) !important;  /* solid statt rgba */
  z-index: 50;
}

/* Wenn Header sticky ist, soll der announce-Bar mit nach oben gehen
   und nicht den Inhalt überdecken. Lösung: announce nicht sticky machen. */
.fp-announce {
  position: relative;
  z-index: 49;
}

/* Auf Collection Pages: Padding-Top am Hauptinhalt, damit Inhalt
   nicht unter sticky header verschwindet. Shopify gibt der collection
   ein .plp-hero oder .collection class. Wir geben dem main-content
   ein wenig Atemraum nach oben. */
.template-collection main,
.template-product main,
.template-page main {
  position: relative;
  z-index: 1;
}

/* Falls eine inline-Suchleiste außerhalb des Modals geleakt wird,
   solide verstecken (kein "Search" Button mehr auf Collection-Seite). */
body > form[action*="/search"],
body > form[action="/search"],
body > .search-form,
.template-collection > form[action*="/search"],
.template-list-collections form[action*="/search"],
.collection-template form[action*="/search"]:not(.search-modal-form),
main > form[action*="/search"]:not(.search-modal-form) {
  display: none !important;
}


/* ── 3. FILTER UI in German fallback styles ─────────────── */
/* Falls Shopify's Storefront-Filter trotzdem englische Labels rendert
   (über Search & Discovery App), können wir diese mit CSS überdecken.
   Lösung 1 (sauberer): Locales-File ist schon aktualisiert.
   Lösung 2 (CSS-Fallback): Labels via attribute-based selectors anpassen. */

.facets__heading { color: var(--ink); font-family: var(--display); }
.facets summary,
.facets__summary { font-family: var(--display); }

/* Falls Filter-Sidebar auch noch unschöne Reset-Styles hat */
.facets__price-range { font-size: 13px; }
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v7
   1) Sticky-Toolbar auf Collection: solider Hintergrund (Bug-Fix)
   2) Such-Ergebnis-Seite vollständig gestyled
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */

/* ── 1. STICKY TOOLBAR BUGFIX ─────────────────────────────
   Der sticky toolbar auf Collection-Pages hatte rgba-Transparenz —
   Produkt-Inhalte schienen durch. Solide bg + höherer z-index. */

.template-collection .filter-bar,
.template-collection .plp-main + div[style*="sticky"],
[style*="position:sticky"][style*="top:71px"],
[style*="position: sticky"][style*="top: 71px"] {
  background: var(--bg) !important;  /* solid statt rgba */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Auch die Inline-Toolbar im PLP main-collection-product-grid template */
section.shopify-section.section .plp-main ~ .filter-bar,
.collection .filter-bar {
  background: var(--bg) !important;
}

/* Globale Regel: jeder „sticky" Container im Body-Bereich
   bekommt soliden Hintergrund wenn er auf top:71px klebt */
[style*="position:sticky"],
[style*="position: sticky"] {
  background-color: var(--bg);
}
/* Ausnahmen: Header soll seine eigene Logik behalten */
.site-header[style*="sticky"],
header.site-header {
  background: var(--bg) !important;
}


/* ── 2. SUCHE: HERO-BANNER ───────────────────────────────── */

.search-hero {
  padding: 80px 0 60px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.search-hero-content {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.search-hero .eyebrow {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.search-hero .eyebrow::before,
.search-hero .eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold-deep);
}
.search-hero h1 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -.005em;
}
.search-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 300;
}
.search-hero-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.search-hero-form {
  display: flex;
  max-width: 560px;
  margin: 32px auto 0;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  gap: 12px;
  align-items: center;
}
.search-hero-input {
  flex: 1;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 300;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  padding: 8px 0;
  letter-spacing: -.005em;
}
.search-hero-input::placeholder {
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
}
.search-hero-submit {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
  padding: 8px 4px;
}
.search-hero-submit:hover { color: var(--gold-deep); }


/* ── 3. SUCHE: TOOLBAR ────────────────────────────────────── */

.search-results-toolbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0;
}
.search-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.search-toolbar-count {
  font-size: 13px;
  color: var(--ink-soft);
}
.search-toolbar-count strong {
  color: var(--ink);
  font-weight: 500;
}
.search-sort {
  border: 1px solid var(--line);
  background: var(--bg-3);
  padding: 9px 36px 9px 14px;
  font-size: 12px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F0D0B' stroke-width='1.6'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}


/* ── 4. SUCHE: RESULTS GRID ──────────────────────────────── */

.search-main { padding: 48px 0 120px; }

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1080px) { .search-results-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .search-results-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.search-product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .25s;
}
.search-product-card:hover { transform: translateY(-3px); }

.spc-img {
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1ECE2 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--line-soft);
}
.spc-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 28px;
  transition: transform 1s ease;
}
.search-product-card:hover .spc-img img { transform: scale(1.03); }

.spc-img-page {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
}

.spc-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ink);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 2;
  font-weight: 500;
}

.spc-cat {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 4px;
}
.search-product-card h4 {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .02em;
  margin: 6px 0 10px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
}
.spc-bot {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.spc-price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
}
.spc-price-old {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
}


/* ── 5. SUCHE: EMPTY STATE ────────────────────────────────── */

.search-empty {
  text-align: center;
  padding: 80px 0;
}
.search-empty-icon {
  width: 88px;
  height: 88px;
  border: 1px solid var(--line);
  border-radius: 50%;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
}
.search-empty h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 14px;
}
.search-empty h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
}
.search-empty p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}
.search-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.search-empty-categories {
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
}
.search-cats-label {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 18px;
}
.search-cats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.search-cats-grid a {
  display: inline-block;
  padding: 10px 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: none;
  transition: all .2s;
}
.search-cats-grid a:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-2);
}

/* Pagination */
.search-pagination {
  margin-top: 64px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.search-pagination a {
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--line);
  display: inline-block;
  margin: 0 4px;
  transition: all .2s;
}
.search-pagination a:hover {
  border-color: var(--ink);
  background: var(--bg-2);
}
.search-pagination .current {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  padding: 8px 14px;
  display: inline-block;
  margin: 0 4px;
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v8
   1) Collection-PLP Sticky-Toolbar → eigene Klasse, solider bg
   2) Akkordion „Produktbeschreibung" smooth animiert
   3) FAQ-Section (pdp-faq) Styling
   4) Kleine Aufräumarbeiten (Wunschliste-Button entfernt, USP-Subtitle nicht mehr truncated)
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ── 1. COLLECTION PLP TOOLBAR (eigene Klasse) ─────────────────
   Ersetzt die alte Lösung mit inline rgba + backdrop-filter.
   Solide var(--bg) damit Produktbilder NICHT mehr durchscheinen. */

.plp-toolbar-sticky {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0;
  position: sticky;
  top: 71px;
  z-index: 30;
  /* keine rgba, keine backdrop-filter */
}

.plp-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.plp-toolbar-count {
  font-size: 13px;
  color: var(--ink-soft);
}
.plp-toolbar-count strong {
  color: var(--ink);
  font-weight: 500;
}

.plp-toolbar-sort-form { margin: 0; }
.plp-toolbar-sort {
  border: 1px solid var(--line);
  background: var(--bg-3);
  padding: 9px 36px 9px 14px;
  font-size: 12px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F0D0B' stroke-width='1.6'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.filter-opt-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

.plp-pagination {
  text-align: center;
  margin-top: 64px;
}


/* ── 2. AKKORDION „Produktbeschreibung" mit Smooth-Animation ───
   Trick: <details><summary>+<div.acc-body-wrap><div.acc-body>
   .acc-body-wrap bekommt max-height + transition via JS-Toggle. */

.acc-details {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 32px;
}
.acc-details summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-size: 16px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .005em;
  user-select: none;
}
.acc-details summary::-webkit-details-marker { display: none; }
.acc-details summary .plus {
  font-family: var(--sans);
  font-size: 22px;
  color: var(--gold-deep);
  font-weight: 300;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.acc-details[open] summary .plus {
  transform: rotate(45deg);
}

/* Wrapper für animierte Höhe */
.acc-details .acc-body-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.acc-details[open] .acc-body-wrap {
  /* max-height wird via JS auf scrollHeight gesetzt */
}
.acc-details .acc-body {
  padding: 0 0 28px;
}


/* ── 3. PRODUCT FAQ SECTION ───────────────────────────────────── */

.pdp-faq {
  padding: 100px 0;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
}
.pfaq-head {
  text-align: center;
  margin-bottom: 56px;
}
.pfaq-head .eyebrow.center {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.pfaq-head .eyebrow.center::before,
.pfaq-head .eyebrow.center::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold-deep);
}
.pfaq-head h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  font-weight: 300;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.005em;
}
.pfaq-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 300;
}

.pfaq-list {
  max-width: 820px;
  margin: 0 auto;
}

.pfaq-item {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.pfaq-item:first-child {
  border-top: 1px solid var(--line);
}
.pfaq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .005em;
  user-select: none;
  transition: color .2s;
}
.pfaq-item summary:hover { color: var(--gold-deep); }
.pfaq-item summary::-webkit-details-marker { display: none; }
.pfaq-item summary .plus {
  font-family: var(--sans);
  font-size: 22px;
  color: var(--gold-deep);
  font-weight: 300;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.pfaq-item[open] summary .plus {
  transform: rotate(45deg);
}

.pfaq-item .pfaq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.pfaq-item .pfaq-body p {
  padding: 0 4px 24px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}


/* ── 4. PDP DESCRIPTION (kein truncate „…" mehr) ─────────────── */

.pdp-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 18px 0 30px;
  max-width: 100%;
}


/* ── 5. FALLBACK: alter Sticky-Toolbar-Fix für stale Caches ───
   Falls die alte main-collection-product-grid.liquid mit inline
   styles noch im Browser-Cache hängt — solide bg erzwingen. */
[style*="position:sticky"][style*="top:71px"],
[style*="position: sticky"][style*="top: 71px"] {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v9
   1) /collections Übersichts-Seite (list-collections)
   2) Funktionierende Filter-Sidebar (Chips, Reset, deutsche Labels)
   3) Preis-Filter Min/Max
   4) Empty-State für Filter ohne Treffer
   Ans Ende von femmas-theme.css anhängen (nach v8).
   ───────────────────────────────────────────────────────────── */


/* ── 1. LIST COLLECTIONS PAGE (/collections) ─────────────────── */

.lcol-hero {
  background: var(--bg);
  padding: 100px 0 60px;
  text-align: center;
}
.lcol-hero .eyebrow.center {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
  display: inline-block;
}
.lcol-title {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 24px;
}
.lcol-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-deep);
}
.lcol-sub {
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.lcol-grid-section {
  padding: 60px 0 120px;
  background: var(--bg);
}

.lcol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 880px) {
  .lcol-grid { grid-template-columns: 1fr; gap: 28px; }
}

.lcol-card {
  position: relative;
  background: var(--bg-3, #FFFCF6);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s;
  overflow: hidden;
}
.lcol-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(15,13,11,.18);
}

.lcol-card-img {
  position: relative;
  background: #F0EBE0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.lcol-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.lcol-card:hover .lcol-card-img img {
  transform: scale(1.04);
}
.lcol-card-count {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--bg);
  color: var(--ink);
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
}

.lcol-card-body {
  padding: 32px 36px 36px;
}
.lcol-card-body .eyebrow {
  color: var(--gold-deep);
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
  display: block;
}
.lcol-card-title {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -.005em;
  line-height: 1.05;
}
.lcol-card-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
  min-height: 44px;
}
.lcol-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: gap .3s;
}
.lcol-card-cta .arrow { transition: transform .3s; }
.lcol-card:hover .lcol-card-cta { gap: 16px; }
.lcol-card:hover .lcol-card-cta .arrow { transform: translateX(4px); }

.lcol-extras {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.lcol-extras .eyebrow.center {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 28px;
  display: inline-block;
}
.lcol-extras-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.lcol-mini {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .02em;
  transition: background .25s, border-color .25s;
}
.lcol-mini:hover {
  background: var(--bg-3);
  border-color: var(--gold-deep);
}
.lcol-mini-count {
  font-size: 11px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 10px;
}


/* ── 2. FILTER-SIDEBAR (funktionsfähig) ──────────────────────── */

.filter-sidebar h4 {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.filter-active {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.filter-active-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.filter-active-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  font-weight: 500;
}
.filter-active-clear {
  font-size: 11px;
  color: var(--gold-deep);
  text-decoration: none;
  letter-spacing: .05em;
  transition: opacity .2s;
}
.filter-active-clear:hover { opacity: .65; }
.filter-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border-radius: 0;
  transition: background .2s;
}
.filter-chip:hover { background: var(--gold-deep); }
.filter-chip span {
  font-size: 14px;
  line-height: 1;
}

.filter-group { margin-bottom: 28px; }

.filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s;
}
.filter-opt:hover { color: var(--gold-deep); }
.filter-opt.disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.filter-opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  transition: background .2s, border-color .2s;
}
.filter-opt input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.filter-opt input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23F8F4ED' stroke-width='2.2'%3E%3Cpolyline points='3 7.5 6 10.5 11 4.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.filter-opt-label {
  flex: 1;
}
.filter-opt-count {
  font-size: 11px;
  color: var(--muted);
}

/* Price range mini-form */
.filter-price {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.filter-price-row {
  display: flex;
  gap: 8px;
}
.filter-price label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 500;
}
.filter-price input[type="number"] {
  border: 1px solid var(--line);
  background: var(--bg-3);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--sans);
  width: 100%;
  -moz-appearance: textfield;
}
.filter-price input::-webkit-outer-spin-button,
.filter-price input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-price-apply {
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
  font-family: var(--sans);
}
.filter-price-apply:hover { background: var(--gold-deep); }


/* ── 3. EMPTY STATE (Filter ohne Treffer) ──────────────────────── */

.plp-empty {
  padding: 80px 24px;
  text-align: center;
  background: var(--bg-3);
  border: 1px dashed var(--line);
}
.plp-empty .eyebrow.center {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
  display: inline-block;
}
.plp-empty h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 300;
  margin: 0 0 12px;
  color: var(--ink);
}
.plp-empty p {
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.plp-empty-cta {
  display: inline-block;
  padding: 12px 28px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background .2s;
}
.plp-empty-cta:hover { background: var(--gold-deep); }


/* ── 4. Hide default Shopify list-collections fallback ──────────
   Falls jemand das Custom-Template noch nicht aktiviert hat,
   sieht's wenigstens nicht so schäbig aus. */
ul.collection-list,
.collection-list {
  list-style: none;
  padding: 0;
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v10
   1) Sticky-Toolbar in Collection-PLP raus (war störend)
   2) Toolbar bleibt visuell — ist nur kein sticky-Element mehr
   Ans Ende von femmas-theme.css anhängen (nach v9).
   ───────────────────────────────────────────────────────────── */

.plp-toolbar-sticky {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
  margin-bottom: 8px;
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v11
   1) Edle, rotierende Announcement-Bar (3 Slots, pure CSS)
   2) Footer Social-Icons als ringförmige SVG-Buttons
   Ans Ende von femmas-theme.css anhängen (nach v10).
   ───────────────────────────────────────────────────────────── */


/* ── 1. ANNOUNCEMENT BAR (rotierend, edel) ─────────────────────
   Container ist 36px hoch, jede Nachricht overlapped via abs-pos.
   Cycle = N Nachrichten × 6s. Per-Item delay = (index × 6s).
   Keyframe: 0–8% fade-in, 8–28% sichtbar, 28–33% fade-out, sonst 0. */

.fp-announce {
  position: relative;
  background: var(--ink, #0F0D0B);
  color: var(--bg, #F8F4ED);
  overflow: hidden;
  /* dezenter Goldakzent oben/unten */
  border-bottom: 1px solid rgba(122, 98, 56, .28);
}

.fp-announce-track {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-announce-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(6px);
  font-size: 11.5px;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bg, #F8F4ED);
  padding: 0 24px;
  /* Sub-pixel rendering */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;

  /* Animation pro Item, Delay über CSS-Var */
  animation: fpAnnounceRotate var(--fp-cycle, 18s) cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: var(--fp-delay, 0s);
}

.fp-announce[data-count="1"] .fp-announce-msg {
  /* Nur eine Nachricht → keine Animation */
  position: relative;
  opacity: 1;
  transform: none;
  animation: none;
}

.fp-announce-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: var(--gold-light, #C9A876);
  letter-spacing: 0;
}

.fp-announce-text {
  display: inline-block;
}

@keyframes fpAnnounceRotate {
  /* Sichtbarkeitsfenster: 0–33.33% (1 von N, N=3 Standard).
     Wir verteilen 1/N der Zeit auf jede Nachricht.
     0%      : versteckt + leicht unten
     2%      : fade-in beginnt
     6%      : volles Sichtbar
     27%     : noch sichtbar
     32%     : fade-out + leicht nach oben
     33%–100%: versteckt
     Die Item-Delays sorgen für die Staffelung. */
  0%   { opacity: 0; transform: translateY(6px); }
  2%   { opacity: 0; transform: translateY(6px); }
  6%   { opacity: 1; transform: translateY(0); }
  27%  { opacity: 1; transform: translateY(0); }
  32%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .fp-announce-msg {
    animation-duration: 0s;
    animation-iteration-count: 1;
  }
  .fp-announce-msg:nth-child(n+2) { display: none; }
  .fp-announce-msg:first-child {
    position: relative;
    opacity: 1;
    transform: none;
  }
}

/* Mobile: kompakter */
@media (max-width: 640px) {
  .fp-announce-track { height: 40px; }
  .fp-announce-msg {
    font-size: 10.5px;
    letter-spacing: .22em;
    padding: 0 16px;
    text-align: center;
  }
  .fp-announce-icon { display: none; }
}


/* ── 2. FOOTER SOCIAL ICONS ──────────────────────────────────── */

.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.foot-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}

.foot-social-link:hover {
  color: var(--bg, #F8F4ED);
  border-color: var(--gold-light, #C9A876);
  background: rgba(201, 168, 118, .08);
  transform: translateY(-2px);
}

.foot-social-link svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Falls Footer einen hellen Cream-Hintergrund nutzt — Fallback-Farben */
.site-footer.light .foot-social-link,
.foot-social-link.is-light {
  border-color: var(--line, #D4CFC4);
  color: var(--ink-soft, #5C544A);
}
.site-footer.light .foot-social-link:hover,
.foot-social-link.is-light:hover {
  color: var(--ink, #0F0D0B);
  border-color: var(--gold-deep, #7A6238);
  background: rgba(122, 98, 56, .08);
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v12
   1) Burger-Button + Mobile-Nav-Drawer (Slide von links)
   2) Cart-Drawer (Slide von rechts) · USPs · Free-Shipping-Bar · Upsells · Trust
   3) Mobile-Polish: Hero centering, Header-Layout, Padding
   Ans Ende von femmas-theme.css anhängen (nach v11).
   ───────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════
   HEADER · BURGER + MOBILE LAYOUT
   ════════════════════════════════════════════════════════════ */

.burger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: opacity .25s;
}
.burger-btn:hover { opacity: .65; }
.burger-btn span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
}
.burger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Cart-Count Badge: bei 0 verstecken */
.cart-num.is-empty { display: none; }


/* ════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER (Slide von links)
   ════════════════════════════════════════════════════════════ */

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 11, .55);
  z-index: 998;
  opacity: 0;
  transition: opacity .35s ease;
}
.mobile-nav-backdrop.is-visible { opacity: 1; }

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(380px, 88vw);
  background: var(--bg);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
}
.mobile-nav-drawer.is-open { transform: translateX(0); }

.mnav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.mnav-logo {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .35em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.mnav-logo small {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .35em;
  color: var(--gold-deep);
  margin-top: 6px;
  font-weight: 500;
}
.mnav-close {
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s, background .25s;
}
.mnav-close:hover { background: var(--bg-3); border-color: var(--gold-deep); }

.mnav-links {
  padding: 20px 0;
  flex: 1;
}
.mnav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: padding .25s, color .25s, background .25s;
}
.mnav-link:hover, .mnav-link:focus {
  padding-left: 36px;
  color: var(--gold-deep);
  background: var(--bg-3);
}
.mnav-link svg { color: var(--gold-deep); opacity: .55; transition: opacity .25s, transform .25s; }
.mnav-link:hover svg { opacity: 1; transform: translateX(4px); }

.mnav-secondary {
  padding: 28px 28px 18px;
  background: var(--bg-3);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.mnav-eyebrow {
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 14px;
}
.mnav-sec-link {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .25s;
}
.mnav-sec-link:hover { color: var(--gold-deep); }

.mnav-foot {
  padding: 20px 28px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.mnav-social { display: flex; gap: 10px; }
.mnav-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.mnav-social a:hover { border-color: var(--gold-deep); color: var(--ink); background: var(--bg-3); }
.mnav-locale {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════
   CART DRAWER (Slide von rechts)
   ════════════════════════════════════════════════════════════ */

.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 11, .55);
  z-index: 1000;
  opacity: 0;
  transition: opacity .35s ease;
}
.cart-drawer-backdrop.is-visible { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(440px, 100vw);
  background: var(--bg);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Head */
.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px 24px 18px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
}
.cart-head-title { flex: 1; }
.cart-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 6px;
}
.cart-head-title h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 300;
  margin: 0;
  letter-spacing: -.005em;
  line-height: 1.1;
  color: var(--ink);
}
.cart-head-title h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 300;
}
.cart-close {
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .25s, background .25s;
}
.cart-close:hover { background: var(--bg-3); border-color: var(--gold-deep); }

/* Free-Shipping */
.cart-ship {
  padding: 16px 24px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-ship-msg {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  letter-spacing: .01em;
}
.cart-ship-msg strong { color: var(--ink); font-weight: 500; }
.cart-ship-msg--done {
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-ship-msg--done strong { color: var(--gold-deep); }
.cart-ship-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-deep);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
}
.cart-ship-bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.cart-ship-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light, #C9A876));
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

/* USP-Row */
.cart-usp {
  display: flex;
  gap: 6px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-3);
}
.cart-usp-item {
  flex: 1;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  align-items: center;
  font-weight: 500;
}
.cart-usp-item span {
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 0;
}

/* Items */
.cart-items {
  padding: 4px 24px;
}
.cart-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-item-body { min-width: 0; }
.cart-item-cat {
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 4px;
}
.cart-item-title {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  margin-bottom: 4px;
  transition: color .25s;
}
.cart-item-title:hover { color: var(--gold-deep); }
.cart-item-variant {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.cart-item-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.cart-qty-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color .2s;
}
.cart-qty-btn:hover { color: var(--ink); }
.cart-qty-input {
  width: 26px;
  text-align: center;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ink);
  -moz-appearance: textfield;
  padding: 4px 0;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item-price {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.cart-item-remove {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
  margin-top: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s;
}
.cart-item-remove:hover { color: var(--ink); }

/* Empty State */
.cart-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.cart-empty svg { color: var(--gold-deep); opacity: .55; margin-bottom: 20px; }
.cart-empty h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 8px;
}
.cart-empty p { font-size: 13px; margin: 0 0 24px; color: var(--ink-soft); }
.cart-empty-cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background .25s;
}
.cart-empty-cta:hover { background: var(--gold-deep); }

/* Upsell */
.cart-upsell {
  padding: 22px 24px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-3);
}
.cart-upsell-head {
  margin-bottom: 14px;
}
.cart-upsell-head h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.005em;
}
.cart-upsell-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-upsell-item {
  display: grid;
  grid-template-columns: 56px 1fr 30px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, transform .25s;
}
.cart-upsell-item:hover {
  border-color: var(--gold-deep);
  transform: translateY(-2px);
}
.cart-upsell-img {
  aspect-ratio: 1 / 1;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cart-upsell-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-upsell-cat {
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 2px;
}
.cart-upsell-title {
  font-size: 12px;
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 4px;
}
.cart-upsell-price {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.cart-upsell-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 18px;
  font-weight: 300;
  transition: background .25s;
}
.cart-upsell-item:hover .cart-upsell-add { background: var(--gold-deep); }

/* Footer (Subtotal + Checkout + Trust) */
.cart-foot {
  padding: 22px 24px 28px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  bottom: 0;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.cart-total-num {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.cart-total-meta {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  margin: 2px 0 14px;
}
.cart-checkout-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 18px;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s, gap .25s;
  font-family: var(--sans);
}
.cart-checkout-btn:hover { background: var(--gold-deep); gap: 16px; }
.cart-checkout-btn.is-loading { opacity: .65; pointer-events: none; }

.cart-trust {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cart-trust-lock {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-trust-methods {
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--muted);
}


/* ════════════════════════════════════════════════════════════
   MOBILE LAYOUT (Breakpoints)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  /* Burger statt Desktop-Nav */
  .burger-btn { display: inline-flex; }
  .site-header .nav-link { display: none; }

  /* Header-Layout straffen */
  .site-header .nav {
    padding: 12px 16px;
    gap: 8px;
  }
  .site-header .logo {
    font-size: 18px;
    letter-spacing: .3em;
  }
  .site-header .logo small {
    font-size: 7px;
    letter-spacing: .25em;
  }
  .lang-pill { display: none; }
  .account-btn { display: none; }

  /* Hero zentriert auf mobile */
  .hero,
  section[class*="hero"] {
    text-align: center;
  }
  .hero-content,
  .hero-text,
  .hero-inner {
    text-align: center;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero h1, section[class*="hero"] h1 {
    text-align: center;
    font-size: clamp(40px, 11vw, 64px) !important;
  }
  .hero .eyebrow, section[class*="hero"] .eyebrow {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero p, section[class*="hero"] p { text-align: center; }
  .hero .btn-row, .hero-ctas {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Container padding */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Section spacing kompakter */
  .pdp-usp-band, .pdp-ingredients, .pdp-howto, .pdp-faq, .pdp-bundles,
  .lcol-grid-section, .lcol-hero {
    padding: 60px 0;
  }

  /* PDP layout single column */
  .pdp {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .pdp .gallery {
    grid-template-columns: 1fr !important;
  }
  .pdp .thumbs {
    flex-direction: row !important;
    overflow-x: auto;
    gap: 8px;
  }
  .pdp .thumb {
    flex: 0 0 64px;
    height: 64px;
  }

  /* USP-band 2 columns on mobile */
  .pusp-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Ingredients single col */
  .ping-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* HowTo single col */
  .phow-steps {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Related/Bundle grid 2 col */
  .related-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Collection PLP single col with filters above */
  .plp-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .filter-sidebar {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 16px 0;
  }
  .products-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Cart-Drawer kleiner padding */
  .cart-drawer { width: 100vw; }
}

@media (max-width: 480px) {
  .cart-usp {
    flex-direction: column;
    gap: 8px;
  }
  .cart-usp-item {
    flex-direction: row;
    text-align: left;
    gap: 8px;
    justify-content: flex-start;
  }
  .pusp-grid {
    grid-template-columns: 1fr !important;
  }
  .related-grid {
    grid-template-columns: 1fr !important;
  }
  .products-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v12.1 (Burger-Force)
   Erzwingt Burger-Sichtbarkeit auf Mobile gegen überlagernde
   Regeln aus älteren Patches. Ans Ende anhängen.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .burger-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .burger-btn span {
    display: block !important;
    width: 22px;
    height: 1px;
    background: var(--ink);
  }
  .site-header .nav-link {
    display: none !important;
  }
  .site-header .nav-left {
    flex: 0 0 auto;
    gap: 0;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v12.2 (Mobile Complete Override)
   Komplettlösung für mobile Header (Burger + Logo mittig)
   und Hero (centered Content + Buttons).
   Ans Ende von femmas-theme.css anhängen. !important überall —
   bewusst, weil ältere Regeln im Stack überschrieben werden müssen.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {

  /* ── HEADER GRID: burger | LOGO | icons ── */
  .site-header .nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }
  .site-header .nav-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .site-header .nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }
  .site-header .logo {
    text-align: center !important;
    display: block !important;
    justify-self: center !important;
    font-size: 18px !important;
    letter-spacing: .3em !important;
    line-height: 1;
  }
  .site-header .logo small {
    font-size: 8px !important;
    letter-spacing: .25em !important;
    margin-top: 4px;
    display: block;
  }
  .site-header .logo img {
    max-height: 36px !important;
    width: auto !important;
  }

  /* ── BURGER SICHTBAR ── */
  .burger-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .burger-btn span {
    display: block !important;
    width: 22px !important;
    height: 1px !important;
    background: var(--ink) !important;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  }
  .burger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  .burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
  .burger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }

  /* ── DESKTOP-NAV-LINKS WEG, LANG & ACCOUNT WEG ── */
  .site-header .nav-link { display: none !important; }
  .lang-pill { display: none !important; }
  .account-btn { display: none !important; }

  /* Icons rechts kompakt */
  .nav-right .icon-btn {
    width: 38px !important;
    height: 38px !important;
  }
  .nav-right .icon-btn svg {
    width: 18px !important;
    height: 18px !important;
  }


  /* ════════════════════════════════════════════════════════════
     HERO MOBILE — alle Varianten bügeln
     ════════════════════════════════════════════════════════════ */

  .fp-hero,
  section.fp-hero,
  .hero,
  section[class*="hero"] {
    min-height: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .fp-hero-content,
  .hero-content,
  .hero-inner,
  .hero-text {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 60px 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  .fp-hero h1,
  .hero h1,
  section[class*="hero"] h1 {
    font-size: clamp(36px, 9vw, 56px) !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .fp-hero p,
  .hero p,
  section[class*="hero"] p {
    text-align: center !important;
    max-width: 92% !important;
    margin: 0 auto !important;
  }

  .fp-hero .eyebrow,
  .hero .eyebrow {
    text-align: center !important;
    margin: 0 auto !important;
    display: inline-block !important;
  }

  /* CTAs: immer sichtbar, gestapelt, full-width */
  .fp-hero .btn-row,
  .hero-ctas,
  .hero .ctas,
  .fp-hero-content > div:has(> .btn),
  .fp-hero-content .ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  .fp-hero .btn,
  .hero .btn,
  section[class*="hero"] .btn {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px 20px !important;
    font-size: 11px !important;
    letter-spacing: .3em !important;
  }


  /* ════════════════════════════════════════════════════════════
     CONTAINER PADDING
     ════════════════════════════════════════════════════════════ */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v13
   Rechtliches-Seiten (Impressum, AGB, Datenschutz, Widerruf,
   Versandbedingungen). Cleane Typografie, klare Hierarchie,
   optionaler Sticky-TOC auf Desktop.
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ── HERO ────────────────────────────────────────────────────── */

.legal-hero {
  background: var(--bg);
  padding: 84px 0 56px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.legal-eyebrow {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
  display: inline-block;
}
.legal-title {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 12px;
}
.legal-subtitle {
  max-width: 620px;
  margin: 12px auto 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.legal-meta {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-top: 18px;
}


/* ── LAYOUT (TOC + Content) ─────────────────────────────────── */

.legal-main {
  padding: 60px 0 120px;
  background: var(--bg);
}

.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.legal-main.has-toc .legal-layout,
.legal-main:has(.legal-toc-wrap) .legal-layout {
  grid-template-columns: 240px 1fr;
  gap: 80px;
}

@media (max-width: 880px) {
  .legal-main.has-toc .legal-layout,
  .legal-main:has(.legal-toc-wrap) .legal-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ── SIDEBAR TOC ─────────────────────────────────────────────── */

.legal-toc-wrap {
  position: relative;
}
.legal-toc {
  position: sticky;
  top: 100px;
  padding: 24px 20px;
  border: 1px solid var(--line-soft);
  background: var(--bg-3, #FFFCF6);
}
.legal-toc-label {
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.legal-toc-label-sub {
  margin-top: 22px;
  margin-bottom: 10px;
  color: var(--muted);
}
.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}
.legal-toc-list li {
  counter-increment: toc-counter;
  margin: 0 0 2px;
  position: relative;
  padding-left: 28px;
}
.legal-toc-list li::before {
  content: counter(toc-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--gold-deep);
  font-weight: 500;
}
.legal-toc-list a {
  display: block;
  padding: 7px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 1px solid transparent;
  padding-left: 0;
  transition: color .2s, padding-left .25s, border-color .25s;
}
.legal-toc-list a:hover {
  color: var(--ink);
}
.legal-toc-list a.is-active {
  color: var(--gold-deep);
  font-weight: 500;
}
.legal-toc-other {
  border-top: 1px solid var(--line-soft);
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-toc-other a {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  transition: color .2s;
}
.legal-toc-other a:hover { color: var(--gold-deep); }

@media (max-width: 880px) {
  .legal-toc { position: relative; top: 0; }
}


/* ── CONTENT TYPOGRAPHY (Clean Sans-Serif) ──────────────────── */

.prose-clean,
.legal-content {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
  font-family: var(--sans);
}

.prose-clean h2,
.legal-content h2 {
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 56px 0 14px !important;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 100px;
}
.prose-clean h2:first-child,
.legal-content h2:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: none;
}

.prose-clean h3,
.legal-content h3 {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  margin: 32px 0 10px !important;
  scroll-margin-top: 100px;
}

.prose-clean h4,
.legal-content h4 {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 24px 0 8px !important;
}

.prose-clean p,
.legal-content p {
  margin: 0 0 16px !important;
  color: var(--ink-soft);
  font-family: var(--sans);
}

.prose-clean a,
.legal-content a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(122, 98, 56, .35);
  transition: color .2s, text-decoration-color .2s;
}
.prose-clean a:hover,
.legal-content a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.prose-clean ul,
.prose-clean ol,
.legal-content ul,
.legal-content ol {
  margin: 0 0 18px;
  padding-left: 24px;
  color: var(--ink-soft);
}
.prose-clean li,
.legal-content li {
  padding: 4px 0;
  line-height: 1.7;
}

.prose-clean strong,
.legal-content strong {
  color: var(--ink);
  font-weight: 600;
}

.prose-clean em,
.legal-content em {
  font-style: italic;
  color: var(--ink);
}

/* Tables */
.prose-clean table,
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 28px;
  font-size: 13.5px;
}
.prose-clean th,
.prose-clean td,
.legal-content th,
.legal-content td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  vertical-align: top;
}
.prose-clean th,
.legal-content th {
  background: var(--bg-3);
  font-weight: 500;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Blockquote */
.prose-clean blockquote,
.legal-content blockquote {
  border-left: 2px solid var(--gold-deep);
  padding: 8px 0 8px 22px;
  margin: 22px 0;
  font-style: italic;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 16px;
}

/* HR */
.prose-clean hr,
.legal-content hr {
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 36px 0;
}

/* Code (für seltene Fälle) */
.prose-clean code,
.legal-content code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--ink);
}


/* ── DEFAULT .prose CLASS REDIRECT ──────────────────────────────
   Falls die alte .prose Klasse irgendwo noch verwendet wird,
   sie soll auch die clean-Variante kriegen für Legal-Pages.
   .prose-clean ist aber die kanonische Klasse. */

.legal-content .prose h2,
.legal-content .prose h3,
.legal-content .prose h4 {
  font-family: var(--sans) !important;
}


/* ── MOBILE ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .legal-hero {
    padding: 56px 16px 40px;
  }
  .legal-title {
    font-size: clamp(32px, 9vw, 48px);
  }
  .legal-main {
    padding: 32px 0 80px;
  }
  .prose-clean,
  .legal-content {
    font-size: 14.5px;
    line-height: 1.7;
  }
  .prose-clean h2,
  .legal-content h2 {
    font-size: 19px !important;
    margin: 40px 0 12px !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v13.2 — Shopify Default Policy Style
   Statt eigenes Template versuchen, stylen wir hier den
   nativen Shopify-Policy-Container direkt. Funktioniert immer.
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ── Container: zentriert + atmungs-Padding ──────────────────── */

.shopify-policy__container {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 80px 24px 120px !important;
  background: var(--bg) !important;
}

/* ── Titel ─────────────────────────────────────────────────── */

.shopify-policy__title {
  text-align: center;
  margin-bottom: 56px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-soft);
}
.shopify-policy__title h1 {
  font-family: var(--display) !important;
  font-size: clamp(40px, 6vw, 64px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -.005em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.shopify-policy__title::before {
  content: "— Femmas Atelier · Rechtliches";
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 18px;
}

/* ── Body / RTE Typografie ─────────────────────────────────── */

.shopify-policy__body {
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}

.shopify-policy__body .rte {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--ink-soft);
}

.shopify-policy__body .rte > * {
  max-width: 100%;
}

/* H2 — Section-Headlines */
.shopify-policy__body .rte h2 {
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 56px 0 14px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--line-soft) !important;
}
.shopify-policy__body .rte h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* H3 — Sub-Sections */
.shopify-policy__body .rte h3 {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  margin: 32px 0 10px !important;
}

/* H4 */
.shopify-policy__body .rte h4 {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 24px 0 8px !important;
}

/* Paragraphs */
.shopify-policy__body .rte p {
  margin: 0 0 16px !important;
  color: var(--ink-soft) !important;
  line-height: 1.75 !important;
}

/* Links */
.shopify-policy__body .rte a {
  color: var(--gold-deep) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: rgba(122, 98, 56, .35) !important;
  transition: color .2s, text-decoration-color .2s;
}
.shopify-policy__body .rte a:hover {
  color: var(--ink) !important;
  text-decoration-color: var(--ink) !important;
}

/* Lists */
.shopify-policy__body .rte ul,
.shopify-policy__body .rte ol {
  margin: 0 0 20px !important;
  padding-left: 26px !important;
  color: var(--ink-soft);
}
.shopify-policy__body .rte li {
  padding: 4px 0 !important;
  line-height: 1.7 !important;
}

/* Strong, Em */
.shopify-policy__body .rte strong {
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.shopify-policy__body .rte em {
  font-style: italic !important;
  color: var(--ink) !important;
}

/* Tables */
.shopify-policy__body .rte table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 24px 0 28px !important;
  font-size: 13.5px !important;
}
.shopify-policy__body .rte th,
.shopify-policy__body .rte td {
  text-align: left !important;
  padding: 12px 14px !important;
  border: 1px solid var(--line-soft) !important;
  vertical-align: top !important;
}
.shopify-policy__body .rte th {
  background: var(--bg-3) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* HR */
.shopify-policy__body .rte hr {
  border: none !important;
  border-top: 1px solid var(--line-soft) !important;
  margin: 36px 0 !important;
}

/* Blockquote */
.shopify-policy__body .rte blockquote {
  border-left: 2px solid var(--gold-deep) !important;
  padding: 8px 0 8px 22px !important;
  margin: 22px 0 !important;
  font-style: italic !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif) !important;
  font-size: 16px !important;
}


/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .shopify-policy__container {
    padding: 48px 16px 80px !important;
  }
  .shopify-policy__title {
    margin-bottom: 36px !important;
    padding-bottom: 20px;
  }
  .shopify-policy__title h1 {
    font-size: clamp(32px, 9vw, 48px) !important;
  }
  .shopify-policy__title::before {
    font-size: 10px;
    letter-spacing: .3em;
  }
  .shopify-policy__body .rte {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }
  .shopify-policy__body .rte h2 {
    font-size: 19px !important;
    margin: 40px 0 12px !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v14 — Logo-Image Constraints
   Wenn ein Bild als Logo gesetzt ist (.logo-img), keine Display-
   Schrift, sondern saubere Größenbegrenzung. Mobile + Desktop.
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */

.logo.logo-img {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
  letter-spacing: 0;
  font-size: 0; /* falls noch Text vorhanden ist, ausblenden */
}

.logo.logo-img img {
  display: block !important;
  max-height: 44px !important;
  height: auto !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .logo.logo-img img {
    max-height: 34px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 480px) {
  .logo.logo-img img {
    max-height: 30px !important;
    max-width: 140px !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v14.1 — Logo etwas kleiner
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */

.logo.logo-img img {
  max-height: 34px !important;
  max-width: 180px !important;
}

@media (max-width: 980px) {
  .logo.logo-img img {
    max-height: 28px !important;
    max-width: 140px !important;
  }
}

@media (max-width: 480px) {
  .logo.logo-img img {
    max-height: 24px !important;
    max-width: 120px !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v15
   1) Farbton-Grid Overflow-Fix (Rot mit 12 Tönen)
   2) Mobile PDP Breite (alles im Viewport)
   3) Accordion CSS für robuste Animationen
   4) Vorher/Nachher Slider Section
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ═══════ 1. FARBTON-GRID OVERFLOW (12+ Tönen) ═══════════════
   Statt fix 6 Spalten → auto-fill mit minmax. Items wrappen
   automatisch. Box wird höher statt breiter zu werden. */

.family-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
  gap: 14px 10px !important;
  padding: 16px !important;
  box-sizing: border-box;
  width: 100%;
}
.family-grid:not(.active) { display: none !important; }

.swatch-item {
  min-width: 0;
  text-align: center;
}
.swatch-name {
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}


/* ═══════ 2. MOBILE PDP — alles im Viewport ═════════════════ */

@media (max-width: 980px) {
  /* PDP Hauptlayout: Bild oben, Info darunter */
  .pdp {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .pdp .gallery,
  .pdp .info {
    min-width: 0;
    max-width: 100%;
  }

  /* Gallery: thumbs horizontal scroll, main image full-width */
  .pdp .gallery {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }
  .pdp .gallery .main-img {
    width: 100% !important;
    aspect-ratio: 1 / 1.15 !important;
  }
  .pdp .gallery .thumbs {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
  }
  .pdp .gallery .thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    background-size: cover;
    background-position: center;
  }

  /* Family Pills + Grid: alles within viewport */
  .farbton-group { min-width: 0; }
  .family-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .family-pill { flex-shrink: 0; }

  .family-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 12px 8px !important;
    padding: 12px !important;
  }
  .swatch-circle {
    width: 44px !important;
    height: 44px !important;
  }

  /* Container/Section Padding mobile */
  .pdp-usp-band,
  .pdp-ingredients,
  .pdp-howto,
  .pdp-faq,
  .pdp-bundles,
  .pdp-beforeafter {
    padding: 48px 0 !important;
  }

  /* Related-Grid auf mobile single-col scroll */
  .related-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .related-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════ 3. ACCORDION — robuste Transition ══════════════════
   max-height transition mit ease-out, overflow hidden.
   Wird vom JS gesteuert (set 0 → scrollHeight → none). */

.acc-details > .acc-body-wrap,
.pfaq-item > .pfaq-body {
  overflow: hidden;
  transition: max-height .42s cubic-bezier(.4, 0, .2, 1);
}

/* Wenn details geschlossen ist, force max-height: 0 (Fallback ohne JS) */
.acc-details:not([open]) > .acc-body-wrap,
.pfaq-item:not([open]) > .pfaq-body {
  /* JS setzt das auch; CSS-Fallback */
  max-height: 0;
}


/* ═══════ 4. VORHER / NACHHER SLIDER ═════════════════════════ */

.pdp-beforeafter {
  padding: 100px 0;
  background: var(--bg-3, #FFFCF6);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.ba-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.ba-head .eyebrow.center {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
  display: inline-block;
}
.ba-head h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 14px;
}
.ba-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 300;
}
.ba-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .ba-grid { grid-template-columns: 1fr; gap: 18px; max-width: 480px; margin: 0 auto; }
}

.ba-card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.ba-slider {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-3);
  user-select: none;
  cursor: ew-resize;
  touch-action: none;
}
.ba-slider img.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-after-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* clip-path wird via JS gesetzt: inset(0 X% 0 0) */
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
}
.ba-after-wrap .ba-img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--bg);
  transform: translateX(-50%);
  border: none;
  cursor: ew-resize;
  padding: 0;
  z-index: 4;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  background: var(--bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.ba-handle-arrow {
  position: absolute;
  top: 50%;
  font-size: 18px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}
.ba-handle-arrow-left {
  left: 50%;
  transform: translate(-19px, -50%);
}
.ba-handle-arrow-right {
  left: 50%;
  transform: translate(7px, -50%);
}

.ba-tag {
  position: absolute;
  top: 14px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 9px;
  background: rgba(15,13,11,.78);
  color: var(--bg);
  z-index: 3;
  pointer-events: none;
}
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; background: var(--gold-deep); }

.ba-card-meta {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.ba-card-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ba-card-from-label {
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.ba-card-step strong {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ba-card-step strong span {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: .02em;
}
.ba-card-arrow {
  color: var(--gold-deep);
  font-size: 16px;
  font-weight: 300;
  flex-shrink: 0;
}

.ba-disclaimer {
  margin: 40px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 640px) {
  .pdp-beforeafter { padding: 60px 0; }
  .ba-head { margin-bottom: 32px; }
  .ba-handle::after { width: 32px; height: 32px; }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v16 — Brand-Manual v1.0 Alignment
   Quelle: FEM_Markenstilhandbuch_FIN.pdf

   Was hier passiert:
   • Google Fonts Loading: DM Sans + PT Serif (als Bookmania-Fallback)
   • CSS-Variablen Override mit den exakten Brand-Farben (Seite 13/14)
   • Neue Variablen für Orange + Gold-Gradient
   • Typografie-Variablen umstellen auf DM Sans / PT Serif

   Was NICHT passiert (Schutz vor Regressionen):
   • Kein Layout/Section-Code wird angefasst
   • Keine Funktionalität (Cart, Drawer, Filter, Search) wird verändert
   • Bestehende Klassen behalten ihre Selektoren und Stiles —
     nur die VARIABLEN-Werte ändern sich, dadurch greift's automatisch

   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ── 1. FONT LOADING ─────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* ── 2. BRAND COLOR + FONT TOKENS (überschreiben bestehende :root) ─ */

:root {
  /* ── Farbpalette (Brand-Manual Seite 13) ── */
  --bg: #faf0e2;            /* Natürliches Beige · was #F8F4ED */
  --ink: #1d1d1b;           /* Etabliertes Schwarz · was #0F0D0B */
  --gold-deep: #a5742c;     /* Veredelndes Gold (tief) · was #7A6238 */

  /* ── Neue Brand-Tokens ── */
  --gold-mid: #f0c976;      /* Veredelndes Gold (mittel) */
  --gold-light: #ffdb85;    /* Veredelndes Gold (hell) */
  --orange: #ed8950;        /* Selbstbewusstes Orange */
  --grey-light: #f5f5f5;    /* Kompetentes Grau */

  /* ── Typografie (Brand-Manual Seite 12) ── */
  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'PT Serif', 'Bookmania', 'Georgia', serif;
  --display: 'DM Sans', system-ui, sans-serif;
}


/* ── 3. BASE TYPOGRAPHY ENFORCEMENT ─────────────────────────────
   Falls bestehende Selektoren noch hartcodierte Fonts hatten, hier
   sicherstellen dass DM Sans / PT Serif greifen. */

html, body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display-Headlines: DM Sans Bold mit negativem letter-spacing */
h1, h2, h3, h4, h5, h6,
.pdp-title,
.legal-title,
.lcol-title,
.fp-hero h1,
.hero h1,
.cart-head-title h2,
.pfaq-head h2,
.ba-head h2,
.pdp-usp-band h2,
.pdp-howto h2,
.pdp-ingredients h2,
.pdp-bundles h2,
.legal-content h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.05;
}

/* Body / Sub-Texts: DM Sans Regular */
body, p, li, a, span, label, input, textarea, select, button {
  font-family: var(--sans);
}

/* Accent words via <em>: PT Serif Italic in Gold-Deep */
em,
.pdp-title em,
.lcol-title em,
.legal-title em,
.cart-head-title h2 em,
.ba-head h2 em,
.pfaq-head h2 em,
h1 em, h2 em, h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: -.005em;
}


/* ── 4. NEW BRAND COMPONENTS (optional verwendbar) ────────────── */

/* Orange CTA-Button-Variante */
.btn-orange,
.cta-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--orange);
  color: #fff;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, transform .25s, box-shadow .25s;
  -webkit-font-smoothing: antialiased;
}
.btn-orange:hover,
.cta-orange:hover {
  background: #d77640;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(237, 137, 80, .55);
}

/* Black Topbar-Variante (für USP-Streifen wie im Anwendungsbeispiel) */
.topbar-black {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 0;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
}

/* Gold-Gradient für Brand-Shapes */
.gold-gradient {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold-deep) 100%);
}

/* Stats-Banner Klasse für „99% Kundenzufriedenheit" Block */
.brand-stats {
  background: var(--grey-light);
  padding: 56px 0;
  position: relative;
}
.brand-stats-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.brand-stats h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.1;
  margin: 0 0 14px;
}
.brand-stats p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
@media (max-width: 720px) {
  .brand-stats-inner { grid-template-columns: 1fr; gap: 28px; }
}


/* ── 5. BRAND-SHAPE FLOATING ELEMENT ─────────────────────────── */

.brand-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  display: block;
}
.brand-shape svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ── 6. BRUSH-HIGHLIGHT (handgezogene Markierung) ────────────── */

.brush-highlight {
  position: relative;
  display: inline-block;
}
.brush-highlight > .brush-stroke {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -.15em;
  width: 108%;
  height: .35em;
  pointer-events: none;
  color: var(--gold-deep);
}
.brush-circle {
  position: relative;
  display: inline-block;
  padding: 0 .25em;
}
.brush-circle > .brush-oval {
  position: absolute;
  inset: -.18em -.4em -.15em -.4em;
  pointer-events: none;
  color: var(--ink);
}


/* ── 7. PRINT-NICETY: Brand Quality Seal ─────────────────────── */

.quality-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  line-height: 1.1;
  padding: 8px;
  position: relative;
  transform: rotate(-8deg);
  box-shadow: 0 6px 20px -6px rgba(237, 137, 80, .55);
}
.quality-seal-text {
  display: block;
}
.quality-seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(29, 29, 27, .35);
  border-radius: 50%;
}


/* ── 8. KOMPATIBILITÄTS-OVERRIDE für alte Variable-Namen ────── */

/* Falls irgendwo --gold (ohne -deep) verwendet wurde, mappen */
:root {
  --gold: var(--gold-deep);
}


/* ── 9. ANCHOR LINKS in Body-Text → Gold-Underline ──────────── */

.prose-clean a:not(.btn):not([class*="cta"]),
.legal-content a:not(.btn):not([class*="cta"]),
.shopify-policy__body .rte a {
  color: var(--gold-deep);
  text-decoration-color: rgba(165, 116, 44, .35);
}


/* ── 10. SCROLLBAR FEINSCHLIFF (DM Sans Premium-Feel) ────────── */

@media (pointer: fine) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(165, 116, 44, .25);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(165, 116, 44, .5);
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v16.1
   1) Footer-Logo Bild-Styling (max-Höhe, Hintergrund-Mix)
   2) Font-Force für Announcement-Bar, Buttons, Nav-Links — falls
      ältere Selektoren noch font-family überschreiben
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ── 1. FOOTER LOGO IMAGE ────────────────────────────────────── */

.foot-logo--img {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.foot-logo-img {
  display: block;
  max-height: 56px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Das Logo ist dunkel auf cream (JPG-Hintergrund).
     Damit es im dunklen Footer harmoniert: leichte Invertierung
     mit warmer Tönung. Falls Logo eine cream-on-dark Variante
     bekommt, kann der filter raus. */
  filter: brightness(0) invert(1) opacity(.92);
}

@media (max-width: 640px) {
  .foot-logo-img {
    max-height: 42px;
    max-width: 200px;
  }
}


/* ── 2. FONT-FAMILY ENFORCEMENT (Announcement-Bar / Buttons / Nav) ─
   v16 sollte das schon abdecken, aber falls ältere Selektoren
   stärker spezifiziert sind, hier nochmal mit höherer Specificity. */

.fp-announce,
.fp-announce-track,
.fp-announce-msg,
.fp-announce-text {
  font-family: var(--sans) !important;
}

.site-header,
.site-header .nav,
.site-header .nav-link,
.site-header .logo,
.site-header .lang-pill,
.site-header .icon-btn {
  font-family: var(--sans) !important;
}

.btn,
.btn-primary,
.btn-ghost,
.btn-orange,
.cta-add,
.cta-orange,
.cart-checkout-btn,
.plp-empty-cta,
.lcol-card-cta,
.filter-price-apply,
button {
  font-family: var(--sans) !important;
}

/* Nav-Drawer & Cart-Drawer Buttons */
.mnav-link,
.cart-empty-cta,
.cart-qty-btn,
.cart-item-remove {
  font-family: var(--sans) !important;
}

/* Inputs & Selects */
input, select, textarea {
  font-family: var(--sans) !important;
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v16.2 — Footer-Logo Filter Cleanup
   v16.1 hatte einen Invertierungs-Filter immer aktiv — der hat das
   JPG mit cream-Background zu einem hellen Block gemacht. Jetzt:
   Filter wird NUR auf das Header-PNG (transparenter Hintergrund)
   angewendet via .foot-logo-img--invert.
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* Reset default v16.1 — kein Filter mehr für alle Logo-Bilder */
.foot-logo-img {
  filter: none !important;
  -webkit-filter: none !important;
  display: block;
  max-height: 56px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Spezifischer Filter NUR für invertierungswürdige Logos
   (transparentes PNG mit dunklem Schriftzug) */
.foot-logo-img--invert {
  filter: brightness(0) invert(1) opacity(.92) !important;
  -webkit-filter: brightness(0) invert(1) opacity(.92) !important;
}

@media (max-width: 640px) {
  .foot-logo-img {
    max-height: 42px;
    max-width: 200px;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v17 — Mobile Search-Modal Fix
   Auf < 640px lapptbe das Modal über den Viewport hinaus weil
   .search-modal-head padding 48px hat + Submit-Text + Close-Button
   konkurrieren. Hier: kompaktes Layout für Mobile.
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .search-modal-panel {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .search-modal-head {
    padding: 18px 16px !important;
    gap: 10px !important;
  }
  .search-modal-input-wrap {
    padding: 6px 0 !important;
    min-width: 0;
  }
  .search-modal-input {
    font-size: 16px !important; /* iOS Zoom-Verhinderung */
    min-width: 0;
  }
  .search-modal-submit {
    /* Auf mobile: Submit-Button-Text verstecken, nur Pfeil-Symbol */
    font-size: 0 !important;
    padding: 6px 10px !important;
    min-width: 0;
  }
  .search-modal-submit::after {
    content: "→";
    font-size: 18px;
    color: inherit;
    letter-spacing: 0;
  }
  .search-modal-close {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0;
  }
  .search-modal-close svg {
    width: 20px !important;
    height: 20px !important;
  }
  .search-modal-body {
    padding: 20px 16px !important;
  }
  .search-hint-pills {
    gap: 6px !important;
  }
  .search-hint {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 380px) {
  .search-modal-head { padding: 14px 12px !important; }
  .search-modal-body { padding: 16px 12px !important; }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v18 — Product-Card Image Background

   Problem: Der bisherige Gradient (weiß → beige) erzeugte einen
   harten Schnitt mit Produktbildern die selbst weißen Hintergrund
   haben. Resultat: das Produktbild sah aus wie ein viereckiger
   weißer Kasten innerhalb der Card.

   Fix: Solider Brand-Cream Hintergrund + dezenter Border.
   Egal welche Hintergrundfarbe das Produktbild hat — kein harter
   Übergang mehr, alles harmonisch im Cream-Tone.

   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */

.product-card .pc-img {
  background: var(--bg-3, #fffaef) !important;
  border: 1px solid var(--line-soft, #ebe2cd) !important;
}

/* Bild-Padding etwas zurücknehmen damit Produkte besser sichtbar */
.product-card .pc-img img {
  padding: 26px !important;
}

/* Auf Mobile noch kompakter */
@media (max-width: 640px) {
  .product-card .pc-img img {
    padding: 18px !important;
  }
}

/* Hover: feiner Lift mit warmem Schatten statt Gradient-Trick */
.product-card:hover .pc-img {
  border-color: var(--gold-deep, #a5742c) !important;
  box-shadow: 0 12px 32px -16px rgba(165, 116, 44, .25);
  transition: border-color .35s ease, box-shadow .35s ease;
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v19 — PDP Gallery Fix

   Bug 1: Thumbnails nutzten background-size: cover → croppten das
          Bild auf das Thumb-Aspectratio → "reingezoomter" Look.
   Bug 2: Thumbs waren <div>'s ohne Click-Handler → nicht klickbar.

   Fix:
     • Liquid: thumbs sind jetzt <button> mit data-full + onclick JS
     • CSS: contain statt cover, gleicher Cream-Hintergrund wie Main-Img
   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */

.pdp .thumb {
  background-size: contain !important;
  background-color: var(--bg-3) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  padding: 6px !important;
  border-radius: 0 !important;
  outline: none;
}

/* Active + Hover: dezenter Gold-Border statt Ink */
.pdp .thumb.active,
.pdp .thumb:hover,
.pdp .thumb:focus-visible {
  border-color: var(--gold-deep) !important;
  opacity: 1 !important;
}

/* Mobile: thumbs werden horizontal scrollbar, contain bleibt */
@media (max-width: 980px) {
  .pdp .thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1 !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v20

   Fix 1: PDP "Komplettes Ritual" / "Empfohlen dazu" — gleicher
          Gradient-Bug wie zuvor bei .pc-img. Solider Cream + Border.
   Fix 2: /collections — Kollektions-Cards Bilder waren 16:10 mit
          object-fit: cover → croppte zoom-stark. Jetzt: 1:1 mit
          object-fit: contain, ganzes Bild sichtbar.

   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ── 1. PDP RELATED-CARDS (Komplettes Ritual / Empfohlen dazu) ─── */

.pdp-bundles .related-img {
  background: var(--bg-3, #fffaef) !important;
  border: 1px solid var(--line-soft, #ebe2cd) !important;
}

.pdp-bundles .related-img img {
  padding: 26px !important;
}

@media (max-width: 640px) {
  .pdp-bundles .related-img img {
    padding: 18px !important;
  }
}

.pdp-bundles .related-card:hover .related-img {
  border-color: var(--gold-deep, #a5742c) !important;
  box-shadow: 0 12px 32px -16px rgba(165, 116, 44, .25);
  transition: border-color .35s ease, box-shadow .35s ease;
}


/* ── 2. LIST-COLLECTIONS Card-Bilder (1:1, contain, ganz sichtbar) ─ */

.lcol-card-img {
  aspect-ratio: 1 / 1 !important;
  background: var(--bg-3, #fffaef) !important;
  border-bottom: 1px solid var(--line-soft, #ebe2cd);
  position: relative;
  overflow: hidden;
}

.lcol-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 28px !important;
  background: var(--bg-3, #fffaef);
}

.lcol-card:hover .lcol-card-img img {
  transform: scale(1.03) !important;
}

@media (max-width: 640px) {
  .lcol-card-img img {
    padding: 20px !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v21 — Hair Color Cream UX
   1. Set-Selector (3 Karten: Nur / + Oxy 100ml / + Oxy 1000ml)
   2. Farbton-Trigger-Button (öffnet Modal)
   3. Color-Picker-Modal (Suche + Family-Filter + Image-Grid)
   4. Loading-State auf Submit-Button

   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ════════ STEP-LABELS ════════════════════════════════════════ */

.set-step-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.set-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-deep, #a5742c);
  color: var(--bg, #faf0e2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  font-family: var(--sans, sans-serif);
}
.set-step-title {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink, #1d1d1b);
  font-family: var(--sans);
}


/* ════════ SET-SELECTOR (3 Cards) ════════════════════════════ */

.set-selector {
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft, #ebe2cd);
}

.set-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

@media (max-width: 720px) {
  .set-cards { grid-template-columns: 1fr; gap: 8px; }
}

.set-card {
  position: relative;
  display: block;
  padding: 0;
  background: var(--bg, #faf0e2);
  border: 1.5px solid var(--line, #d8cbb4);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .15s;
}
.set-card:hover {
  border-color: var(--gold-deep, #a5742c);
}
.set-card.is-active {
  border-color: var(--ink, #1d1d1b);
  background: var(--bg-3, #fffaef);
}
.set-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.set-card-inner {
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.set-card-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink, #1d1d1b);
  margin: 0;
  line-height: 1.25;
}
.set-card-sub {
  font-size: 11px;
  color: var(--ink-soft, #4a4844);
  margin: 0;
  line-height: 1.35;
}
.set-card-price {
  font-family: var(--serif, serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink, #1d1d1b);
  margin: 6px 0 0;
  font-style: italic;
}
.set-card-conc {
  margin-top: 8px;
  padding: 6px 22px 6px 10px;
  border: 1px solid var(--line, #d8cbb4);
  background: var(--bg-3, #fffaef);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink, #1d1d1b);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a5742c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
  width: 100%;
}
.set-card-conc:focus { outline: 1px solid var(--gold-deep); }

.set-card-badge {
  position: absolute;
  top: -1px;
  right: 8px;
  transform: translateY(-50%);
  background: var(--orange, #ed8950);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 8px;
  font-family: var(--sans);
  z-index: 2;
}
.set-card-badge--best {
  background: var(--ink, #1d1d1b);
  color: var(--gold-light, #ffdb85);
}


/* ════════ FARBTON-TRIGGER-BUTTON ════════════════════════════ */

.farbton-group--modal {
  margin: 0 0 18px;
}
.farbton-trigger {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-3, #fffaef);
  border: 1.5px solid var(--line, #d8cbb4);
  cursor: pointer;
  transition: border-color .25s, background .25s;
  text-align: left;
  font-family: var(--sans);
}
.farbton-trigger:hover {
  border-color: var(--gold-deep, #a5742c);
}
.farbton-trigger-preview {
  width: 56px;
  height: 56px;
  background-color: var(--bg-3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--line, #d8cbb4);
  border-radius: 50%;
  flex-shrink: 0;
}
.farbton-trigger-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.farbton-trigger-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.farbton-trigger-code {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  font-style: italic;
}
.farbton-trigger-name {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.farbton-trigger-family {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}
.farbton-trigger-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .farbton-trigger-cta span { display: none; }
}


/* ════════ COLOR-PICKER-MODAL ══════════════════════════════ */

.color-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 29, 27, .55);
  z-index: 1100;
  opacity: 0;
  transition: opacity .35s ease;
}
.color-modal-backdrop.is-visible { opacity: 1; }

.color-modal {
  position: fixed;
  inset: 0;
  z-index: 1101;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.color-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.color-modal-panel {
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  background: var(--bg, #faf0e2);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, #d8cbb4);
  overflow: hidden;
  transform: translateY(20px);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.color-modal.is-open .color-modal-panel {
  transform: translateY(0);
}

.color-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.color-modal-eyebrow {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 4px;
}
.color-modal-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.012em;
  color: var(--ink);
  line-height: 1.1;
}
.color-modal-title em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.color-modal-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.color-modal-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.color-modal-close:hover { border-color: var(--gold-deep); background: var(--bg-3); }

.color-modal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px 10px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.color-modal-search-wrap {
  position: relative;
  flex: 1;
}
.color-modal-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.color-modal-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.color-modal-search:focus {
  outline: none;
  border-color: var(--gold-deep);
}

.color-modal-filters {
  display: flex;
  gap: 6px;
  padding: 12px 28px;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  scrollbar-width: thin;
}
.cmf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  flex-shrink: 0;
}
.cmf-pill:hover { border-color: var(--gold-deep); color: var(--ink); }
.cmf-pill.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.cmf-count {
  font-size: 10px;
  opacity: .7;
}

.color-modal-grid {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .color-modal-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px 24px; }
  .color-modal-head, .color-modal-toolbar, .color-modal-filters {
    padding-left: 16px; padding-right: 16px;
  }
}
@media (max-width: 480px) {
  .color-modal-grid { grid-template-columns: repeat(2, 1fr); }
}

.cm-swatch {
  display: flex;
  flex-direction: column;
  background: var(--bg-3);
  border: 1.5px solid var(--line-soft);
  padding: 8px;
  cursor: pointer;
  text-align: center;
  font-family: var(--sans);
  transition: border-color .2s, transform .15s;
}
.cm-swatch:hover {
  border-color: var(--gold-deep);
  transform: translateY(-2px);
}
.cm-swatch.is-active {
  border-color: var(--ink);
  border-width: 2px;
}
.cm-swatch-img {
  aspect-ratio: 1 / 1.1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ccc;
  margin-bottom: 6px;
}
.cm-swatch-code {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
  margin-top: 2px;
}
.cm-swatch-name {
  font-size: 10px;
  color: var(--ink-soft);
  line-height: 1.25;
  margin-top: 2px;
}

.color-modal-empty {
  padding: 60px 28px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
}


/* ════════ LOADING-STATE ══════════════════════════════════ */

.cta-add.is-loading {
  opacity: .7;
  pointer-events: none;
  cursor: wait;
}
/* ─────────────────────────────────────────────────────────────
   FEMMAS THEME · PATCH v21.1 — Set-Cards Premium-Look + Bugfixes

   1. Set-Cards mit Thumbnails (Hair Color + Oxycreme gestapelt)
   2. Check-Icon Top-Right wenn aktiv
   3. Größere Cards, mehr Atem, mehr Premium-Feel
   4. Modal-Overlay-Click funktional (Modal selbst kein Padding mehr)

   Ans Ende von femmas-theme.css anhängen.
   ───────────────────────────────────────────────────────────── */


/* ════════ SET-CARDS PREMIUM POLISH ═══════════════════════════ */

.set-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .set-cards { grid-template-columns: 1fr; gap: 10px; }
}

.set-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 14px 16px;
  background: var(--bg, #faf0e2);
  border: 1.5px solid var(--line, #d8cbb4);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .15s, box-shadow .25s;
  outline: none;
  text-align: left;
}
.set-card:hover {
  border-color: var(--gold-deep, #a5742c);
  box-shadow: 0 8px 24px -12px rgba(165, 116, 44, .25);
}
.set-card:focus-visible {
  border-color: var(--ink, #1d1d1b);
  box-shadow: 0 0 0 3px rgba(165, 116, 44, .25);
}
.set-card.is-active {
  border-color: var(--ink, #1d1d1b);
  border-width: 2px;
  background: var(--bg-3, #fffaef);
  padding: 13px 13px 15px; /* compensate für 1px mehr Border */
}
.set-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

/* Check-Icon Top-Right wenn aktiv */
.set-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink, #1d1d1b);
  color: var(--gold-light, #ffdb85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s, transform .25s cubic-bezier(.4, 0, .2, 1);
  z-index: 2;
}
.set-card.is-active .set-card-check {
  opacity: 1;
  transform: scale(1);
}

/* Badge oben rechts (überschreibt Check wenn nicht aktiv — Check liegt drüber wenn aktiv) */
.set-card-badge {
  position: absolute;
  top: -1px;
  left: 10px;
  transform: translateY(-50%);
  background: var(--orange, #ed8950);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 3px 8px;
  font-family: var(--sans);
  z-index: 1;
  white-space: nowrap;
}
.set-card-badge--best {
  background: var(--ink, #1d1d1b);
  color: var(--gold-light, #ffdb85);
}

/* Thumbnail-Bereich */
.set-card-thumb {
  background: var(--bg-3, #fffaef);
  border: 1px solid var(--line-soft, #ebe2cd);
  aspect-ratio: 4 / 3;
  padding: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-card-thumb--solo img {
  width: 70%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.set-card-thumb-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.set-card-thumb-back,
.set-card-thumb-front {
  position: absolute;
  top: 0;
  width: 60%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
.set-card-thumb-back {
  left: 0;
  z-index: 1;
}
.set-card-thumb-front {
  right: 0;
  z-index: 2;
}

/* Inner content */
.set-card-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.set-card-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink, #1d1d1b);
  margin: 0;
  line-height: 1.25;
}
.set-card-sub {
  font-size: 11px;
  color: var(--ink-soft, #4a4844);
  margin: 0;
  line-height: 1.4;
  min-height: 30px;
}
.set-card-price {
  font-family: var(--serif, serif);
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink, #1d1d1b);
  margin: 4px 0 0;
  letter-spacing: -.01em;
}
.set-card.is-active .set-card-price {
  color: var(--gold-deep, #a5742c);
}
.set-card-conc {
  margin: 6px 0 0;
  padding: 7px 26px 7px 10px;
  border: 1px solid var(--line, #d8cbb4);
  background: var(--bg, #faf0e2);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink, #1d1d1b);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a5742c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
  letter-spacing: .02em;
}
.set-card-conc:focus { outline: 1px solid var(--gold-deep); }
.set-card.is-active .set-card-conc {
  border-color: var(--ink, #1d1d1b);
  background: var(--bg-3, #fffaef);
}


/* ════════ MODAL OVERLAY CLICK FIX ════════════════════════════ */

/* Damit Click ins Leere das Modal schließt: kein Padding auf .color-modal —
   das Panel zentrieren wir via flex, und überall um das Panel ist
   .color-modal selbst (mit data-color-modal-close-overlay) klickbar. */
.color-modal {
  padding: 0 !important;
}
.color-modal-panel {
  margin: 24px;
  max-height: calc(100vh - 48px);
}
@media (max-width: 720px) {
  .color-modal-panel { margin: 12px; max-height: calc(100vh - 24px); }
}
/* ════════════════════════════════════════════════════════════════════════════
   FEMMAS THEME · v22 PATCH
   Premium Color-Preview-Bubble auf der Hair-Color-Cream PDP

   Konzept:
   - Hauptbild bleibt Original-Packshot (Produktverpackung)
   - Großer schwebender Kreis unten rechts zeigt das ausgewählte
     Strähnen-Bild, Hex-Fallback wenn Bild fehlt
   - Smoothe Transitions zwischen Tönen, Premium-Schatten, dezenter
     Goldring + Code-Label
   ──────────────────────────────────────────────────────────────────────────── */

.main-img--hair-color {
  position: relative;
  overflow: hidden;
}

.color-preview-bubble {
  position: absolute;
  right: clamp(12px, 2.5%, 32px);
  bottom: clamp(12px, 2.5%, 32px);
  width: clamp(140px, 32%, 240px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 24px 60px -16px rgba(20, 14, 8, 0.45),
    0 8px 20px -8px rgba(20, 14, 8, 0.25),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 0;
  transform: scale(0.86) translateY(8px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.85,.3,1.15);
  pointer-events: none;
}

.color-preview-bubble.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.color-preview-bubble-inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background-color: var(--gold-deep, #b89668);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.6),
    inset 0 -30px 60px -20px rgba(0, 0, 0, 0.35);
  transition: background-image .5s ease, background-color .4s ease;
}

/* Goldring um den Kreis */
.color-preview-bubble::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(184, 150, 104, 0.45);
  pointer-events: none;
  z-index: 1;
}

/* Subtle inner highlight */
.color-preview-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
}

/* Code-Label unten am Kreis */
.color-preview-bubble-label {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  background: rgba(20, 14, 8, 0.85);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: baseline;
  box-shadow: 0 8px 24px -8px rgba(20, 14, 8, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.color-preview-bubble-code {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-deep, #b89668);
}

.color-preview-bubble-name {
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.92);
  font-size: 10px;
}

.color-preview-bubble-name:empty {
  display: none;
}

/* Sale-Badge muss über Bubble bleiben */
.main-img--hair-color .pdp-sale-badge {
  z-index: 5;
}

/* Tablet */
@media (max-width: 1024px) {
  .color-preview-bubble {
    width: clamp(120px, 28%, 200px);
    right: 16px;
    bottom: 16px;
  }
  .color-preview-bubble-label {
    font-size: 10px;
    padding: 5px 12px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .color-preview-bubble {
    width: 130px;
    right: 12px;
    bottom: 12px;
  }
  .color-preview-bubble-inner {
    inset: 5px;
  }
  .color-preview-bubble-label {
    bottom: -30px;
    font-size: 10px;
    padding: 4px 10px;
    gap: 6px;
  }
  .color-preview-bubble-name {
    display: none; /* nur Code auf Mobile */
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .color-preview-bubble,
  .color-preview-bubble-inner {
    transition: none;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   FEMMAS THEME · v23 PATCH
   1) Color-Preview-Bubble: Label nach INNEN (Premium-Inscription, kein Cropping)
   2) Mobile Set-Cards: kompaktes horizontales Layout, scharfe Bilder
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════ 1) BUBBLE-LABEL ═══════════════════════════════════════════════════
   Vorher: Label saß als Pill UNTER der Bubble, wurde von overflow:hidden
   der Gallery angeschnitten.
   Jetzt: Label sitzt ELEGANT INNEN am unteren Rand des Kreises — wie eine
   Inschrift auf einem Siegel-Ring. Premium, immer voll sichtbar, egal welche
   Containergröße. Bubble wird leicht größer für mehr Atmungsraum.
   ──────────────────────────────────────────────────────────────────────────── */

.color-preview-bubble {
  width: clamp(160px, 34%, 260px);
  right: clamp(14px, 2.8%, 36px);
  bottom: clamp(14px, 2.8%, 36px);
}

.color-preview-bubble-inner {
  /* Sanfter dunkler Verlauf am unteren Rand, damit das Label gut lesbar ist */
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.55),
    inset 0 -60px 80px -30px rgba(20, 14, 8, 0.55);
}

.color-preview-bubble-label {
  /* Position: INNEN, am unteren Rand der Bubble */
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 4;

  /* Optik: dezenter dunkler Pill, Backdrop-Blur für Premium */
  background: rgba(20, 14, 8, 0.78);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  padding: 5px 12px 5px 13px;
  border-radius: 999px;
  box-shadow:
    0 6px 18px -6px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Inhalt */
  display: flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
  max-width: 84%;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.color-preview-bubble-code {
  font-family: var(--serif, 'PT Serif', serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gold-light, #ffdb85);
  text-transform: none;
}

.color-preview-bubble-name {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
}

.color-preview-bubble-name:empty {
  display: none;
}


/* ════════ 2) MOBILE SET-CARDS — Kompaktes Horizontal-Layout ═════════════════
   Vorher: 1-Spalten-Stack, Thumb mit 4:3 aspect-ratio = riesig + unscharf.
   Jetzt: jede Karte ist eine horizontale Zeile (Thumb links 88px, Content
   rechts), Bilder sind in srcset auf Retina-Qualität, Cards bleiben sauber.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {

  .set-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .set-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: stretch;
    min-height: 96px;
  }

  /* Thumbnail-Bereich: kompakte Box links, KEIN 4/3 aspect-ratio mehr */
  .set-card-thumb {
    aspect-ratio: auto;
    width: 96px;
    min-height: 100%;
    padding: 6px;
    border: 0;
    border-right: 1px solid var(--line-soft, #ebe2cd);
    background: var(--bg-3, #fffaef);
  }

  /* Solo-Card: einzelnes Produktbild */
  .set-card-thumb--solo {
    padding: 8px;
  }
  .set-card-thumb--solo img {
    width: 100%;
    height: 100%;
    max-height: 84px;
    object-fit: contain;
  }

  /* Stack (Bundle): Produkt + Oxycreme nebeneinander, kompakt */
  .set-card-thumb-stack {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 84px;
  }
  .set-card-thumb-back,
  .set-card-thumb-front {
    position: absolute;
    top: 0;
    height: 100%;
    width: 56%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10));
  }
  .set-card-thumb-back  { left: -6%; }
  .set-card-thumb-front { right: -6%; }

  /* Content-Bereich: Padding kompakter, kleinere Schriften */
  .set-card-inner {
    padding: 10px 12px 12px 14px;
    gap: 3px;
  }
  .set-card-title {
    font-size: 13px;
    line-height: 1.2;
  }
  .set-card-sub {
    font-size: 10.5px;
    line-height: 1.3;
  }
  .set-card-price {
    font-size: 15px;
    margin: 4px 0 0;
  }
  .set-card-conc {
    margin-top: 6px;
    padding: 5px 22px 5px 9px;
    font-size: 10.5px;
  }

  /* Check-Icon kleiner und nicht im Weg */
  .set-card-check {
    width: 18px;
    height: 18px;
    top: 8px;
    right: 8px;
  }
  .set-card-check svg {
    width: 11px;
    height: 11px;
  }

  /* Badge sitzt jetzt rechts oben, kompakter */
  .set-card-badge {
    top: 8px;
    right: 30px;
    transform: none;
    padding: 3px 7px;
    font-size: 8.5px;
    letter-spacing: 0.12em;
  }
  .set-card-badge--best {
    /* gleiches Layout */
  }

  /* Bubble auf Mobile etwas kleiner, Label-Schriften reduziert */
  .color-preview-bubble {
    width: 140px;
    right: 12px;
    bottom: 12px;
  }
  .color-preview-bubble-label {
    padding: 4px 10px;
    bottom: 13%;
    gap: 6px;
  }
  .color-preview-bubble-code {
    font-size: 11px;
  }
  .color-preview-bubble-name {
    display: none; /* nur Code auf Mobile, sonst zu eng */
  }
}


/* Sehr kleine Phones (≤380px) — noch kompakter */
@media (max-width: 380px) {
  .set-card {
    grid-template-columns: 80px 1fr;
    min-height: 86px;
  }
  .set-card-thumb {
    width: 80px;
  }
  .set-card-thumb--solo img {
    max-height: 74px;
  }
  .set-card-inner {
    padding: 9px 10px 10px 11px;
  }
  .set-card-title {
    font-size: 12.5px;
  }
  .set-card-sub {
    font-size: 10px;
  }
  .set-card-price {
    font-size: 14px;
  }

  .color-preview-bubble {
    width: 120px;
  }
  .color-preview-bubble-code {
    font-size: 10px;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   FEMMAS THEME · v23-1 PATCH (Hotfix)
   Mobile Set-Card-Badges: "Empfohlen" / "Bester Preis"

   Bug: In v23 wurden Badges auf Mobile als volle Balken angezeigt, weil
        `left: 10px` (aus v21-1) und `right: 30px` (aus v23) gleichzeitig aktiv
        waren — Element streckt sich automatisch zwischen beiden.

   Fix: Klar definierte Eck-Tags (top-left), kleine Pille, Schatten,
        einheitlich für Desktop und Mobile.
   ──────────────────────────────────────────────────────────────────────────── */

.set-card-badge {
  position: absolute;
  top: -8px;
  left: 12px;
  right: auto;             /* unset, damit Element nicht stretchen kann */
  bottom: auto;
  transform: none;
  display: inline-block;
  width: auto;
  max-width: calc(100% - 60px); /* niemals breiter als die Karte minus Check-Icon */
  padding: 4px 9px;
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--orange, #ed8950);
  border-radius: 3px;
  box-shadow:
    0 4px 10px -3px rgba(20, 14, 8, 0.35),
    0 1px 2px rgba(20, 14, 8, 0.2);
  z-index: 3;
}

.set-card-badge--best {
  background: var(--ink, #1d1d1b);
  color: var(--gold-light, #ffdb85);
}

/* Mobile: noch kompakter, leicht versetzt damit die kleinere Karte gut atmet */
@media (max-width: 720px) {
  .set-card-badge {
    top: -7px;
    left: 10px;
    padding: 3px 8px;
    font-size: 8.5px;
    letter-spacing: 0.1em;
    border-radius: 2px;
    box-shadow: 0 3px 8px -2px rgba(20, 14, 8, 0.4);
  }
}

@media (max-width: 380px) {
  .set-card-badge {
    top: -6px;
    left: 8px;
    padding: 2px 7px;
    font-size: 8px;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   FEMMAS THEME · v24 PATCH
   Judge.me Reviews — Premium-Optik (Goldsterne, DM Sans, Section-Layout)

   Judge.me liefert standardmäßig Stern-Icons mit grünlicher Default-Farbe und
   Arial-Standardschrift. Dieser Patch überschreibt das, sodass die Bewertungen
   im Premium-Look der Femmas-Marke (Goldsterne, DM Sans, PT Serif, ruhiger
   Beige-Hintergrund) erscheinen — Desktop UND Mobile.
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════ PDP-Rating-Row (Preview Badge unter dem Produktnamen) ═══════════ */

.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  min-height: 22px; /* verhindert Layout-Shift bevor Judge.me lädt */
}

.pdp-rating-row .jdgm-prev-badge {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--sans, 'DM Sans', sans-serif);
}

.pdp-rating-row .jdgm-prev-badge__stars {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--gold-deep, #b89668) !important;
}

.pdp-rating-row .jdgm-prev-badge__text {
  font-size: 12px;
  color: var(--ink-soft, #4a4844);
  letter-spacing: .01em;
  text-decoration: none;
  border-bottom: 1px dotted rgba(74, 72, 68, 0.3);
  transition: color .2s, border-color .2s;
}

.pdp-rating-row .jdgm-prev-badge__text:hover {
  color: var(--gold-deep, #b89668);
  border-color: var(--gold-deep, #b89668);
}

/* Falls Judge.me noch nicht geladen ist, dezenter Placeholder */
.pdp-rating-row:empty::before,
.pdp-rating-row .jdgm-prev-badge[data-average-rating="0.00"] {
  content: '';
  height: 14px;
}


/* ════════ Bewertungs-Section am Seitenende ═══════════════════════════════ */

.pdp-reviews {
  padding: 80px 0 100px;
  background: var(--bg-2, #f5e9d4);
  position: relative;
}

.pdp-reviews::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: var(--gold-deep, #b89668);
  opacity: 0.4;
}

.pdp-reviews .container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

.pdp-reviews .pusp-head {
  text-align: center;
  margin-bottom: 48px;
}

.pdp-reviews .pusp-head h2 em {
  font-style: italic;
  color: var(--gold-deep, #b89668);
}


/* ════════ Judge.me Review-Widget Overrides ═══════════════════════════════ */

.jdgm-widget,
.jdgm-rev-widg {
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  color: var(--ink, #1d1d1b) !important;
}

/* Stars überall in Femmas-Gold */
.jdgm-star {
  color: var(--gold-deep, #b89668) !important;
}
.jdgm-star.jdgm--off,
.jdgm-star.jdgm--half {
  color: rgba(184, 150, 104, 0.25) !important;
}

/* Histogram / Summary-Block */
.jdgm-rev-widg__summary {
  background: var(--bg-3, #fffaef);
  border: 1px solid var(--line-soft, #ebe2cd);
  border-radius: 0;
  padding: 28px 32px;
  margin-bottom: 28px;
}

.jdgm-rev-widg__summary-average {
  font-family: var(--serif, 'PT Serif', serif) !important;
  font-style: italic;
  font-size: 44px !important;
  color: var(--ink, #1d1d1b);
  letter-spacing: -0.02em;
}

.jdgm-rev-widg__summary-text {
  font-size: 13px;
  color: var(--ink-soft, #4a4844);
  letter-spacing: .02em;
}

.jdgm-histogram__row-percent {
  background: var(--bg, #faf0e2) !important;
}
.jdgm-histogram__row-percent::before,
.jdgm-histogram__row-percent-bar {
  background: var(--gold-deep, #b89668) !important;
}

/* "Bewertung schreiben"-Button im Femmas-Look */
.jdgm-write-rev-link,
.jdgm-btn {
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  border-radius: 0 !important;
  background: var(--ink, #1d1d1b) !important;
  color: var(--bg, #faf0e2) !important;
  border: 1px solid var(--ink, #1d1d1b) !important;
  transition: background .2s, color .2s !important;
}

.jdgm-write-rev-link:hover,
.jdgm-btn:hover {
  background: var(--gold-deep, #b89668) !important;
  border-color: var(--gold-deep, #b89668) !important;
  color: #fff !important;
}

/* Sortier-Dropdown */
.jdgm-sort-dropdown {
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--line-soft, #ebe2cd) !important;
  background: var(--bg-3, #fffaef) !important;
  border-radius: 0 !important;
}

/* Einzelne Review-Karten */
.jdgm-rev {
  border-bottom: 1px solid var(--line-soft, #ebe2cd) !important;
  padding: 24px 0 !important;
}

.jdgm-rev__author {
  font-family: var(--serif, 'PT Serif', serif) !important;
  font-style: italic;
  font-size: 16px !important;
  color: var(--ink, #1d1d1b) !important;
}

.jdgm-rev__title {
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  color: var(--ink, #1d1d1b) !important;
  margin: 6px 0 8px !important;
}

.jdgm-rev__body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ink-soft, #4a4844) !important;
}

.jdgm-rev__timestamp {
  font-size: 11px !important;
  color: rgba(74, 72, 68, 0.6) !important;
  letter-spacing: 0.04em;
}

.jdgm-rev__buyer-badge {
  font-size: 10px !important;
  background: var(--bg-3, #fffaef) !important;
  color: var(--gold-deep, #b89668) !important;
  border: 1px solid var(--gold-deep, #b89668) !important;
  border-radius: 0 !important;
  padding: 2px 8px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Paginierung */
.jdgm-paginate__page {
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  color: var(--ink-soft, #4a4844) !important;
}
.jdgm-paginate__page--active {
  color: var(--gold-deep, #b89668) !important;
  font-weight: 600 !important;
}


/* ════════ Mobile ═════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .pdp-reviews {
    padding: 56px 0 72px;
  }

  .pdp-reviews .container {
    padding: 0 16px;
  }

  .pdp-reviews .pusp-head {
    margin-bottom: 32px;
  }

  .jdgm-rev-widg__summary {
    padding: 22px 18px;
  }

  .jdgm-rev-widg__summary-average {
    font-size: 36px !important;
  }

  .jdgm-write-rev-link,
  .jdgm-btn {
    padding: 11px 18px !important;
    font-size: 11.5px !important;
    width: 100%;
    text-align: center;
  }

  .jdgm-rev {
    padding: 18px 0 !important;
  }

  .jdgm-rev__body {
    font-size: 13.5px !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   FEMMAS THEME · v25 PATCH
   Vorher / Nachher Section — Premium-Grid für echte Salonaufnahmen

   Die alten Slider-Styles (.ba-slider, .ba-handle, .ba-img-before/after,
   .ba-after-wrap, .ba-card-meta) werden nicht mehr genutzt aber bleiben
   im CSS ohne Effekt, weil die Markup-Klassen nicht mehr existieren.

   Konzept: drei großzügige Bilder in einem 3-spaltigen Grid (1-spaltig auf
   Mobile), jedes mit dezenten Vorher/Nachher-Tags in den Ecken,
   feinem Goldrahmen-Akzent und sanftem Hover-Zoom.
   ──────────────────────────────────────────────────────────────────────────── */

.pdp-beforeafter {
  padding: 80px 0 90px;
  background: var(--bg, #faf0e2);
  position: relative;
}

.pdp-beforeafter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: var(--gold-deep, #b89668);
  opacity: 0.4;
}

.pdp-beforeafter .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.ba-head {
  text-align: center;
  margin-bottom: 56px;
}

.ba-head h2 {
  margin: 8px 0 14px;
}

.ba-head h2 em {
  font-style: italic;
  color: var(--gold-deep, #b89668);
}

.ba-sub {
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 14px;
  color: var(--ink-soft, #4a4844);
  letter-spacing: 0.01em;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Grid */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Card — figure-Element ohne Default-Margin */
.ba-card {
  margin: 0;
  padding: 0;
  position: relative;
}

/* Frame: das eigentliche Bild + Tags + Mittenlinie */
.ba-card-frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-3, #fffaef);
  border: 1px solid var(--line-soft, #ebe2cd);
  aspect-ratio: 1 / 1;       /* einheitliches Format — funktioniert für die
                                 vom User gelieferten Salonaufnahmen */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 12px 32px -16px rgba(20, 14, 8, 0.18);
  transition: transform .45s ease, box-shadow .45s ease, border-color .35s ease;
}

.ba-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .9s cubic-bezier(.2,.65,.3,1);
}

.ba-card-frame:hover {
  border-color: rgba(184, 150, 104, 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 24px 48px -20px rgba(20, 14, 8, 0.28);
  transform: translateY(-2px);
}

.ba-card-frame:hover img {
  transform: scale(1.035);
}

/* Tags in den Ecken */
.ba-tag {
  position: absolute;
  top: 14px;
  z-index: 2;
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px -4px rgba(20, 14, 8, 0.35);
}

.ba-tag--before {
  left: 14px;
  background: rgba(20, 14, 8, 0.82);
  color: rgba(255, 255, 255, 0.95);
}

.ba-tag--after {
  right: 14px;
  background: var(--orange, #ed8950);
  color: #fff;
}

/* Feine vertikale Mittenlinie — markiert dezent den Split der Komposition */
.ba-card-divider {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 12%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.7) 88%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}

/* Tablet */
@media (max-width: 1024px) {
  .ba-grid {
    gap: 18px;
  }
  .pdp-beforeafter {
    padding: 64px 0 72px;
  }
  .ba-head {
    margin-bottom: 44px;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .pdp-beforeafter {
    padding: 48px 0 60px;
  }
  .pdp-beforeafter .container {
    padding: 0 16px;
  }
  .ba-head {
    margin-bottom: 32px;
  }
  .ba-sub {
    font-size: 13px;
  }
  .ba-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
  }
  .ba-card-frame {
    aspect-ratio: 1 / 1;
  }
  .ba-tag {
    font-size: 9px;
    padding: 5px 9px;
    top: 11px;
    letter-spacing: 0.14em;
  }
  .ba-tag--before { left: 11px; }
  .ba-tag--after  { right: 11px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ba-card-frame,
  .ba-card-frame img {
    transition: none;
  }
  .ba-card-frame:hover {
    transform: none;
  }
  .ba-card-frame:hover img {
    transform: none;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   FEMMAS THEME · v26 PATCH
   Set-Configurator für Premium Color Complete Set

   Im Set-Produkt kann der Kunde jetzt:
   1) eine Haarfarbe wählen (1 von 170 via Modal-Picker — gleicher Modal wie HCC)
   2) eine Oxycreme-Konzentration wählen (5 Tiles: 1.9 %, 3 %, 6 %, 9 %, 12 %)

   Beide Auswahlen werden als Line-Item-Properties an die Order gehängt:
     properties[Haarfarbe]              → z.B. "6.66 Dunkelblond Rot Intensiv"
     properties[Oxycreme-Konzentration] → z.B. "6 % · 20 Vol."
   ──────────────────────────────────────────────────────────────────────────── */

/* ════════ Container ═══════════════════════════════════════════════════════ */

.set-configurator {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.set-configurator .opt-group {
  margin: 0;
}

/* Step-Label-Stil bereits in v21/v22 definiert — keine neue Definition nötig.
   Lediglich Sicherstellung, dass die Step-Labels im Set-Configurator visuell
   ausgerichtet sind: */
.set-configurator .set-step-label {
  margin-bottom: 12px;
}


/* ════════ Oxycreme-Konzentrations-Tiles ═══════════════════════════════════ */

.oxy-conc-group {
  /* nichts spezifisches — erbt von .opt-group */
}

.oxy-conc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.oxy-conc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 6px 13px;
  border: 1px solid var(--line-soft, #ebe2cd);
  background: var(--bg-3, #fffaef);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
  font-family: var(--sans, 'DM Sans', sans-serif);
}

.oxy-conc-tile:hover {
  border-color: rgba(184, 150, 104, 0.55);
  background: #fff;
  transform: translateY(-1px);
}

.oxy-conc-tile.is-active {
  border-color: var(--gold-deep, #b89668);
  background: #fff;
  box-shadow:
    0 0 0 1px var(--gold-deep, #b89668) inset,
    0 6px 16px -8px rgba(184, 150, 104, 0.45);
}

/* Versteckter Radio-Input — wir zeigen nur die Tile */
.oxy-conc-tile input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.oxy-conc-pct {
  font-family: var(--serif, 'PT Serif', serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink, #1d1d1b);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.oxy-conc-vol {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #4a4844);
}

.oxy-conc-tile.is-active .oxy-conc-pct {
  color: var(--gold-deep, #b89668);
}

/* Hint-Text unter dem Grid */
.oxy-conc-hint {
  margin: 12px 0 0;
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 12px;
  color: var(--ink-soft, #4a4844);
  line-height: 1.5;
  letter-spacing: 0.01em;
}


/* ════════ Mobile ═════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .set-configurator {
    gap: 18px;
  }

  /* 5 Tiles passen knapp auf Mobile — kompakter machen */
  .oxy-conc-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .oxy-conc-tile {
    padding: 11px 3px 10px;
    border-radius: 3px;
  }

  .oxy-conc-pct {
    font-size: 15px;
  }

  .oxy-conc-vol {
    font-size: 8.5px;
    letter-spacing: 0.06em;
  }

  .oxy-conc-hint {
    font-size: 11.5px;
  }
}

/* Sehr kleine Phones — 5 Spalten werden zu eng, daher 3 + 2 */
@media (max-width: 380px) {
  .oxy-conc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .oxy-conc-tile {
    padding: 10px 3px 9px;
  }
  .oxy-conc-pct {
    font-size: 14px;
  }
}