/* =============================================================
   BioBalkan Side Cart – Styles (1:1 aus style.css)
   ============================================================= */

/* -------------------------------------------------------------
   Animations-Tokens (v4.09): zentrale Dauern + Easing, damit sich
   alle Side-Cart-Bewegungen einheitlich und snappy anfühlen.
   Easing = "standard" (schnell startend, sanft endend, KEIN
   Overshoot). Der Badge-Bounce beim +/- bleibt davon bewusst
   unberührt (eigenes Spring-Easing per WAAPI im JS).
   ------------------------------------------------------------- */
:root{
    --sc-ease:cubic-bezier(.4,0,.2,1);
    --sc-dur-fast:.14s;   /* Mikro-Übergänge: opacity, Farben      */
    --sc-dur-base:.16s;   /* Standard: Item kollabieren, Collapse  */
    --sc-dur-panel:.4s;  /* Panel rein                            */
    --sc-dur-panel-out:.4s; /* Panel raus (etwas schneller)       */
    --sc-dur-bar:.28s;    /* Free-Shipping-Fortschrittsbalken      */
    --sc-dur-collapse-fade:.30s; /* v4.10: verlangsamtes Ausblenden beim Entfernen des letzten Items */
}

.bb-cart-totals {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.side-cart.no-animation .side-cart-panel{
    animation:none!important;
    transform:translateX(0)!important;
    opacity:1!important;
}

.side-cart.no-animation .side-cart-overlay{
    opacity:1!important;
}

.open-cart{
    cursor:pointer;
}

.sc-item{
    position:relative;
    transition:opacity .25s ease;
}

.sc-item.sc-loading{
    opacity:.45;
    pointer-events:none;
}

.sc-item.sc-loading::after{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;

    width:36px;
    height:36px;

    border:3px solid rgba(0,0,0,.15);
    border-top-color:var(--color-body);

    border-radius:50%;

    animation:scSpin .7s linear infinite;
}

@keyframes scSpin{

    to{
        transform:rotate(360deg);
    }

}

.side-cart{
	position:fixed;
	inset:0;pointer-events:none;
	z-index:9999;
}
.side-cart.active{
	pointer-events:none;
}

/* v3.76: Background-Scroll-Lock bei geöffnetem Side Cart (vor allem iOS).
   position:fixed friert den Hintergrund zuverlässig ein – verhindert das
   Mitscrollen der Seite und damit das Ein-/Ausblenden der iOS-URL-Leiste,
   das den Scroll-Glitch im Panel auslöste. top wird per JS gesetzt, um die
   aktuelle Scroll-Position zu erhalten. */
body.sc-no-scroll{
	position:fixed;
	left:0;
	right:0;
	width:100%;
	overflow:hidden;
}

/* v4.36: Zusätzliche, vom JS-Timing UNABHÄNGIGE Scroll-Sperre. Der
   JS-Body-Lock (sc-no-scroll) kann durch Fragment-Re-Renders o.ä. verloren
   gehen, während #side-cart.active bestehen bleibt – dann scrollt auf iOS
   der Hintergrund. Diese :has()-Regeln greifen, solange der Cart offen ist
   (iOS Safari 15.4+ unterstützt :has()). touch-action/overscroll-behavior
   unterbinden zusätzlich das Touch-Scrollen und Scroll-Chaining auf iOS.
   v4.38: NUR auf Mobile (<=768px). Auf dem Desktop soll die restliche Seite
   bei offenem Cart weiterhin scrollbar bleiben; dort sorgt allein
   overscroll-behavior:contain am Panel dafür, dass Scrollen INNERHALB des
   Side Carts nicht auf den Hintergrund durchschlägt. */
@media (max-width:768px){
	html:has(#side-cart.active){
		overflow:hidden !important;
		touch-action:none !important;
	}
	body:has(#side-cart.active){
		overflow:hidden !important;
		overscroll-behavior:none !important;
	}
}

/* overlay */

.side-cart-overlay{
position:absolute;
inset:0;
background:linear-gradient(to left, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 70%);
opacity:0;
pointer-events:none;
transition:opacity var(--sc-dur-panel) var(--sc-ease);
}

.side-cart.active .side-cart-overlay{
opacity:1;
}

.side-cart.closing .side-cart-overlay{
opacity:0;
transition:opacity var(--sc-dur-panel-out) var(--sc-ease);
}

/* panel */

.side-cart-panel{
position:absolute;
top:2rem;
right:2rem;
bottom:2rem;
width:440px;
background:#fff;
box-shadow:0 12px 44px -16px rgba(0,0,0,.22);
transform:translateX(110%);
opacity:0;
display:flex;
flex-direction:column;
border-radius:40px;
padding:2rem 1.4rem 1rem 1.4rem;
overflow:hidden;
/* v4.37: Scroll-Chaining für die GESAMTE Cart-Fläche kappen. overscroll-
   behavior am .side-cart-content wirkt nur, wenn die Maus über dem
   scrollenden Inhalt ist – über Header ("Warenkorb") und Footer ("Zur
   Kasse") ging das Scroll-Event sonst an den Hintergrund. Das Panel hat
   overflow:hidden, ist also ein abschließender Scroll-Container. */
overscroll-behavior:contain;
border: 2px solid rgb(255, 240, 100);
pointer-events:auto;
transition:transform var(--sc-dur-panel) var(--sc-ease), opacity var(--sc-dur-panel) var(--sc-ease);
}

.side-cart.active .side-cart-panel{
transform:translateX(0);
opacity:1;
will-change:transform, opacity;
}

.side-cart.closing .side-cart-panel{
transform:translateX(110%);
opacity:0;
transition:transform var(--sc-dur-panel-out) var(--sc-ease), opacity var(--sc-dur-panel-out) var(--sc-ease);
will-change:transform, opacity;
}

@keyframes sc-in{
0%{transform:translateX(110%);opacity:0}
100%{transform:translateX(0);opacity:1}
}

@keyframes sc-out{
0%{transform:translateX(0);opacity:1}
100%{transform:translateX(110%);opacity:0}
}

/* header/footer */

.side-cart-header{
display:flex;
justify-content:space-between;
align-items:center;
padding: 0 .8rem .2rem .8rem;
margin-bottom:6px;
font-size:var(--fs-h3);
line-height:var(--lh-h3);
font-weight: bold;
flex-shrink:0;
}

.side-cart-close{
cursor:pointer;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:41px!important;
height:41px!important;
padding:0!important;
border:1px solid rgba(255,255,255,.7)!important;
border-radius:50%!important;
background:rgba(255,255,255,.18)!important;
-webkit-backdrop-filter:blur(18px) saturate(1.8)!important;
backdrop-filter:blur(18px) saturate(1.8)!important;
box-shadow:0 6px 18px -6px rgba(0,0,0,.22), inset 0 1.5px 1px rgba(255,255,255,.9), inset 0 -2px 4px rgba(255,255,255,.3)!important;
color:var(--color-body)!important;
font-size:1.7rem!important;
line-height:1!important;
transition:background .2s ease!important;
font-weight: normal;
align-self:flex-start!important;
margin-top:-3px!important;
}

.side-cart-close:hover{
background:rgba(255,255,255,.32)!important;
}

/* === GEÄNDERT: side-cart-content ist jetzt der Scroll-Container === */
.side-cart-content{
display:flex;
flex-direction:column;
flex:1;
overflow-y:auto;     /* war: hidden – jetzt scrollt der gesamte Inhalt */
overflow-x:hidden;
min-height:0;
position:relative;
/* v4.35: Safari scrollt bei sehr geringem Overflow (z.B. nur 1 Artikel,
   ~30px Überhang) in Flex-Column-Containern nicht zuverlässig. Diese drei
   Eigenschaften erzwingen Momentum-Scrolling, verhindern Scroll-Chaining-
   Blocking und zwingen WebKit per Composition-Layer zur korrekten
   Neuberechnung der scrollbaren Höhe. */
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;   /* v4.37: beide Achsen (war: nur -y) */
transform:translateZ(0);
}

/* === items-wrap: wächst mit Inhalt, schiebt Summary nach unten === */
.sc-items-wrap{
flex:0 0 auto;
overflow:visible;
min-height:0;
padding-right:2px;
}

.side-cart-footer{
display:flex;
gap:1rem;
padding: .4em;
margin-top: .2em;
border-radius: 40px;
flex-shrink:0;
}

.side-cart-footer .btn-cart,
.side-cart-footer .btn-checkout{
flex:1
}

/* list */

.sc-list{
list-style:none;
margin:0;
padding:0!important
}

.sc-price{
align-self:start;
white-space:nowrap;
font-weight:bold;
font-size:16px;
line-height:1.2; /* v3.83: konform mit Titel */
justify-self:end;
text-align:right;
min-width:0; /* v3.82: verhindert, dass der Preis die Spalte aufbläht */
margin-top:10px; /* v3.83: fester Wert (statt .6em) – fluchtet schriftgrößen-unabhängig mit der 1. Titelzeile */
}

/* Preis-Hochstellung + Pinselstrich-Highlight (nativ, siehe bb_highlight_price_html() im Theme) */
.bb-price-decimals {
  font-size: 0.68em;
  font-weight: 700;
  vertical-align: super;
  position: relative;
  top: 0.16em;
  margin-left: -2px;
}
.bb-price-highlight-wrap {
  position: relative;
  display: inline-block;
  padding: 3px 6px 8px 6px;
  line-height: 1;
  z-index: 0;
  color: #1b1c1c !important;
}
.bb-price-highlight-wrap .woocommerce-Price-amount {
  color: #1b1c1c !important;
}
.bb-price-highlight-wrap .bb-price-decimals {
  color: #1b1c1c !important;
}
.bb-price-highlight-wrap::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -6px;
  top: 0px;
  bottom: 0px;
  background: #E6D200;
  z-index: -2;
  border-radius: 255px 26px 235px 20px / 20px 235px 26px 255px;
  transform: rotate(-2deg);
}
.bb-price-highlight-wrap::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -8px;
  top: -3px;
  bottom: 3px;
  background: var(--color-yellow);
  z-index: -1;
  border-radius: 23px 240px 28px 250px / 240px 28px 250px 23px;
  transform: rotate(1.5deg);
  opacity: 0.9;
}

/* image */

.sc-thumb{
width:70px;
height:70px;
position:relative;
}

.sc-thumb-link{
display:block;
width:100%;
height:100%;
line-height:0;
border-radius:16px;
}

.sc-thumb img{
width:100%!important;
height:100%!important;
object-fit:cover;
border-radius:16px!important; /* v3.82: etwas stärker abgerundet (war 12px) */
display:block;
max-width:none!important
}

/* Mengen-Badge am Bild (ersetzt sichtbare sc-count) – weiß, wie Kasse/Überprüfen */
.sc-qty-badge{
position:absolute;
right:-8px;
bottom:-8px;
min-width:30px;
height:30px;
padding:0 7px;
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
background:#fff;
color:var(--color-body);
font-size:1rem;
font-weight:600;
line-height:1;
border-radius:999px;
box-shadow:0 1px 4px rgba(0,0,0,.18);
/* Pop-Animation bei Mengenänderung via Web Animations API (side-cart.js) –
   startet bei jedem Klick neu, auch bei schnellem Mehrfachklick. */
}

.sc-title{
font-weight:700;
font-size:16px;
line-height:1.2;
hyphens:none;
-webkit-hyphens:none;
overflow-wrap:break-word;
}

.sc-variation{
font-size:calc(0.9rem + 2px); /* v4.27: +2px, gleich groß wie Mengenrabatt-Badge */
line-height: 1.4;
margin-top:.25em; /* v3.83: etwas Abstand zwischen Titel und Variation */
}

.sc-item{
display:grid;
/* v3.82: minmax(0,1fr) lässt die Titel-Spalte schrumpfen und auto gibt dem
   Preis immer genau seinen Platz – verhindert Preis-Überlauf universell
   (iPhone SE, 12 Pro, alle Breiten), ohne Breakpoint. */
grid-template-columns:68px minmax(0,1fr) auto;
gap:.8em;
align-items:start;
margin-bottom: 1.2em;
box-shadow: 0 6px 16px -8px rgba(0,0,0,.22);
margin: .4em.2em;
padding: .6em .8em 8px .6em; /* v4.24: padding-top .6em = padding-left (gleichmäßiger Abstand übers Bild); padding-bottom 8px */
border-radius: 24px;
/* v4.13: Rahmen rund um die Box entfernt (der transparente 2px-Border ließ den
   hellen Hintergrund durchscheinen -> wirkte als weißer Rahmen, v.a. rechts bei
   der Bulk-Box, wo der grüne Verlauf transparent ausläuft). Hover-Gelb jetzt per
   outline (liegt außerhalb des Box-Modells -> kein Layout-Sprung trotz Border 0). */
border:0;
background-clip:padding-box;
/* v4.13: Outline bereits im Grundzustand gelb, aber transparent -> beim Hover
   wird nur die Farbe sichtbar (kein schwarzer Zwischenschritt durch
   Interpolation ab der currentColor-Default-Outline). */
outline:2px solid rgba(255,240,100,0);
outline-offset:-2px;
transition:outline-color .2s ease, box-shadow .2s ease;
}

.sc-item:hover{
outline-color:rgb(255,240,100);
}

.sc-main{
display:flex;
flex-direction:column;
gap:0;
margin-top:10px; /* v3.83: fester Wert (statt .6em) – fluchtet mit Preis */
}

.sc-qty{
display:flex;
align-items:center;
gap:6px;
font-weight:700;
margin-top: .2em; /* v4.23: Abstand über den Mengen-Buttons reduziert (war .4em) */
}

.sc-qty button{
all:unset;
width:30px!important;
height:30px!important;
min-width:30px!important;
min-height:30px!important;
flex:0 0 30px!important;
border-radius:50%!important;
border:1px solid #000!important;
background:transparent!important;
color:#000!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
line-height:1!important;
font-size:1rem!important;
cursor:pointer!important;
box-sizing:border-box!important;
}

.sc-qty button:hover{
background:#000!important;
color:#fff!important;
}

.sc-qty img{
width:16px;
height:16px;
display:block;
}

.sc-count{
min-width:24px;
text-align:center;
display:none; /* Menge wird jetzt als Badge am Bild gezeigt; sc-count bleibt als JS-Zustandsträger versteckt */
}

/* Minus dauerhaft sichtbar; bei Menge 1 ausgegraut + inaktiv */
.sc-qty .sc-minus.sc-disabled{
opacity:.35!important;
pointer-events:none!important;
}

/* states */
.side-cart-content {
    position: relative;
}

.side-cart-content.sc-loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.side-cart-content.sc-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #eee;
    border-top-color: #333;
    border-radius: 50%;
    animation: sc-spin 0.6s linear infinite;
    z-index: 10;
}

@keyframes sc-spin {
    to { transform: rotate(360deg); }
}

/* shipping */

.sc-shipping-bar{
margin:.8em 6px .3em 6px;
flex-shrink:0;
padding:0;
/* v4.17: 4px mehr Platz unter dem "Noch € … für kostenlosen Versand"-Hinweis */
padding-bottom:4px;
}

.sc-bar{
height:.6em;
background:rgba(0,0,0,.10);
border-radius:999px;
overflow:hidden;
}

.sc-bar span{
display:block;
height:100%;
background:#d00;
border-radius:999px;
transition:width var(--sc-dur-bar) var(--sc-ease);
}

.sc-shipping-bar.is-full .sc-bar span{
background:#7ed957;
}

.sc-bar-text{
font-size:.9rem!important;
	margin-top: .2em;
	margin-bottom: .2em;
}
.sc-bar-text .woocommerce-Price-amount {
	font-weight: bold;
}

.sc-shipping-option{
display:flex;
align-items:center;
justify-content:flex-start;
min-height:1.6em;
font-size:var(--fs-p);
font-weight:normal;
}

.sc-shipping-label{
flex:1;
font-size:var(--fs-p);
font-weight:normal;
}

.sc-shipping-price{
margin-left:auto;
min-width:3em;
text-align:right;
display:inline-block;
font-size:var(--fs-p);
font-weight:normal;
}

.sc-diff{
font-size:var(--fs-p);
font-weight:normal;
}

.sc-diff-more{
color:var(--color-body);
}

.sc-diff-less{
color:var(--color-body);
}

.sc-free-shipping{
color:var(--color-green);
font-weight:700; /* v4.27: nur das Wort "Gratis" fett */
}

/* summary === Summary klebt unten am Panel-Rand, scrollt erst bei langer Liste mit === */

.sc-summary{
font-size:var(--fs-p);
line-height:var(--lh-p);
padding: 0 6px;
flex-shrink:0;
margin-top:auto;
}

/* Versand-Loading Spinner im Side Cart */
.sc-summary.sc-loading {
    position: relative;
    pointer-events: none;
}

.sc-summary.sc-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0,0,0,.15);
    border-top-color: var(--color-body);
    border-radius: 50%;
    animation: scSpin .7s linear infinite;
}

.sc-line{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.15rem;
padding:2px 0;
font-size:var(--fs-p);
line-height:var(--lh-p);
font-weight:500;
}

.sc-line span{
font-size:var(--fs-p);
line-height:var(--lh-p);
}

.sc-divider{
height:1px;
background:rgba(0,0,0,.08);
margin:4px 0;
flex-shrink:0;
}

.sc-total{
font-weight:800;
margin-top:.4rem;
font-size: 1.35rem;
line-height: 1.2;
margin-bottom:0;
padding-top:4px;
}

.sc-total span{
font-size:1.35rem;
}

.sc-summary .bb-tax{
font-size:1rem;
line-height:1.4;
opacity:.7;
margin:0 0 -2px 0!important; /* v4.23: MwSt-Zeile näher zum Fortschrittsbalken (war 4px) */
text-align:left;
}

.sc-savings{
font-size:var(--fs-p);
color:var(--color-green);
font-weight: 500;
margin-bottom:.15rem;
}

/* Mengenrabatte: Wert direkt links neben dem Label (nicht rechtsbündig) */
.sc-bulk-savings{
justify-content:flex-start;
gap:10px;
}
/* Wert der Mengenrabatte-Zeile in Klammern, normal gewichtet (Label normal) */
.sc-bulk-savings .sc-savings-amount{
font-weight:400;
}

/* Labels "Zwischensumme" + "Versandgebühren" fett (Wert bleibt normal) */
.sc-subtotal > span:first-child,
.sc-shipping-header > span:first-child{
font-weight:700;
}

/* v4.13: 2px mehr Abstand zwischen "Versand"-Label und der ersten
   Versandmethode (margin-bottom der sc-line war .15rem ≈ 2.4px). */
.sc-shipping-header{
/* v4.28: feste Zeilenhöhe + vertikale Zentrierung beider Spans, damit "Gratis"
   (fett) und ein Versandpreis (normal) exakt gleich hoch aufbauen und die Zeile
   beim Versandmethoden-Wechsel nicht mehr vertikal springt. */
min-height:30px;
align-items:center;
margin-bottom:1px;
}
.sc-shipping-header > span{
line-height:30px;
display:flex;
align-items:center;
}

.sc-account-funds{
font-size:var(--fs-p);
color:var(--color-green);
font-weight:bold;
margin-bottom:.15rem;
}

.sc-bulk-badge{
/* v4.27: Einzeilig "Mengenrabatt aktiv" – Icon + Label vertikal mittig.
   Schriftgröße wie Variation (.sc-variation) + 2px. Abstand zum Titel 3px,
   darunter 2px mehr Luft zu den +/-/Entfernen-Buttons. */
font-size:calc(0.9rem + 2px);
color:var(--color-green);
font-weight:normal;
display:flex;
align-items:center;
gap:5px;
margin-top:3px;
margin-bottom:4.46px;
line-height:1;
}
.sc-bulk-badge .sc-bulk-label{
align-self:center;
line-height:1;
}

.sc-item.sc-has-bulk{
background:linear-gradient(to bottom left, rgb(82 161 92 / .2) 10%, #fff0 25%);
background-clip:padding-box;
}

/* v4.24: Ohne aktiven Mengenrabatt fehlt der Abstand, den sonst das Bulk-Badge
   zwischen Titel und Mengen-Buttons erzeugt. Daher bei Items OHNE .sc-has-bulk
   etwas mehr Abstand über den Buttons + 4px mehr Padding unter den Buttons. */
.sc-item:not(.sc-has-bulk) .sc-main .sc-qty{
margin-top:.55em;
}
.sc-item:not(.sc-has-bulk){
padding-bottom:12px;
}

/* coupon */

.sc-coupons {
    /* v4.29: kompakte Pille direkt unter der Rabattcode-Summenzeile.
       Inline-Flex + auto-Breite, damit die Box den Inhalt eng umschließt.
       margin-top hält etwas Abstand zur Rabattcode-Zeile, der linke
       Einzug richtet die Box bündig zum Wort "Rabattcode" aus (Icon der
       Summenzeile ist 25px breit -> ~46px Einzug zum Textanfang). */
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: 6px 0 8px 46px;
    /* v4.29: die Box steht direkt vor einem .sc-divider; die Regel
       .sc-summary *:has(+ .sc-divider){margin-bottom:0} würde den unteren
       Abstand sonst entfernen, daher hier per !important erzwingen.
       v4.32: Abstand auf 4px reduziert. */
    margin-bottom: 4px !important;
    /* v4.32: dieselbe Regel .sc-summary *:has(+ .sc-divider) setzt nicht nur
       margin-bottom, sondern auch padding-bottom auf 0. Daher das Padding
       komplett per !important erzwingen, damit unten wieder Abstand bleibt. */
    padding: 4px 8px !important;
    border-radius: 60px;
    box-shadow: 0 4px 16px -12px rgba(0,0,0,.4);
    line-height: 1;
    /* Dezenter Wellen-Hintergrund (Guilloché-Anmutung wie bei Schecks),
       dunkelgrüne Linien auf dem grünen Grund.
       v4.45: 3 wellige Linien übereinander (y=4/12/20 im 0 0 40 24 viewBox),
       horizontal gekachelt (repeat-x), vertikal über die volle Boxhöhe
       gespannt (background-size 40px 100%). */
    background-color: #b4e6b4;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2224%22%20viewBox%3D%220%200%2040%2024%22%3E%3Cpath%20d%3D%22M0%204%20Q5%201%2010%204%20T20%204%20T30%204%20T40%204%20M0%2012%20Q5%209%2010%2012%20T20%2012%20T30%2012%20T40%2012%20M0%2020%20Q5%2017%2010%2020%20T20%2020%20T30%2020%20T40%2020%22%20fill%3D%22none%22%20stroke%3D%22rgba(56%2C120%2C66%2C0.26)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: repeat-x;
    background-size: 40px 100%;
    background-position: center;
    flex-shrink: 0;
}

.sc-coupon-item{
display:flex;
justify-content:flex-start;
align-items:center;
width:auto;
/* v4.29: Code-Text nicht mehr fett */
font-size:1rem;
font-weight:normal;
line-height:1;
}

.sc-remove-coupon{
/* v4.29: kein runder Button-Rahmen mehr – nur das Icon, vertikal zentriert.
   Breite exakt auf Icongröße (20px), damit rechts kein Freiraum entsteht. */
background:transparent!important;
border:none!important;
box-shadow:none!important;
cursor:pointer;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:20px!important;
height:20px!important;
min-width:20px!important;
max-width:20px!important;
flex:0 0 20px!important;
padding:0!important;
margin:0 0 0 7px!important;
}

.sc-remove-coupon::before{
width:20px!important;
height:20px!important;
}

/* v4.29: Hover über das Icon färbt die GESAMTE grüne Box rot,
   Code-Text und Icon werden weiß. */
.sc-coupons:has(.sc-remove-coupon:hover){
background-color:var(--color-red)!important;
}

.sc-coupons:has(.sc-remove-coupon:hover) .sc-coupon-code,
.sc-coupons:has(.sc-remove-coupon:hover) .sc-coupon-code small{
color:#fff!important;
}

.sc-coupons:has(.sc-remove-coupon:hover) .sc-remove-coupon::before{
background:#fff!important;
}

.sc-coupon{
display:flex;
/* v4.20: Gap zwischen Eingabefeld und Einlösen-Button halbiert (1rem -> .5rem)
   und Wrapper als Positionsanker für das Rabattcode-Icon im Feld. */
gap:.5rem;
width:100%;
margin: .5em 0;
flex-shrink:0;
position:relative;
}

/* v4.20: Rabattcode-Icon links im Eingabefeld (drehbares ::before, -4°),
   in --color-body. Platzhaltertext ist um die Icon-Breite eingerückt. */
.sc-coupon::before{
content:"";
position:absolute;
left:16px;
top:50%;
width:20px;
height:20px;
transform:translateY(-50%) rotate(-4deg);
background-color:var(--color-body);
-webkit-mask:url("/wp-content/uploads/sale-discount-promotion.svg") no-repeat center / contain;
mask:url("/wp-content/uploads/sale-discount-promotion.svg") no-repeat center / contain;
pointer-events:none;
z-index:2;
}

.sc-coupon input{
flex:1;
min-width:0;
width:100%;
border-radius:40px!important;
/* v4.21: feste Schriftgröße 16px, identisch zum Einlösen-Button.
   Vorher löste var(--fs-button-s) im Input (16px) und Button (18.88px) unterschiedlich auf. */
font-size: 16px!important;
height: 42px!important;
/* v4.20: Platz für das Rabattcode-Icon links */
padding-left:44px!important;
}

/* v4.20: Platzhaltertext "Rabattcode" – v4.21: feste Größe 16px – v4.22: font-weight normal */
.sc-coupon input::placeholder{
font-weight:normal;
font-size:16px;
}
.sc-coupon input::-webkit-input-placeholder{
font-weight:normal;
font-size:16px;
}

#sc-apply-coupon{
flex:0 0 auto;
white-space:nowrap;
border-radius:40px!important;
/* v4.21: feste Schriftgröße 16px, identisch zum Platzhalter.
   !important noetig, da die spaetere Button-Regel font-size:var(--fs-button) setzt. */
font-size: 16px!important;
height: 42px!important;
}

.sc-notices{
opacity:0;
transform:translateY(6px);
transition:opacity var(--sc-dur-base) var(--sc-ease), transform var(--sc-dur-base) var(--sc-ease);
pointer-events:none;
flex-shrink:0;
}

.sc-notices.active{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
    transition:
        opacity var(--sc-dur-bar) var(--sc-ease),
        transform var(--sc-dur-bar) var(--sc-ease);
}

.woocommerce-message[style*="opacity: 0"],
.woocommerce-error[style*="opacity: 0"],
.woocommerce-info[style*="opacity: 0"]{
    transform:translateY(-10px);
}

.sc-notices .woocommerce-message,
.sc-notices .woocommerce-error,
.sc-notices .woocommerce-info,
.sc-notice{
    font-size:0.9rem!important;
    line-height:1.4;
    margin:0;
    padding:.6em 1em!important;
    border:none!important;
    border-radius:8px;
}

.sc-notice-success{
    background:transparent!important;
    color:var(--color-green)!important;
}

.sc-notice-error{
    background:transparent!important;
    color:var(--color-red)!important;
}

.woocommerce-error::before {
	display: none;
}

/* buttons */

.btn-cart,
.btn-checkout,
#sc-apply-coupon{
display:flex;
align-items:center;
justify-content:center;
padding:
    clamp(var(--pad-y-min)*1px, var(--pad-y-fluid), var(--pad-y-max)*1px)
    clamp(var(--pad-x-min)*1px, var(--pad-x-fluid), var(--pad-x-max)*1px) !important;
border-radius:60px;
font-size:var(--fs-button);
line-height:var(--lh-button-s);
border: none;
background:var(--color-body);
color:#fff!important;
cursor:pointer;
white-space:nowrap;
text-decoration:none!important
}

.btn-cart:hover,
.btn-checkout:hover,
#sc-apply-coupon:hover{
background:rgba(43,37,37,.85);
color:#fff!important
}

/* v4.15: Icon vor dem Button-Text, weiß, 28px */
.btn-checkout::before,
.btn-cart::before{
content:"";
display:inline-block;
align-self:center; /* v4.23: Icon immer vertikal zentriert zum Button-Text */
width:28px;
height:28px;
margin-right:8px;
flex-shrink:0;
background-color:#fff;
mask-repeat:no-repeat;
-webkit-mask-repeat:no-repeat;
mask-position:center;
-webkit-mask-position:center;
mask-size:contain;
-webkit-mask-size:contain
}
.btn-checkout::before{
mask-image:url("/wp-content/uploads/hand-credit-card.svg");
-webkit-mask-image:url("/wp-content/uploads/hand-credit-card.svg")
}
.btn-cart::before{
mask-image:url("/wp-content/uploads/shopping-cart.svg");
-webkit-mask-image:url("/wp-content/uploads/shopping-cart.svg")
}

/* v4.23: Auf der Kassen-/Überprüfen-Seite wird aus "Zur Kasse" ein
   "Aktualisieren"-Button (Klasse .btn-checkout--update per JS). Dort statt des
   Kreditkarten-Icons ein Refresh-/Kreispfeil-Icon (26px), vertikal zentriert. */
.btn-checkout--update::before{
mask-image:url("/wp-content/uploads/refresh-rotate.2.svg");
-webkit-mask-image:url("/wp-content/uploads/refresh-rotate.2.svg");
width:26px;
height:26px;
}

.sc-remove img{
display:none
}

.sc-remove{
background:transparent;
border:1px solid var(--color-body);
position:relative
}

.sc-remove::before{
content:"";
width:20px;
height:20px;
display:block;
background:#000;
/* v4.29: neues Entfernen-Icon */
mask:url("/wp-content/uploads/trash-delete-bin-2.svg") no-repeat center;
-webkit-mask:url("/wp-content/uploads/trash-delete-bin-2.svg") no-repeat center;
mask-size:contain;
-webkit-mask-size:contain
}

/* v4.15: Hover-Hintergrund rot (--color-red) statt schwarz, Icon weiß.
   Höhere Spezifität + !important nötig, um .sc-qty button:hover{background:#000!important}
   (gilt für die +/- Buttons) gezielt nur für den Entfernen-Button zu überschreiben. */
.sc-remove:hover,
.sc-qty button.sc-remove:hover{
background:var(--color-red)!important;
border-color:var(--color-red)!important
}

.sc-remove:hover::before{
background:#fff
}

.sc-empty{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:18px;
padding:160px 0;
font-weight: normal; /* v4.00: war bold */
color: rgba(0,0,0,.2);
}

.sc-empty p{
line-height:1.25;
margin:0;
font-size:1.25em; /* v3.74: Mobile-Basis +20% */
}

.sc-empty img{
width:70px; /* v3.74: Mobile-Basis +20% */
height:auto;
opacity:.2;
border-radius:0!important; /* v4.00: eingeschlichenen Radius (globale img-Regel) zurücksetzen */
}

/* v3.74: Desktop -15% gegenüber Mobile (Smartphone bleibt größer) */
@media (min-width:768px){
.sc-empty p{font-size:1.1em;}
.sc-empty img{width:60px;}
}

/* Skeleton */

.sc-skeleton{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.sc-skeleton-item{
    height:72px;
    border-radius:8px;
    background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size:200% 100%;
    animation:sc-shimmer 1.2s infinite;
}

.sc-skeleton-item:nth-child(2){
    height:56px;
    opacity:.7;
}

@keyframes sc-shimmer{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* Safari Autofill Fix */

#sc-rabatt::-webkit-search-cancel-button,
#sc-rabatt::-webkit-search-decoration{
    display:none;
}

/* === GEÄNDERT: Scrollbalken ausblenden – greift jetzt auf side-cart-content === */
.side-cart-content::-webkit-scrollbar{
    display:none;
}
.side-cart-content{
    scrollbar-width:none;
    -ms-overflow-style:none;
}

/* Mobile */

@media (max-width:768px){

    /* Hintergrund gleichmäßig dunkel statt Verlauf */
    .side-cart-overlay{
        background:rgba(0,0,0,.5);
    }

    /* Panel: von unten, 96vh, oben abgerundet */
    .side-cart-panel{
        top:auto;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        height:96vh;       /* Fallback für Browser ohne dvh-Support */
        height:96dvh;      /* v3.75: iOS-Fix – folgt dynamisch dem sichtbaren Viewport
                              (verhindert Scroll-Glitch beim Ein-/Ausblenden der URL-Leiste) */
        border-radius:40px 40px 0 0;
		border-bottom: none;
        padding:1.4rem 1rem .8rem 1rem;
        transform:translateY(110%);
        opacity:1;
        transition:none;
    }

    /* Animation von unten nach oben.
       WICHTIG: hier KEIN transform setzen – die keyframe-Animation steuert
       das transform allein. Ein konkurrierendes transform (erst recht mit
       !important) würde die Animation blockieren und das Panel hart erscheinen
       lassen. transition:none verhindert, dass die Desktop-transition stört. */
    .side-cart.active .side-cart-panel{
        animation:sc-in-mobile var(--sc-dur-panel) var(--sc-ease) forwards;
        opacity:1;
        transition:none;
    }
    .side-cart.closing .side-cart-panel{
        animation:sc-out-mobile var(--sc-dur-panel-out) var(--sc-ease) forwards;
        transition:none;
    }

    @keyframes sc-in-mobile{
        0%{transform:translateY(110%)}
        100%{transform:translateY(0)}
    }
    @keyframes sc-out-mobile{
        0%{transform:translateY(0)}
        100%{transform:translateY(110%)}
    }

    /* Schließen-Button dezent kleiner (X-Zeichen-Größe bleibt) */
    .side-cart-close{
        width:42px!important;
        height:42px!important;
        font-size:1.8rem!important;
    }

    /* Dezenter Schatten oberhalb Summen-Bereich */
    .sc-summary{
        box-shadow:0 -12px 16px -8px rgba(0,0,0,.06);
    }

    /* v3.78/v3.83: Item-Optik nur auf Smartphone –
       Titel & Preis 20px, Spalten-Gap weiter. Der margin-top der
       Titel+Preis-Zeile kommt aus der Basis (10px, v3.83). */
    .sc-title{
        font-size:20px;
    }
    .sc-price{
        font-size:20px;
    }
    .sc-item{
        gap:1.1em;
    }

    /* v4.07: Zwischensumme & Versandgebühren auf Smartphone auf 20px
       angleichen – gleiche Schriftgröße wie Rabattcode/Mengenrabatte. */
    .sc-line,
    .sc-line span{
        font-size:20px;
    }

}

/* ============================================================
   v3.62 – Summary-Feinschliff & Breiten-Angleichung
   ============================================================ */

/* Artikel, Zusammenfassung und Versand-Bar volle Panel-Breite, zentriert.
   Footer (Zur-Kasse-Button) behält ebenfalls die volle Breite. */
.side-cart-content > .sc-items-wrap,
.side-cart-content > .sc-summary,
.side-cart-content > .sc-shipping-bar{
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* Versand-Bar an das innere Padding der Summary (6px) angleichen,
   damit roter Balken + Hinweistext bündig mit den Summary-Zeilen sind. */
.side-cart-content > .sc-shipping-bar{
    padding-left:6px;
    padding-right:6px;
}

/* Rabattzeilen (Rabattcode / Mengenrabatte): einheitliches Styling für
   Desktop UND Mobil. Beide 20px; Labels fett + body color.
   Rabattcode-Wert fett + grün; Mengenrabatte-Wert (Klammer) grün, nicht
   fett, 15% kleiner (~16.7px). */
.sc-summary .sc-savings:not(.sc-bulk-savings),
.sc-summary .sc-savings:not(.sc-bulk-savings) *,
.sc-summary .sc-savings.sc-bulk-savings,
.sc-summary .sc-savings.sc-bulk-savings *,
.sc-summary .sc-account-funds,
.sc-summary .sc-account-funds *{
    font-size:20px;
}
.sc-summary .sc-savings:not(.sc-bulk-savings) > span:first-child,
.sc-summary .sc-savings.sc-bulk-savings > span:first-child,
.sc-summary .sc-account-funds > span:first-child{
    color:var(--color-body);
    font-weight:700;
}
.sc-summary .sc-savings:not(.sc-bulk-savings) > span:last-child,
.sc-summary .sc-account-funds > span:last-child{
    color:var(--color-green);
    font-weight:700;
}
.sc-summary .sc-savings.sc-bulk-savings .sc-savings-amount,
.sc-summary .sc-savings.sc-bulk-savings .sc-savings-amount *{
    color:var(--color-green);
    font-weight:400;
    font-size:16.7px;
}

/* v4.26: Rabatt-Gruppe (Mengenrabatte -> Rabattcode -> Guthaben) einheitlich
   kompakt; gleicher Zeilenabstand zwischen allen drei Zeilen. */
.sc-summary .sc-savings,
.sc-summary .sc-savings *,
.sc-summary .sc-account-funds,
.sc-summary .sc-account-funds *{
    line-height:1.2;
}
.sc-summary .sc-savings,
.sc-summary .sc-account-funds{
    padding-top:0;
    padding-bottom:0;
    margin-top:0;
    margin-bottom:0;
    min-height:0;
}
/* Einheitlicher Abstand zwischen den Rabatt-Zeilen (v4.27: 7px). */
.sc-summary .sc-savings + .sc-savings,
.sc-summary .sc-savings + .sc-account-funds,
.sc-summary .sc-account-funds + .sc-savings{
    margin-top:7px;
}

/* Sind gar keine Rabatte aktiv, stehen die beiden Trennlinien (vormals ober-
   und unterhalb des Rabattblocks) direkt aufeinander und wirken doppelt.
   Zwei direkt benachbarte Divider -> zweiten ausblenden. */
.sc-summary .sc-divider + .sc-divider{
    display:none;
}

/* v4.46: Ausnahme zur Regel oben. Fehlt der Versandblock (z.B. nur Guthaben
   aktiv, keine versandpflichtigen Artikel), folgt der Discount-Trenner direkt
   auf den Zwischensummen-Trenner – die Regel oben blendet ihn dann aus und die
   Linie über "Guthaben" fehlt. Leitet der zweite Trenner aber eine Zeile ein
   (sc-line), ist er gewollt und bleibt sichtbar. */
.sc-summary .sc-divider + .sc-divider:has(+ .sc-line){
    display:block;
}

/* MwSt-Zeile dezenter (heller) */
.sc-summary .bb-tax,
.sc-summary .bb-tax *{
    color:rgb(150,150,150);
}
/* MwSt-Wert in Klammern darstellen: Inkl. 10 % MwSt. (€ 2,09) */
.sc-summary .bb-tax .woocommerce-Price-amount::before{
    content:"(";
}
.sc-summary .bb-tax .woocommerce-Price-amount::after{
    content:")";
}

/* ============================================================
   v3.67 – Frosted-Glass Header & Footer
   Header (oben) und Footer (unten) schweben über dem scrollenden
   Content. Beide haben einen Milchglas-Verlauf, durch den die
   durchscrollenden Artikel weich verschwimmen statt hart unter
   einem weißen Hintergrund zu verschwinden.
   ============================================================ */

/* Panel-Innenabstand oben/unten entfällt – Header/Footer übernehmen den Raum */
.side-cart-panel{
    padding-top:0;
    padding-bottom:0;
}

/* HEADER: schwebt oben, frosted glass, Verlauf nach unten transparent */
.side-cart-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:6;
    margin:0;
    /* padding-left 34px = ursprüngl. 1.4rem + 12px Einrückung des Titels */
    padding:2rem 1.4rem 1rem 34px;
    background:linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}

/* Titel exakt mittig zum X-Button ausrichten (line-height-Versatz ausgleichen) */
.side-cart-header > span{
    line-height:1;
    display:flex;
    align-items:center;
}

/* FOOTER: schwebt unten, gespiegelter Verlauf nach oben transparent */
.side-cart-footer{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:6;
    margin:0;
    padding:.8rem 1.4rem 1rem 1.4rem;
    background:linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-radius:0;
}

/* Content scrollt zwischen Header und Footer durch, mit Platz oben + unten */
.side-cart-content{
    padding-top:5rem;
    /* v4.42: KEIN padding-bottom mehr. Safari/WebKit bezieht das untere
       Padding eines overflow:auto-Containers nicht in die scrollbare Höhe
       ein – dadurch war die Versand-Statusbar (im unteren Freiraum) bei
       knappem Overflow nicht erreichbar. Ein echtes Flex-Kind (::before mit
       order:999 ganz ans Ende) wird hingegen korrekt in scrollHeight
       einberechnet und erzeugt den gleichen unteren Abstand.
       Hinweis: ::after ist bereits durch den Lade-Spinner (.sc-loading::after)
       belegt, daher nutzen wir hier ::before + order. */
    padding-bottom:0;
}
.side-cart-content::before{
    content:"";
    display:block;
    flex:0 0 auto;
    order:999;          /* schiebt den Spacer ans Ende des Flex-Containers */
    width:100%;
    height:4.5rem;
}

/* ============================================================
   v3.71 – Mobile-Overrides NACH dem Frosted-Block
   Müssen hier am Dateiende stehen, da der globale Frosted-Block
   (Header padding 2rem, Footer padding .8rem) sonst die Mobile-
   Werte per Quell-Reihenfolge überschreibt. Hier gewinnen sie.
   ============================================================ */
@media (max-width:768px){
    /* Header kompakter (weniger Platz oben) */
    .side-cart-header{
        padding-top:1.1rem;
        padding-bottom:.8rem;
        font-size:30px;
    }
    /* v3.74: Titel "Warenkorb" auf Smartphone größer (24px → 28px) */
    .side-cart-header > span{
        font-size:28px;
    }
    /* Content-Abstand oben an kompakteren Header anpassen */
    .side-cart-content{
        padding-top:4rem;
    }
    /* Footer-Frosted eine Spur weiter nach oben */
    .side-cart-footer{
        padding-top:1.1rem;
    }
}

/* ============================================================
   v3.81 – Zusammenfassung: einheitliche Einrückung, Trennlinien,
   Rabattcode-Breite, Button-Breite, "X Artikel"-Trennlinie,
   Versand-Feinschliff. Gilt Desktop + Mobile (Gap-Feinheiten
   breakpoint-spezifisch, siehe @media).
   ============================================================ */

/* Summary-Zeilen / Versand-Form / MwSt. links+rechts einrücken,
   Preise fluchten dadurch mit den Artikel-Box-Preisen */
.sc-summary .sc-line{
    padding-left:14px;
    padding-right:14px;
}
.sc-summary .sc-shipping-form{
    padding-left:14px;
    padding-right:14px;
}
.side-cart-content .sc-summary .bb-tax{
    padding-left:14px;
    padding-right:14px;
}

/* Statusbar (Fortschrittsbalken + Hinweistext) bündig einrücken */
.side-cart-content > .sc-shipping-bar{
    padding-left:20px;
    padding-right:20px;
    margin-bottom:4px;
}

/* Trennlinien: eingerückt auf Inhaltsbreite, dezent grau, durchgehend */
.sc-summary .sc-divider{
    height:1px;
    border-top:none;
    background:rgba(0,0,0,.15);
    margin-left:14px;
    margin-right:14px;
    /* v4.27: exakt 8px sichtbarer Abstand ober- und unterhalb jeder Trennlinie.
       Eigenluft der direkt angrenzenden Zeilen wird genullt, damit der sichtbare
       Abstand ausschließlich aus den 8px der Trennlinie kommt. */
    margin-top:8px;
    margin-bottom:8px;
}
.sc-summary .sc-divider + *{ margin-top:0; padding-top:0; }
.sc-summary *:has(+ .sc-divider){ margin-bottom:0; padding-bottom:0; }

/* Rabattcode: Eingabezeile auf Summary-Breite. v4.29: die grüne Box
   (.sc-coupons) bringt ihren eigenen Einzug (46px) mit und wird hier
   nicht mehr per margin überschrieben. */
.side-cart-content .sc-summary .sc-coupon{
    padding-left:0;
    padding-right:0;
    margin-left:14px;
    margin-right:14px;
    width:auto;
    box-sizing:border-box;
}

/* Versandoption: Radio-Checkbox exakt vertikal zentriert
   (Browser-Default margin-top:3px entfernen) */
.sc-shipping-option input[type=radio]{
    margin-top:0;
    margin-bottom:0;
}

/* v4.26: Versandmethoden-Radio sauber selbst definiert, damit das Häkchen
   unabhängig von Theme-Defaults korrekt zentriert sitzt. Radio 20px, dunkler
   Kreis; aktives Häkchen mit ausreichend Luft mittig im Kreis. Abstand
   Radio<->Label: 8px. */
/* v4.27: Versandmethoden-Radio. Inaktiv = seiten-nativer Look (heller, gefüllter
   Kreis ohne Rand, wie auf der restlichen Seite). Aktiv = dunkler Kreis mit weißem
   Häkchen, exakt horizontal+vertikal zentriert. Abstand Radio<->Label: 8px. */
.side-cart-content .sc-shipping-option input[type=radio]{
    -webkit-appearance:none;
    appearance:none;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    flex:0 0 20px !important;
    margin:0 8px 0 0 !important;
    padding:0 !important;
    border:none !important;
    border-radius:50% !important;
    background:rgb(241,241,241) !important;
    position:relative !important;
    box-sizing:border-box !important;
    cursor:pointer !important;
}
.side-cart-content .sc-shipping-option input[type=radio]:checked{
    background:var(--color-body) !important;
}
.side-cart-content .sc-shipping-option input[type=radio]:checked::after{
    content:"" !important;
    position:absolute !important;
    box-sizing:border-box !important;
    width:5px !important;
    height:9px !important;
    top:4.35px !important;
    left:7.15px !important;
    border:solid #fff !important;
    border-width:0 2px 2px 0 !important;
    background:transparent !important;
    transform:rotate(45deg) !important;
}

/* Versand-Gap: Desktop kompakt, Abstand letzte Methode -> Trennlinie */
.sc-shipping-option{
    margin-bottom:0;
    /* v4.27: Desktop-Abstand zwischen Methoden um 3px reduziert. */
    min-height:calc(1.6em - 3px);
    /* v4.26: gesamten Optionsblock (Radio + Label) wie "via GLS" auf der Kasse
       um 32px einrücken (unter dem "Versand"-Wort). */
    padding-left:32px;
    margin-left:0;
}
.sc-shipping-option:last-child{
    margin-bottom:0;
}

/* v4.26: Versandmethoden-Schrift 15% größer (Label + Preis + Differenz),
   einheitlich auf ca. 19.5px (wie abgestimmt). */
.side-cart-content .sc-shipping-option .sc-shipping-label,
.side-cart-content .sc-shipping-option .sc-shipping-price,
.side-cart-content .sc-shipping-option .sc-diff{
    font-size:19.5px !important;
}
.sc-shipping-form{
    padding-bottom:6px;
}

/* "Zur Kasse"-Button exakt so breit wie die Artikel-Box */
.side-cart-footer{
    padding-left:25px;
    padding-right:27px;
}

/* Schatten oberhalb der Summary entfernen (störte zwischen
   "X Artikel" und Rabattcode) */
.sc-summary{
    box-shadow:none;
}

/* Trennlinie mit Artikelanzahl, vom Text unterbrochen:
   –––––– X Artikel –––––– , eingerückt auf Inhaltsbreite */
.sc-count-divider{
    display:flex;
    align-items:center;
    gap:.75em;
    margin:.6em 20px 0 20px;
    font-size:.95rem;
    color:rgba(0,0,0,.45);
    font-weight:500;
    white-space:nowrap;
}
.sc-count-divider::before,
.sc-count-divider::after{
    content:'';
    flex:1;
    /* v4.13: wellige Trennlinie statt geradem 1px-Strich. Kachelbares SVG mit
       Sinuswelle (16px Periode, ~8px hoch), in der bisherigen Linienfarbe. */
    height:8px;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='8'%20viewBox='0%200%2016%208'%3E%3Cpath%20d='M0%204%20Q%204%200%208%204%20T%2016%204'%20fill='none'%20stroke='rgba(0,0,0,0.28)'%20stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center;
}

/* Weiches Ausblenden von Trennlinie, Summen-Block und Free-Shipping-Bar beim
   Entfernen des letzten Artikels. Wird per JS (.sc-collapsing) gesetzt,
   synchron zur Item-Kollaps-Animation (~.18s), und überbrückt visuell die
   Wartezeit bis die AJAX-Antwort den Leer-Zustand rendert.

   REINES opacity-Fade, KEIN transform/translate: Ein translateY würde die
   Elemente während des Fades verschieben; sobald danach container.html() den
   Inhalt ersetzt, springt das Layout auf die Ausgangsposition zurück
   ("rutscht runter und wieder hoch"). Ohne Transform behalten die Elemente
   ihren Platz, bis sie ersetzt werden – das Ausblenden bleibt ruhig.
   pointer-events:none verhindert Klicks auf bereits ausgeblendete Controls.
   .side-cart-footer ist BEWUSST nicht enthalten – der Checkout-Button soll
   sichtbar bleiben. */
.sc-count-divider.sc-collapsing,
.sc-summary.sc-collapsing,
.sc-shipping-bar.sc-collapsing{
    /* v4.10: Beim Entfernen des letzten Items fadet der gesamte untere Block
       (Trennlinie, Summen, Versand-Bar) gleichzeitig und positionsstabil aus.
       Reines opacity-Fade, KEIN height/margin/transform: das letzte Item behält
       seine Höhe (animateRemoveOptimistic mit isLast=true) und fadet nur aus,
       daher ändert sich am Layout während des Fades nichts und nichts rückt nach
       oder „fliegt". Das dezente Nach-oben-Gleiten ist allein der Artikel-Box
       vorbehalten (translateY -4px). */
    opacity:0;
    pointer-events:none;
    /* v4.11 (Safari-Fix): transition-Werte AUSGESCHRIEBEN statt via CSS-Variablen.
       WebKit/Safari verwirft transition-Shorthands, deren Dauer/Easing aus
       var(--...) stammen, teilweise beim Parsen - dann blendet die Trennlinie
       nicht aus, sondern bleibt stehen (in Chrome funktioniert es). Zusaetzlich
       ein eigener Compositing-Layer (translateZ) + will-change, damit Safari das
       opacity-Fade zuverlaessig auf der GPU ausfuehrt. */
    transition:opacity .30s cubic-bezier(.4,0,.2,1);
    -webkit-transition:opacity .30s cubic-bezier(.4,0,.2,1);
    will-change:opacity;
    transform:translateZ(0);
}
/* v4.11 (Safari-Fix): Die eigentlichen Linien sind ::before/::after. Safari
   reicht das Eltern-opacity nicht immer zuverlaessig an die Pseudoelemente
   durch - daher faden wir sie hier explizit selbst mit aus (gleiche
   Dauer/Easing wie das Elternelement). Ersetzt das fruehere transition:none
   (das gegen horizontales Zucken gedacht war); da wir hier nur opacity
   animieren, gibt es ohnehin keinen Reflow der Flex-Linien. */
.sc-count-divider.sc-collapsing::before,
.sc-count-divider.sc-collapsing::after{
    opacity:0;
    transition:opacity .30s cubic-bezier(.4,0,.2,1);
    -webkit-transition:opacity .30s cubic-bezier(.4,0,.2,1);
}
/* v4.11: Empty-State NICHT mehr automatisch einblenden – das lief bei jedem
   Öffnen (auch eines bereits leeren Carts) und verursachte ein Blinken.
   Stattdessen wird nur beim echten Übergang "Produkt entfernt -> Cart leer"
   sanft eingefadet, ausgelöst durch die Klasse .bb-empty-fading, die das JS
   gezielt setzt (siehe refreshCart in side-cart.js). */
.side-cart-content.bb-empty-fading .sc-empty{
    animation:sc-empty-in .45s ease both;
}
@keyframes sc-empty-in{
    from{opacity:0;}
    to{opacity:1;}
}

/* Mobile-spezifische Feinheiten */
@media (max-width:768px){
    /* v4.27: Versandmethoden-Radio auf Smartphone 19px (1px kleiner als Desktop),
       Häkchen exakt horizontal+vertikal zentriert. */
    .side-cart-content .sc-shipping-option input[type=radio]{
        width:19px !important;
        height:19px !important;
        min-width:19px !important;
        min-height:19px !important;
        flex:0 0 19px !important;
    }
    .side-cart-content .sc-shipping-option input[type=radio]:checked::after{
        top:3.85px !important;
        left:6.7px !important;
    }
    /* v4.27: Abstand zwischen Versandmethoden 6px. */
    .sc-shipping-option{
        margin-bottom:6px;
        min-height:1.6em; /* Desktop-Reduktion (-3px) auf Mobile zurücknehmen */
    }
    /* v4.27: Abstand Versand-Header -> 1. Methode auf Smartphone 5px. */
    .sc-summary .sc-shipping-methods,
    .sc-summary .sc-shipping-form{
        margin-top:5px;
    }
    /* Abstand Rabattcode-Zeile zur "X Artikel"-Trennlinie */
    .sc-coupon{
        margin-top:.6em;
    }
}

/* ============================================================
   v3.82 – Desktop: Produkttitel & Preis 4px größer (16 → 20px).
   Mobile bleibt bei 18px (siehe @media max-width:768px oben).
   ============================================================ */
@media (min-width:769px){
    .sc-title{
        font-size:20px;
    }
    .sc-price{
        font-size:20px;
    }
}

/* ============================================================
   v3.99 – Breiten-Fix: Panel & innere Blöcke abgeschnitten rechts.
   Ursache: content-box ließ Padding/Border zur Breite addieren,
   wodurch Panel (Desktop 440px→489px, Mobile 100%→536px) und die
   Versand-/Statusbar (width:97% + horiz. Padding) rechts hinaus-
   ragten und abgeschnitten wurden. border-box rechnet Padding/
   Border in die Breite ein und hält alles sauber im Panel.
   ============================================================ */
.side-cart-panel{
    box-sizing:border-box;
}
.side-cart-content > .sc-shipping-bar,
.side-cart-content > .sc-summary,
.side-cart-content > .sc-items-wrap{
    box-sizing:border-box;
}

/* ============================================================
   v4.05 – Mobile Schriftgrößen-Feinschliff der Zusammenfassung.
   Steht bewusst am Dateiende, damit die Werte per Quell-Reihenfolge
   gegenüber den allgemeinen Regeln gewinnen.
   ============================================================ */
@media (max-width:768px){
    /* Zwischensumme + Versandgebühren (Label + Wert) = Produkttitel (20px) */
    .sc-subtotal,
    .sc-subtotal *,
    .sc-shipping-header,
    .sc-shipping-header *{
        font-size:20px;
    }
    /* Versandgebühren-Wert fett (Betrag = body color, Gratis = grün via .sc-free-shipping) */
    .sc-shipping-header > span:last-child{
        font-weight:700;
    }

    /* Hinweis: Rabattcode + Mengenrabatte (Größe/Gewicht/Farbe) sind generell
       definiert (gelten Desktop + Mobil), siehe Block weiter oben. */

    /* Versandmethoden (GLS/Post inkl. Preis) +2px (~18.6px) */
    .sc-shipping-option,
    .sc-shipping-option *{
        font-size:18.6px;
    }

    /* v4.27: Mengenrabatt-Badge auf Mobile identisch zum Desktop (einzeilig,
       Flex, Schriftgröße wie Variation +2px, Abstände 3px/2px). Keine
       breakpoint-spezifischen Überschreibungen mehr nötig. */
    .sc-item .sc-bulk-badge .sc-bulk-label{
        white-space:nowrap;
    }
    .sc-item .sc-bulk-badge::before{
        align-self:center;
    }
}

/* =============================================================
   v4.09 – Reduced Motion: Nutzer mit "prefers-reduced-motion:
   reduce" bekommen minimale Bewegung. Transitions/Animationen
   werden auf praktisch 0 reduziert, die Endzustände bleiben aber
   erhalten (Panel öffnet/schließt, Items verschwinden – nur ohne
   Bewegung). Das opacity-Fade bleibt sehr kurz erhalten, damit
   Wechsel nicht hart "ploppen". Der Badge-Bounce (WAAPI im JS)
   wird zusätzlich im JS abgefangen.
   ============================================================= */
@media (prefers-reduced-motion: reduce){
    .side-cart-panel,
    .side-cart.active .side-cart-panel,
    .side-cart.closing .side-cart-panel,
    .sc-notices,
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .sc-bar span,
    .sc-count-divider.sc-collapsing,
    .sc-summary.sc-collapsing,
    .sc-shipping-bar.sc-collapsing,
    .sc-item{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }
    /* Transform-basierte Bewegungen ganz unterdrücken, damit nichts
       hinein- oder herausgleitet – nur Deckkraft entscheidet. */
    .side-cart.active .side-cart-panel{ transform:none !important; }
}

/* =========================================================================
   v4.13 – Side-Cart Artikel-Aktionen (Entfernen / Menge)
   ========================================================================= */

/* Komplette Button-Reihe (Entfernen + −/+) inkl. nachfolgender Lücke um 2px
   nach rechts rücken. */
.sc-qty{
    margin-left:2px;
}

/* 8px Abstand zwischen Entfernen- und Minus-Button (alle Geräte), damit man
   beim Tippen auf Minus nicht versehentlich Entfernen trifft. Minus/Plus bleiben eng. */
.sc-qty .sc-remove{
    margin-right:8px;
}

/* =========================================================================
   v4.14 – Side-Cart Feinschliff
   ========================================================================= */

/* Stückzahl-Badge am Produktbild: mehr Abstand zur Box-Unterseite auf
   Smartphone (<=768px). Fester px-Wert statt em-basiert, damit der Abstand
   über alle Smartphone-Breiten konstant bleibt (em schwankte mit der
   responsiven Schriftgröße). */
@media (max-width:768px){
    .sc-item{
        padding-bottom:15px;
    }
}

/* Aktiver Rabattcode (grüne Wellen-Box): Code-Text um 2px nach rechts
   einrücken. v4.29: 15px, normale Stärke, vertikal zentriert. */
.sc-coupon-code{
    display:inline-flex;
    align-items:center;
    padding-left:2px;
    font-size:15px;
    font-weight:normal;
    line-height:1.1;
}
.sc-coupon-code small{
    /* v4.33: .sc-coupon-code ist inline-flex und kollabiert den Whitespace
       zwischen Code und (-15%); daher Abstand explizit per margin setzen. */
    margin-left:.3em;
    font-size:14px;
    font-weight:normal;
}

/* ============================================================
   v4.15: Icons in den Summenzeilen + Mengenrabatt-Badge
   ============================================================ */

/* Icons vor "Rabattcode", "Mengenrabatte" und "Versand" (Summenzeilen),
   einheitlich 25px in --color-body (dunkel). */
.sc-savings:not(.sc-bulk-savings) > span:first-child,
.sc-bulk-savings > span:first-child,
.sc-account-funds > span:first-child,
.sc-shipping-header > span:first-child{
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.sc-savings:not(.sc-bulk-savings) > span:first-child::before,
.sc-bulk-savings > span:first-child::before,
.sc-account-funds > span:first-child::before,
.sc-shipping-header > span:first-child::before{
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    flex-shrink:0;
    background-color:var(--color-body);
    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;
    mask-position:center;
    -webkit-mask-position:center;
    mask-size:contain;
    -webkit-mask-size:contain;
}
.sc-savings:not(.sc-bulk-savings) > span:first-child::before{
    mask-image:url("/wp-content/uploads/sale-discount-promotion.svg");
    -webkit-mask-image:url("/wp-content/uploads/sale-discount-promotion.svg");
}
.sc-bulk-savings > span:first-child::before{
    mask-image:url("/wp-content/uploads/sale-discount-promotion.7.svg");
    -webkit-mask-image:url("/wp-content/uploads/sale-discount-promotion.7.svg");
}
.sc-account-funds > span:first-child::before{
    /* v4.27: Gift-Icon vor "Guthaben" auf 25px (gleich groß wie Rabattcode-Icon) */
    width:25px;
    height:25px;
    mask-image:url("/wp-content/uploads/piggy-bank-coin-5.svg");
    -webkit-mask-image:url("/wp-content/uploads/piggy-bank-coin-5.svg");
}
.sc-shipping-header > span:first-child::before{
    mask-image:url("/wp-content/uploads/delivery-truck-fast.svg");
    -webkit-mask-image:url("/wp-content/uploads/delivery-truck-fast.svg");
}

/* Icon vor dem "Mengenrabatt:"-Badge an der Artikelposition.
   In Textfarbe (Grün) via currentColor, 16px, knapper Abstand,
   Zeile minimal nach unten für etwas Luft zum Titel. */
.sc-bulk-badge::before{
    content:"";
    display:inline-block;
    /* v4.27: Icon vertikal mittig zum Label (Flex statt Grid) */
    align-self:center;
    width:19px;
    height:19px;
    flex-shrink:0;
    background-color:currentColor;
    mask:url("/wp-content/uploads/sale-discount-promotion.7.svg") no-repeat center;
    -webkit-mask:url("/wp-content/uploads/sale-discount-promotion.7.svg") no-repeat center;
    mask-size:contain;
    -webkit-mask-size:contain;
}

/* ============================================================
   v4.50: Shop-Loop Buy-Buttons (Hinzufügen / Optionen / Erinnern)
   ------------------------------------------------------------
   Fix 1: "Hinzufügen" wuchs beim Klick und wurde rechts abgeschnitten.
   Ursache: Theme setzt "transition:all" auf .bb-add-to-cart, wodurch
   auch die (per JS gesperrte) Breite mitanimiert wird; der Label-Text
   wechselt zu "Hinzugefügt" und kann bei schmaleren Breakpoints nicht
   mehr in einer Zeile stehen -> Umbruch/Overflow, der durch das
   erzwungene overflow:hidden (Fill-Animation) rechts abgeschnitten wirkt.
   Fix: Label bleibt einzeilig mit Ellipsis, Transition nur auf
   Farbe/Schatten, Icon-Größe immer fix.

   Fix 2 + 3: "Optionen"/"Erinnern" (variable/ausverkaufte Produkte)
   hatten eine andere Höhe als "Hinzufügen" (echter Rahmen statt
   box-sizing-neutralem inset-Schatten) und keine eigenen Icons.
   Fix: Rahmen als inset box-shadow (addiert nichts zur Box), Höhe
   ergibt sich dadurch automatisch identisch zu "Hinzufügen" – auf
   Desktop UND Mobile, da keine feste px-Höhe verwendet wird.
   ============================================================ */
.bb-btn.bb-add-to-cart{
    transition:background-color .2s ease, color .2s ease, box-shadow .2s ease!important;
    min-width:0;
    /* v4.51: Theme-JS sperrt die Breite beim ersten Klick permanent per
       Inline-Style (el._bbFixedWidth), misst aber nie erneut. Bei jeder
       Änderung der verfügbaren Breite danach (Resize, Zoom, Spalten-
       umbruch) wird der veraltete Wert weiter erzwungen -> Button wirkt
       zu breit/schmal, Inhalt wird durch overflow:hidden rechts
       abgeschnitten. !important gewinnt gegen den (nicht !important)
       Inline-Style und macht den Lock wirkungslos. */
    width:100%!important;
}
.bb-btn.bb-add-to-cart .bb-add-to-cart-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bb-btn.bb-add-to-cart svg{
    flex-shrink:0!important;
    width:18px!important;
    height:18px!important;
}
/* v4.52: Sanftes Ausblenden statt hartem Verschwinden der grünen
   Füllanimation. Das Theme entfernt die Klasse "bb-added" nach 2s
   direkt, wodurch das ::before (Füllung) sofort verschwindet, weil die
   Selektor-Bedingung nicht mehr zutrifft. Diese Klassen werden per JS
   (side-cart.js, MutationObserver) exakt in dem Moment gesetzt und
   überbrücken den Übergang mit einer Opacity-Transition.
   v4.53: gilt jetzt auch für den "In den Warenkorb"-Button auf
   Produktseiten (.single_add_to_cart_button) – identischer Mechanismus,
   auch bei Varianten-Produkten (gleiche Klasse nach Variantenwahl).
   [v4.57: v4.53-Stand auf Wunsch wiederhergestellt] */
.bb-btn.bb-add-to-cart.bb-fade-out,
.single_add_to_cart_button.bb-fade-out{
    position:relative!important;
    overflow:hidden!important;
}
.bb-btn.bb-add-to-cart.bb-fade-out::before,
.single_add_to_cart_button.bb-fade-out::before{
    content:"";
    position:absolute;
    top:0;left:0;bottom:0;
    width:100%;
    background:linear-gradient(135deg, rgb(62,121,69) 0%, rgb(134,189,141) 100%);
    z-index:0;
    border-radius:inherit;
    opacity:1;
    transition:opacity .4s ease;
}
.bb-btn.bb-add-to-cart.bb-fade-out.bb-fade-out-active::before,
.single_add_to_cart_button.bb-fade-out.bb-fade-out-active::before{
    opacity:0;
}
.bb-btn.bb-add-to-cart .bb-add-to-cart-label,
.bb-btn.bb-add-to-cart svg,
.single_add_to_cart_button .elementor-button-content-wrapper{
    position:relative;
    z-index:1;

}
a.bb-btn:not(.bb-add-to-cart){
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:none!important;
    box-shadow:inset 0 0 0 1px rgb(27,28,28);
    box-sizing:border-box;
    width:100%;
    white-space:nowrap;
    /* v4.50: an native "Hinzufügen"-Größe (Desktop) angeglichen */
    font-size:18.88px!important;
}
a.bb-btn:not(.bb-add-to-cart) .bb-btn-cart-icon{
    width:22px!important;
    height:22px!important;
    flex-shrink:0!important;
}
@media (max-width: 767px){
    .bb-btn.bb-add-to-cart .bb-add-to-cart-label,
    a.bb-btn:not(.bb-add-to-cart){
        font-size:.9rem!important;
    }
}

/* ============================================================
   v4.54: Mengen-Auswahl + "In den Warenkorb"-Button auf
   Produktseiten (Smartphone, <=480px)
   ------------------------------------------------------------
   Problem 1: Eine nicht media-gebundene Theme-Regel
   (".quantity input.qty" / ".quantity button", ohne @media,
   46px/52px !important) lädt NACH der eigentlich korrekten
   Mobile-Regel (max-width:480px, 36px/42px !important) und
   gewinnt dadurch die Kaskade rein durch Ladereihenfolge, obwohl
   beide !important sind. In Summe ergaben die drei Felder (min,
   input, plus) 150px Inhalt in einer nur 120px breiten Box ->
   das "+" wurde rechts abgeschnitten/herausgedrückt.
   Fix: eigene Regel mit höherer Spezifität (".quantity.quantity",
   doppelte Klasse zählt zweimal), damit sie unabhängig von der
   Ladereihenfolge gewinnt. Menge-Box zugleich komfortabler breiter
   gemacht (128px statt der ursprünglich vorgesehenen 120px).

   Problem 2: Der "Hinzufügen"-Button hatte dadurch zu wenig
   Restbreite und der Text drohte umzubrechen. Fix: Button erhält
   flex:1 (füllt die verbleibende Breite bis zum rechten Rand der
   gelben Box) plus eine garantierte Mindestbreite (145px), damit
   "Hinzufügen" auf jedem Viewport in diesem Bereich einzeilig
   bleibt.
   ============================================================ */
@media (max-width: 480px){
    body.single-product form.cart .quantity.quantity,
    body.single-product .woocommerce-variation-add-to-cart .quantity.quantity{
        width:128px!important;
        min-width:128px!important;
        max-width:128px!important;
    }
    body.single-product form.cart .quantity.quantity button,
    body.single-product .woocommerce-variation-add-to-cart .quantity.quantity button{
        width:44px!important;
        min-width:44px!important;
        max-width:44px!important;
        flex:0 0 44px!important;
    }
    body.single-product form.cart .quantity.quantity input.qty,
    body.single-product .woocommerce-variation-add-to-cart .quantity.quantity input.qty{
        width:40px!important;
        min-width:40px!important;
        max-width:40px!important;
        flex:0 0 40px!important;
    }
    body.single-product form.cart .single_add_to_cart_button,
    body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button{
        flex:1 1 auto!important;
        width:auto!important;
        min-width:145px!important;
    }
}


/* ============================================================
   v4.58: Gelbe Mengenrabatt-Box ("Ab 6 Stück –10 %") bei
   Variationsprodukten rechtsbündig mit dem Hinzufügen-Button
   ------------------------------------------------------------
   Bisher schloss die absolut positionierte .wdm-discount-Box
   linksbündig mit dem Button ab (left:160px). Jetzt liegt ihre
   rechte Kante auf der rechten Kante des Buttons. Greift über
   .woocommerce-variation-add-to-cart nur bei Variationsprodukten,
   einfache Produkte bleiben unverändert.
   ============================================================ */
.woocommerce-variation-add-to-cart .wdm-discount{
    left:auto;
    right:0;
}

/* ============================================================
   v4.60: done-check-Häkchen im "Hinzugefügt"-Zustand
   ------------------------------------------------------------
   Im bb-added-Zustand (Theme setzt die Klasse für 2s nach
   erfolgreichem Add-to-Cart) wird das Warenkorb-Icon durch das
   done-check-Häkchen ersetzt (weiß, per CSS-Mask). Das SVG ist
   als Data-URI eingebettet – kein zusätzlicher Request und
   keine CORS-Probleme mit mask-image auf biobalkan.ch.

   Buy-Box (.single_add_to_cart_button): Der Icon-Font-Glyph
   (icon-bb-shopping-cart) wird per color:transparent unsichtbar
   gemacht, die <i>-Box behält ihre Größe (kein Layout-Sprung)
   und dient als Mask-Fläche. Mask-Größe calc(78% + 2px) der
   Icon-Box (Desktop 28px, Mobil 20px). Mobil zusätzlich 1px
   nach oben: Icon-Font-Glyphs sitzen auf der Schrift-Baseline,
   die Mask zentriert dagegen in der Box – ohne Ausgleich wirkt
   das Häkchen gegenüber der Versalien-Mittellinie des Texts
   zu tief.

   Loop-/Carousel-Button (.bb-btn.bb-add-to-cart): Der Inhalt
   des Inline-SVGs wird ausgeblendet, die SVG-Box (18px) dient
   als Mask-Fläche in voller Größe (contain) – die Box ist dort
   deutlich kleiner, daher keine Reduktion.
   ============================================================ */
.single_add_to_cart_button.bb-added .elementor-button-icon i,
.bb-btn.bb-add-to-cart.bb-added svg{
    background-color:#fff;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.46967,5.96966994 C19.7625632,5.67677672 20.237437,5.67677672 20.5303302,5.96966994 C20.7965967,6.2359365 20.8208028,6.65260019 20.6029483,6.94621168 L20.5303302,7.03033012 L9.53033013,18.0303302 C9.26406356,18.2965967 8.84739988,18.3208028 8.55378838,18.1029483 L8.46966995,18.0303302 L3.46966993,13.0303301 C3.17677671,12.7374369 3.17677671,12.2625632 3.46966993,11.96967 C3.73593649,11.7034034 4.15260018,11.6791973 4.44621167,11.8970518 L4.5303301,11.96967 L9.00000004,16.4390001 L19.46967,5.96966994 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.46967,5.96966994 C19.7625632,5.67677672 20.237437,5.67677672 20.5303302,5.96966994 C20.7965967,6.2359365 20.8208028,6.65260019 20.6029483,6.94621168 L20.5303302,7.03033012 L9.53033013,18.0303302 C9.26406356,18.2965967 8.84739988,18.3208028 8.55378838,18.1029483 L8.46966995,18.0303302 L3.46966993,13.0303301 C3.17677671,12.7374369 3.17677671,12.2625632 3.46966993,11.96967 C3.73593649,11.7034034 4.15260018,11.6791973 4.44621167,11.8970518 L4.5303301,11.96967 L9.00000004,16.4390001 L19.46967,5.96966994 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
}
.single_add_to_cart_button.bb-added .elementor-button-icon i{
    color:transparent!important;
    -webkit-mask-size:calc(78% + 2px);
    mask-size:calc(78% + 2px);
}
@media (max-width:767px){
    .single_add_to_cart_button.bb-added .elementor-button-icon i{
        transform:translateY(-1px);
    }
}
.bb-btn.bb-add-to-cart.bb-added svg{
    -webkit-mask-size:contain;
    mask-size:contain;
}
.bb-btn.bb-add-to-cart.bb-added svg *{
    display:none;
}

/* ============================================================
   v4.60: Loop-/Carousel-Buttons immer in normalem Schriftgewicht
   ("Hinzufügen" und "Optionen"), auf allen Breakpoints und in
   allen Zuständen.
   ============================================================ */
.bb-btn.bb-add-to-cart,
.bb-btn.bb-add-to-cart .bb-add-to-cart-label,
a.bb-btn:not(.bb-add-to-cart){
    font-weight:400!important;
}