/* ===================== Quiet Luxury – neutrales, zurückhaltendes UI ===================== */
  :root{
    /* Light */
    --bg:        #f6f7f9;
    --surface:   #ffffff;
    --card:      #ffffff;
    --text:      #111215;
    --muted:     #6b7280;
    --border:    #e8eaef;
    --accent:    #111215; /* sehr zurückhaltend genutzt */
    --ring:      rgba(0,0,0,.06);

    /* Basismetriken (Page) */
    --thumb:     104px;
    --gap:       14px;
    --pad:       14px;
    --radius:    12px;
    --fs-title:  14px;
    --fs-meta:   12px;
    --fs-price:  14px;
    --fs-unit:   12px;
    --fs-summary:14px;
    --fs-grand:  17px;

    --shadow-subtle: 0 1px 2px rgba(0,0,0,.02);
    --hairline: inset 0 0 0 .5px var(--border);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:        #0c0e12;
      --surface:   #0f1116;
      --card:      #11141b;
      --text:      #e9edf3;
      --muted:     #9aa3b2;
      --border:    #1d2430;
      --accent:    #e9edf3;
      --ring:      rgba(82,124,235,.28);

      --shadow-subtle: 0 1px 2px rgba(0,0,0,.18);
    }
  }

  /* Layout-Container */
  .cart{
    color: var(--text);
  }
  .cart-inner{ 
  margin: 0 auto;
  max-width:1200px;
  display:grid; 
  gap: 14px; 
  grid-template-columns: 2fr 1fr;
  }

  /* Kompaktere Metriken im Layer */
  .cart--layer{
    --thumb: 72px;
    --gap: 10px;
    --pad: 10px;
    --radius: 10px;
    --fs-title: 13px;
    --fs-meta: 11.5px;
    --fs-price: 12.5px;
    --fs-unit: 11.5px;
    --fs-summary: 12.5px;
    --fs-grand: 15.5px;

    max-width: 300px;
    padding: 10px;
  }
  .cart--page{
    padding: 12px;
    width:100%;
  }

  /* Liste */
  .cartList{ 
  display:grid; 
  gap: 10px; 
  }

  /* Card */
  .cartItem{
    display:grid;
    grid-template-columns: var(--thumb) 1fr auto;
    gap: var(--gap);
    align-items: start;

    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-subtle), var(--hairline);
    padding: var(--pad);
  }

  .cartItem-thumb{
    width: var(--thumb);
    height: var(--thumb);
    border-radius: calc(var(--radius) - 3px);
    overflow: hidden;
    display:block;
  }
  .cartItem-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform: translateZ(0);
  }

  .cartItem-body{ display:grid; gap: 6px; align-content:start; }
  .cartItem-title{
  	text-align: left;
    margin:0; font-weight: 700; letter-spacing:.1px;
    font-size: var(--fs-title); line-height: 1.35;
    color: inherit; text-decoration: none;
    display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  .cart-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size: 11px; letter-spacing:.04em; text-transform: uppercase;
    padding: 3px 0; border-radius: 999px;
    color: var(--muted);
    background: transparent;
  }

  .cart-meta{
    color: var(--muted);
    font-size: var(--fs-meta);
    display:flex; gap:10px; flex-wrap:wrap;
  }
  
  .cart-meta.tax{
    justify-content: flex-end;
  }

  .cartItem-tail{
    display:grid; gap: 8px;
    align-items:start; justify-items:end;
  }
  .cart-price{
    text-align:right; font-size: var(--fs-price);
    font-weight: 700; letter-spacing:.1px;
  }
  .cart-price .unit{
    display:block; font-size: var(--fs-unit);
    color: var(--muted); font-weight: 450; letter-spacing:.1px;
  }
  .price-old{ text-decoration: line-through; color: var(--muted); margin-right:6px; font-weight: 500; }
  .price-new{ color: var(--text); }

  .btn-remove{
    display:inline-flex; padding:6px; border-radius: 8px;
     background: transparent;
  }
  .btn-remove:hover{ background: rgba(0,0,0,.035); }
  @media (prefers-color-scheme: dark){
    .btn-remove:hover{ background: rgba(255,255,255,.04); }
  }

  /* Coupon/Felder – zurückhaltend */
  .coupon{
  	
    display: flex !important;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px !important;
    width: 100%; /* Sicherstellen, dass der Container die volle Breite nutzt */
    max-width: 100%; /* Verhindert Überlaufen */
    box-sizing: border-box;
  }
  
  .coupon input {
	   /* flex: 1; */
	    max-width: 200px; /* Anstatt 300px, damit es sich an den Container anpasst */
	    min-width: 0; /* Verhindert, dass das Input zu breit wird */
	    padding: 0px 15px;
	    border: 2px solid #dddddd;
	    border-radius: 6px;
	    background: #ffffff;
	    color: black;
	    font-size: 20px;
	    font-weight: 600; 
	    text-align: center;
	    outline: none;
	    margin:0px;
	    transition: all 0.3s ease;
	    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	    box-sizing: border-box; /* Wichtig, damit Padding/Border die Breite nicht sprengen */
	}
	
	
	input:focus,
	textarea:focus {
	    border-color: var(--theme_color);
    	box-shadow: 0 4px 12px var(--theme_color_shadow, rgba(0, 184, 182, 0.2));
	}
	
	input::placeholder,
	textarea::placeholder {
	    color: #999999; /* Mittelgrauer Platzhalter */
	}

  .btn-ghost{
    appearance:none; border:0;
    box-shadow: var(--hairline);
    background: transparent;
    color: var(--text);
    border-radius: 50px; padding: 9px 12px; font-weight:600; cursor:pointer;
    background-color:black;
    color:white;
  }
  .btn-ghost:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }

  /* Summary */
  .cartSummary{
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--hairline);
    padding: var(--pad);
    display:grid; gap: 6px;
    color: var(--text);
    margin:10px 0;
  }
  
  .cartSummary.layer{
    justify-content: unset;
    grid-template-columns: unset;
  }
  
  .cart-inner.layer,
  .cart-inner.checkout{ 
  grid-template-columns: unset;
  }
  
  .cart-inner.checkout{ 
  	top: 60px;
	position: sticky;
  }
  
  
  
  .cart--layer .cartSummary{ position: sticky; bottom: 0; }
  .sum-row{ display:flex; justify-content: space-between; font-size: var(--fs-summary); gap: 5em;}
  .sum-row span:last-child{ font-variant-numeric: tabular-nums; }
  .sum-grand{ font-weight: 800; font-size: var(--fs-grand); letter-spacing:.1px; }

  /* Infos (bestehend), dezenter */
  .cart-info {
    display: none;
    gap: 20px;
    align-items: center;
    justify-content: center;
    height: 40px;
    text-align: center;
    background: var(--card);
    box-shadow: var(--hairline);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden; /* Verhindert Überlappung während Animation */
}

.cart--info-product-deleted {
    /* display: flex;  Standardmäßig flex, wird nur durch display: none überschrieben */
}

.cart--info-product-deleted.show,
.cart--info-product-added.show {
	display: flex; 
    animation: slideDown 0.3s ease-in-out forwards;
}

.cart--info-product-deleted.hide,
.cart--info-product-added.hide {
	display: none; 
    animation: slideUp 0.3s ease-in-out forwards;
}

.cart--info-product-added img{
	width:20px;
}


@keyframes slideDown {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 40px;
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        height: 40px;
        opacity: 1;
    }
    to {
        height: 0;
        opacity: 0;
    }
}

/* Stabilisierung der Kinderlemente */
.cart--info-product-deleted span {
    line-height: 40px; /* Konsistente vertikale Ausrichtung */
    display: inline-flex; /* Verhindert Sprünge durch Textausrichtung */
    align-items: center;
}

.cart--info-product-deleted img {
    width: 45px;
    padding: 10px;
    flex-shrink: 0; /* Verhindert Verzerrung des Bildes */
}

	
  /* Responsive Page-Ansicht */
  @media (max-width: 760px){
  
  .cart-inner{ 
  display:grid; 
  gap: 14px; 
  grid-template-columns: unset;
  }
  
  .cartSummary{
     justify-content: unset;
  }
 
    .cart--page .cartItem{
      grid-template-columns: var(--thumb) 1fr;
    }
    .cart--page .cartItem-tail{
      grid-column: 1 / -1; justify-items:end;
    }
  }
  
  .buttons-container{
  width: 100%;
    margin: 0 auto;
    display: flex;
    max-width: 500px;
    flex-direction: column;
    align-content: center;
    justify-content: center;
  }
  
.express_checkout_title_box{
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    text-align: center;
}

.express_checkout_title_box .title{
	font-size:11pt;
	padding: 0 15px;
	color:#a0a0a0;
}

.express_checkout_title_box:before,
.express_checkout_title_box:after{
	border-top: none;
    border-left: none;
    border-right: none;
    border-style: solid;
    content: "";
    flex-grow: 1;
    width: unset;
    height: unset;
    border-color: 1px solid #dddddd;
    border-width: 1px;
    border-color: #efefef;
}

.express_checkout_title_box.layer:before,
.express_checkout_title_box.layer:after{
    border-color: 1px solid #d1d1d1;
    border-color: #d1d1d1;
}


.checkout_vorteile{
	gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkout_vorteile .vorteile_element{
	display:flex;
}

.checkout_vorteile .icon_svg svg,
.checkout_vorteile .icon_svg img{
	width: 60px;
    height: 60px;
    padding: 0px;
    margin: 0px;
}


.checkout_vorteile .cart_vorteile_text{
	font-size: 0.75em;
    text-align: left;
    padding-left: 10px;
    padding-top: 5px;
    max-width: 350px;
}

.title_box_cart{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.title_box_cart .button_white{
	font-size: 10pt;
    color: #797979;
	margin: 0px;
    padding: 5px 10px;
	background-color: #f8f8f8;
	box-shadow: rgba(0, 0, 0, .2) -1px 15px 18px -6px, rgba(0, 0, 0, 0.15) -8px -1px 9px -10px, rgb(255 255 255 / 100%) -3px -3px 10px 5px, rgb(255 255 255 / 23%) -5px 0px 9px 1px;
}

.title_cart{
	display: block;
    font-size: 15pt;
    text-transform: uppercase;
    display: block;
    font-size: 15pt;
    text-transform: uppercase;
    margin: 0px;
}



/* Standard-Styling für den PayPal-Button-Container */
.paypal-express-button {
    position: relative;
    overflow: hidden; /* Verhindert, dass der Gradient außerhalb des Elements sichtbar ist */
    height: 190px; /* Stellt sicher, dass der Container eine Mindesthöhe hat */
    display: block;
    border-radius:20px;
	padding: 0 10px;
}

.paypal-express-button.layer {
    height: 156px; /* Stellt sicher, dass der Container eine Mindesthöhe hat */
   
}

/* Klasse für den Ladeeffekt */
.paypal-express-button.loading-gradient::before {
    content: '';
    position: absolute;
    top: -100%; /* Startet den Gradienten außerhalb des Elements */
    left: 0%; 
    height: 200%; /* Breiter als das Element, um die Animation zu ermöglichen */
    width: 100%;
    background: linear-gradient(360deg, 
    rgba(255, 255, 255, 0.2) 0%, 
    rgb(211 211 211 / 50%) 50%, 
    rgb(255 255 255 / 20%) 100%); /* Heller Gradient für den Schimmereffekt */
    animation: gradientShift 2s linear infinite; /* Endlose Animation */
    z-index: 1; /* Über dem Button, aber unter dem Inhalt */
    
}

/* Animation für den Gradienten */
@keyframes gradientShift {
    0% {
        transform: translateY(-100px);
    }
    50% {
        transform: translateY(100%); /* Verschiebt den Gradienten nach unten */
    }
    100% {
        transform: translateY(-100px); /* Verschiebt den Gradienten nach unten */
    }
}

/* Sobald der Button gerendert ist, kein Gradient mehr */
.paypal-express-button.paypal-button-rendered::before {
    display: none; /* Entfernt den Gradienten */
}

/* Sobald der Button gerendert ist, kein Gradient mehr */
.paypal-express-button.paypal-button-rendered{
    height:auto; 
    border-radius:0px;
}