/** Shopify CDN: Minification failed

Line 1299:18 Unexpected "{"
Line 1299:27 Expected ":"
Line 1306:20 Unexpected "{"
Line 1306:29 Expected ":"
Line 1315:20 Unexpected "{"
Line 1315:29 Expected ":"
Line 2315:1 Expected "}" to go with "{"

**/
/*============================================================================================================================
Culumn Plus Reloaded - ungeprüft
============================================================================================================================*/

.flex-grid{ display:flex; flex:1 1 100%; }
.flex-grid__item{ flex:0 1 100%; display:flex; align-items:stretch; }
.flex-grid-as-column{ flex-direction:column; }

/* Spezialfall: Video-Block in 50%-Spalte mittig ausrichten */
.flex-grid__item--50.columns-plus--video_block{ align-content:center; }

/* Desktop-Breite: optionale Prozent-Breiten */
@media screen and (min-width:769px){
  .flex-grid{ display:flex; flex:1 1 100%; }
  .flex-grid__item--25{ flex-basis:25%; width:25%; }
  .flex-grid__item--33{ flex-basis:33%; width:33%; }
  .flex-grid__item--50{ flex-basis:50%; width:50%; }
  .flex-grid__item--67{ flex-basis:67%; width:67%; }
  .flex-grid__item--75{ flex-basis:75%; width:75%; }
  .flex-grid__item--100{ flex-basis:100%; width:100%; }
}

/* Mobile-Reihenfolgen (falls gebraucht) */
@media only screen and (max-width:768px){
  .flex-direction-mobile-column{ flex-direction:column; }
  .flex-direction-mobile-column-reverse{ flex-direction:column-reverse; }
  .flex-direction-mobile-row{ flex-direction:row; }
  .flex-direction-mobile-row-reverse{ flex-direction:row-reverse; }
}

/* Diese Order-One und Order-Two sind obsolet, da ich es jetzt über
column und column-reverse gelöst habe. Falls es aber mal irgendwann
drei Spalten werden sollten, und die Reihenfolge beeinflussbar sein
soll, dann müsste man darauf zurück bauen. */

.flex-grid__item-mobile-order-one {
    order: 1;
  }
  
.flex-grid__item-mobile-order-second {
    order: 2;
}

.image-text-container {
  position: relative;
}

/* -----------------------------------------------------------------------
 START Custom Width for Column-Plus-Reload  
This is a custom width variant to solve the background-color
padding problem for the column-plus-reload section [MATE-172] -----------*/

.page-width--for-column-plus {
  max-width: 1220px;
}
    
.page-width--no-left-and-right-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
    
/* The padding should be the same as for ".page-full, .page-width" see beneath  */
@media only screen and (min-width:769px) {
  .page-width--for-column-plus {
  padding: 0 17px
  }
}

/* ============================================================================
START Image Tag for Column-Plus-Reload  Reference: MATE-183
=============================================================================*/

/* Nur in Column-Plus-Reloaded anwenden (nicht global auf alle .media) */
[class^="columns-plus-reloaded-"] .media > img{
  display:block;
  width:100%;
  height:100%;
}

/* Only Desktop and above 768px !*/
@media only screen and (min-width:769px) {
  /* nothing so far... */
}

/* ### END Image Tag for Column-Plus-Reload
   ################################################################## 
*/



@media only screen and (max-width:768px){

  /* Mobile Menu nicht komplett füllend, ggf. testen*/
  /*
  .menu-drawer {
    width: 90%;
  }
  */

.h5,.h6,h5,h6{
    margin-bottom:5px
}
  }

.subheading{
  /* text-transform:uppercase; */
  letter-spacing:0.3em;
}

.btn {
  padding: 9px 17px;
}

@media only screen and (max-width: 768px){
.btn {
    padding: 9px 17px;
    font-size: calc(var(--typeBaseSize) - 5px);
    font-size: max(calc(var(--typeBaseSize) - 5px), 11px);
}

.rte {
  padding-bottom: 10px !important;
}
}


/*===============================================================================================================
Inhaltsverzeichnis - Blog header - Section = TOC
================================================================================================================*/

/*---......-Übergeordnet für beide Blöcke---......---*/


/* kleine Korrektur aus dem alten Block, wird in Intro/Columns genutzt */
  .image-with-text .grid__item{ padding-left:1.5rem !important; 
}

/*----Texbereich / Text-Block------*/

.toc-block {
  padding: 10px 15px;
}

/* Article-Intro-Column: oberes Padding am Text-Block entfernen (nur Desktop) */
@media (min-width: 990px){
  .text-block.article-intro-and-toc--container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Article-Intro-Column: H1/Hero-Überschrift ohne oberen Rand (alle Breakpoints) */
.text-block.article-intro-and-toc--container h1,
.text-block.article-intro-and-toc--container .h1,
.text-block.article-intro-and-toc--container .article-template__title,
.text-block.article-intro-and-toc--container .article-title {
  margin-top: 0 !important;
  margin-bottom: 0.35rem;  /* enger zur Autorzeile */
}

/*--------Inhaltsverzeichnis Box------------*/

.toc-block ul {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;                 /* NEU: ul bekommt kein top/bottom margin mehr */
}

.toc-block ul li {
  display: flex;
  align-items: center;        /* klein: align-content -> align-items */
  justify-content: space-between;
  margin-bottom: 5px;
}
.toc-block ul li:last-child {
  margin-bottom: 0;           /* NEU: unten kein extra Abstand beim letzten Punkt */
}

/*Abstand unter dem Wort "Inhaltsverzeichnis" */
.toc-block .h3{
  font-size: 2.4rem;
  display: block;             /* NEU: damit margin wirkt (span -> block) */
  margin: 0 0 .75rem;         /* NEU: definierter Abstand zur Liste */
}

/* ToC-Links: schwarz in allen Zuständen */
.toc-block a,
.toc-block a:link,
.toc-block a:visited {
  color: #000 !important;
  text-decoration: none;
}

.toc-block a:hover,
.toc-block a:focus,
.toc-block a:active {
  color: #000 !important;
  text-decoration: underline; /* wenn du keine Unterstreichung willst: Zeile löschen */
}

/* Blog Bereich */
@media screen and (min-width: 769px){
  .toc-block {
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 20px;
  }
}

@media screen and (min-width: 750px){
:is(.account,.order) {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}
}


/*===============================================================================================================
seal supscription app
================================================================================================================*/
#seal-purchase-options-label {
  visibility: hidden !important;
  display: none !important;
}

.sealsubs-container {
  margin-bottom: 0em !important;
}

  .sls-more-info-text {
    padding-bottom: 0px !important;
}


/*===============================================================================================================
B2B Einstellungen - Wholesalle
================================================================================================================*/

.samitaWS-account{
  display: none !important;
  visibility: hidden !important;
}

/*=========================================================================================================================
  Datenschutzseite = keine section = weil Infahlt von shopify genommen
==========================================================================================================================*/

/* Datenschutz Seite - auf page width gesetzt ------*/
.section-template--18551264575756__main-padding {
  word-wrap: break-word;
}


/*=========================================================================================================================
   Newsletter – bereinigt
=========================================================================================================================*/

#shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter__wrapper{
  padding-inline: 1.5rem !important;
}

/* Desktop: zentriert */
@media (min-width: 750px){
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter__heading,
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter__text{
    text-align: center;
  }
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter-form{
    justify-content: center;
    align-items: center;
  }
}

/* Mobile: linksbündig (überschreibt .center & Co.) */
@media (max-width: 749px){
  /* überschreibt evtl. vorhandene .center-Zentrierung */
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .center{
    text-align: left !important;
  }

  /* Headline, Fließtext, Subheading & RTE links ausrichten */
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter__heading,
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter__text,
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter__subheading,
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .rte{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Formular links anflanschen */
  #shopify-section-sections--18393323176204__1308a1aa-f3a1-492a-b3a1-48bc6d146c95 .newsletter-form{
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
}


/* ==============================================================================================================================
BLOG – Willkommen im Mateblog (aufgeräumt)
================================================================================================================================*/

/* -------------------- Tag-Navigation (Kacheln oben) -------------------- */
.blog-tags-nav { margin: 1rem 0 1.5rem; }
.blog-tags-nav__list { 
  display: flex; flex-wrap: wrap; gap: .75rem; 
  list-style: none; margin: 0; padding: 0; 
}

.blog-tags-nav__list li { margin: 0; }
.blog-tags-nav__link{
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 1rem; border: 2px solid #7d876c; border-radius: 0;
  font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none;
  color: #7d876c; background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}

.blog-tags-nav__link:hover { background: rgba(125,135,108,0.12); }
.blog-tags-nav__link.is-active {
  background: #7d876c; color: #fff; font-weight: 700; border-color: #7d876c;
}

/* -------------------- Tag-Chips in der Artikelansicht (unter Titel/Teaser) -------------------- */
.article-template .article-tags,
.article-template .article-tags ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.article-template .article-tags li { margin: 0; }
.article-template .article-tags a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: .25rem .6rem; border: 2px solid #7d876c; border-radius: 0;
  font-size: 16px; font-weight: 600; color: #7d876c;
  text-decoration: none; background: transparent; line-height: 1.2;
  transition: background .2s, color .2s;
}

.article-template .article-tags a:hover { background: rgba(125,135,108,0.12); }

/* -------------------- Tag-Chips auf Blog-Kacheln (Listenansicht) -------------------- */
.section .blog-articles .blog_tag,
.section .blog-articles .blog_tag ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
}

.section .blog-articles .blog_tag li { margin: 0 !important; }
.section .blog-articles .blog_tag a {
  display: inline-flex !important; align-items: center; justify-content: center;
  height: 28px; padding: 0 10px !important; border: 1px solid #7d876c !important; border-radius: 0 !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.1 !important;
  color: #7d876c !important; background: transparent !important; text-decoration: none !important; white-space: nowrap;
}

/* -------------------- Abstand Tags ↔ Titel auf Kacheln -------------------- */
.blog-articles .article-card .blog_tag { margin-bottom: 10px !important; }
.blog-articles .article-card h3.card__heading {
  margin-top: 0 !important; margin-bottom: 12px !important;
}

@media (max-width: 749px) {
  .blog-articles .article-card .blog_tag { margin-bottom: 10px !important; }
  .blog-articles .article-card h3.card__heading { margin-top: 0 !important; }
}

/* -------------------- Kachel-Typografie / Teaser -------------------- */
.blog-articles .article-card .card__heading,
.blog__posts   .article-card .card__heading { line-height: 1.28; }

/* Titelgröße + linksbündig (beibehalten) */
.article-card .card__heading { font-size: 2.2rem !important; text-align: left; }

/* Teaser max. 4 Zeilen + linksbündig */
.article-card__excerpt,
.article-card__excerpt.rte-width {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.article-card__excerpt { text-align: left; }

/* Footer in Karten linksbündig */
.article-card__footer { letter-spacing: 0 !important; text-align: left; }

/* -------------------- Allgemeine Abstände im Listing -------------------- */
.blog-articles { padding-bottom: 25px; }

/* -------------------- „Alle Beiträge“-Seite – kleiner kosmetischer Lift -------------------- */
#shopify-section-template--18393323733260__main { background-color: #E8E8E1; }
.section-template--18393323733260__main-padding { margin-top: -25px; }
#shopify-section-template--18393323733260__main h1 { padding-top: 25px; text-align: center; }

/* -------------------- Headerbild in Blog-Übersicht -------------------- */
.collection-hero img { height: 420px; }

/* -------------------- Button-Stil (ehem. .blog_btn) – wiederverwendet -------------------- */
.blog_btn {
  line-height: 1.42; text-decoration: none; text-align: center; white-space: normal;
  font-size: max(calc(var(--typeBaseSize) - 4px), 13px); font-weight: 700; letter-spacing: .3em;
  display: inline-block; padding: 11px 20px; margin: 0; min-width: 90px; cursor: pointer; border: 1px solid transparent;
  -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none;
  border-radius: var(--buttonRadius); color: var(--colorBtnPrimaryText); background: var(--colorBtnPrimary);
}

/* -------------------- Innenabstände in Karten konsistent -------------------- */
.card__information { padding-bottom: 1rem !important; padding-top: 1rem !important; }
.card--standard > .card__content .card__information { padding-left: 10px !important; padding-right: 10px !important; }

/* -------------------- Produkt-Kachel – Farbpunkte (nicht Blog) -------------------- */
.product_tile_color_holder {
  display: flex; justify-content: center; gap: 6px; margin-top: .4rem; flex-wrap: wrap;
}
.product_tile_color_swatch {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); display: inline-block;
}

/* -------------------- Abstand Karte zwischen Author - Punkte - und Datum -------------------- */
.circle-divider:after { margin: 0 0.5rem 0 0.5rem !important; }

/* -------------------- Blogkarten: Autor + Datum immer am Kartenende fixieren -------------------- */
.blog-articles .article-card,
.blog-articles .article-card .card { height: 100%; }
.blog-articles .article-card .card__content {
  display: flex; flex-direction: column; height: 100%;
}
.blog-articles .article-card .card__information { flex: 1 1 auto; }
.blog-articles .article-card .card__footer {
  margin-top: auto; padding-top: .5rem;
}

/* -------------------- Hintergrundfarbe Blogkarten -------------------- */
.card--standard > .card__content { background-color: #fff; }


/* =================================================================================================              
Autorenbox - section (Blogartikel)
================================================================================================== */

/* Standard (Desktop): Bild links, Text rechts – so wie jetzt */
.author-box {
  display: flex;
  align-items: center;
}

/* Mobilansicht: Bild über Text */
@media (max-width: 768px) {
  .author-box {
    flex-direction: column;      /* stapelt Bild über Text */
    align-items: center;         /* zentriert Bild + Text */
    text-align: center;          /* zentriert auch den Text */
  }

  .author-photo {
    margin-right: 0;             /* kein rechter Abstand */
    margin-bottom: 1rem;         /* stattdessen unten etwas Platz */
  }

  .author-info {
    display: block;
  }
}

/* === Autorenbox Feinschliff === */
.author-name-preheadline {
  font-size: 1.25rem;      /* kleiner als der Name */
  font-weight: 400;       /* dezenter */
  margin-bottom: 0.2rem;  /* enger zum Namen */
  line-height: 1.2;       /* normaler Zeilenabstand */
  color: #333333;
}

.author-name {
  font-weight: 600;       /* hervorheben */
  font-size: 2rem;
  margin: 0;
  line-height: 1.3;
}
/* Nur Fließtext in der Autorenbox auf schwarz setzen */
.author-box .author-description {
  color: #000; /* Standard-Schwarz für bessere Lesbarkeit */
}


/* =================================================================================================              
Ähnliche Blogartikel - Section (Blogartikel)
================================================================================================== */

/* ---------Überschrift in Karten – angenehme Zeilenhöhe--------- */
.blog-articles .article-card .card__heading,
.blog__posts .article-card .card__heading {
  line-height: 1.28;
}

/*------ Auszug/Teaser auf max. 4 Zeilen------------ */
.article-card__excerpt,
.article-card__excerpt.rte-width {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/*---------- Blogkarten: Titel max. 3 Zeilen (auf dem Link!) ------------------*/
.blog-articles .article-card .card__heading > a.full-unstyled-link {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.28;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* max. 3 Zeilen */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------Tags – Blogkarten & Ähnliche Blogartikel ------------*/

.blog-articles .article-card .blog_tag a,
.blog__posts   .article-card .blog_tag a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #7d876c !important;  /* Rahmen sichtbar */
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  color: #7d876c;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Abstand Tags ↔ Titel ------------------------------ */
.blog__posts .article-card .blog_tag {
  margin-bottom: 8px; /* etwas Platz zwischen Tag und Überschrift */
}

/*------------ Author + Kommentare + Datum immer unten anhängen-------------*/
.blog__posts .article-card .card__information {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*--------Den noch bearbeiten = fügt mehrere Buttons ein -------------*/  
.blog__view-all{
  display: none;
}


/* =============================================================================================================================================
Bild-Banner Typografie & Abstände (schlank, bereinigt)
============================================================================================================================================== */

/* Überschrift & Text kompakter */
.banner .banner__heading.inline-richtext {
  line-height: 1.08 !important;  /* enger als Dawn-Default */
  margin: 0 !important;
}
.banner .banner__text.rte {
  line-height: 1.22 !important;  /* moderner Absatzabstand */
  margin: 0 !important;
}

/* Abstand zwischen aufeinanderfolgenden Blöcken im Banner (z. B. Titel → Text → Buttons) */
.banner .banner__box > * + * {
  margin-top: 0.28em !important;  /* ca. halb so groß wie Dawn */
}

/* Mobile leicht luftiger, aber weiterhin kompakt */
@media (max-width: 749px) {
  .banner .banner__heading.inline-richtext { line-height: 1.12 !important; }
  .banner .banner__text.rte               { line-height: 1.24 !important; }
  .banner .banner__box > * + *            { margin-top: 0.32em !important; }
}

/* Optional: Designer-Variablen (werden nur wirksam, wenn gesetzt) */
.banner [data-block-heading] {
  font-size: var(--heading-fs, inherit);
  font-weight: var(--heading-fw, inherit);
  color: var(--heading-color, inherit);
}
.banner [data-block-text] {
  font-size: var(--text-fs, inherit);
  font-weight: var(--text-fw, inherit);
  color: var(--text-color, inherit);
}


/* ===============================================================================================================================================   
Produktinformation - Produkteinzelansicht
=============================================================================================================================================== */

/* ======================================================================
Übergeordnete Einstellung- Produkteinzelansicht
========================================================================*/

/*--------Wichtig! page gutter mobil--------------*/
  .product__info-wrapper{
  padding-left: 16px !important;
  padding-right: 16px !important;
}


/* ----das würde ich gerne entfernen-------- volle Textfarbe/Deckkraft Produktinformation----------- */
.product__info-wrapper,
.product__info-container {
  color: rgb(var(--color-foreground)) !important; /* volle Deckkraft */
}



/* ======================================================================
Bilder (Produktbilder)- Produkteinzelansicht
========================================================================*/

/* -----Produktbilder - Thumnails --------------*/

/* Thumnails werden eingepasst, statt beschnitten */
.template-product .thumbnail img { object-fit: contain; }


/* Mobile: Nur die PFEILE des Thumbnail-Sliders ausblenden (Thumbnails bleiben Slider) */
@media screen and (max-width: 749px) {
  /* Pfeil-Container und Buttons, wenn sie IM Thumbnail-Slider liegen */
  media-gallery .thumbnail-slider .slider-buttons,
  media-gallery .thumbnail-slider .slider-button { display: none !important; }
}

/* RTE-Bilder absichern: Platz reservieren */
.rte img[width][height] {
  height: auto;
  aspect-ratio: attr(width number) / attr(height number);
}


/* ================================================================================
Titel & Preis (inkl. Grundpreis/MwSt.) - Produkteinzelansicht
================================================================================ */

/* --prüfen was das genau ist-----Sold out Badge */
#caamate_tee_grundpreis .price .price__badge-sold-out{
  margin-top: -50px;
}


/* ================================================================================
Produkteinzelansicht - Mengezähler & Kaufen-Bereich (Produktformular + CTA)
================================================================================ */

/* -----------Mengenzähler-------------------------------- */

/* Wichtig! Menge über Warenkorb ausblenden */
.quantity__rules-cart {
  visibility: hidden;
  display: none;
}


/* ================================================================================
Payment Icons – nur im warenkorb Drawer = noch optimieren
================================================================================ */

/* -- Payment Icons – Warenkorb-Drawer (gleiche Logik wie Produktseite) --- */

/* Basis im Drawer erzwingen */
.cart-drawer .list-payment,
.drawer .list-payment,
.drawer__inner .list-payment{
  display: flex !important;
  align-items: center;
  gap: .5rem;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Logos im Drawer konsistent skalieren */
.cart-drawer .list-payment img,
.cart-drawer .list-payment svg,
.drawer__inner .list-payment img,
.drawer__inner .list-payment svg{
  height: 24px;
  max-height: 24px;
  width: auto;
  display: block;
}

/* Mobil/Tablet: eine Zeile, horizontal scrollbar, linksbündig */
@media (max-width: 989px){
  .cart-drawer .list-payment,
  .drawer__inner .list-payment{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
  }
}

/* Desktop: über die Drawer-Breite verteilen */
@media (min-width: 990px){
  .cart-drawer .list-payment,
  .drawer__inner .list-payment{
    flex-wrap: nowrap !important;
    overflow: visible !important;
    justify-content: space-between !important;
  }
}


/* ================================================================================
Produkt-Accordion (Beschreibung/Details) - Produkteinzelansicht
================================================================================ */

/* PDP: Produkt-Accordion (Beschreibung/Details) */
.template-product .product__accordion {
  margin-top: 2rem;
  border-left: 1px solid rgba(var(--color-foreground), .15);
  border-right: 1px solid rgba(var(--color-foreground), .15);
  /* kein border-bottom hier – kommt von den Items */
}

.template-product .product__accordion details {
  border-bottom: 1px solid rgba(var(--color-foreground), .15);
  margin: 0;               /* entkoppelt von globalen Margins */
}

.template-product .product__accordion details:last-of-type {
  border-bottom: 0;        /* keine Doppelkante am Ende */
}

.template-product .product__accordion summary {
  line-height: 1.2;        /* 1 ist oft zu eng */
  padding-left: 10px;      /* nur die Headline einrücken */
}


/* ================================================================================
Color SWATCHES und Gewichtsrechtecke 
================================================================================ */

/* A) Dawn-Pseudo-Elemente an Labels komplett deaktivieren */
.product-form__input label::before,
.product-form__input label::after {
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* B) Roh-Radios vollständig verstecken (verhindert das kleine Quadrat) */
.product-form__input input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/*  --C) FARBSWATCHES (runder Dot + aktiver Doppelring) -------- */

/* Basis-Farbdot */
.swatch-color-ball {
  display: inline-block !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.20) !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}

/* Label mit Farbdot: nur runder Container, keine Pill-Optik */
.product-form__input label:has(.swatch-color-ball) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  margin: 2px 6px 2px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Aktiv – sauberer Doppelring am tatsächlich gewählten Dot
   (funktioniert für input+label UND label>input) */
.product-form__input input[type="radio"]:checked + label .swatch-color-ball,
.product-form__input label:has(> input[type="radio"]:checked) .swatch-color-ball {
  border-color: transparent !important;        /* kein extra Rand – nur Doppelring */
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,.45) !important;
}

/* ----- D) TEXT-PILLS (Gewicht/Größe - Quadrate) ------------------------------*/

/* Basis-Optik: eckige Kästen mit sichtbarem Rand, kein Umbrechen */
.product-form__input input[type="radio"] + label:not(:has(.swatch-color-ball)):not(:empty),
.product-form__input label:has(> input[type="radio"]):not(:has(.swatch-color-ball)):not(:empty) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 14px !important;
  line-height: 1 !important;
  font-size: 1.6rem !important;
  white-space: nowrap !important;               /* verhindert 2-zeiliges „100 g“ */
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: 0 !important;                  /* eckig */
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  margin: 2px 6px 2px 0 !important;
}

/* Farben der aktiven Pill über Variablen steuerbar */
:root {
  --pill-active-bg:     #899381;   /* Hintergrund aktiv */
  --pill-active-border: #899381;   /* Rahmen aktiv */
  --pill-active-color:  #ffffff;   /* Text aktiv */
}

/* Aktiv – dezenter Fill + dunklerer Rand (beide Strukturen unterstützt) */
.product-form__input input[type="radio"]:checked + label:not(:has(.swatch-color-ball)):not(:empty),
.product-form__input label:has(> input[type="radio"]:checked):not(:has(.swatch-color-ball)):not(:empty) {
  background: var(--pill-active-bg) !important;
  border-color: var(--pill-active-border) !important;
  color: var(--pill-active-color, inherit) !important;
}

/* -----------E) Deaktivierte Varianten leicht abdämpfen  --------------------- */

.product-form__input input[type="radio"][disabled] + label,
.product-form__input label:has(> input[type="radio"][disabled]),
.caa-swatchbtn.is-disabled,
.caa-swatchbtn.is-disabled .swatch-color-ball {
  opacity: .45 !important;
  cursor: not-allowed !important;
}


/* ------------------- Swatches: Ausverkauft-Optik ------------------*/
.caa-swatchbtn.is-soldout { 
  opacity: .45;                  /* leicht verblasst */
  cursor: pointer !important;    /* kein Verbotsschild */
}

/* Kreis-Swatches: Strich direkt IM Kreis zeichnen (komplett durch) */
.caa-swatchbtn .swatch-color-ball{
  position: relative;
  overflow: hidden;              /* schneidet den Strich sauber auf Kreisform zu */
}

/* nur für ausverkaufte Kreis-Swatches */
.caa-swatchbtn.is-soldout .swatch-color-ball::after{
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 50%;
  height: 2px;
  background: currentColor;
  opacity: .85;
  transform: rotate(-45deg);
  pointer-events: none;          /* bleibt klickbar */
}

/* Die alte Label-Linie bei Farbkreisen deaktivieren, sonst doppelt */
.caa-swatchbtn.is-soldout.caa-swatchbtn--color::after{
  display: none !important;
}

/* Text-Swatches: Linie weiterhin durchs Label (wie gehabt) */
.caa-swatchbtn.is-soldout:not(.caa-swatchbtn--color)::after{
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 2px;
  background: currentColor;
  opacity: .7;
  transform: rotate(-28deg);
  pointer-events: none;
}

/* Optional: minimal kräftiger */
.caa-swatchbtn.is-soldout .swatch-color-ball::after { height: 2.5px; }


/* ==============================================================================================================================================
Produkt-Kachel/ Produktkarten 
=============================================================================================================================================== */

.card--standard>.card__content {
  z-index: 1;
}

/* ----Produktkarte - Inhalt - Zentriert--- */  
.card--standard>.card__content .card__information {
    text-align: center;
}

/* Wichtig - Alle Produktfotos gleich skalieren----*/
#ProductGridContainer .card-wrapper .card.card--standard.card--media .card__inner .card__media .media img {
  object-fit: contain !important;
}

/*- ProduktBilder in Produktkarten = dadurch kleben sie nicht oben am Rand--*/
/* Produktbilder 5px nach unten*/
  .card .media {
  margin-top: 5px !important;
}

/* Neu im Shop Badge*/
.card__badge--neu{
  display: inline-block;
  line-height: 1;
  font-size: 1.2rem;
  padding: 1.0rem 1.3rem; /* vorher padding: .6rem 1.3rem; */
  background-color: #9fb18e ;
  color:white;
}

.badge {
  padding: 1rem 1.3rem !important;
}

/* Badge oben links ausrichten*/
.card--media .card__inner .card__content {
 padding: 0px !important;
}

/* --------- Theme-eigenen Rahmen & Schatten deaktivieren --------------*/
.product-card-wrapper .card,
.contains-card--product {
  --product-card-border-width: 0;    /* Theme-Rahmen aus */
  --product-card-shadow-opacity: 0;  /* kein Schatten    */
}

/* ----------- Eigenen Gesamt-Rahmen um die ganze Karte setzen ----------*/
.product-card-wrapper .card {
  border: 1px solid rgba(var(--color-foreground), 0.18);
  border-radius: var(--product-card-corner-radius);
  overflow: hidden; /* damit der Radius auch fürs Bild greift */
}


/* ==============================================================================================================================================
Breadcrumb – NAVIGATION
============================================================================================================================================== */

/* Container */
nav.breadcrumb,
.breadcrumb {
  box-sizing: border-box;
  max-width: var(--page-width, 130rem); /* statt feste 1300px */
  margin: 0 auto 1.5rem;                /* unten 15px Abstand */
  padding: 0px 0 0;                    /* oben 10px, unten 0 */
  font-size: 1.2rem;                    /* ~12px */
  line-height: 1.4;
}

/* Links erben Größe/Zeilenhöhe */
nav.breadcrumb a,
.breadcrumb a {
  font-size: inherit;
  line-height: inherit;
}

/* Mobile: Breadcrumb visuell verstecken, aber für Screenreader behalten */
@media (max-width: 749px){
  nav.breadcrumb,
  .breadcrumb{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

/* Breadcrumb – Farben fix setzen */
nav.breadcrumb, .breadcrumb { color: #000; }

/* Alle Links in den Breadcrumbs schwarz (auch visited/hover) */
nav.breadcrumb a,
nav.breadcrumb a:link,
nav.breadcrumb a:visited,
nav.breadcrumb a:hover,
.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:hover {
  color: #000 !important;
  text-decoration: none;
}

/* Aktueller Eintrag GRÜN – deckt Link/Span/verschiedene Markups ab */
nav.breadcrumb :is([aria-current="page"],
                   .breadcrumb__link--current,
                   .breadcrumb__item--current,
                   .breadcrumbs__current),
.breadcrumb      :is([aria-current="page"],
                   .breadcrumb__link--current,
                   .breadcrumb__item--current,
                   .breadcrumbs__current),
nav.breadcrumb li:last-child,
nav.breadcrumb li:last-child > a,
nav.breadcrumb li:last-child > span,
.breadcrumb li:last-child,
.breadcrumb li:last-child > a,
.breadcrumb li:last-child > span {
  color: #899482 !important; /* <- festes caámate-Grün */
}


/* ==============================================================================================================================================
Main-NAVIGATION - Header  (–> Mega Menü weiter unten!)
============================================================================================================================================== */

/* CLS - bitte drinlassen 27.09: Header-Unterkante immer reservieren, nur Farbe wechseln */
  .header-wrapper { border-bottom: 1px solid transparent; }
  .header-wrapper--border-bottom { border-bottom-color: rgba(0,0,0,.08); }

  /* Keine Höhen-/Padding-Transitions beim Sticky-Zustand (nur Farbe/Schatten) */
  .sticky-header .header,
  .sticky-header .header * {
    transition: background-color .2s, box-shadow .2s !important;
  }

  /* Optional: Mindesthöhe fixieren (Werte bei euch anpassen, siehe DevTools) */
  @media (max-width: 989px){
    .header-wrapper { min-height: 64px; }  /* mobile tatsächliche Headerhöhe einsetzen */
  }
  @media (min-width: 990px){
  .header-wrapper { min-height: 92px; }  /* desktop tatsächliche Headerhöhe einsetzen */
}


/* -----------Desktop - Main-Navi-----------------*/

/* Desktop - Schriftgröße (ab 990px) */
@media (min-width: 990px) {
  .header__menu-item {
    color: #fff;
  }
}

/*-----------------Mobil - Main-Navi------------*/

/* social media icons mobil ausblenden*/
.menu-drawer .list-social{
  display: none;
}

/* Sprache, Währung & Lokalisation mobil ausblenden*/
  .menu-drawer__localization{
  display: none !important;
}


/* =========================================================================================================================================
Mega-Menü - Header  ( Ausklappmenü des Main-Navi)) -> ungerüft = schauen, ob noch doppel oder was zu main-navi gehört
==========================================================================================================================================*/


/* ---------------------DESKTOP (≥ 990px) ------------------------------------------ */

/* Ausrichtung (zentriert) und Abstand Icon untereinander –  */
@media (min-width: 990px){
  .mega-menu__content .mega-menu__list,
  .mega-menu .mega-menu__list--condensed {
    display: flex !important;
    flex-direction: row !important;   /* verhindert vertikales Stapeln */
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;                         /* EINZIGE Quelle für den Icon-Abstand */
    align-items: flex-start;
  }

  /* Sicherheit: Items nicht auf 100% Breite ziehen */
  .mega-menu__content .mega-menu__list > li {
    width: auto;
  }
}

@media (min-width: 990px){

/* keine künstlichen Offsets – Grid zentriert das Menü */
.header-wrapper--border-bottom{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mega-Menü Hintergrundfarbe Desktop */
.mega-menu__content{
  background-color: #899482 !important; /* caámate Grün */
}

/* Mega-Menü nicht am <li> „ankern“ */
.header__inline-menu,
.header__inline-menu > .list-menu > li{ position: static !important; }
.header__inline-menu::after{ content: none !important; }

/* Panel-Luft + Hover-Brücke */
  .mega-menu__content{
    position: relative;
    padding-top: 16px !important;
    overflow: visible !important;
}

/* Mega-Menüt Link-Text Eisntellung */
  .mega-menu__list--condensed .mega-menu__link{
     font-size: 18px !important;   /* <-- hier Größe anpassen */
    font-weight: 400 !important;
    color: #fff !important;
    text-align: center;
    padding-left: 15px; 
    padding-right: 15px;
    text-transform: none; text-decoration: none;
  }

.mega-menu__content::before{
    content: "";
    position: absolute; left: 0; right: 0;
    top: -14px; height: 16px;
    pointer-events: auto; background: transparent;
}


  .mega-menu__link:hover,
  .mega-menu__link--active{ text-decoration: none !important; }

  /* Story-Navigation (Kreise) im Panel – sauber gescoped */
  .mega-menu__content .o-StoryNavigation{ margin: 0 !important; padding: 8px 0 !important; }
  .mega-menu__content .o-StoryNavigation__Items{
    display: flex; flex-direction: row; justify-content: center;
    gap: 24px; padding: 0 1rem 1.8rem;
  }

  /* Header-Raster: links 1fr – Mitte auto – rechts 1fr */
  .header--middle-left{ grid-template-columns: 1fr auto 1fr !important; }
  .header--middle-left .header__inline-menu{ justify-self: center !important; width: max-content !important; }
  .header--middle-left .header__heading{ justify-self: start !important; }
  .header--middle-left .header__icons{   justify-self: end   !important; }
}


/* ================== MOBILE (≤ 749px) ================== */
@media (max-width: 749px){

  /* Seiten-Gutter (inkl. iOS Safe-Area) global vereinheitlicht */
  .page-width{
    padding-left:  max(env(safe-area-inset-left),  var(--page-width-margin, 1.5rem)) !important;
    padding-right: max(env(safe-area-inset-right), var(--page-width-margin, 1.5rem)) !important;
  }

  /* Header in Kombination mit .page-width (Logo/Burger/Warenkorb bündig) */
  header.header.page-width,
  .header.page-width{
    padding-left:  max(env(safe-area-inset-left), 1.5rem) !important;
    padding-right: max(env(safe-area-inset-right), 1.5rem) !important;
  }

  /* Keine zusätzliche vertikale Luft im Header */
  .header-wrapper--border-bottom,
  .header{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ================== MOBILE DRAWER (Burger) ================== */

/* Icon-Titel-Einzug */
.menu-drawer .mega_menu_mobile_name{ padding-left: 15px; }

/* runde Icon-Bilder */
.menu-drawer .nav-icon--circle{
  width: 78px; height: 78px; border-radius: 50%;
  object-fit: cover; margin-right: .75rem; vertical-align: middle;
}

/* XS kleiner, größere Phones etwas größer */
@media (max-width: 360px){ .menu-drawer .nav-icon--circle{ width: 64px; height: 64px; } }
@media (min-width: 420px){ .menu-drawer .nav-icon--circle{ width: 84px; height: 84px; } }

/* Keine fremden Hintergründe/Schatten hinter PNGs */
.menu-drawer .menu-drawer__menu-item .nav-icon--circle,
.menu-drawer .menu-drawer__menu-item img.nav-icon--circle,
.menu-drawer .menu-drawer__menu-item picture,
.menu-drawer .menu-drawer__menu-item .media{
  background: transparent !important;
  box-shadow: none !important;
  outline: none; padding: 0;
}

/* Sicherheits-Rundung falls Bilder aus Komponenten kommen */
.m-StoryItem__Image img,
.m-CarouselItem__Image img{ border-radius: 50%; }


/* =======================================================================================================================================================
Carousel Icon Box – Section Styles
======================================================================================================================================================= */

/* --- Grundlayout (neutral, für Owl & Non-Owl) --- */
.carousel-icon-box .cib-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;         /* Desktop: zentriert */
  gap: var(--cib-gap, 24px);
  overflow-x: visible;             /* kein horizontales Scrollen auf Desktop */
  overflow-y: hidden;
}

.carousel-icon-box .cib-item { flex: 0 0 auto; }
.carousel-icon-box .cib-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
}
.carousel-icon-box .cib-title,
.carousel-icon-box .cib-text {
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
  margin: 0;
}

/* --- Desktop: Owl-Bühne zentriert --- */
@media (min-width: 990px) {
  .carousel-icon-box .owl-stage {
    display: flex;
    justify-content: center !important;
  }
  .carousel-icon-box .owl-item { float: none; }
}

/* --- Tablet/Mobile: Bühne links starten + Gutter wie Burger-Menu --- */
@media (max-width: 989px) {
  .carousel-icon-box .cib-inner {
    padding-left: 0 !important;
    padding-right: 0 !important; /* verhindert Weißfläche */
  }
  .carousel-icon-box .cib-list {
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left:  max(env(safe-area-inset-left), 1.6rem);
    padding-right: max(env(safe-area-inset-right), 1.6rem);
    margin-left: 0 !important;
    margin-right: 0 !important;
    scrollbar-width: thin;
  }
  .carousel-icon-box .owl-stage-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .carousel-icon-box .owl-stage {
    display: flex;
    justify-content: flex-start !important;
    padding-left:  max(env(safe-area-inset-left), 1.6rem);
    padding-right: max(env(safe-area-inset-right), 1.6rem);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .carousel-icon-box .owl-item { float: none; }
}

/* --- Überschrift: immer mit globalem Page-Width-Gutter --- */
#CarouselIconBox-{{ section.id }} .cib-heading-wrap {
  padding-left:  max(env(safe-area-inset-left),  var(--page-width-margin, 1.5rem));
  padding-right: max(env(safe-area-inset-right), var(--page-width-margin, 1.5rem));
}

/* Mobile-Überschrift: sicheres Gutter */
@media (max-width: 989px) {
  #CarouselIconBox-{{ section.id }} .cib-heading-wrap {
    box-sizing: border-box;
    padding-left:  max(env(safe-area-inset-left), 1.6rem) !important;
    padding-right: max(env(safe-area-inset-right), 1.6rem) !important;
  }
}

/* Desktop-Überschrift: mittig wie .page-width */
@media (min-width: 990px) {
  #CarouselIconBox-{{ section.id }} .cib-heading-wrap {
    max-width: var(--page-width, 120rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==============================================================================================================
Übergeordnete/ Section unabhängig / globale css
================================================================================================================*/

/* Unterstreichung bei allen Links entfernen */
a,
a:link,
a:visited,
a.full-unstyled-link,
.link,
.link:visited {
  text-decoration: none !important;
}

/* ==============================================================================================================
Judge.me -Bewertungs-App
================================================================================================================*/

/* ----- Schrift und Sterne Größe - Einszelproduktansicht über dem Teitel ------ */

.jdgm-prev-badge__text {
  visibility: unset;
  font-size: 1.3rem;
}

@media (max-width:749px){
  .jdgm-rev-widg, .jdgm-widget{
    box-sizing:border-box;
    margin-left:calc(var(--page-width-padding,16px)*-1);
    margin-right:calc(var(--page-width-padding,16px)*-1);
    padding-left:var(--page-width-padding,16px);
    padding-right:var(--page-width-padding,16px);
  }
}


/* ===================================================================
Cart Drawer – Einkaufskorb Flyout (Dawn Summer 2025) – caámate (clean)
=================================================================== */

/* ---------- Basics ---------- */

/* Hinweis unter Totals ausblenden */
:where(.cart-drawer) :where(.tax-note){ display:none !important; }

/* Header-Typo/Luft schlank */
:where(.cart-drawer) :where(.drawer__heading){ margin:0; }

/* Details-Summary im Footer dezent */
:where(.cart-drawer) :where(.drawer__footer summary){ padding:1.5rem .5rem; }

/* Item totals (Preisblock rechts) kompakt halten */
:where(.cart-drawer) :where(.cart-item__totals){
  width:100%;
  white-space:nowrap;
  align-self:flex-end;
  margin-bottom:4px;
}

/* Cart-Drawer: Grundpreis (Unit Price) überall ausblenden (Details + Totals) */
:where(.cart-drawer) :where(.product-option-unit_price),
:where(.cart-drawer) :where(.product-option .unit_price),
:where(.cart-drawer) :where(.unit-price){
  display: none !important;
}

/* ---------- Variablen (Abstände/Typo) ---------- */
:root{
  --totals-font-size-desktop: 1.5rem;
  --totals-font-weight-desktop: 500;
  --totals-font-size-mobile: 1.5rem;
  --totals-font-weight-mobile: 500;

  --drawer-separator-gap: 1rem;   /* Abstand Totals -> Linie */
  --drawer-cta-gap: 24px;          /* Abstand Totals -> Button (kompakt) */

  --drawer-free-text-size-desktop: 1.4rem;
  --drawer-free-text-size-mobile: 1.3rem;

  --cart-cta-font-size-desktop: 1.8rem;
  --cart-cta-font-size-mobile: 1.6rem;
  --cart-cta-font-weight: 600;
}

/* ---------- Viewport + Layout ---------- */
/* Dynamische Drawer-Höhe = 100 × innerHeight (iOS-UI ein/aus → Footer springt mit nach unten) */
/* Drawer-Höhe = 100 × innerHeight (robust für iOS/Safari UI ein/aus) */
.cart-drawer,
.cart-drawer .drawer__inner{
  height: calc(var(--drawer-vh, 1vh) * 100);
  max-height: calc(var(--drawer-vh, 1vh) * 100);
}


/* Spaltenlayout: Header (sticky) / Content (scrollt/verlängert sich) / Footer (sticky) */
.cart-drawer .drawer__inner{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Mittelteil hosten (robust: mit und ohne Klasse) */
.cart-drawer .drawer__inner > cart-drawer-items,
.cart-drawer cart-drawer-items.cart-drawer__contents{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Form-Ebene muss auch strecken, sonst kein Scroll in der Mitte */
.cart-drawer cart-drawer-items form.cart__contents{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Diese Ebene scrollt wirklich */
#CartDrawer-CartItems{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Header sticky oben */
.cart-drawer .drawer__header{
  --caa-close-size: 3.2rem;
  position:sticky;
  top:0;
  z-index:2;
  background:var(--color-background,#fff);
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
}

/* Titel linksbündig, mit rechtem Innenabstand in Button-Breite,
   damit der Button nicht in den Titel „greift“. */
.cart-drawer .drawer__heading{
  grid-column:1;
  justify-self:start;
  text-align:left;
  margin:0;
  padding-right: var(--caa-close-size);
}

/* Close-Button rechts, feste Interaktionsfläche (auch fürs Fitts’sche Gesetz). */
.cart-drawer .drawer__close{
  grid-column:2;
  justify-self:end;
  width: var(--caa-close-size);
  height: var(--caa-close-size);
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Footer sticky unten + Safe-Area, kompakte Innenabstände, nicht „mitwachsen“ */
.cart-drawer .drawer__footer{
  position:sticky;
  bottom:0;
  z-index:2;
  background:var(--color-background,#fff);
  border-top: 1px solid #eee;
  padding-top:.4rem;
  padding-bottom:max(env(safe-area-inset-bottom), .6rem);
  flex:0 0 auto;
}



/* Desktop: zusätzlicher Bodenabstand im Drawer-Footer
   → schafft unter den Payment-Icons so viel Luft wie „oben“ am Header wahrgenommen */
@media (min-width: 990px){
  .cart-drawer .drawer__footer{
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

/* Footer-Inhalt als Grid → konstante vertikale Abstände */
.cart-drawer .cart-drawer__footer{
  display: block; /* Standard-Flow, keine ungewollte Streckung */
}

.cart-drawer .cart-drawer__footer > * + *{
  margin-top: .5rem; /* konstanter Gap zwischen den „Zeilen“ im Footer */
}

/* Nur EINE Linie: Totals selbst nicht noch einmal abtrennen */
:is(#CartDrawer, .cart-drawer) .totals{
  margin-top: var(--drawer-separator-gap, .4rem) !important;
  padding-top: .6rem !important;
  border-top: 0 !important;
}

/* ---------- Gratisversand-Leiste & Versandkostenzeile ---------- */

/* Versandkosten: Label links – Wert rechts */
.row_versandkosten{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; flex-wrap:nowrap;
}
.row_versandkosten .titel_versandkosten,
.row_versandkosten .totals_versandkosten_total-value{
  margin:0; line-height:1.2; font-weight:500;
  font-size: var(--totals-font-size-desktop, 1.6rem);
}
@media (max-width: 749px){
  .row_versandkosten .titel_versandkosten,
  .row_versandkosten .totals_versandkosten_total-value{
    font-size: var(--totals-font-size-mobile, 1.5rem);
  }
}
.row_versandkosten .titel_versandkosten{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.row_versandkosten .totals_versandkosten_total-value{
  flex:0 0 auto; white-space:nowrap; text-align:right;
}

/* Gratisversand-Leiste bündig, Abstände via Totals geregelt */
:is(#CartDrawer, .cart-drawer) .cart-drawer-free-shipping-bar{
  padding:0 !important; margin:0 !important;
}
:is(#CartDrawer, .cart-drawer) .cart-drawer-free-shipping-bar .shipping-progress-row{
  width:100%; display:flex; align-items:center; justify-content:center;
  gap:.5rem; flex-wrap:nowrap; white-space:nowrap;
}
:is(#CartDrawer, .cart-drawer) .cart-drawer-free-shipping-bar .shipping_progress_bar{
  width:100% !important; max-width:100%; min-width:0; box-sizing:border-box;
}

/* Cart-Drawer Scope-Variablen (Quelle der Wahrheit) */
:is(#CartDrawer, .cart-drawer){
  --drawer-free-text-size-mobile: 1.25rem;  /* iPhone 12 Pro etc. */
  --drawer-free-text-size-desktop: 1.3rem;  /* ab 750px+ */
}

/* Textgröße der Gratisversand-Leiste */
:is(#CartDrawer, .cart-drawer) .free-shipping-bar-text{
  margin-top: 0 !important;                      /* etwas mehr Luft */
  font-size: var(--drawer-free-text-size-desktop, 1.4rem);
  line-height: 1.3;
  white-space: nowrap !important;                    /* EINZEILIG erzwingen */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: rgba(17,17,17,.7);                          /* dezenter Ton */
}
@media (max-width: 749px){
  :is(#CartDrawer, .cart-drawer) .free-shipping-bar-text{
    font-size: var(--drawer-free-text-size-mobile, 1.3rem);
  }
}

/* Sicherheit: keine Deko/Emojis anhängen */
:where(.cart-drawer) .free-shipping-bar-text::after{ content:'' !important; }

/*-----------------Cart Drawer – Papierkorb-Icon (Remove)---- */

/* Trefferfläche groß halten, Icon selbst kleiner */
:is(#CartDrawer, .cart-drawer) .cart-remove-button{
  min-width: 32px;                /* gute Touch-Zone */
  min-height: 32px;
  padding: 6px;                    /* reduziert optische Dominanz */
  line-height: 1;
  color: rgba(17,17,17,.55);       /* Grundfarbe */
}

/* SVG-Größe (Dawn-SVGs erben .icon) */
:is(#CartDrawer, .cart-drawer) .cart-remove-button .icon{
  width: 18px;
  height: 18px;
}

/* Hover/Focus: etwas dunkler, aber dezent */
:is(#CartDrawer, .cart-drawer) .cart-remove-button:hover,
:is(#CartDrawer, .cart-drawer) .cart-remove-button:focus-visible{
  color: rgba(17,17,17,.75);
}

/* Tastaturfokus klar, aber zurückhaltend */
:is(#CartDrawer, .cart-drawer) .cart-remove-button:focus-visible{
  outline: 2px solid rgba(17,17,17,.25);
  outline-offset: 2px;
}


/* ---------- CTA-Typo & Abstände ---------- */

/* Abstand zur CTA-Leiste */
:is(#CartDrawer, .cart-drawer) .cart__ctas{ margin-top: var(--drawer-cta-gap) !important; padding-top:0 !important; }

/* CTA-Typo konsistent (auch dynamische Checkout-Buttons) */
:is(#CartDrawer, .cart-drawer) .cart__ctas .button,
:is(#CartDrawer, .cart-drawer) .cart__ctas button,
:is(#CartDrawer, .cart-drawer) .cart__ctas .shopify-payment-button__button--unbranded{
  font-size: var(--cart-cta-font-size-desktop);
  font-weight: var(--cart-cta-font-weight);
  line-height: 1.2;
}
@media (max-width:749px){
  :is(#CartDrawer, .cart-drawer) .cart__ctas .button,
  :is(#CartDrawer, .cart-drawer) .cart__ctas button,
  :is(#CartDrawer, .cart-drawer) .cart__ctas .shopify-payment-button__button--unbranded{
    font-size: var(--cart-cta-font-size-mobile);
  }
}

/* Payment-Icons: verhindern, dass sie den Footer nach unten strecken */
.cart-drawer .list-payment{
  overflow:hidden;
  max-height:28px; /* Icons ~24px */
}

/* ---------- iOS Tuning ---------- */
@supports (-webkit-touch-callout:none){
  #CartDrawer-CartItems{ -webkit-overflow-scrolling:touch; }
}

/* === Cart Drawer: Fullscreen auf Mobile (wie waterdrop) === */
@media (max-width: 749px){
  /* volle BREITE – keine runden Ecken */
  #CartDrawer,
  .cart-drawer,
  .cart-drawer .drawer__inner{
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  /* volle HÖHE: echte Fensterhöhe (kein „Loch“, kein Überdecken) */
  .cart-drawer,
  .cart-drawer .drawer__inner{
    height: calc(var(--drawer-vh, 1vh) * 100) !important;
    max-height: calc(var(--drawer-vh, 1vh) * 100) !important;
  }

  /* Sicherheit: Drawer über Header/anderen Fixed-Elementen */
  .cart-drawer{ z-index: 9999; }
}

/* Cart Drawer – Titel & Subline */
.cart-drawer .caa-cart-title{
  display:block;            /* Titel = volle Breite */
  margin: 0 0 .15rem 0;
}
.cart-drawer .caa-cart-subline{
  font-size: 1.3rem;
  line-height: 1.3;
  color: rgba(0,0,0,.55);
  margin-bottom: .35rem;    /* Abstand zur Mengen-/Aktionszeile */
}

/* Preis-Markup im Details-TD verstecken (Preis steht rechts im Totals-TD) */
.cart-drawer .caa-hide-in-drawer-details{ display:none !important; }

.drawer__header {
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 990px){
  /* Mehr Luft zwischen Free-Shipping-Bar und Totals */
  .drawer__footer .cart-drawer__footer{
    margin-top: 1.6rem;
  }

  /* Zeilenabstand im Preisblock erhöhen */
  .cart-drawer__footer p,
  .cart-drawer__footer small{
    line-height: 1.45;
  }

  /* Etwas mehr Abstand oberhalb des Checkout-Buttons */
  .cart__ctas{
    margin-top: 1.8rem;
  }
}

@media (min-width: 990px){
  .cart-drawer-free-shipping-bar{
    margin-bottom: 1.4rem;
  }
  .cart-drawer__footer .totals{
    margin-top: 0.4rem;
  }
}

/* Cart Drawer – Desktop Typografie (Titel & Varianten) */
@media (min-width: 990px){

  /* Produktname – priorisieren, max. zwei Zeilen, keine Unterstreichung */
  .cart-drawer .cart-item__name,
  .cart-drawer .cart-item__name a{
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
  }
  .cart-drawer .cart-item__name{
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* max. zwei Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Varianten-/Metazeile – sekundär, einzeilig mit Ellipse */
  .cart-drawer .product-option{
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(17,17,17,.62);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 990px){

  /* Preis in der Produktzeile – klar priorisieren, rechtsbündig */
  .cart-drawer .cart-item .cart-item__totals,
  .cart-drawer .cart-item .cart-item__price,
  .cart-drawer .cart-item .cart-item__final-price,
  .cart-drawer .cart-item .price--end{
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #111;
  }

  /* Einzelpreis/Unit Price – klein, sekundär, unter dem Zeilenpreis */
  .cart-drawer .cart-item .unit-price,
  .cart-drawer .cart-item .cart-item__unit-price,
  .cart-drawer .cart-item .price__unit{
    display: block;
    margin-top: 2px;
    text-align: right;
    font-size: 13px;
    font-weight: 400;
    color: rgba(17,17,17,.62);
  }
}

@media (min-width: 990px){

  /* 1) Wrapper-Höhe fixieren (klassisch .quantity UND alternative .quantity-input) */
  .cart-drawer .cart-item .quantity,
  .cart-drawer .cart-item .quantity-input,
  .cart-drawer cart-drawer-items .cart-item .quantity,
  .cart-drawer cart-drawer-items .cart-item .quantity-input,
  .cart-drawer .cart-item .quantity.cart-quantity,
  .cart-drawer .cart-item .quantity-input.cart-quantity{
    --caa-qty-size: 40px;
    --caa-qty-input-w: 56px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: var(--caa-qty-size) !important;
    min-height: var(--caa-qty-size) !important;
  }

  /* 2) Buttons links/rechts */
  .cart-drawer .cart-item .quantity__button,
  .cart-drawer .cart-item .quantity-input .quantity__button{
    width: var(--caa-qty-size) !important;
    height: var(--caa-qty-size) !important;
    min-width: var(--caa-qty-size) !important;
    min-height: var(--caa-qty-size) !important;
    line-height: var(--caa-qty-size) !important;
  }

  /* 3) Eingabefeld (klassisch .quantity__input ODER generisch input[type=number]) */
  .cart-drawer .cart-item input.quantity__input,
  .cart-drawer .cart-item .quantity input[type="number"],
  .cart-drawer .cart-item .quantity-input input[type="number"]{
    width: var(--caa-qty-input-w) !important;
    height: var(--caa-qty-size) !important;
    min-height: var(--caa-qty-size) !important;
    line-height: var(--caa-qty-size) !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
}


/* -----Cart Drawer – Desktop: Remove-Icon-----  */
@media (min-width: 990px){

  /* 2) Remove-Button – robuste Selektoren (Dawn variiert Klassen je nach Version) */
  .cart-drawer .cart-item .cart-remove-button,
  .cart-drawer .cart-item .cart-item__remove,
  .cart-drawer .cart-item .remove,
  .cart-drawer .cart-item [data-remove],
  .cart-drawer .cart-item button[name="remove"]{
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;                 /* leichter Fokus-Radius */
    transition: opacity .15s ease, transform .05s ease;
  }

  /* Das eigentliche Icon im Button (SVG/IMG) auf ~20px zügeln */
  .cart-drawer .cart-item .cart-remove-button svg,
  .cart-drawer .cart-item .cart-item__remove svg,
  .cart-drawer .cart-item .remove svg,
  .cart-drawer .cart-item [data-remove] svg,
  .cart-drawer .cart-item button[name="remove"] svg,
  .cart-drawer .cart-item .cart-remove-button img,
  .cart-drawer .cart-item .cart-item__remove img,
  .cart-drawer .cart-item .remove img,
  .cart-drawer .cart-item [data-remove] img,
  .cart-drawer .cart-item button[name="remove"] img{
    width: 18px;
    height: 18px;
    display: block;
  }
}

  /* Cart Drawer – Desktopbreite adaptiv (luftiger, aber nicht zu dominant) */
@media (min-width: 990px){
  .cart-drawer .drawer__inner{
    width: clamp(440px, 25vw, 500px) !important;
    max-width: clamp(440px, 25vw, 500px) !important;
  }
}

/* Cart Drawer – Desktop: einheitlicher Innenabstand links/rechts */
@media (min-width: 990px){
  /* 1) Theme-Padding an der Outer-Shell neutralisieren */
  .cart-drawer .drawer__inner{
    --drawer-x: 26px;                 /* feinere Stufe (vorher 18px) */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Einheitlichen Gutter nur dort setzen, wo Inhalt liegt */
  .cart-drawer .drawer__header,
  .cart-drawer .drawer__footer,
  .cart-drawer cart-drawer-items form.cart__contents{
    padding-left: var(--drawer-x) !important;
    padding-right: var(--drawer-x) !important;
  }

@media (min-width: 990px){
  /* 1) Zwischenebenen nicht zusätzlich polstern */
  .cart-drawer cart-drawer-items{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Header/Content/Footer: Gutter links + rechts,
        aber Header rechts OHNE Padding – X übernimmt den Gutter */
  .cart-drawer .drawer__header{
    padding-left: var(--drawer-x) !important;
    padding-right: 0 !important;
  }
  .cart-drawer .drawer__footer,
  .cart-drawer cart-drawer-items form.cart__contents{
    padding-left: var(--drawer-x) !important;
    padding-right: var(--drawer-x) !important;
  }

  /* 3) Close-Button exakt im Gutter platzieren */
  .cart-drawer .drawer__close{
    margin-right: var(--drawer-x) !important;
    padding: 0 !important;
    justify-self: end;
    width: var(--caa-close-size);
    height: var(--caa-close-size);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 4) Totals rechts nicht „ankleben“ */
  .cart-drawer .cart-item__totals{ padding-left: 8px; }
}

/* Cart Drawer – Footer-Typo harmonisieren (Desktop) */
@media (min-width: 990px){
  /* Zwischensumme: Label ruhig (12/400/grau), Wert klar (16/600/#111) */
  #CartDrawer .cart-drawer__footer .totals .totals__total{
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.35 !important;
    color:rgba(17,17,17,.62) !important;
    margin:0 !important;
  }
  #CartDrawer .cart-drawer__footer .totals .totals__total-value{
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    color:#111 !important;
    margin:0 !important;
    text-align:right !important;
    white-space:nowrap !important;
  }

  /* Versandkosten: Label hast du bereits fix; hier nur der Wert auf #111 ausrichten */
  #CartDrawer .drawer__footer .row_versandkosten > :last-child{
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    color:#111 !important;           /* gleiche Farbe wie Zwischensumme */
    margin:0 !important;
    text-align:right !important;
    white-space:nowrap !important;
  }
}


/* Cart Drawer – Footer: Versandkosten-Zeile auf 16/12 angleichen */
@media (min-width: 990px){
  .cart-drawer .drawer__footer .row_versandkosten{
    display:flex;
    align-items: baseline;             /* Label/Wert stehen optisch auf einer Linie */
    justify-content: space-between;
    gap:.6rem;
    margin-top:.4rem;                  /* kleine Luft oberhalb */
  }
  /* Label links: 12 / 400 / grau */
  .cart-drawer .drawer__footer .row_versandkosten .titel_versandkosten{
    font-size:12px;
    font-weight:400;
    line-height:1.35;
    color:rgba(17,17,17,.62);
    margin:0;
  }
  /* Wert rechts: 16 / 600 / #111 */
  .cart-drawer .drawer__footer .row_versandkosten .totals_versandkosten_total-value{
    font-size:16px;
    font-weight:600;
    line-height:1.35;
    color:#111;
    margin:0;
    white-space:nowrap;
    text-align:right;
  }
}

/* Cart Drawer – robust NUR das Versandkosten-Label fixen (Desktop) */
@media (min-width: 990px){
  /* trifft: erstes Kind der Reihe ODER ein Kind mit "titel"/"label" im Klassennamen */
  #CartDrawer .drawer__footer .row_versandkosten > :first-child,
  #CartDrawer .drawer__footer .row_versandkosten :is(p,span,div,dt,dd)[class*="titel"],
  #CartDrawer .drawer__footer .row_versandkosten :is(p,span,div,dt,dd)[class*="label"]{
    font: normal 400 12px/1.35 var(--font-body, inherit) !important; /* Größe+Gewicht in EINEM Set */
    color: rgba(17,17,17,.62) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
  }
}

/* Cart Drawer – Zwischensumme-Label wieder prominent */
@media (min-width: 990px){
  #CartDrawer .cart-drawer__footer .totals .totals__total{
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    color:#111 !important;         /* darf auch rgba(17,17,17,.82) sein, wenn dezenter gewünscht */
    margin:0 0 .15rem 0 !important; /* mini-Abstand zum Wert */
  }
}

/* Cart Drawer – Produktzeilen: Preisfarbe strikt angleichen (#111) */
@media (min-width: 990px){
  /* Endpreis / Zeilenpreis rechts */
  .cart-drawer .cart-item .cart-item__totals,
  .cart-drawer .cart-item .cart-item__final-price,
  .cart-drawer .cart-item .cart-item__price,
  .cart-drawer .cart-item .price--end,
  .cart-drawer .cart-item .cart-item__totals *{
    color:#111 !important;
  }

  /* Sekundäre Texte unter dem Preis (Unit-Price etc.) dezent grau */
  .cart-drawer .cart-item .unit-price,
  .cart-drawer .cart-item .cart-item__unit-price,
  .cart-drawer .cart-item .price__unit,
  .cart-drawer .cart-item .unit-price *{
    color:rgba(17,17,17,.62) !important;
  }

  /* Produktname bleibt „inherit“ (kein Blau o.ä.), Variante dezent */
  .cart-drawer .cart-item__name a{ color:inherit !important; text-decoration:none; }
  .cart-drawer .product-option{ color:rgba(17,17,17,.62) !important; }
}

/* Cart Drawer – CTA auf Desktop etwas prominenter durch mehr Luft darüber */
@media (min-width: 990px){
  #CartDrawer .drawer__footer .cart__ctas{
    margin-top: 2.4rem !important;  /* vorher meist ~1.6–1.8rem */
  }
  #CartDrawer .drawer__footer .cart-drawer__footer{
    margin-bottom: 0.6rem !important; /* leicht kürzen, damit Footer kompakter bleibt */
  }
}

/* Cart Drawer – Desktop: CTA-Button höher (nur Höhe) */
@media (min-width: 990px){
  #CartDrawer .cart__ctas .button,
  #CartDrawer .cart__ctas button,
  #CartDrawer .cart__ctas .shopify-payment-button__button,
  #CartDrawer .cart__ctas .shopify-payment-button__button--unbranded{
    min-height: 56px;                 /* vorher meist ~44–48px */
    padding-block: 12px !important;   /* extra Polster, ohne Breite zu ändern */
  }
}




/* Cart Drawer – Desktop: Bildspalte wirklich breiter, Mitte rückt nach rechts */
@media (min-width: 990px){
  /* Stellschrauben */
  #CartDrawer{ --caa-thumb: 104px; --caa-gap: 16px; }

  /* 0) Tabelle nicht auf feste Layout-Berechnung einschränken */
  #CartDrawer table{ table-layout: auto !important; }

  /* 1) Wenn ein <colgroup> existiert: erste Spalte (Bild) breiter, letzte kompakt */
  #CartDrawer colgroup col:first-child{
    width: var(--caa-thumb) !important;
  }
  #CartDrawer colgroup col:last-child{
    width: 112px !important; /* Platz für Preis/Remove */
  }

  /* 2) Fallback, falls kein colgroup oder strengere Styles: direkt auf Zellen gehen */
  #CartDrawer .cart-item > :is(td,th):first-child{
    width: var(--caa-thumb) !important;
    min-width: var(--caa-thumb) !important;
    padding-right: var(--caa-gap) !important;
    box-sizing: border-box !important;
  }
  #CartDrawer .cart-item > :is(td,th):nth-child(2){
    padding-right: 8px !important;   /* Mittelspalte wirkt „zentrierter“ */
  }
  #CartDrawer .cart-item > :is(td,th):last-child{
    white-space: nowrap !important;
    text-align: right !important;
    vertical-align: top !important;
  }

  /* 3) Bild selbst auf Spaltenbreite ziehen (über alle denkbaren Wrapper) */
  #CartDrawer .cart-item__media,
  #CartDrawer .cart-item__image,
  #CartDrawer .cart-item__image-wrapper{
    width: var(--caa-thumb) !important;
    min-width: var(--caa-thumb) !important;
  }
  #CartDrawer .cart-item__media img,
  #CartDrawer .cart-item__image img,
  #CartDrawer .cart-item__image-wrapper img{
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

  /* 4) Mini-Rhythmus */
  #CartDrawer .cart-item .quantity{ margin-top: 4px !important; }
}


/* -------------------------mobil--------------------------------*/

/* MOBILE OVERRIDES – iPhone12 Pro etc. */
@media (max-width: 768px){

  /* Header kompakter */
  :is(#CartDrawer,.cart-drawer) .drawer__header{
    padding:.6rem var(--drawer-x,16px) !important;
    border-bottom:1px solid #eee;
  }

  /* Medienbereich etwas schmaler -> mehr Platz für Titel */
  :is(#CartDrawer,.cart-drawer) .cart-item__media{
    width:76px !important; min-width:76px !important;
  }
  :is(#CartDrawer,.cart-drawer) .cart-item__media img{ width:100%; height:auto; }

  /* Mengen-Stepper gut bedienbar */
  :is(#CartDrawer,.cart-drawer) .quantity,
  :is(#CartDrawer,.cart-drawer) .quantity-input{ height:44px !important; }
  :is(#CartDrawer,.cart-drawer) .quantity__button{ width:44px !important; height:44px !important; }
  :is(#CartDrawer,.cart-drawer) .quantity input[type="number"]{
    width:64px !important; font-size:1.6rem !important; text-align:center !important;
  }

  /* Free-Shipping-Bar lesbarer */
  :is(#CartDrawer,.cart-drawer) .shipping_progress_bar{
    height:10px !important; border-radius:999px !important;
  }
  :is(#CartDrawer,.cart-drawer) .free-shipping-bar-text{
    font-size:1.3rem !important; line-height:1.35 !important; margin-top:.35rem !important;
  }

  /* Totals-Typo: wie Desktop-Schema, nur skaliert */
  :is(#CartDrawer,.cart-drawer) .totals .totals__total{
    font-size:1.6rem !important; font-weight:600 !important; color:#111 !important; margin:0 !important;
  }
  :is(#CartDrawer,.cart-drawer) .row_versandkosten > :first-child{
    font-size:1.3rem !important; font-weight:400 !important; color:rgba(17,17,17,.62) !important; margin:0 !important;
  }
  :is(#CartDrawer,.cart-drawer) .row_versandkosten > :last-child{
    font-size:1.6rem !important; font-weight:600 !important; color:#111 !important; margin:0 !important; text-align:right !important;
  }

  /* CTA besser tappbar */
  :is(#CartDrawer,.cart-drawer) .cart__ctas .button,
  :is(#CartDrawer,.cart-drawer) .cart__ctas .shopify-payment-button__button--unbranded{
    min-height:54px !important; font-size:1.7rem !important; font-weight:600 !important; border-radius:8px !important;
  }

  /* Payment-Icons nicht aufblähen */
  :is(#CartDrawer,.cart-drawer) .list-payment{ max-height:24px !important; overflow:hidden !important; }
}

/*===============================================================================================================
Klaviyo
================================================================================================================*/

/* -----back in Stock Schaltfläche----*/
 .klaviyo-bis-trigger {
  background-color: #BFA75D !important;
  height: 4.7rem;
  padding-top: 1.3rem;
  color: #fff;
  width: 100% !important;
}


/*===============================================================================================================
Footer - noch nicht geprüft
============================================================================================================== */

/* footer social media Icons---*/
.footer .list-social__item .icon {
  width: 3.5rem;
  height: 3.5rem;
}

.footer__content-bottom {
    border-top: solid 0.0rem rgba(var(--color-foreground),0.08) !important;
    padding-top: 0rem !important;
}

@media screen and (min-width: 750px){
  
/*Abststand Text-Block zum FAQ-Block*/
  .footer-block__details-content {
  padding-right: 60px; /* Vorher 10px*/
}

.page-width--narrow {
  max-width: 130rem !important;
}

.shopify-policy__container {
  max-width: 130rem !important;
  }
}

.shopify-policy__container {
  padding-top: 1.5rem;
}

/* Kontrollstelle Block */
.footer-block--textblock{
    padding-top: 25px;
    text-align: center !important;
}

/* ------Trennlinien zwischen den Footer-Kategorien----- */

/* Desktop/Tablet: keine Trennlinie */
.footer .footer-block,
.footer .footer-block__heading {
  border-top: 0;
}

.section-sections--18393323176204__footer-padding {
      padding-left: 15px !important;
      padding-right: 15px !important;
}


/*===============================================================================================================
CLS - Fix
================================================================================================================*/

/* ===== CLS-FIX: Sticky-Header (Dawn) ===== */

/* 1) Border-Shift vermeiden: Platz immer reservieren, nur Farbe toggeln */
.header-wrapper { border-bottom: 1px solid transparent; }
.header-wrapper--border-bottom { border-bottom-color: rgba(0,0,0,.08); }

/* 2) Keine Height/Padding-Transitions im Sticky-Zustand */
.sticky-header .header,
.sticky-header .header * {
  transition: background-color .2s, box-shadow .2s !important; /* keine padding/height */
}

/* 3) Mindesthöhe fixieren (verhindert “Zusammenklappen”)  */
@media (max-width: 989px){
  /* passe 64px an deine reale mobile Headerhöhe an (DevTools → computed height) */
  .header-wrapper { min-height: 64px; }
}
@media (min-width: 990px){
  /* passe 92px an deine reale Desktop-Headerhöhe an */
  .header-wrapper { min-height: 92px; }
}

/* 4) Sicherheitsnetz: kein Layout-Shift durch Shadow/Border-Animation */
.header-wrapper,
.header {
  will-change: auto; /* keine unnötigen Repaints planen */
}
@media (prefers-reduced-motion: reduce){
  .sticky-header .header, .sticky-header .header * { transition: none !important; }
}

/* === CLS Fixes (Google PSI) === */

/* Judge.me Sterne Container fixieren */
.jdgm-prev-badge__stars {
  display: inline-block;
  width: 100px;   /* ggf. anpassen: Breite für 5 Sterne */
  height: 20px;   /* Höhe für die Sterne */
}

/* Zähler Platz */
.jdgm-count-only {
  min-width: 4ch;   /* Platz für bis zu 9999 */
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* Unit Price reservieren */
.product__meta-unit-price {
  min-height: 1em;
  display: inline-block;
}

/* App-Bilder (z.B. Cookie-Banner Logo) */
.cc-banner-logo img {
  width: 40px;
  height: 40px;
}


/* =======================================================================================
   FIX: overflow: visible Deprecation Warning (PageSpeed Best Practices)
   Verhindert visuellen Content außerhalb der Element-Grenzen
   Referenz: https://github.com/WICG/view-transitions/blob/main/debugging_overflow_on_images.md
   ========================================================================== */

img,
video,
canvas {
  overflow: clip !important;
  overflow-clip-margin: content-box !important;
}

/* Fallback für ältere Browser die overflow: clip nicht unterstützen */
@supports not (overflow: clip) {
  img,
  video,
  canvas {
    overflow: hidden !important;
  }
}