/* ========================================
   ULTRA THEME - BUTTON SYSTEM (ERWEITERT)
   Konsolidierte Button-Styles mit CSS Variables
   Version: 2.1.0 - Slider-kompatibel
======================================== */

/* ========================================
   BASE BUTTON - Foundation for all buttons
======================================== */

.btn,
.button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
/* SLIDER BUTTONS - Zusätzliche Selektoren */
.ultra-product-slider .add_to_cart_button,
.ultra-product-slider .ajax_add_to_cart,
.ultra-product-slider .button.product_type_simple,
.ultra-product-slider .product_type_variable,
.ultra-product-slider a.button {
  /* Reset */
  appearance: none;
  border: 0;
  margin: 0;
  background: none;
  font: inherit;
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ultra-space-8);
  
  /* Sizing */
  min-height: var(--ultra-button-height);
  padding: var(--ultra-button-padding-y) var(--ultra-button-padding-x);
  
  /* Typography */
  font-family: var(--ultra-font-primary);
  font-size: var(--ultra-text-base);
  font-weight: var(--ultra-weight-semibold);
  line-height: var(--ultra-leading-none);
  text-decoration: none;
  white-space: nowrap;
  
  /* Visual */
  border-radius: var(--ultra-radius-xl);
  cursor: pointer;
  transition: all var(--ultra-transition-normal);
  
  /* Default State - Secondary Style */
  background: var(--ultra-bg);
  color: var(--ultra-text);
  border: 1px solid var(--ultra-border-dark);
  box-shadow: var(--ultra-shadow-xs);
}

/* Base Hover State */
.btn:hover,
.button:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.ultra-product-slider .add_to_cart_button:hover,
.ultra-product-slider .ajax_add_to_cart:hover,
.ultra-product-slider .button.product_type_simple:hover,
.ultra-product-slider .product_type_variable:hover,
.ultra-product-slider a.button:hover {
  background: var(--ultra-black);
  color: var(--ultra-bg);
  border-color: var(--ultra-black);
  box-shadow: var(--ultra-shadow-md);
  transform: translateY(-1px);
}

/* Base Active State */
.btn:active,
.button:active,
.woocommerce .button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.ultra-product-slider .add_to_cart_button:active,
.ultra-product-slider .ajax_add_to_cart:active,
.ultra-product-slider .button.product_type_simple:active,
.ultra-product-slider .product_type_variable:active,
.ultra-product-slider a.button:active {
  transform: translateY(0);
  box-shadow: var(--ultra-shadow-sm);
}

/* Base Focus State */
.btn:focus-visible,
.button:focus-visible,
.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.ultra-product-slider .add_to_cart_button:focus-visible,
.ultra-product-slider .ajax_add_to_cart:focus-visible,
.ultra-product-slider .button.product_type_simple:focus-visible,
.ultra-product-slider .product_type_variable:focus-visible,
.ultra-product-slider a.button:focus-visible {
  outline: 2px solid var(--ultra-border-focus);
  outline-offset: var(--ultra-space-2);
}

/* Disabled State */
.btn:disabled,
.button:disabled,
.woocommerce .button:disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.ultra-product-slider .add_to_cart_button:disabled,
.ultra-product-slider .ajax_add_to_cart:disabled,
.ultra-product-slider .button.product_type_simple:disabled,
.ultra-product-slider .product_type_variable:disabled,
.ultra-product-slider a.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--ultra-shadow-xs);
}

/* ========================================
   BUTTON VARIANTS
======================================== */

/* PRIMARY BUTTON - Dark background, light text */
.btn--primary,
.button--primary,
.single_add_to_cart_button,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce a.checkout-button,
.woocommerce .checkout-button,
.woocommerce button[name="update_cart"],
.woocommerce button[name="proceed"],
.woocommerce a.wc-forward.checkout,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--ultra-black);
  color: var(--ultra-bg);
  border-color: var(--ultra-black);
  box-shadow: var(--ultra-shadow-sm);
}

.btn--primary:hover,
.button--primary:hover,
.single_add_to_cart_button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .checkout-button:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce a.wc-forward.checkout:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--ultra-black-hover);
  color: var(--ultra-bg);
  border-color: var(--ultra-black-hover);
  box-shadow: var(--ultra-shadow-lg);
  transform: translateY(-1px);
}

/* SECONDARY BUTTON - Light background, dark text */
.btn--secondary,
.button--secondary {
  background: transparent;
  color: var(--ultra-text);
  border-color: var(--ultra-border-focus);
}

.btn--secondary:hover,
.button--secondary:hover {
  background: var(--ultra-black);
  color: var(--ultra-bg);
  border-color: var(--ultra-black);
}

/* OUTLINE BUTTON - Transparent with border */
.btn--outline,
.button--outline {
  background: transparent;
  color: var(--ultra-black);
  border-color: var(--ultra-black);
}

.btn--outline:hover,
.button--outline:hover {
  background: var(--ultra-black);
  color: var(--ultra-bg);
}

/* GHOST BUTTON - Minimal styling */
.btn--ghost,
.button--ghost {
  background: transparent;
  color: var(--ultra-text-muted);
  border-color: transparent;
  box-shadow: none;
}

.btn--ghost:hover,
.button--ghost:hover {
  background: var(--ultra-bg-light);
  color: var(--ultra-text);
  border-color: var(--ultra-border);
}

/* ACCENT BUTTON - Brand color */
.btn--accent,
.button--accent {
  background: var(--ultra-accent);
  color: var(--ultra-bg);
  border-color: var(--ultra-accent);
}

.btn--accent:hover,
.button--accent:hover {
  background: var(--ultra-accent-hover);
  border-color: var(--ultra-accent-hover);
  box-shadow: var(--ultra-shadow-accent);
}

/* ========================================
   BUTTON SIZES
======================================== */

/* Small Button */
.btn--sm,
.button--sm {
  min-height: var(--ultra-button-height-sm);
  padding: var(--ultra-space-8) var(--ultra-space-12);
  font-size: var(--ultra-text-sm);
  gap: var(--ultra-space-6);
}

/* Large Button */
.btn--lg,
.button--lg {
  min-height: var(--ultra-button-height-lg);
  padding: var(--ultra-space-16) var(--ultra-space-24);
  font-size: var(--ultra-text-lg);
  gap: var(--ultra-space-10);
}

/* Extra Large Button */
.btn--xl,
.button--xl {
  min-height: 60px;
  padding: var(--ultra-space-20) var(--ultra-space-32);
  font-size: var(--ultra-text-xl);
  gap: var(--ultra-space-12);
}

/* Full Width Button */
.btn--full,
.button--full {
  width: 100%;
}

/* ========================================
   ICON BUTTONS
======================================== */

/* Icon Only Button */
.btn--icon,
.button--icon {
  width: var(--ultra-button-height);
  padding: 0;
  font-size: 0;
  position: relative;
  border-radius: var(--ultra-radius-md);
}

.btn--icon::before,
.button--icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--ultra-space-18);
  height: var(--ultra-space-18);
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Icon + Text Button */
.btn--icon-text::before,
.button--icon-text::before {
  content: '';
  display: inline-block;
  width: var(--ultra-space-16);
  height: var(--ultra-space-16);
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* ========================================
   WOOCOMMERCE SPECIFIC BUTTONS
======================================== */

/* Add to Cart Buttons */
.add_to_cart_button,
.single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button,
/* SLIDER Add to Cart */
.ultra-product-slider .add_to_cart_button,
.ultra-product-slider .ajax_add_to_cart,
.ultra-product-slider .button.product_type_simple,
.ultra-product-slider a.button {
  background: var(--ultra-black);
  color: var(--ultra-bg);
  border-color: var(--ultra-black);
}

/* ========================================
   SLIDER SPECIFIC ICON BUTTONS
======================================== */

/* Desktop - Icon-Only Buttons für Slider UND normale Shop-Ansicht */
@media (min-width: 769px) {
  
  /* ===== ADD TO CART BUTTONS (Simple Products) ===== */
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce ul.products li.product .product_type_simple,
  .ultra-product-slider .add_to_cart_button,
  .ultra-product-slider .ajax_add_to_cart,
  .ultra-product-slider .button.product_type_simple,
  .ultra-product-slider a.button {
    /* Text komplett verstecken */
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    
    /* Icon-Container */
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    
    /* Design */
    background: var(--ultra-black) !important;
    color: var(--ultra-bg) !important;
    border: 1px solid var(--ultra-black) !important;
    border-radius: var(--ultra-radius-md) !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    
    /* Behavior */
    cursor: pointer !important;
    transition: all var(--ultra-transition-normal) !important;
  }
  
  /* Add to Cart Icon */
  .woocommerce ul.products li.product .add_to_cart_button::before,
  .woocommerce ul.products li.product .product_type_simple::before,
  .ultra-product-slider .add_to_cart_button::before,
  .ultra-product-slider .ajax_add_to_cart::before,
  .ultra-product-slider .button.product_type_simple::before,
  .ultra-product-slider a.button::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--ultra-bg) !important; /* Weißes Icon auf schwarzem Button */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23000" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14l.84-2h8l2.76-7H6.21l-.94-2H1v2h2l3.6 7.59L5.25 16c-.2.45-.25.94-.25 1.41C5 18.3 5.7 19 6.59 19H19v-2H6.42c-.14 0-.25-.11-.25-.25l.99-2.75z"/></svg>') !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
  }
  
  /* Add to Cart Hover - Button wird weiß, Icon wird schwarz */
  .woocommerce ul.products li.product .add_to_cart_button:hover,
  .woocommerce ul.products li.product .product_type_simple:hover,
  .ultra-product-slider .add_to_cart_button:hover,
  .ultra-product-slider .ajax_add_to_cart:hover,
  .ultra-product-slider .button.product_type_simple:hover,
  .ultra-product-slider a.button:hover {
    background: var(--ultra-bg) !important;
    color: var(--ultra-black) !important;
    border-color: var(--ultra-black) !important;
    transform: translateY(-1px) !important;
  }
  
  .woocommerce ul.products li.product .add_to_cart_button:hover::before,
  .woocommerce ul.products li.product .product_type_simple:hover::before,
  .ultra-product-slider .add_to_cart_button:hover::before,
  .ultra-product-slider .ajax_add_to_cart:hover::before,
  .ultra-product-slider .button.product_type_simple:hover::before,
  .ultra-product-slider a.button:hover::before {
    background: var(--ultra-black) !important; /* Schwarzes Icon auf weißem Button */
  }
  
  /* ===== VARIABLE PRODUCT BUTTONS ===== */
  .woocommerce ul.products li.product .product_type_variable.button,
  .ultra-product-slider .product_type_variable {
    /* Text komplett verstecken */
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    
    /* Icon-Container */
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    
    /* Design - SCHWARZ wie Add to Cart */
    background: var(--ultra-black) !important;
    color: var(--ultra-bg) !important;
    border: 1px solid var(--ultra-black) !important;
    border-radius: var(--ultra-radius-md) !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    
    /* Behavior */
    cursor: pointer !important;
    transition: all var(--ultra-transition-normal) !important;
  }
  
  /* Variable Product Icon - WEISS auf schwarzem Button */
  .woocommerce ul.products li.product .product_type_variable.button::before,
  .ultra-product-slider .product_type_variable::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--ultra-bg) !important; /* Weißes Icon */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 22a2 2 0 1 1 0-4h10a2 2 0 1 1 0 4H7Zm-1-7v-2h12v2H6ZM4 9V7h16v2H4Zm2-5a2 2 0 1 1 0-4h12a2 2 0 1 1 0 4H6Z"/></svg>') !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
  }
  
  /* Variable Product Hover - WEISS mit schwarzem Icon */
  .woocommerce ul.products li.product .product_type_variable.button:hover,
  .ultra-product-slider .product_type_variable:hover {
    background: var(--ultra-bg) !important;
    color: var(--ultra-black) !important;
    border-color: var(--ultra-black) !important;
    transform: translateY(-1px) !important;
  }
  
  .woocommerce ul.products li.product .product_type_variable.button:hover::before,
  .ultra-product-slider .product_type_variable:hover::before {
    background: var(--ultra-black) !important; /* Schwarzes Icon auf weißem Button */
  }
}

/* Mobile - Icon Only Add to Cart */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce ul.products li.product .product_type_simple,
  .ultra-product-slider .add_to_cart_button,
  .ultra-product-slider .ajax_add_to_cart,
  .ultra-product-slider .button.product_type_simple,
  .ultra-product-slider a.button {
    width: var(--ultra-space-36);
    height: var(--ultra-space-32);
    padding: 0;
    font-size: 0;
    border-radius: var(--ultra-radius-md);
    background: var(--ultra-black);
    border-color: var(--ultra-black);
    position: relative;
  }
  
  .woocommerce ul.products li.product .add_to_cart_button::before,
  .woocommerce ul.products li.product .product_type_simple::before,
  .ultra-product-slider .add_to_cart_button::before,
  .ultra-product-slider .ajax_add_to_cart::before,
  .ultra-product-slider .button.product_type_simple::before,
  .ultra-product-slider a.button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--ultra-space-16);
    height: var(--ultra-space-16);
    background: var(--ultra-bg);
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23000" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14l.84-2h8l2.76-7H6.21l-.94-2H1v2h2l3.6 7.59L5.25 16c-.2.45-.25.94-.25 1.41C5 18.3 5.7 19 6.59 19H19v-2H6.42c-.14 0-.25-.11-.25-.25l.99-2.75z"/></svg>');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  
  /* Mobile - Variable Product Icon Only */
  .woocommerce ul.products li.product .product_type_variable.button,
  .ultra-product-slider .product_type_variable {
    font-size: 0;
    color: transparent;
    background: var(--ultra-black);
    border: 1px solid var(--ultra-black);
    padding: 0;
    width: var(--ultra-space-36);
    height: var(--ultra-space-32);
    border-radius: var(--ultra-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }
  
  .woocommerce ul.products li.product .product_type_variable.button::before,
  .ultra-product-slider .product_type_variable::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--ultra-space-16);
    height: var(--ultra-space-16);
    background: var(--ultra-bg);
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 22a2 2 0 1 1 0-4h10a2 2 0 1 1 0 4H7Zm-1-7v-2h12v2H6ZM4 9V7h16v2H4Zm2-5a2 2 0 1 1 0-4h12a2 2 0 1 1 0 4H6Z"/></svg>') center/contain no-repeat;
  }
}

/* ========================================
   SPECIAL BUTTONS
======================================== */

/* Close Button */
.btn--close,
.button--close,
.ultra-qv-close,
.ufc-close {
  width: var(--ultra-space-40);
  height: var(--ultra-space-40);
  border-radius: var(--ultra-radius-full);
  background: var(--ultra-bg);
  border: 1px solid var(--ultra-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ultra-text-lg);
  line-height: var(--ultra-leading-none);
  cursor: pointer;
  transition: all var(--ultra-transition-normal);
  backdrop-filter: blur(10px);
}

.btn--close:hover,
.button--close:hover,
.ultra-qv-close:hover,
.ufc-close:hover {
  transform: scale(1.08);
  background: var(--ultra-bg);
  box-shadow: var(--ultra-shadow-md);
}

/* Navigation Buttons - NUR für Hero/Rail, NICHT für Slider */
.btn--nav,
.button--nav,
.hero-prev,
.hero-next,
.rail-prev,
.rail-next {
  width: var(--ultra-space-56);
  height: var(--ultra-space-56);
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  color: var(--ultra-bg);
  cursor: pointer;
  font-size: var(--ultra-space-20);
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ultra-transition-bounce);
  position: relative;
  overflow: hidden;
  border-radius: var(--ultra-radius-full);
}

.btn--nav::before,
.button--nav::before,
.hero-prev::before,
.hero-next::before,
.rail-prev::before,
.rail-next::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ultra-radius-full);
  transition: transform var(--ultra-transition-bounce);
  z-index: -1;
}

.btn--nav:hover::before,
.button--nav:hover::before,
.hero-prev:hover::before,
.hero-next:hover::before,
.rail-prev:hover::before,
.rail-next:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.btn--nav:hover,
.button--nav:hover,
.hero-prev:hover,
.hero-next:hover,
.rail-prev:hover,
.rail-next:hover {
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
  box-shadow: var(--ultra-shadow-xl);
}

/* Cart Buttons in Flyout */
.ufc-link-cart,
.ufc-link-checkout {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--ultra-space-48);
  width: 100%;
  text-decoration: none;
  border-radius: var(--ultra-radius-md);
  font-weight: var(--ultra-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--ultra-text-sm);
  transition: all var(--ultra-transition-normal);
  margin: 0;
  box-sizing: border-box;
}

.ufc-link-cart {
  background: var(--ultra-bg);
  color: var(--ultra-text);
  border: 2px solid var(--ultra-black);
}

.ufc-link-cart:hover {
  background: var(--ultra-black);
  color: var(--ultra-bg);
  text-decoration: none;
}

.ufc-link-checkout {
  background: var(--ultra-black);
  color: var(--ultra-bg);
  border: 2px solid var(--ultra-black);
}

.ufc-link-checkout:hover {
  background: var(--ultra-black-light);
  border-color: var(--ultra-black-light);
  text-decoration: none;
}

/* ========================================
   BUTTON LOADING STATES
======================================== */

.btn--loading,
.button--loading,
.loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn--loading::after,
.button--loading::after,
.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ultra-space-16);
  height: var(--ultra-space-16);
  margin: calc(var(--ultra-space-8) * -1) 0 0 calc(var(--ultra-space-8) * -1);
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: var(--ultra-radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 480px) {
  .btn--nav,
  .button--nav,
  .hero-prev,
  .hero-next,
  .rail-prev,
  .rail-next {
    width: var(--ultra-space-48);
    height: var(--ultra-space-48);
    font-size: var(--ultra-space-18);
  }
  
  .woocommerce ul.products li.product .product_type_variable.button,
  .ultra-product-slider .product_type_variable {
    width: var(--ultra-space-32);
    height: var(--ultra-space-28);
  }
  
  .woocommerce ul.products li.product .add_to_cart_button,
  .ultra-product-slider .add_to_cart_button,
  .ultra-product-slider .ajax_add_to_cart,
  .ultra-product-slider .button.product_type_simple,
  .ultra-product-slider a.button {
    width: var(--ultra-space-44);
    height: var(--ultra-space-28);
  }
  
  /* SPEZIFISCHE MOBILE SLIDER VARIABLE PRODUCT BUTTON FORMATIERUNG */
  .ultra-product-slider .product_type_variable {
    width: 44px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: var(--ultra-black) !important;
    border: 1px solid var(--ultra-black) !important;
    cursor: pointer !important;
    position: relative !important;
    
    /* Text verstecken */
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    color: transparent !important;
  }
  
  .ultra-product-slider .product_type_variable::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--ultra-bg) !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 22a2 2 0 1 1 0-4h10a2 2 0 1 1 0 4H7Zm-1-7v-2h12v2H6ZM4 9V7h16v2H4Zm2-5a2 2 0 1 1 0-4h12a2 2 0 1 1 0 4H6Z"/></svg>') !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    z-index: 10 !important;
  }
  
  .ultra-product-slider .product_type_variable:hover {
    background: var(--ultra-bg) !important;
    border-color: var(--ultra-black) !important;
  }
  
  .ultra-product-slider .product_type_variable:hover::before {
    background: var(--ultra-black) !important;
  }
}

/* ========================================
   ACCESSIBILITY & REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .button,
  .btn--nav,
  .button--nav,
  .hero-prev,
  .hero-next,
  .rail-prev,
  .rail-next {
    transition: none !important;
  }
  
  .btn--loading::after,
  .button--loading::after,
  .loading::after {
    animation: none !important;
  }
}

/* ========================================
   WISHLIST SYSTEM
   ======================================== */

/* Card Wishlist Button - Hauptcontainer */
.ultra-card__wishlist {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 99;
}

/* Fallback für leere Wishlist-Container - Verstecktes Herz-Icon */
.ultra-card__wishlist:empty {
  display: none;
}

/* Beide Wishlist Button Varianten unterstützen */
.ultra-wishlist-btn,
.ultra-wish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  position: relative;
}

.ultra-wishlist-btn:hover,
.ultra-wish:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  border-color: #ccc;
}

/* Heart Icon */
.ultra-wishlist-btn .uw-heart,
.ultra-wish .uw-heart,
.ultra-wish .ico {
  width: 22px;
  height: 22px;
  background: #c2c2c2;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.09 4.81 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center/contain no-repeat;
  transition: background .2s ease;
  display: block;
}

/* Active States - Gefülltes Herz */
.ultra-wishlist-btn.is-active,
.ultra-wishlist-btn[data-active="1"],
.ultra-wishlist-btn[aria-pressed="true"],
.ultra-wish.is-active,
.ultra-wish[aria-pressed="true"] {
  border-color: #e74c3c;
  background: #fff;
}

.ultra-wishlist-btn.is-active .uw-heart,
.ultra-wishlist-btn[data-active="1"] .uw-heart,
.ultra-wishlist-btn[aria-pressed="true"] .uw-heart,
.ultra-wish.is-active .uw-heart,
.ultra-wish.is-active .ico,
.ultra-wish[aria-pressed="true"] .uw-heart,
.ultra-wish[aria-pressed="true"] .ico {
  background: #e74c3c;
}

/* Fallback für direktes Wishlist-Icon ohne Container */
ul.products li.product .ultra-wish,
ul.products li.product .ultra-wishlist-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 5;
}

/* Sicherstellen, dass es über anderen Elementen liegt */
ul.products li.product {
  position: relative;
}

/* ========================================
   WISHLIST FALLBACK - Für fehlende PHP Integration
   ======================================== */

/* Wenn der Container leer ist, erstelle einen Standard-Button */
.ultra-card__wishlist:empty::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  position: relative;
}

.ultra-card__wishlist:empty::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #c2c2c2;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.09 4.81 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center/contain no-repeat;
  pointer-events: none;
}

.ultra-card__wishlist:empty:hover::before {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  border-color: #ccc;
}

/* Korrektur: Leere Container wieder anzeigen für Fallback */
.ultra-card__wishlist:empty {
  display: block;
}

/* PDP Wishlist Heart */
.ultra-product-wishlist {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.ultra-wishlist-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.ultra-wishlist-heart svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #999;
  stroke-width: 2;
  transition: all .2s ease;
}

.ultra-wishlist-heart:hover {
  border-color: #111;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.ultra-wishlist-heart.is-active {
  border-color: #e74c3c;
  background: #e74c3c;
}

.ultra-wishlist-heart.is-active svg {
  fill: #fff;
  stroke: #fff;
}